:root{
  --paper:#e4decd;
  --sheet:#f1eadb;
  --ink:#20262a;
  --muted:#687078;
  --line:#aeb4b8;
  --dark:#0d1216;
  --dark2:#131b20;
  --light:#dbe0e4;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
#app{min-height:100vh}
.top{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:18px 26px;font:12px "Courier New",monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.btn{border:1px solid var(--line);background:#f7f2e6;color:var(--ink);padding:11px 16px;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.btn.dark{background:var(--dark);color:#f7f2e6;border-color:var(--dark)}
.code{font:12px "Courier New",monospace;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.small{font-size:13px;color:var(--muted)}
.rule{height:1px;background:var(--line);margin:22px 0}
.copy{max-width:760px;font-size:18px;line-height:1.65;color:#43484d}

/* ACCESS */
.access{min-height:100vh;background:var(--dark);color:var(--light);display:grid;grid-template-rows:auto 1fr}
.access .top{border-color:#303940;color:#87939a}
.accessBody{display:grid;place-items:center;padding:40px}
.accessBox{width:min(520px,90vw)}
.access h1{font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.access input{width:100%;background:#0c1114;border:1px solid #384249;color:var(--light);padding:14px;margin:22px 0 12px;font-family:"Courier New",monospace}
.access .btn{background:#151d22;color:var(--light);border-color:#384249}

/* DOSSIER */
.dossier{padding:34px 40px;background:repeating-linear-gradient(0deg,transparent 0 33px,rgba(20,25,29,.035) 34px),var(--paper);min-height:100vh}
.sheet{max-width:1050px;border:1px solid var(--line);background:var(--sheet);padding:28px 34px}
.sheet h1{font-size:28px;font-weight:300;margin:0 0 4px}
.section{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.section h3{font:14px "Courier New",monospace;letter-spacing:.12em;text-transform:uppercase;margin:0 0 14px;color:#4c5358}
.sheetGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px}
.field label{display:block;font-size:12px;color:#555;text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.field input,.field select{width:100%;border:1px solid var(--line);background:#faf7ee;padding:11px}
.designation{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px}
.checklist label{font-size:15px;line-height:1.4}
.sideNote{border-left:3px solid #9aa2a8;padding-left:13px;color:#555;font-size:14px;line-height:1.5}

/* BATTERY */
.battery{padding:34px 40px;min-height:100vh;background:#ded8c8}
.batterySheet{max-width:1100px;border:1px solid var(--line);background:#f1ebdc;padding:28px}
.batterySheet h1{font-size:28px;font-weight:300;margin:0 0 10px}
.gridTable{display:grid;grid-template-columns:1fr 72px 72px 100px 100px 80px;border:1px solid var(--line)}
.gridTable div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px;font-size:14px}
.gridTable .head{font:11px "Courier New",monospace;text-transform:uppercase;letter-spacing:.1em;color:#555;background:#ddd7ca}
.gridTable label{display:grid;place-items:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

/* CAL */
.cal{min-height:100vh;background:var(--dark);color:var(--light);display:grid;grid-template-rows:auto 1fr}
.cal .top{border-color:#303940;color:#87939a}
.calStage{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:42px}
.rig{border:1px solid #303940;background:#0b1013;padding:26px;min-height:620px}
.rigTitle{font:12px "Courier New",monospace;letter-spacing:.18em;color:#87939a;text-transform:uppercase;margin-bottom:28px}
.scope{height:210px;border:1px solid #303940;margin:24px 0;position:relative;overflow:hidden;background:linear-gradient(transparent 49%,rgba(180,190,195,.28) 50%,transparent 51%)}
.vbars,.hbars,.wave{position:absolute;inset:0;opacity:.65}
.vbars{background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(132,149,158,.32) 47px, rgba(132,149,158,.32) 52px, transparent 53px 91px);transform:translateX(var(--vx))}
.hbars{background:repeating-linear-gradient(0deg, transparent 0 36px, rgba(132,149,158,.18) 37px, rgba(132,149,158,.18) 40px, transparent 41px 72px);transform:translateY(var(--hy))}
.wave:before{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:2px;background:#aeb8bf;box-shadow:0 var(--w1) 0 #73818a,0 var(--w2) 0 #73818a;opacity:var(--waveOpacity)}
.dials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.dialBlock{text-align:center}
.dial{width:150px;height:150px;border:1px solid #56616a;border-radius:50%;margin:0 auto 12px;position:relative;background:radial-gradient(circle,#151d22 0 35%,#0b1013 36% 100%)}
.dial:before{content:"";position:absolute;left:50%;top:50%;width:2px;height:58px;background:#dbe0e4;transform-origin:bottom center;transform:translate(-50%,-100%) rotate(var(--rot))}
.dial:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#dbe0e4;transform:translate(-50%,-50%)}
.dialBlock input{width:150px;accent-color:#87939a}
.dialLabel{font:11px "Courier New",monospace;color:#87939a;text-transform:uppercase;letter-spacing:.14em}
.dialValue{font:22px "Courier New",monospace;margin-top:6px}
.lockPanel{border-left:1px solid #303940;padding-left:32px}
.lockReadout{font:24px "Courier New",monospace;line-height:1.7;color:#e6eaed}
.lockNote{color:#87939a;line-height:1.6}
.cal .btn{background:#151d22;color:#dbe0e4;border-color:#56616a}

/* RECALL */
.recall{min-height:100vh;background:#070b0e;color:#dbe0e4;display:grid;grid-template-rows:auto 1fr}
.recall .top{border-color:#20282e;color:#78858d}
.recallStage{display:grid;place-items:center;padding:40px}
.recallCard{max-width:780px;text-align:center}
.anchor{font-size:54px;color:#dbe0e4;opacity:.88;margin-bottom:30px}
.recallTitle{
  font-size:34px;
  line-height:1.45;
  font-weight:300;
  margin-bottom:44px;
  min-height:58px;
}
.recallLine{
  font-size:26px;
  line-height:1.55;
  color:#c4ccd1;
  height:150px;
  opacity:0;
  transition:opacity 1.8s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.recallLine.show{opacity:1}
#answerBox{
  height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.recallInput{
  margin-top:0;
  min-height:150px;
}
.recallQuestion{
  font-size:26px;
  color:#dbe0e4;
  margin-bottom:20px;
}
.recallInput input,.recallInput textarea{
  border:1px solid #77828a;
  background:rgba(255,255,255,.035);
  color:#dbe0e4;
  width:min(620px,80vw);
  font-size:25px;
  padding:14px 16px;
  text-align:center;
}
.recallInput textarea{min-height:105px;text-align:left}
.recall .btn{background:#10161a;color:#dbe0e4;border-color:#303940;margin-top:26px}

/* PROCESSING + ARCHIVE */
.process,.archive{min-height:100vh;background:var(--dark);color:var(--light);display:flex;flex-direction:column}
.centerBody{flex:1;display:grid;place-items:center;text-align:center}
.process .symbol,.archive .symbol{font-size:72px;margin-bottom:22px}
.processText{font:14px "Courier New",monospace;letter-spacing:.18em;color:#87939a;text-transform:uppercase}
.archiveBody{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:95px}
.archive h1{font-size:24px;font-weight:300;text-transform:uppercase;letter-spacing:.12em}
.ref{font:15px "Courier New",monospace;letter-spacing:.15em;color:#87939a}


/* v9 recall replacement */
.recallCard{
  max-width:920px;
  text-align:center;
}
.recallTitle{
  font-size:46px;
  line-height:1.25;
  font-weight:300;
  margin-bottom:54px;
  min-height:120px;
}
.recallLine{
  font-size:28px;
  line-height:1.55;
  color:#c4ccd1;
  min-height:120px;
  opacity:1;
  transition:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
#answerBox{
  min-height:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.recallQuestion{
  font-size:28px;
  color:#dbe0e4;
  margin-bottom:22px;
}
.recallInput{
  margin-top:0;
  min-height:155px;
}
.recallInput input,.recallInput textarea{
  border:1px solid #77828a;
  background:rgba(255,255,255,.04);
  color:#dbe0e4;
  width:min(680px,82vw);
  font-size:26px;
  padding:15px 16px;
  text-align:center;
}
.recallInput textarea{
  min-height:112px;
  text-align:left;
}
.recall .btn{
  background:#10161a;
  color:#dbe0e4;
  border-color:#303940;
  margin-top:28px;
}