/* aquarium · launch site
   The house palette in its site-reading mode: warm paper, deep pine teal
   (toks.love light — the same document the app ships as a theme).
   Type scale for the chrome: 12 / 14 / 15 / 17 / 22 / 30. No half-points.
   (The diagram boxes carry their own engine scale — that's the component.) */

:root{
  --ink:      #faf9f6;
  --panel:    #ffffff;
  --panel-2:  #eff1ec;
  --rule:     #d8ddd7;
  --text:     #272b2b;
  --dim:      #606762;
  --faint:    #a3aba4;
  --signal:   #21645b;
  --signal-dim: #c2d8d2;
  --ok:       #2e7d4f;
  --err:      #b23b2e;
  --wirecol:  #35657d;

  --accent:   var(--signal);
  --mono:     ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --serif:    'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:     -apple-system,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --maxw:     1080px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  display:flex;flex-direction:column;min-height:100vh;
}

/* ── header ───────────────────────────────────────────── */
header{
  display:flex;align-items:center;gap:28px;
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:11px;color:var(--signal);flex:none}
.mark{width:40px;height:19px;flex:none}
.brandtext{display:flex;flex-direction:column;line-height:1.15}
.brandname{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.brandsub{font-size:12px;color:var(--dim)}
nav{display:flex;gap:4px;margin-left:auto}
.tab{
  appearance:none;border:1px solid transparent;background:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--dim);padding:6px 12px;border-radius:6px;
}
.tab:hover{color:var(--text);background:var(--panel-2)}
.tab.on{color:var(--signal);background:var(--panel);border-color:var(--rule)}

/* ── pages ────────────────────────────────────────────── */
main{flex:1;width:100%}
.tabpage{display:none;max-width:var(--maxw);margin:0 auto;padding:26px 24px 60px}
.tabpage.on{display:block}
.lead{
  font-size:15px;line-height:1.6;max-width:760px;
  margin:6px 0 22px;color:var(--text);
}
.lead strong, h1, h2{letter-spacing:-.01em}
h1{font-size:22px;font-weight:700;margin:8px 0 10px}
h2{font-size:17px;font-weight:700;margin:30px 0 8px}
.sect{max-width:760px;margin:8px 0;color:var(--dim)}
.sect code, .facts code, td code, .diagfoot code{
  font-family:var(--mono);font-size:12px;background:var(--panel-2);
  border:1px solid var(--rule);border-radius:4px;padding:0 4px;color:var(--text);
}
ul.facts{max-width:760px;margin:8px 0;padding:0 0 0 20px;color:var(--dim)}
ul.facts li{margin:7px 0}
ul.facts li strong{color:var(--text)}

/* ── tables ───────────────────────────────────────────── */
table{
  border-collapse:collapse;width:100%;max-width:920px;margin:12px 0 6px;
  background:var(--panel);border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;font-size:13px;
}
th{
  text-align:left;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  padding:9px 14px;background:var(--panel-2);border-bottom:1px solid var(--rule);
}
td{padding:9px 14px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--dim)}
tr:last-child td{border-bottom:none}
td strong{color:var(--text)}
td:first-child{color:var(--text)}

/* ── diagram frame ────────────────────────────────────── */
.diagramframe{
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;
}
.diaghead{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;border-bottom:1px solid var(--rule);background:var(--panel-2);
}
.diagtitle{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}
.diagsub{font-size:12px;color:var(--faint)}
.spacer{flex:1}
.ctl.mini{
  appearance:none;cursor:pointer;font-family:var(--mono);font-size:12px;
  color:var(--dim);background:var(--panel);border:1px solid var(--rule);
  border-radius:6px;padding:3px 9px;
}
.ctl.mini:hover{color:var(--signal);border-color:var(--signal-dim)}
#crumbs{padding:8px 12px 0;display:flex;gap:8px;min-height:0}
#crumbs:empty{display:none}
.crumb{
  appearance:none;cursor:pointer;font-family:var(--mono);font-size:12px;
  color:var(--signal);background:var(--panel-2);border:1px solid var(--signal-dim);
  border-radius:999px;padding:3px 12px;
}
.crumb:hover{background:var(--signal-dim)}
#archbody{position:relative;overflow:hidden;height:560px;display:flex;--chrome:12px}
/* the product's container overrides: the viewport is an in-flow flex item,
   the panel a collapsed right-hand column that opens to 320px */
#archbody #viewport{position:relative;inset:auto;flex:1;min-width:0}
#archbody #panel.open{width:min(320px,55%)}
#archbody #panel>*{min-width:min(320px,55%)}
.diagfoot{font-size:13px;color:var(--dim);max-width:760px;margin:14px 0 0}

/* the engine's panel body ships dark-theme text — re-tint for the paper
   theme; everything else in the panel is var-driven */
#peyebrow{font-size:10px;letter-spacing:.14em;white-space:nowrap;padding:14px 46px 0 16px}
#pbody{font-size:13px}
#pbody p{color:var(--text)}
#pbody p strong{color:var(--text)}
#pbody li{color:var(--dim)}
#pbody li strong{color:var(--text)}
#pbody p:first-of-type{color:var(--text)}
#pbody ul,#pbody ol{margin:8px 0;padding-left:18px}
#pbody li{margin:4px 0}
#pbody code{
  font-family:var(--mono);font-size:12px;background:var(--panel-2);
  border:1px solid var(--rule);border-radius:4px;padding:0 4px;
}

/* ── gallery ──────────────────────────────────────────── */
#shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:800px){#shots{grid-template-columns:1fr}}
.shot{background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--rule)}
.shot figcaption{padding:10px 14px;font-size:13px;color:var(--dim)}
.shot figcaption b{color:var(--text);font-weight:600}

/* ── footer ───────────────────────────────────────────── */
footer{
  display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
  max-width:var(--maxw);width:100%;margin:0 auto;
  padding:16px 24px 26px;border-top:1px solid var(--rule);
  font-size:12px;color:var(--faint);
}
.fs{color:var(--faint)}

@media (max-width:720px){
  header{flex-wrap:wrap;gap:12px}
  nav{margin-left:0}
  #archbody{height:440px}
}