:root{--c-page:#07080c;--c-win:#0e1118;--c-panel:#10131b;--c-band:#ffffff17;--c-yellow:#ffd31a;--c-yellow-60:#ffd31a99;--c-yellow-35:#ffd31a59;--c-yellow-15:#ffd31a26;--c-cyan:#5ce1e6;--c-cyan-15:#5ce1e626;--c-teal:#46d6b4;--c-success:#58f2a5;--c-accent:#ff7b00;--c-text:#e9ecf2;--c-text-2:#e9ecf299;--c-ink:#0e1118;--font-ui:"Rajdhani", "Arial Narrow", system-ui, sans-serif;--size:5;--cell-w:min(3.4rem, calc((100vw - 56px) / var(--size)));--cell-h:max(24px, min(var(--cell-w), calc((100dvh - 430px) / var(--size))));--gap:8px;--duration-fast:.12s;--ease:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{background:var(--c-page);height:100%;color:var(--c-text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0;font-weight:600}button{font:inherit;color:inherit}.frame{flex-direction:column;justify-content:center;gap:2px;max-width:440px;height:100dvh;margin:0 auto;padding:12px 12px 2px;display:flex;position:relative}.breach{gap:var(--gap);background:var(--c-win);border:1px solid var(--c-yellow-60);flex-direction:column;flex:0 auto;min-height:0;padding:8px;display:flex;position:relative}.breach:before{content:"";border:1px solid var(--c-yellow-35);pointer-events:none;position:absolute;inset:-5px 4px 4px -5px}.timer{border-bottom:1px solid var(--c-yellow-15);background:linear-gradient(#ffd31a12,#0000);gap:5px;margin:-8px -8px 0;padding:4px 6px 6px;display:grid}.timer-row{justify-content:center;align-items:center;gap:14px;display:flex}.timer-label{color:var(--c-yellow);letter-spacing:.02em;font-size:.95rem;font-weight:700}.timer-value{border:1.5px solid var(--c-yellow);min-width:4.4em;color:var(--c-yellow);text-align:center;font-variant-numeric:tabular-nums;padding:0 10px;font-size:1.2rem;font-weight:700;line-height:1.45}.timer-bar{background:var(--c-yellow-15);height:5px;overflow:hidden}.timer-bar i{background:var(--c-yellow);transform-origin:0;height:100%;display:block}.is-low-time .timer-value,.is-low-time .timer-label{color:var(--c-accent);border-color:var(--c-accent)}.is-low-time .timer-bar i{background:var(--c-accent)}.buffer-wrap{justify-content:center;display:flex}.buffer{border:1px solid var(--c-yellow-60);gap:3px;padding:3px;display:flex}.slot{border:1px dashed var(--c-yellow-35);width:26px;height:24px;color:var(--c-cyan);place-items:center;font-size:.85rem;font-weight:700;display:grid}.slot.is-next{border-color:var(--c-yellow-60)}.slot.is-filled{border:1px solid var(--c-cyan);background:var(--c-cyan-15)}.slot.is-ghost{border:1px dashed var(--c-cyan);color:#5ce1e699;animation:1.1s ease-in-out infinite alternate ghost-pulse}@keyframes ghost-pulse{to{color:#5ce1e6f2}}.panels{gap:var(--gap);flex-direction:column;flex:auto;min-height:0;display:flex}.panel{border:1px solid var(--c-yellow-60);background:var(--c-panel)}.panel-head{letter-spacing:.02em;color:var(--c-yellow);border-bottom:1px solid var(--c-yellow-35);align-items:center;gap:9px;margin:0;padding:4px 10px;font-size:.95rem;font-weight:700;line-height:1.3;display:flex}.panel-head--yellow{background:var(--c-yellow);color:var(--c-ink)}.panel-icon{background:repeating-linear-gradient(135deg,currentColor 0 1.5px,#0000 1.5px 4px);border:1.5px solid;flex:none;width:13px;height:13px}.panel-icon--box{box-shadow:inset 0 0 0 2px var(--c-panel), inset 0 0 0 6px currentColor;background:0 0}.matrix-panel{flex-direction:column;flex:0 auto;min-height:0;display:flex}.grid{grid-template-rows:repeat(var(--size), minmax(0, var(--cell-h)));flex:0 auto;justify-content:center;min-height:0;padding:4px 6px;display:grid}.grid-row{grid-template-columns:repeat(var(--size), var(--cell-w));min-height:0;display:grid}.cell{min-height:0;color:var(--c-yellow);font-weight:700;font-size:clamp(15px, calc(var(--cell-h) * .5), 28px);cursor:default;transition:opacity var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);touch-action:manipulation;background:0 0;border:1px solid #0000;margin:0;padding:0;line-height:1;position:relative}.cell.is-line{background:var(--c-band)}.grid[data-axis=row] .cell.is-line{box-shadow:inset 0 1px 0 var(--c-yellow-60), inset 0 -1px 0 var(--c-yellow-60)}.grid[data-axis=col] .cell.is-line{box-shadow:inset 1px 0 0 var(--c-yellow-60), inset -1px 0 0 var(--c-yellow-60)}.cell.is-dim{opacity:.3}.cell.is-preview-line.is-dim{opacity:.75;background:#5ce1e612}.grid[data-preview-axis=row] .cell.is-preview-line.is-dim{box-shadow:inset 0 1px #5ce1e673,inset 0 -1px #5ce1e673}.grid[data-preview-axis=col] .cell.is-preview-line.is-dim{box-shadow:inset 1px 0 #5ce1e673,inset -1px 0 #5ce1e673}.cell.is-used{color:#5ce1e68c;font-weight:500}.cell.is-last-pick{outline:1.5px solid var(--c-cyan);outline-offset:-4px;color:var(--c-cyan)}.cell.is-selectable{cursor:pointer}.cell.is-preview,.cell.is-selectable:focus-visible{border-color:var(--c-cyan);color:var(--c-cyan);background:var(--c-cyan-15);outline:none}.cell.is-armed{box-shadow:inset 0 0 0 1px var(--c-cyan), 0 0 12px #5ce1e673}.cell.is-selectable:active{background:#5ce1e647}.cell.is-code-hit{outline:1px dashed var(--c-cyan);outline-offset:-5px;text-shadow:0 0 8px #5ce1e6b3}.cell.is-code-hit.is-dim{opacity:.8}.seq-panel{flex:none}.seqs{margin:0;padding:0;list-style:none}.seq{transition:background-color var(--duration-fast) var(--ease);border-bottom:1px solid #ffffff0f;border-left:3px solid #0000;padding:5px 10px 6px}.seq:last-child{border-bottom:none}.seq.is-progress,.seq[data-preview=advance],.seq[data-preview=install]{border-left-color:var(--c-teal);background:linear-gradient(90deg,#46d6b41f,#0000 70%)}.seq--installed{border-left-color:var(--c-success);background:linear-gradient(90deg,#58f2a529,#0000 70%)}.seq--failed{opacity:.45}.seq-codes{flex-wrap:wrap;gap:4px;margin-bottom:2px;display:flex}.token{text-align:center;min-width:1.9rem;color:var(--c-yellow);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #0000;padding:0 3px;font-size:1.2rem;font-weight:700;line-height:1.35}.token.is-matched{background:var(--c-yellow);color:var(--c-ink)}.seq--installed .token{background:var(--c-success);color:var(--c-ink)}.token.is-next{border-bottom-color:var(--c-yellow-60)}.token.is-preview-match{background:var(--c-cyan-15);color:var(--c-cyan)}.token.is-preview-hit{border-color:var(--c-cyan)}.seq[data-preview=break] .token.is-matched:not(.is-preview-match){color:var(--c-accent);background:0 0;text-decoration:line-through}.token.is-code-hit{outline:1px dashed var(--c-cyan);outline-offset:1px}.seq-meta{color:var(--c-text);align-items:center;gap:7px;font-size:.88rem;font-weight:600;line-height:1.25;display:flex}.seq-icon{border:1.5px solid;border-radius:50%;flex:none;width:12px;height:12px;position:relative}.seq-icon:after{content:"";border-bottom:1.5px solid;border-left:1.5px solid;width:2.5px;height:3.5px;position:absolute;top:1.5px;left:3.5px}.badge{letter-spacing:.06em;margin-left:auto;padding:0 6px;font-size:.75rem;font-weight:700}.badge--installed{background:var(--c-success);color:var(--c-ink)}.badge--failed{border:1px solid var(--c-accent);color:var(--c-accent)}.hint{color:var(--c-cyan);letter-spacing:.04em;margin:-2px 0 0;font-size:.72rem;font-weight:700;line-height:1.2}.actions{flex:none;justify-content:flex-end;align-items:center;gap:2px;display:flex;position:relative}.btn{min-height:40px;color:var(--c-text);cursor:pointer;transition:color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);background:0 0;border:none;border-bottom:1px solid #ffffff59;padding:4px 12px;font-size:1rem;font-weight:600}.btn:hover{border-color:var(--c-yellow);color:var(--c-yellow)}.btn:focus-visible{outline:2px solid var(--c-cyan);outline-offset:2px}.btn--ghost{color:var(--c-text-2)}.btn--primary{background:var(--c-yellow);color:var(--c-ink);border:none;font-weight:700}.btn--primary:hover{color:var(--c-ink);background:#ffe066}.result{z-index:20;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#050609cc;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.result[hidden]{display:none}.result-card{background:var(--c-win);border:1px solid var(--c-accent);width:min(420px,100%);animation:result-in .26s var(--ease);padding:18px;box-shadow:0 0 0 4px #ff7b001f,0 24px 60px #0009}.result[data-success=true] .result-card{border-color:var(--c-success);box-shadow:0 0 0 4px #58f2a51f,0 24px 60px #0009}.result-title{letter-spacing:.03em;color:var(--c-accent);margin:0 0 4px;font-size:1.6rem;font-weight:700}.result[data-success=true] .result-title{color:var(--c-success)}.result-outcome{margin:0 0 12px;font-size:1.15rem;font-weight:600}.result-list{gap:6px;margin:0 0 10px;padding:0;list-style:none;display:grid}.result-item{background:var(--c-panel);border:1px solid var(--c-yellow-15);grid-template-columns:1fr auto;align-items:center;gap:0 10px;padding:6px 10px;display:grid}.result-codes{color:var(--c-yellow);font-size:1.1rem;font-weight:700}.result-label{color:var(--c-text-2);grid-column:1;font-size:.85rem}.result-item .badge{grid-area:1/2/span 2}.result-reason{color:var(--c-text-2);margin:0 0 14px;font-size:.85rem}.result-actions{justify-content:flex-end;gap:8px;display:flex}@keyframes result-in{0%{opacity:0;transform:translateY(8px)scale(.98)}}.debug{z-index:30;color:#ffffff4d;pointer-events:none;font-size:9px;line-height:11px;position:fixed;top:0;right:4px}.noise-overlay{z-index:10;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#0000 1px 3px),radial-gradient(#0000 55%,#00000059);transition:opacity .2s linear;position:fixed;inset:0}.noise-on .noise-overlay{opacity:1;animation:4s step-end infinite noise-flicker}@keyframes noise-flicker{0%,to{transform:translateY(0)}47%{transform:translateY(1px)}48%{opacity:.7;transform:translateY(-2px)}49%{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.noise-on .noise-overlay,.result-card,.slot.is-ghost{animation:none}.cell,.btn,.seq{transition:none}}@media (width>=860px) and (aspect-ratio>=1){:root{--cell-w:4.2rem;--cell-h:max(28px, min(3.6rem, calc((100dvh - 300px) / var(--size))));--gap:12px}.frame{max-width:900px;padding:20px 20px 4px}.breach{padding:12px}.timer{margin:-12px -12px 0;padding:8px 12px}.panels{flex-direction:row;align-items:flex-start}.matrix-panel{max-height:100%}.seq-panel{flex:1 1 0;min-width:0}.seq{padding:10px 14px}.token{font-size:1.35rem}.slot{width:32px;height:30px;font-size:1rem}.hint{font-size:.8rem}}