/* Everapulse · Vital. Built from the approved prototype; every color, font, radius and timing comes from tokens.css
   (generated from src/web/ui/tokens.ts). No inline styles exist in the app: the content security policy forbids them. */
* { box-sizing: border-box }
html, body { margin: 0; height: 100%; background: var(--void); color: var(--ink); font: 400 1rem/1.5 var(--f-body) }
button, input, textarea, select { font: inherit; color: inherit }
a { color: inherit }
.app { position: fixed; inset: 0; container: app / size; background: var(--void); color: var(--ink); overflow: hidden; perspective: 1400px }
.dock > a, .dock .orb { text-decoration: none }
.dock > a span { display: block }
.ic-evera { fill: var(--evera) } .ic-evenness { fill: var(--evenness) }
.app.neutral { --c: var(--pearl) } .app.evera { --c: var(--evera) } .app.evenness { --c: var(--evenness) }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 12px; background: var(--pearl); color: var(--on-pearl); font-weight: 700 }
.skip:focus { top: 12px }
@view-transition { navigation: auto }
/* ============================ the app ============================ */
.app [hidden] { display: none !important }
.app [tabindex="-1"]:focus { outline: none }
.app :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 10px }
.app canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.app .fx { pointer-events: none; z-index: 1 }
.glass { background: var(--glass); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow); border-radius: var(--r3) }
.mono { font-family: var(--f-data); font-size: .8rem }
.muted { color: var(--ink-3) }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--c, var(--ink)); box-shadow: 0 0 12px var(--c, transparent) }
.evera { --c: var(--evera) } .evenness { --c: var(--evenness) }
.btn { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass-2); cursor: pointer; font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform var(--t1) var(--ease), background var(--t2), border-color var(--t2) }
.btn:hover { background: var(--glass-hi); border-color: var(--ink-3) }
.btn:active { transform: scale(.97) }
.btn.solid { background: var(--pearl); color: var(--on-pearl); border-color: transparent }
.btn.brand { background: var(--c); color: var(--on-brand); border-color: transparent }

.btn[disabled] { opacity: .42; cursor: not-allowed }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: .86rem; font-weight: 700; background: none; cursor: pointer }
.chip:hover { border-color: var(--ink-3); background: var(--glass-hi) }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.mega { margin: 0; font: 800 clamp(3.4rem, 8.6cqw, 9.4rem)/.84 var(--f-display); letter-spacing: -.045em; font-variation-settings: "wdth" 76, "opsz" 96; text-wrap: balance }
.breath { animation: breathe var(--beat) ease-in-out infinite }
@keyframes breathe { 0%, 100% { font-variation-settings: "wdth" 76, "opsz" 96 } 16% { font-variation-settings: "wdth" 90, "opsz" 96 } 30% { font-variation-settings: "wdth" 80, "opsz" 96 } }
.eyebrow { font: 500 .8rem/1.3 var(--f-data); color: var(--ink-3) }
.lede { margin: 0; color: var(--ink-2); font-size: 1.08rem; max-width: 46ch }
h3 { margin: 0; font: 800 1.15rem/1.2 var(--f-display); font-variation-settings: "wdth" 86, "opsz" 32 }

/* choreography: each child of an entering screen rises in with a stagger */
.screen.on > *, .screen.on .stagger > * { animation: enter var(--t3) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger) + 80ms) }
.screen.on > :nth-child(2), .stagger > :nth-child(2) { --i: 1 } .screen.on > :nth-child(3), .stagger > :nth-child(3) { --i: 2 } .screen.on > :nth-child(4), .stagger > :nth-child(4) { --i: 3 } .screen.on > :nth-child(5), .stagger > :nth-child(5) { --i: 4 }
@keyframes enter { from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(8px) } to { opacity: 1; transform: none; filter: none } }
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease); will-change: transform }

/* ---- dock ---- */
.dock { position: absolute; z-index: 6; left: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 30px }
.logo { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 6px }
.dock > a { width: 58px; min-height: 54px; border: 0; border-radius: 18px; background: none; cursor: pointer; display: grid; justify-items: center; align-content: center; gap: 4px; color: var(--ink-3); font: 700 .66rem/1 var(--f-body); position: relative; transition: color var(--t2), background var(--t2) }
.dock > a svg { width: 22px; height: 22px }
.dock > a:hover { color: var(--ink) }
.dock > a[aria-current="page"] { color: var(--ink); background: var(--glass-hi) }
.dock > a[aria-current="page"]::after { content: ""; position: absolute; left: -8px; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 3px; background: var(--ink) }
.dock .orb { width: 58px; height: 58px; min-height: 58px; border-radius: 50%; margin: 6px 0; background: radial-gradient(circle at 35% 30%, var(--pearl), color-mix(in srgb, var(--pearl) 35%, var(--evera)) 72%); color: var(--on-pearl); box-shadow: 0 0 0 1px var(--line-2), 0 0 34px color-mix(in srgb, var(--evera) 45%, transparent); animation: orbbeat var(--beat) ease-in-out infinite }
.dock .orb b { font: 800 1.3rem/1 var(--f-display) }
.dock .orb span { font-size: .58rem }
@keyframes orbbeat { 0%, 100% { transform: scale(1) } 16% { transform: scale(1.08) } 30% { transform: scale(.99) } }

/* ---- screens ---- */
.view { position: absolute; inset: 0; z-index: 2; pointer-events: none }
.screen { position: absolute; inset: 0; display: none; padding: 34px 40px 30px 124px }
.screen.on { display: grid }
.screen.on > * { pointer-events: auto }

/* PULSE: editorial headline left, forms right, needs as a typographic list, ask bar */
.s-pulse { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr auto auto; column-gap: 32px }
.s-pulse .head { grid-column: 1; display: grid; gap: 14px; align-content: start }
.s-pulse .mega .num { color: var(--evera); text-shadow: 0 0 40px color-mix(in srgb, var(--evera) 40%, transparent) }
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 3 }
.flabel { position: absolute; transform: translate(-50%, 0); display: grid; justify-items: center; gap: 4px; text-align: center; pointer-events: auto; padding: 8px 14px; border-radius: 16px; cursor: pointer; border: 0; background: none; color: var(--ink); transition: opacity var(--t2) }
.flabel .b { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem }
.flabel .m { font-family: var(--f-data); font-size: .74rem; color: var(--ink-2); white-space: nowrap }
.needs { grid-column: 1; grid-row: 3; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; align-self: end; max-width: 620px }
.needs li { border-top: 1px solid var(--line) }
.needs li:last-child { border-bottom: 1px solid var(--line) }
.needrow { width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 6px; border: 0; background: none; cursor: pointer; text-align: left; position: relative; transition: background var(--t2), padding var(--t2) var(--ease) }
.needrow:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); padding-left: 14px }
.needrow .ix { font: 800 2.2rem/.8 var(--f-display); font-variation-settings: "wdth" 76, "opsz" 96; color: var(--ink-3) }
.needrow.hot .ix { color: var(--c) }
.needrow .t { display: grid; gap: 3px; min-width: 0 }
.needrow .t b { font-size: 1.04rem; line-height: 1.25 }
.needrow .t span { font: 500 .76rem/1.3 var(--f-data); color: var(--ink-3) }
.needrow .go { font: 700 .84rem/1 var(--f-body); display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2) }
.needrow.hot .go { background: var(--pearl); color: var(--on-pearl); border-color: transparent }
.askbar { grid-column: 1 / -1; grid-row: 4; margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 8px 8px 18px; border-radius: 999px; max-width: 860px; width: 100%; justify-self: start }
.askbar .spark { width: 22px; height: 22px; color: var(--ai) }
.askbar input { border: 0; background: none; outline: none; min-height: 44px; font-size: 1.02rem; width: 100% }
.askbar input::placeholder { color: var(--ink-3) }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: none; cursor: pointer; display: grid; place-items: center }
.round.solid { background: var(--pearl); color: var(--on-pearl); border-color: transparent }
.heartline { position: absolute; left: 124px; right: 40px; bottom: 6px; height: 26px; pointer-events: none; opacity: .55 }

/* RHYTHM */
.s-rhythm { grid-template-columns: minmax(0, 1fr) 330px; column-gap: 28px }
.ringwrap { position: relative; display: grid; place-items: center; min-height: 0 }
.ringwrap .head { position: absolute; top: 0; left: 0; display: grid; gap: 8px; z-index: 2; pointer-events: none }
.ring { width: min(100%, 680px); max-height: 100%; aspect-ratio: 1; overflow: visible; touch-action: none; transform-origin: 50% 50%; position: relative; z-index: 2 }
.s-rhythm.on .ring { animation: landring 1.1s var(--ease) both .1s }
@keyframes landring { from { transform: rotateX(68deg) scale(.82); opacity: 0 } to { transform: none; opacity: 1 } }
.ring .lane { fill: none; stroke: var(--line-2); stroke-width: 1 }
.ring .tick { stroke: var(--line-2) }
.ring .day { font: 500 13px var(--f-data); fill: var(--ink-2) }
.ring .now { stroke: var(--flare); stroke-width: 2 }
.ring .bead { cursor: grab }
.ring .bead:focus-visible { outline: none; stroke: var(--ink); stroke-width: 3 }
.side { display: flex; flex-direction: column; gap: 16px; align-self: center; padding: 22px }
.brandpick { display: flex; gap: 6px; flex-wrap: wrap }
.brandpick button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: none; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; gap: 8px }
.brandpick button[aria-pressed="true"] { background: var(--glass-hi); border-color: var(--c) }
.detail { display: grid; gap: 8px }
.detail b { font: 800 1.5rem/1.1 var(--f-display); font-variation-settings: "wdth" 84, "opsz" 48 }
.detail .st { justify-self: start }
.moved { font: 500 .82rem/1.4 var(--f-data); color: var(--ink-2); min-height: 1.4em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.legend { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 8px; font-size: .86rem; color: var(--ink-2); border-top: 1px solid var(--line) }
.legend li { display: flex; align-items: center; gap: 10px }
.honest { font-size: .86rem; color: var(--ink-2) }
.meter { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 8px }
.meter i { display: block; height: 100%; width: 30%; background: var(--ink-2) }

/* CREATE: conversation left, the page on the void right, margin notes tied to words */
.s-compose { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); column-gap: 44px; grid-template-rows: minmax(0, 1fr) }
.convo { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; min-height: 0; padding: 20px; border-radius: var(--r3) }
.convo .msgs { overflow: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; scroll-behavior: smooth }
.msg { display: grid; gap: 8px; font-size: .95rem; line-height: 1.5 }
.msg.me { justify-self: end; max-width: 86%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--glass-hi); border: 1px solid var(--line) }
.msg.ai { padding-left: 32px; position: relative }
.msg.ai::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--ai) 70%); box-shadow: 0 0 16px color-mix(in srgb, var(--ai) 60%, transparent) }
.msg.ai p { margin: 0 }
.why { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .86rem; color: var(--ink-2) }
.why li { display: grid; grid-template-columns: 18px 1fr; gap: 8px }
.why li::before { content: "↳"; color: var(--ai) }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 500 .72rem/1 var(--f-data); padding: 5px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--ai) 50%, transparent); color: var(--ai); justify-self: start }
.steer { display: flex; flex-wrap: wrap; gap: 6px }
.convo form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass-2) }
.convo form input { border: 0; background: none; outline: none; min-height: 44px; width: 100% }
.caret { display: inline-block; width: .5em; height: 1em; vertical-align: -2px; background: var(--ai); animation: blink .8s steps(1) infinite }
@keyframes blink { 50% { opacity: 0 } }
.page { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow: auto; padding: 2px 6px 6px 2px; max-width: 760px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent }
.page .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 500 .8rem/1.3 var(--f-data); color: var(--ink-3) }
.page .meta .ctr { margin-left: auto }
.editor { position: relative }
.hl, .editor textarea { margin: 0; padding: 0; font: 400 clamp(1.35rem, 2.3cqw, 2rem)/1.42 var(--f-body); white-space: pre-wrap; overflow-wrap: break-word; width: 100%; border: 0; letter-spacing: -.005em }
.hl { position: absolute; inset: 0; color: transparent; pointer-events: none }
.hl mark { color: transparent; border-radius: 6px; background: color-mix(in srgb, var(--alarm) 14%, transparent); box-shadow: inset 0 -3px 0 var(--alarm); transition: box-shadow var(--t2), background var(--t2) }
.hl mark.warn { background: color-mix(in srgb, var(--flare) 12%, transparent); box-shadow: inset 0 -3px 0 var(--flare) }
.hl mark.lit { background: color-mix(in srgb, var(--alarm) 30%, transparent); box-shadow: inset 0 -3px 0 var(--alarm), 0 0 28px color-mix(in srgb, var(--alarm) 55%, transparent) }
.hl mark.warn.lit { background: color-mix(in srgb, var(--flare) 26%, transparent); box-shadow: inset 0 -3px 0 var(--flare), 0 0 28px color-mix(in srgb, var(--flare) 50%, transparent) }
.editor textarea { position: relative; display: block; background: transparent; resize: none; outline: none; caret-color: var(--ink); overflow: hidden; min-height: 3em }
.editor:focus-within::after { content: ""; position: absolute; left: -16px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--c) }
.photo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center }
.photo svg { width: 64px; height: 64px; border-radius: 12px; display: block }
.photo .field { display: grid; gap: 4px }
.photo label { font: 500 .76rem/1.2 var(--f-data); color: var(--ink-3) }
.photo input { min-height: 44px; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--line-2); background: none; font-size: 1rem; width: 100% }
.photo input:focus { border-bottom-color: var(--ink) }
.photo .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px }
.photo .acts .btn { min-height: 40px; padding: 0 14px; font-size: .86rem }
.sizes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0; padding: 0; list-style: none }
.sizes li { display: grid; gap: 4px; justify-items: center; font: 500 .7rem/1.2 var(--f-data); color: var(--ink-3) }
.sizes svg { display: block; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-2) }
.places { display: grid; gap: 12px }
.formats { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); align-self: start }
.formats button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--ink-2) }
.formats button[aria-checked="true"] { background: var(--pearl); color: var(--on-pearl) }
.thumbs { display: flex; gap: 6px; align-items: center }
.thumbs .add { width: 44px; height: 64px; border-radius: 12px; border: 1px dashed var(--line-2); background: none; cursor: pointer; font-size: 1.3rem; color: var(--ink-2) }
.photo { grid-template-columns: auto minmax(0, 1fr) !important }
.reel { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; padding-top: 16px; border-top: 1px solid var(--line) }
.player { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line-2), 0 20px 50px rgb(0 0 0 / .4) }
.player .scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s }
.player .scene.on { opacity: 1 }
.player .scene svg { width: 100%; height: 100%; display: block; transform-origin: 50% 60% }
.player.playing .scene.on svg { animation: kenburns 6s linear both }
@keyframes kenburns { from { transform: scale(1.02) } to { transform: scale(1.14) translateY(-2%) } }
.burn { position: absolute; left: 10px; right: 10px; bottom: 34px; text-align: center; font: 700 .86rem/1.3 var(--f-body); color: #fff; text-shadow: 0 1px 3px #000, 0 0 10px #000; min-height: 2.6em }
.player .bar { position: absolute; left: 10px; right: 10px; bottom: 14px; height: 3px; border-radius: 2px; background: rgb(255 255 255 / .3); overflow: hidden }
.player .bar i { display: block; height: 100%; width: 0; background: #fff }
.player .play { position: absolute; left: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .55); color: #fff; cursor: pointer; display: grid; place-items: center }
.player .tag { position: absolute; right: 10px; top: 14px; font: 500 .68rem/1 var(--f-data); padding: 5px 7px; border-radius: 6px; background: rgb(0 0 0 / .55); color: #fff }
.rside { display: grid; gap: 12px; align-content: start; min-width: 0 }
.rside .lab { font: 500 .76rem/1.2 var(--f-data); color: var(--ink-3) }
.clips { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px }
.clips button { display: grid; gap: 4px; justify-items: start; width: 96px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass-2); cursor: pointer; text-align: left; font-size: .76rem; font-weight: 700 }
.clips button[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) }
.clips svg { width: 82px; height: 50px; border-radius: 8px; display: block }
.clips span { font: 500 .68rem/1 var(--f-data); color: var(--ink-3) }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.row .btn { min-height: 40px; padding: 0 14px; font-size: .86rem }
.switch { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: .92rem; cursor: pointer }
.switch input { width: 22px; height: 22px; margin: 0; accent-color: var(--c) }
.len { font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere }
.len b { font: 800 1.2rem/1 var(--f-display); color: var(--ink); margin-right: 6px }
.studio { position: absolute; inset: 0; z-index: 25; display: none; grid-template-columns: 300px minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: 16px; background: color-mix(in srgb, var(--void) 70%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px) }
.studio.on { display: grid; animation: fade .4s both }
.st-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 14px; border-radius: 22px }
.st-top h2 { margin: 0 auto 0 0; font: 800 1.6rem/1 var(--f-display); font-variation-settings: "wdth" 80, "opsz" 48 }
.st-top .costline { font: 500 .78rem/1.4 var(--f-data); color: var(--ink-2); max-width: 46ch }
.board { padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0 }
.board h3 { font-size: 1rem }
.scene-card { width: 100%; display: grid; grid-template-columns: 22px 54px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass-2); cursor: pointer; text-align: left }
.scene-card[aria-pressed="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) }
.scene-card .ix { font: 500 .74rem/1 var(--f-data); color: var(--ink-3) }
.scene-card svg { width: 54px; height: 72px; border-radius: 8px; display: block }
.scene-card b { display: block; font-size: .92rem; line-height: 1.25 }
.scene-card > span:last-child { font: 400 .9rem/1.3 var(--f-body); color: var(--ink) }
.scene-card span span { display: inline-block; font: 500 .7rem/1.35 var(--f-data); color: var(--ink-3) }
.scene-card .kind { display: inline-block; margin-top: 4px; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-2); color: var(--ink-2) }
.scene-card .kind.ai { border-color: color-mix(in srgb, var(--ai) 60%, transparent); color: var(--ai) }
.stage-v { display: grid; place-items: center; min-height: 0; position: relative }
.stage-v .player { height: min(100%, 640px); width: auto; aspect-ratio: 9 / 16; max-width: 100% }
.player .ailabel { position: absolute; left: 10px; top: 62px; font: 500 .68rem/1 var(--f-data); padding: 5px 7px; border-radius: 6px; background: rgb(0 0 0 / .6); color: #fff }
.insp { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow: auto; min-height: 0 }
.insp .lab { font: 500 .76rem/1.2 var(--f-data); color: var(--ink-3) }
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.kinds button { min-height: 52px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: none; cursor: pointer; text-align: left; font-weight: 700; font-size: .86rem; display: grid; gap: 2px }
.kinds button small { font: 500 .66rem/1.25 var(--f-data); color: var(--ink-3); font-weight: 400 }
.kinds button[aria-checked="true"] { background: var(--glass-hi); border-color: var(--ink-3) }
.who { display: grid; gap: 6px }
.who label { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line); cursor: pointer }
.who input { width: 20px; height: 20px; margin: 0; accent-color: var(--c) }
.who .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--glass-hi); border: 1px solid var(--line-2) }
.who span span { display: block; font: 500 .7rem/1.3 var(--f-data); color: var(--ink-3) }
.who .ok { color: var(--c) } .who .no { color: var(--flare) }
.guard { padding: 12px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: .84rem; color: var(--ink-2); display: grid; gap: 4px }
.guard b { color: var(--ink) }
.line-in { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--glass-2); font-size: .95rem; resize: vertical }
.st-time { grid-column: 1 / -1; padding: 12px 14px; border-radius: 22px; display: grid; gap: 6px }
.track { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: center; font: 500 .72rem/1 var(--f-data); color: var(--ink-3) }
.track .lane { display: flex; gap: 3px; height: 30px }
.track .lane i { display: block; height: 100%; border-radius: 6px; background: var(--glass-hi); border: 1px solid var(--line-2); font-style: normal; font: 500 .66rem/28px var(--f-data); color: var(--ink-2); padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer }
.track .lane i.sel { border-color: var(--c); color: var(--ink) }
.track .lane i.ai { background: color-mix(in srgb, var(--ai) 18%, transparent); border-color: color-mix(in srgb, var(--ai) 50%, transparent) }
.track .lane.cc i { background: none; border-style: dashed }
.render-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.sources { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line) }
.places .lab { font: 500 .76rem/1.2 var(--f-data); color: var(--ink-3) }
.placerow { display: flex; flex-wrap: wrap; gap: 8px }
.place { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; cursor: pointer; font-weight: 700; font-size: .9rem }
.place[aria-selected="true"] { background: var(--glass-hi); border-color: var(--ink-3) }
.place small { font: 500 .7rem/1 var(--f-data); color: var(--ink-3); font-weight: 400 }
.place .m { width: 8px; height: 8px; border-radius: 50%; background: var(--c) }
.place .m.hand { background: none; border: 2px solid var(--ink); border-radius: 2px; transform: rotate(45deg); width: 8px; height: 8px }
.place.add { border-style: dashed; color: var(--ink-2) }
.pv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border-radius: var(--r2); background: var(--glass-2); border: 1px solid var(--line) }
.pv .frame { border-radius: 12px; overflow: hidden; background: var(--void); box-shadow: 0 0 0 1px var(--line-2) }
.pv .frame svg { display: block; width: 100% }
.pv .frame p { margin: 0; padding: 8px; font-size: .68rem; line-height: 1.35; color: var(--ink-2); max-height: 6.8em; overflow: hidden }
.pv .info { display: grid; gap: 8px; min-width: 0 }
.pv .info b { font-size: 1rem }
.pv ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: .86rem; color: var(--ink-2) }
.pv ul li { display: grid; grid-template-columns: 16px 1fr; gap: 6px }
.pv ul li::before { content: "·"; color: var(--ink-3); font-weight: 700 }
.pv .own { justify-self: start; min-height: 40px; font-size: .84rem }
.pv textarea { width: 100%; min-height: 70px; padding: 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--glass); font-size: .9rem; resize: vertical }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.plist li label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 6px; border-radius: 12px; cursor: pointer }
.plist li label:hover { background: var(--glass-hi) }
.plist input { width: 20px; height: 20px; margin: 0; accent-color: var(--c) }
.plist b { font-size: .95rem }
.plist span span { display: block; font: 500 .74rem/1.4 var(--f-data); color: var(--ink-3) }
.plist input:disabled + span b { color: var(--ink-3) }
.canvasteps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 6px; font-size: .92rem; color: var(--ink-2) }
.checks { display: grid; gap: 8px }
.photo { padding-top: 16px; border-top: 1px solid var(--line) }
.sumline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .95rem; color: var(--ink-2) }
.sumline svg { width: 64px; height: 20px }
.sumline path { fill: none; stroke-width: 1.8; stroke-linejoin: round }
.sumline b { font: 800 1.25rem/1 var(--f-display); color: var(--ink) }
.fixlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.fixrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 10px 10px 8px; border-radius: 14px; transition: background var(--t2) }
.fixrow:hover, .fixrow:focus-within { background: var(--glass-hi) }
.fixrow .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 .78rem/1 var(--f-data); color: var(--void); background: var(--alarm) }
.fixrow.warn .n { background: var(--flare) }
.fixrow .t { display: grid; gap: 2px; min-width: 0 }
.fixrow .t b { font-size: .98rem; line-height: 1.3 }
.fixrow .t span { font: 500 .74rem/1.4 var(--f-data); color: var(--ink-3) }
.fixrow .fix { min-height: 40px; padding: 0 14px; font-size: .86rem; white-space: nowrap }
.steadyline { font: 500 .78rem/1.5 var(--f-data); color: var(--ink-3); padding-left: 8px }
.steadyline b { color: var(--c); font-weight: 500 }
.clearnote { display: flex; align-items: center; gap: 12px; padding: 4px 8px }
.clearnote b { font: 800 1.5rem/1 var(--f-display); color: var(--c) }
.page .bottom { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding-top: 4px }
.page .bottom .why { font-size: .88rem; color: var(--ink-3) }

/* PROOF: a tilting holographic receipt + a light line of evidence */
.s-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center }
.holo { position: relative; padding: 28px; overflow: hidden; display: grid; gap: 18px; align-content: start; --mx: 50%; --my: 30%; max-width: 560px; justify-self: center; width: 100% }
.holo::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(460px circle at var(--mx) var(--my), color-mix(in srgb, var(--evera) 20%, transparent), transparent 60%), conic-gradient(from 200deg at var(--mx) var(--my), transparent, color-mix(in srgb, var(--evenness) 16%, transparent), transparent 28%, color-mix(in srgb, var(--ai) 14%, transparent), transparent 55%, color-mix(in srgb, var(--flare) 10%, transparent), transparent 80%); mix-blend-mode: screen }
@media (prefers-color-scheme: light) { :root:not([data-mode="night"]) .holo::before { mix-blend-mode: multiply; opacity: .45 } }
:root[data-mode="day"] .holo::before { mix-blend-mode: multiply; opacity: .45 }
.holo > * { position: relative }
.rhead { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap }
.rhead .live { display: inline-flex; align-items: center; gap: 10px; font: 800 2.6rem/.9 var(--f-display); font-variation-settings: "wdth" 78, "opsz" 96; color: var(--c) }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 7px 18px; margin: 0; font-size: .94rem }
.kv dt { color: var(--ink-3); font-family: var(--f-data); font-size: .78rem; padding-top: 2px }
.kv dd { margin: 0; overflow-wrap: anywhere }
.thumb { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; font-size: .88rem; color: var(--ink-2) }
.thumb svg { width: 96px; height: 96px; border-radius: 14px; display: block }
.chain { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; display: grid; gap: 22px; max-width: 560px }
.chain::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 20%, transparent)); border-radius: 2px; box-shadow: 0 0 12px var(--c) }
.chain .pulse { position: absolute; left: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 22px 4px var(--c); top: 0; animation: travel 3.2s var(--ease) infinite }
@keyframes travel { from { top: 4px; opacity: 1 } 90% { opacity: 1 } to { top: calc(100% - 14px); opacity: 0 } }
.chain li { position: relative; display: grid; gap: 3px }
.chain li::before { content: ""; position: absolute; left: -29px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c); background: var(--void) }
.chain li.ok::before { background: var(--c) }
.chain li b { font: 800 1.3rem/1.1 var(--f-display); font-variation-settings: "wdth" 84, "opsz" 48 }
.chain li span { font: 500 .78rem/1.5 var(--f-data); color: var(--ink-2); overflow-wrap: anywhere }
.chain li em { font: 500 .72rem/1 var(--f-data); color: var(--c); font-style: normal }

/* RESULTS */
.s-results { grid-template-rows: auto auto minmax(0, 1fr); row-gap: 18px }
.figures { display: flex; flex-wrap: wrap; gap: 18px 46px; margin: 0; padding: 0; list-style: none }
.figures li { display: grid; gap: 4px }
.figures .v { font: 800 clamp(3rem, 6.4cqw, 6.6rem)/.84 var(--f-display); font-variation-settings: "wdth" 74, "opsz" 96; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.figures .l { font-size: .92rem; color: var(--ink-2) }
.figures .s { font: 500 .72rem/1.4 var(--f-data); color: var(--ink-3) }
.constellation { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; min-height: 0 }
.constellation svg { width: 100%; height: 100%; min-height: 220px; overflow: visible }
.constellation .axis { font: 500 11px var(--f-data); fill: var(--ink-3) }
.constellation .grid { stroke: var(--line); stroke-dasharray: 2 6 }
.moon { cursor: pointer; transition: transform var(--t2) var(--ease); transform-box: fill-box; transform-origin: center }
.moon:hover, .moon:focus-visible { transform: scale(1.22); outline: none }
.tip { position: absolute; pointer-events: none; padding: 10px 12px; border-radius: var(--r1); font-size: .84rem; max-width: 250px; display: none }
.tip.on { display: grid; gap: 2px }

/* LEARNING (what has worked, suggestions) */
.learn { display: grid; gap: 14px; max-width: 760px }
.learncard { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r1) }
.learncard p, .learnstrip p { margin: 0 }
.learnlist, .learnstrip ul, .caveats { margin: 0; padding-left: 18px; display: grid; gap: 6px }
.learnlist li.up b { color: var(--ink) }
.learnlist li.down b { color: var(--ink-2) }
.audience { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line) }
.learnstrip { display: grid; gap: 6px; font-size: .9rem; color: var(--ink-2); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r1) }
.pillar-lab { font-size: .86rem; color: var(--ink-2) }
.learn section { display: grid; gap: 12px }
.tablewrap { overflow-x: auto; max-width: 100% }
table.rep { border-collapse: collapse; font: 500 .8rem/1.4 var(--f-data); font-variant-numeric: tabular-nums }
table.rep th, table.rep td { padding: 4px 10px 4px 0; text-align: right; border-bottom: 1px solid var(--line) }
table.rep th:first-child { text-align: left }
.linklist { display: grid; gap: 4px; margin: 6px 0 0 }
.linklist .mono { overflow-wrap: anywhere }

/* LAYERS */
.layer { position: absolute; inset: 0; z-index: 20; display: none; place-items: center; padding: 16px }
.layer.on { display: grid }
.layer.on::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--void) 35%, transparent); animation: fade var(--t2) both }
@keyframes fade { from { opacity: 0 } }
.sheet { position: relative; width: min(480px, 100%); max-height: 100%; overflow: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: rise .7s var(--ease) both }
@keyframes rise { from { transform: translateY(40px) rotateX(14deg) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.sheet .close { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; cursor: pointer; display: grid; place-items: center }
.postcard { display: grid; gap: 10px }
.postcard .ph { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden }
.postcard .ph svg { width: 100%; height: 100%; display: block }
.postcard p { margin: 0; font-size: .95rem; line-height: 1.5 }
.okline { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2) }
.facts { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; min-height: 44px; padding: 10px 12px; border-radius: var(--r1); border: 1px solid var(--line-2); cursor: pointer }
.facts input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--c) }
.holdwrap { display: grid; justify-items: center; gap: 8px; padding-top: 2px }
.hold { position: relative; width: 140px; height: 140px; border-radius: 50%; border: 0; background: none; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; display: grid; place-items: center; color: var(--ink); font: 800 1.05rem/1.1 var(--f-display) }
.hold svg { position: absolute; inset: 0; transform: rotate(-90deg) }
.hold .track { stroke: var(--line-2) }
.hold .fill { stroke: var(--c); stroke-dasharray: 415; stroke-dashoffset: 415 }
.hold .core { position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--c) 75%, transparent), color-mix(in srgb, var(--c) 10%, transparent) 72%); animation: orbbeat var(--beat) ease-in-out infinite }
.hold span { position: relative }
.hold[aria-disabled="true"] { opacity: .45; cursor: not-allowed }
.holdwrap small { font: 500 .76rem/1.4 var(--f-data); color: var(--ink-3); text-align: center; max-width: 34ch }
.altacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.passkey { position: relative; width: min(320px, 100%); padding: 26px 22px; display: grid; justify-items: center; gap: 12px; text-align: center; animation: rise .5s var(--ease) both }
.face { width: 72px; height: 72px }
.face path, .face rect { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round }
.face .scan { stroke: var(--c); stroke-dasharray: 6 8; animation: scan 1s linear infinite }
@keyframes scan { to { stroke-dashoffset: -28 } }
.bloom { position: absolute; inset: 0; z-index: 30; pointer-events: none; display: grid; place-items: end center; padding-bottom: 7%; background: linear-gradient(transparent 40%, color-mix(in srgb, var(--void) 92%, transparent) 66%); clip-path: circle(0% at 50% 100%); transition: clip-path 1s var(--ease) }
.bloom.on { clip-path: circle(160% at 50% 100%); pointer-events: auto }
.app.blooming .labels, .app.blooming .dock, .app.blooming .s-sign > :not(.bloom) { opacity: 0 !important; transition: opacity .4s }
.bloom > div { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 24px; max-width: 520px }
.bloom strong { font: 800 clamp(4rem, 12cqw, 9rem)/.84 var(--f-display); font-variation-settings: "wdth" 76, "opsz" 96; letter-spacing: -.045em }
.bloom span { font: 500 .88rem/1.55 var(--f-data) }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s }
.steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line) }
.steps li::before { counter-increment: s; content: counter(s); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); font: 800 1.15rem/1 var(--f-display) }
.steps li.done::before { content: "✓"; background: var(--c); color: var(--on-brand); border-color: transparent; box-shadow: 0 0 18px var(--c) }

.steps li > div { display: grid; gap: 8px; min-width: 0 }
.steps p { margin: 0; font-size: .9rem; color: var(--ink-2) }
.input { min-height: 44px; padding: 10px 14px; border-radius: var(--r1); border: 1px solid var(--line-2); background: var(--glass-2); width: 100% }
.linkok { font: 500 .78rem/1.4 var(--f-data) }
.linkok.good { color: var(--c) } .linkok.bad { color: var(--alarm) }
.cmd { position: relative; width: min(640px, 100%); padding: 10px; align-self: start; margin-top: 8vh; animation: rise .45s var(--ease) both }
.cmd input { width: 100%; min-height: 56px; padding: 0 16px; border: 0; background: none; font: 700 1.15rem/1 var(--f-body); outline: none }
.cmd ul { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 2px; border-top: 1px solid var(--line) }
.cmd li button { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-weight: 700 }
.cmd li button[aria-selected="true"], .cmd li button:hover { background: var(--glass-hi) }
.cmd li span { font: 500 .74rem/1 var(--f-data); color: var(--ink-3) }
.banner { position: absolute; z-index: 45; left: 12px; right: 12px; top: 12px; max-width: 420px; margin: 0 auto; display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 22px; text-align: left; cursor: pointer; font-size: .9rem; color: var(--ink); animation: drop .6s var(--ease) both }
.banner .ic { width: 40px; height: 40px; border-radius: 11px; background: #0B0A09; display: grid; place-items: center }
@keyframes drop { from { transform: translateY(-140%) } to { transform: none } }
.toast { position: absolute; z-index: 40; left: 50%; bottom: 22px; transform: translate(-50%, 160%); opacity: 0; visibility: hidden; white-space: normal !important; width: max-content; max-width: min(520px, calc(100% - 32px)) !important; text-align: center; cursor: pointer; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: .92rem; transition: transform var(--t3) var(--ease); white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis }
.toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible }
.launch { position: absolute; z-index: 35; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 8px var(--c); pointer-events: none; transition: left 1s var(--swing), top 1s var(--swing), transform 1s var(--swing), opacity .3s .9s; left: 50%; top: 60% }

/* ============================ phone ============================ */
@container app (max-width: 700px) {
  .dock { left: 10px; right: 10px; top: auto; bottom: 10px; transform: none; flex-direction: row; justify-content: space-around; padding: 6px; border-radius: 30px }
  .logo { display: none }
  .dock > a { width: 56px; min-height: 56px; font-size: .62rem }
  .dock > a[aria-current="page"]::after { left: 50%; top: auto; bottom: -4px; width: 18px; height: 3px; margin: 0 0 0 -9px }
  .dock .orb { width: 64px; height: 64px; min-height: 64px; margin: -24px 2px 0 }
  .dock .hide-phone { display: none }
  .screen { padding: 46px 18px 100px; overflow: auto; align-content: start }
  .screen.on { display: flex; flex-direction: column; gap: 14px }
  .screen.on > * { flex-shrink: 0 }
  .mega { font-size: clamp(2.9rem, 15cqw, 4.2rem) }
  .s-pulse .spacer { height: 250px; flex: none }
  .flabel .m { font-size: .68rem; white-space: normal; max-width: 40cqw }
  .needs { max-width: none }
  .needrow { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px }
  .needrow .ix { font-size: 1.7rem }
  .needrow .go { padding: 0 10px }
  .askbar { margin-top: 4px }
  .heartline { display: none }
  .ringwrap .head { position: static }
  .ring { width: 100% }
  .side { padding: 16px }
  .convo { max-height: none; padding: 16px }
  .convo .msgs { overflow: visible }
  .page { overflow: visible; max-width: none; order: -1 }
  .fixrow { grid-template-columns: 28px minmax(0, 1fr) }
  .pv { grid-template-columns: 110px minmax(0, 1fr) }
  .reel { grid-template-columns: minmax(0, 1fr) }
  .studio.on { display: flex; flex-direction: column; overflow: auto; padding: 10px 10px 100px }
  .studio.on > * { flex: none }
  .stage-v .player { height: 360px }
  .board { overflow: visible; flex-direction: row; overflow-x: auto }
  .scene-card { min-width: 210px }
  .insp { overflow: visible }
  .player { max-width: 220px; justify-self: center; width: 100% }
  .fixrow .fix { grid-column: 2; justify-self: start }
  .figures { gap: 14px 26px }
  .figures .v { font-size: 3rem }
  .constellation svg { min-height: 240px }
  .layer { padding: 0; place-items: end stretch }
  .sheet { width: 100%; border-radius: 30px 30px 0 0; max-height: 94%; padding-bottom: 28px }
  .postcard .ph { aspect-ratio: 16 / 7 }
  .passkey { align-self: center; justify-self: center; border-radius: 26px }
  .cmd { margin-top: 0; border-radius: 0 0 26px 26px; align-self: start }
  .toast { bottom: 104px }
}
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation: none !important; transition: none !important }
}
@media (forced-colors: active) { .glass, .note, .needrow { border: 1px solid CanvasText } .hold .fill { stroke: Highlight } }

/* ============================ real-app screens (beyond the prototype) ============================ */
.small { font-size: .88rem }
.btn.big { min-height: 56px; padding: 0 26px; font-size: 1.05rem }
a.btn { text-decoration: none }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.h-sheet { margin: 6px 0 0; font: 800 clamp(1.6rem, 3cqw, 2.2rem)/1.05 var(--f-display); font-variation-settings: "wdth" 84, "opsz" 48 }
.h-small { margin: 0; font: 800 1.15rem/1.2 var(--f-display); font-variation-settings: "wdth" 86, "opsz" 32; display: flex; align-items: center; gap: 8px }
.rh-title { font-size: clamp(2.6rem, 5.2cqw, 5.4rem) } .res-title { font-size: clamp(2.6rem, 5.4cqw, 5.6rem) } .pr-title { font-size: clamp(2.6rem, 4.6cqw, 4.8rem) } .set-title { font-size: clamp(2.6rem, 5cqw, 5rem) }
#h-compose { font-size: clamp(2.4rem, 4.2cqw, 4.4rem) }

/* gate: sign in and join */
.s-gate.on { display: grid; place-items: center; padding: 24px }
.gate { width: min(460px, 100%); padding: 34px 28px; display: grid; gap: 16px; justify-items: start }
.gate .logo { margin: 0 }
.gate .mega { font-size: clamp(2.8rem, 9cqw, 4.2rem) }

/* sign and hand-post: a sheet over the brand's form */
.s-sign.on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); align-items: center; gap: 32px }
.s-sign .sign-form { grid-column: 1; justify-self: center; width: min(72cqh, 100%); aspect-ratio: 1 }
.s-sign .sheet { grid-column: 2; max-height: calc(100cqh - 60px); animation: rise .7s var(--ease) both }
.sheet > * { flex-shrink: 0 }
.thumbs-row { display: flex; gap: 8px; overflow-x: auto }
.thumbs-row img, .thumbs-row video { height: 150px; border-radius: 14px; display: block; object-fit: cover; max-width: 100% }
.postcard .words { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem }
.postcard details summary, .factlist summary, .other summary, .sheet details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700 }
.warnlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.warnlist li { display: grid; gap: 2px; padding: 10px 12px; border-left: 3px solid var(--flare); border-radius: 0 12px 12px 0; background: var(--glass-2) }
.warnlist span { font: 500 .72rem/1.4 var(--f-data); color: var(--ink-3) }
.factlist ul, .sheet details ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .92rem }
.other { display: grid; gap: 10px }
.line-in { width: 100%; min-height: 64px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--glass-2); font-size: .95rem; resize: vertical }
.s-sign .bloom > div { padding-bottom: 40px }
.app.blooming .s-sign .sheet { opacity: 0; transition: opacity .4s }

/* pulse */
.s-pulse .spacer { position: relative }
.form-zone .form-anchor { position: absolute }
.fa-evera { left: 4%; top: 6%; width: 52%; aspect-ratio: 1 }
.fa-evenness { right: 2%; top: 34%; width: 32%; aspect-ratio: 1 }
.fa-neutral { left: 30%; top: 20%; width: 40%; aspect-ratio: 1 }
@container app (min-width: 701px) {
  .s-pulse .spacer { position: absolute; left: 52%; right: 2%; top: 6%; bottom: 14%; pointer-events: none }
}
.flabel { text-decoration: none }
.needs a.needrow { text-decoration: none; color: inherit }
.askbar input:disabled { opacity: .6 }

/* empty states */
.s-empty.on { display: grid; place-items: center }
.s-empty .empty { display: grid; gap: 14px; justify-items: start; max-width: 40ch; position: relative; z-index: 2 }
.empty-form { position: absolute; right: 8%; top: 18%; width: 34%; aspect-ratio: 1 }

/* create */
.convo-head { display: grid; gap: 6px }
.brandpick a.chip { text-decoration: none }
.brandpick a.chip[aria-current="page"] { background: var(--glass-hi); border-color: var(--c) }
.title-in { min-height: 44px; border: 0; border-bottom: 1px solid var(--line); background: none; font: 700 1rem/1.3 var(--f-body); width: 100%; color: var(--ink-2) }
.title-in:focus { border-bottom-color: var(--ink) }
.page .field { display: grid; gap: 6px }
.page .field label { font: 500 .76rem/1.2 var(--f-data); color: var(--ink-3) }
.page .field input:not([type]), .page .field input[id="alt"] { min-height: 44px; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--line-2); background: none; font-size: 1rem; width: 100% }
.page input[type="file"] { min-height: 44px; font-size: .9rem }
.thumbs img, .thumbs video { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: block }
label.place { cursor: pointer }
label.place input { width: 20px; height: 20px; margin: 0; accent-color: var(--c) }
label.place:has(input:checked) { background: var(--glass-hi); border-color: var(--ink-3) }
.page .bottom .btn[disabled] { opacity: .42 }

/* rhythm */
.ringwrap .ring-form { position: absolute; left: 50%; top: 50%; width: min(36%, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none }
.ring .bead { stroke-width: 2.6 }
.ring .b-live { fill: var(--c); filter: drop-shadow(0 0 10px var(--c)) }
.ring .b-sched { fill: var(--void); stroke: var(--ink) }
.ring .b-need { fill: var(--flare); filter: drop-shadow(0 0 10px var(--flare)) }
.weeklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 32cqh; overflow: auto }
.weeklist a { display: grid; gap: 2px; padding: 8px 6px; border-radius: 10px; text-decoration: none }
.weeklist a:hover { background: var(--glass-hi) }
.weeklist span { font: 500 .72rem/1.3 var(--f-data); color: var(--ink-3) }
.legend .lg { width: 14px; height: 14px; border-radius: 50%; display: inline-block }
.lg.live { background: var(--c) } .lg.sched { border: 2px solid var(--ink) } .lg.need { background: var(--flare) }

/* results */
.moon circle { fill: var(--c) }
.moon .m-evera { fill: var(--evera) } .moon .m-evenness { fill: var(--evenness) } .moon .m-neutral { fill: var(--pearl) }
.moon .halo { opacity: .12 }
.moon .hollow { fill: none; stroke-width: 2 }
.moon .hollow.m-evera { stroke: var(--evera) } .moon .hollow.m-evenness { stroke: var(--evenness) } .moon .hollow.m-neutral { stroke: var(--pearl) }

/* proof */
.chainwrap { display: grid; gap: 18px; align-content: start; max-height: 100%; overflow: auto }
.holo .lede { margin: 0 }

/* settings */
.s-settings.on { display: flex; flex-direction: column; gap: 22px; overflow: auto }
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start }
.setcard { padding: 20px; display: grid; gap: 12px }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.plain li { display: grid; gap: 2px }
.stack { display: grid; gap: 10px }
.stack label { font-size: .92rem }
.setcard .kv { font-size: .9rem }

@container app (max-width: 700px) {
  .s-sign.on { display: flex; flex-direction: column; gap: 0; padding: 0 0 100px }
  .s-sign .sign-form { width: 70cqw; margin: 30px auto 0; flex: none }
  .s-sign .sheet { width: 100%; max-height: none; border-radius: 30px 30px 0 0; margin-top: -40px }
  .gate { padding: 28px 20px }
  .empty-form { right: 4%; top: 6%; width: 50% }
  .ringwrap .ring-form { width: 30% }
}
.signbar { display: grid; gap: 10px }
@container app (max-width: 700px) {
  /* On the phone the fact check and the sign button stay in reach while the post scrolls. */
  .s-sign .signbar { position: sticky; bottom: 92px; z-index: 3; margin: 0 -24px; padding: 12px 24px 8px; background: var(--void); border-top: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) auto; align-items: center }
  .s-sign .signbar .hold { width: 104px; height: 104px }
  .s-sign .signbar .holdwrap small { display: none }
}

/* The Create column scrolls as a whole; its parts never squeeze into each other. */
.page > * { flex-shrink: 0 }

/* Targets: chips are full 44px; ring beads have a 48px invisible hit area; the lists beside them are the keyboard and screen-reader way in. */
.brandpick .chip { min-height: 44px }
.ring .bead-hit { fill: transparent; cursor: pointer }
.reslist { max-height: none; margin-top: 10px }

/* Text fields inside a pill show the ring on the pill; the post editor shows a solid bar beside the words. */
.askbar:focus-within, .convo form:focus-within, .cmd:focus-within { outline: 3px solid var(--ink); outline-offset: 2px }
.editor:focus-within::after { width: 3px }

/* ============================ the editor ============================ */
.edhost:empty { display: none }
.edhost { position: absolute; inset: 0; z-index: 25; display: grid; padding: 16px; background: color-mix(in srgb, var(--void) 60%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) }
.ed { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 16px; min-height: 0; animation: rise .5s var(--ease) both }
.ed-top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px }
.ed-top h2 { margin-right: auto }
.ed-stage { display: grid; place-items: center; min-height: 0; background: repeating-conic-gradient(var(--glass-2) 0 25%, transparent 0 50%) 0 0 / 22px 22px; border-radius: var(--r2); overflow: hidden }
.ed-stage canvas { max-width: 100%; max-height: 100%; touch-action: none; cursor: grab; box-shadow: 0 20px 60px rgb(0 0 0 / .45) }
.ed-side { display: flex; flex-direction: column; gap: 14px; overflow: auto; min-height: 0 }
.ed-side > * { flex-shrink: 0 }
.ed-group { border: 0; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px }
.ed-group legend { font: 800 1rem/1.2 var(--f-display); padding: 0 0 6px }
.ed-group label { font: 500 .76rem/1.2 var(--f-data); color: var(--ink-3) }
.ed-group input[type="range"] { width: 100%; min-height: 44px; accent-color: var(--c) }
.ed-group .chip[aria-pressed="true"] { background: var(--glass-hi); border-color: var(--ink-3) }
.ed-layer { display: grid; gap: 8px; padding: 10px; border-radius: var(--r1); border: 1px solid var(--line) }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line-2); cursor: pointer }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--void), 0 0 0 5px var(--ink) }
.ed-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.ed-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; font-size: .88rem }
.ed-checks li .btn { grid-column: 2; justify-self: start; min-height: 40px }
.ed-checks li.ok span:first-child { color: var(--c) } .ed-checks li.bad span:first-child { color: var(--alarm); font-weight: 700 }
.th { position: relative; margin: 0 }
.th img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; display: block }
.th .edit-photo { min-height: 44px; margin-top: 4px; padding: 0 12px; font-size: .8rem }
@container app (max-width: 700px) {
  .ed { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; overflow: auto; padding-bottom: 100px }
  .ed-stage { height: 46cqh }
  .ed-side { overflow: visible }
}

/* ============================ critique fixes ============================ */
.toast.err { border-color: color-mix(in srgb, var(--alarm) 60%, transparent) }
.alarm, .figures .v.alarm, .kv dd.alarm, .rhead .live.alarm { color: var(--alarm) }
.alarmline { margin: 0; padding: 10px 12px; border-left: 3px solid var(--alarm); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--alarm) 10%, transparent); font-size: .92rem }
.flareline { margin: 0; color: var(--flare); font-size: .9rem }
.blocklist { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r2); border: 1px solid color-mix(in srgb, var(--alarm) 55%, transparent); background: color-mix(in srgb, var(--alarm) 8%, transparent) }
.blocklist > b { color: var(--alarm) }
.blocklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.blocklist li { display: grid; gap: 2px } .blocklist li span { font: 500 .72rem/1.4 var(--f-data); color: var(--ink-3) }
.blocklist .btn { justify-self: start }
.warnbox summary { color: var(--flare) }
.chain li.bad::before { border-color: var(--alarm); background: var(--alarm) }
.chain li.bad b { color: var(--alarm) }
.holo .thumb img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; display: block }
.needrow.more .ix { font-size: 1.4rem }
.lg.hand { border: 2px solid var(--ink); border-radius: 2px; transform: rotate(45deg) scale(.8) }
.ring .b-hand { fill: var(--void); stroke: var(--ink); stroke-width: 2.6 }
.ringwrap .head a { text-decoration: none; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; font-size: 1.1rem; pointer-events: auto }
.ringwrap .head { pointer-events: auto }
/* create, no AI yet: one calm column */
.s-compose.no-ai { grid-template-columns: minmax(0, 1fr); justify-items: center }
.s-compose.no-ai .page { width: min(820px, 100%); max-width: 820px }
.createhead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 18px }
.aistrip { margin: 0; font-size: .9rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center }
.droptile { display: grid !important; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; border-radius: var(--r2); border: 1.5px dashed var(--line-2); cursor: pointer; color: var(--ink) !important; font: 400 .95rem/1.3 var(--f-body) !important }
.droptile:hover, #file:focus-visible + * , .field:focus-within .droptile { border-color: var(--ink-3); background: var(--glass-hi) }
.droptile .dt-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 1.4rem/1 var(--f-display); background: var(--glass-hi) }
.droptile b { display: block }
.sendbar { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 6px; background: linear-gradient(transparent, var(--void) 35%) }
.sumline.checking .checking-label { display: inline }
.checking-label { display: none; font: 500 .74rem/1 var(--f-data); color: var(--ink-3) }
.fixrow .lvl { font: 500 .7rem/1 var(--f-data); color: var(--alarm); text-transform: none }
.fixrow.warn .lvl { color: var(--flare) }
.fixrow .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end }
.btn.ghost { background: none; border-color: transparent; font-weight: 400; text-decoration: underline; min-height: 40px }
.editor textarea:focus-visible { outline: none }
/* settings: one editorial column */
.setcol { display: grid; gap: 30px; max-width: 760px }
.setcol > section { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line) }
.brandrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.brandrows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center }
.brandrows .b { display: flex; align-items: center; gap: 8px; font-size: 1.1rem }
.brandrows .muted { grid-column: 1; font-size: .9rem }
.brandrows .btn { grid-column: 2; grid-row: 1 / span 2 }
.linkbtn { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; color: var(--ink-2); font-size: .95rem }
/* the dock's avatar is the way to Settings */
.dock .me { width: 44px; height: 44px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); text-decoration: none; font-weight: 700 }
.dock .me[aria-current="page"] { background: var(--glass-hi); border-color: var(--ink) }
/* sign-in keeps the living forms */
.s-gate .gate { position: relative; z-index: 2; background: none; border: 0; box-shadow: none; padding: 0; width: min(520px, 100%) }
.s-gate.on { grid-template-columns: minmax(0, 1fr); padding: 40px clamp(20px, 6vw, 80px) }
.gate-forms { position: absolute; inset: 0; pointer-events: none }
.gate-forms .fa-evera { left: auto; right: 6%; top: 10%; width: min(44cqw, 60cqh) }
.gate-forms .fa-evenness { right: 34%; top: 56%; width: min(22cqw, 30cqh) }
@container app (max-width: 700px) {
  .s-sign .sheet { overflow: visible }
  .s-compose.no-ai .page { width: 100% }
  .sendbar { bottom: 84px }
  .fixrow .acts { justify-content: start; grid-column: 2 }
  .dock .me { display: grid; margin-top: 0 }
  .s-gate.on { align-content: end; padding-bottom: 60px }
  .gate-forms .fa-evera { right: 8%; top: 6%; width: 64cqw }
  .gate-forms .fa-evenness { right: 58%; top: 30%; width: 30cqw }
  .ring .day { font-size: 22px }
}
/* settings: remove a passkey, sign out everywhere */
.keyrows li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center }
.keyrows li > :not(.keyrm) { grid-column: 1 }
.keyrows .keyrm { grid-column: 2; grid-row: 1 / span 2 }
.signout-all { display: grid; gap: 2px; justify-items: start }
.signout-all .muted { font-size: .85rem }

/* ---------------------------------------------------------------- inbox and bulk upload */
.s-inbox.on, .s-bulk.on { display: flex; flex-direction: column; gap: 22px; overflow: auto }
.inbox-head { display: grid; gap: 10px }
.inbox-col { display: grid; gap: 22px; max-width: 760px }
.inbox-col > section { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line) }
.msglist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.msg { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r2); border: 1px solid var(--line); background: var(--glass); border-left: 3px solid var(--c, var(--line-2)); transition: opacity var(--t2), transform var(--t2) var(--ease) }
.msg.gone { opacity: 0; transform: translateX(24px) }
.msg .who { margin: 0 }
.msg .said { margin: 0; padding: 0; font-size: 1.04rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere }
.msg .answered { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); font-size: .92rem; overflow-wrap: anywhere }
.msg .answered svg { flex: none; margin-top: 2px; color: var(--c, var(--ink)) }
.msg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.composer { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--line-2) }
.composer[hidden], .composer .after[hidden] { display: none }
.composer .after { display: contents }
.replycheck { min-height: 24px; font-size: .92rem }
.replycheck .ok, #bulk-out .ok { color: var(--ink-2); font-weight: 700 }
#bulk-out .err { color: var(--alarm); font-weight: 700 }
.sources summary, .inbox-col details > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center }
.sources ul { display: grid; gap: 6px }
.empty { font-size: 1.05rem }
table.cols { width: 100%; border-collapse: collapse; font-size: .92rem }
table.cols th, table.cols td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere }
table.cols th { font: 500 .78rem/1.3 var(--f-data); color: var(--ink-3) }
table.rows tr.bad td { color: var(--alarm) }
table.rows tr.bad td:nth-child(2) { color: var(--ink) }
#bulk .droptile { grid-template-columns: minmax(0, 1fr) }