:root{--ink: #1a1a1a;--signal: #ff5a1f;--mist-1: #c9d6df;--mist-2: #e7eef3;--mist-3: #f4f7f9;--paper: #f7f5f1;--panel: rgba(247, 245, 241, .82);--line: rgba(26, 26, 26, .08);--shadow: 0 24px 60px rgba(20, 35, 45, .18);--ease: cubic-bezier(.22, 1, .36, 1)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;color:var(--ink);font-family:Figtree,system-ui,sans-serif;background:radial-gradient(1200px 700px at 12% -10%,rgba(255,90,31,.18),transparent 55%),radial-gradient(900px 600px at 90% 0%,rgba(0,168,150,.16),transparent 50%),linear-gradient(160deg,var(--mist-1),var(--mist-2) 45%,var(--mist-3));overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");mix-blend-mode:soft-light}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes draw-line{0%{stroke-dashoffset:120}to{stroke-dashoffset:0}}@keyframes pulse-ring{0%,to{transform:scale(1);opacity:.55}50%{transform:scale(1.08);opacity:1}}.studio{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;height:100dvh;padding:20px;overflow:hidden}.studio__header{display:flex;align-items:end;justify-content:space-between;gap:16px;animation:rise-in .7s var(--ease) both}.brand{display:flex;flex-direction:column;gap:4px}.brand__mark{display:inline-flex;align-items:center;gap:10px;font-family:Syne,system-ui,sans-serif;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;letter-spacing:-.06em;line-height:.9}.brand__mark svg{width:1.05em;height:1.05em}.brand__mark path{fill:none;stroke:var(--signal);stroke-width:8;stroke-linecap:round;stroke-dasharray:120;animation:draw-line 1.2s var(--ease) .2s both}.brand__tag{margin:0;color:#5a646c;font-size:.95rem;font-weight:500}.hint{display:none;color:#5a646c;font-size:.8rem;font-weight:600;letter-spacing:.02em}.studio__body{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;min-height:0;height:100%;animation:rise-in .8s var(--ease) 80ms both}.toolbar{display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 10px;border:1px solid var(--line);border-radius:24px;background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);overflow:auto;max-height:100%;scrollbar-width:thin}.toolbar__section{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.toolbar__divider{width:36px;height:1px;background:var(--line)}.tool-btn{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--ink);cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}.tool-btn:hover:not(:disabled){background:#1a1a1a0d;transform:translateY(-1px)}.tool-btn:disabled{opacity:.35;cursor:not-allowed}.tool-btn.is-active{border-color:#ff5a1f59;background:#ff5a1f1f;color:var(--signal)}.tool-btn.is-active:after{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:10px;border:1px solid rgba(255,90,31,.25);animation:pulse-ring 2.4s ease-in-out infinite;pointer-events:none}.tool-btn svg{width:22px;height:22px}.swatches{display:grid;grid-template-columns:1fr 1fr;gap:8px}.swatch{width:28px;height:28px;border:2px solid rgba(26,26,26,.08);border-radius:999px;cursor:pointer;transition:transform .16s var(--ease)}.swatch:hover{transform:scale(1.08)}.swatch.is-active{outline:2px solid var(--ink);outline-offset:2px}.swatch--light{box-shadow:inset 0 0 0 1px #1a1a1a1f}.width-control{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:4px 0 8px}.width-preview{width:40px;height:40px;display:grid;place-items:center}.width-preview__dot{border-radius:999px;background:var(--ink)}.width-control input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:110px;accent-color:var(--signal);cursor:pointer}.opacity-control{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}.opacity-control__label{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#5a646c}.opacity-control input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:72px;accent-color:var(--signal);cursor:pointer}.stage{position:relative;min-width:0;min-height:280px;height:100%;border-radius:28px;overflow:hidden;border:1px solid rgba(26,26,26,.08);background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 30%),var(--paper);box-shadow:var(--shadow)}.stage__canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.stage__canvas.is-eraser,.stage__canvas.is-fill{cursor:cell}.stage__canvas.is-eyedropper{cursor:copy}.stage__canvas.is-shape,.stage__canvas.is-marker{cursor:crosshair}.stage__glow{position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,90,31,.05))}@media (min-width: 900px){.hint{display:block;text-align:right;max-width:280px}}@media (max-width: 720px){.studio{padding:12px;gap:12px}.studio__body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.toolbar{flex-direction:row;flex-wrap:wrap;justify-content:center;border-radius:20px;padding:12px}.toolbar__section{flex-direction:row;width:auto}.toolbar__divider{width:1px;height:36px}.width-control{flex-direction:row;padding:0}.width-control input[type=range],.opacity-control input[type=range]{writing-mode:horizontal-tb;direction:ltr;width:110px;height:28px}.opacity-control{flex-direction:row}.stage{min-height:55dvh;border-radius:22px}}