.observe-page { --observe-panel: #0c0f19; }
.observe-hero { min-height: 560px; display: grid; grid-template-columns: 1fr 280px; align-items: center; gap: 60px; border-bottom: 1px solid var(--line); }
.observe-hero h1 { font-size: clamp(68px, 9vw, 122px); }
.observe-hero > div:first-child > p:last-child { max-width: 620px; color: #c5c5ce; font-size: 18px; line-height: 1.6; }
.observe-privacy { padding: 24px; border: 1px solid var(--violet); background: #9f7cff10; display: grid; gap: 8px; }
.observe-privacy strong, .observe-privacy span { font: 10px "DM Mono", monospace; }
.observe-privacy strong { color: var(--lime); }
.observe-privacy span { color: var(--muted); line-height: 1.5; }
.observe-shell { padding-top: 76px; padding-bottom: 110px; }
.observe-message { min-height: 270px; padding: 36px; border: 1px solid var(--line); background: var(--observe-panel); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--lime); font: 11px "DM Mono", monospace; }
.observe-message[hidden], #observe-preflight[hidden], #observe-active[hidden], #observe-recap[hidden] { display: none; }
.observe-message h2 { margin: 14px 0; color: var(--paper); font: 48px "Space Grotesk", sans-serif; }
.observe-message p:not(.eyebrow) { max-width: 620px; color: var(--muted); font: 15px "Space Grotesk", sans-serif; line-height: 1.6; }
.observe-section-head, .session-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.observe-section-head h2, .session-toolbar h2 { margin: 0; font-size: clamp(48px, 6vw, 78px); }
.observe-section-head > div:last-child, #session-meta { color: var(--muted); text-align: right; font: 9px "DM Mono", monospace; line-height: 1.55; }
.observe-resume { margin-top: 28px; padding: 22px; border: 1px solid var(--lime); background: #baff2910; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.observe-resume[hidden] { display: none; }
.observe-resume span { color: var(--lime); font: 9px "DM Mono", monospace; }
.observe-resume strong { display: block; margin-top: 8px; font-size: 21px; }
.observe-resume p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.observe-builder { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border: 1px solid var(--line); background: var(--observe-panel); }
.observe-builder-intro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); gap: 32px; align-items: end; padding: 22px 26px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #9f7cff12, transparent); }
.observe-builder-intro .eyebrow { margin: 0 0 8px; }.observe-builder-intro strong { color: var(--paper); font: 16px "Space Grotesk", sans-serif; line-height: 1.35; }.observe-builder-intro > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.observe-builder fieldset { margin: 0; padding: 26px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.observe-builder fieldset:nth-of-type(2) { border-right: 0; }
.observe-builder fieldset:nth-of-type(3) { border-right: 1px solid var(--line); }
.observe-builder fieldset:nth-of-type(4) { grid-column:1 / -1; border-right: 0; }
.observe-builder legend { padding: 0; color: var(--violet); font: 10px "DM Mono", monospace; }
.observe-choice-row, .observe-categories { display: grid; gap: 8px; margin-top: 17px; }
.observe-choice-row { grid-template-columns: repeat(3, 1fr); }
.observe-time-choices { grid-template-columns: 1fr 1fr; }
.observe-choice-row label, .observe-categories label { position: relative; cursor: pointer; }
.observe-choice-row input, .observe-categories input { position: absolute; opacity: 0; pointer-events: none; }
.observe-choice-row span, .observe-categories span { min-height: 72px; padding: 13px; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; color: var(--muted); font: 10px "DM Mono", monospace; }
.observe-choice-row small { margin-top: 6px; color: #77798a; font-size: 8px; }
.observe-choice-row input:checked + span, .observe-categories input:checked + span { border-color: var(--lime); color: var(--lime); background: #baff290a; }
.observe-choice-row input:focus-visible + span, .observe-categories input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 2px; }
.observe-categories { grid-template-columns: repeat(6, 1fr); }
.observe-categories span { min-height: 48px; text-align: center; align-items: center; }
.observe-build-action { grid-column: 1 / -1; padding: 20px 26px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.observe-build-action p { margin: 0; color: var(--muted); font: 9px "DM Mono", monospace; }
.observe-route-limits { grid-column: 1 / -1; padding: 0 26px; border-top: 1px solid var(--line); background: #090b14; }.observe-route-limits summary { min-height: 46px; display: flex; align-items: center; color: var(--violet); font: 9px "DM Mono", monospace; cursor: pointer; }.observe-route-limits p { max-width: 900px; margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.observe-conditions { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; border: 1px solid var(--line); }
.observe-conditions article { min-height: 150px; padding: 22px; border-right: 1px solid var(--line); }
.observe-conditions article:last-child { border-right: 0; }
.observe-conditions span { color: var(--violet); font: 9px "DM Mono", monospace; }
.observe-conditions strong { display: block; margin: 22px 0 7px; font-size: 22px; }
.observe-conditions p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.observe-safety, .observe-method { margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.observe-safety summary, .observe-method summary { padding: 15px 0; color: var(--lime); cursor: pointer; font: 10px "DM Mono", monospace; }
.observe-safety p, .observe-method p { max-width: 860px; color: var(--muted); font-size: 13px; line-height: 1.6; }

.observe-active { min-height: 800px; }
.session-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; }
.session-alerts { display: flex; justify-content: space-between; gap: 25px; margin: 26px 0 10px; color: var(--muted); font: 9px "DM Mono", monospace; }
.session-alerts p { margin: 0; }
#session-urgent { color: var(--lime); }
.session-progress { padding: 17px 20px; border: 1px solid var(--line); background: var(--observe-panel); }
.session-progress > div { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: 9px "DM Mono", monospace; }
.session-progress strong { color: var(--lime); }
.session-progress progress { width: 100%; height: 4px; margin-top: 14px; border: 0; background: #222536; }
.session-progress progress::-webkit-progress-bar { background: #222536; }
.session-progress progress::-webkit-progress-value { background: var(--lime); }
.session-progress progress::-moz-progress-bar { background: var(--lime); }
.session-layout { min-width: 0; width: 100%; display: grid; grid-template-columns: 250px minmax(0, 1fr); margin-top: 14px; border: 1px solid var(--violet); }
.session-timeline { min-width: 0; display: block; background: #090b14; border-right: 1px solid var(--line); }
.session-timeline button { width: 100%; min-height: 82px; padding: 15px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); text-align: left; cursor: pointer; display: grid; grid-template-columns: 42px 1fr; gap: 9px; }
.session-timeline button:hover, .session-timeline button:focus-visible, .session-timeline button.active { background: #9f7cff12; color: var(--paper); outline: none; }
.session-timeline button.active { box-shadow: inset 3px 0 var(--lime); }
.session-timeline button.completed { opacity: .58; }
.session-timeline button.skipped { opacity: .42; text-decoration: line-through; }
.session-timeline time { color: var(--lime); font: 8px "DM Mono", monospace; }
.session-timeline strong { font-size: 13px; }
.session-timeline small { grid-column: 2; color: var(--violet); font: 8px "DM Mono", monospace; }
.session-target { min-width: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; background: radial-gradient(circle at 50% 45%, #9f7cff1a, transparent 40%), #0b0e18; }
.session-target-copy, .session-instruments, .session-guidance { min-width: 0; padding: 28px; }
.session-target-copy, .session-instruments { border-right: 1px solid var(--line); }
.session-target-copy > span { color: var(--violet); font: 9px "DM Mono", monospace; }
.session-target-copy h3 { margin: 32px 0 8px; font-size: 44px; letter-spacing: -2px; overflow-wrap: anywhere; }
.session-target-copy > strong { color: var(--lime); font: 10px "DM Mono", monospace; }
.session-target-copy > p { min-height: 72px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.session-target-copy dl { margin: 0; border-top: 1px solid var(--line); }
.session-target-copy dl div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.session-target-copy dt { color: var(--muted); font: 8px "DM Mono", monospace; }
.session-target-copy dd { margin: 0; text-align: right; font: 10px "DM Mono", monospace; }
.session-instruments { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; }
.session-compass { position: relative; width: min(220px, 100%); aspect-ratio: 1; border: 1px solid var(--violet); border-radius: 50%; box-shadow: inset 0 0 45px #9f7cff25; }
.session-compass::before, .session-compass::after { content: ""; position: absolute; background: #ffffff18; }
.session-compass::before { left: 50%; top: 10%; bottom: 10%; width: 1px; }
.session-compass::after { top: 50%; left: 10%; right: 10%; height: 1px; }
.session-compass span { position: absolute; color: var(--muted); font: 9px "DM Mono", monospace; }
.session-compass span:nth-child(1) { top: 9px; left: 50%; transform: translateX(-50%); color: var(--lime); }
.session-compass span:nth-child(2) { right: 11px; top: 50%; }
.session-compass span:nth-child(3) { bottom: 9px; left: 50%; transform: translateX(-50%); }
.session-compass span:nth-child(4) { left: 11px; top: 50%; }
.session-compass i { position: absolute; left: calc(50% - 8px); top: 22px; width: 16px; height: 88px; background: linear-gradient(var(--pink), var(--violet)); clip-path: polygon(50% 0, 100% 100%, 50% 82%, 0 100%); transform-origin: 50% 88px; transform: rotate(var(--turn)); transition: transform .25s; }
.session-compass b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 12px "DM Mono", monospace; }
.session-horizon { position: relative; width: 100%; height: 130px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(#11162a, #090b14 70%, #121722 71%); }
.session-horizon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 29%; height: 1px; background: var(--lime); }
.session-horizon span, .session-horizon b { position: absolute; left: 8px; color: var(--muted); font: 8px "DM Mono", monospace; }
.session-horizon span { top: 7px; }.session-horizon b { bottom: 6px; }
.session-horizon i { position: absolute; left: 50%; bottom: var(--height); width: 13px; height: 13px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 18px var(--pink); transform: translate(-50%, 50%); }
.session-guidance h3 { margin: 17px 0 10px; font-size: 31px; }
.session-guidance > p:not(.eyebrow):not(#session-device-status) { color: var(--muted); font-size: 14px; line-height: 1.55; }
.session-guidance ol { margin: 18px 0; padding-left: 22px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.session-guidance li { margin: 8px 0; }
.session-guidance svg { width: 100%; max-height: 210px; border: 1px solid var(--line); background: #090b14; }
.session-guidance svg line { stroke: var(--violet); stroke-width: .7; }
.session-guidance svg circle { fill: var(--paper); stroke: var(--lime); stroke-width: .5; }
.session-device-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
#session-device-status, #session-share-status { color: var(--violet); font: 8px "DM Mono", monospace; line-height: 1.5; }
.observation-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.observation-note label, .observation-note small { color: var(--violet); font: 10px "DM Mono", monospace; letter-spacing: .08em; }
.observation-note textarea { width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 0; background: #090b14; color: var(--paper); padding: 12px; font: 13px "Space Grotesk", sans-serif; }
.observation-note small { text-align: right; }
.observe-recap { padding: 46px; border: 1px solid var(--violet); background: radial-gradient(circle at 20% 20%, #9f7cff22, transparent 42%), var(--observe-panel); }
.observe-recap h2 { margin: 8px 0 25px; font-size: clamp(46px,7vw,84px); }
.recap-totals, .history-summary { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }
.recap-totals article, .history-summary article { padding:20px; border-right:1px solid var(--line); }
.recap-totals article:last-child, .history-summary article:last-child { border-right:0; }
.recap-totals strong, .history-summary strong { display:block; color:var(--lime); font-size:32px; }
.recap-totals span, .history-summary span { color:var(--muted); font:10px "DM Mono",monospace; }
.recap-list, .history-list { margin-top:16px; display:grid; gap:8px; }
.recap-list article, .history-list article { padding:16px 18px; border:1px solid var(--line); display:grid; grid-template-columns:minmax(160px,1fr) auto; gap:8px 20px; }
.recap-list span, .history-list time { color:var(--violet); font:10px "DM Mono",monospace; }
.recap-list p, .history-list p { grid-column:1/-1; margin:0; color:var(--muted); font-size:12px; }
.recap-actions { display:flex; flex-wrap:wrap; gap:18px; margin-top:24px; }
.observation-history { padding-top:76px; padding-bottom:90px; }
.history-summary { grid-template-columns:repeat(4,1fr); margin-top:28px; }
#device-readiness { color:var(--muted); font-size:13px; line-height:1.7; }
.session-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 18px; }
#session-share-status { min-height: 18px; text-align: right; }

body.red-light { --lime: #ff513f; --violet: #ff6a58; --pink: #ff312b; --paper: #ffd4cc; --muted: #c68d84; --line: #ff665a35; --observe-panel: #120807; background: #080202; }
body.red-light .noise { opacity: .18; filter: sepia(1) saturate(4) hue-rotate(315deg); }
body.red-light img { filter: grayscale(1) sepia(1) saturate(2) hue-rotate(315deg) brightness(.65); }
body.red-light .session-horizon { background: linear-gradient(#170706, #090201 70%, #1b0907 71%); }

@media (max-width: 1450px) {
  .session-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .session-target { grid-template-columns: 1fr 1fr; }
  .session-guidance { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .session-instruments { border-right: 0; }
}
@media (max-width: 850px) {
  .observe-hero { grid-template-columns: 1fr; padding-top: 120px; padding-bottom: 70px; }
  .observe-privacy { max-width: 330px; }
  .observe-builder { grid-template-columns: 1fr; }
  .observe-builder-intro { grid-template-columns: 1fr; gap: 12px; }.observe-builder fieldset { border-right: 0; }
  .observe-builder fieldset, .observe-build-action, .observe-route-limits { grid-column: auto; border-right:0; }
  .observe-categories { grid-template-columns: repeat(3, 1fr); }
  .observe-conditions { grid-template-columns: 1fr 1fr; }
  .observe-conditions article:nth-child(2) { border-right: 0; }
  .observe-conditions article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .session-layout { grid-template-columns: 1fr; }
  .session-timeline { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .session-timeline button { min-width: 180px; border-right: 1px solid var(--line); }
}
@media (max-width: 650px) {
  .observe-hero { min-height: 570px; }.observe-hero h1 { font-size: clamp(60px, 19vw, 80px); }
  .observe-section-head, .session-toolbar, .observe-resume, .observe-build-action { align-items: flex-start; flex-direction: column; }.observe-builder-intro,.observe-route-limits { padding-right:18px; padding-left:18px; }
  .observe-section-head > div:last-child, #session-meta { text-align: left; }
  .observe-choice-row { grid-template-columns: 1fr; }.observe-time-choices { grid-template-columns: 1fr; }
  .observe-categories { grid-template-columns: 1fr 1fr; }
  .observe-conditions { grid-template-columns: 1fr; }.observe-conditions article { border-right: 0; border-bottom: 1px solid var(--line); }.observe-conditions article:last-child { border-bottom: 0; }
  .session-actions { justify-content: flex-start; }.session-alerts { flex-direction: column; }
  .session-target { grid-template-columns: 1fr; }.session-target-copy, .session-instruments { border-right: 0; border-bottom: 1px solid var(--line); }.session-guidance { grid-column: auto; }
  .session-target-copy, .session-instruments, .session-guidance { padding: 24px 18px; }
  .session-target-copy h3 { font-size: 40px; }
  .session-controls { display: grid; grid-template-columns: 1fr 1fr; }.session-controls .button { grid-column: 1 / -1; order: -1; }.session-controls button { justify-content: center; }
  .recap-totals, .history-summary { grid-template-columns:1fr 1fr; }.recap-totals article:nth-child(2),.history-summary article:nth-child(2){border-right:0}.observe-recap{padding:30px 18px}.recap-list article,.history-list article{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce) { .session-compass i { transition: none; } }