:root{
    --paper:#f4ecd8; --paper-2:#ece0c2;
    --ink:#1d1813;
    --pink:#ff4f6d; --blue:#2b3a8c; --yellow:#f5b921; --teal:#1fae8b;
    --serif:'Fraunces',Georgia,serif; --mono:'Geist Mono',ui-monospace,monospace;
    --wrap:1320px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:70px;overflow-x:hidden;max-width:100%}
  body{background:#e6d9b6;color:var(--ink);font-family:var(--serif);font-weight:430;line-height:1.6;
    -webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
  ::selection{background:var(--pink);color:var(--paper)}
  a{color:inherit;text-decoration:none}
  /* cross-document page transitions (View Transitions API) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .26s ease both}
  ::view-transition-new(root){animation:vt-in .36s cubic-bezier(.16,1,.3,1) both}
  @keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
  header{view-transition-name:site-header}
  @media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(24px,5vw,80px);position:relative;z-index:3}

  /* faint texture, kept off the reading */
  .grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.08;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* DEPTH layer — big blurred color washes + blurred shapes, far back, parallax */
  .depth{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .wash{position:absolute;border-radius:50%;filter:blur(120px);opacity:.14;will-change:transform}
  .wash.w1{width:46vw;height:46vw;background:var(--pink);top:-14vw;right:-10vw}
  .wash.w2{width:40vw;height:40vw;background:var(--yellow);bottom:-16vw;left:-10vw;opacity:.12}
  .wash.w3{width:32vw;height:32vw;background:var(--teal);top:54%;left:60%;opacity:.08}
  .farshape{position:absolute;will-change:transform;opacity:.16;filter:blur(3px)}
  .farshape.pink{color:var(--pink)}.farshape.blue{color:var(--blue)}.farshape.teal{color:var(--teal)}.farshape.yellow{color:var(--yellow)}

  /* sharp foreground shapes — only in margins, never over text columns */
  .fg{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:multiply;animation:float var(--fdur,9s) ease-in-out infinite}
  .fg.pink{color:var(--pink)}.fg.blue{color:var(--blue)}.fg.yellow{color:var(--yellow)}.fg.teal{color:var(--teal)}
  @keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-18px) rotate(calc(var(--rot,0deg) + 5deg))}}

  /* header */
  header{position:fixed;top:0;left:0;right:0;z-index:80;padding:40px clamp(14px,4vw,22px) 0;background:transparent;
    border-bottom:3px solid transparent;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease,padding-top .4s ease}
  header.scrolled{padding:36px 0 0;background:rgba(244,236,216,.92);backdrop-filter:blur(10px);border-bottom-color:var(--ink)}
  /* start: narrow, centered, framed bar — the line is part of the hero */
  .head{display:flex;align-items:center;gap:22px;height:60px;max-width:880px;margin:0 auto;
    background:var(--paper);border:3px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink);padding:0 22px;
    transition:max-width .5s cubic-bezier(.16,1,.3,1),border-radius .4s ease,box-shadow .4s ease,background .4s ease,border-color .4s ease,padding .4s ease}
  /* scrolled: expand to the sides into a full-width navbar */
  header.scrolled .head{max-width:1320px;border-radius:0;border-color:transparent;box-shadow:none;background:transparent;padding:0 clamp(24px,5vw,80px)}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:800;font-size:1.45rem;letter-spacing:-.01em}
  .brand svg{width:32px;height:32px;flex:none}
  .hlinks{display:flex;gap:24px;margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .hlinks a:hover{color:var(--pink)}
  .hcta{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.04em;background:var(--blue);color:var(--paper);
    border:2px solid var(--ink);padding:9px 16px;box-shadow:3px 3px 0 var(--ink);transition:.12s}
  .hcta:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);background:var(--pink)}
  .ghstars{display:inline-flex;align-items:center;margin-left:8px;padding:1px 7px;border-radius:999px;background:rgba(244,236,216,.22);font-size:11px;line-height:1.6}
  .ghstars b{font-weight:800}
  /* mobile nav disclosure */
  .mnav{display:none;margin-left:auto;position:relative}
  .mnav>summary{list-style:none;cursor:pointer;font-size:20px;line-height:1;width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);user-select:none}
  .mnav>summary::-webkit-details-marker{display:none}
  .mnav[open]>summary{background:var(--yellow)}
  .mnav .mnav-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:208px;background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
    display:flex;flex-direction:column;padding:8px;z-index:90}
  .mnav .mnav-panel a{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:11px 12px;border-bottom:2px solid rgba(29,24,19,.12)}
  .mnav .mnav-panel a:last-child{border-bottom:0}
  .mnav .mnav-panel a:hover{color:var(--pink)}
  .mnav .mnav-panel a.cta{background:var(--blue);color:var(--paper);text-align:center;margin-top:6px;border-bottom:0}
  .mnav>summary:focus-visible,.mnav .mnav-panel a:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
  @media(max-width:820px){.hlinks{display:none}.hcta{display:none}.mnav{display:block}}

  section{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vh,48px) 0;position:relative;overflow:hidden;scroll-snap-align:start;background:var(--paper)}
  /* ── risograph section rhythm: contrast bands + textures ── */
  .band-2{background:var(--paper-2)}
  .band-teal{background:#dcebe3}
  .band-blue{background:#dde1f0}
  .band-yellow{background:#f7e6b4}            /* echoes the footer yellow */
  section > .wrap{position:relative;z-index:2}
  /* texture layer (under content, over band colour) */
  .tx-dots::before,.tx-hatch::before,.tx-grid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
  .tx-dots::before{opacity:.55;background-image:radial-gradient(rgba(29,24,19,.11) 1.4px,transparent 1.5px);background-size:23px 23px}
  .tx-hatch::before{opacity:.7;background-image:repeating-linear-gradient(45deg,transparent 0 13px,rgba(29,24,19,.05) 13px 14px)}
  .tx-grid::before{opacity:.6;background-image:linear-gradient(rgba(29,24,19,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,24,19,.05) 1px,transparent 1px);background-size:30px 30px}
  /* illustration plates — capped so every section fits within one viewport */
  .plate{max-width:460px;margin:24px auto 0;border:3px solid var(--ink);line-height:0;overflow:hidden}
  .plate img,.plate video{display:block;width:100%;max-height:32svh;object-fit:contain;background:var(--paper)}
  /* full-bleed scene: illustration as section background, text in a readable panel */
  .scene{position:relative;overflow:hidden}
  .scene .bg{position:absolute;inset:0;z-index:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%)}
  .scene .bg img,.scene .bg video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12);transform-origin:center}
  .scene .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,236,216,.95),rgba(244,236,216,.80) 38%,rgba(244,236,216,.36) 70%,rgba(244,236,216,.10))}
  .scene .panel{background:rgba(244,236,216,.9);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:clamp(24px,3vw,38px);max-width:540px;backdrop-filter:blur(2px)}
  .scene .panel .stamp{box-shadow:3px 3px 0 var(--ink)}
  .scene .panel .card{margin-top:20px}
  @media(max-width:760px){.scene .bg::after{background:rgba(244,236,216,.88)}.scene .panel{max-width:none}}
  .stamp{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;background:var(--yellow);color:var(--ink);
    border:2px solid var(--ink);padding:7px 13px;box-shadow:4px 4px 0 var(--ink);margin-bottom:24px}

  /* BIG type */
  /* ── typescale — one modular scale, every headline reads from it ── */
  :root{
    --t-display: clamp(2.4rem, 4.8vw, 4.4rem);  /* hero / page h1 */
    --t-h2:      clamp(1.8rem, 3.4vw, 2.8rem);  /* section headline */
    --t-h3:      clamp(1.35rem, 2.2vw, 1.8rem); /* sub-head / panel head */
    --t-h4:      clamp(1.1rem, 1.5vw, 1.3rem);  /* card head */
    --t-lede:    clamp(1.15rem, 1.8vw, 1.5rem);
    --t-body:    clamp(1rem, 1.2vw, 1.2rem);
    --t-stat:    clamp(2.4rem, 5vw, 3.8rem);    /* display numbers */
  }
  h1,h2{font-weight:700;letter-spacing:-.035em;line-height:.92;position:relative}
  .mis{position:relative;color:var(--ink);display:inline-block}
  .mis::before{content:attr(data-text);position:absolute;left:0;top:0;color:var(--pink);
    transform:translate(.028em,.03em);z-index:-1;mix-blend-mode:multiply;pointer-events:none}
  h1{font-size:var(--t-display)}
  h2{font-size:var(--t-h2);max-width:18ch}
  h3{font-weight:800;font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.1}
  .em-blue{color:var(--blue)}.em-pink{color:var(--pink)}.em-teal{color:var(--teal)}

  .body{font-size:var(--t-body);line-height:1.6;max-width:42ch;font-weight:470;color:var(--ink)}
  .body+.body{margin-top:1em}
  .lede{font-size:var(--t-lede);line-height:1.38;max-width:32ch;font-weight:520}
  .lede b{color:var(--blue);font-weight:800}
  .rule{height:4px;background:var(--ink);margin:18px 0;max-width:140px}

  /* hero */
  .hero{min-height:calc(100svh - 86px);display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(128px,17vh,190px)}
  .hero .est{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--blue);margin-bottom:30px}
  .hero h1{max-width:14ch;margin-bottom:20px;text-wrap:balance}
  .hero .lede{max-width:34ch}
  .herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;width:100%}
  .herocol-art img,.herocol-art video{width:100%;display:block;border:3px solid var(--ink);box-shadow:14px 14px 0 var(--blue);aspect-ratio:16/9;object-fit:cover}
  @media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:30px}.herocol-art{max-width:460px}
    /* mobile: top-align the hero so the eyebrow clears the fixed header bar instead of tucking under it */
    .hero{justify-content:flex-start;padding-top:104px;min-height:100svh}
    .hero .est{margin-bottom:18px;letter-spacing:.18em;font-size:12px;overflow-wrap:anywhere}}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}
  .btn{font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.03em;padding:17px 30px;
    border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);transition:.12s;cursor:pointer}
  .btn-primary{background:var(--pink);color:var(--paper)}
  .btn-ghost{background:var(--paper);color:var(--ink)}
  .btn:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--ink)}
  .btn:active{transform:translate(7px,7px);box-shadow:0 0 0 var(--ink)}
  .install{margin-top:22px;font-family:var(--mono);font-size:13px;font-weight:600;border:3px solid var(--ink);
    background:var(--paper);padding:15px 18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:480px;
    overflow-wrap:anywhere;box-shadow:6px 6px 0 var(--blue)}
  .install .d{color:var(--pink);font-weight:800}
  .copy{margin-left:auto;cursor:pointer;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    background:var(--yellow);border:2px solid var(--ink);padding:6px 10px;transition:.12s}
  .copy:hover{background:var(--pink);color:var(--paper)}
  .scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4}
  .scrollcue svg{width:30px;height:30px;fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:cue 1.7s ease-in-out infinite}
  @keyframes cue{0%{transform:translateY(-5px);opacity:.25}50%{transform:translateY(5px);opacity:1}100%{transform:translateY(-5px);opacity:.25}}

  /* marquee */
  .marq{border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--blue);color:var(--paper);overflow:hidden;max-width:100%;padding:18px 0;position:relative;z-index:3;scrollbar-width:none;-ms-overflow-style:none}
  .marq::-webkit-scrollbar{display:none}
  .track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:slide 28s linear infinite;font-weight:800;font-size:1.7rem;font-style:italic;text-transform:lowercase}
  .track i{color:var(--yellow);font-style:normal}
  .track .bi{width:.82em;height:.82em;vertical-align:-.06em;margin-right:.3em;fill:var(--paper)}
  @keyframes slide{to{transform:translateX(-50%)}}

  /* hero "keeps" caption — what the graph holds */
  .keeps{font-family:var(--mono);font-size:12px;font-weight:600;opacity:.6;margin-top:16px;letter-spacing:.01em;line-height:1.6;max-width:52ch}
  .keeps span{color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-right:8px}

  /* hero live-network strip — real count + join feed from the tracker */
  .netstat{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--mono);font-size:13px;margin-top:20px;color:var(--ink)}
  .netstat .netdot{width:9px;height:9px;border-radius:50%;background:#1eb980;flex:0 0 auto;box-shadow:0 0 0 0 rgba(30,185,128,.6);animation:netpulse 2.2s infinite}
  @keyframes netpulse{0%{box-shadow:0 0 0 0 rgba(30,185,128,.5)}70%{box-shadow:0 0 0 9px rgba(30,185,128,0)}100%{box-shadow:0 0 0 0 rgba(30,185,128,0)}}
  .netstat .netcount{font-weight:800;font-size:17px;color:var(--blue);font-variant-numeric:tabular-nums;min-width:1ch}
  .netstat .netlbl{font-weight:700;letter-spacing:.02em}
  .netstat .netsep{opacity:.35}
  .netstat .netlog{opacity:.7;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:30ch}

  /* folk divider band */
  .folkband{height:74px;background:url(assets/gen/border.png) repeat-x center/auto 100%;
    border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);position:relative;z-index:3;image-rendering:auto}

  /* beats — text in a solid panel for readability */
  .beat{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:center;margin-top:24px}
  .beat:nth-of-type(even) .txt{order:2}
  .beat h3{font-size:var(--t-h3);line-height:1.05;margin-bottom:18px}
  .card{border:3px solid var(--ink);background:var(--paper);padding:32px;font-family:var(--mono);font-size:15px;
    font-weight:500;line-height:2;box-shadow:10px 10px 0 var(--pink)}
  .card.b2{box-shadow:10px 10px 0 var(--teal)}
  .card b{font-weight:700}.card .hit{color:var(--pink);font-weight:700}.card.b2 .hit{color:var(--teal)}
  @media(max-width:880px){.beat{grid-template-columns:1fr;gap:30px}.beat:nth-of-type(even) .txt{order:0}}

  /* proof */
  .ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px}
  .proofrow{display:grid;grid-template-columns:1fr minmax(0,360px);gap:clamp(20px,4vw,48px);align-items:center;margin-top:22px}
  @media(max-width:840px){.proofrow{grid-template-columns:1fr}}
  .led{border:3px solid var(--ink);background:var(--paper);padding:15px 16px}
  .led:nth-child(1){box-shadow:7px 7px 0 var(--pink)}.led:nth-child(2){box-shadow:7px 7px 0 var(--blue)}
  .led:nth-child(3){box-shadow:7px 7px 0 var(--yellow)}.led:nth-child(4){box-shadow:7px 7px 0 var(--teal)}
  .led .n{font-family:var(--mono);font-weight:700;font-size:clamp(1.6rem,2.8vw,2.3rem)}
  .led:nth-child(1) .n{color:var(--pink)}.led:nth-child(2) .n{color:var(--blue)}.led:nth-child(3) .n{color:var(--ink)}.led:nth-child(4) .n{color:var(--teal)}
  .led .n small{font-size:.45em}
  .led .k{font-style:italic;font-size:.9rem;margin-top:7px;font-weight:480}
  @media(max-width:760px){.ledger{grid-template-columns:1fr 1fr}}
  .bars{margin-top:0;display:flex;flex-direction:column;gap:9px;max-width:600px}
  .bar{display:grid;grid-template-columns:120px 1fr 56px;gap:14px;align-items:center;font-size:.92rem;font-weight:500}
  .bar .nm{font-style:italic}.bar.me .nm{font-style:normal;font-weight:800}
  .bar .tr{height:12px;border:2px solid var(--ink);background:var(--paper)}
  .bar .fl{height:100%;width:var(--w,0);transition:width 1.1s cubic-bezier(.16,1,.3,1);background:var(--ink)}
  /* Reveal-grow as enhancement only: zero the fill PRE-reveal, but never leave it
     stuck at 0 — once #bars gets .in (IntersectionObserver) it animates to --w, and
     if JS/observer never fire the bars are filled by default. (Was: a hard
     :not(.in) gate that left every bar empty when the reveal didn't apply.) */
  .has-js .bars.reveal-pending .fl{width:0}
  /* baselines sit back; Folklore is the solid-black lead bar */
  .bar:not(.me) .fl{opacity:.32}
  .bar.me .fl{background:var(--ink);opacity:1}
  .bars-foot{font-family:var(--mono);font-size:.78rem;opacity:.62;margin-top:12px;max-width:560px;line-height:1.5}
  .bars-foot b{font-weight:700;opacity:.85}
  .bar .v{font-family:var(--mono);font-size:.9rem;text-align:right;font-weight:600}

  /* inscription */
  .insc{margin-top:30px;border:3px solid var(--ink);background:var(--ink);color:var(--paper);
    padding:28px 26px;max-width:800px;box-shadow:10px 10px 0 var(--pink)}
  .insc pre{font-family:var(--mono);font-size:14px;font-weight:500;line-height:2.1;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
  .insc .c{color:#a99f8c;font-style:italic}.insc .p{color:var(--yellow)}

  /* name */
  .name{text-align:center;max-width:1000px;margin:0 auto}
  .name h2{max-width:none;margin:0 auto}
  .name .sig{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.08em;margin-top:32px;color:var(--blue)}

  /* store — product-card shop */
  .shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:22px}
  .prod{border:3px solid var(--ink);background:var(--paper);padding:14px;display:flex;flex-direction:column;gap:10px}
  .prod:nth-child(1){box-shadow:9px 9px 0 var(--pink)}
  .prod:nth-child(2){box-shadow:9px 9px 0 var(--blue)}
  .prod:nth-child(3){box-shadow:9px 9px 0 var(--teal)}
  .prod .shot{position:relative;border:3px solid var(--ink);overflow:hidden;line-height:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:var(--paper-2)}
  /* store header: title left, browse-link right */
  .store-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:10px}
  .store-head h2{margin:0}
  .store-browse{font-family:var(--mono);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-bottom:3px solid var(--ink);white-space:nowrap;padding-bottom:5px}
  .store-browse:hover{color:var(--blue)}
  /* shop teaser: full-bleed grid, square uncropped product shots, sized to content */
  #store{min-height:auto}
  #store .prod .spec{display:none}            /* teaser: drop fulfilment line; full /store keeps it */
  #store .prod .desc{-webkit-line-clamp:2}
  #store .shop{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin-top:18px}
  /* teaser cards: cap the shot so the whole row clears one viewport */
  #store .prod{padding:12px;gap:7px}
  #store .prod .shot{aspect-ratio:3/2}
  #store .stamp{margin-bottom:14px}
  #store .prod .shot img{object-fit:cover}
  #store .prod .shot.tee img,#store .prod .shot.pin img{object-fit:contain}
  #store .store-more{font-family:var(--mono);font-size:13px;font-weight:600;text-align:center;margin-top:14px;opacity:.78}
  #store .store-more a{font-weight:700;border-bottom:2px solid var(--ink);white-space:nowrap}
  #store .store-more a:hover{color:var(--blue)}
  @media(max-width:760px){#store .shop{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){#store .shop{grid-template-columns:1fr}}
  /* store teaser marquee — same mechanism as #memes: continuous left flow, clone-for-seamless-loop, pause on hover */
  .store-carousel{overflow:hidden;width:100%;max-width:100%;scrollbar-width:none;-ms-overflow-style:none}
  .store-carousel::-webkit-scrollbar{display:none}
  /* mobile: carousels run edge-to-edge — break out of the wrap gutter (scrollbar-safe: no 100vw) */
  @media(max-width:760px){.store-carousel{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}}
  #store .shop.flow{display:flex;width:max-content;grid-template-columns:none;gap:0;margin-top:18px;
    animation:meme-marquee var(--sdur,34s) linear infinite}
  .store-carousel:hover #store .shop.flow{animation-play-state:paused}
  #store .shop.flow .prod{flex:0 0 clamp(220px,72vw,300px);margin:0 8px;box-sizing:border-box}
  @media(prefers-reduced-motion:reduce){#store .shop.flow{width:auto;flex-wrap:wrap;animation:none}#store .shop.flow .prod{flex-basis:clamp(220px,72vw,300px)}}
  @media(max-width:760px){#store .store-more a{white-space:normal}}
  .prod:nth-child(1) .shot{box-shadow:6px 6px 0 var(--pink)}
  .prod:nth-child(2) .shot{box-shadow:6px 6px 0 var(--blue)}
  .prod:nth-child(3) .shot{box-shadow:6px 6px 0 var(--teal)}
  .prod .shot img{width:100%;height:100%;object-fit:cover;display:block}
  .prod .shot.pair{gap:10px;padding:14px}
  .prod .shot.pair img{width:48%;height:auto;border:2px solid var(--ink)}
  /* merch mockups — product shots framed from existing art via CSS (zero new files) */
  /* tee: dark cotton field with collar/sleeve hints, art reads as a chest PRINT */
  .prod .shot.tee{padding:0;background:
    radial-gradient(120% 80% at 50% -18%, #2c2620 0 38%, transparent 39%),
    linear-gradient(180deg,#241f1a 0%,#1d1813 100%)}
  .prod .shot.tee::before{content:"";position:absolute;top:11%;left:50%;width:30%;height:14%;
    transform:translateX(-50%);border:3px solid #0f0c09;border-top:0;border-radius:0 0 60% 60%;opacity:.55}
  .prod .shot.tee img{width:58%;height:58%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
  /* sticker sheet: paper field, dashed die-cut backing, two rotated die-cut chips */
  .prod .shot.sheet{display:flex;gap:14px;padding:18px;flex-wrap:wrap;
    background:var(--paper-2);
    background-image:repeating-linear-gradient(45deg,transparent 0 11px,rgba(29,24,19,.05) 11px 12px)}
  .prod .shot.sheet img{width:42%;height:auto;background:var(--paper);border:2px dashed var(--ink);
    border-radius:10px;padding:7px;box-shadow:3px 3px 0 rgba(29,24,19,.25)}
  .prod .shot.sheet img:nth-of-type(1){transform:rotate(-5deg)}
  .prod .shot.sheet img:nth-of-type(2){transform:rotate(6deg)}
  /* enamel pin: round metal bezel framing the art, glossy inset highlight + post hint */
  .prod .shot.pin{background:radial-gradient(120% 120% at 30% 22%,#f0e6c8 0,var(--paper-2) 55%,#d8c79c 100%)}
  .prod .shot.pin img{width:74%;height:74%;object-fit:cover;border-radius:50%;border:4px solid var(--ink);
    box-shadow:inset 0 5px 14px rgba(255,255,255,.55),inset 0 -7px 14px rgba(29,24,19,.35),5px 5px 0 rgba(29,24,19,.22)}
  /* concrete print-spec line per card */
  .prod .spec{font-family:var(--mono);font-size:11px;font-weight:600;line-height:1.55;letter-spacing:.02em;
    color:var(--ink);opacity:.66;border-top:2px dotted rgba(29,24,19,.35);padding-top:10px}
  .prod .soon{font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:5px 10px;align-self:flex-start}
  .prod h4{font-weight:800;font-style:italic;font-size:1rem;line-height:1.1}
  .prod .desc{font-size:.8rem;font-weight:460;line-height:1.4;color:var(--ink);flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .prod .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
  .prod .price{font-family:var(--mono);font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
  .prod:nth-child(1) .price{color:var(--pink)}.prod:nth-child(2) .price{color:var(--blue)}.prod:nth-child(3) .price{color:var(--teal)}
  .buy{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.03em;padding:11px 20px;
    border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--ink);color:var(--paper);cursor:not-allowed;opacity:.92}
  .buy[aria-disabled="true"]{pointer-events:none}

  footer{border-top:3px solid var(--ink);padding:56px 0 76px;background:var(--yellow);position:relative;z-index:3}
  .foot-support{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:30px;border-bottom:2px solid var(--ink)}
  .foot-support-label{font-family:var(--serif);font-weight:800;font-size:1.1rem;letter-spacing:-.01em}
  .support-btn{display:inline-flex;align-items:center;gap:8px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:12px;padding:7px 14px;background:var(--paper);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.02em;transition:transform .12s ease,box-shadow .12s ease}
  .support-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
  .support-btn.patreon{background:var(--pink);color:var(--paper)}
  .support-btn.patreon svg{width:17px;height:17px;fill:currentColor}
  .foot{display:flex;gap:28px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:14px;font-weight:600}
  .foot a{border-bottom:2px solid var(--ink);transition:.15s}.foot a:hover{color:var(--paper)}
  .foot .r{margin-left:auto;font-weight:700}

  /* narrow-phone composition guards (≤480px) — surgical, type scale untouched */
  @media(max-width:480px){
    /* #join inscription: long tokens (libp2p multiaddr) must wrap inside the box, never clip */
    .insc{padding:20px 16px}
    .insc pre{font-size:12px;line-height:1.95}
    /* proof bars: free the track from the 120px label column so it never crushes */
    .bar{grid-template-columns:96px 1fr 50px;gap:10px;font-size:.86rem}
    .bar .v{font-size:.82rem}
    /* keep any full-bleed media inside the column */
    img,video{max-width:100%}
  }

  .rv{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
  .rv.in{opacity:1;transform:none}
  .rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}.rv[data-d="3"]{transition-delay:.3s}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.fg,.farshape,.track{animation:none}.scrollcue svg{animation:none}}

  @keyframes cur-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

  /* ── mechanism: the four steps as one connected pipeline, all in view ── */
  .mech-flow{list-style:none;margin:clamp(16px,2.6vh,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.7vw,22px)}
  .mstep{position:relative;display:flex;flex-direction:column;gap:11px;box-sizing:border-box;border:3px solid var(--ink);background:var(--paper-2);
    padding:clamp(15px,1.6vw,20px);background-image:radial-gradient(rgba(29,24,19,.07) 1.4px,transparent 1.5px);background-size:20px 20px}
  .mstep.s1{box-shadow:8px 8px 0 var(--pink)}.mstep.s2{box-shadow:8px 8px 0 var(--blue)}
  .mstep.s3{box-shadow:8px 8px 0 var(--yellow)}.mstep.s4{box-shadow:8px 8px 0 var(--teal)}
  .mstep-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .mstep-n{font-weight:900;font-style:italic;font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:.8}
  .mstep.s1 .mstep-n{color:var(--pink)}.mstep.s2 .mstep-n{color:var(--blue)}
  .mstep.s3 .mstep-n{color:var(--yellow)}.mstep.s4 .mstep-n{color:var(--teal)}
  .mstep-tag{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);padding:3px 7px;line-height:1.1;white-space:nowrap}
  .mstep-diag{display:flex;align-items:center;min-height:64px}
  .mstep-diag svg{width:clamp(56px,5vw,72px);height:auto;display:block}
  .mstep h4{font-weight:800;font-size:var(--t-h4);line-height:1.06}
  .mstep p{font-size:clamp(.86rem,1vw,.98rem);font-weight:470;line-height:1.46;color:var(--ink);margin:0}
  /* sequence connector — arrow sitting in the gap toward the next step */
  .mstep:not(:last-child)::after{content:"→";position:absolute;right:calc(-0.5 * clamp(14px,1.7vw,22px));top:50%;transform:translate(50%,-50%);
    font-family:var(--mono);font-weight:700;font-size:18px;color:var(--ink);opacity:.5;z-index:2;pointer-events:none}
  @media(max-width:900px){.mech-flow{grid-template-columns:repeat(2,1fr)}
    /* 2×2: only the vertical hops (1→3, 2→4 sit side-by-side) read cleanly as down-arrows */
    .mstep:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:calc(-0.5 * clamp(14px,1.7vw,22px));transform:translate(-50%,50%)}
    .mstep:nth-child(2)::after{content:none}}
  @media(max-width:560px){.mech-flow{grid-template-columns:1fr}
    .mstep:nth-child(2)::after{content:"↓"}}

  /* ── meme marquee: continuous right-to-left flow of all memes; full-bleed at every width ── */
  .meme-carousel{margin-top:clamp(28px,4vh,44px);overflow:hidden;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);scrollbar-width:none;-ms-overflow-style:none}
  .meme-carousel::-webkit-scrollbar{display:none}
  .meme-track{list-style:none;display:flex;margin:0;padding:6px 0;width:max-content}
  .meme-track.flow{animation:meme-marquee var(--mdur,40s) linear infinite}
  .meme-carousel:hover .meme-track.flow{animation-play-state:paused}
  @keyframes meme-marquee{to{transform:translateX(-50%)}}
  .meme-slide{flex:0 0 clamp(230px,25vw,320px);padding:0 11px;box-sizing:border-box}
  .meme-card{position:relative;border:3px solid var(--ink);background:var(--paper);overflow:hidden;line-height:0}
  .meme-card img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover}
  .meme-slide:nth-child(4n+1) .meme-card{box-shadow:8px 8px 0 var(--pink)}
  .meme-slide:nth-child(4n+2) .meme-card{box-shadow:8px 8px 0 var(--blue)}
  .meme-slide:nth-child(4n+3) .meme-card{box-shadow:8px 8px 0 var(--teal)}
  .meme-slide:nth-child(4n+4) .meme-card{box-shadow:8px 8px 0 var(--yellow)}
  @media(prefers-reduced-motion:reduce){.meme-track,.meme-track.flow{width:auto;flex-wrap:wrap;animation:none}.meme-slide{flex-basis:33.333%}}
  @media(prefers-reduced-motion:reduce) and (max-width:760px){.meme-slide{flex-basis:50%}}

  /* ── query-flow pipeline (ported, re-skinned) ── */
  .flow-wrap{width:100%;margin:8px auto 22px;max-width:760px}
  .flow-svg{width:100%;height:auto;display:block}
  @media(max-width:760px){.flow-wrap{display:none}}

  /* ── traced scene: two terminal panes (kept dark for terminal authenticity) ── */
  .scene-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(.9rem,2vw,1.6rem);align-items:stretch}
  @media(max-width:880px){.scene-pair{grid-template-columns:1fr}.scene-arrow{display:none}}
  .scene-pane{background:var(--ink);border:3px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--blue);padding:clamp(11px,1.6vh,16px) 16px;font-family:var(--mono);font-size:clamp(10.5px,1.45vh,12.5px);line-height:1.4;display:flex;flex-direction:column;color:rgba(244,236,216,.62)}
  .scene-pane:last-of-type{box-shadow:8px 8px 0 var(--pink)}
  .scene-pane .pstamp{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:8px;display:flex;gap:.5rem;align-items:center}
  .scene-pane .pstamp .dot{width:6px;height:6px;background:var(--teal);border-radius:50%;animation:blink 1.6s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
  .scene-pane h3{font-family:var(--serif);font-weight:600;font-size:clamp(1rem,1.7vh,1.25rem);line-height:1.18;color:var(--paper);margin:.15rem 0 .45rem;letter-spacing:-.01em}
  .scene-pane .line{padding:.06rem 0}
  .scene-pane .line.you{color:var(--yellow)}
  .scene-pane .line.tool{color:var(--teal)}
  .scene-pane .sig{margin-top:auto;padding-top:.6rem;border-top:1px dashed rgba(244,236,216,.28);font-size:11.5px;letter-spacing:.04em;color:var(--paper)}
  .scene-pane .sig b{color:var(--teal);font-weight:600}
  .scene-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:0 .2rem}
  .scene-arrow svg{width:56px;height:auto}
  .scene-arrow .cap{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink);opacity:.6;text-align:center;white-space:nowrap}
  .scene-note{margin-top:22px;font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5;max-width:60ch}
  .scene-note em{color:var(--teal);font-style:italic}
  /* #trace: keep within 100svh on short viewports */
  #trace .flow-wrap{margin:6px auto 14px}

  /* ── provenance: poison stat + signed record ── */
  .prov-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1rem,3vw,2.2rem);align-items:center;margin-top:24px}
  @media(max-width:820px){.prov-grid{grid-template-columns:1fr;gap:1.4rem}.prov-arrow{transform:rotate(90deg)}}
  .prov-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
  .prov-problem .prov-label{color:var(--pink)}
  .prov-answer .prov-label{color:var(--teal)}
  .prov-stat{font-family:var(--serif);font-weight:700;font-size:var(--t-stat);line-height:1;letter-spacing:-.02em;color:var(--pink);margin-bottom:10px}
  .prov-body{font-size:1rem;line-height:1.55;opacity:.8;max-width:42ch}
  .prov-body strong{font-weight:700;opacity:1}
  .prov-cite{font-family:var(--mono);font-size:11px;opacity:.55;margin-top:8px;letter-spacing:.04em}
  .prov-arrow svg{width:58px;height:auto}
  .prov-record{font-family:var(--mono);font-size:12px;line-height:1.55;color:rgba(244,236,216,.7);background:var(--ink);border:3px solid var(--ink);border-radius:12px;box-shadow:8px 8px 0 var(--teal);padding:14px 16px;margin:0 0 12px;white-space:pre;overflow-x:auto}
  .prov-record .prov-hl{color:var(--yellow);font-weight:600}

  /* ── compounding cost curve (draws on reveal) ── */
  .curve-wrap{width:100%;max-width:360px;margin:0 auto}
  .curve-chart{width:100%;height:auto}
  .curve-line{stroke-dasharray:460;stroke-dashoffset:460}
  .curve-wrap.in .curve-line{animation:curve-draw 1.9s cubic-bezier(.16,1,.3,1) forwards}
  .curve-dot,.curve-lbl{opacity:0}
  .curve-wrap.in .curve-dot,.curve-wrap.in .curve-lbl{animation:curve-fade .5s ease forwards}
  .curve-wrap.in .d0,.curve-wrap.in .curve-lbl:first-of-type{animation-delay:.35s}
  .curve-wrap.in .d1{animation-delay:1.7s}
  @keyframes curve-draw{to{stroke-dashoffset:0}}
  @keyframes curve-fade{to{opacity:1}}
  @media(prefers-reduced-motion:reduce){.curve-line{stroke-dashoffset:0}.curve-dot,.curve-lbl{opacity:1}.curve-wrap.in .curve-line,.curve-wrap.in .curve-dot,.curve-wrap.in .curve-lbl{animation:none}}

  /* ── inference-depth cascade (ported, re-skinned): tree builds top-down on a loop ── */
  .compound-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:clamp(1rem,3vw,2.4rem)}
  /* #problem: viz beside the text */
  .prob-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(26px,5vw,60px);align-items:center;margin-top:clamp(14px,2.4vh,26px)}
  .prob-grid .prob-txt .body:first-child{margin-top:0}
  .prob-grid .compound-stage{align-items:flex-start}
  .prob-grid .cascade-foot{text-align:left}
  @media(max-width:860px){.prob-grid{grid-template-columns:1fr;gap:22px}.prob-grid .compound-stage{align-items:center}.prob-grid .cascade-foot{text-align:center}}
  .cascade{font-family:var(--mono);font-size:clamp(.78rem,.92vw,1rem);line-height:1.75;width:fit-content;margin:0 auto}
  .cascade .cl{white-space:pre;opacity:0;animation:cascade 7s ease-in-out infinite;animation-delay:calc(var(--i) * .42s)}
  @keyframes cascade{0%{opacity:0;transform:translateX(-3px)}8%,82%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-3px)}}
  .cascade .ask{color:var(--ink)}
  .cascade .seed{color:var(--teal);font-weight:600}
  .cascade .e{color:var(--ink);opacity:.38}
  .cascade .nd{color:var(--teal)}
  .cascade .lbl{color:var(--ink);opacity:.72}
  .cascade .punch{color:var(--pink);font-weight:700}
  .cascade .cur{display:inline-block;width:1ch;background:var(--teal);color:var(--paper);animation:cur-blink 1.1s steps(2) infinite}
  .cascade-foot{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.7;text-align:center;margin-top:18px}
  .cascade-foot b{color:var(--pink);font-weight:700;opacity:1}
  @media(prefers-reduced-motion:reduce){.cascade .cl{animation:none;opacity:1}.cascade .cur{animation:none}}
  @media(max-width:560px){.cascade{font-size:.66rem}}

/* creed */
  .creed-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1080px;margin:40px auto 0;border:3px solid var(--ink);background:var(--paper);box-shadow:10px 10px 0 var(--ink);text-align:left}
  .creed-item{padding:26px 28px 24px;border-bottom:2px solid var(--ink)}
  .creed-item:nth-child(odd){border-right:2px solid var(--ink)}
  .creed-item:nth-last-child(-n+2){border-bottom:none}
  .creed-item .cn{font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--pink);text-transform:uppercase}
  .creed-item h3{font-family:var(--serif);font-weight:800;font-size:var(--t-h3);letter-spacing:-.01em;margin:8px 0 8px}
  .creed-item p{font-size:.98rem;line-height:1.6;color:var(--muted)}
  .creed-item p b{color:var(--ink)}
  .creed-close{max-width:1080px;margin:26px auto 0;text-align:center;font-family:var(--serif);font-style:italic;font-size:1.15rem}
  .creed-close b{font-style:normal}
  @media(max-width:768px){.creed-grid{grid-template-columns:1fr}.creed-item:nth-child(odd){border-right:none}.creed-item:nth-last-child(-n+2){border-bottom:2px solid var(--ink)}.creed-item:last-child{border-bottom:none}}

/* ── the island — the demo's notch, two zones like the real one:
     a solid strip living in the menubar, content dropping below it ── */
.isl{
  position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:90;
  background:#000;color:var(--paper);
  border-radius:0 0 12px 12px;
  width:172px;height:32px;overflow:hidden;white-space:nowrap;
  transition:width .5s cubic-bezier(.32,.9,.28,1.05), height .5s cubic-bezier(.32,.9,.28,1.05), border-radius .5s, box-shadow .5s;
  pointer-events:none;
}
.isl.open{width:min(380px,86vw);height:84px;border-radius:0 0 20px 20px;
  box-shadow:0 22px 44px -16px rgba(0,0,0,.55)}
.isl::before,.isl::after{content:'';position:absolute;top:0;width:7px;height:7px}
.isl::before{left:-7px;background:radial-gradient(circle at 0 100%, transparent 6.5px, #000 7px)}
.isl::after{right:-7px;background:radial-gradient(circle at 100% 100%, transparent 6.5px, #000 7px)}
/* strip — always visible, lives inside the bar */
.isl-strip{height:32px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;transition:opacity .22s}
.isl.open .isl-strip{opacity:0}
.isl-strip .isl-fire{width:20px;height:20px;border-radius:6px;flex:0 0 auto}
.isl-strip .isl-mini{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--paper)}
.isl-strip .isl-mini b{color:var(--yellow)}
.isl-strip .idot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(31,174,139,.55);animation:islpulse 1.6s infinite;flex:0 0 auto}
/* expanded zone — drops below the bar line, like the demo */
.isl-exp{
  position:absolute;top:32px;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:10px;padding:0 16px 8px;
  opacity:0;transform:translateY(5px);
  transition:opacity .3s .13s, transform .3s .13s;
}
.isl.open .isl-exp{opacity:1;transform:none}
.isl-exp .isl-fire{flex:0 0 auto;width:32px;height:32px;border-radius:9px;border:1px solid rgba(31,174,139,.4)}
.isl.serve .isl-exp .isl-fire{border-color:rgba(255,79,109,.4)}
.isl.join .isl-exp .isl-fire{border-color:rgba(245,185,33,.4)}
.isl-exp .isl-txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.isl-exp .isl-kick{
  font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:7px;
}
.isl-exp .isl-kick .idot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(31,174,139,.55);animation:islpulse 1.4s infinite;flex:0 0 auto}
.isl-exp .isl-flow{font-family:var(--mono);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.isl-exp .isl-flow b{color:var(--yellow);font-weight:700}
.isl.serve .isl-kick{color:var(--pink)}
.isl.serve .isl-kick .idot{background:var(--pink);box-shadow:0 0 0 0 rgba(255,79,109,.55)}
.isl.serve .isl-flow .who{color:var(--pink);font-weight:700}
.isl.pull .isl-flow .who{color:var(--teal);font-weight:700}
.isl.join .isl-kick{color:var(--yellow)}
.isl.join .isl-kick .idot{background:var(--yellow);box-shadow:0 0 0 0 rgba(245,185,33,.55)}
@keyframes islpulse{70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media(max-width:1100px){.isl{display:none}}

/* ── immersion — the page breathes ── */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:no-preference){
  /* hero entrance choreography — a page-load stagger, not just scroll reveals */
  .hero .rv.in{animation:herorise .8s cubic-bezier(.25,.9,.3,1) both}
  .hero .rv.in[data-d="1"]{animation-delay:.14s}
  .hero .rv.in[data-d="2"]{animation-delay:.3s}
  .hero .rv.in[data-d="3"]{animation-delay:.48s}
  @keyframes herorise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  /* ember field behind the hero */
  .embers{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0}
}


/* ── the hearth burns — brand flame, everywhere the logo appears ── */
@media (prefers-reduced-motion:no-preference){
  .fl-o{transform-box:fill-box;transform-origin:50% 96%;animation:flsway 2.3s ease-in-out infinite}
  .fl-i{transform-box:fill-box;transform-origin:50% 96%;animation:fllick 1.25s ease-in-out infinite}
  @keyframes flsway{
    0%,100%{transform:scaleY(1) skewX(0deg)}
    24%{transform:scaleY(1.06) skewX(-2deg)}
    52%{transform:scaleY(.97) skewX(1.6deg)}
    76%{transform:scaleY(1.04) skewX(-1deg)}
  }
  @keyframes fllick{
    0%,100%{transform:scaleY(1);opacity:1}
    38%{transform:scaleY(1.16) skewX(1.8deg);opacity:.88}
    66%{transform:scaleY(.9);opacity:1}
  }
}

/* ── tactile micro-physics — things press like objects ── */
.btn:active,.hcta:active,.wl-form button:active{transform:translate(3px,3px)!important;box-shadow:3px 3px 0 var(--ink)!important}
.copy:active{transform:scale(.94)}
@media (prefers-reduced-motion:no-preference){
  .stamp{transition:transform .18s cubic-bezier(.34,1.4,.5,1)}
  .stamp:hover{transform:rotate(-1.2deg) scale(1.02)}
  #demo video{transition:transform .3s cubic-bezier(.25,.9,.3,1.1), box-shadow .3s}
  #demo video:hover{transform:translate(-3px,-3px);box-shadow:13px 13px 0 var(--ink)}
  .creed-item{transition:background .2s}
  .creed-item:hover{background:#fff8ea}
}


/* ══ the shell — the site as a folklore session ══ */
.shell-stage{position:relative;padding:150px clamp(14px,4vw,40px) 96px;z-index:2}
.shell{
  max-width:1060px;margin:0 auto;background:#1d1813;
  border:3px solid var(--ink);border-radius:14px;overflow:hidden;
  box-shadow:16px 16px 0 var(--blue);
}
.tb{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:#26201a;border-bottom:2px solid #0d0b08}
.tb .tl{width:12px;height:12px;border-radius:50%}
.tb .tl.r{background:#ff5f57}.tb .tl.y{background:#febc2e}.tb .tl.g{background:#28c840}
.tb .ttl{margin-left:8px;font-family:var(--mono);font-size:12px;color:#c9bda1}
.tb .tb-r{margin-left:auto;font-family:var(--mono);font-size:11px;color:#8a7c62}
.sbody{padding:38px clamp(20px,4.5vw,58px) 46px;display:flex;flex-direction:column;gap:58px;
  color:#f4ecd8;font-family:var(--mono);font-size:14px;line-height:1.7}
.cmd{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;font-weight:600}
.cmd .pu{color:var(--teal);font-weight:700}
.cmd .pd{color:#8a7c62}
.cmd .ctext{color:var(--yellow);white-space:pre-wrap}
.ccaret{display:inline-block;width:9px;height:16px;background:#f4ecd8;vertical-align:-2px;margin-left:2px;animation:shblink 1s step-end infinite}
@keyframes shblink{50%{opacity:0}}
.blk.done:not(.last) .ccaret{display:none}
.out{margin-top:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media (prefers-reduced-motion:no-preference){
  .blk:not(.done) .out{opacity:0;transform:translateY(10px)}
  .blk.done .out{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.25,.9,.3,1), transform .5s cubic-bezier(.25,.9,.3,1)}
}
.banner{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.sh-hearth{width:88px;height:88px;flex:0 0 auto;border-radius:18px}
.banner h1{font-family:var(--serif);font-weight:800;font-size:clamp(1.9rem,3.8vw,3.2rem);line-height:1.02;letter-spacing:-.02em;color:#f4ecd8;max-width:16ch}
.banner .em-pk{color:var(--pink)}
.tagline{font-size:12px;letter-spacing:.08em;color:var(--teal);text-transform:uppercase;font-weight:700;margin-top:10px}
.olede{font-family:var(--serif);font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;color:#e9dfc7;max-width:56ch;font-weight:430}
.obody{color:#e9dfc7;max-width:60ch}
.ocomment{color:#8a7c62;white-space:pre-wrap}
.obig{font-family:var(--serif);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.05;letter-spacing:-.02em;color:#f4ecd8}
.obig em{color:var(--pink);font-style:italic}
.oline{max-width:66ch}
.oline.t,.olegend .t{color:var(--teal)}
.oline.s,.olegend .s{color:var(--pink)}
.oline.dm{color:#8a7c62}
.oline b{color:#fff}
.kw{color:var(--yellow);font-weight:700}
.ofoot{font-family:var(--serif);font-size:1.1rem;color:#c9bda1}
.ofoot b{color:var(--yellow)}
.olink{color:var(--teal);border-bottom:1px solid rgba(31,174,139,.4);transition:.15s}
.olink:hover{color:var(--pink);border-color:var(--pink)}
.olegend{font-size:12px;color:#8a7c62}
.sh-btn{border:3px solid #f4ecd8;background:transparent;color:#f4ecd8;box-shadow:5px 5px 0 rgba(0,0,0,.85)}
.sh-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 rgba(0,0,0,.85)}
.sh-btn:active{transform:translate(3px,3px)!important;box-shadow:2px 2px 0 rgba(0,0,0,.85)!important}
.sh-btn-primary{background:var(--yellow);color:var(--ink)}
.sh-install{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;font-weight:600;
  border:2px solid #3a3127;background:#26201a;padding:13px 16px;color:#e9dfc7;width:min(560px,100%)}
.sh-install .d{color:var(--pink);font-weight:700}
.sh-install .copy{margin-left:auto;cursor:pointer;background:var(--yellow);color:var(--ink);border:2px solid #0d0b08;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px}
/* ── download — the last block of the session ──
   Lives inside .term, so it speaks mono and ink like the rest of the shell.
   Two routes, never three: the command that works, and the ways around it. */
.dl{display:flex;flex-direction:column;gap:13px;width:min(680px,100%)}
/* The command, the version and the copy button don't fit one line on a 375px
   phone. Let the row wrap, but keep the prompt glued to the command it belongs
   to — wrapping them apart strands a lone `$` on its own line. */
.dl .sh-install{width:100%;flex-wrap:wrap;row-gap:9px}
.dl .dl-line{flex:1 1 auto;min-width:0}
.dl-ver{margin-left:10px;padding:2px 7px;border:1px solid #3a3127;background:#0d0b08;
  color:var(--teal);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* The download itself — the one thing this section exists to do, so it gets the
   yellow and the weight. Everything under it is a footnote to this button. */
.dl-get{display:flex;align-items:center;gap:15px;padding:16px 20px;width:100%;
  border:3px solid var(--ink);background:var(--yellow);color:var(--ink);
  box-shadow:6px 6px 0 rgba(0,0,0,.85);transition:transform .12s,box-shadow .12s,background .12s}
.dl-get:hover{transform:translate(-1px,-1px);box-shadow:8px 8px 0 rgba(0,0,0,.85);background:#ffc93f}
.dl-get:active{transform:translate(3px,3px);box-shadow:2px 2px 0 rgba(0,0,0,.85)}
.dl-get-mark{width:30px;height:30px;flex:none}
.dl-get-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-get-txt b{font-family:var(--mono);font-size:16px;font-weight:800;letter-spacing:.02em}
.dl-get-txt i{font-family:var(--mono);font-size:10.5px;font-weight:600;font-style:normal;
  letter-spacing:.05em;color:rgba(29,24,19,.68)}
.dl-get-arrow{margin-left:auto;flex:none;font-family:var(--mono);font-size:20px;font-weight:800;
  transition:transform .16s cubic-bezier(.16,1,.3,1)}
.dl-get:hover .dl-get-arrow{transform:translateY(3px)}
@media(prefers-reduced-motion:reduce){.dl-get,.dl-get-arrow{transition:none}}

/* The CLI the app talks to. Secondary to the button, but not optional — an app
   without the node behind it does nothing, so it can't be hidden away. */
.dl-need{display:flex;flex-direction:column;gap:8px}
.dl-need-t{font-family:var(--mono);font-size:11px;line-height:1.5;color:#8a7c62}
.dl-os{font-family:var(--mono);font-size:11px;color:#8a7c62;margin-top:-4px}
.dl-os a{color:var(--yellow);font-weight:700}
.dl-os a:hover{color:var(--pink)}
.dl-fine{font-family:var(--mono);font-size:10.5px;line-height:1.6;color:#5c5142}
.dl-fine b{color:#8a7c62;font-weight:700}
.dl-fine a{color:var(--yellow);font-weight:700}
.dl-fine a:hover{color:var(--pink)}

.blk video{width:100%;max-width:880px;display:block;border:2px solid #3a3127;border-radius:10px;background:#0d0b08}
.shell .cascade{margin:0;font-size:clamp(.8rem,.95vw,1rem)}
.shell .cascade .e{color:#5c5142}
.shell .cascade .lbl{color:#c9bda1}
.shell .cascade .ask{color:var(--yellow);font-weight:700}
.shell .cascade .seed{color:var(--pink)}
.shell .cascade .nd{color:var(--teal)}
.shell .cascade .punch{color:var(--yellow);font-weight:700}
.ocreed{display:flex;flex-direction:column;gap:12px;max-width:62ch}
.ocreed p{font-family:var(--serif);font-size:1.08rem;line-height:1.55;color:#e9dfc7}
.ocreed b{color:#f4ecd8}
.ocreed .n{color:var(--pink);font-family:var(--mono);font-weight:800;font-size:.85rem;margin-right:6px}
.orow{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:6px 22px;align-items:baseline;max-width:66ch}
.orow .num{font-family:var(--mono);font-weight:800;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--yellow);font-variant-numeric:tabular-nums}
.orow span:last-child{color:#c9bda1}
.oharness{font-family:var(--serif);font-style:italic;font-size:1.08rem;color:#c9bda1;max-width:60ch}
.sline{display:flex;align-items:center;gap:10px;height:40px;padding:0 18px;background:#26201a;border-top:2px solid #0d0b08;
  font-family:var(--mono);font-size:11.5px;color:#c9bda1;white-space:nowrap;overflow:hidden}
.sline .fk{color:#b9a7ff;font-weight:800}
.sline .sep{color:#3a3127}
.sline b{color:var(--yellow);font-weight:800;font-variant-numeric:tabular-nums}
.sline .slr{margin-left:auto;color:#8a7c62}
@media(max-width:700px){.sline .slr{display:none}.banner h1{font-size:1.7rem}}


/* ══ THE TERMINAL IS THE SITE — full-bleed session ══ */
body.term-home{background:#171310}
body.term-home header{display:none}            /* the titlebar is the chrome here */
body.term-home .depth,body.term-home .grain{display:none}
.term{
  position:relative;background:
    radial-gradient(90% 60% at 78% -5%, rgba(245,185,33,.07), transparent 60%),
    radial-gradient(80% 70% at 10% 108%, rgba(255,79,109,.06), transparent 60%),
    #171310;
  color:#f4ecd8;font-family:var(--mono);
}
.term::after{ /* vignette — you're inside the glass */
  content:'';position:fixed;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(120% 100% at 50% 40%, transparent 62%, rgba(0,0,0,.34));
}
.term-embers{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.6}

/* titlebar — fixed chrome */
.term-tb{
  position:fixed;top:0;left:0;right:0;z-index:80;height:46px;
  display:flex;align-items:center;gap:8px;padding:0 clamp(14px,3vw,26px);
  background:rgba(38,32,26,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:2px solid #0d0b08;font-family:var(--mono);
}
.term-tb .tl{width:12px;height:12px;border-radius:50%}
.term-tb .tl.r{background:#ff5f57}.term-tb .tl.y{background:#febc2e}.term-tb .tl.g{background:#28c840}
.term-tb .ttl{margin-left:10px;font-size:12.5px;color:#c9bda1;font-weight:600}
.term-tb .ttabs{margin-left:auto;display:flex;gap:4px}
.term-tb .ttabs a{
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c9bda1;
  padding:6px 13px;border:1px solid transparent;transition:.15s;
}
.term-tb .ttabs a:hover{color:var(--yellow);border-color:#3a3127;background:#1d1813}
.term-tb .ttabs a.gh{color:var(--ink);background:var(--yellow);border:1px solid #0d0b08;font-weight:800}
.term-tb .ttabs a.gh:hover{background:var(--pink);color:var(--paper)}

/* statusline — fixed pulse */
.term-sl{
  position:fixed;bottom:0;left:0;right:0;z-index:80;height:36px;
  display:flex;align-items:center;gap:10px;padding:0 clamp(14px,3vw,26px);
  background:rgba(38,32,26,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:2px solid #0d0b08;
  font-family:var(--mono);font-size:11.5px;color:#c9bda1;white-space:nowrap;overflow:hidden;
}
.term-sl .fk{color:#b9a7ff;font-weight:800}
.term-sl .sep{color:#3a3127}
.term-sl b{color:var(--yellow);font-weight:800;font-variant-numeric:tabular-nums}
.term-sl .slr{margin-left:auto;color:#8a7c62}
.term-sl .lc{color:#8a7c62}
@media(max-width:760px){.term-sl .slr,.term-sl .slx{display:none}}

/* scenes — each command is a staged moment */
.scene{position:relative;z-index:2;padding:clamp(70px,12vh,150px) clamp(18px,5vw,64px);background:transparent}
.scene .swrap{max-width:1100px;margin:0 auto;width:100%}
.scene.center .swrap{display:flex;justify-content:center}
.scene.center .blk{text-align:left}
.scene.wide .swrap{max-width:1180px}
.hero-scene{min-height:100svh;display:flex;align-items:center;padding-top:120px}
.hero-scene .swrap{width:100%}
.last-scene{padding-bottom:clamp(120px,18vh,220px)}

/* ─────────────────────────────────────────────────────────────
   FADED SCENE ART — the folk clips return as ghosts.
   Background only: masked so the art dissolves into the charcoal on
   every edge — no hard cut — and never crosses the reading column.
   Motion is a slow ken-burns drift — transform/opacity only.
   ───────────────────────────────────────────────────────────── */
.scene>.swrap{position:relative;z-index:1}   /* the reading stays above the art */
.scene-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene-art .art-frame{position:absolute;overflow:hidden;line-height:0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.scene-art .art-media{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transform:scale(1.04);
  animation:art-fade 1.6s cubic-bezier(.16,1,.3,1) both,
            art-drift 48s ease-in-out 1.6s infinite alternate;
  will-change:transform,opacity}
@keyframes art-fade{to{opacity:var(--art-op,.24)}}
@keyframes art-drift{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.1) translate3d(0,1.4%,0)}}

/* hero — the fire clip bled in from the right, dissolving on every edge.
   Masks are literal (no var) so WebKit/Safari renders the fade too. */
.art-right .art-frame{top:-12%;right:-4%;width:min(54%,760px);height:124%;
  -webkit-mask-image:radial-gradient(115% 88% at 88% 50%,#000 6%,rgba(0,0,0,.6) 40%,transparent 74%);
  mask-image:radial-gradient(115% 88% at 88% 50%,#000 6%,rgba(0,0,0,.6) 40%,transparent 74%)}

/* the commons gathering behind "light your fire" — fills the scene and
   dissolves into charcoal at BOTH the top and the bottom (a soft band),
   so there is no hard edge anywhere. */
.art-bottom .art-frame{inset:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 18%,#000 44%,rgba(0,0,0,.45) 70%,transparent 93%);
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.28) 18%,#000 44%,rgba(0,0,0,.45) 70%,transparent 93%)}
.art-bottom .art-media{object-position:50% 66%}

/* a soft charcoal scrim so text keeps contrast over the art */
.scene-art::after{content:'';position:absolute;inset:0}
.scene-art.scrim-r::after{background:linear-gradient(270deg,rgba(23,19,16,.66),rgba(23,19,16,.24) 48%,transparent 74%)}

@media(prefers-reduced-motion:reduce){
  .scene-art .art-media{animation:art-fade 1.6s ease both}
}
@media(max-width:760px){
  .scene-art .art-media{animation:art-fade-m 1.6s ease both}
  @keyframes art-fade-m{to{opacity:calc(var(--art-op,.24) * .62)}}
  .art-right .art-frame{width:min(68%,520px)}
}

/* hero moment */
.banner{display:flex;gap:clamp(18px,3vw,34px);align-items:center;flex-wrap:wrap}
.sh-hearth{width:clamp(72px,9vw,120px);height:auto;flex:0 0 auto;border-radius:22px;
  filter:drop-shadow(0 0 26px rgba(245,185,33,.25))}
.banner h1{font-family:var(--serif);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:.98;letter-spacing:-.025em;color:#f4ecd8;text-wrap:balance}
.banner .em-pk{color:var(--pink)}
.tagline{font-size:clamp(11px,1.1vw,13px);letter-spacing:.14em;color:var(--teal);text-transform:uppercase;font-weight:800;margin-top:6px}
.scroll-cue{margin-top:34px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a7c62;animation:cuefloat 2.4s ease-in-out infinite}
@keyframes cuefloat{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}}

.obig{font-size:clamp(2rem,4.6vw,3.6rem)}

/* the paper document — light inside the dark, the brand inversion */
.paper-scene .out{align-items:center}
.paper-doc{
  background:var(--paper);color:var(--ink);border:3px solid #0d0b08;
  box-shadow:14px 14px 0 rgba(0,0,0,.55);
  padding:clamp(28px,4vw,50px) clamp(26px,4.5vw,58px);
  max-width:660px;transform:rotate(-.6deg);
  font-family:var(--serif);
}
.paper-doc .pd-stamp{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;background:var(--yellow);border:2px solid var(--ink);
  padding:5px 11px;box-shadow:3px 3px 0 var(--ink);margin-bottom:20px;transform:rotate(1deg);
}
.paper-doc .pd-title{font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1;margin:0 0 18px;border:none;padding:0}
.paper-doc .pd-title span{color:var(--pink)}
.paper-doc p{font-size:1.02rem;line-height:1.6;color:var(--muted);margin:0 0 12px}
.paper-doc p b{color:var(--ink)}
.paper-doc .n{font-family:var(--mono);color:var(--pink);font-size:.85rem;margin-right:4px}
.paper-doc .pd-link{font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);border-bottom:2px solid var(--pink)}
@media (prefers-reduced-motion:no-preference){
  .paper-scene .blk.done .paper-doc{animation:paperstamp .55s cubic-bezier(.25,.9,.3,1.14) both}
  @keyframes paperstamp{0%{opacity:0;transform:rotate(-.6deg) scale(1.08)}60%{opacity:1;transform:rotate(-.6deg) scale(.985)}100%{opacity:1;transform:rotate(-.6deg) scale(1)}}
}

/* store + footer become the epilogue outside the glass */
body.term-home #store{border-top:3px solid #0d0b08}


/* ── the live demo — the desktop demo coded into the page ── */
.md{
  position:relative;width:100%;max-width:920px;aspect-ratio:16/10;overflow:hidden;
  border:2px solid #3a3127;border-radius:12px;
  background:
    radial-gradient(85% 70% at 82% 6%, rgba(245,185,33,.10), transparent 55%),
    radial-gradient(75% 85% at 12% 110%, rgba(255,79,109,.12), transparent 60%),
    linear-gradient(160deg,#171310,#241d16 55%,#131009);
  font-family:var(--mono);
}
.md-bar{position:absolute;top:0;left:0;right:0;height:30px;z-index:4;display:flex;align-items:center;gap:14px;
  padding:0 12px;background:rgba(29,24,19,.7);border-bottom:1px solid rgba(244,236,216,.1);
  font-size:11px;color:#e9dfc7}
.md-brand{display:flex;align-items:center;gap:6px;font-weight:700}
.md-brand svg{width:15px;height:15px;border-radius:4px}
.md-mi{opacity:.7}
.md-clock{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.9}
/* the notch — real geometry, miniature */
.md-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6;
  width:130px;height:30px;background:#000;border-radius:0 0 10px 10px;overflow:hidden;
  transition:width .5s cubic-bezier(.32,.9,.28,1.05), height .5s cubic-bezier(.32,.9,.28,1.05), border-radius .5s;
}
.md-notch.open{width:min(400px,80%);height:86px;border-radius:0 0 18px 18px}
.md-notch::before,.md-notch::after{content:'';position:absolute;top:0;width:6px;height:6px}
.md-notch::before{left:-6px;background:radial-gradient(circle at 0 100%, transparent 5.5px, #000 6px)}
.md-notch::after{right:-6px;background:radial-gradient(circle at 100% 100%, transparent 5.5px, #000 6px)}
.md-exp{position:absolute;top:30px;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:0 16px 6px;
  opacity:0;transform:translateY(4px);transition:opacity .3s .12s, transform .3s .12s}
.md-notch.open .md-exp{opacity:1;transform:none}
.md-fire{flex:0 0 auto;border:1px solid rgba(31,174,139,.4)}
.md-notch.serve .md-fire{border-color:rgba(255,79,109,.4)}
.md-txt{min-width:0}
.md-kick{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);display:flex;align-items:center;gap:5px;margin-bottom:2px}
.md-notch.serve .md-kick{color:var(--pink)}
.md-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:0 0 auto}
.md-flow{font-size:11px;font-weight:600;color:#f4ecd8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-flow .who{color:var(--teal);font-weight:700}
.md-notch.serve .md-flow .who{color:var(--pink)}
/* the terminal window inside */
.md-win{position:absolute;left:5%;top:15%;width:62%;bottom:9%;display:flex;flex-direction:column;
  background:#1d1813;border:1px solid #3a3127;border-radius:9px;overflow:hidden;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.8)}
.md-wbar{display:flex;align-items:center;gap:5px;height:24px;padding:0 9px;background:#26201a;border-bottom:1px solid #3a3127}
.md-l{width:8px;height:8px;border-radius:50%}
.md-l.r{background:#ff5f57}.md-l.y{background:#febc2e}.md-l.g{background:#28c840}
.md-wt{margin-left:5px;font-size:9px;color:#8a7c62}
.md-wbody{flex:1;padding:10px 12px;font-size:10.5px;line-height:1.65;color:#e9dfc7;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end}
.md-wbody .q{color:#f4ecd8}.md-wbody .q::before{content:'> ';color:var(--yellow);font-weight:700}
.md-wbody .a{color:#e9dfc7}.md-wbody .a::before{content:'⏺ ';color:var(--teal)}
.md-wbody .r{color:#8a7c62}
.md-wbody .r .t{color:var(--teal)}.md-wbody .r .k{color:var(--yellow);font-weight:700}
.md-wbody .sv{color:var(--pink)}
.md-wbody .ln2{opacity:0;transform:translateY(3px);transition:opacity .25s,transform .25s}
.md-wbody .ln2.on{opacity:1;transform:none}
.md-caret{display:inline-block;width:6px;height:11px;background:#f4ecd8;vertical-align:-1px;animation:shblink 1s step-end infinite}
.md-wsl{display:flex;gap:6px;height:20px;align-items:center;padding:0 10px;background:#26201a;border-top:1px solid #3a3127;
  font-size:8.5px;color:#8a7c62;white-space:nowrap;overflow:hidden}
.md-fk{color:#b9a7ff;font-weight:800}
.md-wsl #mdRep{color:var(--yellow);font-weight:700}
/* mobile: the live demo steps aside — a pointer to GitHub instead */
.md-mob{display:none}
@media(max-width:760px){
  .md{display:none}
  .md-mob{display:block;font-family:var(--mono);font-size:13px;color:#c9bda1;border:2px dashed #3a3127;padding:18px 16px;border-radius:10px}
  .md-mob a{color:var(--teal);border-bottom:1px solid rgba(31,174,139,.4)}
}

/* mobile terminal chrome */
@media(max-width:760px){
  .term-tb{height:42px}
  .term-tb .ttl{font-size:11px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .term-tb .ttabs a{padding:5px 8px;font-size:10px}
  .banner h1{font-size:2rem}
  .scene{padding-left:20px;padding-right:20px}
}


/* ── scene rhythm: stages breathe, transcript flows ── */
.term .scene{min-height:0;padding:clamp(44px,7vh,90px) clamp(18px,5vw,64px)}
.term .scene.stage{min-height:92svh;display:flex;align-items:center}
.term .hero-scene{min-height:100svh}
/* the session spine — every block hangs off the rail */
.term .blk{position:relative;padding-left:32px}
.term .blk::before{content:'';position:absolute;left:6px;top:30px;bottom:4px;width:2px;
  background:linear-gradient(180deg, rgba(31,174,139,.55), rgba(31,174,139,.05))}
.term .blk::after{content:'';position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;
  background:#171310;border:2.5px solid var(--teal)}
.term .blk.done::after{background:var(--teal);box-shadow:0 0 10px rgba(31,174,139,.5)}
/* transcript sits larger, breathes less vertically */
.term .oline{font-size:15px;line-height:1.75}
.term .ocomment{font-size:14.5px}
/* the punch — a composed centerpiece, not a floating headline */
.punchwrap{position:relative;display:inline-block;padding:34px 56px 38px;margin-top:8px}
.punchwrap::before{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:64px;height:5px;background:var(--yellow);border:2px solid #0d0b08;box-shadow:3px 3px 0 rgba(0,0,0,.6)}
.punchwrap .obig{font-size:clamp(2.2rem,5vw,4.2rem);text-align:center}
.punchwrap .orn{position:absolute;width:56px;height:56px;pointer-events:none}
.punchwrap .o1{top:2px;left:-16px;color:var(--yellow);transform:rotate(-14deg);opacity:.9}
.punchwrap .o2{bottom:-6px;right:-22px;color:var(--pink);transform:rotate(10deg);opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .punchwrap .o1{animation:ornspin 26s linear infinite}
  @keyframes ornspin{to{transform:rotate(346deg)}}
}
.scene.center .swrap{justify-content:center}
.scene.center .out{align-items:center}
.scene.center .ocomment{text-align:center}
@media(max-width:760px){.punchwrap{padding:28px 10px 30px}.punchwrap .orn{width:38px;height:38px}.punchwrap .o1{left:-6px}.punchwrap .o2{right:-8px}}


/* ══ directive: rhythm, set-pieces, relit glass ══ */
/* layout variants */
.scene.s-full .swrap.xw{max-width:1240px}
/* prompt voice per intent */
.blk[data-tone="pull"] .ctext{color:var(--teal)}
.blk[data-tone="serve"] .ctext{color:var(--pink)}
.blk[data-tone="proof"] .ctext{color:var(--yellow)}
.blk[data-tone="serve"]::after{border-color:var(--pink)}
.blk[data-tone="serve"].done::after{background:var(--pink);box-shadow:0 0 10px rgba(255,79,109,.5)}
.blk[data-tone="proof"]::after{border-color:var(--yellow)}
.blk[data-tone="proof"].done::after{background:var(--yellow);box-shadow:0 0 10px rgba(245,185,33,.5)}
/* scene tints — pull teal, serve pink, proof warm */
.scene[data-tint]::before{content:'';position:absolute;inset:0;pointer-events:none}
.scene[data-tint="teal"]::before{background:radial-gradient(70% 60% at 30% 40%, rgba(31,174,139,.05), transparent 70%)}
.scene[data-tint="warm"]::before{background:radial-gradient(70% 60% at 50% 45%, rgba(245,185,33,.05), transparent 70%)}
.scene[data-tint="both"]::before{background:
  radial-gradient(50% 60% at 18% 40%, rgba(31,174,139,.06), transparent 70%),
  radial-gradient(50% 60% at 82% 40%, rgba(255,79,109,.06), transparent 70%)}
/* folk shapes inside the glass */
.term-shapes{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.term-shapes .ts{position:absolute;opacity:.05;height:auto;aspect-ratio:1}

/* THE EXCHANGE — the page's one horizontal composition */
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,72px)}
@media(max-width:900px){.xgrid{grid-template-columns:1fr}}
/* paper index card — the answer arrives as an artifact */
.pcard{
  background:var(--paper);color:var(--ink);border:2px solid #0d0b08;
  box-shadow:8px 8px 0 rgba(0,0,0,.5);padding:16px 18px 13px;max-width:400px;
  transform:rotate(-1.1deg);font-family:var(--serif);
}
.blk.done .pcard{animation:paperstamp .5s cubic-bezier(.25,.9,.3,1.14) both}
.pcard .pc-body{font-size:1rem;line-height:1.5}
.pcard .pc-body b{font-family:var(--mono);font-size:.85em;background:#ece0c2;padding:0 4px;border:1px solid rgba(29,24,19,.25)}
.pcard .pc-stamp{
  display:inline-block;margin-top:10px;font-family:var(--mono);font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pink);
  border:2px solid var(--pink);border-radius:3px;padding:3px 8px;transform:rotate(-2deg);opacity:.85;
}
/* peer strip — folk avatars joined by arcs */
.peerstrip{position:relative;margin-top:clamp(30px,5vh,56px);padding-top:8px}
.ps-arcs{position:absolute;left:0;right:0;top:0;width:100%;height:90px}
.ps-arcs .arc{fill:none;stroke-width:1.6;stroke-dasharray:6 7;opacity:.55;animation:arcflow 2.6s linear infinite}
.ps-arcs .a1{stroke:var(--teal)}
.ps-arcs .a2{stroke:var(--pink);animation-direction:reverse}
.ps-arcs .a3{stroke:var(--yellow);opacity:.3;animation-duration:4s}
@keyframes arcflow{to{stroke-dashoffset:-26}}
.ps-nodes{display:flex;justify-content:space-between;max-width:1000px;margin:0 auto;padding:56px 6% 0}
.ps-n{display:flex;flex-direction:column;align-items:center;gap:7px}
.ps-n svg{width:38px;height:38px;color:#c9bda1;opacity:.9}
.ps-n.you svg{color:var(--yellow);filter:drop-shadow(0 0 10px rgba(245,185,33,.4))}
.ps-n i{font-family:var(--mono);font-size:11px;font-style:normal;color:#8a7c62}
.ps-n.you i{color:var(--yellow);font-weight:700}
.ps-cap{text-align:center;margin-top:22px;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:#c9bda1}
.ps-cap b{color:#f4ecd8;font-style:normal}

/* TREE — monumental */
.cascade.big{font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:2;margin:0 auto;width:fit-content}
.cascade.big .lbl{color:#e9dfc7}
.nsym{display:inline-block;vertical-align:-4px}
.nsym svg{width:21px;height:21px;color:var(--teal)}
.nsym.seed svg{width:24px;height:24px;color:var(--yellow);filter:drop-shadow(0 0 8px rgba(245,185,33,.45))}
.cascade.big .cl:nth-child(3) .nsym svg{color:var(--pink)}
.cascade.big .cl:nth-child(6) .nsym svg{color:var(--yellow)}
/* draw on reveal, not ambient loop */
.blk .cascade .cl{opacity:0;transform:translateX(-8px)}
.blk.done .cascade .cl{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.25,.9,.3,1), transform .45s cubic-bezier(.25,.9,.3,1);transition-delay:calc(var(--i) * .18s)}
.treepunch{text-align:center;margin-top:34px;font-size:clamp(2rem,4.4vw,3.6rem)}
.treepunch em{color:var(--teal);font-style:italic}

/* LEDGER — broadsheet numerals */
.ledger{gap:0!important;width:100%}
.lrow{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:14px 40px;align-items:baseline;
  width:100%;padding:26px 0;border-bottom:1px solid rgba(244,236,216,.12)}
.lrow:first-child{border-top:1px solid rgba(244,236,216,.12)}
.lnum{font-family:var(--serif);font-weight:800;font-size:clamp(3rem,7.5vw,6rem);line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lnum i{font-style:normal;font-size:.55em;vertical-align:.14em;margin:0 .04em}
.lnum.yl{color:var(--yellow)}.lnum.pk{color:var(--pink)}.lnum.tl{color:var(--teal)}.lnum.pp{color:#f4ecd8}
.lcap{font-family:var(--mono);font-size:13.5px;color:#c9bda1;line-height:1.7;max-width:52ch}
@media(max-width:760px){.lrow{grid-template-columns:1fr;gap:6px}.lnum{font-size:2.6rem}}

/* ONBOARD — the fair arrives */
.stampwall{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:640px;margin:26px auto 8px}
.hstamp{
  font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#e9dfc7;border:2px solid #5c5142;padding:8px 14px;background:rgba(38,32,26,.6);
  transform:rotate(var(--r,-1.4deg));opacity:0;
}
.hstamp:nth-child(2n){--r:1.2deg}
.hstamp:nth-child(3n){--r:-.6deg}
.hstamp.y{border-color:var(--yellow);color:var(--yellow)}
.hstamp.p{border-color:var(--pink);color:var(--pink)}
.blk.done .hstamp{animation:stampin .4s cubic-bezier(.25,.9,.3,1.2) both}
.blk.done .hstamp:nth-child(1){animation-delay:.1s}.blk.done .hstamp:nth-child(2){animation-delay:.2s}
.blk.done .hstamp:nth-child(3){animation-delay:.3s}.blk.done .hstamp:nth-child(4){animation-delay:.4s}
.blk.done .hstamp:nth-child(5){animation-delay:.5s}.blk.done .hstamp:nth-child(6){animation-delay:.6s}
.blk.done .hstamp:nth-child(7){animation-delay:.7s}.blk.done .hstamp:nth-child(8){animation-delay:.8s}
.blk.done .hstamp:nth-child(9){animation-delay:.9s}
@keyframes stampin{0%{opacity:0;transform:rotate(var(--r,-1.4deg)) scale(1.5)}70%{opacity:1;transform:rotate(var(--r,-1.4deg)) scale(.96)}100%{opacity:1;transform:rotate(var(--r,-1.4deg)) scale(1)}}
/* the ticket */
.ticket{
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  background:var(--paper);color:var(--ink);font-weight:600;border:2px dashed var(--ink);
  padding:12px 18px;max-width:560px;margin:22px auto 6px;transform:rotate(.8deg);
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;
}
.blk.done .ticket{animation:paperstamp .5s .9s cubic-bezier(.25,.9,.3,1.14) both;opacity:0}
.tk-stamp{
  font-weight:800;font-size:13px;letter-spacing:.16em;color:var(--teal);
  border:2.5px solid var(--teal);border-radius:4px;padding:4px 10px;transform:rotate(-4deg);flex:0 0 auto;
}


/* ── chapter contrast: scenes are different rooms ── */
.scene.band-deep{background:#0d0b08;border-top:1px solid rgba(244,236,216,.07);border-bottom:1px solid rgba(244,236,216,.07)}
.scene.band-lift{background:#211a13;border-top:1px solid rgba(244,236,216,.09);border-bottom:1px solid rgba(244,236,216,.09)}
.scene.band-deep[data-tint]::before,.scene.band-lift[data-tint]::before{mix-blend-mode:screen}

/* ── the demo, dominant ── */
.demo-scene .out{align-items:center;width:100%}
.md{max-width:1180px;border-width:3px;border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
.md-bar{height:38px;font-size:13px;padding:0 16px;gap:18px}
.md-brand svg{width:19px;height:19px}
.md-notch{width:170px;height:38px;border-radius:0 0 12px 12px}
.md-notch.open{width:min(340px,60%);height:84px;border-radius:0 0 18px 18px}
.md-exp{top:38px;gap:9px;padding:0 14px 6px}
.md-fire{width:28px;height:28px;border-radius:8px}
.md-kick{font-size:8.5px;margin-bottom:2px}
.md-flow{font-size:11px}
.md-win{left:5%;top:16%;width:60%;bottom:8%;border-radius:11px}
.md-wbar{height:30px;gap:6px;padding:0 12px}
.md-l{width:10px;height:10px}
.md-wt{font-size:11px}
.md-wbody{font-size:13px;line-height:1.7;padding:14px 16px}
.md-caret{width:8px;height:14px}
.md-wsl{height:26px;font-size:10.5px;gap:8px;padding:0 12px}


/* ── the reckoning goes broadsheet — the footer's yellow, mid-story ── */
.scene.ledger-scene{background:var(--yellow);border-top:3px solid #0d0b08;border-bottom:3px solid #0d0b08}
.ledger-scene::before{display:none}
.ledger-scene .cmd .pu{color:var(--ink)}
.ledger-scene .cmd .pd{color:var(--muted)}
.ledger-scene .cmd .ctext,.ledger-scene .blk[data-tone="proof"] .ctext{color:var(--ink)}
.ledger-scene .ccaret{background:var(--ink)}
.ledger-scene .blk::before{background:linear-gradient(180deg, rgba(29,24,19,.45), rgba(29,24,19,.05))}
.ledger-scene .blk::after{border-color:var(--ink);background:var(--yellow)}
.ledger-scene .blk.done::after{background:var(--ink);box-shadow:none}
.ledger-scene .lrow{border-color:rgba(29,24,19,.3)}
.ledger-scene .lnum.yl{color:var(--ink)}
.ledger-scene .lnum.pk{color:var(--pink)}
.ledger-scene .lnum.tl{color:var(--blue)}
.ledger-scene .lnum.pp{color:var(--ink)}
.ledger-scene .lcap,.ledger-scene .lrow span:last-child{color:var(--muted)}
.ledger-scene .olink{color:var(--ink);border-color:rgba(29,24,19,.4)}
.ledger-scene .olink:hover{color:var(--pink);border-color:var(--pink)}


/* stars in the terminal github tab */
.tbstars{display:inline-flex;align-items:center;gap:3px;margin:0 2px;padding:1px 7px;border-radius:999px;background:rgba(13,11,8,.35);font-size:10px}
.tbstars b{font-weight:800;font-variant-numeric:tabular-nums}

/* ── the demo, pocket-size: reflows on mobile instead of hiding ── */
@media(max-width:760px){
  .md{display:block;aspect-ratio:4/5;max-width:100%}
  .md-mob{display:none}
  .md-bar{height:26px;font-size:9.5px;gap:9px;padding:0 9px}
  .md-mi{display:none}
  .md-brand img{width:12px;height:12px}
  .md-notch{width:96px;height:26px;border-radius:0 0 8px 8px}
  .md-notch.open{width:min(300px,90%);height:72px;border-radius:0 0 14px 14px}
  .md-exp{top:26px;gap:8px;padding:0 12px 5px}
  .md-fire{width:24px;height:24px}
  .md-kick{font-size:7.5px}
  .md-flow{font-size:10px}
  .md-win{left:4%;right:4%;width:auto;top:17%;bottom:5%}
  .md-wbar{height:24px}
  .md-wt{font-size:9px}
  .md-wbody{font-size:11px;line-height:1.6;padding:10px 11px}
  .md-wsl{font-size:8px;gap:5px;padding:0 8px}
}

@media(max-width:760px){
  .term-tb .ttabs{gap:2px}
  .term-tb .ttabs a{padding:4px 6px;font-size:9.5px;white-space:nowrap;display:inline-flex;align-items:center}
  .tbstars{margin:0 1px;padding:1px 5px;font-size:9px}
}