@font-face { font-family: Inter; src: url('/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Instrument Serif; src: url('/instrument-serif.woff2') format('woff2'); font-display: swap; }
:root {
  --background:#0d101e; --surface:#151929; --well:#0c1223; --line:#323851;
  --ink:#f4f2f8; --muted:#b2b8cf; --blue:#a7e5ec; --rose:#e3badf;
  --serif:Instrument Serif,Georgia,serif;
  color-scheme:dark;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:radial-gradient(ellipse at 64% -8%,#22253d 0,transparent 44%),var(--background); color:var(--ink); font:15px/1.53 Inter,sans-serif; }
a { color:var(--blue); text-underline-offset:.22em; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.47; cursor:default; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.shell { width:min(1320px,calc(100% - 64px)); margin-inline:auto; }
.skip { position:absolute; top:-100px; left:12px; z-index:4; padding:8px; background:var(--surface); }
.skip:focus { top:8px; }
.top,.brand,.top nav,.controls,.actions,.plot-head,.zoom,.plot-foot,.below { display:flex; align-items:center; }
.top { min-height:66px; justify-content:space-between; border-bottom:1px solid var(--line); gap:12px; }
.top nav { gap:14px; justify-content:end; flex-wrap:wrap; font-size:13px; }
.brand { gap:9px; color:var(--ink); font-weight:760; text-decoration:none; }
.mark { position:relative; width:27px; height:27px; border:1px solid #548e9e; border-radius:6px; background:#273b4e; flex:none; }
.mark::before,.mark::after { content:''; position:absolute; inset:5px; border:1px solid var(--blue); border-radius:50%; transform:rotate(-35deg) scaleY(.60); }
.mark::after { transform:rotate(45deg) scaleY(.60); }
.intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(235px,305px); align-items:end; gap:18px; margin:42px 0 21px; }
h1 { margin:0; font:400 clamp(47px,7.9vw,111px)/.85 var(--serif); letter-spacing:-.034em; }
h1 em { color:var(--blue); font-weight:400; }
.intro p { color:var(--muted); font-size:16px; margin:0 0 2px; max-width:35ch; }
.controls { flex-wrap:wrap; align-items:end; justify-content:space-between; gap:10px; padding:11px; background:#161b2d; border:1px solid var(--line); border-radius:9px; }
.presets,#controls-form { display:flex; gap:6px; align-items:end; flex-wrap:wrap; }
#controls-form label { display:grid; gap:3px; color:var(--muted); font-size:11px; font-weight:650; }
input { display:block; width:111px; min-width:0; min-height:35px; padding:5px 7px; border-radius:6px; border:1px solid var(--line); background:var(--well); color:var(--ink); font-size:13px; font-variant-numeric:tabular-nums; }
#iterations { width:88px; }
.primary,.quiet { min-height:35px; border:1px solid transparent; border-radius:6px; padding:7px 10px; line-height:1.2; font-size:12px; font-weight:720; }
.quiet { background:#222842; border-color:var(--line); color:var(--ink); }
.primary { background:var(--blue); color:#122b33; }
.quiet:hover { border-color:#7784a7; }
.primary:hover { background:#c4eff2; }
.notice { min-height:1.2em; margin:4px 0; color:var(--blue); font-size:12px; }
.plots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.plot { min-width:0; border:1px solid var(--line); background:var(--surface); border-radius:10px; overflow:hidden; }
.plot-head { justify-content:space-between; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.plot-head h2 { font-size:16px; margin:0; letter-spacing:-.015em; }
.plot-head p { margin:3px 0 0; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.plot:nth-child(2) h2 { color:var(--rose); }
.zoom { gap:4px; flex:none; }
.zoom button { min-height:30px; min-width:30px; padding:5px 7px; }
.surface { position:relative; overflow:hidden; aspect-ratio:1.4; background:#11182e; }
canvas { display:block; width:100%; height:100%; cursor:crosshair; touch-action:pan-y; }
canvas:active { cursor:grabbing; }
canvas[aria-busy="true"] { opacity:.82; }
canvas:focus-visible { outline-offset:-3px; }
.cross { position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid #d3fbfb; box-shadow:0 0 0 2px #070810b5,0 0 13px #b0fdff90; pointer-events:none; }
.cross::before,.cross::after { content:''; position:absolute; inset:50% -4px auto; height:1px; background:#f2ffff; transform:translateY(-50%); }
.cross::after { transform:translateY(-50%) rotate(90deg); }
.plot-foot { justify-content:space-between; gap:7px; padding:8px 12px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.below { justify-content:space-between; gap:10px; padding:9px 1px; }
.below p { color:var(--muted); font-size:12px; margin:0; }
.below button { flex:none; }
.lesson { border-top:1px solid var(--line); margin-top:15px; padding:19px 0 23px; }
.lesson h2 { margin:0; font:400 30px/1.1 var(--serif); }
.lesson p { margin:4px 0 6px; color:var(--muted); font-size:13px; }
footer { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; padding:12px 0 24px; color:var(--muted); font-size:12px; }
dialog { width:min(450px,calc(100% - 24px)); background:var(--surface); color:var(--ink); border:1px solid var(--line); padding:16px; border-radius:9px; }
dialog::backdrop { background:#080a14ad; }
dialog h2 { margin:0; }
dialog .actions { gap:6px; justify-content:end; }
.reading { width:min(770px,100%); padding:50px 0; }
.reading h1 { font-size:clamp(51px,7.5vw,99px); margin-bottom:15px; }
.reading h2 { font:400 35px/1.05 var(--serif); margin:23px 0 8px; }
.reading p,.reading li { color:var(--muted); max-width:67ch; }
.reading .lead { font-size:17px; }
.reading code { color:var(--blue); overflow-wrap:anywhere; }
@media (max-width:950px) { .shell { width:calc(100% - 34px); } }
@media (max-width:680px) {
  .intro { grid-template-columns:1fr; margin:31px 0 17px; gap:10px; }
  .intro h1 { font-size:clamp(50px,10.4vw,79px); }
  .plots { grid-template-columns:1fr; }
  .controls { display:grid; grid-template-columns:minmax(0,1fr); padding:8px; }
  #controls-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; }
  #controls-form input { width:100%; }
  .top nav { gap:5px; font-size:11px; }
  .top .quiet { min-height:30px; font-size:11px; }
}
@media (max-width:360px) {
  .shell { width:calc(100% - 22px); }
  .below { align-items:start; flex-direction:column; }
  #controls-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #controls-form button { justify-self:start; }
}