:root{color-scheme:dark;--bg:#0d1119;--panel:#151b25;--line:#2b3543;--muted:#8290a1;--text:#e6ecf1;--accent:#f8ad66}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em;background:radial-gradient(circle at 53% 28%,#182333 0,#101720 42%,#0d1119 80%)}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{max-width:1760px;min-height:100vh;margin:auto;padding:0 36px;display:flex;flex-direction:column}
.topbar{height:84px;flex:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #303a48}
.brand-wrap{display:flex;align-items:center;gap:14px}
.brand-mark{position:relative;width:33px;height:33px;transform:rotate(-15deg)}
.brand-mark i{position:absolute;width:8px;height:8px;border-radius:2px;background:#f3a463;box-shadow:0 0 12px #e98f5055}
.brand-mark i:nth-child(1){left:12px;top:0;background:#ffd098}.brand-mark i:nth-child(2){left:0;top:12px;background:#67b6d9}.brand-mark i:nth-child(3){left:12px;top:12px;background:#f39b5b}.brand-mark i:nth-child(4){left:24px;top:24px;background:#9ccc7a}
.brand{font-size:23px;line-height:1;font-weight:850;letter-spacing:.16em}.brand-dot{color:#f5a564}.brand-sub{margin-top:7px;font-size:8px;letter-spacing:.29em;font-weight:750;color:#94a2b0}
.topbar-right{display:flex;align-items:center;gap:23px;font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:#9ca9b8}.live-indicator{color:#c8d0d6}.live-indicator span,.status-dot,.record-dot{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#a3d985;box-shadow:0 0 10px #a3d985;vertical-align:middle}.top-divider{height:15px;width:1px;background:#36404c}.header-detail b{color:#d58d59;padding:0 7px}
.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:35px;flex:1;align-items:start;padding-top:23px;padding-bottom:18px}
.sidebar{min-width:0;padding:4px 0 0 0}.eyebrow,.section-line,.stage-topline,.stage-bottomline,.footer,.stage-overlay,.mobile-hint{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em}.eyebrow{font-size:10px;font-weight:700;color:#f5a768}.sidebar-heading h1{margin:14px 0 10px;font-size:39px;line-height:1.04;letter-spacing:-.052em;font-weight:760}.sidebar-heading h1 em{font-style:normal;color:#f1ab76;font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}.sidebar-heading p{max-width:228px;margin:0;color:#9ba7b4;font-size:12px;line-height:1.6}.palette-section{margin-top:22px}.section-line{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:10px;color:#687b8d;font-weight:700}.section-line h2{margin:0;font-size:10px;color:#b9c3cc;letter-spacing:.12em}.palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.element-button{height:40px;min-width:0;display:flex;align-items:center;gap:9px;padding:0 10px;border:1px solid #303b48;border-radius:6px;background:#171e28;color:#c0cad4;text-align:left;transition:background .14s,border-color .14s,transform .14s}.element-button:hover{background:#202b37;border-color:#586576;transform:translateY(-1px)}.element-button.selected{background:#252d35;border-color:var(--element-color);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--element-color),transparent 65%),0 0 18px color-mix(in srgb,var(--element-color),transparent 90%);color:#fff}.element-swatch{width:19px;height:19px;flex:none;border-radius:4px;background:var(--element-color);box-shadow:inset 2px 2px 0 #ffffff35,inset -2px -2px 0 #0000003d,0 0 10px color-mix(in srgb,var(--element-color),transparent 75%);position:relative;overflow:hidden}.element-swatch:after{content:"";position:absolute;width:6px;height:5px;top:3px;left:3px;background:#ffffff5a;border-radius:1px}.element-name{font-size:12px;font-weight:650;white-space:nowrap}.element-key{margin-left:auto;color:#708092;font:700 9px ui-monospace,SFMono-Regular,Menlo,monospace}.element-button.selected .element-key{color:#bfcbd4}
.brush-section{margin-top:20px}.brush-control{height:38px;display:flex;align-items:center;gap:13px;padding:0 3px}.brush-icon{display:block;flex:none;border:1px solid #a6b3c1;border-radius:50%}.brush-icon.small{width:7px;height:7px}.brush-icon.big{width:18px;height:18px}.brush-control input{width:100%;min-width:0;margin:0;accent-color:#f5a769;cursor:pointer}.action-section{margin-top:10px}.action-row{display:grid;grid-template-columns:1fr .77fr;gap:7px}.action-button{height:39px;padding:0 10px;display:flex;gap:8px;align-items:center;border-radius:6px;border:1px solid #364452;background:#202a36;color:#e5ebf0;font-size:12px;font-weight:700}.action-button:hover{border-color:#8495a4;background:#2a3643}.action-icon{font-size:18px;line-height:1;color:#f5ad73;font-weight:500}.action-button kbd{margin-left:auto;color:#8494a5;font-size:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.clear-button{background:#191f29}.utility-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.reset-button{padding:10px 0 0;border:0;background:transparent;color:#8292a0;font-size:11px;text-align:left}.reset-button:hover,.reset-button[aria-pressed="true"]{color:#e0b387}.sidebar-foot{margin-top:15px;padding-top:13px;border-top:1px solid #27313d;color:#738496;font-size:10px}.tiny-spark{color:#e1a476;margin-right:5px;font-size:15px}
.stage-column{min-width:0;max-width:960px;width:100%}.stage-topline{height:29px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;color:#d3dce4;font-size:10px;font-weight:750}.stage-kicker{color:#f3a46b}.stage-separator{margin:0 9px;color:#576879}.stage-meta{white-space:nowrap;color:#adbac6}.status-dot{margin-right:5px}.meta-sep{color:#586c7c;padding:0 9px}.stage-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:3/2;border:1px solid #637284;border-radius:4px;background:#111a25;box-shadow:0 26px 70px #0006,0 0 0 4px #1d2731,0 0 0 5px #34404d;touch-action:none;cursor:crosshair}.stage-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 21% 55%,#3c2a2d44 0,transparent 28%),radial-gradient(circle at 65% 60%,#3f293144 0,transparent 26%),radial-gradient(circle at 81% 49%,#17334766 0,transparent 27%),linear-gradient(180deg,#142331 0%,#162332 54%,#101923 100%)}.stage-backdrop:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:5% 7.5%;mask-image:linear-gradient(180deg,#0007,transparent 80%)}#world,#glow{display:block;position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}#world{z-index:2}#glow{z-index:3;pointer-events:none;filter:blur(18px);mix-blend-mode:screen;opacity:.85}.stage-corners{position:absolute;inset:12px;z-index:5;pointer-events:none}.stage-corners span{position:absolute;width:12px;height:12px;border-color:#c6d8dc80;border-style:solid}.stage-corners span:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.stage-corners span:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.stage-corners span:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.stage-corners span:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}.stage-overlay{position:absolute;z-index:5;color:#e1e9e9a8;font-size:9px;font-weight:750;text-shadow:0 1px 6px #091118;pointer-events:none}.top-left{top:26px;left:28px}.top-right{top:26px;right:28px}.bottom-left{bottom:25px;left:28px}.bottom-right{bottom:25px;right:28px}.crosshair{font-size:15px;vertical-align:-2px;color:#f9bc81;margin-right:5px}.overlay-divider{margin:0 5px;color:#9eb1be}.record-dot{background:#f9a66e;box-shadow:0 0 9px #f9a66e;width:5px;height:5px}.overlay-arrow{color:#ffc590;font-size:14px}.stage-bottomline{min-height:43px;display:flex;justify-content:space-between;align-items:center;gap:15px;color:#8392a0;font-size:9px;font-weight:700}.instruction{font-family:Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.015em;font-size:11px;color:#9eacb8}.instruction-glyph{color:#e6a272;margin-right:8px}.keyboard-hint{white-space:nowrap}.keyboard-hint kbd{padding:2px 4px;border:1px solid #3c4957;border-radius:3px;color:#c4ccd3;font-size:9px}.mobile-hint{display:none}.paused-overlay{position:absolute;z-index:8;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#0d1521af;backdrop-filter:blur(2px);pointer-events:none}.paused-overlay[hidden]{display:none}.paused-overlay>span{display:grid;place-items:center;width:54px;height:54px;border:1px solid #d4b38b;border-radius:50%;color:#f5ae75;font-size:23px}.paused-overlay strong{font-size:15px;letter-spacing:.17em}.paused-overlay small{color:#a7b6c2;font-size:11px}#brush-cursor{position:absolute;z-index:7;display:none;border:1px solid #fff9;border-radius:50%;box-shadow:0 0 0 1px #0008,0 0 16px #fff5;pointer-events:none;transform:translate(-50%,-50%)}.stage-frame:hover #brush-cursor{display:block}
.footer{height:48px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2c3541;color:#617183;font-size:9px;font-weight:700}.footer b{color:#efaa79;font-size:14px;margin-left:4px}
@media(max-width:1150px){.app-shell{padding:0 24px}.workspace{grid-template-columns:229px minmax(0,1fr);gap:25px}.sidebar-heading h1{font-size:34px}.keyboard-hint{display:none}}
@media(max-width:760px){.app-shell{padding:0 17px}.topbar{height:71px}.brand{font-size:18px}.brand-sub{font-size:7px}.brand-mark{transform:scale(.85) rotate(-15deg);margin-right:-3px}.topbar-right{gap:0}.top-divider,.header-detail{display:none}.live-indicator{font-size:8px}.workspace{display:flex;flex-direction:column;gap:18px;padding-top:18px}.stage-column{order:0;width:100%}.sidebar{order:1;width:100%;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding:0}.sidebar-heading{display:none}.palette-section{grid-column:1/-1;margin:0}.palette{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.element-button{height:43px;padding:0 7px;gap:6px}.element-swatch{width:17px;height:17px}.element-name{font-size:11px}.element-key{display:none}.brush-section{margin:20px 0 0}.action-section{margin:22px 0 0}.sidebar-foot{grid-column:1/-1;margin:15px 0 0}.stage-topline{font-size:9px}.stage-frame{box-shadow:0 16px 42px #0005,0 0 0 3px #1d2731,0 0 0 4px #34404d}.stage-overlay{font-size:7px}.top-left{top:19px;left:18px}.top-right{top:19px;right:18px}.bottom-left{bottom:17px;left:18px}.bottom-right{bottom:17px;right:18px}.stage-bottomline{min-height:37px}.instruction{font-size:10px}.mobile-hint{display:none}.footer{height:39px;font-size:8px}}
@media(max-width:520px){.app-shell{padding:0 13px}.topbar{height:64px}.brand-wrap{gap:8px}.brand{font-size:17px}.brand-sub{letter-spacing:.17em}.live-indicator{font-size:0}.live-indicator span{width:7px;height:7px;margin:0}.workspace{padding-top:15px;gap:15px}.stage-topline{height:24px;font-size:8px}.stage-kicker{font-size:8px}.stage-separator{margin:0 5px}.stage-meta{font-size:8px}.stage-frame{aspect-ratio:3/2}.stage-overlay{font-size:6px;letter-spacing:.035em}.top-left{top:14px;left:13px}.top-right{top:14px;right:13px}.bottom-left{bottom:12px;left:13px}.bottom-right{bottom:12px;right:13px}.stage-corners{inset:7px}.crosshair{font-size:11px}.stage-bottomline{min-height:34px}.instruction{font-size:9px;line-height:1.35}.mobile-hint{display:block;margin-top:0;color:#788a99;font-size:9px;letter-spacing:.025em}.palette-section .section-line{margin-bottom:9px}.palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.element-button{height:38px}.element-name{font-size:11px}.brush-section,.action-section{margin-top:17px}.brush-section .section-line{margin-bottom:3px}.brush-control{height:36px}.action-row{grid-template-columns:1fr 1fr}.action-button{height:38px}.action-button kbd{display:none}.reset-button{font-size:10px}.sidebar-foot{font-size:9px;padding-top:12px;margin-top:14px}.footer{font-size:7px;letter-spacing:.02em}.footer span:last-child{display:none}}
@media(max-width:380px){.stage-topline{font-size:7px}.stage-meta{font-size:7px}.stage-separator{margin:0 3px}.stage-overlay.top-right{display:none}.element-name{font-size:10px}}