:root{
  --bg:#0b0907;
  --bg2:#13100c;
  --paper:#ece6da;
  --paper-2:rgba(236,230,218,.68);
  --paper-3:rgba(236,230,218,.46);
  --rule:rgba(236,230,218,.14);
  --sun:#f0a830;
  --ink:#1c1712;
  --ink-2:rgba(28,23,18,.66);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --gx:clamp(20px,5.6vw,88px);
  --max:1320px;
  --cab-h:0px; /* height of the $FLARE banner above the nav (home page only); coin.js measures the real one */
}
:root:has(#cab){--cab-h:120px}
@media (max-width:700px){:root:has(#cab){--cab-h:206px}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--bg);color:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);font-family:var(--serif);font-size:21px;line-height:1.42;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em,i{font-style:italic}
.mono{font-family:var(--mono);font-size:.62em;letter-spacing:.01em}
::selection{background:var(--sun);color:var(--ink)}

/* grain over everything: the page is a darkroom */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;background-image:var(--grain);opacity:.05;mix-blend-mode:screen}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--serif);font-size:20px;line-height:1;padding:14px 22px 13px;white-space:nowrap;transition:background .25s,color .25s,border-color .25s,opacity .25s}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-sun:hover{background:#ffbf4d}
.btn-line{border:1px solid rgba(236,230,218,.4);color:var(--paper)}
.btn-line:hover{border-color:var(--paper)}
.btn:focus-visible,.seg button:focus-visible,a:focus-visible{outline:1px solid var(--sun);outline-offset:3px}

/* ---------- nav ---------- */
.nav::before{content:"";position:absolute;inset:0 0 -60px;background:linear-gradient(rgba(11,9,7,.95) 0,rgba(11,9,7,.92) 50%,rgba(11,9,7,0) 100%);pointer-events:none;z-index:-1;transition:opacity .35s}
.nav.solid::before{opacity:0}
.nav{position:fixed;top:var(--cab-y,var(--cab-h));left:0;right:0;z-index:50;display:flex;align-items:center;gap:36px;padding:18px var(--gx);transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.nav.solid{background:var(--bg);border-bottom-color:var(--rule)}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.mark-disc{width:38px;height:38px;margin:-7px -5px -7px -7px}
.mark-word{font-size:27px;line-height:1;letter-spacing:.14em;padding-top:2px;margin-right:-.14em}
.links{display:flex;gap:28px}
.links a{text-decoration:none;color:var(--paper);opacity:.86;font-size:19px;transition:opacity .2s;text-shadow:0 1px 10px rgba(11,9,7,1)}
.links a:hover{opacity:1}
.nav .btn{font-size:17px;padding:10px 16px 9px;background:rgba(11,9,7,.6)}

/* ---------- hero ---------- */
.hero{position:relative;height:calc(100vh - var(--cab-h));height:calc(100svh - var(--cab-h));min-height:600px;overflow:hidden;background:var(--bg);isolation:isolate}
#sun{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#sunFallback{position:absolute;z-index:0}
.hero.in-sun{cursor:none}
#liveSun{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.hero-copy{position:absolute;z-index:3;left:var(--gx);bottom:clamp(48px,8vh,88px);max-width:min(560px,40vw);transition:opacity .5s,transform .5s}
h1{font-weight:400;font-size:clamp(60px,min(7.1vw,13.5vh),112px);line-height:.9;letter-spacing:-.018em;margin-left:-.04em}
.lede{margin-top:26px;font-size:clamp(20px,1.6vw,24px);line-height:1.35;color:var(--paper-2);max-width:21em}
.act{display:flex;align-items:center;gap:18px;margin-top:34px;flex-wrap:wrap}
.act-hint{font-size:18px;color:var(--paper-3);font-style:italic}

.composer{margin-top:30px;max-width:460px}
.composer label{display:block;font-size:18px;color:var(--paper-2);margin-bottom:10px}
.composer-row{display:flex;border:1px solid rgba(236,230,218,.4)}
.composer input{flex:1;min-width:0;background:transparent;border:0;color:var(--paper);font-family:var(--serif);font-style:italic;font-size:22px;padding:11px 14px 10px;outline:none}
.composer input::placeholder{color:rgba(236,230,218,.34)}
.composer .btn{padding:12px 18px 11px}
.composer-meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--paper-3)}

.readout{position:absolute;z-index:3;left:var(--gx);top:clamp(96px,13vh,128px);width:240px;transition:opacity .5s}
.ro-head,.ro-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;color:var(--paper-3)}
.ro-head span:last-child{color:var(--paper-2)}
.ro-head .live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sun);margin-right:6px;vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.ro-class{font-size:58px;line-height:1;margin:8px 0 6px;letter-spacing:-.01em}
.ro-spark{width:100%;height:44px;overflow:visible}
.ro-axis{margin-top:5px}
.ro-light{margin-top:12px;font-size:17px;line-height:1.3;color:var(--paper-2)}
.ro-light span{color:var(--paper);white-space:nowrap}

.ro-frame{margin-top:14px;padding-top:10px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--paper-3)}
.ro-frame span{display:block}
.ro-ft{color:var(--paper);font-variant-numeric:tabular-nums}
.ro-ft span{display:inline}
#frameCls.hot{color:var(--sun)}

/* viewfinder */
.vf{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.vf.on{opacity:1}
.vf-box{position:relative;width:var(--s,140px);height:var(--s,140px);border:1px solid rgba(236,230,218,.9);box-shadow:0 0 0 1px rgba(11,9,7,.25)}
.vf-box i{position:absolute;width:9px;height:9px;border-color:var(--paper);border-style:solid}
.vf-box i:nth-child(1){left:-5px;top:-5px;border-width:1px 0 0 1px}
.vf-box i:nth-child(2){right:-5px;top:-5px;border-width:1px 1px 0 0}
.vf-box i:nth-child(3){left:-5px;bottom:-5px;border-width:0 0 1px 1px}
.vf-box i:nth-child(4){right:-5px;bottom:-5px;border-width:0 1px 1px 0}
.vf-box b{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5px 0 0 -5px;background:linear-gradient(var(--paper),var(--paper)) center/1px 100% no-repeat,linear-gradient(var(--paper),var(--paper)) center/100% 1px no-repeat;opacity:.8}
.vf-side{position:absolute;top:-1px;left:calc(100% + 14px);width:max-content;min-width:120px}
.vf.ghost .vf-box{border-color:rgba(255,240,215,.85)}
.vf.flip .vf-side{left:auto;right:calc(100% + 14px);text-align:right}
.vf-read{font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--paper);background:rgba(11,9,7,.5);padding:3px 6px;margin:-3px -6px 0;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.6);white-space:nowrap}
.vf-read b{font-weight:500;color:#fff}
.vf-loupe{display:block;width:120px;height:120px;margin-top:10px;border:1px solid rgba(236,230,218,.7);background:#000}
.vf.flip .vf-loupe{margin-left:auto}
.vf.locked .vf-side{opacity:0;transition:opacity .2s}
.vf.locked .vf-box{border-color:var(--paper)}
.vf.cut .vf-box{opacity:.55;border-style:dashed;transition:opacity .6s}
.vf-tap{display:none;color:var(--sun)}
.vf.armed .vf-tap{display:inline}
.vf.cut .vf-box i,.vf.cut .vf-box b{display:none}
.hero.exposing .region-tags,.hero.ghosting.exposing .region-tags{opacity:0}

.region-tags{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .5s}
.region-tags.seam{opacity:0}
.ar{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.ar i{position:absolute;left:calc(var(--d,60px) / -2);top:calc(var(--d,60px) / -2);width:var(--d,60px);height:var(--d,60px);border:1.5px solid rgba(255,244,222,.95);border-radius:50%;box-shadow:0 0 0 1px rgba(20,12,4,.35),inset 0 0 0 1px rgba(20,12,4,.25);opacity:0;animation:breathe 4.2s linear infinite}
.ar i:nth-child(2){animation-delay:2.1s}
.ar::after{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(255,246,228,.9);box-shadow:0 0 0 1px rgba(20,12,4,.4),0 0 10px rgba(255,220,160,.8)}
@keyframes breathe{0%{transform:scale(.3);opacity:0}12%{opacity:.85}100%{transform:scale(1.2);opacity:0}}
.ar-l{display:none;position:absolute;left:calc(var(--d,60px) / 2 + 14px);top:-17px;font-family:var(--mono);font-size:11px;line-height:1.5;white-space:nowrap;color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.7);opacity:0;transform:translateX(-4px);transition:opacity .35s,transform .35s}
.ar-l b{display:block;font-weight:500}
.ar-l em{display:block;font-style:normal;color:rgba(236,230,218,.78)}
.ar.flip .ar-l{left:auto;right:calc(var(--d,60px) / 2 + 14px);text-align:right;transform:translateX(4px)}
.ar.hot .ar-l{opacity:1;transform:none}
.ar.hot i{border-color:rgba(255,236,200,1);animation-duration:2.6s}
.hero.vf-on:not(.ghosting) .ar:not(.hot) .ar-l{opacity:0}

/* exposure states */
.hero.exposing .hero-copy,.hero.exposing .readout{opacity:0;pointer-events:none}
.hero.exposing .hero-copy{transform:translateX(-14px)}

.darkroom{position:absolute;inset:0;z-index:6}
.darkroom[hidden]{display:none}
.tray{position:absolute;left:var(--gx);top:50%;transform:translateY(-50%);width:var(--tw,430px);padding:22px;background:linear-gradient(160deg,#17130f,#0f0c09);box-shadow:inset 0 0 0 1px rgba(236,230,218,.07),inset 0 18px 40px rgba(0,0,0,.6),0 40px 80px rgba(0,0,0,.5);transition:background .8s,box-shadow .8s,padding .8s}
.tray::after{content:"";position:absolute;inset:22px;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(236,230,218,.07) 45%,transparent 60%) no-repeat;background-size:250% 100%;background-position:120% 0;opacity:0;transition:opacity .6s}
.darkroom.wet .tray::after{opacity:1;animation:sheen 3.2s ease-in-out infinite}
@keyframes sheen{to{background-position:-60% 0}}
.darkroom.wet .print-live{animation:rock 3.2s ease-in-out infinite}
@keyframes rock{0%,100%{transform:rotate(-.35deg) translateY(0)}50%{transform:rotate(.3deg) translateY(2px)}}
.darkroom.dry .tray{background:transparent;box-shadow:none}
.darkroom.dry .print-live{transform:rotate(-.6deg) translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.65),0 3px 8px rgba(0,0,0,.5);transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s}
.darkroom-actions{position:absolute;left:var(--gx);display:flex;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .5s .2s,transform .5s .2s;pointer-events:none}
.darkroom.dry .darkroom-actions{opacity:1;transform:none;pointer-events:auto}
.flyer{position:absolute;left:0;top:0;z-index:7;pointer-events:none;transform-origin:0 0;display:none;will-change:transform}
.flyer canvas{width:100%;height:100%}

/* ---------- prints (shared) ---------- */
.print{position:relative;background:var(--paper);color:var(--ink);padding:12px 12px 0;box-shadow:0 22px 50px rgba(0,0,0,.55),0 2px 5px rgba(0,0,0,.5)}
.print-img{position:relative;aspect-ratio:1;background:#000;overflow:hidden}
.print-img img,.print-img canvas{width:100%;height:100%;object-fit:cover}
.print-cap{padding:12px 3px 14px}
.cap-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cap-n{font-size:23px;line-height:1}
.cap-top .mono{font-size:12px;color:var(--ink-2)}
.cap-line{font-style:italic;font-size:18px;line-height:1.25;margin-top:7px;min-height:1.25em}
.cap-data{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-2);margin-top:8px}
.cap-tags{font-family:var(--mono);font-size:11px;line-height:1.5;margin-top:2px;color:var(--ink)}
.cap-tags b{font-weight:500}
.cap-sample{font-family:var(--mono);font-size:10.5px;color:rgba(28,23,18,.5);margin-top:6px}
.print-live .print-cap>*{opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s}
.darkroom.dry .print-live .print-cap>*{opacity:1;transform:none}
.darkroom.dry .print-live .print-cap>*:nth-child(2){transition-delay:.12s}
.darkroom.dry .print-live .print-cap>*:nth-child(3){transition-delay:.24s}
.darkroom.dry .print-live .print-cap>*:nth-child(4){transition-delay:.36s}
.darkroom.dry .print-live .print-cap>*:nth-child(5){transition-delay:.48s}

/* ---------- sections ---------- */
main section{padding:clamp(96px,12vw,170px) var(--gx) 0;max-width:calc(var(--max) + 2*var(--gx));margin:0 auto}
.sec-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
h2{font-weight:400;font-size:clamp(42px,5.2vw,78px);line-height:.98;letter-spacing:-.012em}
h3{font-weight:400;font-size:clamp(28px,2.6vw,38px);line-height:1.05;letter-spacing:-.005em}
.sec-head p{color:var(--paper-2);max-width:31em}

/* the table of prints */
.table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px) clamp(24px,3.6vw,56px);margin-top:clamp(56px,7vw,96px);align-items:start}
.table{perspective:1400px}
.table .print{--rot:0deg;--lift:0px;transform:translateY(var(--lift)) rotate(var(--rot)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .5s;transform-style:preserve-3d}
.table .print.tilt{--rot:0deg;--lift:-6px;transition:transform .12s linear,box-shadow .5s;box-shadow:0 40px 80px rgba(0,0,0,.62),0 3px 8px rgba(0,0,0,.5)}
.table .print::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,248,230,.55),rgba(255,248,230,.08) 32%,rgba(255,248,230,0) 58%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}
.table .print.tilt::after{opacity:1}
.table .print:nth-child(1){--rot:-.7deg}
.table .print:nth-child(2){--rot:.5deg;margin-top:64px}
.table .print:nth-child(3){--rot:-.3deg;margin-top:18px}
.table .print:nth-child(4){--rot:.45deg;margin-top:-8px}
.table .print:nth-child(5){--rot:-.55deg;margin-top:40px}
.table .print:nth-child(6){--rot:.25deg;margin-top:4px}
.devmask{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;z-index:1}
.table-note{margin-top:44px;font-family:var(--mono);font-size:12px;color:var(--paper-3)}

.bands{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);margin-top:clamp(80px,9vw,130px);padding-top:40px;border-top:1px solid var(--rule)}
.bands-copy p{margin-top:16px;color:var(--paper-2)}
.bands-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.bands-list li{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center}
.bands-list img{width:52px;height:52px;border-radius:50%}
.bands-list .wl{font-family:var(--mono);font-size:13px;color:var(--paper)}
.bands-list .ion{font-family:var(--mono);font-size:11px;color:var(--paper-3);margin:1px 0 3px}
.bands-list .what{font-size:17px;line-height:1.25;color:var(--paper-2)}
.bands-list .who{font-family:var(--mono);font-size:11px;color:var(--paper-3);margin-top:2px}

/* thesis */
.thesis{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,100px);align-items:start}
.legras{position:sticky;top:110px}
.legras canvas{width:100%;height:auto;aspect-ratio:1100/765;image-rendering:pixelated}
.legras figcaption{margin-top:16px;font-size:16px;line-height:1.35;color:var(--paper-3)}
.thesis-text p{font-size:clamp(27px,2.75vw,42px);line-height:1.2;letter-spacing:-.006em}
.thesis-text p+p{margin-top:.8em}
.thesis-text p:not(:first-child){color:var(--paper)}
.thesis-text em{color:var(--sun)}

/* flux */
.flux-head{align-items:end}
.flux-meta{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.flux-meta p{color:var(--paper-2)}
.seg{display:flex;border:1px solid var(--rule)}
.seg button{font-family:var(--mono);font-size:12px;padding:8px 14px;color:var(--paper-3)}
.seg button.on{background:var(--paper);color:var(--ink)}
.chart{position:relative;margin-top:48px;height:clamp(300px,34vw,460px)}
.chart svg{width:100%;height:100%;overflow:visible}
.chart text{font-family:var(--mono);font-size:11px;fill:var(--paper-3)}
.chart .t-band{fill:var(--paper-2)}
.chart .t-win{fill:var(--sun)}
.chart .t-flare{fill:var(--paper)}
.chart-tip{position:absolute;top:0;pointer-events:none;font-family:var(--mono);font-size:11.5px;line-height:1.45;background:var(--bg);border:1px solid var(--rule);padding:7px 10px;white-space:nowrap;color:var(--paper)}
.chart-tip span{color:var(--paper-3)}

.rarity{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(32px,6vw,100px);margin-top:clamp(64px,8vw,110px);align-items:start}
.rarity-copy p{margin-top:16px;color:var(--paper-2);max-width:32em}
.rarity-copy em{color:var(--paper)}
.rarity-copy .mono{font-size:15px;color:var(--sun)}
.print-mythic{transform:rotate(.6deg);max-width:340px;justify-self:end}

/* ledger */
.ledger-list{list-style:none;margin-top:56px;border-top:1px solid var(--rule)}
.ledger-list li{display:grid;grid-template-columns:52px 74px minmax(0,1fr) 92px 124px 150px 170px;gap:20px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12px;color:var(--paper-2)}
.ledger-list li.new{animation:arrive 1.2s ease}
@keyframes arrive{from{background:rgba(240,168,48,.16)}to{background:transparent}}
.ledger-list .thumb-box{position:relative;display:block;width:52px;height:52px;background:#000;overflow:hidden}
.ledger-list .thumb{display:block;width:100%;height:100%;object-fit:cover}
.ledger-list .n{font-family:var(--serif);font-size:24px;color:var(--paper)}
.ledger-list .ln{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledger-list .rar{color:var(--paper)}
.ledger-list .rar.r-M,.ledger-list .rar.r-X{color:var(--sun)}
.ledger-list .h{color:var(--paper-3)}

/* footer */
.foot{margin-top:clamp(110px,13vw,190px);padding:0 var(--gx) 48px;border-top:1px solid var(--rule)}
.foot-mark{display:flex;align-items:center;gap:clamp(18px,3vw,48px);font-size:clamp(88px,17vw,280px);line-height:.8;letter-spacing:.06em;margin:clamp(36px,5vw,72px) 0 0 -.03em;color:var(--paper)}
.foot-mark span{padding-top:.08em}
.foot-disc{width:.9em;height:.9em;flex:none;margin:-.05em -.1em -.05em -.09em;mix-blend-mode:lighten}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;margin-top:48px;padding-top:24px;border-top:1px solid var(--rule)}
.foot-grid .mono{font-size:13px;color:var(--paper);margin-bottom:6px}
.foot-grid a{font-size:19px}
.foot-credits p{font-size:16px;line-height:1.45;color:var(--paper-3);max-width:46em}
.foot-credits p+p{margin-top:10px}

/* ---------- responsive ---------- */
/* the short-viewport rules below measure the viewport minus the 120 px $FLARE banner above the hero */
@media (min-width:701px) and (max-height:940px){
  .ro-spark,.ro-axis,.ro-light{display:none}
  .ro-class{font-size:46px;margin:6px 0 2px}
  .ro-light{margin-top:6px}
  .ro-frame{margin-top:8px;padding-top:6px}
  .readout{top:108px}
}
@media (max-width:1100px){
  .links{display:none}
  .ledger-list li{grid-template-columns:52px 64px minmax(0,1fr) 60px 120px 132px}
  .ledger-list .h{display:none}
}
@media (max-width:860px){
  body{font-size:19px}
  .sec-head,.bands,.thesis,.rarity,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .legras{position:static}
  .table{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:22px;margin-left:calc(-1*var(--gx));margin-right:calc(-1*var(--gx));padding:12px var(--gx) 44px;scrollbar-width:none}
  .table::-webkit-scrollbar{display:none}
  .table .print{flex:0 0 78%;scroll-snap-align:center;margin-top:0!important}
  .bands-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .print-mythic{justify-self:start}
  .ledger-list li{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"t n c" "t l l" "t d d";gap:4px 14px;padding:14px 0}
  .ledger-list .thumb-box{grid-area:t;width:48px;height:48px;align-self:start}
  .ledger-list .n{grid-area:n;font-size:21px}
  .ledger-list .ln{grid-area:l;font-size:17px}
  .ledger-list .wlc{display:none}
  .ledger-list .rar{grid-area:c;text-align:right}
  .ledger-list .tm{grid-area:d}
}
@media (max-width:700px){
  .nav{padding:14px 20px;gap:16px}
  .mark-word{font-size:23px}
  .mark-disc{width:30px;height:30px}
  .nav .btn{font-size:15px;padding:8px 12px 7px}
  .nav .wallet-btn{gap:8px;padding-right:8px}
  .nav .wb-logo{width:18px;height:18px}
  .hero{min-height:620px}
  .hero-copy{left:20px;right:20px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 150px);transform:none;max-width:none}
  .hero.exposing .hero-copy{transform:translateY(10px)}
  h1{font-size:clamp(54px,15.5vw,72px)}
  .lede{margin-top:16px;font-size:19px;max-width:20em}
  .act{margin-top:22px;gap:12px}
  .act-hint{display:none}
  .composer{margin-top:18px}
  .readout{left:20px;right:20px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 22px);width:auto;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:end}
  .ro-head{grid-column:1/3}
  .ro-class{font-size:44px;margin:4px 0 0}
  .ro-spark,.ro-axis{display:none}
  .ro-light{margin:0 0 3px;font-size:15px}
  .ro-frame{grid-column:1/3;margin-top:10px;padding-top:8px;font-size:10.5px;white-space:nowrap}
  .ro-frame .ro-pre{display:none}
  .tray{left:20px;right:20px;width:auto;top:auto;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:none;padding:14px}
  .tray::after{inset:14px}
  .darkroom-actions{left:20px;right:20px;bottom:calc(env(safe-area-inset-bottom) + 20px)}
  .darkroom-actions .btn{flex:1;justify-content:center;font-size:18px;padding:13px 10px 12px}
  .cap-n{font-size:21px}
  .bands-list{gap:22px 16px}
  .bands-list li{grid-template-columns:44px 1fr;gap:12px}
  .bands-list img{width:44px;height:44px}
  .thesis-text p{font-size:27px}
  .chart{margin-top:32px;height:380px}
  .foot-grid{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important}
}

/* ---------- chart draws itself ---------- */
.ch-late{transition:opacity 1s ease .3s}
.chart.undrawn .ch-late{opacity:0}

/* ---------- the solar cycle ---------- */
.cycle{margin-top:clamp(72px,9vw,120px);padding-top:40px;border-top:1px solid var(--rule)}
.cycle-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:end}
.cycle-copy p{color:var(--paper-2);max-width:31em}
.cycle-chart{position:relative;margin-top:36px;height:clamp(200px,20vw,260px)}
.cycle-chart svg{width:100%;height:100%;overflow:visible}
.cycle-chart text{font-family:var(--mono);font-size:11px;fill:var(--paper-3)}
.cycle-chart .t-win{fill:var(--sun)}
.cycle-chart .t-flare{fill:var(--paper)}

/* ---------- the plate studio ---------- */
.studio{--sbar:68px;position:fixed;inset:0;z-index:80;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(28px,4vw,64px);align-items:center;padding:calc(var(--sbar) + 8px) var(--gx) clamp(24px,4vh,48px);background:var(--bg);opacity:0;transition:opacity .12s linear}
.studio.in{opacity:1}
.studio[hidden]{display:none}
.studio-stage{display:flex;justify-content:center;align-items:center;min-height:0;height:100%}
.studio-stage canvas{height:auto;max-height:calc(100vh - var(--sbar) - 8px - clamp(24px,4vh,48px));width:auto;max-width:100%;aspect-ratio:4/5;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateY(10px) scale(.985);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.studio.in .studio-stage canvas{transform:none}
.studio-panel{max-height:100%;overflow:auto;padding-right:4px}
.studio-title{font-size:clamp(40px,4vw,56px);line-height:1}
.studio-lede{margin-top:12px;font-size:19px;line-height:1.35;color:var(--paper-2)}
.ctl{margin-top:24px}
.ctl-h{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;color:var(--paper);margin-bottom:10px}
.ctl-h .mono{font-size:12px;color:var(--paper-2)}
.ctl-note{margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--paper-3)}
.wl-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.wl-row button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 4px;font-family:var(--mono);font-size:11px;color:var(--paper-3);border:1px solid transparent;transition:border-color .2s,color .2s}
.wl-row button img{width:40px;height:40px;border-radius:50%;opacity:.55;transition:opacity .2s,transform .2s}
.wl-row button:hover img{opacity:.9}
.wl-row button.on{border-color:rgba(236,230,218,.4);color:var(--paper)}
.wl-row button.on img{opacity:1;transform:scale(1.06)}
.ring{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:repeating-linear-gradient(90deg,rgba(236,230,218,.45) 0 1px,transparent 1px 9px) center/100% 12px no-repeat,linear-gradient(rgba(236,230,218,.12),rgba(236,230,218,.12)) center/100% 1px no-repeat;cursor:ew-resize}
.ring::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:30px;background:var(--sun);border:0}
.ring::-moz-range-thumb{width:3px;height:30px;background:var(--sun);border:0;border-radius:0}
.ring:focus-visible{outline:1px solid var(--sun);outline-offset:4px}
.seg-mount{width:100%}
.seg-mount button{flex:1;font-family:var(--serif);font-size:17px;padding:9px 6px 8px}
.cap-in{width:100%;background:transparent;border:1px solid rgba(236,230,218,.35);color:var(--paper);font-family:var(--serif);font-style:italic;font-size:21px;padding:10px 12px 9px;outline:none}
.cap-in:focus{border-color:var(--paper)}
.cap-in::placeholder{color:rgba(236,230,218,.34)}
.ctl-fixed .mono{font-size:12px;line-height:1.65;color:var(--paper-2)}
.ctl-fixed .hot{color:var(--sun)}
.studio-actions{display:flex;gap:12px;margin-top:28px}
.mint-note{margin-top:12px;font-size:16px;line-height:1.35;color:var(--paper-2)}
/* Always-visible way out of the studio: a back button pinned top-left, above the scroll on phones. */
.studio-bar{position:fixed;top:0;left:0;right:0;z-index:81;height:var(--sbar);display:flex;align-items:center;padding:0 var(--gx);background:linear-gradient(var(--bg) 78%,rgba(11,9,7,0))}
.studio-back{gap:10px;font-size:19px;padding:12px 20px 11px 14px;background:var(--bg)}
.studio-back svg{flex:none;transition:transform .2s}
.studio-back:hover svg,.studio-back:focus-visible svg{transform:translateX(-3px)}
/* Desktop: the panel scrolls inside the screen, so keep Save / Mint pinned to its bottom edge. */
@media (min-width:961px){.studio-panel .studio-actions{position:sticky;bottom:0;z-index:1;padding:14px 0 2px;background:var(--bg);box-shadow:0 -28px 22px -6px var(--bg)}}
body.studio-open{overflow:hidden}
@media (max-width:960px){
  .studio{--sbar:64px;grid-template-columns:1fr;align-items:start;align-content:start;overflow:auto;padding:calc(var(--sbar) + 4px) 20px 40px;gap:24px}
  .studio-bar{padding:0 20px}
  .studio-back{font-size:17px;padding:10px 16px 9px 12px}
  .studio-stage{height:auto;min-height:auto}
  .studio-stage canvas{width:100%;max-height:none}
  .studio-panel{max-height:none;overflow:visible}
  .cycle-copy{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .ar i{animation:none;opacity:.35;transform:scale(.8)}
}

/* ================================================================== v3 */
#fx{position:fixed;inset:0;width:100vw;height:100vh;z-index:95;pointer-events:none;image-rendering:pixelated;display:none}
#fx.on{display:block}
.btn-quiet{color:var(--paper);padding:14px 2px 12px;border-bottom:1px solid rgba(236,230,218,.35);text-decoration:none}
.btn-quiet:hover{border-bottom-color:var(--paper)}
.act{gap:26px}
.btn.fired{animation:fire .32s ease-out}
@keyframes fire{0%{filter:brightness(1.7)}100%{filter:none}}
body.intro .hero-copy,body.intro .readout,body.intro .nav{opacity:0}
.hero-copy,.readout{transition:opacity .6s ease,transform .5s}
.nav{transition:background .35s,border-color .35s,opacity .6s ease}
.ro-sha{color:var(--paper-3)}
.ro-sha span{display:inline;color:var(--paper-2)}

/* oracle section */
.oracle .sec-head h2{max-width:11em}
.schem{position:relative;margin-top:clamp(48px,6vw,80px);width:100%;aspect-ratio:1200/430}
@media (max-width:760px){.schem{aspect-ratio:360/880}}
.schem svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#burnFx{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.sc-edge{fill:none;stroke:rgba(236,230,218,.26);stroke-width:1}
.sc-edge.to-vault{stroke:rgba(240,168,48,.55)}
.sc-box{fill:rgba(11,9,7,.88);stroke:rgba(236,230,218,.12);stroke-width:1}
.sc-corner{fill:none;stroke:var(--paper);stroke-width:1.2;opacity:.85}
.sc-node.n-vault .sc-corner{stroke:var(--sun)}
.sc-node.burning .sc-box{animation:vburn .9s ease-out}
@keyframes vburn{0%{fill:rgba(240,168,48,.35)}100%{fill:rgba(11,9,7,.88)}}
.sc-name{font-family:var(--serif);font-size:20px;fill:var(--paper)}
.sc-sub{font-family:var(--mono);font-size:11px;fill:var(--paper-3)}
.sc-val{font-family:var(--mono);font-size:11.5px;fill:var(--paper)}
.n-vault .sc-val,.n-goes .sc-val{fill:var(--sun)}
.sc-ride{font-family:var(--mono);font-size:11px;fill:var(--paper-2);paint-order:stroke;stroke:var(--bg);stroke-width:5px}
.sc-halo{fill:none;stroke:rgba(240,168,48,.35);stroke-width:1;animation:halo 4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes halo{50%{stroke:rgba(240,168,48,.75);transform:scale(1.06)}}
.sc-pulse{fill:var(--paper)}
.sc-pulse.faint{fill:rgba(255,236,200,.7)}
.sc-pulse.gold{fill:var(--sun);filter:drop-shadow(0 0 6px rgba(240,168,48,.9))}
.sc-plabel{font-family:var(--mono);font-size:11px;fill:var(--paper);paint-order:stroke;stroke:var(--bg);stroke-width:5px}
.sc-plabel.gold{fill:var(--sun)}
.schem-note{margin-top:20px;font-size:11.5px;color:var(--paper-3);max-width:60em}

.oracle-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);margin-top:clamp(64px,8vw,104px);align-items:start}
.oracle-grid h3{margin-bottom:10px}
.quiet{color:var(--paper-3);font-size:17px;line-height:1.4}
.quiet.mono{font-size:11.5px;line-height:1.55}
.tape{list-style:none;margin-top:22px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:12px}
.tape li{display:grid;grid-template-columns:76px 50px minmax(0,1fr) 92px;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule);color:var(--paper-2);white-space:nowrap}
.tape li span{overflow:hidden;text-overflow:ellipsis}
.tape li em{font-style:normal;color:var(--paper-3)}
.tape .tape-h{color:var(--paper-3);font-size:11px;padding:8px 0}
.tape .live{color:var(--paper)}
.tape .hot{color:var(--sun)}
.tape .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sun);margin-right:7px;vertical-align:1px;animation:pulse 2.4s ease-in-out infinite}
.tape li:not(.tape-h){animation:tapein .5s steps(6) both}
@keyframes tapein{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.verify{margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--paper-2);word-break:break-all}
.verify a{color:var(--paper)}
.verify .v-q{color:var(--paper-3)}
.verify .ok{color:var(--sun);margin-left:6px}
.beacon{margin-top:26px;color:var(--paper-2);font-size:19px;line-height:1.4}
.beacon em{color:var(--paper)}
.burn-wrap>p{color:var(--paper-2)}
.vault{margin-top:24px;padding:16px 0 4px;border-top:1px solid var(--rule)}
.vault-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.vault-row:first-child{font-size:19px}
.vault-row.mono{font-size:11.5px;color:var(--paper-2);margin-top:10px}
.vault-row b{font-weight:500;color:var(--sun)}
.smp{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--paper-3);margin-left:6px}
.vault-bar{position:relative;height:10px;margin-top:10px;background:repeating-linear-gradient(90deg,rgba(236,230,218,.14) 0 1px,transparent 1px 6px)}
.vault-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(240,168,48,.55),var(--sun));transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.vault-bar b{position:absolute;top:-3px;bottom:-3px;right:auto;left:0;width:0;background:var(--paper);opacity:0;mix-blend-mode:screen}
.vault-bar b.go{animation:vbar .9s ease-out}
@keyframes vbar{0%{opacity:.95}100%{opacity:0}}
.burnlog{list-style:none;margin-top:14px;font-family:var(--mono);font-size:12px}
.burnlog li{display:grid;grid-template-columns:96px 46px 52px minmax(0,1fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);color:var(--paper-2);transition:background .8s}
.burnlog li em{font-style:normal;color:var(--paper-3)}
.burnlog li .hot{color:var(--sun)}
.burnlog li.lit{animation:lit 1.4s ease-out}
@keyframes lit{0%{background:rgba(240,168,48,.18)}100%{background:transparent}}
.burnlog li.none{display:block;font-family:var(--serif);font-size:17px}
#burnNote{margin-top:14px}
@media (max-width:860px){
  .oracle-grid{grid-template-columns:minmax(0,1fr)}
  .tape li{grid-template-columns:62px 42px minmax(0,1fr) 74px;gap:8px;font-size:11px}
  .burnlog li{grid-template-columns:86px 42px 46px minmax(0,1fr);font-size:11px}
  .burnlog li em{display:none}
  .tape .hh{display:none}
}
@media (max-width:700px){
  .act{gap:18px}
  .btn-quiet{font-size:18px}
  .sc-name{font-size:17px}
  .sc-sub,.sc-val{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .tape li:not(.tape-h){animation:none}
  .sc-halo{animation:none}
}

/* ================================================================== real site: the Sun says what a click does */
.howto{position:relative;margin-top:22px;font-family:var(--mono);font-size:13.5px;letter-spacing:.01em;color:var(--paper)}
.howto span{display:inline-block;padding:7px 11px 6px;border:1px solid rgba(240,168,48,.55);background:rgba(11,9,7,.55)}
.howto span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--sun);vertical-align:1px;animation:pulse 2.2s ease-in-out infinite}
.leader{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;transition:opacity .4s}
.leader path{fill:none;stroke:rgba(240,168,48,.75);stroke-width:1;stroke-dasharray:3 4;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-14}}
.leader.off,.reticle.off{opacity:0}
.reticle{position:absolute;left:0;top:0;z-index:4;width:0;height:0;pointer-events:none;transition:opacity .35s;will-change:transform}
.reticle i{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border:1.5px solid var(--sun);border-radius:50%;box-shadow:0 0 0 1px rgba(11,9,7,.4)}
.reticle i:nth-child(2){animation:ret 1.8s ease-out infinite;border-color:rgba(255,236,200,.9)}
.reticle::before,.reticle::after{content:"";position:absolute;background:var(--sun)}
.reticle::before{left:-1px;top:-6px;width:2px;height:12px}
.reticle::after{left:-6px;top:-1px;width:12px;height:2px}
@keyframes ret{0%{transform:scale(.6);opacity:.95}100%{transform:scale(2.1);opacity:0}}
.reticle span{position:absolute;left:24px;top:-13px;white-space:nowrap;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);background:var(--paper);padding:5px 9px 4px;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.reticle.flip span{left:auto;right:24px}
.reticle.landed i:first-child{animation:land .7s cubic-bezier(.2,.8,.2,1) both}
.reticle.landed span{animation:labelin .5s .35s both}
@keyframes land{0%{transform:scale(3.2);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes labelin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.hero.ghosting .reticle span{animation:none;opacity:0;transition:opacity .3s}
.vf.ghost .vf-read{display:none}
@media (max-width:700px){ .vf.ghost .vf-loupe,.vf.ghost .vf-read{display:none} .leader{display:none} .vf-loupe{width:84px;height:84px} }

/* the viewfinder's call to action: readable on any part of the Sun */
.vf-cta{display:none;margin:-3px -6px 8px;padding:5px 9px 4px;width:max-content;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);background:var(--paper);box-shadow:0 4px 18px rgba(0,0,0,.45)}
.vf.has-cta .vf-cta{display:block}
.vf.flip .vf-cta{margin-left:auto}
.vf.armed .vf-cta{background:var(--sun)}
.vf.faint .vf-box{opacity:.55;border-style:dashed}
.vf.faint .vf-loupe,.vf.faint .vf-read{display:none}
.hero.near-sun{cursor:crosshair}
.hero.in-sun{cursor:none}

/* the ghost's hand */
.ghost-cursor{position:absolute;left:0;top:0;z-index:6;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .35s;will-change:transform}
.ghost-cursor.on{opacity:1}
.ghost-cursor svg{position:absolute;left:-3px;top:-2px;max-width:none;width:26px;height:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));transition:transform .12s}
.ghost-cursor.press svg{transform:scale(.86)}
.ghost-cursor b{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid var(--paper);opacity:0}
.ghost-cursor.press b{animation:ripple .5s ease-out}
@keyframes ripple{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.gh-fly{position:absolute;left:0;top:0;z-index:7;pointer-events:none;background:var(--paper);padding:3px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.gh-fly canvas{display:block;width:100%;height:100%}

/* "Your plates" */
.hero-dock{position:absolute;z-index:4;right:var(--gx);bottom:22px;display:flex;align-items:center;gap:14px;transition:opacity .4s}
.hero.exposing .hero-dock{opacity:.3}
.plate-tray{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 10px 6px 12px;background:rgba(11,9,7,.62);border:1px solid var(--rule);transition:opacity .4s}
.pt-label{font-family:var(--mono);font-size:11px;color:var(--paper-2);white-space:nowrap}
.pt-list{list-style:none;display:flex;gap:6px}
.pt-list li{width:44px;height:44px;background:#000;outline:1px solid rgba(236,230,218,.35);transition:opacity .6s,transform .4s}
.pt-list li canvas,.pt-list li img{display:block;width:100%;height:100%;object-fit:cover}
.pt-list li a{display:block;width:100%;height:100%}
.pt-list li.ghost{outline:1px dashed rgba(236,230,218,.7);opacity:.8}
.pt-list li.fade{opacity:0;transform:translateY(6px)}
.pt-empty{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--paper-3);white-space:nowrap}
.hero.exposing .plate-tray{opacity:.3}

/* your line: the first thing to do */
.compose{margin-top:22px;max-width:520px}
.compose-label{display:block;font-size:19px;color:var(--paper);margin-bottom:8px}
.compose-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.compose input{flex:1 1 230px;min-width:0;background:rgba(11,9,7,.55);border:1px solid rgba(236,230,218,.45);color:var(--paper);font-family:var(--serif);font-style:italic;font-size:21px;padding:9px 12px 8px;outline:none;transition:border-color .2s,box-shadow .2s}
.compose input::placeholder{color:rgba(236,230,218,.38)}
.compose input:focus{border-color:var(--sun);box-shadow:0 0 0 3px rgba(240,168,48,.18)}
.compose .howto{margin:0}
.line-help{margin-top:8px;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--paper-3);max-width:520px}
.vf.typed .vf-cta{background:var(--sun)}
/* the live frame chip in the readout */
.ro-live{display:flex;gap:10px;align-items:center;padding:6px 12px 6px 6px;background:rgba(11,9,7,.62);border:1px solid var(--rule);text-decoration:none;font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--paper-3)}
.ro-live img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-view-box:inset(18% 18% 22% 18%);background:#000;flex:none;outline:1px solid var(--rule)}
.ro-live b{font-weight:500;color:var(--paper)}
.ro-live:hover b{color:var(--sun)}

/* wallet */
.wallet{position:relative}
.wallet-btn{gap:10px;padding-right:12px}
.wb-logo{display:block;flex:none;width:22px;height:22px}
.wallet .btn.signed{font-family:var(--mono);font-size:13px;padding-right:16px}
.wallet .btn.signed .wb-logo{display:none}
.wallet-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:290px;padding:12px;background:var(--bg2,#13100c);border:1px solid var(--rule);box-shadow:0 20px 50px rgba(0,0,0,.6)}
.wallet-menu button,.wallet-menu a{display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px 9px;font-size:17px;color:var(--paper);text-decoration:none;text-align:left;border-top:1px solid var(--rule)}
.wallet-menu button:hover,.wallet-menu a:hover,.wallet-menu button:focus-visible,.wallet-menu a:focus-visible{background:rgba(236,230,218,.06)}
.wallet-menu img{border-radius:4px}
.wm-state{font-size:15px;line-height:1.35;color:var(--paper-2);margin-bottom:10px}
.wm-state.small{font-size:13px;margin:10px 0 0}
.wm-who{font-size:11px;word-break:break-all;color:var(--paper);margin-bottom:6px}

/* toast */
.toast{position:absolute;z-index:20;left:50%;top:84px;transform:translate(-50%,-8px);max-width:min(520px,calc(100vw - 40px));padding:10px 14px 9px;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.3;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* studio additions */
.studio-link{display:block;width:max-content;margin-top:16px;font-size:17px;color:var(--paper-2)}
.studio-actions{flex-wrap:wrap}
.wl-row button:disabled{opacity:.35;cursor:not-allowed}

/* oracle, burns, ledger */
.tape li.none,.burnlog li.none{display:block;font-family:var(--serif);font-size:17px;color:var(--paper-2);border-bottom:0}
.vbtn{font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--paper);padding:3px 7px;margin:6px 6px 0 0}
.vbtn:hover{background:var(--sun)}
.verify .hot{color:var(--sun)}
.vault.closed .vault-bar i{width:0!important}
.vault.closed #vaultSol{color:var(--paper-2)}
.burnlog li a{color:var(--sun)}
.ledger-list .n{text-decoration:none}
.ledger-list .thumb.missing{opacity:.2}
.ledger-empty{margin-top:28px;font-size:20px;color:var(--paper-2)}
.ledger-more{margin-top:22px}

@media (max-width:700px){
  .hero{height:auto;min-height:calc(100svh - var(--cab-h));padding-top:var(--sun-bottom,380px);padding-bottom:24px;display:flex;flex-direction:column}
  .hero-copy{position:relative;left:auto;right:auto;bottom:auto;padding:0 20px;max-width:none}
  .readout{position:relative;left:auto;right:auto;bottom:auto;top:auto;margin:26px 20px 0;width:auto}
  .hero-dock{position:relative;right:auto;bottom:auto;margin:16px 20px 0;flex-wrap:wrap;align-self:flex-start}
  .howto{margin-top:16px;font-size:12.5px}
  .compose{margin-top:16px}
  .compose input{font-size:19px}
  .reticle span,.vf-cta{font-size:12px}
  .toast{top:70px}
}
@media (prefers-reduced-motion:reduce){
  .leader path,.reticle i:nth-child(2),.howto span::before{animation:none}
}

/* desktop hero rhythm: the readout above, the words below, never touching */
@media (min-width:701px){
  h1{font-size:clamp(56px,min(6.6vw,calc((100vh - var(--cab-h)) * .106)),112px)}
  .hero-copy{bottom:clamp(40px,6.5vh,80px)}
  .readout{top:clamp(84px,11vh,120px)}
  .ro-frame{margin-top:10px;padding-top:8px}
}
@media (min-width:701px) and (max-height:1080px){
  .ro-spark,.ro-axis{display:none}
  .ro-class{font-size:46px;margin:4px 0 2px}
  .ro-light{margin-top:4px;font-size:16px}
  .lede{margin-top:16px}
  .howto{margin-top:16px}
  .act{margin-top:18px}
  .compose{margin-top:14px}
}
@media (min-width:701px) and (max-height:880px){ .line-help{display:none} .ro-light{display:none} .lede{display:none} }
.demo-tag{position:absolute;z-index:8;left:50%;bottom:10px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--sun);padding:4px 8px}

/* ---------- your plate is an NFT ---------- */
.nft-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,96px);align-items:start}
.nft-print{transform:rotate(-.6deg);max-width:440px}
.nft-json{margin-top:22px;padding:14px 16px;border:1px solid var(--rule);font-size:11px;line-height:1.65;color:var(--paper-2);white-space:pre;overflow-x:auto;max-width:520px;background:rgba(236,230,218,.025)}
.nft-dl{margin-top:30px;display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:18px 28px;border-top:1px solid var(--rule);padding-top:22px}
.nft-dl dt{font-style:italic;color:var(--paper);font-size:20px;line-height:1.3}
.nft-dl dd{color:var(--paper-2);font-size:19px;line-height:1.4}
.nft-dl a{color:var(--paper)}
.nft-state{margin-top:26px;font-size:12px;color:var(--sun)}
.mint-status{margin-top:12px;font-size:12px;line-height:1.55;color:var(--paper-2)}
.mint-status a{color:var(--sun)}
#mintBtn[aria-disabled="true"]{opacity:.7;cursor:default}
#mintBtn.done{border-color:var(--sun);color:var(--sun)}
@media (max-width:860px){ .nft-grid{grid-template-columns:minmax(0,1fr)} .nft-fig{min-width:0} .nft-dl{grid-template-columns:1fr;gap:6px} .nft-dl dd{margin-bottom:12px} .nft-print{max-width:none} }

/* on touch screens the ghost is a fingertip, not an arrow */
.ghost-cursor.touch svg{display:none}
.ghost-cursor.touch::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:rgba(236,230,218,.85);box-shadow:0 2px 10px rgba(0,0,0,.5)}
.ghost-cursor.touch.press::before{transform:scale(.8)}

/* ---------- $FLARE banner: above the nav, scrolls away; the nav rides under it (coin.js sets --cab-y) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* CA banner. Desktop: one 72 px line. ≤1100 px: two rows (title + Buy, then CA + DEX + X). */
.cab{position:relative;z-index:60;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"mark head ca act";column-gap:20px;align-items:center;min-height:72px;padding:12px var(--gx);background:var(--bg2);border-bottom:1px solid var(--rule)}
.cab-mark{grid-area:mark;flex:none;width:40px;height:40px;max-width:none;aspect-ratio:1/1;object-fit:contain}
.cab-head{grid-area:head;min-width:0}
.cab-title{font-size:24px;line-height:1.1;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-sub{display:flex;align-items:center;gap:10px;margin-top:3px;min-width:0;font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--paper-2);white-space:nowrap}
#cabSubText{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cab-bar{flex:none;position:relative;width:96px;height:4px;background:var(--rule);overflow:hidden}
.cab-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sun);transition:width .6s}
.cab-ca{grid-area:ca;display:flex;align-items:stretch;min-width:0;height:42px;border:1px solid var(--rule);background:var(--bg)}
.cab-ca-k{display:flex;align-items:center;padding:0 10px 0 12px;font-family:var(--mono);font-size:11.5px;color:var(--paper-3);border-right:1px solid var(--rule)}
.cab-ca-v{display:flex;align-items:center;min-width:0;flex:1;padding:0 12px;font-family:var(--mono);font-size:13.5px;letter-spacing:.01em;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all}
.cab-ca-v .ca-short{display:none}
.cab-copy{flex:none;min-width:68px;padding:0 12px;font-family:var(--mono);font-size:12px;color:var(--paper);border-left:1px solid var(--rule);transition:background .2s,color .2s}
.cab-copy:hover{background:rgba(236,230,218,.08)}
.cab-copy.done{color:var(--bg);background:var(--paper)}
.cab-act{grid-area:act;display:flex;gap:8px}
.cab a{text-decoration:none}
.cab-act .btn{height:42px;padding:0 16px;font-size:17px;justify-content:center}
.cab-act .cab-x{width:42px;padding:0;gap:8px}
.cab-x-h{display:none;font-family:var(--mono);font-size:13px}
.x-ico{width:18px;height:18px;flex:none}
.nav-x{display:grid;place-items:center;width:42px;height:42px;margin-right:-20px;color:var(--paper);opacity:.86;transition:opacity .2s}
.nav-x:hover{opacity:1}
.foot-ca{word-break:break-all}
.foot-copy{margin-left:6px;font-family:var(--mono);font-size:12px;padding:2px 8px;border:1px solid var(--rule);color:var(--paper)}
.foot-copy.done{background:var(--paper);color:var(--bg)}
@media (max-width:700px){
  .nav-x{width:36px;height:36px;margin-right:-8px}
}

@media (max-width:1300px){
  .cab-ca-v .ca-full{display:none}
  .cab-ca-v .ca-short{display:inline}
}
@media (max-width:1100px){
  /* two rows: the buttons' own wrapper steps aside so Buy can sit on row 1 and DEX + X on row 2 */
  .cab{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"mark head buy buy" "ca ca dex x";row-gap:10px;column-gap:14px;padding:12px var(--gx)}
  .cab-act{display:contents}
  .cab-buy{grid-area:buy}
  .cab-dex{grid-area:dex}
  .cab-act .cab-x{grid-area:x}
  .cab-mark{width:36px;height:36px}
  .cab-title{font-size:22px}
}
@media (min-width:800px) and (max-width:1100px){
  /* row 2 is wide enough for the whole CA here */
  .cab-ca-v .ca-full{display:inline}
  .cab-ca-v .ca-short{display:none}
}
@media (max-width:700px){
  .cab{column-gap:12px;row-gap:10px;padding:12px 16px}
  .cab-mark{width:32px;height:32px}
  .cab-title{font-size:20px}
  .cab-sub{font-size:11px;margin-top:2px}
  .cab-bar{width:64px}
  .cab-ca-k{display:none}
  .cab-ca-v{font-size:13px;padding:0 10px}
  .cab-copy{min-width:60px;padding:0 10px}
  .cab-act .btn{height:40px;font-size:16px;padding:0 14px}
  .cab-act .cab-x{width:40px}
  .cab-ca{height:40px}
  .cab-buy-l{display:none}
}
@media (max-width:360px){
  /* smallest phones: keep the short CA whole */
  .cab{column-gap:8px;padding:12px 14px}
  .cab-ca-v{font-size:12px;padding:0 8px}
  .cab-copy{min-width:50px;padding:0 8px}
  .cab-act .cab-dex{padding:0 10px;font-size:15px}
  .cab-act .cab-x{width:36px}
}