:root{--bg: #0d0e14;--panel: #14161d;--panel-2: #1a1d26;--line: #262a35;--text: #e8ecf4;--muted: #929bad;--accent: #4fd6c9;--accent-ink: #04201d;--danger: #f2707c;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.6 Inter,-apple-system,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans SC,sans-serif}button,select,input,textarea{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:18px;padding:0 14px;height:48px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}.brand{font-family:Silkscreen,monospace;font-size:13px;letter-spacing:.5px;color:#cfe9e6}.brand b{color:var(--accent)}.topbar-group{display:flex;align-items:center;gap:8px}.topbar-group label{color:var(--muted);font-size:12px}.topbar-right{margin-left:auto}.zoom{min-width:56px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.check{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}.body{display:flex;flex:1 1 auto;min-height:0}.rail{display:flex;flex-direction:column;gap:6px;padding:10px 8px;background:var(--panel);border-right:1px solid var(--line);flex:0 0 auto}.tool{position:relative;display:grid;place-items:center;width:44px;height:40px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);cursor:pointer}.tool:hover{color:var(--text);border-color:#39404f}.tool.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.tool-key{position:absolute;right:3px;bottom:1px;font-size:9px;opacity:.65}.stage{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.contextbar,.statusbar{display:flex;align-items:center;gap:12px;padding:0 14px;height:40px;background:var(--panel);color:var(--muted);font-size:12px;flex:0 0 auto}.contextbar{border-bottom:1px solid var(--line)}.statusbar{border-top:1px solid var(--line);font-variant-numeric:tabular-nums}.contextbar strong{color:var(--text);letter-spacing:.4px;font-size:12px;white-space:nowrap}.spacer{flex:1 1 auto}.sizefield{display:inline-flex;align-items:center;gap:6px}.sizefield input{width:90px}.chip{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;color:var(--text)}.chip i{width:12px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.18)}.canvas-wrap{flex:1 1 auto;display:grid;place-items:center;overflow:auto;padding:28px;background:radial-gradient(900px 600px at 50% 30%,#12141b,#0d0e14 78%)}.sprite-canvas{image-rendering:pixelated;border:1px solid var(--line);box-shadow:0 12px 40px #00000073;cursor:crosshair;touch-action:none}.sidebar{width:320px;flex:0 0 auto;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line)}.panel{padding:14px;border-bottom:1px solid var(--line)}.panel-title{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--accent)}.panel-note{margin:0 0 12px;color:var(--muted);font-size:12px}.ramps{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.ramp{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:8px}.ramp-name{color:var(--muted);font-size:11px}.ramp-swatches{display:flex;gap:4px}.swatch{width:26px;height:22px;border-radius:5px;border:1px solid rgba(255,255,255,.12);cursor:pointer;padding:0}.swatch.is-selected{outline:2px solid var(--accent);outline-offset:1px}.swatch-transparent{width:100%;height:26px;color:var(--muted);font-size:11px;background:linear-gradient(45deg,#23262e 25%,transparent 25%,transparent 75%,#23262e 75%) 0 0 / 12px 12px,linear-gradient(45deg,#23262e 25%,#1b1e25 25%,#1b1e25 75%,#23262e 75%) 6px 6px / 12px 12px}.field{display:flex;flex-direction:column;gap:7px;margin-top:12px}.field label{color:var(--muted);font-size:12px}textarea,select{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;resize:vertical}textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}.row{display:flex;gap:8px}.btn{padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);cursor:pointer}.btn:hover:not(:disabled){border-color:#39404f}.btn:disabled{opacity:.4;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.btn-wide{width:100%}.hint{color:var(--muted);font-size:11px}.tabs{display:flex;gap:6px;margin-bottom:10px}.tab{flex:1 1 0;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);cursor:pointer}.tab.is-active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);font-weight:600}.examples{display:flex;flex-direction:column;gap:5px;margin-top:10px}.example{text-align:left;padding:6px 9px;border-radius:7px;border:1px dashed var(--line);background:none;color:var(--muted);font-size:12px;cursor:pointer}.example:hover{color:var(--text);border-color:#39404f}.error,.status{margin:10px 0 0;font-size:12px}.error{color:var(--danger)}.status{color:var(--accent)}.disclosure{margin-top:12px;font-size:12px;color:var(--muted)}.disclosure summary{cursor:pointer}.dsl{margin:8px 0 0;padding:10px;max-height:320px;overflow:auto;background:#0b0c11;border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.45;color:#cbd4e4;white-space:pre}.warnings{margin:8px 0 0;padding-left:18px;color:var(--danger)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:24px;background:#06070bb8}.modal{width:min(380px,100%);display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 24px 60px #00000080}.modal-input{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:9px 11px}.modal-input:focus{outline:2px solid var(--accent);outline-offset:-1px}:root{--ease: cubic-bezier(.2, .8, .3, 1);--fast: .12s;--med: .22s}.canvas-holder{position:relative;display:inline-block;line-height:0}.gen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0a0b10bd;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);animation:fade-in var(--med) var(--ease);line-height:1.5}.gen-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 22px;border:1px solid var(--line);border-radius:10px;background:#14161df0;box-shadow:0 16px 40px #00000073;animation:pop-in var(--med) var(--ease)}.pixel-loader{display:flex;gap:4px}.pixel-loader span{width:8px;height:8px;background:var(--accent);animation:loader-blink .9s steps(2,end) infinite}.gen-label{font-size:13px;color:var(--text)}.gen-elapsed{min-height:1em;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.canvas-holder.is-busy .sprite-canvas{filter:saturate(.5) brightness(.8);transition:filter var(--med) var(--ease)}.sprite-canvas.just-updated{animation:sprite-land .42s var(--ease)}.btn,.tab,.tool,.swatch,.example{transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease),opacity var(--fast) var(--ease)}.btn:active:not(:disabled),.tab:active,.example:active{transform:translateY(1px)}.tool:hover{transform:translateY(-1px)}.tool:active{transform:translateY(0)}.tool.is-active{animation:tool-pick .2s var(--ease)}.swatch:hover{transform:scale(1.12);z-index:1}.swatch.is-selected{animation:swatch-pick .22s var(--ease)}.example:hover{transform:translate(2px)}.panel{animation:rise-in .32s var(--ease) both}.sidebar .panel:nth-child(2){animation-delay:60ms}.modal-backdrop{animation:fade-in var(--fast) var(--ease)}.modal{animation:pop-in var(--med) var(--ease)}.status,.error,.disclosure[open] .dsl,.disclosure[open] .warnings{animation:rise-in var(--med) var(--ease)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes rise-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes loader-blink{0%,45%{opacity:1;transform:translateY(0)}46%,to{opacity:.25;transform:translateY(-3px)}}@keyframes tool-pick{0%{transform:scale(.88)}to{transform:scale(1)}}@keyframes swatch-pick{0%{transform:scale(1)}55%{transform:scale(1.25)}to{transform:scale(1)}}@keyframes sprite-land{0%{filter:brightness(1.7) saturate(1.3)}to{filter:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.tool:hover,.swatch:hover,.example:hover,.btn:active:not(:disabled){transform:none}}