@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@layer base{:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page-bg:#0b121e;--panel-bg:#0f1729;--nav-bg:#0a111ecc;--border-muted:#94a3b833;--text-primary:#fff;--text-muted:#94a3b8;--accent:#ff7a38;--accent-strong:#ff4800;--switch-track:#ff480047;--switch-thumb:#e1f3fe;--panel-shadow:0 30px 70px #02081780;--canvas-bg:#0b111e;font-family:Plus Jakarta Sans,sans-serif;font-weight:500;line-height:1.5}:root[data-theme=light]{--page-bg:#f8fafc;--panel-bg:#fff;--nav-bg:#f8fafce6;--border-muted:#0f17291f;--text-primary:#0f1729;--text-muted:#435670;--accent:#ff7a38;--accent-strong:#ff4800;--switch-track:#ff480038;--switch-thumb:#f0f9ff;--panel-shadow:0 24px 50px #0f17291f;--canvas-bg:#f1f5f9}*,:before,:after{box-sizing:border-box}body{background:var(--page-bg);min-width:320px;min-height:100vh;color:var(--text-primary);margin:0}#root{min-height:100vh}a{color:inherit}button{font-family:inherit}}@layer composition{.appLayout{flex-direction:column;min-height:100vh;display:flex}.appHeader{z-index:20;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.navRoot{flex:1;justify-content:center;display:flex}.navList{align-items:center;gap:18px;margin:0;padding:0;list-style:none;display:flex}.headerActions{align-items:center;gap:16px;display:flex}.themeToggle{border-radius:999px;align-items:center;gap:10px;padding:6px 10px;display:flex}.appMain{flex:1;justify-content:center;gap:20px;padding:24px 28px 32px;display:flex}.canvasFrame{border-radius:28px;flex:1;min-height:420px;position:relative;overflow:hidden}.artistCanvas{touch-action:none;width:100%;height:100%;position:relative}.artistCanvas canvas{width:100%;height:100%;display:block}.authPanel{border-radius:18px;flex-direction:column;align-self:flex-start;gap:8px;padding:16px 18px;display:inline-flex}@media (max-width:900px){.appHeader{flex-wrap:wrap;gap:12px}.appMain{padding:20px}}@media (max-width:720px){.appHeader{padding:16px 18px}.navList{flex-wrap:wrap}.appMain{justify-content:center}.canvasFrame{flex:none;height:clamp(360px,70vh,560px)}}}@layer blocks{.appLayout{background:var(--page-bg);color:var(--text-primary)}.appHeader{background:var(--nav-bg);border-bottom:1px solid var(--border-muted);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand{font-weight:700}.brandMark{background:linear-gradient(145deg,var(--accent-strong),var(--accent));color:#07121c;border-radius:12px;place-items:center;width:34px;height:34px;font-size:1.125rem;display:grid}.brandName{letter-spacing:.04em;text-transform:uppercase;font-size:1.05rem;font-weight:700}.navLink{color:var(--text-muted);letter-spacing:.02em;border-radius:999px;align-items:center;padding:8px 14px;font-size:.95rem;font-weight:600;text-decoration:none;transition:color .2s,background .2s;display:inline-flex}.navLink:hover{color:var(--text-primary);background:#ff7a381f}.themeToggle{background:0 0;border:none}.themeIconButton{width:34px;height:34px;color:var(--text-muted);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:color .2s,background .2s;display:inline-flex}.themeIconButton svg{width:18px;height:18px;transition:transform .25s,opacity .25s}.themeIconButton.isActive{color:var(--text-primary)}.themeIconButton:hover{color:var(--text-primary);background:#ff7a381f}:root[data-theme=dark] .themeIconButton svg{transform:rotate(-8deg)scale(1.02)}:root[data-theme=light] .themeIconButton svg{transform:rotate(8deg)scale(1.02)}@media (prefers-reduced-motion:reduce){.themeIconButton svg{transition:none}}.canvasFrame{background:var(--panel-bg);border:1px solid var(--border-muted);box-shadow:var(--panel-shadow)}:root[data-theme=dark] .brandMark{color:#fff}.artistCanvas canvas{cursor:grab}.title{letter-spacing:.02em;font-size:.95rem;font-weight:700}.subtitle{opacity:.8;margin-top:4px;font-size:.85rem}.tooltip{pointer-events:none;color:#ffffffeb;white-space:nowrap;background:#0000008c;border-radius:10px;padding:6px 8px;font-size:.85rem;position:absolute}.authPanel{border:1px solid var(--border-muted);color:var(--text-primary);text-align:left;background:#070b12b3}:root[data-theme=light] .authPanel{border:1px solid var(--border-muted);color:var(--text-primary);text-align:left;background-color:#0000}.overlayTitle{margin-bottom:6px;font-size:1rem;font-weight:700}.overlayBody{color:var(--text-muted);margin-bottom:14px;font-size:.9rem}.overlayButton{background:radial-gradient(circle at 20% 20%,var(--accent-strong),var(--accent)55%,var(--accent-strong)75%)0 0/140% 140%;color:#000;letter-spacing:.02em;border:none;border-radius:999px;padding:10px 18px;font-weight:700;transition:background-position .4s,filter .3s;box-shadow:0 14px 30px #ff48001a}.overlayButton:hover{filter:brightness(1.03);background-position:100% 100%}.demoLink{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px 0;font-size:.85rem;font-weight:600}.demoLink:hover{color:var(--text-primary)}@media (prefers-reduced-motion:reduce){.overlayButton{transition:none}}}@layer utilities;