:root{color-scheme:light;--paper:#f8f7f3;--ink:#343b35;--muted:#92958b;--accent:#62785e;--rule:#e3e4dc;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:2px solid #84977b;outline-offset:5px}button{border:0;background:none}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}
.masthead{height:64px;padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--paper);z-index:2}.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-family:Georgia,serif;font-size:28px;letter-spacing:-1.2px}.wordmark svg{width:21px;height:26px;stroke-width:1.35}.brand-dot{color:#859678;margin-left:-10px}.masthead nav{display:flex;align-items:center;gap:24px}.masthead button{font-size:12px;display:flex;align-items:center;gap:10px;padding:9px 0;color:var(--chrome)}.masthead button:hover{color:var(--ink)}kbd{font-family:inherit;font-size:10px;border:1px solid var(--rule);padding:3px 5px;border-radius:4px;color:#989c91}.nav-divider{height:16px;width:1px;background:var(--rule)}
#manuscript{max-width:760px;margin:48px auto 0;padding:0 40px 140px;min-height:calc(100vh - 64px)}.page-preface{display:flex;align-items:center;gap:22px;margin-bottom:65px;color:var(--muted);font-size:9px;letter-spacing:2.3px}.preface-line{height:1px;background:var(--rule);flex:1}.small-symbol{font-size:20px;line-height:1;letter-spacing:0;color:#829176}.start-mark{font-size:11px;color:var(--muted);letter-spacing:.15px;margin-bottom:38px;display:flex;gap:10px;align-items:center}.start-mark>span{font-size:22px;color:#92a188}.passage{position:relative;padding:0 0 19px;transition:background-color .4s}.timestamp{display:block;font-size:9px;letter-spacing:.5px;color:var(--muted);margin-bottom:12px;line-height:16px}.writing{display:block;width:100%;border:0;border-radius:0;resize:none;overflow:hidden;min-height:34px;padding:0;margin:0;background:transparent;color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.85;letter-spacing:.06px;outline:none;tab-size:4}.writing::placeholder{color:var(--muted);font-style:italic}.passage:focus-within .timestamp{color:#83917b}.passage.empty .writing{min-height:170px}.landmark{position:absolute;left:-43px;top:31px;width:13px;height:13px;color:var(--landmark-symbol);pointer-events:none}.landmark.circle{border:1px solid currentColor;border-radius:50%}.landmark.diamond{border:1px solid currentColor;transform:rotate(45deg);width:10px;height:10px}.landmark.cross:before,.landmark.cross:after{content:"";background:currentColor;position:absolute;left:6px;width:1px;height:13px}.landmark.cross:after{transform:rotate(90deg)}.landmark.arc{border:1px solid currentColor;border-bottom-color:transparent;border-radius:50%}.passage[data-tint=parchment]{background:var(--landmark-parchment)}.passage[data-tint=sage]{background:var(--landmark-sage)}.passage[data-tint=rose]{background:var(--landmark-rose)}.passage[data-tint=mist]{background:var(--landmark-mist)}.passage[data-texture=true]{background-image:radial-gradient(var(--landmark-texture) .5px,transparent .5px);background-size:6px 6px}.passage[data-rule=true]:before{content:"";display:block;width:42px;height:1px;background:var(--landmark-rule);margin:12px 0 20px}.passage.arrival{animation:arrival 2.2s ease-out}@keyframes arrival{from{background-color:var(--arrival)}to{background-color:transparent}}
#end-mark{display:flex;align-items:center;gap:14px;margin-top:13px;color:#a0a694;font-size:13px;font-family:Georgia,serif}#end-mark span{width:25px;height:1px;background:var(--landmark-rule)}.history-control{display:block;margin:0 auto 30px;padding:12px;font-size:11px;color:var(--chrome)}.history-control:hover{color:var(--ink)}#save-status:before{content:"";display:inline-block;width:6px;height:6px;background:#91a280;border-radius:50%}#save-status[data-state=error]:before{background:#b78264}#save-status[data-state=pending]:before{background:#c0b687}
#error{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(650px,90vw);background:var(--error-surface);border:1px solid var(--rule);padding:16px 20px;z-index:10;font-size:12px;line-height:1.6;box-shadow:0 6px 30px #343b3510}#error button{color:var(--ink);text-decoration:underline;margin-top:8px;margin-right:12px;padding:0}#error-text{display:block}
dialog{width:min(560px,calc(100vw - 32px));padding:27px 30px 0;border:1px solid var(--rule);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 24px 100px #303c3025;max-height:75vh;overflow:auto}dialog::backdrop{background:#30392e25;backdrop-filter:blur(3px)}.search-heading{display:flex;justify-content:space-between;align-items:center;font-family:Georgia,serif;font-size:21px}.search-heading button{font:15px sans-serif;color:var(--muted);padding:6px}.search-field{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--rule);margin-top:20px}.search-field svg{color:#87967b;flex-shrink:0}#search-input{width:100%;padding:14px 0;border:0;outline:0;background:transparent;font-size:14px}#search-input::placeholder{color:#a0a497}#search-status{font-size:11px;color:var(--muted);line-height:1.7;margin:18px 0}.search-result{text-align:left;display:block;width:100%;border-top:1px solid var(--rule);padding:17px 0}.search-result:hover{background:var(--hover)}.search-result time{font-size:9px;color:var(--muted);letter-spacing:.4px}.search-result p{font-family:Georgia,serif;font-size:15px;line-height:1.7;margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.search-foot{border-top:1px solid var(--rule);margin-top:20px;padding:16px 0;font-size:10px;color:var(--muted);display:flex;justify-content:space-between}
@media(min-width:1500px){#manuscript{margin-top:75px}}@media(max-width:650px){.masthead{height:56px;padding:0 25px}.wordmark{font-size:25px}.masthead nav{gap:16px}kbd{display:none}#manuscript{margin-top:30px;padding:0 35px 100px}.page-preface{margin-bottom:43px;font-size:8px;gap:16px}.writing{font-size:18px}.landmark{left:-23px;width:10px;height:10px}.start-mark{margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){*,*:before{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Theme-independent landmark identities above resolve through these palettes. */
:root{--chrome:#656c61;--surface:#fbfaf6;--hover:#edf0e5;--error-surface:#fff9ed;--code-surface:#ebece5;--arrival:#dce5cf;--landmark-symbol:#a1ab96;--landmark-parchment:#b69a4c08;--landmark-sage:#779b6e09;--landmark-rose:#ba8d8608;--landmark-mist:#7396a409;--landmark-texture:#71836515;--landmark-rule:#b2bca580}
:root[data-theme=dark]{color-scheme:dark;--paper:#24231f;--ink:#d5d0c5;--muted:#97998b;--accent:#a6b298;--chrome:#afb3a2;--rule:#3b3c32;--surface:#2d2c26;--hover:#383a30;--error-surface:#3b3225;--code-surface:#37372f;--arrival:#444c39;--landmark-symbol:#8e9b7d;--landmark-parchment:#ba9e5610;--landmark-sage:#92a8780d;--landmark-rose:#b28d8610;--landmark-mist:#829da40e;--landmark-texture:#b6b39c12;--landmark-rule:#929e7966}
::selection{background:var(--arrival);color:var(--ink)}
.writing{white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible;cursor:text}
.writing:empty:before{content:attr(data-placeholder);color:var(--muted);font-style:italic;pointer-events:none}
.writing p{margin:0 0 .65em}.writing p:last-child{margin-bottom:0}
.writing h1,.writing h2,.writing h3{font-family:Georgia,serif;line-height:1.4;font-weight:600;letter-spacing:-.02em;margin:.75em 0 .4em}
.writing h1{font-size:1.65em}.writing h2{font-size:1.35em}.writing h3{font-size:1.1em}
.writing>:first-child{margin-top:0}.writing ul,.writing ol{margin:.4em 0 .6em;padding-left:1.5em}.writing li{padding-left:.15em}.writing li p{margin:0}
.writing code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82em;background:var(--code-surface);border-radius:3px;padding:.1em .25em;box-decoration-break:clone}
#format-toolbar{position:fixed;width:max-content;display:flex;align-items:center;gap:1px;z-index:8;max-width:calc(100vw - 16px);padding:5px;background:var(--surface);border:1px solid var(--rule);border-radius:7px;box-shadow:0 4px 20px #00000018}
#format-toolbar button{font-size:12px;min-width:28px;height:30px;padding:4px;color:var(--ink);border-radius:3px;white-space:nowrap}
#format-toolbar button:hover,#format-toolbar button[aria-pressed=true]{background:var(--hover)}
.format-divider{height:17px;width:1px;background:var(--rule);margin:0 3px}
#appearance-dialog{width:min(360px,calc(100vw - 32px));padding-bottom:23px}
.appearance-label{display:block;color:var(--chrome);font-size:12px;margin:26px 0 10px}
#appearance-mode{width:100%;padding:10px 12px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:4px;font:inherit;font-size:13px}
.appearance-help{font-size:11px;line-height:1.7;color:var(--muted);margin:14px 0 0}
@media(max-width:450px){.masthead{padding:0 18px}.masthead nav{gap:13px}.wordmark{font-size:23px}.masthead button{gap:5px}#format-toolbar{flex-wrap:wrap;width:330px;justify-content:center}#format-toolbar button{min-width:24px;font-size:11px}.format-divider{margin:0 1px}}

.writing img{display:block;max-width:100%;height:auto;margin:1em 0;object-fit:contain;border-radius:3px}.image-paste-status{font-size:11px;color:var(--muted);margin:8px 0;line-height:1.6}.image-paste-status[data-error=true]{color:var(--ink)}

/* Code is a quiet, bounded writing region in either appearance mode. */
.writing pre,.writing code{display:block;box-sizing:border-box;max-width:100%;margin:1em 0;padding:16px 20px;border:1px solid var(--rule);border-radius:6px;background:var(--code-surface);color:var(--ink);font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
.writing pre *{font:inherit;white-space:inherit;color:inherit;background:transparent;border:0;padding:0}
.writing pre+pre{margin-top:-1em;border-top:0;border-top-left-radius:0;border-top-right-radius:0}
.writing pre:has(+pre){border-bottom-left-radius:0;border-bottom-right-radius:0}

.writing pre code{display:inline;max-width:none;margin:0;overflow:visible;border-radius:0;box-decoration-break:slice}

/* Landmark bands span the viewport; ornament lives outside the writing column. */
:root{--landmark-parchment:#b69a4c16;--landmark-sage:#779b6e17;--landmark-rose:#ba8d8617;--landmark-mist:#7396a418;--landmark-symbol:#80916e;--landmark-rule:#92a37a88}
:root[data-theme=dark]{--landmark-parchment:#ba9e561c;--landmark-sage:#92a87817;--landmark-rose:#b28d861b;--landmark-mist:#829da41c;--landmark-symbol:#a1af8c;--landmark-rule:#929e7999}
.passage{isolation:isolate}
.landmark-region{position:absolute;z-index:-1;left:calc((100% - var(--note-viewport,100vw))/2);width:var(--note-viewport,100vw);pointer-events:none;overflow:hidden}
.landmark-region[data-tint=parchment]{background:var(--landmark-parchment)}
.landmark-region[data-tint=sage]{background:var(--landmark-sage)}
.landmark-region[data-tint=rose]{background:var(--landmark-rose)}
.landmark-region[data-tint=mist]{background:var(--landmark-mist)}
.landmark-margin{position:absolute;top:0;bottom:0;width:max(0px,calc(var(--gutter) - 28px));opacity:.32;color:var(--landmark-rule)}
.landmark-margin.left{left:0;mask-image:linear-gradient(to right,transparent,#000)}
.landmark-margin.right{right:0;mask-image:linear-gradient(to left,transparent,#000)}
[data-motif=dots] .landmark-margin{background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:18px 18px}
[data-motif=hatch] .landmark-margin{background-image:repeating-linear-gradient(135deg,transparent 0 18px,currentColor 18px 19px,transparent 19px 36px)}
[data-motif=steps] .landmark-margin{background-image:linear-gradient(currentColor 1px,transparent 1px),linear-gradient(90deg,currentColor 1px,transparent 1px);background-size:38px 38px}
[data-motif=orbit] .landmark-margin{background-image:repeating-radial-gradient(circle at 0 50%,transparent 0 35px,currentColor 36px,transparent 37px 70px)}
.landmark-signal{position:absolute;top:18px;width:24px;height:var(--rail-length,180px);color:var(--landmark-symbol)}
.landmark-signal.left{left:calc(var(--gutter) - 55px)}
.landmark-signal.right{right:calc(var(--gutter) - 55px);transform:rotate(180deg)}
.landmark-signal .landmark{top:0;left:3px;width:18px;height:18px;color:inherit}
.landmark-signal .diamond{width:14px;height:14px;left:5px;top:2px}
.landmark-signal .rings{border:1px solid currentColor;border-radius:50%;box-shadow:0 0 0 4px var(--paper),0 0 0 5px currentColor}
.landmark-signal .triangle{border-left:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg) skew(12deg,12deg);width:13px;height:13px;left:5px}
.landmark-rail{position:absolute;top:36px;bottom:0;left:11px;width:1px;background:var(--landmark-rule)}
.landmark-rail:after{content:"";position:absolute;bottom:0;left:-4px;width:9px;height:1px;background:var(--landmark-rule)}
@media(max-width:650px){.landmark-signal.left{left:10px}.landmark-signal.right{right:10px}.landmark-signal{width:12px;opacity:.75}.landmark-signal .landmark{transform:scale(.65);transform-origin:top left}.landmark-signal .diamond{transform:rotate(45deg) scale(.65)}.landmark-rail{left:8px}.landmark-margin{width:12px}}

/* Complete DNA is stored per region; themes translate that same identity. */
:root{--dna-background-lightness:49%;--dna-accent-lightness:43%;--dna-alpha-multiplier:1}
:root[data-theme=dark]{--dna-background-lightness:65%;--dna-accent-lightness:67%;--dna-alpha-multiplier:1.1}
.landmark-region[data-dna=true]{
  background:hsl(var(--dna-hue) calc(var(--dna-saturation) * 1%) var(--dna-background-lightness) / calc(var(--dna-intensity) * var(--dna-alpha-multiplier)));
  --landmark-symbol:hsl(var(--dna-accent-hue) 20% var(--dna-accent-lightness));
  --landmark-rule:hsl(var(--dna-accent-hue) 20% var(--dna-accent-lightness) / var(--dna-rule-opacity));
}
[data-dna=true] .landmark-margin{opacity:var(--dna-pattern-opacity)}
[data-dna=true][data-motif=dots] .landmark-margin{background-size:calc(18px * var(--dna-pattern-scale)) calc(18px * var(--dna-pattern-scale))}
[data-dna=true][data-motif=steps] .landmark-margin{background-size:calc(38px * var(--dna-pattern-scale)) calc(38px * var(--dna-pattern-scale))}
[data-dna=true][data-motif=hatch] .landmark-margin{background-image:repeating-linear-gradient(135deg,transparent 0 calc(18px * var(--dna-pattern-scale)),currentColor calc(18px * var(--dna-pattern-scale)) calc(19px * var(--dna-pattern-scale)),transparent calc(19px * var(--dna-pattern-scale)) calc(36px * var(--dna-pattern-scale)))}
[data-dna=true][data-motif=orbit] .landmark-margin{background-image:repeating-radial-gradient(circle at 0 50%,transparent 0 calc(35px * var(--dna-pattern-scale)),currentColor calc(36px * var(--dna-pattern-scale)),transparent calc(37px * var(--dna-pattern-scale)) calc(70px * var(--dna-pattern-scale)))}
[data-dna=true] .landmark-signal .landmark{scale:var(--dna-ornament-scale)}
[data-rule-style=dashed] .landmark-rail{background:repeating-linear-gradient(to bottom,var(--landmark-rule) 0 5px,transparent 5px 10px)}
[data-rare=double_rule] .landmark-rail{box-shadow:5px 0 0 var(--landmark-rule)}
.landmark-construction{position:absolute;top:65px;left:-32px;width:40px;height:58px;border:1px solid var(--landmark-rule);transform:rotate(15deg);opacity:.65}
.landmark-construction:before{content:"";position:absolute;inset:8px -8px;border:1px solid var(--landmark-rule);border-radius:50%}
.landmark-construction:after{content:"";position:absolute;top:50%;left:-10px;right:-10px;height:1px;background:var(--landmark-rule);transform:rotate(-35deg)}
@media(max-width:650px){.landmark-construction{display:none}[data-rare=double_rule] .landmark-rail{box-shadow:3px 0 0 var(--landmark-rule)}}
[data-dna=true][data-landmark-id]{border-top:1px solid hsl(var(--dna-accent-hue) 20% var(--dna-accent-lightness) / .14)}

#save-status{display:inline-flex;align-items:center;justify-content:center;flex:0 0 12px;height:28px;position:relative}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:450px){.masthead nav{gap:10px}}

/* Account controls use the same quiet paper surface as the note. */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:40px 24px}
.auth-card{width:100%;max-width:360px}
.auth-card .wordmark{display:inline-flex;margin-bottom:36px}
.auth-card h1{font:400 30px/1.3 Georgia,serif;margin:0 0 10px}
.auth-intro,.auth-hint,.auth-switch{font-size:13px;line-height:1.6;opacity:.75}
.auth-card form{display:flex;flex-direction:column;margin-top:28px;gap:10px}
.auth-card label{font-size:12px;margin-top:8px}
.auth-card input{width:100%;padding:11px 12px;border:1px solid #93918060;border-radius:5px;background:transparent;color:inherit;font:inherit}
.auth-card input:focus{outline:2px solid #87957a;outline-offset:2px}
.auth-card details{font-size:12px;margin:10px 0;line-height:1.6}
.auth-card details label{display:block;margin-bottom:8px}
.auth-card summary{cursor:pointer;opacity:.75}
.auth-hint{font-size:11px;margin:0}
.account-action{padding:11px 18px;border:1px solid #93918070;border-radius:5px;background:#87957a25;color:inherit;cursor:pointer;font:inherit}
.auth-card .account-action{margin-top:16px}
.auth-switch{margin-top:24px;text-align:center}
.auth-card a{color:inherit}
.auth-error{color:#b96d54;font-size:13px;line-height:1.5}
.account-email{overflow-wrap:anywhere;font-size:14px}
#account-status{font-size:12px;max-width:300px}
@media(max-width:450px){.masthead nav{gap:8px}.masthead{padding-left:16px;padding-right:16px}}

@media(max-width:450px){#search-open span,.nav-divider{display:none}}
