/* Observe: the camera is the hero; the aura is a layer around what it sees. Aura first, information second, interface last. */
body.observe{background:#070909;overflow:hidden;height:100dvh;font-size:15px}
.world{position:fixed;inset:0;background:#070909}
.world #camera,.world #field-gl,.world #field,.world .depth{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world #camera{opacity:.9}
/* Depth cue: the layer, its labels and brackets lag the phone's rotation by a few px (set as --px/--py). The video never moves. No wrapper transform, so the luminous canvas still blends with the video beneath it. */
.depth{--px:0px;--py:0px}
.world #field-gl,.world #field{transform:translate3d(var(--px),var(--py),0);will-change:transform}
.world #field-gl.luminous{mix-blend-mode:screen}
.labels{transform:translate3d(var(--px),var(--py),0)}
/* Cinematic post: static film grain and a vignette. Static by design: nothing here moves on the clock. */
.grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.86 0 0 0 0 0.78 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
.grain:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 52%,#00000055 100%)}
.chrome{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:max(14px,env(safe-area-inset-top)) 18px 14px;pointer-events:none;z-index:6}
.chrome>*{pointer-events:auto}
.chrome-top{top:0}
.chrome-bottom{bottom:0;padding:14px 18px max(18px,env(safe-area-inset-bottom));justify-content:center;gap:10px}
.mark{font-size:15px;letter-spacing:.24em;color:#e9e3d6;text-shadow:0 1px 6px #000;display:flex;gap:6px;align-items:center}
.mark span{color:var(--accent);letter-spacing:0}
.notice{margin:0;font-size:12px;letter-spacing:.06em;color:#e9ca91;text-align:center;text-shadow:0 1px 5px #000;flex:1;min-width:0}
.notice:empty{display:none}
.quiet-link{font-size:12px;color:#bfc7bf;text-shadow:0 1px 5px #000}
/* Gate: the live field has its own working surface, with copy beside it. */
.gate{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.2fr);align-items:center;gap:clamp(24px,5vw,88px);padding:100px clamp(24px,6vw,104px) 48px;background:#070909;overflow:auto;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.gate.closing{opacity:0;transform:scale(1.04);pointer-events:none}
.gate-copy{position:relative;max-width:600px;min-width:0}
.gate .eyebrow{color:#b2c0b5;font-size:.75rem;letter-spacing:.17em;margin:0 0 26px}
.gate h1{font:normal clamp(3rem,5.5vw,6.5rem)/1.02 var(--serif);letter-spacing:-.05em;margin:0 0 24px;color:#eee9df}
.gate h1 em{display:inline-block;color:#dec29b;font-weight:400}
@keyframes rise{to{opacity:1;transform:none}}
.gate .lede{font-size:1rem;line-height:1.75;color:#b5c0b8;max-width:340px;margin:0 0 32px}
.gate-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px 24px}
.open-button{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;background:#dfc59f;color:#14231d;border:1px solid #dfc59f;font:500 1rem var(--sans);padding:17px 24px;border-radius:4px;cursor:pointer;transition:background .2s,transform .2s;min-height:56px}
.open-button:hover{background:#ecd5b5;transform:translateY(-2px)}
.open-button span{font-size:1.3rem}
.open-button:disabled{opacity:.6;cursor:wait}
.study-link{font-size:.875rem;color:#d0d7cc;text-decoration:underline;text-underline-offset:5px}
.fine{font-size:.75rem;color:#9aa89e;margin:22px 0 0;max-width:440px;line-height:1.8}
.preview{min-width:0;width:100%;max-width:820px;justify-self:center}
.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.75rem;letter-spacing:.14em;color:#c6d0c8}
.preview-scene{position:relative;width:100%;aspect-ratio:4/3;max-height:58dvh;min-height:210px;overflow:hidden;isolation:isolate}
.gate #hero-src,.gate #hero-gl,.gate #hero-fallback{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gate #hero-src{opacity:.24;filter:saturate(.8);mask-image:radial-gradient(ellipse at center,#000 28%,transparent 73%);transition:opacity .25s}
.gate #hero-gl{mix-blend-mode:screen;transition:opacity .25s}
.preview.source-visible #hero-src{opacity:.9}
.preview.source-visible #hero-gl,.preview.source-visible #hero-fallback{opacity:0}
.preview-controls{border-top:1px solid #29352e;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px}
.preview-modes{display:flex;gap:4px}
.preview-modes button,.preview-quiet{border:0;background:transparent;color:#a6b5aa;cursor:pointer;font:.875rem var(--sans);min-height:44px;padding:10px 12px;white-space:nowrap}
.preview-modes button{position:relative}
.preview-modes button[aria-pressed=true]{color:#f1dfc1;background:#d6b58214}
.preview-modes button[aria-pressed=true]:after{content:'';position:absolute;bottom:2px;left:12px;right:12px;height:1px;background:#d7bb8f}
.preview-modes button:disabled{opacity:.4;cursor:default}
.preview-quiet{padding-inline:6px;color:#c7d2c8}
.preview-description{font:1rem/1.5 var(--serif);color:#cfd6cc;margin:18px 0 6px;min-height:3em;max-width:400px}
.preview-note{font-size:.75rem;color:#95a499;margin:0;line-height:1.5}
.preview-subject{position:absolute;left:30%;top:40%;transform:translate(-50%,-100%);z-index:2;border:1px solid #dfc59faa;border-radius:99px;background:#111b17dd;color:#efdfc8;font:12px var(--sans);padding:10px 13px;min-height:44px;cursor:pointer;white-space:nowrap}
.preview-subject[data-preview-subject=f2]{left:68%;top:70%;border-color:#82bab5;color:#b1ded7}
.preview-subject span{margin-left:6px;color:#bec9bf}
.preview-subject[aria-pressed=true]{background:#e1c8a1;color:#15241e}.preview-subject[aria-pressed=true] span{color:#253f32}
.preview-analysis{border-top:1px solid #34433a;margin:14px 0;padding:6px 0 14px}
.preview-analysis-top,.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.preview-analysis-top>span{font-size:10px;letter-spacing:.16em;color:#b8c5b9}
.preview.has-reading .preview-scene{max-height:32dvh}
.subject-reading{--reading-accent:#ddc49f;--reading-hue:52deg;min-width:0}
.reading-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.reading-target{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#b9c9bc}
.reading-status{font-size:.75rem;letter-spacing:.02em;border:1px solid #496052;border-radius:99px;color:#b6d3bf;padding:5px 9px;white-space:nowrap}
[data-reading-status=limited] .reading-status{color:#e4c496;border-color:#6e573b}
.aura-reading-hero{position:relative;display:grid;grid-template-columns:116px minmax(0,1fr);gap:20px;align-items:center;margin:16px 0 18px;padding:20px;border:1px solid #34463c;background:radial-gradient(circle at 18% 50%,oklch(.66 .12 var(--reading-hue) / .16),transparent 45%),linear-gradient(135deg,#121b17,#0d1210);overflow:hidden}
.aura-reading-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff08 50%,transparent 70%)}
.aura-orb{position:relative;width:108px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,oklch(.88 .08 var(--reading-hue) / .72) 0 15%,oklch(.72 .14 var(--reading-hue) / .3) 28%,transparent 66%),conic-gradient(from 18deg,transparent,oklch(.78 .17 var(--reading-hue) / .75),transparent 32%,oklch(.82 .1 calc(var(--reading-hue) + 70deg) / .55),transparent 70%);filter:drop-shadow(0 0 18px oklch(.75 .13 var(--reading-hue) / .32))}
.aura-orb:before,.aura-orb:after{content:'';position:absolute;border-radius:50%;border:1px solid oklch(.82 .11 var(--reading-hue) / .5)}
.aura-orb:before{inset:8px}.aura-orb:after{inset:18px;border-style:dashed;opacity:.65}
.aura-orb-core{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0d1512;color:#f4e9d5;border:1px solid oklch(.84 .09 var(--reading-hue));font:normal 1.3rem var(--serif)}
.aura-copy{position:relative;z-index:1;min-width:0}
.aura-tone{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#c7d2c9}
.aura-title{font:normal clamp(2rem,4vw,3.1rem)/1 var(--serif);letter-spacing:-.04em;color:#f3ead9;margin:7px 0 8px}
.aura-statement{font:1rem/1.55 var(--sans);color:#bbc8bd;margin:0}
[data-aura-tone=positive] .aura-tone{color:#f0cf97}[data-aura-tone=positive] .aura-reading-hero{border-color:#755f3e;background:radial-gradient(circle at 18% 50%,#dcb6702b,transparent 45%),linear-gradient(135deg,#1e1b12,#0d1210)}
[data-aura-tone=turbulent] .aura-tone{color:#beb0f0}[data-aura-tone=turbulent] .aura-reading-hero{border-color:#514870;background:radial-gradient(circle at 18% 50%,#7765bf2b,transparent 45%),linear-gradient(135deg,#171525,#0d1210)}
.aura-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 20px}
.aura-score{display:grid;grid-template-columns:1fr auto;gap:5px 10px;padding:11px 12px;background:#111815;border:1px solid #2b3931}
.aura-score span{font-size:.75rem;color:#97a69b}.aura-score strong{font-size:.8125rem;color:#e5dfd3;font-weight:500}
.aura-score i{grid-column:1/-1;display:block;height:2px;background:#2d3932;overflow:hidden}.aura-score b{display:block;height:100%;background:oklch(.78 .13 var(--reading-hue));transition:width .35s ease}
.mind-note{margin:0 0 18px;padding:11px 12px;border-left:2px solid #7c8d82;background:#111815;color:#b9c4ba;font:.875rem/1.55 var(--sans)}
.reading-observed-label{font-size:.75rem;letter-spacing:.14em;color:#8fa096;margin:0 0 6px}
.reading-title{font:normal clamp(1.35rem,2.2vw,1.8rem)/1.25 var(--serif);letter-spacing:-.025em;margin:8px 0;color:#eee6d6}
.reading-summary{font:.875rem/1.65 var(--sans);color:#adbbaf;margin:10px 0 16px}
.reading-dimensions{display:grid;gap:0;margin:0}
.reading-dimension{display:grid;grid-template-columns:100px 1fr;gap:14px;padding:12px 0;border-top:1px solid #29392f;font-size:.875rem;line-height:1.6}
.reading-dimension dt{color:var(--reading-accent)}.reading-dimension dd{margin:0;color:#d0d9ce}
.reading-dimension[data-availability=unavailable] dd{color:#8e9d91}
.reading-action{color:#d3bb95;font-size:.875rem;line-height:1.6}
.reading-evidence,#scene-signals{font-size:.8125rem;line-height:1.7;color:#9fac9e}
.reading-evidence summary,#scene-signals>summary{cursor:pointer;padding:12px 0;color:#b5c2b6}
.reading-evidence ul{padding-left:16px}.reading-evidence li{margin-bottom:5px}
.sheet-top .eyebrow{margin:0;color:#abbbaf}
.sheet .chip{cursor:pointer;min-height:40px}
.sheet #scene-reading{border-top:1px solid #2b302e;margin-top:18px;padding-top:16px}
.sheet #scene-reading .eyebrow{color:#8e9f92}
.sheet #scene-signals{margin-top:12px}
@media(min-width:801px){.sheet{left:auto!important;right:20px!important;bottom:86px!important;width:min(440px,42vw);border:1px solid #344039;border-radius:8px;max-height:calc(100dvh - 180px)!important}}
@media(max-width:600px){.chrome-bottom{gap:6px;padding-inline:10px}.pill{padding-inline:12px!important}.preview-subject span{display:none}.aura-reading-hero{grid-template-columns:88px 1fr;gap:14px;padding:14px}.aura-orb{width:84px}.aura-orb-core{width:36px;height:36px}.aura-title{font-size:2rem}.aura-statement{font-size:.875rem}.aura-scores{grid-template-columns:1fr}.reading-dimension{grid-template-columns:86px 1fr}.sheet{max-height:70dvh!important}}
.observe button:focus-visible,.observe a:focus-visible{outline:2px solid #eed7b1;outline-offset:5px}
@media(max-width:800px){.gate{grid-template-columns:1fr;gap:26px;align-content:start;padding:100px 7% max(32px,env(safe-area-inset-bottom))}.gate-copy{max-width:540px}.gate h1{font-size:clamp(3.25rem,9vw,5.5rem);margin-bottom:16px}.gate .eyebrow{margin-bottom:18px}.gate .lede{max-width:410px;margin-bottom:22px}.gate-actions{gap:18px}.preview{max-width:570px}.preview-scene{min-height:180px;max-height:45dvh}.preview-description{margin-top:12px;min-height:0}.fine{margin-top:16px}.preview-heading{letter-spacing:.09em}}
@media(max-width:380px){.gate{padding-inline:20px}.gate h1{font-size:3rem}.preview-modes button{padding-inline:9px}.gate-actions{gap:16px}.study-link{font-size:.8125rem}.preview-controls{gap:4px}.preview-quiet{font-size:.8125rem}}
/* In-scene labels: anchored above each subject's layer. Information second: they quiet down to a dot after a few seconds unless focused. */
.labels{position:absolute;inset:0;pointer-events:none;z-index:3}
/* Measured relations between two subjects: a bridge whose weight follows the correlation of their motion. Never a connection, an emotion or a relationship. */
.relations{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible;transform:translate3d(var(--px),var(--py),0)}
.relations path{fill:none;stroke:#efe3c8;stroke-linecap:round;filter:drop-shadow(0 0 6px #efe3c855)}
/* The trace: how the reading has moved over the last minute of evidence. It advances only when new evidence arrives. */
.trace{margin:14px 0 2px;padding:0}
.trace canvas{width:100%;height:56px;display:block}
.trace figcaption{font-size:11px;color:#8f9a90;margin-top:6px;line-height:1.5}
.label{--h:52deg;position:absolute;transform:translate(-50%,-100%);display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border-radius:999px;font:12px var(--sans);letter-spacing:.03em;color:#eee9df;background:#0a111299;border:1px solid oklch(0.80 0.10 var(--h) / 0.85);backdrop-filter:blur(10px);pointer-events:auto;cursor:pointer;white-space:nowrap;transition:left .25s cubic-bezier(.2,.8,.2,1),top .25s cubic-bezier(.2,.8,.2,1),opacity .4s ease,padding .3s ease;box-shadow:0 6px 24px -10px #000}
.label i{width:8px;height:8px;border-radius:50%;background:oklch(0.82 0.13 var(--h));box-shadow:0 0 10px oklch(0.82 0.13 var(--h) / 0.8);flex:none}
.label b{font-weight:400;color:#f4efe4}
.label small{color:#a9b2a9;font-size:11px}
.label .pol{font-variant-numeric:tabular-nums;color:#e0d7c5}
.label.quiet{padding:4px;gap:0}.label.quiet b,.label.quiet small,.label.quiet .pol{display:none}
.label.focused{background:oklch(0.78 0.11 var(--h) / 0.62);color:#0b1010;border-color:oklch(0.9 0.08 var(--h))}.label.focused b,.label.focused .pol{color:#0b1010}
.label.enter{animation:pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translate(-50%,-100%) scale(.85)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
/* Focus brackets: four corners, never a closed outline. */
.brackets{position:absolute;pointer-events:none;z-index:3;transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py)));transition:left .2s cubic-bezier(.2,.8,.2,1),top .2s cubic-bezier(.2,.8,.2,1),width .2s,height .2s;animation:bracket .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bracket{from{opacity:0;transform:translate(-50%,-50%) scale(1.18)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.brackets i{position:absolute;width:14px;height:14px;border:0 solid #f1e4c2cc;filter:drop-shadow(0 1px 3px #000)}
.brackets .b-tl{left:0;top:0;border-width:1.5px 0 0 1.5px;border-top-left-radius:3px}.brackets .b-tr{right:0;top:0;border-width:1.5px 1.5px 0 0;border-top-right-radius:3px}.brackets .b-bl{left:0;bottom:0;border-width:0 0 1.5px 1.5px;border-bottom-left-radius:3px}.brackets .b-br{right:0;bottom:0;border-width:0 1.5px 1.5px 0;border-bottom-right-radius:3px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #6b746d88;background:#0a111299;color:#e6e0d3;font:13px var(--sans);letter-spacing:.06em;padding:11px 18px;border-radius:999px;backdrop-filter:blur(10px);cursor:pointer;transition:transform .15s ease,background .2s ease}
.pill:active{transform:scale(.96)}
.pill.primary{border-color:#d6b58c;color:#f1e4c2;background:#20271f99}
.pill-glyph{font-size:12px;color:#cdb38a}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:7;background:#0b1010f0;border-top:1px solid #2b302e;padding:10px 20px max(22px,env(safe-area-inset-bottom));max-height:72dvh;overflow:auto;backdrop-filter:blur(16px);animation:sheetrise .32s cubic-bezier(.2,.8,.2,1)}
@keyframes sheetrise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-grip{width:36px;height:3px;border-radius:2px;background:#4a534c;margin:4px auto 14px}
.sheet .eyebrow{font-size:11px}
.sheet-line{font:normal 19px/1.4 var(--serif);color:#eee9df;margin:8px 0 0}
.sheet-line.muted{font:14px/1.6 var(--sans);color:#a4aaa4}
.sheet-signals{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;margin:16px 0 8px}
.sheet-signals .signal-row{margin-bottom:8px;font-size:12px}
.sheet .quiet-button{margin-top:6px;padding:10px 0;font-size:13px;color:#cdb38a;background:none;border:0}
#deep{font-size:12px;line-height:1.65;color:#b6c1b6;padding-top:6px}
#deep p{margin:0 0 10px}#deep strong{color:#e0d7c5;font-weight:400}
.sheet .honesty{font-size:11px;color:#8f9a90;margin:14px 0 0}
.sheet .honesty a{color:#cdb38a}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.chip{--h:52deg;font:12px var(--sans);letter-spacing:.03em;color:#eee9df;border:1px solid oklch(0.78 0.10 var(--h) / 0.9);background:oklch(0.62 0.07 var(--h) / 0.18);padding:5px 10px;border-radius:999px}
.chip.focused{background:oklch(0.78 0.11 var(--h) / 0.55);color:#0b1010}
@supports not (color: oklch(0.5 0.1 50deg)){.chip,.label{border-color:#cdb38a;background:#cdb38a2e}.chip.focused,.label.focused{background:#cdb38a99}.label i{background:#cdb38a}}
@media(prefers-reduced-motion:reduce){.sheet,.open-button,.label.enter,.brackets{animation:none!important;opacity:1;transform:none}.label{transform:translate(-50%,-100%)}.brackets{transform:translate(-50%,-50%)}}
/* People: opt-in, always announced while on. */
.pill[aria-pressed=true]{border-color:#9fc3b9;color:#e6f2ee;background:#16302a99}
.people-indicator{position:absolute;left:50%;top:calc(max(14px,env(safe-area-inset-top)) + 34px);transform:translateX(-50%);margin:0;font-size:11px;letter-spacing:.06em;color:#cfe6de;background:#0a1512cc;border:1px solid #3f6158;padding:5px 10px;border-radius:999px;white-space:nowrap;pointer-events:none;backdrop-filter:blur(8px)}
.person-reading{margin:14px 0 6px;padding:14px 0 4px;border-top:1px solid #2b302e}
.person-reading .eyebrow{font-size:11px;margin-bottom:8px}
.person-visible{margin:0 0 10px;padding-left:18px;font-size:14px;line-height:1.65;color:#e6e1d6}
.person-visible li{margin:0 0 4px}
.person-common{display:grid;gap:10px;margin:10px 0}
.reading-card{border:1px solid #33403a;background:#101614;padding:10px 12px}
.reading-card b{display:block;font-weight:400;color:#eee9df;font-size:13px}
.reading-card span{display:block;font-size:13px;color:#cdb38a;margin-top:2px}
.reading-card small{display:block;font-size:12px;color:#93a096;margin-top:4px;line-height:1.5}
.person-limits{margin:8px 0 0;font-size:12px;color:#93a096}
.person-limits summary{cursor:pointer;color:#b9c4b9;padding:6px 0}
.person-limits ul{margin:4px 0 0;padding-left:18px;line-height:1.6}
.label.person i{box-shadow:0 0 0 2px #0a1112,0 0 0 3px oklch(0.82 0.13 var(--h))}