:root{color:#f6f1d5;background:#111;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{overflow:hidden}#app{display:grid;place-items:center;min-width:100vw;min-height:100vh;background:radial-gradient(circle at 20% 15%,rgba(240,216,96,.08),transparent 24rem),linear-gradient(135deg,#101010,#1f2420 58%,#101010)}.demo-stage{position:relative;width:min(100vw,160vh);height:min(100vh,62.5vw);overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#050505;box-shadow:0 0 0 1px #3a3a2e,0 24px 80px #0000008c}.performance-overlay{position:absolute;top:6px;left:6px;padding:3px 5px;color:#d8ffd0;background:#000000b3;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11px;line-height:1.2;pointer-events:none}.performance-overlay[hidden]{display:none}.debug-screen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:block;color:#d8ffd0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),#02070957;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.debug-screen-panel{position:absolute;inset:clamp(12px,4vmin,30px);display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;background:linear-gradient(180deg,#091b1de0,#03090ad1),repeating-linear-gradient(90deg,transparent 0 7px,rgba(90,215,208,.04) 7px 8px);border:1px solid #f7d35d;box-shadow:0 0 0 2px #5ad7d057,0 0 34px #5ad7d038,inset 0 0 22px #f7d35d14;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);overflow:hidden}.debug-screen-header{display:grid;grid-template-columns:minmax(0,1fr) auto 34px;align-items:center;min-height:42px;border-bottom:1px solid rgba(90,215,208,.52);background:#040d0fb8}.debug-screen-title{padding:0 14px;color:#f7d35d;font-size:clamp(14px,2.5vmin,22px);line-height:1;text-shadow:0 0 10px rgba(247,211,93,.42)}.debug-screen-status{justify-self:end;margin-right:10px;padding:4px 7px;color:#7ff4de;border:1px solid rgba(127,244,222,.56);background:#041e1fad;font-size:clamp(10px,1.7vmin,13px);line-height:1}.debug-screen-status.is-paused{color:#050505;border-color:#f7d35d;background:#f7d35d}.debug-screen-close{width:34px;height:34px;color:#fff;background:#2f0f14a8;border:0;border-left:1px solid rgba(240,139,95,.66);font:inherit;cursor:pointer}.debug-screen-close:hover,.debug-screen-close:focus-visible{color:#050505;background:#f08b5f;outline:none}.debug-screen-list{display:grid;align-content:start;gap:2px;min-height:0;padding:8px;overflow:auto;scrollbar-color:#5ad7d0 rgba(0,0,0,.34)}.debug-screen-row{display:grid;grid-template-columns:3.4ch minmax(0,1fr) minmax(16ch,23ch);align-items:center;gap:8px;width:100%;min-height:30px;padding:5px 8px;color:#9bd8c4;text-align:left;background:#071416a8;border:1px solid rgba(44,181,184,.34);font:inherit;font-size:clamp(10px,1.55vmin,13px);line-height:1.1;cursor:pointer}.debug-screen-row:hover,.debug-screen-row:focus-visible{color:#fff;background:#164f57eb;border-color:#5ad7d0;outline:none}.debug-screen-row.is-active{color:#050505;background:#f7d35d;border-color:#fff6a4}.debug-screen-number,.debug-screen-meta{color:inherit;opacity:.82}.debug-screen-name{min-width:0;overflow:hidden;color:inherit;text-overflow:ellipsis;white-space:nowrap}.debug-screen-meta{overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap}@media(max-width:520px){.debug-screen-row{grid-template-columns:3.4ch minmax(0,1fr)}.debug-screen-meta{display:none}}.demo-start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#f6f1d5;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;background:#00000047}.demo-start-panel{position:relative;z-index:1;min-width:min(74%,420px);padding:18px 22px 16px;background:linear-gradient(180deg,#0c2326ad,#030809a3),repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.05) 3px 4px);border:1px solid #f7d35d;box-shadow:0 0 0 2px #5ad7d06b,0 0 28px #f7d35d52,inset 0 0 18px #5ad7d029;animation:start-panel-wave 2.6s ease-in-out infinite}.demo-start-panel:before{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.09) 0 1px,transparent 1px 4px);mix-blend-mode:screen;opacity:.48;animation:start-crt-roll .62s steps(2,end) infinite}.demo-start-line{position:relative;display:block;text-shadow:0 0 10px rgba(90,215,208,.58),2px 0 0 rgba(240,139,95,.54),-2px 0 0 rgba(111,224,181,.42);animation:start-line-flicker 3.8s steps(1,end) infinite}.demo-start-line:before,.demo-start-line:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;color:inherit;opacity:0}.demo-start-line:before{-webkit-mask-image:linear-gradient(to bottom,transparent 0 8%,#000 8% 20%,transparent 20% 48%,#000 48% 59%,transparent 59%);mask-image:linear-gradient(to bottom,transparent 0 8%,#000 8% 20%,transparent 20% 48%,#000 48% 59%,transparent 59%);text-shadow:6px 0 0 rgba(240,139,95,.95),-5px 0 0 rgba(90,215,208,.9);animation:start-scan-glitch-a 2.6s steps(1,end) infinite}.demo-start-line:after{-webkit-mask-image:linear-gradient(to bottom,transparent 0 27%,#000 27% 39%,transparent 39% 70%,#000 70% 82%,transparent 82%);mask-image:linear-gradient(to bottom,transparent 0 27%,#000 27% 39%,transparent 39% 70%,#000 70% 82%,transparent 82%);text-shadow:-6px 0 0 rgba(247,211,93,.9),5px 0 0 rgba(90,215,208,.86);animation:start-scan-glitch-b 3.15s steps(1,end) infinite}.demo-start-title{margin-bottom:9px;color:#5ad7d0;font-size:clamp(11px,2.4vw,17px);line-height:1}.demo-start-welcome{margin-bottom:5px;color:#f7d35d;font-size:clamp(9px,1.9vw,13px);line-height:1}.demo-start-action{color:#fff;font-size:clamp(17px,5vw,31px);line-height:1;text-shadow:0 0 8px rgba(247,211,93,.7),2px 0 0 rgba(240,139,95,.45);animation:start-text-pulse 1.1s steps(2,end) infinite}.demo-start-sprite-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:transparent;box-shadow:none;pointer-events:none}.demo-start-overlay:focus-visible{outline:none}.demo-start-overlay:focus-visible .demo-start-panel{outline:2px solid #5ad7d0;outline-offset:4px}@keyframes start-panel-wave{0%,to{transform:translateY(0) skew(0)}50%{transform:translateY(-8px) skew(-1deg)}}@keyframes start-text-pulse{0%,to{color:#fff}50%{color:#f7d35d}}@keyframes start-crt-roll{0%,to{transform:translateY(0);opacity:.32}50%{transform:translateY(2px);opacity:.58}}@keyframes start-line-flicker{0%,to{filter:brightness(1)}6%{filter:brightness(1.62) contrast(1.16)}7%{filter:brightness(.62) contrast(1.28)}8%,52%{filter:brightness(1)}53%{filter:brightness(1.7) contrast(1.2)}54%{filter:brightness(.68) contrast(1.25)}55%{filter:brightness(1.28) contrast(1.1)}}@keyframes start-scan-glitch-a{0%,8%,to{opacity:0;transform:translate(0)}9%{opacity:1;transform:translate(-18px)}10%{opacity:.9;transform:translate(13px)}11%{opacity:.96;transform:translate(-10px)}13%,37%{opacity:0;transform:translate(0)}38%{opacity:.95;transform:translate(16px)}39%{opacity:.78;transform:translate(-13px)}41%,70%{opacity:0;transform:translate(0)}71%{opacity:.96;transform:translate(-15px)}72%{opacity:.76;transform:translate(12px)}74%{opacity:0;transform:translate(0)}}@keyframes start-scan-glitch-b{0%,18%,to{opacity:0;transform:translate(0)}19%{opacity:.98;transform:translate(17px)}20%{opacity:.78;transform:translate(-14px)}22%{opacity:0;transform:translate(0)}48%{opacity:.98;transform:translate(-18px)}49%{opacity:.78;transform:translate(14px)}51%,76%{opacity:0;transform:translate(0)}77%{opacity:1;transform:translate(19px)}78%{opacity:.82;transform:translate(-12px)}80%{opacity:0;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.demo-start-panel,.demo-start-panel:before,.demo-start-line:before,.demo-start-line:after,.demo-start-line,.demo-start-action{animation:none}}
