:root{--ink:#e6ecf5;--ink-dim:#9aa7bd;--ink-faint:#6b7689;--bg:#070a12;--panel:#0d121ef0;--panel-2:#141b2beb;--line:#94a3b838;--accent:#22d3ee;--accent-soft:#22d3ee24;--good:#4ade80;--warn:#fbbf24;--bad:#f87171;--radius:14px;--radius-sm:9px;--shadow:0 24px 60px #0000008c;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--sans:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}#app{position:fixed;inset:0}button{color:inherit;font-family:inherit}kbd{font-family:var(--mono);letter-spacing:.06em;border:1px solid var(--line);color:var(--ink);background:#ffffff0f;border-radius:6px;padding:2px 7px;font-size:11px}.canvas-host{position:absolute;inset:0}.canvas-host canvas{width:100%;height:100%;display:block}.hud{pointer-events:none;font-size:13px;position:absolute;inset:0}.title-footer{flex-direction:column;align-items:center;gap:10px;margin-top:18px;display:flex}.title-stats{color:var(--ink-faint);letter-spacing:.02em;margin:0;font-size:13px}.hud-top-left,.hud-top-right{align-items:center;gap:8px;display:flex;position:absolute;top:18px}.hud-top-left{left:18px}.hud-top-right{right:18px}.hud-center{flex-direction:column;align-items:center;gap:10px;width:min(560px,82vw);display:flex;position:absolute;top:64px;left:50%;transform:translate(-50%)}.boss-line{border:1px solid var(--line);background:var(--panel);color:var(--ink);letter-spacing:.02em;text-align:center;box-shadow:var(--shadow);border-radius:14px;padding:8px 14px;font-size:13px}.bonk-counter{color:#fee2e2;letter-spacing:.22em;background:#7f1d1db8;border:1px solid #ef4444;border-radius:999px;padding:6px 16px;font-size:14px;font-weight:700}.vignette{pointer-events:none;z-index:4;opacity:0;background:radial-gradient(#7f1d1d00 38%,#991b1b8c 78%,#500707db 100%);transition:opacity .22s ease-out;position:fixed;inset:0}.vignette.is-on{opacity:1}.vignette.is-hit{opacity:1;background:radial-gradient(#dc26262e 30%,#991b1bb8 76%,#450a0af0 100%)}.chip{border:1px solid var(--line);background:var(--panel);letter-spacing:.12em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;align-items:center;gap:6px;padding:7px 12px;font-size:11px;font-weight:600;display:inline-flex}.chip-deadline{font-family:var(--mono);color:var(--accent);border-color:#22d3ee66}.chip-deadline.chip-danger{color:var(--bad);border-color:#f8717199;animation:1s ease-in-out infinite pulse-danger}.chip-boss{color:var(--ink-dim)}@keyframes pulse-danger{0%,to{box-shadow:0 0 #f8717100}50%{box-shadow:0 0 18px #f8717173}}.hud-bottom{justify-content:center;display:flex;position:absolute;bottom:40px;left:0;right:0}.prompt-chip{background:var(--panel);box-shadow:var(--shadow);border:1px solid #ffffff24;border-radius:999px;align-items:center;gap:10px;padding:11px 18px;font-size:14px;display:inline-flex}.overlay-host{pointer-events:none;position:absolute;inset:0}.overlay{pointer-events:auto;background:radial-gradient(circle at 50% 30%,#0c1424b8,#03050af0);place-items:center;padding:24px;animation:.2s ease-out fade-in;display:grid;position:absolute;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.btn{cursor:pointer;border:1px solid #0000;border-radius:10px;padding:12px 20px;font-size:14px;font-weight:600;transition:transform .12s,background .14s,border-color .14s}.btn:active{transform:translateY(1px)}.btn-primary{color:#06222b;background:linear-gradient(#34d8f0,#12a7c4);box-shadow:0 10px 26px #12a7c452}.btn-primary:hover{background:linear-gradient(#55e2f7,#16b6d6)}.btn-ghost{border-color:var(--line);color:var(--ink);background:#ffffff0d}.btn-ghost:hover{background:#ffffff1a}.btn-small{padding:7px 12px;font-size:12px}.eyebrow{text-transform:uppercase;letter-spacing:.22em;color:var(--accent);margin:0;font-size:11px;font-weight:600}.title-card{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);width:min(620px,100%);box-shadow:var(--shadow);text-align:left;padding:40px}.title-logo{letter-spacing:-.02em;flex-direction:column;margin:12px 0 10px;font-size:46px;line-height:1.02;display:flex}.title-logo-accent{color:var(--accent)}.title-blurb{color:var(--ink-dim);margin:0 0 22px;font-size:15px;line-height:1.62}.title-actions{gap:12px;margin-bottom:26px;display:flex}.keylist{border-top:1px solid var(--line);color:var(--ink-dim);grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0;padding:18px 0 0;font-size:13px;list-style:none;display:grid}.keylist li{align-items:center;gap:10px;display:flex}.howto{border-radius:var(--radius-sm);color:var(--ink-dim);background:#22d3ee12;border:1px solid #22d3ee38;margin-top:18px;padding:16px;font-size:13px;line-height:1.6}.howto p{margin:0 0 8px}.howto p:last-child{margin:0}.overlay-select{grid-template-columns:minmax(280px,380px) minmax(520px,760px);align-items:stretch;gap:26px;padding:40px}.preview-stage{border-radius:var(--radius);border:1px solid var(--line);min-height:380px;box-shadow:var(--shadow);background:linear-gradient(#141e34d9,#080c16e6);position:relative;overflow:hidden}.preview-stage canvas{width:100%;height:100%;display:block}.select-panel{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;padding:30px 32px;display:flex}.select-title{letter-spacing:-.01em;margin:10px 0 22px;font-size:26px}.select-grid{flex:1;grid-template-columns:1fr 1fr;gap:22px;display:grid}.select-heading{text-transform:uppercase;letter-spacing:.18em;color:var(--ink-faint);margin:0 0 12px;font-size:12px}.pick-column{flex-direction:column;gap:10px;display:flex}.pick-card{text-align:left;border-radius:var(--radius-sm);border:1px solid var(--line);cursor:pointer;background:#ffffff0a;flex-direction:column;gap:7px;padding:13px 14px;transition:border-color .14s,background .14s,transform .14s;display:flex}.pick-card:hover{background:#ffffff14;transform:translateY(-1px)}.pick-card.is-selected{border-color:var(--accent);background:var(--accent-soft)}.pick-card-top{align-items:center;gap:10px;font-size:14px;display:flex}.pick-card-tagline{color:var(--ink-dim);font-size:12px;line-height:1.45}.swatch{border:1px solid #ffffff40;border-radius:6px;flex:none;width:20px;height:20px}.btn-play{align-self:flex-start;margin-top:24px;padding:14px 26px;font-size:15px}.pause-card,.dead-card,.win-card,.touch-card{border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);width:min(560px,100%);box-shadow:var(--shadow);text-align:center;padding:34px}.pause-card h2{margin:0 0 8px;font-size:24px}.pause-card p{color:var(--ink-dim);margin:0 0 22px}.pause-actions{flex-wrap:wrap;gap:12px;display:flex}.overlay-dead{background:radial-gradient(circle at 50% 40%,#500c12c7,#060204f5)}.dead-card{border-color:#f8717159}.dead-headline{letter-spacing:-.01em;color:var(--bad);text-shadow:0 0 28px #f8717159;margin:0 0 12px;font-size:40px}.dead-line{margin:0 0 10px;font-size:17px}.dead-sub{color:var(--ink-dim);margin:0 0 24px;font-size:13px}.dead-actions{justify-content:center;gap:12px;display:flex}.overlay-win{background:radial-gradient(circle at 50% 35%,#0a3224b8,#030806f2)}.win-card{border-color:#4ade8059}.win-headline{color:var(--good);text-shadow:0 0 28px #4ade804d;margin:0 0 10px;font-size:40px}.win-sub{color:var(--ink-dim);margin:0 0 18px;line-height:1.6}.win-total{font-family:var(--mono);color:var(--ink);margin:0 0 16px;font-size:15px}.win-list{border-radius:var(--radius-sm);border:1px solid var(--line);background:#ffffff0a;flex-direction:column;gap:8px;margin:0 0 24px;padding:14px 16px;font-size:13px;list-style:none;display:flex}.win-row{justify-content:space-between;gap:16px;display:flex}.win-name{color:var(--ink-dim)}.win-time{font-family:var(--mono)}.overlay-touch{background:radial-gradient(circle at 50% 40%,#121a2cf5,#04060c);padding:28px}.touch-card h2{margin:0 0 14px;font-size:22px;line-height:1.3}.touch-card p{color:var(--ink-dim);margin:0 0 12px;font-size:14px;line-height:1.6}.touch-hint{color:var(--accent)!important;margin:0!important}.devos{pointer-events:auto;background:radial-gradient(circle at 50% 25%,#080e1adb,#020408f5);place-items:center;padding:22px;animation:.18s ease-out fade-in;display:grid;position:absolute;inset:0}.devos-frame{border-radius:var(--radius);background:#0a0f1a;border:1px solid #22d3ee47;flex-direction:column;width:min(1380px,100%);height:min(900px,100%);display:flex;overflow:hidden;box-shadow:0 30px 90px #000000b3}.devos-titlebar{border-bottom:1px solid var(--line);background:#0e1524f2;align-items:center;gap:14px;padding:12px 16px;display:flex}.devos-logo{font-family:var(--mono);letter-spacing:.1em;color:var(--accent);font-weight:700}.devos-subtitle{color:var(--ink-faint);flex:1;font-size:12px}.devos-body{flex:1;padding:22px;overflow:auto}.devos-placeholder{color:var(--ink-dim);max-width:620px;line-height:1.7}.devos-grid{flex:1;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(300px,420px);gap:14px;min-height:0;padding:14px;display:grid}.devos-pane{border-radius:var(--radius-sm);background:var(--panel-2);border:1px solid var(--line);flex-direction:column;min-height:0;display:flex;overflow:hidden}.devos-pane-title{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;font-size:11px;display:flex}.briefing-pane{padding:0}.briefing-body{flex-direction:column;gap:12px;padding:16px 16px 12px;display:flex;overflow:auto}.task-name{margin:0;font-size:17px;font-weight:650}.task-brief{color:var(--ink-dim);white-space:pre-wrap;margin:0;font-size:13px;line-height:1.62}.task-requirements{color:var(--ink-dim);flex-direction:column;gap:5px;margin:0;padding-left:18px;font-size:12.5px;line-height:1.6;display:flex}.timer-block{border-top:1px solid var(--line);margin-top:auto;padding:14px 16px}.timer-label{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);justify-content:space-between;gap:12px;font-size:10.5px;display:flex}.timer-value{font-family:var(--mono);margin:6px 0 10px;font-size:30px}.timer-value.is-danger{color:var(--bad)}.timer-bar{background:#ffffff1a;border-radius:999px;height:6px;overflow:hidden}.timer-fill{background:linear-gradient(90deg, var(--accent), #4ade80);height:100%;transition:width .2s linear}.timer-fill.is-danger{background:linear-gradient(90deg, #fb923c, var(--bad))}.editor-pane .cm-editor{height:100%;font-size:13px}.editor-host{flex:1;min-height:0;overflow:hidden}.editor-host .cm-editor.cm-focused{outline:none}.preview-pane{min-height:0}.preview-host{background:#fff;flex:1;min-height:0;position:relative;overflow:hidden}.preview-scale{transform-origin:0 0;position:absolute;top:0;left:0}.sandbox-frame{background:#fff;border:0;display:block}.console-pane{grid-area:1/3;display:none}.devos-actions{flex-wrap:wrap;grid-column:1/-1;align-items:center;gap:12px;display:flex}.feedback{border-radius:var(--radius-sm);border:1px solid var(--line);min-width:240px;color:var(--ink-dim);background:#ffffff0a;flex:1;padding:10px 14px;font-size:13px;line-height:1.5}.feedback.is-good{color:#bbf7d0;background:#4ade801a;border-color:#4ade8080}.feedback.is-bad{color:#fecaca;background:#f871711a;border-color:#f8717180}.feedback.is-hint{color:#fde68a;background:#fbbf2417;border-color:#fbbf2473}.status-line{font-family:var(--mono);color:var(--ink-faint);min-width:150px;font-size:12px}@media (max-width:1100px){.overlay-select{grid-template-rows:240px 1fr;grid-template-columns:1fr}.devos-grid{grid-template-rows:minmax(0,1fr) minmax(180px,30%) auto;grid-template-columns:minmax(220px,260px) minmax(0,1fr)}.preview-pane{grid-area:2/2}}.touch-layer{z-index:6;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;inset:0}.touch-look{pointer-events:auto;touch-action:none;position:absolute;inset:0}.touch-buttons{pointer-events:none;flex-direction:column;align-items:flex-end;gap:14px;display:flex;position:absolute;bottom:30px;right:20px}.touch-button{pointer-events:auto;min-width:70px;min-height:70px;color:var(--ink);font:600 20px/1 var(--mono);letter-spacing:.06em;touch-action:manipulation;background:#0a0e18a8;border:2px solid #94a3b880;border-radius:20px;padding:0 14px}.touch-button-primary{color:#04141a;background:#22d3eedb;border-color:#22d3eee6;min-width:96px;min-height:96px;font-size:26px}.touch-button-primary[hidden]{display:none}.editor-tap-hint{color:var(--ink-faint);margin:0 0 8px;font-size:12px}@media (max-width:900px){.devos{padding:0;display:block}.devos-frame{border:0;border-radius:0;width:100%;height:100%}.devos-titlebar{z-index:3;gap:10px;padding:10px 12px;position:sticky;top:0}.devos-subtitle{display:none}.devos-grid{grid-template-rows:none;grid-template-columns:none;height:calc(100% - 52px);padding:12px;display:block;overflow-y:auto}.devos-pane,.briefing-pane,.editor-pane,.preview-pane{grid-area:auto;max-height:none;margin-bottom:14px;display:block}.editor-host{height:40vh;min-height:220px}.preview-host{height:34vh;min-height:200px}.devos-actions{z-index:3;border-top:1px solid var(--line);background:#080c16f7;grid-template-columns:1fr 1fr;gap:10px;padding:12px;display:grid;position:sticky;bottom:0}.devos-actions .btn{min-height:56px;font-size:16px}.feedback{grid-column:1/-1;min-width:0}.overlay .card,.touch-card{width:min(560px,100%);max-height:88%;overflow-y:auto}.touch-card .btn{min-height:52px}}.pick-column{scrollbar-width:thin;max-height:min(46vh,420px);padding-right:6px;overflow-y:auto}.pick-card-weapon{color:#fecaca;font-family:var(--mono);letter-spacing:.04em;background:#f871711a;border:1px solid #f8717166;border-radius:999px;margin-top:6px;padding:2px 8px;font-size:11px;display:inline-block}.touch-look{cursor:grab}.touch-note{z-index:12;pointer-events:none;justify-content:center;display:flex;position:absolute;bottom:10px;left:10px;right:10px}.touch-note .touch-card{pointer-events:auto;gap:6px;padding:12px 14px}.touch-note .touch-card h2{font-size:15px}.touch-note .touch-card p{font-size:12px}@media (max-width:900px){.overlay-select{grid-template-rows:150px minmax(0,1fr);grid-template-columns:1fr;gap:10px;padding:10px}.preview-stage{min-height:150px}.select-panel{padding:12px;overflow-y:auto}.select-title{margin:6px 0 12px;font-size:18px}.select-grid{gap:10px}.select-heading{margin-bottom:8px}.pick-column{max-height:30vh}.pick-card{padding:8px 10px}.pick-card-tagline{font-size:11px}.btn-play{align-self:stretch;min-height:56px;margin-top:12px;font-size:16px;position:sticky;bottom:0;box-shadow:0 -12px 24px #060a14e6}}