/* The History of Hacking – full-width scroll story */
main.content.play{max-width:none;padding:0;margin:0}
.h-hud{position:fixed;right:16px;top:66px;z-index:40;font:700 15px var(--mono);color:#fff;background:rgba(0,0,0,.55);padding:6px 12px;border-radius:20px;opacity:0;transition:opacity .3s;pointer-events:none}
.h-past-intro .h-hud{opacity:1}
.h-bar{position:fixed;left:0;right:0;top:51px;height:3px;z-index:40;background:transparent}
.h-bar i{display:block;height:100%;width:0;background:var(--green)}

.ch{--bg:#0d0d17;--ink:#cfd8d3;--head:#00ff66;--acc:#00ff66;--paper:#12121f;--font:var(--sans);
  background:var(--bg);color:var(--ink);font-family:var(--font);min-height:92vh;display:flex;align-items:center;padding:72px 20px}
.ch .in{max-width:1080px;margin:0 auto;width:100%}
.ch .two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.ch .yr{font:700 clamp(48px,9vw,112px)/1 var(--mono);color:var(--acc);margin:0 0 6px;letter-spacing:-2px}
.ch h1,.ch h2{color:var(--head);font-family:var(--font);margin:0 0 14px;line-height:1.15}
.ch h1{font-size:clamp(40px,7vw,80px)}
.ch h2{font-size:clamp(26px,3.6vw,40px);border:0;padding:0}
.ch p{font-size:18px;line-height:1.7;max-width:62ch}
.ch p.big{font-size:clamp(20px,2.4vw,26px);line-height:1.5}
.ch a{color:var(--acc)}
.ch strong{color:var(--head)}
.ch .kicker{font:700 14px var(--mono);letter-spacing:3px;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.scroll-hint{font:16px var(--mono);color:var(--acc);animation:hint 1.6s ease-in-out infinite}
@keyframes hint{50%{transform:translateY(6px)}}
.intro{min-height:calc(100vh - 52px)}

/* reveal as you scroll */
.ch .in{opacity:.001;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.ch.seen .in,.ch.intro .in,.ch.sources .in{opacity:1;transform:none}

/* illustrations */
.ill{width:100%;max-width:380px;height:auto;justify-self:center}
.ill .s{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ill .p{fill:var(--paper)}
.ill .p.s{fill:var(--paper)}
.ill .f{fill:var(--ink)}
.ill .a{fill:var(--acc)}
.ill .a.s{fill:none;stroke:var(--acc)}
.ill .w8{stroke-width:8}
.ill .t{font:700 13px var(--mono);fill:var(--ink)}
.ill .t.a2{fill:var(--acc)}
.ill .t.inv{fill:var(--bg)}
canvas.rain{background:#000;border-radius:12px;aspect-ratio:240/200}

/* era looks */
.era-paper{--bg:#efe4cb;--ink:#3b2f1e;--head:#5a3410;--acc:#9b3d12;--paper:#f8f1df;--font:Georgia,'Times New Roman',serif}
.era-war{--bg:#1d2620;--ink:#d9dfc8;--head:#f2e6b0;--acc:#e0b24a;--paper:#2a352d;--font:'Courier New',Courier,monospace}
.era-mit{--bg:#0d1b2a;--ink:#cfe3ff;--head:#ffffff;--acc:#ff8a3d;--paper:#16283c}
.era-phone{--bg:#2b1608;--ink:#ffe2c2;--head:#ffb347;--acc:#ff7a1a;--paper:#3d2210}
.era-crt{--bg:#000;--ink:#9cffb6;--head:#33ff66;--acc:#33ff66;--paper:#0a1a0e;--font:var(--mono)}
.era-crt{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.era-web{--bg:#0b0b3b;--ink:#dfe3ff;--head:#ffffff;--acc:#ffd23f;--paper:#1a1a5a}
.era-matrix{--bg:#000;--ink:#b8ffcf;--head:#00ff66;--acc:#00ff66;--paper:#001a08}

/* widgets */
.widget{margin:20px 0 6px;padding:16px;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:12px;background:color-mix(in srgb,var(--paper) 70%,transparent);max-width:560px}
.widget label{display:block;font:700 14px var(--mono);color:var(--head);margin-bottom:8px}
.widget input{font:700 18px var(--mono);letter-spacing:2px;text-transform:uppercase;background:var(--bg);color:var(--ink);border:2px solid var(--acc);border-radius:8px;padding:8px 12px;width:100%;max-width:320px}
.widget button{font:700 15px var(--mono);background:var(--acc);color:var(--bg);border:0;border-radius:8px;padding:10px 16px;cursor:pointer}
.widget button[disabled]{opacity:.5;cursor:default}
.widget .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ch .widget .note{font-size:14px;opacity:.85;margin:10px 0 0;padding:0;background:none;border:0;border-radius:0;color:var(--ink)}
.mono{font-family:var(--mono)}
#morse-out{font-size:22px;letter-spacing:3px;word-break:break-word;min-height:1.5em;margin:12px 0 0}
.big-btn{font-size:20px!important;padding:16px 26px!important}

.card-grid{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;background:var(--paper);padding:12px;border-radius:6px;box-shadow:inset 0 0 0 2px var(--ink)}
.pc-col{display:flex;flex-direction:column;gap:4px;align-items:center}
.pc-col i{width:12px;height:16px;border-radius:2px;background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent)}
.pc-col i.on{background:var(--ink)}
.pc-col b{font:700 12px var(--mono);margin-top:4px}

.enigma .rotors{display:flex;gap:8px;margin-bottom:10px}
.enigma .rotors span{width:38px;height:44px;display:flex;align-items:center;justify-content:center;font:700 22px var(--mono);background:var(--bg);color:var(--acc);border:2px solid var(--acc);border-radius:6px}
.lamps{display:grid;grid-template-columns:repeat(9,28px);gap:6px;margin:10px 0 12px}
.lamps i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);font-style:normal;background:var(--bg);color:color-mix(in srgb,var(--ink) 55%,transparent);border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.lamps i.lit{background:#ffd34d;color:#000;box-shadow:0 0 14px #ffd34d}
#enigma-out{color:var(--acc);letter-spacing:2px}

.crt{background:#000;color:#33ff66;border:2px solid #1b5;border-radius:10px;padding:14px;min-height:220px;font:15px/1.5 var(--mono);white-space:pre-wrap;margin:0;text-shadow:0 0 6px rgba(51,255,102,.6)}
.worm{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:12px}
.worm i{aspect-ratio:1;border-radius:4px;background:#0f2a16;border:1px solid #1b5;transition:background .3s}
.worm i.inf{background:#ffb000;border-color:#ffb000}
.worm i.slow{background:#ff3344;border-color:#ff3344;animation:pulse .6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}
.mail .mono{font-size:15px;line-height:1.7}
.mini-typer{background:#000;color:#00ff66;border:2px solid #1b5;border-radius:10px;padding:14px;height:220px;overflow:auto;font:14px/1.5 var(--mono);white-space:pre-wrap;margin:0;cursor:text;outline:none}
.mini-typer:focus{border-color:#00ff66}
.next{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.next a{border:1px solid var(--acc);border-radius:8px;padding:10px 14px;text-decoration:none;font:700 14px var(--mono)}
.next a:hover{background:var(--acc);color:var(--bg)}
.sources{min-height:0}
.sources ul{font-size:15px;line-height:1.8}
.sources .faq h2{margin-top:30px}
.sources .faq h3{color:var(--head);font-size:18px;margin:18px 0 4px}

@media (max-width:820px){
  .ch{padding:56px 16px;min-height:0}
  .ch .two{grid-template-columns:1fr;gap:24px}
  .ill{max-width:260px;order:-1}
  .ch p{font-size:17px}
  .lamps{grid-template-columns:repeat(9,1fr)}
  .lamps i{width:auto;aspect-ratio:1;height:auto}
  .h-hud{top:60px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.ch .in{transition:none;transform:none;opacity:1}.scroll-hint{animation:none}}