/* The Golden Thread. Plain CSS, no frameworks. */
:root{
  --paper:#F6F1E7; --paper-2:#EFE5D2; --card:#FFFBF3; --ink:#1D1A16; --ink-2:#4A4238; --muted:#5E554B;
  --line:#D8CCB6; --line-soft:#E8DFCE;
  --gold:#C8861E; --gold-soft:#EBD3A4; --gold-wash:#F3E7D2; --gold-ink:#8C5810;
  --how:#8A7F70; --what:#BDB09A;
  --focus:#8A4B1F; --ok:#2F6B3A; --warn:#8A3B12;
  --serif:"Spectral", "Iowan Old Style", Georgia, serif;
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:14px; --shadow:0 1px 0 rgba(29,26,22,.04), 0 6px 24px -12px rgba(29,26,22,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#17140F; --paper-2:#1F1A14; --card:#221C15; --ink:#F3ECDF; --ink-2:#D9CFBF; --muted:#A99E8F;
  --line:#3A3229; --line-soft:#2A231B;
  --gold:#E7A93B; --gold-soft:#5A4320; --gold-wash:#2A2219; --gold-ink:#E7A93B;
  --how:#8A7F70; --what:#5A5145; --pvg:#7A520C; --focus:#E7A93B; --ok:#7FC58A; --warn:#F0A07A;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#17140F; --paper-2:#1F1A14; --card:#221C15; --ink:#F3ECDF; --ink-2:#D9CFBF; --muted:#A99E8F;
    --line:#3A3229; --line-soft:#2A231B;
    --gold:#E7A93B; --gold-soft:#5A4320; --gold-wash:#2A2219; --gold-ink:#E7A93B;
    --how:#8A7F70; --what:#5A5145; --pvg:#7A520C; --focus:#E7A93B; --ok:#7FC58A; --warn:#F0A07A;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:80px}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--sans); font-feature-settings:"kern"; -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:var(--gold-ink); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:var(--paper); padding:10px 14px; border-radius:8px; z-index:50; text-decoration:none}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2rem, 1.4rem + 2.6vw, 3.2rem)}
h2{font-size:clamp(1.45rem, 1.2rem + 1vw, 1.9rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.serif{font-family:var(--serif)}
.eyebrow{font:600 .78rem/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem}
.eyebrow b{color:var(--gold-ink); font-weight:700}
.lede{font-family:var(--serif); font-size:1.18rem; line-height:1.55; color:var(--ink-2); max-width:38em}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* Header */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft)}
.top-in{max-width:1240px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:12px}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:600 1.08rem/1 var(--serif); min-height:44px}
.mark svg{width:26px; height:26px}
.top nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.top nav a,.icon-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 12px; border-radius:10px; color:var(--ink-2); text-decoration:none; font:500 .95rem/1 var(--sans); background:none; border:0; cursor:pointer; white-space:nowrap}
.top nav a:hover,.icon-btn:hover{background:var(--paper-2); color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--gold)}
.icon-btn svg{width:20px; height:20px}

/* Buttons and fields */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 18px; border-radius:999px; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); font:600 .98rem/1 var(--sans); cursor:pointer; text-decoration:none; transition:transform .15s var(--ease), background .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.gold{background:var(--gold); border-color:var(--gold); color:#1D1A16}
.btn.small{min-height:44px; padding:0 14px; font-size:.9rem}
.btn[disabled]{opacity:.45; cursor:not-allowed; transform:none}
.linkbtn{background:none; border:0; padding:0 4px; min-height:44px; color:var(--gold-ink); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
label{display:block; font:600 .95rem/1.35 var(--sans); margin:0 0 6px}
.hint{display:block; font-weight:400; color:var(--muted); font-size:.88rem; margin-top:2px}
input[type=text],textarea{width:100%; font:400 1rem/1.5 var(--sans); color:var(--ink); background:var(--card); border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; transition:border-color .15s, box-shadow .15s}
textarea{min-height:110px; resize:vertical; font-family:var(--serif); font-size:1.05rem}
input[type=text]:focus,textarea:focus{outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent)}
::placeholder{color:color-mix(in srgb, var(--muted) 80%, transparent)}
.field{margin:0 0 20px}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.choice{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; font-weight:500; min-height:48px}
.choice input{margin-top:4px; width:20px; height:20px; accent-color:var(--gold-ink)}
.choice:has(input:checked){border-color:var(--gold); background:var(--gold-wash)}
.choice:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}

/* Layout */
main{display:block}
.wrap{max-width:1240px; margin:0 auto; padding:0 20px}
.intro{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:56px 0 24px}
.intro h1{max-width:13em}
.hero-fig{position:relative}
.paths{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:12px 0 28px}
.path{display:flex; flex-direction:column; gap:8px; text-align:left; padding:22px; border-radius:var(--r); border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font:inherit; box-shadow:var(--shadow); transition:border-color .2s, transform .2s var(--ease)}
.path:hover{border-color:var(--gold); transform:translateY(-2px)}
.path h2{font-size:1.35rem; margin:0}
.path .meta{font:600 .8rem/1.3 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--gold-ink)}
.path p{margin:0; color:var(--ink-2)}
.resume{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:16px 18px; border-radius:var(--r); background:var(--gold-wash); border:1px solid var(--gold-soft); margin:0 0 20px}
.resume p{margin:0}
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:28px 0 56px; border-top:1px solid var(--line-soft)}
.strip h3{font-size:1.05rem; margin-bottom:.3em}
.strip p{color:var(--ink-2); font-size:.97rem; margin:0}

.flow{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; padding:32px 0 64px; align-items:start}
.step{max-width:680px; min-width:0}
.step-head{margin-bottom:22px}
.aside{position:sticky; top:84px; display:flex; flex-direction:column; gap:16px}
.mini{display:none}
.panel{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.steps-list{list-style:none; margin:0; padding:0; counter-reset:s}
.steps-list li{counter-increment:s}
.steps-list a{display:flex; align-items:center; gap:10px; padding:6px 8px; min-height:44px; border-radius:8px; color:var(--ink-2); text-decoration:none; font-size:.93rem}
.steps-list a::before{content:counter(s); flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--line); font:600 .75rem/1 var(--sans); color:var(--muted)}
.steps-list a.done::before{background:var(--gold-soft); border-color:var(--gold); color:var(--ink)}
.steps-list a[aria-current="step"]{background:var(--paper-2); color:var(--ink); font-weight:600}
.steps-list a[aria-current="step"]::before{background:var(--gold); border-color:var(--gold); color:#1D1A16}
.steps-list a:hover{background:var(--paper-2)}
.progress{height:4px; background:var(--line-soft); border-radius:4px; overflow:hidden; margin:0 0 18px}
.progress span{display:block; height:100%; background:var(--gold); width:0; transition:width .5s var(--ease)}
.stepnav{display:flex; justify-content:space-between; gap:12px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line-soft)}
.saved{font-size:.85rem; color:var(--muted); min-height:1.3em; margin-top:8px}

/* Callouts and notes */
.callout{border-left:3px solid var(--gold); background:var(--gold-wash); padding:14px 16px; border-radius:0 12px 12px 0; margin:0 0 22px}
.callout p:last-child{margin:0}
.callout.plain{background:var(--paper-2); border-left-color:var(--line)}
.quote{font-family:var(--serif); font-style:italic; font-size:1.08rem; color:var(--ink-2); margin:0 0 6px}
.cite{font-size:.85rem; color:var(--muted)}
.notes{margin-top:36px; border-top:1px solid var(--line-soft); padding-top:14px}
.notes summary{cursor:pointer; font:600 .9rem/1.3 var(--sans); color:var(--ink-2); min-height:44px; display:flex; align-items:center; gap:8px}
.notes summary::marker{color:var(--gold)}
.notes ol{margin:8px 0 0; padding-left:22px; font-size:.92rem; color:var(--ink-2)}
.notes li{margin-bottom:8px}
.flag{display:inline-block; font:700 .75rem/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:5px; background:var(--paper-2); color:var(--warn); border:1px solid var(--line); vertical-align:2px; margin-left:4px}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); font:500 .92rem/1.25 var(--sans); cursor:pointer; text-align:left; animation:pop .35s var(--ease) both}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold-soft); border-color:var(--gold)}
.chip .n{font-size:.75rem; color:var(--muted); font-weight:600}
@keyframes pop{from{opacity:0; transform:scale(.92)}to{opacity:1; transform:none}}

/* Prompt cards */
.prompts{display:grid; gap:10px; margin:0 0 24px}
.prompt{display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%; padding:14px 16px; border-radius:12px; border:1.5px dashed var(--line); background:transparent; color:var(--ink); font:400 1rem/1.45 var(--serif); cursor:pointer}
.prompt:hover{border-color:var(--gold); border-style:solid; background:var(--card)}
.prompt .plus{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--gold-soft); color:var(--ink); font:600 1rem/1 var(--sans)}
.prompt small{display:block; font:500 .78rem/1.3 var(--sans); color:var(--muted); margin-top:4px}

/* Story cards */
.story{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:18px; margin:0 0 16px; box-shadow:var(--shadow); animation:rise .45s var(--ease) both}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.story-head{display:flex; gap:10px; align-items:center; margin-bottom:12px}
.story-head .dot{width:14px; height:14px; border-radius:50%; background:var(--gold); flex:none; box-shadow:0 0 0 4px var(--gold-wash)}
.story-head input{font:600 1.1rem/1.3 var(--serif)}
.story .prompt-q{font:italic 400 .98rem/1.45 var(--serif); color:var(--muted); margin:0 0 12px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.two .field{margin-bottom:14px}
.story textarea{min-height:96px}
.dig{display:flex; gap:10px; align-items:flex-start; background:var(--paper-2); border-radius:10px; padding:10px 12px; margin:-4px 0 14px; font-size:.92rem}
.dig p{margin:0; flex:1; font-family:var(--serif); font-size:1rem}
.story-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap}
.counter{font:600 .9rem/1.3 var(--sans); color:var(--gold-ink)}

/* Themes */
.src-list{display:grid; gap:12px; margin:0 0 20px}
.src{background:var(--card); border:1px solid var(--line-soft); border-radius:12px; padding:14px 16px}
.src h3{font-size:1rem; margin:0 0 6px; display:flex; gap:8px; align-items:center}
.src h3 .dot{width:10px; height:10px; border-radius:50%; background:var(--gold)}
.src-text{font:400 1rem/1.6 var(--serif); color:var(--ink-2); margin:0}
.src-text mark{background:var(--gold-soft); color:var(--ink); border-radius:3px; padding:0 2px; box-shadow:0 0 0 1px var(--gold); transition:background .3s}
.selbar{position:sticky; bottom:12px; z-index:5; display:flex; gap:10px; align-items:center; flex-wrap:wrap; background:var(--ink); color:var(--paper); padding:10px 12px; border-radius:14px; margin:0 0 20px; box-shadow:var(--shadow)}
.selbar input{flex:1 1 180px; background:transparent; color:var(--paper); border-color:color-mix(in srgb, var(--paper) 35%, transparent)}
.selbar input::placeholder{color:color-mix(in srgb, var(--paper) 70%, transparent)}
.selbar .btn{background:var(--gold); border-color:var(--gold); color:#1D1A16}
.theme{display:grid; gap:8px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--card); margin:0 0 10px; animation:rise .35s var(--ease) both}
.theme.active{border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash)}
.theme-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.theme-name{font:600 1.05rem/1.3 var(--serif); flex:1; min-width:8em; background:none; border:0; color:var(--ink); text-align:left; cursor:pointer; padding:8px 0; min-height:44px}
.star{min-width:44px; min-height:44px; border-radius:10px; border:1.5px solid var(--line); background:transparent; cursor:pointer; color:var(--muted); display:grid; place-items:center}
.star svg{width:20px; height:20px}
.star[aria-pressed="true"]{background:var(--gold); border-color:var(--gold); color:#1D1A16}
.theme .chips{margin:0}
.theme .chip{min-height:44px; font-size:.85rem; padding:4px 10px}
.del{min-width:44px; min-height:44px; border-radius:10px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1.3rem; line-height:1}
.del:hover{background:var(--paper-2); color:var(--warn)}
.thread-fig{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:8px; margin:0 0 20px}
.thread-fig figcaption{font-size:.85rem; color:var(--muted); padding:4px 8px 6px}

/* Why builder */
.builder{display:grid; gap:12px; margin:0 0 18px}
.builder .lead{font:600 1.05rem/1 var(--serif); color:var(--gold-ink); min-width:4.5em}
.bline{display:flex; gap:12px; align-items:flex-start}
.bline .lead{padding-top:13px}
.bline textarea{min-height:64px}
.preview{position:relative; padding:28px 24px; border-radius:var(--r); background:var(--ink); color:var(--paper); margin:0 0 20px; overflow:hidden}
.preview p{font:400 clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem)/1.35 var(--serif); margin:0; position:relative}
.preview .blank{color:color-mix(in srgb, var(--paper) 50%, transparent); border-bottom:1.5px dashed color-mix(in srgb, var(--paper) 50%, transparent)}
.preview .w{color:var(--pvg,#E9C979)}
.preview .lab{font:600 .75rem/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb, var(--paper) 72%, transparent); margin-bottom:12px; display:block; position:relative}
.preview svg.bg{position:absolute; right:-60px; top:-60px; width:240px; height:240px; opacity:.16}
.checks{display:grid; gap:8px; margin:0 0 18px}
.check{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:10px; border:1px solid var(--line-soft); background:var(--card); cursor:pointer; min-height:44px}
.check input{width:20px; height:20px; margin-top:2px; accent-color:var(--gold-ink); flex:none}
.check span small{display:block; color:var(--muted); font-size:.85rem}
.nudge{font-size:.92rem; color:var(--warn); margin:6px 0 0}
.refs{display:grid; gap:10px; margin:0 0 18px}
.ref{padding:12px 14px; border-radius:10px; background:var(--paper-2)}
.ref p{margin:0; font:400 1.02rem/1.45 var(--serif)}

/* HOWs */
.how-row{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:12px; border-radius:12px; background:var(--card); border:1px solid var(--line-soft); margin:0 0 10px; animation:rise .35s var(--ease) both}
.how-row .num{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); font:600 .85rem/1 var(--sans); margin-top:8px}
.how-row .stack{display:grid; gap:8px}
.how-row input.big{font:600 1.05rem/1.3 var(--serif)}

/* Celery */
.celery-add{display:flex; gap:10px; margin:0 0 14px}
.celery-add input{flex:1}
.baskets{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 14px}
.basket{border-radius:var(--r); padding:14px; min-height:120px; border:1.5px dashed var(--line)}
.basket.keep{border-color:var(--gold); background:var(--gold-wash)}
.basket h3{font:600 .8rem/1.3 var(--sans); letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px}
.basket ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.basket li{font:400 .98rem/1.35 var(--serif); padding:6px 10px; border-radius:8px; background:var(--card); animation:rise .4s var(--ease) both}
.c-item{display:grid; grid-template-columns:1fr; gap:8px; padding:12px; border-radius:12px; background:var(--card); border:1px solid var(--line-soft); margin:0 0 10px}
.c-item p{margin:0; font:600 1rem/1.35 var(--serif)}
.seg{display:flex; flex-wrap:wrap; gap:6px}
.seg button{min-height:44px; padding:0 12px; border-radius:999px; border:1.5px solid var(--line); background:transparent; color:var(--ink); font:500 .86rem/1 var(--sans); cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* Final */
.poster-wrap{background:var(--paper-2); border-radius:var(--r); padding:16px; margin:0 0 18px}
.poster-wrap svg{width:100%; height:auto; border-radius:8px; box-shadow:var(--shadow)}
.dl{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px}
.summary h3{margin-top:1.4em}
.summary ul{padding-left:20px}
.summary .stmt{font:400 1.5rem/1.35 var(--serif); margin:0 0 .6em}
.danger{border-top:1px solid var(--line-soft); margin-top:28px; padding-top:16px}

/* Explainer */
.essay{max-width:760px; padding:40px 0 64px}
.essay section{margin:0 0 48px}
.toggle{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; padding:3px; gap:3px; margin:0 0 14px}
.toggle button{min-height:44px; padding:0 14px; border-radius:999px; border:0; background:transparent; color:var(--ink-2); font:600 .9rem/1 var(--sans); cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.fig{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r); padding:18px; margin:0 0 16px}
.fig-grid{display:grid; grid-template-columns:260px 1fr; gap:22px; align-items:center}
.ring-tabs{display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap}
.def{min-height:7.5em}
.isnt{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.isnt li{padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line-soft)}
.isnt b{font-family:var(--serif); font-size:1.06rem}
.src-full li{margin-bottom:10px}
.example-banner{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:28px 0 8px}
.ro{display:inline-block; font:700 .75rem/1 var(--sans); letter-spacing:.08em; text-transform:uppercase; padding:6px 8px; border-radius:6px; background:var(--ink); color:var(--paper)}

/* Diagram */
.dia text{font-family:var(--sans)}
.dia .ring{transition:fill .6s var(--ease), stroke .4s, stroke-width .4s}
.dia .ring-draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw 1.1s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dia .lab{font:700 11px/1 var(--sans); letter-spacing:.14em; fill:var(--muted)}
.dia .lab.on{fill:var(--gold-ink)}
.dia .core-text{font-family:var(--serif); fill:var(--ink)}
.dia .nug{transform-box:fill-box; transform-origin:center; animation:nug .6s var(--ease) both}
@keyframes nug{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.dia .thr{fill:none; stroke:var(--gold); stroke-linecap:round; stroke-dasharray:400; stroke-dashoffset:400; animation:thr 1.2s var(--ease) forwards}
@keyframes thr{to{stroke-dashoffset:0}}
.dia .arc-t{font:600 11.5px/1 var(--sans); fill:var(--ink-2)}
.dia .fade{animation:fadein .7s var(--ease) both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.dia .pulse{fill:none; stroke:var(--gold); stroke-width:2; opacity:0}
.hero-fig .dia .pulse{animation:pulse 5.5s var(--ease) infinite}
@keyframes pulse{0%{r:20; opacity:.0}10%{opacity:.8}60%{r:200; opacity:0}100%{r:200; opacity:0}}
.dia-cap{font-size:.85rem; color:var(--muted); margin:8px 2px 0; text-align:center}
.brain .layer{transition:fill .5s var(--ease), opacity .5s}
.brain .flowdot{fill:var(--gold)}

/* Toast */
.toast{position:fixed; left:50%; top:76px; transform:translate(-50%, -12px); background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:12px; font-size:.95rem; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); z-index:60; max-width:calc(100% - 32px)}
.toast.show{opacity:1; transform:translate(-50%,0)}

footer.foot{border-top:1px solid var(--line-soft); padding:24px 0 40px; color:var(--muted); font-size:.88rem}
footer.foot p{margin:0 0 6px; max-width:60em}
.guide{max-width:720px; padding:36px 0 64px}
.guide ol.big{padding-left:22px}
.guide ol.big > li{margin-bottom:18px}
.say{display:block; font:400 1.12rem/1.45 var(--serif); background:var(--card); border-left:3px solid var(--gold); padding:10px 14px; border-radius:0 10px 10px 0; margin:8px 0}
#printRoot{display:none}

@media (max-width: 1000px){
  .flow{grid-template-columns:minmax(0,1fr); gap:0}
  .aside{display:none}
  .mini{display:flex; gap:14px; align-items:center; margin:0 0 18px}
  .mini svg{width:96px; height:96px; flex:none}
  .intro{grid-template-columns:1fr; gap:12px; padding-top:28px}
  .hero-fig{max-width:380px; margin:0 auto; width:100%}
  .strip{grid-template-columns:1fr; gap:18px}
}
@media (max-width: 640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .paths{grid-template-columns:1fr}
  .two,.baskets{grid-template-columns:1fr}
  .fig-grid{grid-template-columns:1fr}
  .top nav a.hide-sm{display:none}
  .mark span{font-size:1rem}
  .bline{flex-direction:column; gap:4px}
  .bline .lead{padding-top:0}
  .stepnav .btn{flex:1}
  .hero-fig{max-width:260px}
  .steps-list a{min-height:44px}
  .preview{padding:22px 18px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .dia .ring-draw,.dia .thr{stroke-dashoffset:0!important; animation:none!important}
  .hero-fig .dia .pulse{animation:none!important; opacity:0!important}
  .chip{animation:none!important}
}
@media print{
  @page{margin:16mm}
  body{background:#fff; color:#000; font-size:11pt}
  .top,.skip,footer.foot,#app,.toast{display:none!important}
  #printRoot{display:block!important}
  #printRoot svg{max-width:120mm; margin:0 auto 8mm}
  #printRoot h1{font-size:22pt}
  #printRoot h2{font-size:14pt; margin-top:8mm}
  #printRoot a{color:#000}
  .stmt{font-size:16pt}
  .noprint{display:none!important}
}

/* Additions */
.path .h{font:600 1.35rem/1.2 var(--serif)}
.path .p{color:var(--ink-2)}
.h3{font-size:1.05rem; margin-bottom:.3em}
.thread-fig .thr{stroke-dasharray:400; stroke-dashoffset:400; animation:thr 1.2s var(--ease) forwards}
.sum{cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--ink-2); font-weight:600}
.mini details{margin-top:2px}
.mini .steps-list{margin-top:6px}
@media (max-width: 1000px){ .wide-only{display:none} }
@media (prefers-reduced-motion: reduce){ .thread-fig .thr{stroke-dashoffset:0!important; animation:none!important} }

h1[tabindex="-1"]:focus{outline:none}
@media(max-width:400px){.top nav a,.icon-btn{padding:0 8px}.mark span{font-size:.95rem}}
.mini svg text{display:none}
.dia .core-text{paint-order:stroke; stroke:var(--gold-wash); stroke-width:3.5px; stroke-linejoin:round}

/* ---------- v2: workshop shell ---------- */
.ws{padding-top:20px}
.modebar{display:inline-flex; padding:4px; gap:4px; border-radius:999px; background:var(--paper-2); border:1px solid var(--line-soft); margin:0 0 14px}
.modebar a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; color:var(--ink-2); text-decoration:none; font:600 .92rem/1 var(--sans)}
.modebar a[aria-current="page"]{background:var(--card); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12), inset 0 0 0 1px var(--line-soft)}
.modebar a:hover{color:var(--ink)}
.tabs ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; border-bottom:1px solid var(--line-soft); padding-bottom:10px}
.tab{display:flex; align-items:center; gap:10px; min-height:52px; padding:6px 10px; border-radius:12px; color:var(--ink-2); text-decoration:none; font:500 .95rem/1.2 var(--sans); position:relative}
.tab:hover{background:var(--paper-2); color:var(--ink)}
.tab .n{flex:none; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); font:600 .8rem/1 var(--sans); color:var(--muted)}
.tab .n svg{width:14px; height:14px}
.tab.done .n{background:var(--gold-soft); border-color:var(--gold); color:var(--ink)}
.tab[aria-current="step"]{color:var(--ink); font-weight:600; background:var(--card); box-shadow:inset 0 0 0 1px var(--line-soft)}
.tab[aria-current="step"] .n{background:var(--gold); border-color:var(--gold); color:#1D1A16}
.tab[aria-current="step"]::after{content:""; position:absolute; left:12px; right:12px; bottom:-11px; height:2px; background:var(--gold); border-radius:2px}
.exbar{display:flex; gap:12px 20px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:16px 0 0; padding:14px 16px; border-radius:var(--r); background:var(--gold-wash); border:1px solid var(--gold-soft)}
.exbar p{margin:0; flex:1 1 360px; font-size:.93rem; color:var(--ink-2)}
.exbar .ro{margin-right:6px; vertical-align:1px}
.ewhy .ew-s{margin:0; font:400 1.12rem/1.4 var(--serif); color:var(--ink)}
.ewhy .w{color:var(--gold-ink); font-weight:600}
.ewhy .blank{color:var(--muted); border-bottom:1.5px dashed var(--line)}
.ewhy .ew-s.muted{color:var(--muted); font-size:1rem}
.panel.ew{border-left:3px solid var(--gold)}
.aside .def p{margin:10px 0 0}
.aside .ring-tabs{display:flex; gap:6px; margin-top:10px}
.aside .ring-tabs .chip{flex:1; justify-content:center}
.mobile-only{display:none}
/* home */
.cta{margin:22px 0 10px}
.hiw{padding:8px 0 32px}
.hiw-list{list-style:none; margin:12px 0 14px; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.hiw-list li{display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:var(--r); background:var(--card); border:1px solid var(--line-soft)}
.hiw-list .n{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--gold-wash); color:var(--gold-ink); font:700 .85rem/1 var(--sans); margin-bottom:4px}
.hiw-list b{font:600 1.02rem/1.3 var(--serif)}
.hiw-list span:last-child{color:var(--ink-2); font-size:.93rem; line-height:1.45}
.hiw-list.compact{grid-template-columns:1fr; gap:0; border:1px solid var(--line-soft); border-radius:var(--r); background:var(--card)}
.hiw-list.compact li{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px; border:0; border-bottom:1px solid var(--line-soft); border-radius:0; background:none; padding:12px 16px}
.hiw-list.compact li:last-child{border-bottom:0}
.hiw-list.compact .n{margin:0; width:24px; height:24px; font-size:.78rem}
.hiw-list.compact b{min-width:5.5em}
/* start: ring cards */
.rings3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:6px 0 14px}
.ringcard{display:flex; flex-direction:column; gap:6px; text-align:left; padding:14px; border-radius:var(--r); border:1.5px solid var(--line); background:var(--card); color:var(--ink); font:inherit; cursor:pointer; min-height:44px}
.ringcard b{font:700 .8rem/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase}
.ringcard span:last-child{font-size:.92rem; line-height:1.45; color:var(--ink-2)}
.ringcard .dot{width:12px; height:12px; border-radius:50%; border:2px solid var(--gold)}
.ringcard.why .dot{background:var(--gold)}
.ringcard.how .dot{background:var(--gold-soft)}
.ringcard[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-wash)}
/* fields in the example */
input[readonly],textarea[readonly]{background:var(--paper-2); border-color:var(--line-soft); border-style:dashed}
.counter{font-size:.95rem; color:var(--ink-2); margin:0 0 14px}
.counter b{color:var(--gold-ink)}
.friend{padding:16px; border-radius:var(--r); border:1px solid var(--line-soft); background:var(--card); margin:0 0 12px}
.friend .two{align-items:end}
.goose-f .check{margin:0}
.big-check{margin:8px 0 0}
.script{padding-left:1.3em}
.script li{margin:0 0 8px}
.script .say{font-family:var(--serif); font-style:italic}
.refs-d{margin:0 0 18px}
.refs-d .refs{margin-top:10px}
.refs-d ul{margin:4px 0 0; padding-left:1.1em}
.star.on{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--gold-ink)}
.star.on svg{width:22px; height:22px}

@media (max-width: 1000px){
  .mobile-only{display:block}
  .mini{padding:12px 14px; border-radius:var(--r); background:var(--card); border:1px solid var(--line-soft); border-left:3px solid var(--gold)}
  .mini svg{width:64px; height:64px}
  .hiw-list{grid-template-columns:repeat(2,1fr)}
  .hero-fig .dia{max-width:300px; margin:0 auto; display:block}
}
@media (max-width: 760px){
  .tabs ol{gap:2px}
  .tab{flex-direction:column; justify-content:center; gap:4px; padding:6px 2px; min-height:56px; font-size:.75rem; text-align:center}
  .tab[aria-current="step"]::after{left:20%; right:20%}
  .rings3{grid-template-columns:1fr}
  .modebar{display:flex}
  .modebar a{flex:1; justify-content:center; padding:0 10px}
  .hiw-list{grid-template-columns:1fr}
  .hiw-list li{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:2px 10px; padding:12px 14px}
  .hiw-list b{min-width:4.5em}
  .hero-fig .dia{max-width:230px}
  .hero-fig .dia-cap{text-align:center}
}
@media print{ .modebar,.tabs,.exbar,.mini{display:none!important} }

/* ---------- v2.1 mobile: slim WHY summary, compact example strip, one-line header ---------- */
.ex-short{display:none}
@media (max-width: 1000px){
  .mini{display:block; padding:0; margin:0 0 16px; border-radius:12px; background:var(--card); border:1px solid var(--line-soft); border-left:3px solid var(--gold)}
  .mini summary{list-style:none; display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 12px 6px 10px; cursor:pointer}
  .mini summary::-webkit-details-marker{display:none}
  .mini summary svg{width:32px; height:32px; flex:none}
  .mini-b{display:flex; flex-direction:column; min-width:0; flex:1}
  .mini-l{font:700 .75rem/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
  .ewl{font:400 .98rem/1.35 var(--serif); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .mini[open] .ewl{display:none}
  .mini-c{flex:none; width:10px; height:10px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s var(--ease)}
  .mini[open] .mini-c{transform:rotate(-135deg) translate(-2px,-2px)}
  .mini-body{padding:2px 14px 14px 52px}
  .mini-body .ew-s{margin:0 0 8px}
  .mini-body p.small{margin:0}
}
@media (max-width: 760px){
  .ex-long{display:none}
  .ex-short{display:inline}
  .exbar{flex-wrap:nowrap; gap:10px; margin:12px 0 0; padding:6px 6px 6px 12px; border-radius:12px}
  .exbar p{flex:1 1 auto; font-size:.88rem; line-height:1.3}
  .exbar .ro{padding:5px 7px}
  .exbar .row{flex:none; gap:6px; margin:0}
  .exbar .btn.small{min-height:44px; padding:0 14px; white-space:nowrap}
  .ws .modebar{margin-bottom:10px}
  .ws .tabs ol{padding-bottom:6px}
  .ws .step-head > .eyebrow{margin-top:0}
}
@media (max-width: 480px){
  .top-in{padding:8px 12px; gap:6px}
  .mark{gap:8px; white-space:nowrap; font-size:.98rem}
  .mark span{font-size:.98rem; letter-spacing:-.005em}
  .mark svg{width:24px; height:24px}
  .top nav{gap:0}
  .top nav a{padding:0 8px; font-size:.9rem}
  .icon-btn{padding:0; width:44px}
}
@media (max-width: 370px){
  .mark span{font-size:.92rem}
  .top nav a{padding:0 6px; font-size:.86rem}
}
@media (max-width: 340px){
  .top-in{padding:8px 8px}
  .mark span{font-size:.86rem}
  .top nav a{padding:0 5px; font-size:.82rem; min-width:0}
}
#sideDia .lab{font-size:20px; letter-spacing:.12em}

/* ---------- listening sheet (screen + print) ---------- */
.sheet-hint{margin:-4px 0 18px; color:var(--muted)}
.sheet{background:#fff; color:#1D1A16; border:1px solid var(--line); border-radius:6px; padding:36px 40px; max-width:780px; margin:0 auto 20px; box-shadow:0 1px 0 var(--line-soft), 0 12px 32px -20px rgba(29,26,22,.35)}
.sheet h1{font:600 2rem/1.1 var(--serif); margin:6px 0 6px; color:#1D1A16}
.sheet h2{font:700 .75rem/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#8C5810; margin:14px 0 6px}
.sh-top{display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid #C8861E; padding-bottom:8px}
.sh-mark{display:inline-flex; align-items:center; gap:8px; font:600 1rem/1 var(--serif); color:#1D1A16}
.sh-mark svg{width:22px; height:22px}
.sh-kind{font:700 .75rem/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#5E554B}
.sh-lede{margin:0 0 10px; color:#4A4238; font-size:.95rem; line-height:1.45}
.sh-names{display:flex; gap:18px; margin:0 0 4px; flex-wrap:wrap}
.sf{display:flex; align-items:flex-end; gap:6px; flex:1 1 150px; font-size:.85rem}
.sl{color:#5E554B; font-weight:600; white-space:nowrap}
.blank{flex:1; border-bottom:1px solid #8A7F70; min-height:1.4em; font-family:var(--serif); font-size:1rem; padding:0 2px}
.sh-how{margin:0; padding:0; list-style:none; counter-reset:h; display:grid; grid-template-columns:1fr 1fr; gap:4px 22px; font-size:.84rem; line-height:1.4; color:#4A4238}
.sh-how li{counter-increment:h; position:relative; padding-left:22px}
.sh-how li::before{content:counter(h); position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#F3E7D2; color:#8C5810; font:700 .68rem/16px var(--sans); text-align:center}
.sh-how b{color:#1D1A16}
.sh-how li:last-child{grid-column:1 / -1}
.sh-t{width:100%; border-collapse:collapse; margin-top:14px; table-layout:fixed; font-size:.8rem}
.sh-t caption{text-align:left; font:700 .75rem/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#8C5810; padding-bottom:6px}
.sh-t thead th{text-align:left; font-weight:600; color:#5E554B; padding:4px 8px; border-bottom:1.5px solid #1D1A16}
.sh-t thead th:first-child{width:24%}
.sh-t tbody th,.sh-t td{border-bottom:1px solid #D8CCB6; height:76px; vertical-align:top; padding:6px 8px}
.sh-t td{border-left:1px solid #E8DFCE}
.sh-t tbody th{text-align:left; font-weight:400}
.sn{display:inline-block; font:600 1.1rem/1 var(--serif); color:#C8861E; margin-right:6px}
.st{font:500 .85rem/1.3 var(--serif); color:#1D1A16}
.sh-box{border:1px solid #D8CCB6; border-radius:6px; padding:8px 12px 10px; margin-top:12px}
.sh-box h2{margin:0 0 4px}
.sh-themes{min-height:64px}
.sh-why{border-color:#C8861E; background:#FBF4E6}
.sh-to{display:flex; align-items:flex-end; gap:8px; margin:12px 0 0; font:italic 500 1.05rem/1 var(--serif); color:#1D1A16}
.sh-to .blank{min-height:1.2em}
.sh-src{margin:10px 0 0; font-size:.72rem; color:#5E554B}
.sheet-acts{justify-content:center}
@media (max-width:600px){
  .sheet{padding:20px 16px}
  .sheet h1{font-size:1.6rem}
  .sh-how{grid-template-columns:1fr}
  .sh-t thead th:first-child{width:30%}
  .sh-t tbody th,.sh-t td{height:64px}
}
@page sheet{margin:11mm 12mm}
@media print{
  #printRoot .sheet{page:sheet; border:0; box-shadow:none; padding:0; margin:0; max-width:none; font-size:10pt; break-inside:avoid}
  #printRoot .sheet svg{max-width:none; margin:0; width:5mm; height:5mm}
  #printRoot .sheet h1{font-size:21pt; margin:3mm 0 1.5mm}
  #printRoot .sheet h2{font-size:7.5pt; margin:3.5mm 0 1.5mm}
  #printRoot .sheet .sh-box h2{margin:0 0 1mm}
  .sh-lede{font-size:9.5pt; margin-bottom:2.5mm}
  .sf{font-size:9pt}
  .sh-how{font-size:8.6pt; gap:1mm 6mm}
  .sh-t{font-size:8.5pt; margin-top:3mm}
  .sh-t caption{font-size:7.5pt}
  .sh-t tbody th,.sh-t td{height:21mm}
  .sh-themes{min-height:17mm}
  .sh-why{background:#FBF4E6; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .sh-how li::before{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .sh-to{font-size:11pt; margin-top:5mm}
  .sh-src{font-size:7pt; margin-top:2.5mm}
}
.sheet-wrap{max-width:780px; margin:0 auto}
.sheet-wrap > .small{text-align:center; color:var(--muted)}

/* ---------- footer sign-off ---------- */
footer.foot .foot-sign{display:flex; justify-content:space-between; align-items:baseline; gap:12px 32px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft)}
footer.foot .foot-sign p{margin:0; max-width:none; font:italic 400 1rem/1.4 var(--serif); color:var(--ink-2); letter-spacing:.005em}
footer.foot .fs-l{display:inline-flex; align-items:center; gap:10px}
footer.foot .fs-l::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none}
footer.foot .fs-r{text-align:right; text-wrap:balance}
@media (max-width:600px){
  footer.foot .foot-sign{flex-direction:column; align-items:center; gap:4px; text-align:center}
  footer.foot .fs-r{text-align:center}
  footer.foot .fs-l::before{display:none}
}
/* poster print: keep the poster whole on page 1, summary from page 2 */
@media print{
  #printRoot > svg{display:block; width:120mm; height:auto; max-height:200mm; margin:6mm auto 0; break-inside:avoid}
  #printRoot > svg + *{break-before:page}
}
/* very long unbroken words in user text wrap instead of pushing the page sideways */
#app, #printRoot{overflow-wrap:break-word}
#app .src-text, #app .w, #app .ew-s, #app .ewl, #app .summary, #app .c-item p, #app .chip, #app h3, #app .blank, #app .stmt, #printRoot .summary, #printRoot .blank{overflow-wrap:anywhere}
.noscript{padding:40px 0}

/* Ken Hive hex logo, links back to kenhive.blog (same mark as the site and The Curious Reset) */
.kh-home{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin-left:-8px; border-radius:10px; flex-shrink:0}
.kh-home svg{width:30px; height:30px; transition:transform .2s var(--ease)}
.kh-home:hover svg{transform:rotate(30deg)}
.top-in .mark{gap:8px}
@media (prefers-reduced-motion: reduce){.kh-home svg{transition:none}.kh-home:hover svg{transform:none}}
@media print{.kh-home{display:none}}

/* Wrapping and measure, same rules as the rest of Ken Hive */
:where(h1,h2,h3,h4,summary,dt,caption,figcaption,legend,.eyebrow,.lede,label){text-wrap:balance}
:where(p,li,dd,td,.hint){text-wrap:pretty}
:where(p,li,dd){overflow-wrap:break-word}
/* On phones the hex logo stands in for the circle mark, so the header fits at 320px */
@media (max-width:640px){.top-in .mark svg{display:none}.top-in{gap:6px}}
@media (max-width:360px){.kh-home{margin-left:-10px}.top-in{padding-left:14px;padding-right:14px}}
@media (max-width:400px){.kh-home{margin-left:-6px}.top nav{gap:0}.top nav a{padding:0 6px}}
@media (max-width:340px){.top-in{padding-left:10px;padding-right:10px;gap:4px}.top-in .mark span{font-size:.82rem}}
@media (max-width:400px){.top-in{padding-left:10px;padding-right:8px}.top nav a{font-size:.86rem}.top-in .mark span{font-size:.88rem}}
@media (max-width:340px){.top nav a{padding:0 4px;font-size:.82rem}.top-in .mark span{font-size:.8rem}.kh-home{min-width:36px;margin-left:-4px}.kh-home svg{width:26px;height:26px}.top .icon-btn{min-width:40px;width:40px}}
/* Print always uses the light palette, even when the dark theme is on */
@media print{
  html:root:root,html:root:root[data-theme]{
    --paper:#F6F1E7; --paper-2:#EFE5D2; --card:#FFFBF3; --ink:#1D1A16; --ink-2:#4A4238; --muted:#5E554B;
    --line:#D8CCB6; --line-soft:#E8DFCE;
    --gold:#C8861E; --gold-soft:#EBD3A4; --gold-wash:#F3E7D2; --gold-ink:#8C5810;
    --how:#8A7F70; --what:#BDB09A; --focus:#8A4B1F; --ok:#2F6B3A; --warn:#8A3B12;
    color-scheme:light; background:#fff;
  }
}