/* Frame chrome — body/grid/rail/stage/controls/block/mobnav/hint + media queries
   (original CSS block 1, lines 27-176, plus the .rail-cap button overrides that
   originally lived at the tail of CSS block 2, lines 1426-1429). */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--body);
  overflow:hidden;
}
/* drafting grid */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(91,200,242,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,200,242,.07) 1px,transparent 1px),
    linear-gradient(rgba(91,200,242,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,200,242,.14) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 40%,transparent 40%,var(--ink-deep) 100%);
  opacity:.85;
}

.frame{position:relative;z-index:2;height:100vh;display:grid;
  grid-template-columns:var(--rail) 1fr;
  grid-template-rows:1fr var(--block);
}

/* ---------- sheet index rail ---------- */
.rail{
  grid-row:1/3;
  border-right:1px solid rgba(91,200,242,.28);
  display:flex;flex-direction:column;
  padding:22px 0 14px;
  background:rgba(5,15,27,.35);
}
.rail-cap{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:var(--chalk);opacity:.45;padding:0 16px 16px;
}
.tab{
  appearance:none;background:none;border:0;border-left:3px solid transparent;
  color:var(--chalk);text-align:left;cursor:pointer;
  padding:11px 14px;display:block;width:100%;
  transition:background .2s,border-color .2s,opacity .2s;
  opacity:.5;
}
.tab:hover{opacity:.85;background:rgba(91,200,242,.06)}
.tab.on{opacity:1;border-left-color:var(--brass);background:rgba(232,176,75,.09)}
.tab b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--brass);font-weight:600}
.tab span{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:.03em;line-height:1.1;margin-top:3px;text-transform:uppercase}
.tab:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* ---------- stage ---------- */
.stage{position:relative;overflow:hidden;display:grid}
.sheet{
  grid-area:1/1;display:flex;flex-direction:column;
  padding:26px 40px 8px;min-height:0;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease,visibility .45s;
}
.sheet.on{opacity:1;visibility:visible;transform:none}

.head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;flex:0 0 auto}
.head h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,58px);letter-spacing:.02em;line-height:.92;margin:0;
}
.head p{margin:0;font-size:15px;color:var(--cyan);opacity:.9;max-width:52ch}

.art{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:6px 0}
svg.scene{width:100%;height:100%;max-height:100%;overflow:visible}

/* shared svg drafting styles */
.scene{stroke-linecap:round;stroke-linejoin:round}
.ln{stroke:var(--chalk);stroke-width:2.2;opacity:.92}
.ln-thin{stroke:var(--cyan);stroke-width:1.4;opacity:.6}
.ln-dash{stroke:var(--cyan);stroke-width:1.4;opacity:.55;stroke-dasharray:7 7}
.ln:not([fill]),.ln-thin:not([fill]),.ln-dash:not([fill]){fill:none}
.fill-soft{fill:rgba(91,200,242,.08);stroke:var(--cyan);stroke-width:1.6}
.glow{fill:rgba(232,176,75,.35);stroke:var(--brass);stroke-width:1.6}
.tag{font-family:var(--mono);font-size:12px;fill:var(--cyan);letter-spacing:.08em}
.tag-red{fill:var(--red)}
.tag-green{fill:var(--green)}
.tag-brass{fill:var(--brass)}
.hdr{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;fill:var(--chalk);opacity:.75}
.red{stroke:var(--red)!important;opacity:1}
.green{stroke:var(--green)!important}

/* draw-in helper */
.draw{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset .9s ease}
.go .draw{stroke-dashoffset:0}

/* ---------- controls ---------- */
.controls{flex:0 0 auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:10px 0 4px}
.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;color:var(--chalk);
  border:1px solid rgba(91,200,242,.5);border-radius:0;
  padding:11px 20px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .1s;
}
.btn:hover{background:rgba(91,200,242,.14);border-color:var(--cyan)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.btn.key{border-color:var(--brass);color:var(--brass)}
.btn.key:hover{background:rgba(232,176,75,.14)}
.btn[disabled]{opacity:.3;cursor:not-allowed}
.readout{font-family:var(--mono);font-size:12px;letter-spacing:.06em;opacity:0;transition:opacity .4s;margin-left:4px}
.readout.show{opacity:.8}
.readout.warn{color:var(--red)}
.readout.ok{color:var(--green)}

/* ---------- title block ---------- */
.block{
  border-top:1px solid rgba(91,200,242,.28);
  display:grid;grid-template-columns:2.2fr 1fr 1.4fr 1fr .8fr;
  font-family:var(--mono);
  background:rgba(5,15,27,.4);
}
.cell{padding:12px 18px;border-right:1px solid rgba(91,200,242,.16);display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.cell:last-child{border-right:0}
.cell i{font-style:normal;font-size:8.5px;letter-spacing:.24em;opacity:.42}
.cell b{font-weight:600;font-size:13px;letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell b.big{font-family:var(--display);font-size:26px;letter-spacing:.06em;color:var(--brass)}

/* ---------- title / hero page (sheet 0) ---------- */
/* Overrides the default .sheet padding layout with a centered hero stack. */
.titlesheet{justify-content:center;align-items:center;padding:26px 40px}
.titlehero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:22px;max-width:940px;
}
.titlehero__logo{
  width:clamp(96px,13vw,168px);height:auto;
  filter:drop-shadow(0 0 30px rgba(91,200,242,.25));
}
.titlehero__kicker{
  margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--cyan);opacity:.8;
}
.titlehero__title{
  margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(46px,9vw,132px);line-height:.86;letter-spacing:.01em;
  color:var(--chalk);
}
.titlehero__sub{
  margin:0;font-size:clamp(15px,1.9vw,21px);line-height:1.5;
  color:var(--cyan);opacity:.92;max-width:44ch;
}
.titlehero__cta{margin-top:10px;font-size:13px;padding:14px 30px}

.mobnav{display:none;position:fixed;right:12px;bottom:calc(var(--block) + 12px);z-index:8;gap:8px}
.mobnav .btn{background:rgba(5,15,27,.92)}
.hint{
  position:fixed;right:16px;top:14px;z-index:9;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;opacity:.32;
}
kbd{border:1px solid currentColor;padding:1px 5px;font-size:9px}

@media (max-width:860px){
  :root{--rail:0px;--block:78px}
  .rail{display:none}
  .frame{grid-template-columns:1fr}
  .sheet{padding:20px 20px 6px}
  .block{grid-template-columns:1fr 1fr}
  .cell:nth-child(n+3){display:none}
  /* Pin the prev/next nav to the top-right so it clears the sheet's own
     controls at the bottom (they overlapped and blocked the page buttons). */
  .mobnav{display:flex;top:10px;right:10px;bottom:auto}
  /* Reserve the top-right corner for the nav: cap the TITLE width so a long
     title wraps under the buttons instead of running beneath them. The
     subtitle keeps full width and flows below. */
  .sheet{padding-top:12px}
  .head h1{font-size:clamp(26px,7vw,40px);max-width:calc(100% - 180px)}
  .head p{flex-basis:100%}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* rail-cap is a <button> — reset native button styling (originally CSS block 2 tail) */
.rail-cap{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;padding:inherit;transition:color .2s}
.rail-cap:hover{color:var(--brass)}
.rail-cap:focus-visible{outline:1px solid var(--brass)}