:root{
  --bg:#efece4;
  --panel:rgba(255,255,255,.66);
  --panel-2:rgba(255,255,255,.82);
  --line:#dcd6c9;
  --line-2:#c6bfb0;
  --text:#1f1b16;
  --text-2:#554e45;
  --text-3:#8b8175;
  --accent:#5645b8;
  --accent-soft:#eae7fa;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}
body.boot *{transition:none !important}   /* no animation while the page settles */
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100%;
  background-image:radial-gradient(115% 90% at 50% 0%, #f8f6f1 0%, #efece4 55%, #e3dfd3 100%);
  background-attachment:fixed;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
button,input,textarea,select{font-family:inherit; color:inherit}

.page{display:flex; flex-direction:column; min-height:100vh}

/* ---------- top bar ---------- */
.bar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:max(14px, env(safe-area-inset-top)) 20px 0; flex:none;
}
.home,.icon{
  display:inline-flex; align-items:center; gap:7px; height:38px;
  color:var(--text); text-decoration:none; font:500 14px/1 var(--sans);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.home{padding:0 14px 0 10px}
.home span{font-family:var(--serif); font-size:18px; letter-spacing:.01em}
.icon{width:38px; justify-content:center; padding:0}
.home:hover,.icon:hover{background:#fff; border-color:var(--line-2)}

/* ---------- layout ---------- */
main{
  flex:1; display:grid; grid-template-columns:minmax(0,1fr) 340px;
  gap:22px; padding:10px 20px max(22px, env(safe-area-inset-bottom));
  align-items:start;
}
.stage{display:flex; flex-direction:column; gap:14px; min-width:0}
.titleblock{max-width:660px; padding:6px 2px 0}
.kicker{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3)}
h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(34px, 4.4vw, 58px);
  line-height:.98; letter-spacing:-.01em; margin:4px 0 8px;
}
.sub{font-size:14.5px; line-height:1.55; color:var(--text-2); max-width:58ch}
.sub em{color:var(--text); font-style:italic; font-family:var(--serif); font-size:17px}
.lbl{font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}

/* ---------- room tabs ---------- */
.rooms{display:flex; gap:8px; flex-wrap:wrap}
.room{
  flex:1 1 0; min-width:120px; display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:9px 14px 10px; cursor:pointer; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:13px;
  transition:background .15s, border-color .15s, color .15s;
}
.room .rn{font-family:var(--serif); font-size:22px; line-height:1.1}
.room .ry{font-size:11px; letter-spacing:.08em; color:var(--text-3); font-variant-numeric:tabular-nums}
.room .sc{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase}
.room:hover{background:#fff; border-color:var(--line-2)}
.room.is-on{background:var(--text); border-color:var(--text); color:#f6f3ec}
.room.is-on .ry{color:#bdb4a4}

/* ---------- machine panels ---------- */
.machine{
  display:flex; gap:18px; align-items:center;
  padding:14px 16px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line);
}
#disc{width:176px; height:176px; flex:none; cursor:grab; touch-action:none; border-radius:50%}
#disc:active{cursor:grabbing}
.mbody{display:flex; flex-direction:column; gap:7px; min-width:0}
.mbody.wide{width:100%}
.mnote{font-size:12.5px; line-height:1.6; color:var(--text-3); max-width:60ch}
.mnote b{color:var(--text-2); font-weight:600}
.mnote i{font-style:italic; color:var(--text-2)}
.stepper{display:flex; align-items:center; gap:10px}
.big{font-family:var(--serif); font-size:34px; line-height:1; min-width:1.6ch; text-align:center; font-variant-numeric:tabular-nums}
.sq{
  width:30px; height:30px; flex:none; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:9px; background:var(--panel-2); color:var(--text-2);
  font-size:16px; line-height:1;
}
.sq:hover{background:#fff; color:var(--text); border-color:var(--line-2)}

#keyInput{
  width:min(280px,100%); height:38px; padding:0 12px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel-2);
  font:600 17px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
#keyInput:focus{background:#fff}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips button{
  height:28px; padding:0 10px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2);
  color:var(--text-2); font:500 12.5px var(--sans);
}
.chips button:hover{background:#fff; color:var(--text); border-color:var(--line-2)}
.chips button.is-on{background:var(--text); border-color:var(--text); color:#f6f3ec}

/* ---------- enigma ---------- */
.erow{display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start}
.egroup{display:flex; flex-direction:column; gap:6px}
.egroup.grow{flex:1 1 220px; min-width:0}
.cnt{font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--accent)}
.rotors{display:flex; gap:6px}
.rotors select{
  height:36px; padding:0 4px 0 8px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel-2);
  font:600 13px var(--mono); letter-spacing:.06em;
}
.wheels{display:flex; gap:6px}
.wheel{display:flex; flex-direction:column; align-items:center; gap:1px}
.wheel button{
  width:34px; height:13px; display:grid; place-items:center; cursor:pointer; color:var(--text-3);
  border:0; background:transparent; line-height:0;
}
.wheel button:hover{color:var(--accent)}
.wheel .win{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:7px;
  background:#2b251d; color:#f4efe4; font:600 17px var(--mono);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.45);
}
.plug{display:flex; flex-direction:column; gap:3px}
.plugrow{display:flex; gap:3px}
.plugrow.r1{padding-left:13px}
.plugrow.r2{padding-left:6px}
.plug button{
  width:25px; height:25px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--line); border-radius:6px; background:var(--panel-2);
  font:600 11.5px var(--mono); color:var(--text-2);
}
.plug button:hover{border-color:var(--accent); color:var(--accent)}
.plug button.wired{background:var(--accent); border-color:var(--accent); color:#fff}
.plug button.armed{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}

/* ---------- message ---------- */
.msg{display:flex; flex-direction:column; gap:8px}
.msg-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
#text{
  width:100%; resize:vertical; min-height:74px; padding:11px 13px; border-radius:13px;
  border:1px solid var(--line); background:var(--panel-2);
  font:400 14px/1.6 var(--sans); color:var(--text);
}
#text:focus{background:#fff}
.msg-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel-2)}
.seg button{
  height:34px; padding:0 13px; border:0; background:transparent; cursor:pointer;
  font:500 13px var(--sans); color:var(--text-3);
}
.seg button+button{border-left:1px solid var(--line)}
.seg button.on{background:var(--accent); color:#fff}
.ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px; padding:0 13px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel-2);
  color:var(--text-2); font:500 13px var(--sans); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.ghost:hover{background:#fff; color:var(--text); border-color:var(--line-2)}
.ghost.done{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- output + tape ---------- */
.outwrap{display:flex; flex-direction:column; gap:7px}
.out{
  padding:10px 12px; border-radius:12px; max-height:78px; overflow:auto;
  background:#2b251d; color:#f0e9dc; border:1px solid #241f18;
  font:400 12.5px/1.7 var(--mono); letter-spacing:.06em; word-break:break-word;
  min-height:44px;
}
.out.plain{background:var(--panel-2); color:var(--text-2); border-color:var(--line); letter-spacing:0}
.out:empty::before{content:'Nothing to encipher yet.'; color:#8a8071; letter-spacing:0}
.tapewrap{display:flex; flex-direction:column; gap:7px}
.tape-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.hint{font-size:11.5px; color:var(--text-3); font-variant-numeric:tabular-nums}
.tape{
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:11px 0;
  padding:11px 12px; border-radius:13px; max-height:213px; overflow:auto;   /* three whole lines */
  background:var(--panel-2); border:1px solid var(--line);
  font-family:var(--mono);
}
.col{display:flex; flex-direction:column; align-items:center; width:11px; flex:none}
.col.gap{width:6px}
.col i{font-style:normal; line-height:1.5; font-size:12.5px}
.col .p{color:var(--text-3)}
.col .k{color:var(--accent); font-size:11px}
.col .c{color:var(--text); font-weight:600}
.col.hot .p{color:var(--text); font-weight:600}
.col.hot .c{background:#f0c34b; border-radius:3px; width:11px; text-align:center}
.col.hot.rev .p{background:#f0c34b; border-radius:3px; width:11px; text-align:center; font-weight:400}
.col.hot.rev .c{background:none; width:auto; color:var(--text); font-weight:600}
.tapelegend{display:flex; gap:14px; font-size:11px; color:var(--text-3); flex-wrap:wrap}
.tapelegend i{font-style:italic; font-family:var(--mono); font-size:11px}
.k4::before{background:#f0c34b}
.tapelegend span::before{
  content:''; display:inline-block; width:8px; height:8px; border-radius:2px;
  margin-right:5px; vertical-align:baseline;
}
.k1::before{background:var(--text-3)}
.k2::before{background:var(--accent)}
.k3::before{background:var(--text)}

/* ---------- the desk ---------- */
.desk{
  position:sticky; top:14px;
  display:flex; flex-direction:column; gap:14px;
  padding:16px; border-radius:18px;
  background:var(--panel); border:1px solid var(--line);
}
.desk-title{color:var(--accent)}
.fpwrap{display:flex; flex-direction:column; gap:7px}
#fp{
  width:100%; height:132px; display:block; border-radius:11px;
  background:var(--panel-2); border:1px solid var(--line);
}
.caption{font-size:11.5px; line-height:1.55; color:var(--text-3)}
.caption b{color:var(--text-2); font-weight:600}

.gauge{display:flex; flex-direction:column; gap:6px}
.gauge-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.ic{font:400 26px var(--serif); font-variant-numeric:tabular-nums}
.track{
  position:relative; height:10px; border-radius:5px;
  background:linear-gradient(90deg,#cfc9bb 0%, #cfc9bb 12%, var(--accent) 100%);
  opacity:.9;
}
.tick{position:absolute; top:-3px; width:1px; height:16px; background:var(--text-3)}
.t-noise{left:12%}
.t-eng{left:88%}
.needle{
  position:absolute; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px;
  border-radius:50%; background:#fff; border:3px solid var(--text);
  transition:left .35s cubic-bezier(.4,1.3,.5,1); left:88%;
}
.gscale{display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-3); font-variant-numeric:tabular-nums}
.verdict{
  font-size:13px; line-height:1.6; color:var(--text-2);
  padding:10px 12px; border-radius:11px; background:var(--accent-soft);
  border:1px solid #ddd8f4;
}
.verdict b{color:var(--accent); font-weight:600}

/* ---------- cracking ---------- */
.crack{display:flex; flex-direction:column; gap:10px}
.solve{
  height:38px; border-radius:11px; cursor:pointer; width:100%;
  border:1px solid var(--text); background:var(--text); color:#f6f3ec;
  font:500 13.5px var(--sans); transition:background .15s;
}
.solve:hover{background:#000}
.ladder{display:flex; flex-direction:column; gap:2px}
.ladder .row{
  display:grid; grid-template-columns:30px 1fr; gap:8px; align-items:center;
  padding:3px 5px; border-radius:7px; cursor:pointer; border:0; background:transparent; text-align:left;
  font:400 11.5px var(--mono); color:var(--text-3); width:100%;
}
.ladder .row:hover{background:var(--panel-2)}
.ladder .row.win{background:var(--accent-soft); color:var(--text)}
.ladder .row .s{color:var(--accent); font-weight:600}
.ladder .row .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ladder .hd{font:600 10.5px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); padding:0 5px 2px}

.vig{display:flex; flex-direction:column; gap:9px}
.klen{display:flex; align-items:flex-end; gap:3px; height:54px; margin-top:5px; max-width:100%}
.klen .kb{flex:1 1 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; height:100%}
.klen .bar{width:100%; background:#cfc9bb; border-radius:2px 2px 0 0; min-height:1px}
.klen .kb.win .bar{background:var(--accent)}
.klen .kb span{font:400 9.5px var(--mono); color:var(--text-3)}
.klen .kb.win span{color:var(--accent); font-weight:600}
.found{font-size:12.5px; line-height:1.6; color:var(--text-2)}
.found b{font:600 14px var(--mono); letter-spacing:.1em; color:var(--accent)}
.recovered{
  font:400 11.5px/1.55 var(--mono); color:var(--text-2);
  padding:9px 10px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line);
}
.stat{display:flex; gap:11px; align-items:flex-start}
.stat.wide{flex-direction:column; gap:4px}
.statbig{font:400 34px/1 var(--serif); color:var(--accent); flex:none; font-variant-numeric:tabular-nums}
.statnum{
  font:600 clamp(11px, 1.55vw, 14px)/1.2 var(--mono); color:var(--accent);
  letter-spacing:-.02em; white-space:nowrap;
}
.statlbl{font-size:11.5px; line-height:1.55; color:var(--text-3)}
.statlbl b{color:var(--text-2); font-weight:600}

/* ---------- about ---------- */
dialog{
  margin:auto; width:min(620px, calc(100% - 32px)); max-height:calc(100% - 40px);
  border:0; border-radius:20px; padding:0; color:var(--text); background:#fbfaf6;
  box-shadow:0 30px 80px -24px rgba(31,27,22,.45);
}
dialog::backdrop{background:rgba(31,27,22,.44); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.about{position:relative; padding:30px 32px 28px}
.about .x{position:absolute; top:14px; right:14px; width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:8px; background:transparent; color:var(--text-3); cursor:pointer}
.about .x:hover{background:#eae6dd; color:var(--text)}
.about .kicker{color:var(--accent)}
.about h2{font-family:var(--serif); font-weight:400; font-size:38px; line-height:1.05; margin:6px 0 14px}
.about p{font-size:15px; line-height:1.65; color:#463f36; margin-bottom:12px}
.about b{font-weight:600; color:var(--text)}
.about i{font-style:italic}
.about .fine{font-size:13.5px; color:var(--text-3); margin:16px 0 0; padding-top:14px; border-top:1px solid #e6e1d7}
kbd{font:500 11px var(--mono); padding:1px 5px; border-radius:4px; border:1px solid var(--line-2); color:var(--text-2)}

/* ---------- phone ---------- */
@media (max-width:920px){
  /* minmax(0,1fr), not 1fr: a plain 1fr track grows to its widest child's
     min-content, and the key-length chart is a 14-item flex row */
  main{grid-template-columns:minmax(0,1fr); gap:14px; padding:8px 14px max(22px, env(safe-area-inset-bottom))}
  .desk{position:static}
  .sub{font-size:13.5px}
  .sub em{font-size:15.5px}
  .room{min-width:0; padding:8px 10px 9px}
  .room .rn{font-size:18px}
  .machine{padding:13px; gap:12px; flex-direction:column; align-items:stretch}
  #disc{width:172px; height:172px; align-self:center}
  .big{font-size:28px}
  .erow{gap:14px}
  .plug{max-width:100%}
  .plug button{width:28px; height:28px}
  .tape{max-height:146px}
  .about{padding:26px 22px 22px}
  .about h2{font-size:30px}
}
@media (max-width:420px){
  .room .rn{font-size:16px}
  .room .ry{font-size:10px}
  .plug button{width:26px; height:26px; font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}