:root{
  --paper:#f2ead8;--paper-hi:#faf4e7;--enamel:#ded8c8;--ink:#172526;--ink-2:#354746;
  --muted:#687571;--cobalt:#0d5c91;--deep:#073753;--water-hi:#4c9fc0;--orange:#e75527;
  --brass:#c9a33a;--foam:#f7f3e9;--line:rgba(23,37,38,.22);--line-soft:rgba(23,37,38,.11);
  --danger:#b92e1d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Courier New",monospace;line-height:1.5}
button{font:inherit}
a{color:inherit}
.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 clamp(18px,5vw,80px);border-bottom:1px solid var(--line);background:var(--paper-hi)}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.16em;text-decoration:none}
.brand strong{color:var(--orange);font-size:13px}
.brand-mark{position:relative;width:44px;height:44px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--ink);background:var(--cobalt);color:var(--foam)}
.brand-mark i{position:absolute;top:0;width:8px;height:100%;background:var(--orange)}.brand-mark i:first-child{left:7px}.brand-mark i:nth-child(2){right:7px}.brand-mark b{z-index:1;font:900 11px Arial,sans-serif}
nav{display:flex;gap:32px}
nav a,footer a{color:var(--muted);font-size:10px;font-weight:700;text-decoration:none}
nav a:hover,footer a:hover{color:var(--orange)}
.shift-call{display:flex;flex-direction:column;align-items:flex-end;color:var(--orange);font-size:10px;font-weight:700;text-decoration:none}.shift-call span{color:var(--muted);font-size:8px}
.hero{min-height:720px;display:grid;grid-template-columns:minmax(420px,43%) 1fr;border-bottom:1px solid var(--line)}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:80px clamp(26px,6vw,96px);background:var(--paper)}
.eyebrow{margin:0 0 18px;color:var(--orange);font-size:9px;font-weight:700;letter-spacing:.18em}
h1,h2,h3{font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.065em;line-height:.86}
.mobile-break{display:none}
.hero h1{margin:0;font-size:clamp(59px,6.3vw,102px)}.hero h1 em{color:var(--cobalt);font-style:normal}
.hero-intro{max-width:510px;margin:32px 0;color:var(--ink-2);font-size:14px}
.primary-link,.primary-button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:0 24px;border:0;background:var(--orange);color:var(--foam);font-size:10px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}.primary-link:hover,.primary-button:hover{background:var(--ink);transform:translateY(-2px)}
button:focus-visible,a:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.hero-readout{width:100%;display:flex;gap:30px;margin-top:44px;padding-top:16px;border-top:1px solid var(--line-soft);color:var(--ink);font-size:12px;font-weight:700}.hero-readout span{min-width:110px}.hero-readout small{display:block;color:var(--muted);font-size:7px;letter-spacing:.12em}
.hero-image{position:relative;min-height:640px;overflow:hidden;background:url("../assets/images/tidelock-cutaway.png") center/cover no-repeat}
.hero-image:after{content:"CUTAWAY / LOCK 08";position:absolute;right:28px;bottom:24px;padding:7px 9px;background:var(--paper);color:var(--ink);font-size:8px;font-weight:700;letter-spacing:.12em}
.depth{position:absolute;left:16px;padding:1px 5px;background:var(--ink);color:var(--foam);font-size:8px}.depth-a{top:25%}.depth-b{top:48%}.depth-c{top:72%}
.control-section{padding:112px clamp(10px,5.4vw,88px);background:var(--enamel)}
.section-lead{max-width:1260px;display:grid;grid-template-columns:1fr .72fr;gap:80px;align-items:end;margin:0 auto 44px}
.section-lead h2,.procedure h2,.station h2{margin:0;font-size:clamp(50px,6vw,86px)}
.section-lead>p{margin:0;color:var(--muted);font-size:12px}
.console{max-width:1260px;margin:auto;border:1px solid var(--ink);background:var(--paper-hi)}
.console-strip{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--ink)}
.console-strip>div{min-height:67px;padding:12px 14px;border-right:1px solid var(--line)}.console-strip>div:last-child{border:0}
.console-strip small,.operator-message small,.desk-button small,.gate-button small{display:block;color:var(--muted);font-size:7px;font-weight:700;letter-spacing:.12em}
.console-strip b{font-size:20px;font-variant-numeric:tabular-nums}
.lock-stage{position:relative;aspect-ratio:24/13;overflow:hidden;background:var(--deep)}
#gameCanvas{display:block;width:100%;height:100%;touch-action:none}
.stage-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(247,243,233,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(247,243,233,.07) 1px,transparent 1px);background-size:50px 50px}
.game-overlay{position:absolute;z-index:6;inset:0;display:none;place-content:center;padding:30px;text-align:center;background:rgba(7,55,83,.92);color:var(--foam)}.game-overlay.open{display:grid}
.game-overlay .eyebrow{color:var(--brass)}.game-overlay h3{max-width:700px;margin:0 auto;font-size:clamp(48px,6vw,82px)}.game-overlay p:not(.eyebrow){max-width:610px;margin:22px auto;color:#c5d9de;font-size:12px}.game-overlay .primary-button{margin:auto}
.control-desk{min-height:104px;display:grid;grid-template-columns:126px 130px 1fr 130px 126px;border-top:1px solid var(--ink)}
.desk-button,.gate-button{border:0;border-right:1px solid var(--line);background:var(--paper-hi);color:var(--ink);cursor:pointer}.desk-button:last-child{border:0}.desk-button:hover,.gate-button:hover{background:#ebe2cf}.desk-button:active{background:var(--brass)}
.desk-button>span{display:block;color:var(--cobalt);font-size:23px;line-height:1}.desk-button b,.gate-button b{font:900 13px Arial,sans-serif}
.drain>span{color:var(--orange)}
.gate-button{position:relative}.gate-button .lamp{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--muted)}.gate-button.ready .lamp{background:var(--brass);box-shadow:0 0 0 4px rgba(201,163,58,.18)}
.operator-message{display:flex;flex-direction:column;justify-content:center;padding:16px 24px}.operator-message strong{font-size:11px}.pressure-track{height:7px;margin-top:12px;padding:1px;border:1px solid var(--line)}.pressure-track i{display:block;width:0;height:100%;background:var(--orange);transition:width .2s}
.key-hint{margin:0;padding:8px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:8px;text-align:center}
.procedure{display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;padding:120px clamp(24px,8vw,130px);background:var(--paper)}
.procedure ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.procedure li{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}.procedure li>span{color:var(--orange);font-size:12px}.procedure h3{margin:0 0 6px;font-size:23px}.procedure li p{margin:0;color:var(--muted);font-size:12px}
.station{min-height:610px;display:grid;grid-template-columns:.85fr 1.15fr;gap:110px;align-items:center;padding:100px clamp(24px,10vw,160px);background:var(--cobalt);color:var(--foam)}
.station .eyebrow{color:var(--brass)}.station-copy>p:not(.eyebrow){max-width:620px;color:#c6d9df}.station-copy>a{color:var(--brass);font-size:10px;font-weight:700;text-decoration:none}
.station-dial{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid rgba(247,243,233,.45);border-radius:50%}.station-dial:before,.station-dial:after{content:"";position:absolute;background:rgba(247,243,233,.32)}.station-dial:before{width:1px;height:116%}.station-dial:after{width:116%;height:1px}.station-dial span{z-index:2;font:900 clamp(85px,12vw,180px) Arial,sans-serif;color:var(--brass)}.station-dial i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--orange)}.station-dial i:nth-of-type(1){top:8%;left:48%}.station-dial i:nth-of-type(2){top:25%;right:13%}.station-dial i:nth-of-type(3){bottom:25%;right:13%}.station-dial i:nth-of-type(4){bottom:8%;left:48%}.station-dial i:nth-of-type(5){bottom:25%;left:13%}.station-dial i:nth-of-type(6){top:25%;left:13%}
footer{min-height:136px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:30px clamp(18px,5vw,80px);background:var(--paper-hi);border-top:1px solid var(--line)}footer p{color:var(--muted);font-size:9px}footer>div{display:flex;gap:22px}
.toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,16px);padding:10px 16px;background:var(--brass);color:var(--ink);font-size:9px;font-weight:700;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.legal-main{min-height:calc(100vh - 216px);padding:90px 24px;background:var(--paper)}.legal-copy{max-width:760px;margin:auto}.legal-copy h1{margin:0 0 34px;font-size:clamp(55px,8vw,94px)}.legal-copy h2{margin:38px 0 10px;font-size:25px}.legal-copy p{color:var(--muted)}.back-link{display:inline-block;margin-bottom:30px;color:var(--orange);font-size:10px;font-weight:700;text-decoration:none}
@media(max-width:960px){
  nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{min-height:650px}.hero-image{min-height:560px}
  .section-lead,.procedure,.station{grid-template-columns:1fr}.console-strip{grid-template-columns:repeat(3,1fr)}.procedure{gap:50px}.station{gap:60px}.station-dial{max-width:450px;width:100%;margin:auto}
}
@media(max-width:650px){
  .topbar{height:68px;padding:0 14px}.shift-call{display:none}.brand-mark{width:38px;height:38px}
  .hero-copy{min-height:590px;padding:62px 22px}.hero h1{font-size:clamp(43px,12vw,52px)}.mobile-break{display:inline}.hero-image{min-height:360px;background-position:56% center}.hero-intro{font-size:12px}
  .control-section{padding:76px 7px}.section-lead{gap:20px;padding:0 15px}.section-lead h2,.procedure h2,.station h2{font-size:49px}
  .console-strip>div{min-height:57px;padding:8px}.console-strip b{font-size:16px}.lock-stage{aspect-ratio:4/3}
  .control-desk{grid-template-columns:58px 68px 1fr 68px 58px;min-height:92px}.operator-message{padding:9px 8px}.operator-message strong{font-size:8px}.desk-button b,.gate-button b{font-size:9px}.gate-button small,.desk-button small{font-size:6px}.gate-button .lamp{top:7px;right:7px}
  .procedure,.station{padding:80px 22px}.procedure li{grid-template-columns:35px 1fr}.station{min-height:auto}.station-copy h2{font-size:48px}footer{flex-direction:column;text-align:center}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}