@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);--pass:#2f6e5e;--revise:#b04040;--hold:#7a5290;--voice:#6a5a36;--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);--pass:#82dcc4;--revise:#d06060;--hold:#d2ace8;--voice:#dcbe9a}
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(--pass));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)}

/* Vision streaming mock (decorative, not interactive) */
.vsm{margin:1.2em 0;padding:1em 1.2em;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);font-size:.88rem;line-height:1.7;color:var(--ink-soft);font-style:italic;position:relative}
:root.theme-dark .vsm{background:rgb(var(--ink-rgb)/.03)}
.vsm-h{font-family:var(--sans);font-size:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:.5em;font-style:normal}
.vsm-vp{margin-top:.7em;padding-top:.6em;border-top:1px dashed rgb(var(--ink-rgb)/.1);font-size:.78rem;color:var(--ink-muted);font-style:normal}
.vsm-vp-h{font-family:var(--sans);font-size:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:.3em}
.vsm-vp-g{display:grid;grid-template-columns:auto 1fr;gap:.2em .9em;font-size:.78rem}
.vsm-vp-g span:nth-child(odd){color:var(--ink-faint);font-style:italic}
.vsm-vp-g span:nth-child(even){color:var(--ink-soft)}

/* Outline demo */
.ol{margin:1.2em 0;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);overflow:hidden}
:root.theme-dark .ol{background:rgb(var(--ink-rgb)/.03)}
.ol-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)}
.ol-row{display:grid;grid-template-columns:auto 1fr auto;gap:.7em;padding:.6em 1em;border-bottom:1px solid rgb(var(--ink-rgb)/.04);align-items:baseline}
.ol-row:last-of-type{border-bottom:none}
.ol-num{font-family:var(--sans);font-size:.6rem;font-weight:500;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ol-intent{font-size:.88rem;color:var(--ink-soft);font-style:italic;line-height:1.6;cursor:text}
.ol-intent:hover{color:var(--ink)}
.ol-row.editing .ol-intent{display:none}
.ol-ed{display:none;font-family:var(--serif);font-size:.88rem;line-height:1.6;color:var(--ink);background:rgb(var(--ink-rgb)/.02);border:1px solid var(--accent-gold);border-radius:4px;padding:.35em .55em;width:100%;font-style:italic;resize:none}
.ol-row.editing .ol-ed{display:block}
.ol-rm{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:.9rem;padding:0 .3em;opacity:0;transition:opacity 180ms,color 180ms}
.ol-row:hover .ol-rm,.ol-row:focus-within .ol-rm{opacity:1}
.ol-rm:hover{color:var(--revise)}
.ol-row.removing{opacity:0;transform:translateX(8px);transition:opacity 250ms,transform 250ms var(--ease)}
.ol-foot{font-family:var(--sans);font-size:.55rem;color:var(--ink-faint);font-style:italic;text-align:center;padding:.6em 1em;border-top:1px solid rgb(var(--ink-rgb)/.04)}

/* Two-pane rewrite demo */
.tp{margin:1.2em 0;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);overflow:hidden}
:root.theme-dark .tp{background:rgb(var(--ink-rgb)/.03)}
.tp-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}
.tp-plan{display:none;font-family:var(--sans);font-size:.5rem;letter-spacing:.06em;padding:.15em .5em;border-radius:3px;text-transform:uppercase;color:var(--ink-soft);background:rgb(var(--ink-rgb)/.05);border:1px solid rgb(var(--ink-rgb)/.1)}
.tp-plan.on{display:inline-block}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tp-side{padding:.9em 1em;font-size:.88rem;line-height:1.7;color:var(--ink-soft);min-height:7em}
.tp-side.tp-left{border-right:1px solid rgb(var(--ink-rgb)/.06)}
.tp-cap{font-family:var(--sans);font-size:.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:.5em}
.tp-text{font-style:italic;color:var(--ink)}
.tp-text.streaming::after{content:'│';color:var(--accent-gold);animation:blink 700ms steps(2) infinite;margin-left:.05em}
@keyframes blink{50%{opacity:0}}
.tp-foot{padding:.7em 1em;border-top:1px solid rgb(var(--ink-rgb)/.06);background:rgb(var(--ink-rgb)/.02);display:flex;gap:.6em;align-items:center;flex-wrap:wrap}
.tp-verdict{display:none;flex:1;font-family:var(--sans);font-size:.7rem;line-height:1.4;color:var(--ink-soft);align-items:baseline;gap:.5em;flex-wrap:wrap}
.tp-verdict.on{display:flex}
.tp-pill{display:inline-block;font-family:var(--sans);font-size:.55rem;font-weight:600;letter-spacing:.08em;padding:.2em .55em;border-radius:3px;text-transform:uppercase;color:#fff;flex-shrink:0}
.tp-pill.pass{background:var(--pass)}
.tp-pill.revise{background:var(--revise)}
.tp-find{font-style:italic;color:var(--ink-muted);font-family:var(--serif);font-size:.85rem}
.tp-btns{display:flex;gap:.4em}
.tp-btn{font-family:var(--sans);font-size:.6rem;padding:.35em .8em;border:1px solid rgb(var(--ink-rgb)/.12);border-radius:999px;background:transparent;color:var(--ink-muted);cursor:pointer;transition:background 200ms,color 200ms,border-color 200ms}
.tp-btn:hover{background:rgb(var(--ink-rgb)/.04);color:var(--ink);border-color:rgb(var(--ink-rgb)/.2)}
.tp-btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tp-btn.primary:hover{background:var(--ink-soft);color:var(--paper)}
.tp-btn:disabled{opacity:.5;cursor:default}

/* Holds / Voice notes demo */
.hv{margin:1.2em 0;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);padding:1em 1.2em;position:relative}
:root.theme-dark .hv{background:rgb(var(--ink-rgb)/.03)}
.hv-h{font-family:var(--sans);font-size:.55rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);margin-bottom:.6em}
.hv-p{font-size:.95rem;line-height:1.85;color:var(--ink);user-select:text}
.hv-p .hv-hl{background:rgba(196,162,78,.18);border-radius:2px}
.hv-pill{position:absolute;display:none;background:var(--paper);border:1px solid rgb(var(--ink-rgb)/.15);border-radius:5px;padding:.2em .1em;font-family:var(--sans);font-size:.62rem;box-shadow:0 2px 8px rgb(0 0 0/.12);z-index:10;white-space:nowrap}
.hv-pill.on{display:flex}
.hv-pill button{background:none;border:none;cursor:pointer;padding:.3em .65em;color:var(--ink-muted);font-family:var(--sans);font-size:.62rem;border-radius:3px}
.hv-pill button:hover{color:var(--ink);background:rgb(var(--ink-rgb)/.05)}
.hv-pill button+button{border-left:1px solid rgb(var(--ink-rgb)/.1)}
.hv-inline{max-height:0;overflow:hidden;opacity:0;transition:max-height 280ms var(--ease),opacity 200ms,margin 200ms}
.hv-inline.on{max-height:80px;opacity:1;margin-top:.6em}
.hv-inline input{width:100%;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)}
.hv-inline input:focus{outline:none;border-color:var(--accent-gold)}
.hv-rail{margin-top:.9em;padding-top:.7em;border-top:1px solid rgb(var(--ink-rgb)/.06)}
.hv-empty{font-size:.78rem;color:var(--ink-muted);font-style:italic}
.hv-list{list-style:none;padding:0}
.hv-li{display:flex;gap:.5em;padding:.3em 0;font-size:.85rem;align-items:flex-start}
.hv-kind{font-family:var(--sans);font-size:.5rem;font-weight:500;padding:.15em .45em;border-radius:3px;color:#fff;flex-shrink:0;margin-top:.2em;letter-spacing:.04em;text-transform:uppercase}
.hv-kind.hold{background:var(--hold)}
.hv-kind.voice{background:var(--voice)}
.hv-tx{flex:1;color:var(--ink-soft);font-style:italic;line-height:1.5}
.hv-del{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:.85rem;padding:0 .3em;border-radius:3px;flex-shrink:0}
.hv-del:hover{color:var(--ink);background:rgb(var(--ink-rgb)/.05)}

/* Engine diagram (decorative) */
.eng{margin:1.2em 0;padding:1em 1.2em;border:1px solid rgb(var(--ink-rgb)/.08);border-radius:8px;background:rgb(var(--ink-rgb)/.015);font-size:.82rem}
:root.theme-dark .eng{background:rgb(var(--ink-rgb)/.03)}
.eng-flow{display:flex;flex-direction:column;gap:.4em}
.eng-step{display:flex;align-items:center;gap:.6em;padding:.3em 0}
.eng-step-d{flex-shrink:0;width:1.2em;height:1.2em;border-radius:50%;background:var(--paper);border:1.5px solid var(--accent-gold);font-family:var(--sans);font-size:.55rem;display:flex;align-items:center;justify-content:center;color:var(--accent-gold);font-weight:500}
.eng-step-t{flex:1;color:var(--ink-soft);font-style:italic}
.eng-step-t b{color:var(--ink);font-style:normal;font-weight:500}
.eng-arrow{padding-left:.5em;color:var(--ink-faint);font-family:var(--sans);font-size:.5rem;letter-spacing:.06em}

/* 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}
  .tp-grid{grid-template-columns:1fr}
  .tp-side.tp-left{border-right:none;border-bottom:1px solid rgb(var(--ink-rgb)/.06)}
  .vsm-vp-g{grid-template-columns:1fr;gap:.1em}
}
@media(prefers-reduced-motion:reduce){.sec{opacity:1;transform:none;transition:none}.tt,.cpn,.cf,.tp-text.streaming::after,.spb span,.ol-row{transition:none;animation:none}}

/* 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)}

/* Rail-scoped tighter header */
.hv-rail .hv-h{margin-bottom:.4em}