/* Two reading surfaces, one script. The traces belong to the illustration. */
.gaze-comparison { --sweep:#deb08c; padding-block:110px 100px; border-top:1px solid var(--rule); }
html[data-theme='light'] .gaze-comparison { --sweep:#98552f; }
.gaze-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:10%; align-items:center; margin-bottom:55px; }
.home-page .gaze-intro h2 { font:400 clamp(44px,5.9vw,88px)/1.03 var(--sans); letter-spacing:-.065em; margin:0 0 25px; }
.gaze-intro p { max-width:34em; color:var(--muted); font-size:19px; line-height:1.65; margin:0; }
.gaze-aperture { position:relative; width:min(100%,360px); justify-self:center; color:var(--signal); }
.gaze-aperture svg { display:block; width:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:1; }
.gaze-aperture .aperture-contour { stroke:var(--quiet); }
.gaze-aperture .aperture-orbit { opacity:.25; stroke-dasharray:2 6; }
.gaze-aperture .aperture-iris { transform:translate(var(--eye-x,0px),var(--eye-y,0px)); }
.gaze-aperture .aperture-pupil { fill:currentColor; stroke:none; }
.gaze-aperture .aperture-light { fill:var(--page); stroke:none; }
.gaze-aperture p { font-size:15px; text-align:center; margin-top:18px; color:var(--quiet); }
.gaze-comparison-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-block:1px solid var(--rule); margin-bottom:25px; }
.gaze-comparison-bar p { margin:0; font-size:16px; color:var(--muted); }
.gaze-clock { font:14px var(--mono); color:var(--quiet); white-space:nowrap; font-variant-numeric:tabular-nums; }
.gaze-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.gaze-example { margin:0; min-width:0; --trace:var(--sweep); }
.gaze-example[data-reading='stations'] { --trace:var(--signal); }
.gaze-example-head { display:flex; align-items:baseline; gap:12px; justify-content:space-between; margin-bottom:15px; }
.gaze-example h3 { font:500 22px/1.3 var(--sans); letter-spacing:-.035em; margin:0; }
.gaze-example-head > span { color:var(--quiet); font-size:14px; }
.gaze-reading-eye { display:block; width:min(100%,340px); height:95px; margin:2px auto 20px; fill:none; stroke:var(--trace); stroke-width:1.5; }
.gaze-reading-iris { transform:translate(var(--reading-eye-x,0px),var(--reading-eye-y,0px)); transition:transform 130ms ease-out; }
[data-reading='stations'] .gaze-reading-iris { transition-duration:260ms; }
.reading-pupil { fill:var(--trace); stroke:none; }.reading-glint { fill:var(--page); stroke:none; }
.gaze-screen { position:relative; height:clamp(310px,27vw,410px); overflow:hidden; border:1px solid var(--rule); border-radius:9px; background:#101713; color:#f0f0e6; isolation:isolate; box-shadow:0 28px 48px -38px #000b; }
.gaze-example .gaze-screen { --trace:#efbc94; }
.gaze-example[data-reading='stations'] .gaze-screen { --trace:#87e2bd; }
.gaze-screen > video { width:100%; height:100%; object-fit:cover; opacity:.8; }
.gaze-screen::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#07120f85,transparent 75%); z-index:0; pointer-events:none; }
.gaze-crawl { position:absolute; z-index:1; left:11%; top:25%; width:78%; height:68%; overflow:hidden; mask-image:linear-gradient(transparent,#000 14%,#000 82%,transparent); }
.gaze-prose { position:relative; font-size:clamp(19px,1.65vw,25px); line-height:1.65; letter-spacing:-.025em; margin:22px 0 0; padding:0 12px; background:#10251d95; }
.gaze-prose span,.gaze-station p span { color:#ced9ce; }
.gaze-prose .is-read,.gaze-station p .is-read { color:#9aac9b; }
.gaze-prose .is-current { color:white; text-decoration:underline; text-decoration-color:#eeb889; text-underline-offset:5px; text-decoration-thickness:2px; }
.gaze-station { position:absolute; z-index:1; left:14%; top:43%; width:33%; min-height:142px; border:1px solid #82958a70; border-radius:5px; padding:13px 14px 18px; background:#10251dbb; opacity:.48; transition:opacity .35s,border-color .35s,box-shadow .35s; }
.gaze-station + .gaze-station { left:57%; }
.gaze-station.is-live { opacity:1; border-color:#86d9b1; box-shadow:0 12px 28px -16px #050e0b; }
.gaze-station-dot { display:block; height:5px; width:5px; border-radius:50%; background:#89d9b9; margin:0 0 9px; }
.gaze-station p { margin:0; font-size:clamp(17px,1.45vw,22px); letter-spacing:-.025em; line-height:1.38; }
.gaze-station p .is-current { color:#f2fbe9; text-decoration:underline; text-decoration-color:#85ddbd; text-underline-offset:4px; text-decoration-thickness:2px; }
.gaze-station::after { content:''; position:absolute; left:14px; bottom:9px; width:calc((100% - 28px) * var(--sentence-progress,0)); height:1px; background:#85ddbd; }
.gaze-screen-path { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; }
.gaze-screen-path polyline { fill:none; stroke:var(--trace); stroke-width:1.3; vector-effect:non-scaling-stroke; opacity:.7; }
.gaze-target { position:absolute; z-index:3; left:var(--target-x,50%); top:var(--target-y,50%); width:17px; height:17px; transform:translate(-50%,-50%); border:1px solid var(--trace); border-radius:50%; box-shadow:0 0 0 5px color-mix(in srgb,var(--trace) 12%,transparent); pointer-events:none; }
.gaze-target::after { content:''; position:absolute; width:3px; height:3px; background:var(--trace); border-radius:50%; inset:0; margin:auto; }
.gaze-readout { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:15px; margin:17px 0; }
.gaze-readout strong { color:var(--trace); font-weight:500; }
.gaze-trace { position:relative; border-block:1px solid var(--rule); height:95px; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--rule) 25%); }
.gaze-trace svg { width:100%; height:100%; overflow:visible; }
.gaze-trace path { fill:none; stroke:var(--trace); stroke-width:1.6; vector-effect:non-scaling-stroke; }
.gaze-trace .gaze-y-trace { stroke-dasharray:3 5; opacity:.55; }
.gaze-trace .gaze-trace-guide { opacity:.18; stroke-width:1; }
.gaze-trace .gaze-playhead { stroke:var(--quiet); stroke-width:1; vector-effect:non-scaling-stroke; }
.gaze-axis-labels { display:flex; justify-content:space-between; color:var(--quiet); font:13px var(--mono); margin-top:7px; }
.gaze-example figcaption { color:var(--muted); font-size:17px; line-height:1.6; margin-top:20px; max-width:33em; }
.gaze-trace-key { display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; margin:29px 0 12px; color:var(--quiet); font-size:14px; }
.gaze-trace-key span { display:flex; align-items:center; gap:8px; }
.gaze-trace-key i { width:24px; border-top:1px solid var(--quiet); }
.gaze-trace-key span:last-child i { border-top-style:dashed; }
.gaze-comparison-foot { display:flex; justify-content:space-between; gap:40px; align-items:center; border-top:1px solid var(--rule); padding-top:23px; }
.gaze-comparison-foot p { color:var(--quiet); font-size:14px; line-height:1.6; max-width:49em; margin:0; }
.gaze-comparison-foot .text-link { flex:none; font-size:17px; }
@media(max-width:1050px) {
 .gaze-pair { gap:24px; }.gaze-screen { height:330px; }.gaze-station { left:8%; width:38%; padding-inline:10px; }.gaze-station + .gaze-station { left:54%; }.gaze-station p { font-size:18px; }.gaze-example h3 { font-size:20px; }.gaze-example-head > span { font-size:13px; }
}
@media(max-width:760px) {
 .gaze-comparison { padding-block:70px; }.gaze-intro { grid-template-columns:1fr; gap:32px; margin-bottom:35px; }.home-page .gaze-intro h2 { font-size:48px; }.gaze-intro p { font-size:18px; }.gaze-aperture { width:240px; }.gaze-aperture p { font-size:14px; margin-top:5px; }.gaze-pair { grid-template-columns:1fr; gap:38px; }.gaze-comparison-bar { align-items:start; gap:12px; }.gaze-comparison-bar p { font-size:15px; }.gaze-clock { font-size:13px; }.gaze-screen { height:340px; }.gaze-prose { font-size:21px; }.gaze-station { top:44%; min-height:146px; }.gaze-station p { font-size:19px; }.gaze-example figcaption { font-size:17px; margin-top:14px; }.gaze-comparison-foot { flex-direction:column; align-items:start; gap:18px; }.gaze-trace-key { margin-top:25px; }
}
@media(prefers-reduced-motion:reduce) {
 .gaze-aperture .aperture-iris { transform:none; }.gaze-station,.gaze-reading-iris { transition:none; }
}