@font-face{font-family:'Cormorant Garamond';font-style:normal;font-display:swap;font-weight:300 700;src:url('./fonts/cormorant-garamond-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-display:swap;font-weight:300 700;src:url('./fonts/cormorant-garamond-latin-wght-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('./fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-display:swap;font-weight:400 600;src:url('./fonts/caveat-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--paper:#f5f2ec;--ink:#2c2a26;--ink-soft:#4e473f;--ink-muted:#6e6355;--ink-faint:#9a8e7c;--ink-rgb:44 42 38;--redpen:#b04040;--pencil:#8a8278;--pencil-light:rgba(138,130,120,.35);--accent-gold:#c4a24e;--accent-gold-soft:rgba(196,162,78,.12);--strand-a:#9c4e28;--strand-b:#2f6e5e;--strand-c:#7a5290;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--hand:'Caveat',cursive;--ease:cubic-bezier(.22,1,.36,1)}
:root.theme-dark{--paper:#1a1614;--ink:#f5f2ec;--ink-soft:#d0c8b8;--ink-muted:#b0a595;--ink-faint:#8a7e6e;--ink-rgb:245 242 236;--redpen:#d06060;--pencil:#a09688;--pencil-light:rgba(160,150,136,.3);--accent-gold:#d4b462;--accent-gold-soft:rgba(212,180,98,.15);--strand-a:#eda26e;--strand-b:#82dcc4;--strand-c:#d2ace8}
html{font-size:18px;scroll-behavior:smooth}
body{font-family:var(--serif);color:var(--ink);background:var(--paper);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:'';position:fixed;inset:0;opacity:.028;background: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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;mix-blend-mode:multiply}
:root.theme-dark body::after{mix-blend-mode:soft-light;opacity:.06}
::selection{background:var(--accent-gold-soft);color:var(--ink)}

/* Chrome */
.spb{position:fixed;top:0;left:0;right:0;z-index:200;height:2px;pointer-events:none}
.spb span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-gold),var(--strand-a));transition:width 100ms linear}
.tb{position:fixed;top:1.5rem;right:1.5rem;background:none;border:none;font-size:1rem;cursor:pointer;color:var(--ink-faint);transition:color 200ms;z-index:100}
.tb:hover{color:var(--ink)}
.tt{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(20px);font-family:var(--sans);font-size:.7rem;color:var(--ink-soft);background:var(--paper);border:1px solid rgb(var(--ink-rgb)/.1);border-radius:8px;padding:.6em 1.2em;box-shadow:0 4px 20px rgb(var(--ink-rgb)/.1);opacity:0;pointer-events:none;transition:opacity 250ms,transform 250ms var(--ease);z-index:500;white-space:nowrap}
.tt.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* Layout */
.guide{max-width:36rem;margin:0 auto;padding:5rem 2rem 8rem}
.gb{display:inline-block;font-family:var(--sans);font-size:.7rem;color:var(--ink-faint);text-decoration:none;border-bottom:1px solid transparent;transition:color 200ms,border-color 200ms;margin-bottom:3rem}
.gb:hover{color:var(--ink);border-bottom-color:var(--ink-faint)}
.gt{font-size:2.4rem;font-weight:300;letter-spacing:-.025em;line-height:1.12;margin-bottom:.15em}
.gt em{font-weight:400;color:var(--redpen)}
.gs{font-size:1.05rem;font-weight:300;color:var(--ink-soft);margin-bottom:.5em}
.pn{font-family:var(--hand);color:var(--pencil);font-size:1.15rem;line-height:1.45;transform:rotate(-.5deg);display:inline-block}
.pb{margin:.3em 0 2.5em}
.pm{margin:.8em 0;padding-left:1.2em;border-left:2px solid var(--pencil-light);transform:rotate(-.3deg)}
.dv{border:none;border-top:1px solid rgb(var(--ink-rgb)/.06);margin:3rem 0}
.sec{margin-bottom:3.5rem;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sec.vis{opacity:1;transform:translateY(0)}
.sl{font-family:var(--sans);font-size:.6rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:1.2em}
.sec h2{font-size:1.45rem;font-weight:400;font-style:italic;margin-bottom:.8em;line-height:1.25}
.sec p{font-size:.95rem;color:var(--ink-soft);margin-bottom:1em}
.rp{color:var(--redpen);text-decoration:underline;text-decoration-color:rgba(176,64,64,.3);text-underline-offset:2px;text-decoration-thickness:1.5px}
:root.theme-dark .rp{text-decoration-color:rgba(208,96,96,.3)}
.lb{font-weight:500}
.k{display:inline-block;font-family:var(--sans);font-size:.62rem;font-weight:500;color:var(--ink-muted);background:rgb(var(--ink-rgb)/.04);border:1px solid rgb(var(--ink-rgb)/.1);border-radius:3px;padding:.1em .45em;line-height:1.4;vertical-align:baseline;margin:0 .08em}
.sg{display:grid;grid-template-columns:auto 1fr;gap:.5em 1.2em;margin:1.2em 0;font-size:.88rem;align-items:baseline}
.sg .sd{color:var(--ink-soft)}

/* Tell Weaver demo */
.td{margin:1.4em 0;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);padding:1em 1.2em}
:root.theme-dark .td{background:rgb(var(--ink-rgb)/.03)}
.td-h{font-family:var(--sans);font-size:.55rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:.7em}
.td-rail{min-height:6em;font-size:.85rem;line-height:1.5}
.td-empty{font-size:.82rem;color:var(--ink-muted);font-style:italic;padding:.4em 0}
.td-group{margin-bottom:.7em;display:none}
.td-group.on{display:block}
.td-gh{font-family:var(--sans);font-size:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin:.4em 0 .3em;padding-bottom:.2em;border-bottom:1px solid rgb(var(--ink-rgb)/.05)}
.td-list{list-style:none;padding:0}
.td-row{display:flex;gap:.6em;padding:.3em 0;align-items:flex-start;font-size:.85rem;line-height:1.5}
.td-scope{font-family:var(--sans);font-size:.5rem;font-weight:500;padding:.15em .4em;border-radius:3px;white-space:nowrap;flex-shrink:0;margin-top:.2em;color:#fff;letter-spacing:.04em;text-transform:uppercase}
.td-scope.character{background:var(--strand-a)}
.td-scope.world{background:var(--strand-b)}
.td-scope.scene-intent{background:var(--accent-gold);color:var(--ink)}
.td-scope.continuity{background:var(--strand-c)}
.td-tx{flex:1;color:var(--ink-soft);font-style:italic}
.td-del{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:.85rem;padding:0 .3em;border-radius:3px;flex-shrink:0}
.td-del:hover{color:var(--ink);background:rgb(var(--ink-rgb)/.05)}
.td-teach{margin-top:.8em;padding-top:.7em;border-top:1px solid rgb(var(--ink-rgb)/.06);display:flex;gap:.5em;align-items:center}
.td-teach-label{font-family:var(--hand);color:var(--pencil);font-size:.95rem;flex-shrink:0}
.td-teach input{flex:1;padding:.45em .65em;border:1px solid rgb(var(--ink-rgb)/.12);border-radius:4px;font-family:var(--serif);font-size:.85rem;font-style:italic;color:var(--ink);background:rgb(var(--ink-rgb)/.02)}
.td-teach input:focus{outline:none;border-color:var(--accent-gold)}
.td-teach input::placeholder{color:var(--ink-faint)}

/* Variant comparator demo */
.vc{margin:1.4em 0;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);overflow:hidden}
:root.theme-dark .vc{background:rgb(var(--ink-rgb)/.03)}
.vc-h{font-family:var(--sans);font-size:.55rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);padding:.7em 1em;border-bottom:1px solid rgb(var(--ink-rgb)/.06);display:flex;justify-content:space-between;align-items:center}
.vc-h em{font-family:var(--serif);font-style:italic;font-size:.92rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400}
.vc-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.5em;padding:.5em .7em;border-bottom:1px solid rgb(var(--ink-rgb)/.04);align-items:stretch}
.vc-row:last-of-type{border-bottom:none}
.vc-cell{padding:.55em .7em;border-radius:4px;font-size:.82rem;line-height:1.5;color:var(--ink-soft);background:rgb(var(--ink-rgb)/.02);border-left:2px solid;cursor:pointer;transition:background 200ms,color 200ms,transform 200ms;font-style:italic;position:relative}
.vc-cell.va{border-left-color:var(--strand-a)}
.vc-cell.vb{border-left-color:var(--strand-b)}
.vc-cell.vc{border-left-color:var(--strand-c)}
.vc-cell:hover{background:rgb(var(--ink-rgb)/.045);color:var(--ink)}
.vc-cell.taken{background:rgb(var(--ink-rgb)/.06);color:var(--ink);font-style:normal}
.vc-cell.taken::after{content:'taken';position:absolute;top:.3em;right:.5em;font-family:var(--sans);font-size:.48rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);font-style:normal}
.vc-num{font-family:var(--sans);font-size:.48rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:.25em;display:block}
.vc-cell.va .vc-num{color:var(--strand-a)}
.vc-cell.vb .vc-num{color:var(--strand-b)}
.vc-cell.vc .vc-num{color:var(--strand-c)}
.vc-take{display:flex;align-items:center;justify-content:center;min-width:1.8em;font-family:var(--sans);font-size:.62rem;font-weight:500;color:var(--ink-faint);border-left:1px dashed rgb(var(--ink-rgb)/.12);padding-left:.5em}
.vc-take.has{color:var(--accent-gold)}
.vc-hint{padding:.6em 1em;font-family:var(--sans);font-size:.55rem;color:var(--ink-faint);font-style:italic;text-align:center;border-top:1px solid rgb(var(--ink-rgb)/.04)}
.vc-row.focused{background:rgb(var(--ink-rgb)/.02)}
.vc-row.focused .vc-cell{box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb)/.05)}

/* Reasoning panel demo (static-looking) */
.rp-panel{margin:1.2em 0;padding:1em 1.2em;background:rgb(var(--ink-rgb)/.015);border-radius:8px;border:1px solid rgb(var(--ink-rgb)/.06);border-left:3px solid var(--accent-gold);font-size:.88rem;line-height:1.7;color:var(--ink-soft);font-style:italic;position:relative}
:root.theme-dark .rp-panel{background:rgb(var(--ink-rgb)/.03)}
.rp-panel::before{content:'Editor';position:absolute;top:-.7em;left:1em;background:var(--paper);padding:0 .5em;font-family:var(--sans);font-size:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-gold);font-style:normal}
.rp-panel p{margin-bottom:.5em}
.rp-panel p:last-child{margin-bottom:0}
.rp-anchor{font-family:var(--sans);font-size:.5rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-right:.4em;font-style:normal}

/* Constellation diagram (decorative, not interactive) */
.cn{display:flex;gap:1em;margin:1.2em 0;padding:1em;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);font-size:.82rem;flex-wrap:wrap}
:root.theme-dark .cn{background:rgb(var(--ink-rgb)/.03)}
.cn-col{flex:1;min-width:8em}
.cn-h{font-family:var(--sans);font-size:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:.5em}
.cn-it{padding:.3em .5em;margin:.2em 0;border-radius:3px;border-left:2px solid;font-style:italic;color:var(--ink-soft);background:rgb(var(--ink-rgb)/.02)}
.cn-it.s1{border-left-color:var(--accent-gold)}
.cn-it.s2{border-left-color:var(--strand-b)}
.cn-it.s3{border-left-color:var(--strand-c)}
.cn-it.s4{border-left-color:var(--strand-a)}
.cn-it.cn-it-plain{font-style:normal}
.cn-it-count{color:var(--ink-faint);font-style:normal}
.cn-frag{padding:.3em .5em;margin:.2em 0;border-radius:3px;font-size:.78rem;color:var(--ink-muted);font-style:italic;border:1px dashed rgb(var(--ink-rgb)/.12)}

/* Page footer */
.fg-footer{text-align:center;padding:2rem 1rem 3rem;font-family:var(--sans);font-size:.7rem;color:var(--ink-faint);letter-spacing:.04em}
.fg-footer-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding:0 .6em}
.fg-footer-link:hover{border-bottom-color:var(--ink-faint)}

/* Coda */
.coda{text-align:center;margin-top:4rem;padding-top:2rem}
.cm{border-bottom:2px solid var(--accent-gold);cursor:pointer;transition:background 200ms}
.cm:hover{background:var(--accent-gold-soft)}
.cpn{max-height:0;opacity:0;overflow:hidden;transition:max-height 400ms var(--ease),opacity 300ms;margin:0 auto;max-width:24em;text-align:left}
.cpn.on{max-height:200px;opacity:1;margin-top:1.5em;padding:1em 1.2em;border-left:3px solid var(--accent-gold);background:var(--accent-gold-soft);border-radius:0 6px 6px 0}
.cpn p{font-style:italic;font-size:.88rem;color:var(--ink-soft);margin-bottom:.5em}
.cpn a{font-family:var(--sans);font-size:.72rem;color:var(--accent-gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 200ms}
.cpn a:hover{border-bottom-color:var(--accent-gold)}
.cf{margin-top:2em;opacity:0;transition:opacity 600ms var(--ease)}
.cf.on{opacity:1}
.cf a{font-style:italic;font-size:.95rem;color:var(--ink-muted);text-decoration:none;border-bottom:1px solid var(--pencil-light);transition:color 200ms,border-color 200ms}
.cf a:hover{color:var(--ink);border-bottom-color:var(--ink)}

@media(max-width:640px){
  html{font-size:16px}
  .guide{padding:3rem 1.2rem 5rem}
  .gt{font-size:1.8rem}
  .vc-row{grid-template-columns:1fr;gap:.35em}
  .vc-take{border-left:none;border-top:1px dashed rgb(var(--ink-rgb)/.12);padding-left:0;padding-top:.4em;justify-content:flex-start}
  .cn{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.sec{opacity:1;transform:none;transition:none}.tt,.cpn,.cf,.vc-cell,.spb span{transition:none}}