.timeline{width:780px}.intro{left:38px;right:30px}.intro h1{margin-bottom:10px}.intro .hint{font:10px/1.6 var(--mono);margin-top:12px!important}.lane-legend{display:flex;gap:18px;margin-top:21px}.lane-key{display:flex;align-items:center;gap:8px;font:11px var(--mono);color:var(--dim)}.lane-key:before{content:'';height:14px;width:5px;border-radius:4px;background:var(--lane)}.thread-filter{display:flex;align-items:center;gap:10px;font:11px var(--mono);color:var(--dim);margin-top:18px}select{font:12px var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 10px;max-width:100%}.axis-label{left:38px;font:10px/1.6 var(--mono);width:78px}.axis-label:after{left:85px;top:10px}.axis-label small{display:block;font-size:9px;opacity:.65}.rail{opacity:.65}.event{left:252px;width:min(468px,calc(100% - 280px));border-color:transparent;padding:17px 20px}.event .date{font:10px/1.6 var(--mono);letter-spacing:.3px}.event strong{font-size:23px;letter-spacing:-.3px;line-height:1.3}.event small{font-size:13px;line-height:1.65}.event .read{font-size:11px}.event.selected{border-color:color-mix(in srgb,var(--lane) 24%,transparent)}.event.selected:before{background:var(--lane)}.event.selected .date{color:var(--lane)}.event:focus-visible{outline-offset:3px}.event-node{left:0;width:10px;height:10px;opacity:1!important;box-shadow:0 0 0 5px var(--base);z-index:3}.event-node:after{display:none}.activity{width:36px;z-index:2}.activity .drift{animation:none!important;width:10px;opacity:.72;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--tilt,0deg));transform-origin:center;will-change:transform;box-shadow:0 0 24px color-mix(in srgb,var(--tone) 8%,transparent);transition:width .3s,opacity .3s,box-shadow .3s}.activity.engaged .drift,.activity:focus-visible .drift,.activity.selected .drift,.activity.engaged .drift{width:13px;opacity:1;background:var(--tone);box-shadow:0 0 25px color-mix(in srgb,var(--tone) 23%,transparent)}.activity.selected{z-index:4}.graph{position:absolute;left:0;top:0;width:100%;overflow:visible;pointer-events:none;z-index:1}.connection{fill:none;stroke-width:1.4;opacity:.2;transition:opacity .25s,stroke-width .25s}.connection.tangent{stroke-dasharray:4 6}.connection.return{stroke-dasharray:2 8}.connection.related{opacity:.75;stroke-width:2}.timeline.has-selection .connection:not(.related){opacity:.1}.gap-label{position:absolute;left:38px;right:40px;border-top:1px dashed #212a3355;padding-top:8px;font:9px var(--mono);color:var(--dim);opacity:.75}.end-note{position:absolute;left:38px;right:38px;font:10px/1.8 var(--mono);color:var(--dim);border-top:1px solid var(--line);padding-top:22px}.motion-toggle{border:0;background:none;color:var(--dim);font:15px var(--mono);width:30px;height:34px}.motion-toggle[aria-pressed=true]{color:var(--green)}.reader{width:min(780px,55vw)}.reader-scroll{padding-left:40px}:is(.reader,.passage-content) .eyebrow{font:11px/1.6 var(--mono)}:is(.reader,.passage-content) h2{font-size:43px;line-height:1.16;letter-spacing:-1.4px}:is(.reader,.passage-content) .deck{font-size:19px}:is(.reader,.passage-content) .date-note{font:10px/1.7 var(--mono);color:var(--dim);margin:-18px 0 30px}:is(.reader,.passage-content) blockquote{font-size:21px;white-space:pre-wrap;overflow-wrap:anywhere}.quote-attribution{font:10px var(--mono);color:var(--dim);margin:0 0 12px}.source-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.source-list button{font-size:10px;text-align:left}.related-heading{font:11px var(--mono);color:var(--dim);margin:0 0 20px}.related-link{display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;padding:17px 0}.related-link strong{display:block;font-size:17px;font-weight:500;color:var(--ink)}.related-link small{display:block;font:10px/1.7 var(--mono);color:var(--dim);margin-top:6px}.related-link:hover strong{color:var(--green)}.reader-links{display:flex;flex-wrap:wrap;gap:18px;margin:28px 0}.reader-links a{color:var(--green);text-underline-offset:5px;font-size:13px}:is(.reader,.passage-content) .process{font:10px/1.8 var(--mono)}:is(.reader,.passage-content) .process a{color:var(--dim)}#source{max-width:680px}#source-context{line-height:1.8;font-size:15px}#source-excerpt{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.85 var(--mono)}details{margin-top:24px}summary{cursor:pointer;color:var(--green);font-size:13px;padding:10px 0}.load-error{padding:40px;font-size:16px;color:var(--dim)}
@media(min-width:1200px){.reading .dock{width:min(530px,calc(45vw - 48px))}.reading .timeline{transform:translateX(calc(-1 * min(21vw,330px,calc((100vw - 780px)/2 - 16px))))}}
@media(max-width:1199px){.reader{width:100%;top:0}.reader-scroll{padding-left:max(24px,calc((100vw - 650px)/2));padding-right:max(24px,calc((100vw - 650px)/2))}.reading .timeline{transform:none}}
@media(max-width:800px){.timeline{width:100%}.intro{left:24px}.event{left:225px;width:calc(100% - 245px)}.axis-label{left:24px}}
@media(max-width:600px){.timeline{width:100%}.intro{left:20px;top:30px}.intro h1{font-size:31px}.intro p:not(.eyebrow){font-size:12px}.intro .hint{font-size:9px}.lane-legend{gap:11px;margin-top:18px}.lane-key{font-size:9px;gap:5px}.lane-key:before{width:4px;height:12px}.thread-filter{margin-top:14px}.event{left:142px;width:calc(100% - 156px);padding:12px 10px}.event strong{font-size:18px;line-height:1.4}.event .date{font-size:9px}.event small{font-size:11px}.event .read{font-size:10px}.axis-label{left:16px;font-size:9px;width:57px}.axis-label small{font-size:8px}.axis-label:after{display:none}.gap-label{left:16px;right:16px;font-size:8px}.brand{font-size:11px}.brand span{margin-left:7px}:is(.reader,.passage-content) h2{font-size:36px;line-height:1.2}:is(.reader,.passage-content) .deck{font-size:18px}:is(.reader,.passage-content) blockquote{font-size:18px}:is(.reader,.passage-content) .process{font-size:10px}.end-note{left:20px;right:20px}.motion-toggle{width:24px}.dock-hint{line-height:1.5}.dock{padding:10px}.depths button{font-size:9px}.reader-scroll{padding-left:22px;padding-right:22px}}
.activity{width:24px}.lane-legend{flex-wrap:wrap;gap:12px 17px}.axis-label{width:72px}.axis-label:after{left:75px;width:11px}article>.source-button{margin-bottom:26px}
@media(min-width:601px) and (max-width:800px){.event{left:252px;width:calc(100% - 272px)}}
@media(max-width:600px){.activity{width:16px}.activity .drift{width:7px}.activity.engaged .drift,.activity:focus-visible .drift,.activity.selected .drift,.activity.engaged .drift{width:9px}.event{left:166px;width:calc(100% - 180px)}.lane-legend{gap:10px 14px;max-width:340px}.lane-key{font-size:9px}.axis-label{width:45px}.axis-label:after{display:none}.event .date{font-size:8px}.event small{font-size:11px}.intro .hint{max-width:275px}}
@media(prefers-reduced-motion:reduce){.drift{transform:none!important;will-change:auto!important}}

/* Shared-clock edition: persistent product navigation and time-positioned activity. */
:root{--header-height:118px}
header.site{inset:0 0 auto;height:auto;display:block;padding:0 max(24px,calc((100vw - 1240px)/2));background:#0a0e12e8;backdrop-filter:blur(22px);border-bottom:1px solid #ffffff12;transition:box-shadow .25s,background .25s;z-index:6}
header.site.scrolled{background:#0a0e12f2;box-shadow:0 9px 32px #0004}
.title-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:76px}
.product-home{background:none;border:0;padding:10px 0;text-align:left;line-height:1.2}
.product-parent{display:block;font:9px var(--mono);color:var(--dim);margin-bottom:5px;letter-spacing:.5px}
.product-title{font:500 24px var(--sans);letter-spacing:-.7px}.preview-badge{font:9px var(--mono);color:var(--green);letter-spacing:0;margin-left:12px;vertical-align:middle}
.title-actions{display:flex;align-items:center;gap:24px}.current-date{font:10px var(--mono);color:var(--dim)}
.title-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 0 12px}.title-nav .lane-legend{margin:0;gap:16px}.title-nav .thread-filter{margin:0}.title-nav select{padding:5px 8px;font-size:11px;background:transparent;max-width:220px}.title-nav .lane-key{font-size:10px}
.viewport{top:var(--header-height)}.reader{top:var(--header-height)}
.timeline{width:min(960px,100%)}.intro{top:34px;left:24px;right:24px;text-align:center}.intro h1{font-size:38px}.intro .time-explanation{font:10px/1.6 var(--mono)!important;margin-top:12px!important}.intro .hint{max-width:none}
.time-tick{position:absolute;left:24px;right:24px;border-top:1px solid #ffffff05;pointer-events:none;font:9px var(--mono);color:#61727e;z-index:0}.time-tick span{position:absolute;left:0;top:7px}.time-tick.day-tick{border-top-color:#ffffff0c;color:#95a5ad}
.activity{width:16px;z-index:2;overflow:visible}.activity .drift{height:var(--duration);width:7px;border-radius:3px;min-height:0;opacity:.75;transform:translateX(var(--dx,0px));background:var(--tone);box-shadow:none;position:absolute;top:0;left:50%;margin-left:-3.5px;transition:width .25s,opacity .25s}
.activity.span .drift{background:color-mix(in srgb,var(--tone) 42%,transparent);border-top:2px solid var(--tone);border-bottom:2px solid var(--tone);box-sizing:content-box;height:max(0px,calc(var(--duration) - 4px));max-height:var(--duration);overflow:hidden}
.activity.point .drift{height:3px;width:12px;left:2px;margin-left:0;top:-1px}
.activity.day .drift{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--tone) 20%,transparent) 5px 6px);border:1px dashed color-mix(in srgb,var(--tone) 55%,transparent);box-sizing:border-box}
.activity.engaged .drift,.activity:focus-visible .drift,.activity.engaged .drift,.activity.selected .drift{width:9px;opacity:1;box-shadow:0 0 18px color-mix(in srgb,var(--tone) 22%,transparent)}
.activity.point.engaged .drift,.activity.point.engaged .drift{width:12px}.activity.day.engaged .drift,.activity.day.engaged .drift{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--tone) 25%,transparent) 5px 6px)}
.event-node{width:8px;height:8px;z-index:3;box-shadow:0 0 0 3px var(--base);transform:translateY(-4px)}
.event{transform:none;padding:20px 22px;background:#11161cf5;border:1px solid var(--line);box-shadow:0 12px 45px #0007;backdrop-filter:blur(16px);opacity:0;pointer-events:none;z-index:5;transition:opacity .2s,border-color .2s;}
.event.engaged,.event:focus-visible{opacity:1;pointer-events:auto;border-color:color-mix(in srgb,var(--lane) 42%,var(--line))}.event strong{font-size:22px}.event small{font-size:12px}.event .moment-time{font:9px/1.6 var(--mono);color:var(--lane);margin-top:14px}.event .date{font-size:9px}.event .read{margin-top:14px}.chapter-detail{font-size:10px}
.label-leader{fill:none;stroke-width:1;opacity:0;transition:opacity .2s}.label-leader.engaged{opacity:.5}
.connection{stroke-width:1.2;opacity:.25}.connection.related{opacity:1;stroke-width:3;filter:drop-shadow(0 0 5px #ffffff22)}.has-engagement .connection:not(.related){opacity:.05}.has-engagement .activity:not(.connected){opacity:.28}.activity{transition:opacity .2s}.activity.connected .drift{opacity:1}.graph{z-index:1}
.end-note{font-size:10px}
@media(min-width:1200px){.reading .timeline{transform:translateX(calc(-1 * min(21vw,300px,calc((100vw - 960px)/2 + 80px))))}}
@media(max-width:1199px){.reader{top:0}}
@media(max-width:700px){header.site{padding:0 18px}.current-date{display:none}.title-actions{gap:8px}.title-nav{gap:12px;align-items:flex-start}.title-nav .lane-legend{gap:8px 12px;max-width:250px}.title-nav select{max-width:120px}.title-nav .lane-key{font-size:8px}.product-title{font-size:22px}.preview-badge{font-size:8px;margin-left:8px}.title-row{min-height:70px}.intro h1{font-size:31px}.intro .hint{font-size:9px}.time-tick{left:15px;right:15px}.time-tick span{font-size:8px}.event{padding:16px 18px}.event strong{font-size:20px}.event small{font-size:12px}.event .date{font-size:9px}.activity{width:16px}.activity .drift{width:6px}.intro .time-explanation{font-size:9px!important}}
@media(prefers-reduced-motion:reduce){.event,.connection,.label-leader{transition:none}}
.activity.span .drift{height:var(--duration);max-height:none;border:0;box-sizing:border-box;background:linear-gradient(var(--tone) 0 2px,transparent 2px calc(100% - 2px),var(--tone) calc(100% - 2px) 100%),color-mix(in srgb,var(--tone) 42%,transparent)}
.time-mode{font:10px var(--mono);color:var(--dim);border:0;background:none;padding:6px 0;white-space:nowrap;margin-left:auto}.time-mode:hover{color:var(--green)}.time-mode[aria-pressed=true]{color:var(--green)}
.event.featured:not(.engaged){opacity:1;pointer-events:auto;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}.event.featured:not(.engaged) .moment-time,.event.featured:not(.engaged) .chapter-detail{display:none}.event.featured:not(.engaged) .read{margin-top:10px}.event.featured:not(.engaged) strong{font-size:20px}.event.featured:not(.engaged) small{font-size:11px}
.has-engagement .event.featured:not(.engaged){opacity:.12;pointer-events:none}.reading .event.featured:not(.engaged){opacity:.15}
.time-break{position:absolute;left:24px;right:24px;width:calc(100% - 48px);display:flex;align-items:center;justify-content:center;padding:0 12px;background:linear-gradient(#0a0e12cc,#0a0e12fa 22%,#0a0e12fa 78%,#0a0e12cc);border:0;color:#81949d;font:10px var(--mono);z-index:4}.time-break:before,.time-break:after{content:'';height:1px;border-top:1px dashed #52606b60;flex:1;margin:0 16px}.time-break:hover{color:var(--green)}
@media(max-width:700px){.title-nav{flex-wrap:wrap;gap:8px 14px}.title-nav .lane-legend{flex:1;max-width:210px;min-width:160px}.title-nav .thread-filter{margin-left:auto}.time-mode{font-size:9px}.time-tick span{max-width:40px;line-height:1.7}.time-break{left:12px;right:12px;width:calc(100% - 24px);font-size:8px;line-height:1.7}.time-break:before,.time-break:after{margin:0 8px}.event.featured:not(.engaged){padding:8px 4px}.event.featured:not(.engaged) strong{font-size:15px}.event.featured:not(.engaged) small{display:none}.event.featured:not(.engaged) .date{font-size:8px}.event.featured:not(.engaged) .read{font-size:9px}}
.time-break{right:auto;width:54%;font-size:9px;line-height:1.6}.time-break:before,.time-break:after{margin:0 10px}.event.featured:not(.engaged){border-left:1px solid color-mix(in srgb,var(--lane) 20%,transparent);border-radius:0}
@media(max-width:700px){.time-break{left:12px;width:130px;font-size:8px;padding:0 8px}.time-break:before,.time-break:after{display:none}.event.featured:not(.engaged){border-left:0}}
/* The interaction envelope is independent of the measured time glyph. */
.activity{width:48px;touch-action:pan-y pinch-zoom;border-radius:18px}
.activity .drift{top:24px;left:50%}
.activity.point .drift{top:23px;left:18px}
.activity::before{content:'';position:absolute;inset:0;border-radius:18px;background:color-mix(in srgb,var(--tone) 7%,transparent);opacity:0;transition:opacity .2s;pointer-events:none}
.activity.engaged::before,.activity:focus-visible::before{opacity:1}
.activity:focus-visible{outline:2px solid var(--tone);outline-offset:2px}
.connection,.label-leader{stroke-linecap:round;stroke-linejoin:round}

.passage-navigation{margin:34px 0;border-top:1px solid var(--line);padding-top:20px}:is(.reader,.passage-content) .passage-progress{font:11px/1.6 var(--mono);color:var(--dim);margin-bottom:14px}.passage-steps{display:flex;gap:12px}.passage-link{flex:1;min-width:0;display:block;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:14px 16px}.passage-link small{display:block;font:10px var(--mono);color:var(--dim);margin-bottom:8px}.passage-link strong{display:block;font:500 15px/1.5 var(--sans);color:var(--green)}.passage-link:hover{border-color:#3fb95055}.passage-link:only-child{max-width:100%}
@media(max-width:600px){.passage-steps{flex-direction:column}}
.gap-controls{margin-left:auto;flex-shrink:0}.gap-controls>div{display:flex;gap:6px}.gap-controls button,.browse-moments{font:10px var(--mono);padding:9px 10px;color:var(--dim);background:var(--surface);border:1px solid var(--line);border-radius:6px;min-height:36px}.gap-controls button:hover:not(:disabled),.browse-moments:hover{color:var(--green);border-color:#3fb95055}.gap-controls button:disabled{opacity:.4}.gap-controls>span{display:block;text-align:right;font:9px var(--mono);color:var(--dim);margin-top:5px}.time-break.expanded{background:#0a0e12e8;border-top:1px dashed var(--line)}#moment-index{max-width:720px;max-height:85dvh;overflow:auto}#moment-index .dialog-head{position:sticky;top:-30px;padding:12px 0;background:var(--surface);z-index:1}.moment-index-item{display:block;width:100%;text-align:left;padding:14px 4px;border:0;border-top:1px solid var(--line);background:none}.moment-index-item small{display:block;font:10px/1.6 var(--mono);color:var(--dim);margin-bottom:5px}.moment-index-item strong{font:500 16px/1.5 var(--sans)}.moment-index-item:hover strong{color:var(--green)}
@media(max-width:1050px){.title-nav{flex-wrap:wrap}.title-nav .lane-legend{flex:1}.title-actions{gap:8px}.current-date{display:none}}
@media(max-width:600px){.title-row{flex-wrap:wrap;padding-bottom:10px;gap:6px}.title-actions{width:100%;justify-content:space-between}.title-nav{gap:10px}.gap-controls{order:3;width:100%;margin-left:0;display:flex;align-items:center;justify-content:space-between;gap:8px}.gap-controls>span{max-width:75px;text-align:right;font-size:8px;margin-top:0}.gap-controls button{font-size:9px;min-height:40px;padding:8px}.browse-moments{font-size:10px}.title-nav .lane-legend{min-width:150px}.title-nav .thread-filter{max-width:120px}}
/* Readable text and controls at normal size, with rem-based text enlargement. */
:root{--dim:#a6b2be}
.product-parent,.preview-badge,.current-date{font-size:.875rem;line-height:1.4}
.product-title{font-size:1.5rem}.product-home{padding:12px 0}.browse-moments,.gap-controls button,.title-nav select{font-size:.875rem;line-height:1.4;min-height:44px;padding:10px 12px}
.title-nav .lane-key{font-size:.875rem;line-height:1.4}.title-nav .lane-legend{gap:10px 16px}.title-nav{gap:18px;flex-wrap:wrap}.gap-controls>span{font-size:.8125rem;line-height:1.5;margin-top:6px}.gap-controls>div{flex-wrap:wrap}
.intro .eyebrow{font-size:.875rem;line-height:1.5}.intro h1{font-size:2.375rem}.intro p:not(.eyebrow){font-size:1rem;line-height:1.7}.intro .hint,.intro .time-explanation{font-size:.875rem!important;line-height:1.6!important}
.time-tick,.time-tick span{font-size:.75rem;line-height:1.5;color:var(--dim)}.time-tick span{max-width:104px}
.event .date,.event .moment-time,.event .read,.chapter-detail,.event.featured:not(.engaged) .date,.event.featured:not(.engaged) .read{font-size:.875rem;line-height:1.5}
.event strong,.event.featured:not(.engaged) strong{font-size:1.25rem;line-height:1.45}.event small,.event.featured:not(.engaged) small{font-size:1rem;line-height:1.65}.event.featured:not(.engaged){padding:16px 18px}
.has-engagement .event.featured:not(.engaged),.reading .event.featured:not(.engaged){opacity:1;pointer-events:auto}
.time-break{font-size:.8125rem;line-height:1.5;color:var(--dim);padding:4px 10px}.end-note{font-size:.875rem;line-height:1.7}
.depths button{font-size:.875rem;line-height:1.4;min-height:44px;padding:9px 8px}.zoom-button,.motion-toggle{min-width:44px;height:44px}.dock-top{gap:8px}.dock-hint{font-size:.8125rem;line-height:1.5}.dock{width:min(740px,calc(100vw - 32px))}.depths{flex-wrap:wrap}
:is(.reader,.passage-content) .eyebrow,:is(.reader,.passage-content) .date-note,:is(.reader,.passage-content) .process,.reader-toolbar,.quote-attribution,.source-list button,.source-button,:is(.reader,.passage-content) .passage-progress,.passage-link small,.related-link small,.related-heading,.reader-links a,:is(.reader,.passage-content) .back,dialog .meta,summary{font-size:.875rem;line-height:1.7}
:is(.reader,.passage-content) p{font-size:1.0625rem}:is(.reader,.passage-content) .deck{font-size:1.1875rem}:is(.reader,.passage-content) h2{font-size:2.6875rem}:is(.reader,.passage-content) blockquote{font-size:1.3125rem}.passage-link strong,.related-link strong{font-size:1rem;line-height:1.5}#source-excerpt{font-size:.9375rem}#source-context{font-size:1rem}.moment-index-item small{font-size:.875rem;line-height:1.6}.moment-index-item strong{font-size:1rem}.close{width:44px;height:44px}
header.site{max-height:45dvh;overflow-y:auto;scrollbar-width:thin}
@media(max-width:700px){.title-nav .lane-legend{min-width:0;max-width:none;flex-basis:100%}.title-nav .thread-filter{max-width:none}.title-nav select{max-width:100%;width:100%}.title-actions{flex-wrap:wrap}.gap-controls{flex-wrap:wrap}.gap-controls>span{max-width:none;text-align:left}.intro h1{font-size:2rem}.time-break{font-size:.75rem}.time-tick span{max-width:44px}.event.featured:not(.engaged){padding:8px 6px}.event.featured:not(.engaged) strong{font-size:1.0625rem}.event.featured:not(.engaged) .date,.event.featured:not(.engaged) .read{font-size:.8125rem}.event strong{font-size:1.25rem}.dock{padding:10px}.dock-top{gap:4px}.depths{gap:2px}.depths button{padding:8px 3px;font-size:.8125rem}.dock-hint{font-size:.75rem}:is(.reader,.passage-content) h2{font-size:2.125rem}}

/* Native selects need an explicit dark system palette, including their popup. */
:root{color-scheme:dark}select,select option{color:#dce3e9;background-color:#11171d}.title-nav select{background-color:#11171d;min-width:200px}.thread-filter{flex-shrink:1;min-width:0}.thread-filter select{width:100%}
.event-node{transform:translate(var(--dx,0px),-4px);will-change:transform}.activity.point .drift{display:none}.connection.related{stroke-width:2;filter:none}
@media(max-width:700px){.title-nav select{min-width:0}.title-nav .thread-filter{flex:1;max-width:100%}}

.event.featured.occluded:not(.engaged){opacity:0;visibility:hidden;pointer-events:none}.event.engaged{z-index:8}
/* Text can grow without forcing toolbar rows beyond a narrow viewport. */
.gap-controls>div{flex-wrap:wrap}.depths{min-width:0;flex-wrap:wrap}.depths button{min-height:44px}.product-title{overflow-wrap:anywhere}.title-row>*{min-width:0}.title-actions>*{max-width:100%}
.event,.intro,.end-note,.time-tick span{overflow-wrap:anywhere}
@media(max-width:600px){.dock-top{flex-wrap:wrap;justify-content:center}.depths{order:-1;flex:1 0 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.depths button{overflow-wrap:anywhere}.dock-hint{line-height:1.5}}

/* Continuity across separate episodes must not resemble an activity bar. */
.connection.return{stroke-dasharray:2 7;stroke-width:1;opacity:.18}.connection.return.related{stroke-width:1.5;opacity:.8}

/* Navigation has its own fixed row; only the passage beneath it scrolls. */
.reader{display:grid;grid-template-rows:auto minmax(0,1fr);--reader-gutter:40px}
.reader-header{position:relative;z-index:2;background:var(--base);padding:12px 40px 16px var(--reader-gutter);border-bottom:1px solid var(--line);min-width:0}
.reader-header .reader-toolbar{position:static;padding:0 0 8px;background:none;min-height:44px}
#reader-crumb{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.reader-scroll{height:auto;min-height:0;padding:28px 40px 70px var(--reader-gutter);scrollbar-gutter:stable}
.reader-header .passage-navigation{margin:0;border:0;padding:0}
.reader-header .passage-progress{font-size:.875rem;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 10px}
.reader-header .passage-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.reader-header .passage-link{padding:10px 12px;min-height:68px;overflow:hidden}
.reader-header .passage-link small{font-size:.875rem;line-height:1.6;margin:0 0 4px;white-space:nowrap}
.reader-header .passage-link strong{font-size:1rem;line-height:1.5;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.reader-header .passage-link:disabled{opacity:.65}
.reader-header .passage-link:disabled strong{color:var(--dim)}
@media(max-width:1199px){.reader{--reader-gutter:max(22px,calc((100vw - 700px)/2))}.reader-header,.reader-scroll{padding-left:var(--reader-gutter);padding-right:var(--reader-gutter)}}
@media(max-width:600px){.reader-header{padding-top:8px;padding-bottom:12px}.reader-header .passage-steps{gap:8px}.reader-header .passage-link{padding:10px 8px}.reader-header .passage-link strong{display:none}.reader-header .passage-link small{white-space:normal;margin:0}.reader-header .passage-link{height:3.8rem}.reader-header .passage-progress{font-size:.8125rem}}
@media(max-height:550px){.reader-header .passage-link strong{display:none}.reader-header .passage-link{min-height:44px}.reader-header .passage-progress{display:none}.reader-header{padding-top:4px;padding-bottom:8px}.reader-header .reader-toolbar{padding-bottom:4px}}

/* The source layer opens directly onto the additional original words. */
#source{max-width:900px;max-height:calc(100dvh - 32px);padding:0;overflow:hidden}
#source .dialog-head{padding:18px 26px;border-bottom:1px solid var(--line);background:var(--surface)}
#source .dialog-head .eyebrow{margin:0;font-size:.8125rem;line-height:1.5}
.source-scroll{overflow:auto;max-height:calc(100dvh - 118px);padding:0 28px 28px;overscroll-behavior:contain;scrollbar-gutter:stable}
#source h2{font-size:1.6rem;line-height:1.4;overflow-wrap:anywhere}
#source-context{color:var(--dim);font-size:.9375rem;line-height:1.8;margin-bottom:28px}
.source-turns{list-style:none;margin:0;padding:0}
.source-turn{border-top:1px solid var(--line);padding:24px 0}
.source-turn-heading{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.source-turn-heading strong{font-size:1rem;font-weight:500;color:var(--green)}
.source-turn-heading time,.source-turn-reference{font:.8125rem/1.6 var(--mono);color:var(--dim)}
.source-turn-reference{margin:6px 0 0}
#source .source-words{font:1.0625rem/1.8 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0 0;padding:0 0 0 18px;border-left:2px solid color-mix(in srgb,var(--green) 50%,var(--line))}
.source-omission{color:var(--dim);font:.9375rem/1.5 var(--mono);margin:16px 0 0;padding-left:18px}
#source-scope{border-top:1px solid var(--line);padding-top:18px;margin-bottom:0}
@media(max-width:600px){#source{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}#source .dialog-head{padding:12px 18px}.source-scroll{padding:0 18px 20px;max-height:calc(100dvh - 88px)}#source h2{font-size:1.3rem}.source-turn-heading{gap:6px}#source .source-words{font-size:1rem;padding-left:12px}}

/* Links to the paired essay and the rest of ProbablyFine. */
.companion-link{font:12px/1.4 var(--mono);color:var(--ink);display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;text-decoration:none}
.companion-link:hover{color:var(--green);border-color:var(--green)}
@media(max-width:760px){.title-actions .companion-link{font-size:12px;padding:6px}.title-actions #current-date{display:none}}

.product-brand .product-parent{color:var(--dim);text-decoration:none}.product-brand .product-parent:hover{color:var(--green)}

/* 2026-09-16, probablyfine-site#13: phones and short screens get one header row, a single-row dock and a shorter intro;
   the reader on wide screens fades the cards it covers; source excerpts render bold and code. */
[hidden]{display:none!important}
.filters-toggle{display:none}
.label-short{display:none}
@media(hover:none){.pointer-only{display:none}}
@media(hover:hover){.touch-only{display:none}}
.event.behind-reader{opacity:.14;pointer-events:none;transition:opacity .3s}
header.site{max-height:45svh}
.source-words strong{font-weight:600;color:var(--ink)}.source-words code{font:.9em var(--mono);background:#ffffff0d;padding:1px 4px;border-radius:4px}
@media(max-width:700px),(max-height:520px){
  header.site{max-height:none;overflow:visible;padding:0 14px}
  .title-row{min-height:0;gap:6px 10px;padding:4px 0 8px;align-items:center}
  .product-brand{flex:1 1 auto;min-width:0}.product-home{padding:4px 0}.product-parent{margin-bottom:1px}.product-title{font-size:20px}.preview-badge{margin-left:6px}
  .filters-toggle{display:inline-flex;align-items:center;justify-content:center;font:12px var(--mono);color:var(--dim);background:var(--surface);border:1px solid var(--line);border-radius:6px;min-height:40px;padding:0 12px;white-space:nowrap}
  .filters-toggle[aria-expanded=true]{color:var(--green);border-color:#3fb95055}
  .title-actions{display:flex;flex-wrap:nowrap;gap:8px;align-items:center}
  .title-actions .companion-link,.browse-moments{font-size:12px;padding:0 10px;min-height:40px;height:40px;white-space:nowrap;justify-content:center;text-align:center;display:inline-flex;align-items:center}
  .title-actions #current-date{display:none}
  .title-nav{display:none}
  header.site.filters-open .title-nav{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:6px 0 14px;border-top:1px solid var(--line)}
  header.site.filters-open .gap-controls{order:0;width:100%;margin:0}
  header.site.filters-open .thread-filter{max-width:none;margin:0}
  .thread-filter select{font-size:16px;padding:10px 12px;width:100%;max-width:none}
  .intro{top:14px}.intro .eyebrow{display:none}.intro h1{font-size:1.75rem;margin-bottom:6px}.intro p:not(.eyebrow){font-size:.9375rem;line-height:1.5}.intro .hint{margin-top:6px!important;font-size:.8125rem!important}.intro .time-explanation{display:none}
  .dock{bottom:10px;padding:8px 10px;width:min(740px,calc(100vw - 24px))}.dock-hint{display:none}
  .dock-top{flex-wrap:nowrap;justify-content:space-between;gap:4px}
  .depths{order:0;flex:1 1 auto;display:flex;gap:2px;flex-wrap:nowrap}.depths button{min-height:44px;padding:8px 4px;font-size:.8125rem;flex:1 1 0}
  .zoom-button{min-width:44px;width:44px;height:44px}.motion-toggle{width:36px;min-width:36px}
}
@media(max-width:700px){
  .title-row{flex-wrap:wrap}
  .title-actions{flex:1 0 100%;order:3;width:100%}
  .title-actions>*{flex:1 1 0;min-width:0}
  .label-long{display:none}.label-short{display:inline}
  .time-tick span{max-width:64px}
}