/* The technique pages (render.ts), in the Observatory look (docs/art-direction.md). Layout: one technique, one
   board. Phone: the board, then the steps that drive it. Desktop: the board holds the left column while the steps
   and the reading run on the right. A single night look, on purpose. */
@font-face{font-family:"Bodoni Moda";font-weight:700;font-display:swap;src:url(/sudoku/fonts/bodoni-moda-700-latin.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:400 700;font-display:swap;src:url(/sudoku/fonts/jost-latin.woff2) format("woff2")}
:root{
  --sky:#0B1430; --sky-hi:#203070; --sky-lo:#060B1D;
  --glass:#121B3D; --glass-hi:#25336A;
  --starlight:#F3E9CF; --muted:#C7CBE4; --dim:#8D97C2;
  --brass:#C9A45C; --brass-hi:#F1D898; --brass-lo:#7C6128;
  --amber:#FFB547; --amber-ink:#2D1A00;
  --f-display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;
  --f-body:"Jost","Futura","Century Gothic","Avenir Next",sans-serif;
  color-scheme:dark;
}
*,*:before,*:after{box-sizing:border-box}
html{background:var(--sky-lo)}
body{margin:0;background:radial-gradient(120% 60% at 50% 0%,var(--sky-hi) 0%,var(--sky) 50%,var(--sky-lo) 100%) fixed;background-color:var(--sky);color:var(--starlight);font:400 16px/1.6 var(--f-body);padding-inline:16px;padding-block:env(safe-area-inset-top,0px) calc(64px + env(safe-area-inset-bottom,0px));min-height:100%}
#sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.page{position:relative;z-index:1;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:40px}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:18px 0;font:600 11px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;color:var(--dim)}
.crumbs a,.mark{color:var(--brass-hi);text-decoration:none}
.crumbs a:hover,.crumbs a:focus-visible,.mark:hover,.mark:focus-visible{text-decoration:underline}
.mark{display:flex;align-items:center;gap:8px}

.head{display:flex;flex-direction:column;gap:14px;max-width:44rem}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;font:600 11px/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--brass-hi)}
.facts span{display:flex;align-items:center;gap:8px}
.facts span+span:before{content:"";width:4px;height:4px;border-radius:50%;background:var(--brass);box-shadow:0 0 6px var(--brass-hi)}
h1{margin:0;font:700 clamp(46px,12vw,96px)/.95 var(--f-display);letter-spacing:-.01em;text-wrap:balance;background:linear-gradient(180deg,#fffaf0 0%,var(--starlight) 55%,var(--brass-hi) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin:0;font:400 clamp(19px,2.4vw,22px)/1.45 var(--f-body);max-width:36rem;text-wrap:pretty}

.study{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:900px){.study{grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:48px;align-items:start}.instrument{position:sticky;top:24px}}
.instrument{display:flex;flex-direction:column;gap:12px}
.rim{padding:9px;border-radius:18px;max-width:480px;width:100%;
  background:radial-gradient(circle at 30% 0%,#2a3a74,#0d1535) padding-box,linear-gradient(160deg,var(--brass-hi),var(--brass-lo) 45%,var(--brass) 70%,var(--brass-lo)) border-box;border:4px solid transparent;
  box-shadow:0 0 0 1px #0007,0 18px 40px #000a,inset 0 0 30px #0009}
.axes{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-rows:18px auto;gap:2px}
.ax{display:grid;font:600 10px/1 var(--f-body);color:var(--dim);font-variant-numeric:tabular-nums}
.ax.cols{grid-template-columns:repeat(9,minmax(0,1fr));grid-column:2;text-align:center;align-items:end;padding-bottom:3px}
.ax.rows{grid-template-rows:repeat(9,1fr);align-items:center;justify-items:center;padding-right:3px}
.board-box{position:relative}
.bd{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:2px}
.c{position:relative;min-width:0;aspect-ratio:1;display:grid;place-items:center;border-radius:5px;
  background:radial-gradient(circle at 35% 28%,var(--glass-hi),var(--glass) 70%);
  box-shadow:inset 0 1px 0 #ffffff1c,inset 0 -2px 3px #0006;
  font:700 clamp(17px,4.6vw,24px)/1 var(--f-display);color:var(--starlight);transition:background .35s,box-shadow .35s}
.c.cR{margin-right:4px}.c.rB{margin-bottom:4px}
.c.band{background:radial-gradient(circle at 50% 0%,#46528f,#212d63 78%);box-shadow:inset 0 1px 0 #fff3,0 0 10px #f1d89833}
.pm{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center}
.pm i{font:600 clamp(8px,2.2vw,11px)/1 var(--f-body);font-style:normal;color:var(--muted)}
.pm i.m{color:var(--amber);text-shadow:0 0 8px #ffb54788}
.pm i.x{position:relative}
.pm i.x:after{content:"";position:absolute;left:-30%;right:-30%;top:50%;height:1.5px;background:var(--amber);transform:rotate(-38deg);opacity:0;transition:opacity .35s}
.put{font:700 clamp(17px,4.6vw,24px)/1 var(--f-display);color:var(--amber);text-shadow:0 0 12px #ffb547aa;opacity:0;transition:opacity .35s}
.show-pattern .c.pat,.show-result .c.pat{box-shadow:inset 0 0 0 2px var(--brass-hi),0 0 16px #f1d89877}
.show-pattern .c.pat2,.show-result .c.pat2{box-shadow:inset 0 0 0 2px var(--starlight),0 0 0 1px #0b1430,0 0 14px #f3e9cf55;background:radial-gradient(circle at 50% 0%,#3a467e,#1a2453 80%)}
.show-result .c.gone{box-shadow:inset 0 0 0 2px var(--amber),0 0 16px #ffb54766}
.show-result .pm i.x{color:var(--dim);text-shadow:none}
.show-result .pm i.x:after{opacity:1}
.show-result .c.place{box-shadow:inset 0 0 0 2px var(--amber),0 0 18px #ffb54788}
.show-result .c.place .pm{opacity:0}
.show-result .put{opacity:1}
svg.x{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
svg.x line{stroke-width:2.4;stroke-linecap:round;opacity:0;transition:opacity .4s;vector-effect:non-scaling-stroke}
svg.x line.a{stroke:var(--brass-hi)} svg.x line.b{stroke:var(--amber);stroke-dasharray:5 6}
svg.x line.on{opacity:.95}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 13px/1.3 var(--f-body);color:var(--muted);max-width:480px}
.legend span{display:flex;align-items:center;gap:7px}
.sw{width:16px;height:16px;border-radius:4px;flex:none;background:var(--glass)}
.sw.k{box-shadow:inset 0 0 0 2px var(--brass-hi)}
.sw.k2{box-shadow:inset 0 0 0 2px var(--starlight)}
.sw.s{box-shadow:inset 0 0 0 2px var(--amber)}
.sw.n{display:grid;place-items:center;font:700 12px/1 var(--f-display);font-style:normal;color:var(--amber);text-shadow:0 0 8px #ffb547aa}

.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.steps li{counter-increment:s}
.steps button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(#18235096,#0c1433) padding-box,linear-gradient(160deg,#f1d89855,#7c612855) border-box;border:1.5px solid transparent;transition:background .3s}
.steps button:before{content:counter(s);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 18px/1 var(--f-display);color:var(--brass-hi);
  background:radial-gradient(circle at 40% 30%,#2b3b7a,#0d1535) padding-box,linear-gradient(160deg,var(--brass-hi),var(--brass-lo)) border-box;border:2px solid transparent}
.steps button[aria-pressed="true"]{background:linear-gradient(#1f2c66,#101a44) padding-box,linear-gradient(160deg,var(--brass-hi),var(--brass-lo) 60%,var(--brass)) border-box;box-shadow:0 10px 24px #000a}
.steps button[aria-pressed="true"]:before{background:radial-gradient(circle at 40% 30%,#fff7da,#e7c77a 55%,#a07c34);color:#2c1d00;box-shadow:0 0 16px #f1d89888}
.steps button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.steps h3{margin:2px 0 4px;font:700 20px/1.2 var(--f-display);color:var(--starlight)}
.steps p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55;text-wrap:pretty}

.read{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:760px){.read{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}}
.read section{display:flex;flex-direction:column;gap:8px;border-top:1px solid #f1d89833;padding-top:16px}
.read h2{margin:0;font:700 22px/1.2 var(--f-display);color:var(--brass-hi);text-wrap:balance}
.read p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:62ch}

.go{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:18px 18px 18px 22px;border-radius:20px;
  background:linear-gradient(#1b2759,#0e1638) padding-box,linear-gradient(160deg,var(--brass-hi),var(--brass-lo),var(--brass)) border-box;border:2.5px solid transparent;box-shadow:0 10px 24px #000a,inset 0 1px 0 #fff2}
.go h2{margin:0;font:700 26px/1.1 var(--f-display)}
.go p{margin:4px 0 0;color:var(--muted);font-size:14.5px}
.play{display:inline-block;font:700 20px/1 var(--f-display);padding:15px 26px;border-radius:999px;text-decoration:none;background:linear-gradient(#ffe0a0,#f0a531);color:var(--amber-ink);box-shadow:inset 0 2px 0 #fff9,0 4px 0 #9b5f10,0 0 24px #ffb54766}
.play:focus-visible{outline:2px solid var(--starlight);outline-offset:4px}
.chart{display:flex;flex-direction:column;gap:12px}
.chart h2,.fam h2{margin:0;font:600 11px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-hi)}
.chart ol,.fam ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.chart a,.fam a{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;text-decoration:none;color:var(--starlight);background:#0d153580;border:1px solid #f1d89826;height:100%}
.chart a:hover,.chart a:focus-visible,.fam a:hover,.fam a:focus-visible{border-color:var(--brass-hi);outline:none}
.chart a.here{border-color:var(--brass-hi);background:#1a2552}
.chart small,.fam small{font:600 10px/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fam small{letter-spacing:.04em;text-transform:none;font-size:13px;font-weight:400;color:var(--muted)}
.chart b,.fam b{font:700 17px/1.2 var(--f-display)}
.star{width:8px;height:8px;border-radius:50%;background:var(--brass-hi);box-shadow:0 0 8px var(--brass-hi)}
.chart .here .star{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.families{display:flex;flex-direction:column;gap:28px}
.fam{display:flex;flex-direction:column;gap:12px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}