:root{--knauf-blue: #005eb8;--knauf-red: #d71920;--ink: #15171a;--muted: #66707d;--line: #d9dee5;--paper: #f4f6f8;--white: #ffffff;--dark: #111923;--dark-2: #182332;--accent: #ffd84d;--ok: #1d9a74;--danger: #d84040}*{box-sizing:border-box}body{min-height:100vh;margin:0;color:var(--ink);background:var(--white);font-family:Arial,Helvetica,sans-serif}button{font:inherit}.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:14px clamp(18px,4vw,56px);background:#fffffffa;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:inline-flex;align-items:center;gap:14px;min-height:42px;color:var(--knauf-blue);text-decoration:none}.brand:before{content:"";width:46px;height:4px;background:var(--knauf-red)}.brand-title{font-size:20px;font-weight:800;letter-spacing:0;text-transform:uppercase}nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 24px}nav a{color:var(--ink);font-size:14px;font-weight:700;text-decoration:none;text-transform:uppercase}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:clamp(24px,4vw,56px);align-items:end;min-height:min(620px,78vh);padding:clamp(46px,8vw,108px) clamp(18px,4vw,56px) 42px;background:linear-gradient(135deg,transparent 0 68%,rgba(0,94,184,.42) 68% 100%),linear-gradient(90deg,#111923f5,#30343fd1),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 96px),#30343f;background-position:center;background-size:cover;color:var(--white)}.hero-copy{max-width:800px}.eyebrow,.panel-label{margin:0 0 12px;color:var(--knauf-blue);font-size:13px;font-weight:800;text-transform:uppercase}.hero .eyebrow{color:var(--accent);font-size:15px}h1{max-width:780px;margin:0;font-size:clamp(48px,8vw,112px);line-height:.92;text-transform:uppercase}.hero p{max-width:720px;margin:22px 0 0;color:#ffffffdb;font-size:clamp(18px,2vw,24px);line-height:1.48}.hero-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border:1px solid rgba(255,255,255,.32);background:#ffffff38}.hero-panel div{min-width:0;padding:18px 16px;background:#ffffffe8;color:var(--ink)}.hero-panel span{display:block;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}.hero-panel strong{display:block;margin-top:8px;font-size:26px}.game-shell{display:grid;grid-template-columns:minmax(280px,380px) minmax(360px,1fr) minmax(250px,340px);gap:28px;padding:42px clamp(18px,4vw,56px) 70px;background:var(--paper)}.control-panel,.sequence-panel,.matrix-stage{background:var(--white);border:1px solid var(--line)}.control-panel,.sequence-panel{align-self:start;padding:22px}.panel-block+.panel-block{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}.buffer-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.buffer-chip,.sequence-code,.cell{display:inline-grid;place-items:center;min-width:0;font-weight:800;font-variant-numeric:tabular-nums}.buffer-chip{height:76px;color:var(--white);background:var(--dark-2);font-size:28px}.buffer-chip.is-empty{color:var(--muted);background:#edf0f4;border:1px dashed #b9c1ca}.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}.mode-button{min-height:42px;border:0;border-right:1px solid var(--line);background:var(--white);color:var(--ink);font-size:13px;font-weight:800;cursor:pointer}.mode-button:last-child{border-right:0}.mode-button.is-active{color:var(--white);background:var(--knauf-blue)}.actions{display:grid;grid-template-columns:1fr;gap:10px}.primary-action,.ghost-action{min-height:48px;border:0;font-weight:800;cursor:pointer}.primary-action{color:var(--white);background:var(--knauf-blue)}.ghost-action{color:var(--ink);background:var(--paper);border:1px solid var(--line)}.matrix-stage{min-width:0;padding:clamp(16px,3vw,28px);color:var(--white);background:linear-gradient(135deg,rgba(0,94,184,.2),transparent 32%),var(--dark)}.stage-topline,.sequence-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px;font-size:14px;font-weight:800;text-transform:uppercase}#messageLabel{color:var(--accent);text-align:right}.matrix{display:grid;grid-template-columns:repeat(6,minmax(46px,1fr));gap:10px;aspect-ratio:1;max-height:min(64vh,680px)}.cell{position:relative;min-height:46px;color:#ffffffe0;background:#1e2c3d;border:1px solid #38516d;font-size:clamp(18px,2.6vw,30px);cursor:pointer;transition:transform .14s ease,border-color .14s ease,background .14s ease,color .14s ease}.cell:hover,.cell:focus-visible{outline:none;transform:translateY(-2px);border-color:var(--accent);color:var(--white)}.cell.is-allowed{background:#253c57;border-color:#66a2d8}.cell.is-picked{color:var(--dark);background:var(--accent);border-color:var(--accent)}.cell.is-locked{color:#ffffff5c;cursor:not-allowed}.cell.is-invalid{animation:shake .18s linear}@keyframes shake{0%,to{transform:translate(0)}30%{transform:translate(-3px)}70%{transform:translate(3px)}}.sequence-panel{min-width:0}.sequence-head{margin-bottom:14px;color:var(--ink)}.sequence-list{display:grid;gap:12px}.sequence-item{padding:16px;background:var(--paper);border-left:4px solid var(--knauf-blue)}.sequence-item.is-complete{border-left-color:var(--ok)}.sequence-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px;font-weight:800}.sequence-codes{display:flex;flex-wrap:wrap;gap:7px}.sequence-code{min-width:42px;height:34px;color:var(--white);background:var(--dark-2)}.sequence-code.is-hit{color:var(--dark);background:var(--accent)}.sequence-status{color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase}@media(max-width:1100px){.game-shell{grid-template-columns:1fr}.control-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.panel-block+.panel-block{margin-top:0;padding-top:0;border-top:0}}@media(max-width:760px){.site-header{position:static;align-items:flex-start;flex-direction:column}nav{justify-content:flex-start}.hero,.hero-panel,.control-panel{grid-template-columns:1fr}.matrix{gap:7px}}@media(max-width:460px){.matrix{grid-template-columns:repeat(6,minmax(34px,1fr))}.cell{min-height:38px;font-size:16px}}