/* Permanent product anchor from the MVP topbar and 8px surface geometry.
   This layer changes containment only; question renderers retain their cadence. */
body{--shell-width:474px;--chamber-height:calc(100dvh - 112px)}
body header,body:has(.kingdom-opening) header,body:has(.opening-framing) header,body:has(.pre-entry-screen:empty) header,body:has(.lens-chamber) header,body:has(.lens-chamber.dissolving) header,body:has(.perceptual-screen) header{
 position:sticky;top:12px;z-index:60;display:flex;justify-content:flex-start;align-items:center;
 width:calc(100% - 24px);max-width:450px;height:76px;min-height:76px;margin:12px auto 0;padding:10px;
 border:1px solid rgba(23,23,23,.075);border-radius:8px;background:#fff;
 opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;backdrop-filter:none;transition:none;gap:0
}
body header .brand,body:has(.kingdom-opening) header .brand{display:flex;align-items:center;flex:none;width:min(340px,52vw);max-width:100%;min-height:42px;margin:0;padding:0}
body header .brand-combined-logo,body:has(.kingdom-opening) header .brand-combined-logo{display:block;width:min(340px,52vw);height:auto;max-height:56px;object-fit:contain;object-position:left center;filter:saturate(.9) contrast(1.03)}
#movement-indicator{display:none!important}
#lens-field{position:relative;max-width:var(--shell-width);margin:0 auto}
body.lens-activated{height:100dvh;overflow:hidden;background:#fff}
body.lens-activated #lens-field{
 width:calc(100% - 24px);max-width:450px;height:var(--chamber-height);margin:12px auto;
 padding:0;background:#000;border-radius:8px;overflow:hidden
}
body.lens-activated #lens-field > main{
 position:relative;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:24px 18px;
 background:#fff;border:0;border-radius:8px;box-shadow:none;overflow:auto;overscroll-behavior:contain;
 scrollbar-width:thin;transform:none
}
body.lens-activated #lens-field > main.leaving{opacity:0;transform:none}
body.lens-activated #lens-field > main.shell-transforming{visibility:hidden}
body.lens-activated #lens-field > main.opening-framing{display:grid;place-items:center;padding:28px 20px}
body.lens-activated .opening-honesty-words p{font-size:18px;line-height:1.8}
body.lens-activated .perceptual-stage{min-height:100%;grid-template-rows:minmax(134px,auto) auto minmax(54px,1fr)}
body.lens-activated .perceptual-answers,body.lens-activated .lens-chamber .perceptual-answers{top:auto;min-height:0;padding:22px 0 12px;gap:14px}
body.lens-activated .perceptual-controls,body.lens-activated .lens-chamber .perceptual-controls{margin:0;padding:16px 0 0;align-self:end}
body.lens-activated .perceptual-question,body.lens-activated .lens-chamber .perceptual-question{font-size:25px;line-height:1.4}
body.lens-activated .perceptual-question.settled,body.lens-activated .lens-chamber .perceptual-question.settled{font-size:22px}
/* Preserve the existing selected recess material over the global plain-button reset. */
body.lens-activated .perceptual-stage.choosing .perceptual-answer.chosen{
 border-radius:999px!important;box-shadow:inset 0 2px 5px rgba(53,48,43,.12),inset 0 -1px 3px rgba(53,48,43,.025)!important
}
body.lens-activated .perceptual-stage.dissolving .perceptual-answer.chosen{box-shadow:inset 0 1px 3px transparent,inset 0 -1px 2px transparent!important}
body.lens-activated .discovery-question-screen{min-height:100%}
body.lens-activated #preview{display:none}
body.lens-activated #status:not(:empty){position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:65;width:calc(100% - 64px);max-width:410px;padding:8px 12px;background:#fff;border-radius:4px;margin:0}
/* The overture bleach belongs to the cinematic field rather than the viewport. */
.opening-whiteout{position:absolute;inset:0;z-index:5;border-radius:inherit}
.chamber-transition{position:fixed;z-index:40;box-sizing:border-box;background:#000;border-radius:8px;overflow:hidden;pointer-events:none}
.chamber-transition > div{width:100%;height:100%;background:#fff;border-radius:8px}
body.lens-activated #lens-field > .film{position:absolute;inset:10px;z-index:10;border-radius:6px;overflow:hidden}
@media(max-height:740px){
 body.lens-activated #lens-field > main{padding:18px 16px}
 body.lens-activated .perceptual-stage{grid-template-rows:minmax(110px,auto) auto minmax(44px,1fr)}
 body.lens-activated .perceptual-answers,body.lens-activated .lens-chamber .perceptual-answers{gap:6px;padding-top:12px}
 body.lens-activated .opening-honesty-words p{font-size:17px;margin-bottom:24px}
}
/* Contain header margins so focus changes cannot scroll the root by a few pixels. */
body{display:flow-root}
/* Dormant lens: identity, cinematic field, quiet boundary statement only. */
main.threshold.kingdom-opening{padding:12px}
.kingdom-opening .discovery-cinematic{height:var(--chamber-height);aspect-ratio:auto}
.kingdom-opening .discovery-disclaimer{padding-top:16px;max-width:none;text-align:center}
body .kingdom-opening .discovery-disclaimer p{text-transform:none!important;text-align:center;font-size:12px;line-height:1.5;letter-spacing:0;color:#737373;border:0;background:none;margin:0}
body.lens-activated #lens-field > main.opening-moments{display:grid;place-items:center;padding:28px 24px}
body .opening-moment{max-width:24ch;margin:0;text-align:center;text-wrap:balance;font-size:27px;line-height:1.45;letter-spacing:.01em;text-transform:none!important;opacity:0;transition:opacity 700ms ease}
body .opening-moment.visible{opacity:1}
@media(prefers-reduced-motion:reduce){body .opening-moment{transition:none}}
/* Activated lens: the surrounding product canvas falls away into black. */
body{transition:background-color 700ms ease}
body.lens-activated,body.lens-activated:has(.kingdom-opening){background:#000}
html:has(body.lens-activated){background:#000}
@media(prefers-reduced-motion:reduce){body{transition:none}}

/* Persistent information pocket in the product header. */
body header .opening-more{display:block;margin-left:auto;color:#35302b}
body header .opening-info :is(p,h2){text-transform:none!important}
body header .opening-info h2{font-family:inherit;font-size:25px;line-height:1.3;font-weight:400;letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
/* Balance the unchanged boundary statement across the mobile footer. */
body .kingdom-opening .discovery-disclaimer p{
 max-width:100%;margin-inline:auto;text-wrap:balance;letter-spacing:.015em;line-height:1.65
}
/* Centre the control between the circular motif and the bottom of the field.
   Motif lower edge = 50% field height + (2391 - 1920) / 2160 field width. */
.kingdom-opening .discovery-cinematic{container-type:inline-size}
body .kingdom-opening button#activate{
 top:calc(75% + 10.902778cqw);bottom:auto;transform:translate(-50%,-50%);
 font-size:12px;letter-spacing:.3em;text-indent:.3em;text-transform:lowercase!important
}

body .opening-honesty-words .honesty-opening{text-transform:none!important}
/* Opening observation arrives softly at the exact centre of the white interior. */
body .perceptual-thought.is-opening-observation{
 top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align:center;
 transition:opacity 700ms ease
}
body .perceptual-thought.is-opening-observation.visible{
 transition:opacity 1800ms cubic-bezier(.22,.61,.36,1)
}
/* One spatial grammar across the enquiry: question, response space, quiet controls. */
body.lens-activated .perceptual-stage{
 height:100%;min-height:0;grid-template-rows:minmax(150px,auto) minmax(0,1fr) auto;gap:12px
}
body.lens-activated .perceptual-answers,body.lens-activated .lens-chamber .perceptual-answers{
 height:100%;min-height:0;padding:10px 0;gap:12px;align-content:space-evenly;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin
}
body.lens-activated .perceptual-controls,body.lens-activated .lens-chamber .perceptual-controls{min-height:48px;padding:0;align-self:end;align-items:center}
body.lens-activated .perceptual-thought{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answers{align-content:start;gap:4px}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answer{min-height:44px;font-size:17px}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answer[aria-pressed=true]{border-radius:999px!important;box-shadow:inset 0 2px 5px rgba(53,48,43,.12),inset 0 -1px 3px rgba(53,48,43,.025)!important}
body.lens-activated .perceptual-stage[data-answer-type=text] .perceptual-answers{grid-template-rows:auto auto minmax(150px,1fr);align-content:stretch;justify-items:stretch;gap:8px}
.perceptual-answers .response-note{margin:0;font-size:13px;line-height:1.7;text-wrap:balance}
.perceptual-answers :is(.response-note,.reflection-label,.perceptual-reflection){opacity:0;transition:opacity 1000ms ease}
.perceptual-answers.arrived :is(.response-note,.reflection-label,.perceptual-reflection){opacity:1}
.perceptual-answers .reflection-label{margin:0;font-size:12px;text-align:left}
.perceptual-answers .perceptual-reflection{width:100%;height:100%;min-height:150px;padding:12px 2px;resize:none;font-size:18px;line-height:1.8;border:0;background:transparent}
body .perceptual-continue,body .perceptual-change{background:transparent!important;border:0!important;box-shadow:none!important;font-size:12px;letter-spacing:.08em}
.perceptual-stage.dissolving .perceptual-answers{opacity:0;transition:opacity 700ms ease}
@media(max-height:740px){body.lens-activated .perceptual-stage{grid-template-rows:minmax(130px,auto) minmax(0,1fr) auto;gap:8px}}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answers{grid-template-columns:repeat(2,minmax(0,1fr));align-content:space-evenly;column-gap:12px;row-gap:8px}
.perceptual-stage[data-answer-type=multiple] .response-note{grid-column:1 / -1}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answer{font-size:16px;min-height:50px;width:100%}
.perceptual-stage[data-answer-type=multiple] .perceptual-answer:last-child:nth-child(even){grid-column:1 / -1;max-width:50%}
.perceptual-stage:not([data-phase=answers]) .perceptual-continue{visibility:hidden}
/* User supplied circular portal — one persistent video across question changes. */
.discovery-presence{display:none;position:absolute;left:50%;transform:translateX(-50%);z-index:4;width:48px;height:48px;overflow:hidden;border-radius:50%;background:#000;pointer-events:none}
.discovery-presence video{display:block;width:100%;height:100%;object-fit:cover}
body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{display:block;bottom:106px}
body.lens-activated .perceptual-stage{grid-template-rows:minmax(150px,auto) minmax(0,1fr) 72px auto}
body.lens-activated .perceptual-controls,body.lens-activated .lens-chamber .perceptual-controls{grid-row:4}
@media(max-height:740px){
 body.lens-activated .perceptual-stage{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 56px auto}
 body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{bottom:88px;width:40px;height:40px}
}

/* Preview controls live in the header information pocket during development. */
body header .opening-info{max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
body header .opening-info #preview:not([hidden]){display:block;position:static;width:100%;max-width:none;margin:24px 0 0;padding:20px 0 0;border-top:1px solid #eee;background:transparent;backdrop-filter:none;opacity:1;color:#586060}
body header .opening-info #preview p{font-size:12px;line-height:1.65;margin:0 0 14px}
body header .opening-info #preview .preview-heading{letter-spacing:.08em}
body header .opening-info #preview button{display:block;width:100%;min-height:44px;margin:0;padding:10px 0!important;text-align:left;font-size:12px;text-decoration:none}

/* First white moment: the listening portal leads and the supplied copy follows. */
body.lens-activated #lens-field > main.opening-moments{display:grid;place-items:center;padding:28px 24px}
.listening-arrival{display:flex;flex-direction:column;align-items:center;width:100%;gap:40px;opacity:1;transition:opacity 1200ms ease}
.arrival-portal{display:block;width:var(--arrival-diameter,183px);height:var(--arrival-diameter,183px);max-width:100%;object-fit:contain;border-radius:50%}
.arrival-copy{opacity:0;transition:opacity 1400ms ease;text-align:center}
body .arrival-copy p{font-size:21px;line-height:1.4;letter-spacing:.01em;text-wrap:balance;text-transform:none!important;margin:0}
body .arrival-copy p+p{font-size:14px;margin-top:30px;letter-spacing:.02em;color:#707070}
.listening-arrival.copy-visible .arrival-copy{opacity:1}
.listening-arrival.departing{opacity:0}
@media(prefers-reduced-motion:reduce){.listening-arrival,.arrival-copy{transition:none}}

/* Keep the large listening portal still while the introductory copy changes. */
.listening-arrival.anchored{position:absolute;left:24px;right:24px;width:auto}
body.lens-activated #lens-field:has(.listening-arrival) > .discovery-presence{display:none}
.listening-arrival .opening-honesty{transform:none}
body.lens-activated .listening-arrival .opening-honesty-words p{font-size:16px;line-height:1.65;margin:0 0 14px}
body .listening-arrival .opening-begin{margin:4px auto 0}

/* Shallow glass cap, referencing the warm rim and curved reflection on the tower. */
.arrival-dome{
 position:relative;flex:none;width:var(--arrival-diameter,183px);height:var(--arrival-diameter,183px);max-width:100%;border-radius:50%;isolation:isolate;
 background:#000 url('./assets/kingdom-listening-portal-poster.jpg') center / cover no-repeat;
 box-shadow:0 2px 4px rgba(50,43,32,.24),0 9px 16px -7px rgba(50,43,32,.32)
}
.arrival-dome .arrival-portal{width:100%;height:100%}
:is(.arrival-dome,.discovery-presence)::before,:is(.arrival-dome,.discovery-presence)::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
:is(.arrival-dome,.discovery-presence)::before{
 z-index:1;
 background:radial-gradient(ellipse at 32% 5%,rgba(255,253,246,.48),rgba(255,253,246,.12) 34%,transparent 63%),radial-gradient(ellipse at 76% 94%,rgba(220,204,173,.24),transparent 45%);
 box-shadow:inset 0 2px 3px rgba(255,255,255,.95),inset 2px 0 4px rgba(227,213,185,.7),inset -2px -3px 5px rgba(125,113,91,.55),inset 0 0 0 1.5px rgba(211,198,172,.75)
}
:is(.arrival-dome,.discovery-presence)::after{
 z-index:2;inset:2px;
 background:radial-gradient(ellipse 58% 29% at 34% 12%,rgba(255,255,255,.52),rgba(255,255,255,.18) 44%,transparent 74%),radial-gradient(ellipse 40% 9% at 66% 95%,rgba(255,249,232,.3),transparent 80%);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.65)
}

/* Temporary review navigation, separate from participant response controls. */
.preview-arrows{position:fixed;inset:auto 0 max(2px,env(safe-area-inset-bottom));z-index:70;display:flex;justify-content:space-between;padding:0 8px;pointer-events:none}
body .preview-arrows button{pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;padding:0!important;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;color:#656565;font:24px Arial,sans-serif;line-height:1}
body.lens-activated .preview-arrows button{color:#c7c7c7}
body .preview-arrows button:disabled{opacity:.2;cursor:default}

body .preview-sound{position:fixed;bottom:max(2px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:71;min-height:44px;margin:0;padding:10px 14px!important;font-size:11px;letter-spacing:.08em;color:#656565;background:transparent!important;border:0!important;box-shadow:none!important}
body.lens-activated .preview-sound{color:#777}

/* Circular excerpt: discard the portrait film background outside the glass aperture. */
.arrival-dome{overflow:hidden}
.arrival-dome .portal-overture{position:absolute;left:50%;top:50%;width:100%;height:177.777778%;max-width:none;object-fit:fill;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.arrival-dome.overture-playing .portal-overture{opacity:1}
.arrival-dome.overture-playing .arrival-portal{visibility:hidden}
.portal-bleach{position:absolute;inset:0;z-index:20;background:#fff;opacity:0;pointer-events:none;transition:opacity 800ms ease}
.portal-bleach.visible{opacity:1}
@media(prefers-reduced-motion:reduce){.portal-bleach{transition:none}}

/* Larger full resolution listening portal with centred response groups. */
body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{width:144px;height:144px}
body.lens-activated .perceptual-stage{grid-template-rows:minmax(150px,auto) minmax(0,1fr) 168px auto}
body.lens-activated .perceptual-answers,body.lens-activated .lens-chamber .perceptual-answers{align-content:safe center;justify-items:center;text-align:center}
body.lens-activated .perceptual-answer{min-width:0;justify-content:center;text-align:center}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answers{align-content:safe center}
body.lens-activated .perceptual-stage[data-answer-type=text] .perceptual-answers{align-content:stretch}
@media(max-height:740px){
 body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{width:120px;height:120px}
 body.lens-activated .perceptual-stage{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 136px auto}
}
body.lens-activated .perceptual-stage:not([data-answer-type=multiple]) .perceptual-answers{grid-template-columns:minmax(0,1fr)}
body.lens-activated .perceptual-answer{width:100%;max-width:100%}
body.lens-activated .perceptual-answer .thought-label{min-width:0;max-width:100%;white-space:normal;overflow-wrap:break-word;text-wrap:balance}
body.lens-activated .perceptual-stage[data-answer-type=multiple]{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 168px auto}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answers{row-gap:2px;padding:4px 0}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answer{min-height:44px;padding:4px!important;font-size:15px}
body.lens-activated .perceptual-stage[data-answer-type=multiple] .response-note{font-size:12px;line-height:1.5}
@media(max-height:740px){body.lens-activated .perceptual-stage[data-answer-type=multiple]{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 136px auto}}

/* Lower the question portal and return the released height to the answers. */
.discovery-presence{isolation:isolate;box-shadow:0 2px 4px rgba(50,43,32,.24),0 9px 16px -7px rgba(50,43,32,.32)}
body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{bottom:82px}
body.lens-activated .perceptual-stage{grid-template-rows:minmax(150px,auto) minmax(0,1fr) 144px auto}
body.lens-activated .perceptual-stage[data-answer-type=multiple]{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 144px auto}
@media(max-height:740px){
 body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{bottom:72px}
 body.lens-activated .perceptual-stage,body.lens-activated .perceptual-stage[data-answer-type=multiple]{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 120px auto}
}

/* Let the preceding observation arrive alone before the listening portal appears. */
body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{opacity:0;visibility:hidden;transition:opacity 900ms ease,visibility 900ms}
body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence.is-visible{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{transition:none}}

/* Keep the opening question close to the portal without changing honesty spacing. */
.listening-arrival .arrival-copy{transform:translateY(-14px)}

/* Supplied honesty copy: a primary reassurance and two quieter breaths. */
body .opening-honesty :is(p,button){text-transform:none!important}
body.lens-activated .opening-honesty .opening-honesty-words p{margin:0;letter-spacing:0;text-wrap:balance}
body.lens-activated .opening-honesty .opening-honesty-words .honesty-opening{font-size:18px;line-height:1.4;font-weight:500;color:#35302b}
body.lens-activated .opening-honesty .opening-honesty-words .honesty-guidance{margin-top:28px;font-size:15px;line-height:1.6;font-weight:300;font-style:italic;color:#77716a}
body.lens-activated .opening-honesty .opening-honesty-words .honesty-time{margin-top:28px;font-size:15px;line-height:1.5;font-weight:400;color:#514b45}
body .opening-honesty .opening-begin{margin:38px auto 0;font-size:12px;min-height:48px}

/* Opening observation rests below the previous portal position in the lower third. */
body.lens-activated .perceptual-thought.is-opening-observation{
 top:68%;left:50%;width:100%;max-width:22ch;transform:translate(-50%,-50%);
 font-size:26px;line-height:1.4;letter-spacing:0;text-align:center;text-wrap:balance
}

/* First observation prototype: an animated object and deliberate three-line thought. */
.observation-composition{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;display:flex;flex-direction:column;align-items:center;gap:28px;pointer-events:none}
.observation-composition .observation-portal{display:block;flex:none;width:164px;height:164px;border-radius:50%;object-fit:cover;opacity:0;transition:opacity 900ms ease}
.observation-composition .observation-portal.visible{opacity:1}
body.lens-activated .observation-composition .perceptual-thought.is-opening-observation{position:static;transform:none;width:100%;max-width:22ch;min-height:109.2px;font-size:26px;line-height:1.4;letter-spacing:0;white-space:pre-line;text-wrap:initial;text-align:center}
@media(prefers-reduced-motion:reduce){.observation-composition .observation-portal{transition:none}}

/* Questions arrive at the chamber centre, then settle at the top for responses. */
body.lens-activated .perceptual-question,body.lens-activated .lens-chamber .perceptual-question{
 position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%);
 transition:opacity 350ms ease,top 400ms cubic-bezier(.2,.72,.2,1),transform 400ms cubic-bezier(.2,.72,.2,1),font-size 400ms ease
}
body.lens-activated .perceptual-question.settled,body.lens-activated .lens-chamber .perceptual-question.settled{top:0;transform:none}
body.lens-activated .perceptual-stage.choosing .perceptual-question{opacity:1}
body.lens-activated .perceptual-stage.choosing .perceptual-answer.chosen{font-weight:600}
body.lens-activated .perceptual-stage.choosing .perceptual-controls{visibility:hidden}
body.lens-activated .perceptual-stage.dissolving .perceptual-question{opacity:0;transition:opacity 350ms ease}
body.lens-activated #lens-field:has(.perceptual-stage[data-phase=selection]) > .discovery-presence{transition:opacity 220ms ease,visibility 220ms}

/* Selected responses are bold text only, including while they fade out. */
body.lens-activated #experience .perceptual-stage .perceptual-answer:is(.chosen,[aria-pressed=true]){
 border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
 transform:none!important;text-shadow:none!important;font-weight:700;font-synthesis:weight
}

.observation-composition .observation-dome{width:164px;height:164px;transform-origin:top left;opacity:0;transition:opacity 900ms ease}
.observation-composition .observation-dome.visible{opacity:1}

/* The approved observation and response rhythm applies throughout Discovery. */
.observation-composition{top:var(--observation-offset,27%);transform:translateX(-50%)}
.observation-composition .observation-dome{width:var(--arrival-diameter,183px);height:var(--arrival-diameter,183px)}
body.lens-activated .observation-composition .perceptual-thought.is-opening-observation{text-wrap:balance}
body.lens-activated .perceptual-stage.choosing .perceptual-answers :is(.response-note,.reflection-label){opacity:0;transition:opacity 220ms ease}
body.lens-activated .perceptual-stage.choosing .perceptual-reflection{font-weight:700;font-synthesis:weight}

/* Slightly quieter inter-question thoughts and observations. */
body.lens-activated .observation-composition .perceptual-thought.is-opening-observation{font-size:23.92px}

/* More presence below the answers, with controls clear on either side. */
body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{width:165.6px;height:165.6px;bottom:40px}
body.lens-activated .perceptual-stage{grid-template-rows:minmax(150px,auto) minmax(0,1fr) 124px auto}
body.lens-activated .perceptual-stage[data-answer-type=multiple]{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 124px auto}
body.lens-activated .perceptual-controls{justify-content:space-between}
body.lens-activated .perceptual-controls button{min-width:60px;padding-inline:0;max-width:80px}
body.lens-activated .perceptual-controls .perceptual-continue{order:2;margin-left:auto}
@media(max-height:740px){
 body.lens-activated #lens-field:has(.perceptual-screen) > .discovery-presence{width:138px;height:138px;bottom:36px}
 body.lens-activated .perceptual-stage,body.lens-activated .perceptual-stage[data-answer-type=multiple]{grid-template-rows:minmax(130px,auto) minmax(0,1fr) 102px auto}
}
/* Optional authored context uses the existing reflection treatment within the response scroll area. */
.perceptual-answers .optional-reflection{grid-column:1 / -1;width:100%;text-align:left}
.perceptual-answers .optional-reflection[hidden]{display:none}
.perceptual-answers .optional-reflection textarea{height:84px;min-height:84px;font-size:15px;line-height:1.6}
/* Let long options occupy their intrinsic height instead of overlapping adjacent rows. */
body.lens-activated .perceptual-stage[data-answer-type=multiple] .perceptual-answers{grid-auto-rows:max-content}
/* Authored lowercase is applied in chamberText while preserving the supplied brand casing. */
body .perceptual-question,body .perceptual-words,body .perceptual-thought{text-transform:none!important}
/* Reflection uses the same white chamber, portal material and quiet text controls. */
body.lens-activated #lens-field > main.discovery-result{overflow:hidden}
.result-frame{height:100%;display:flex;flex-direction:column;align-items:center;gap:28px;opacity:0;transition:opacity 700ms ease}
.result-frame.visible{opacity:1}
.result-dome{flex:none;width:183px;height:183px;margin-top:clamp(48px,18vh,150px)}
.result-copy{width:100%;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;text-align:center;display:flex;flex-direction:column;justify-content:safe center;gap:28px;padding:12px 0}
body .discovery-result .result-heading{font-size:24px;line-height:1.4;letter-spacing:0;font-weight:300;margin:0;text-wrap:balance;outline:none;text-transform:none!important}
body .discovery-result .result-paragraph{font-size:17px;line-height:1.65;margin:0;text-wrap:balance;text-transform:none!important}
body .discovery-result[data-result-step=arrival] .result-copy{flex:none;max-width:24ch}
body .discovery-result[data-result-step=arrival] .result-heading{font-size:23.92px}
.result-controls{width:100%;display:flex;justify-content:space-between;align-items:center;gap:28px;min-height:48px;margin-top:auto;flex:none}
body .result-controls button,body .discovery-result .result-destination{border:0;background:none;box-shadow:none;border-radius:0;padding:12px 0;font-size:13px;line-height:1.5;letter-spacing:.06em;color:#555;text-decoration:none}
.result-next{margin-left:auto}
body .discovery-result .result-destination{display:block;color:#252727}
.result-destination[aria-disabled=true]{color:#777}
body .result-own-words,body [data-verbatim],body [data-verbatim] *{text-transform:none!important;white-space:pre-wrap;overflow-wrap:anywhere}
.result-own-words{font-size:18px;line-height:1.65;margin:0;text-align:left}
body .result-preview-note{font-size:11px;line-height:1.5;color:#737373;margin:0}
@media(prefers-reduced-motion:reduce){.result-frame{transition:none}}
@media(max-height:740px){.result-dome{margin-top:40px}.result-copy{gap:22px}body .discovery-result .result-paragraph{font-size:16px}}

/* Secondary information stays in the existing header pocket. */
body header .opening-info .information-item,
body header .opening-info .information-sound{
 display:block;width:100%;min-height:48px;margin:0;padding:12px 0;
 text-align:left;font:inherit;font-size:14px;letter-spacing:.025em;color:#292929;
 background:none;border:0;box-shadow:none;cursor:pointer
}
body .discovery-information{
 box-sizing:border-box;width:calc(100% - 32px);max-width:440px;max-height:calc(100dvh - 64px);
 margin:auto;padding:24px;border:1px solid #e8e6e2;border-radius:8px;
 background:#fffefa;color:#292929;box-shadow:0 12px 48px #00000012;
 font-family:var(--opening-font);text-align:left;overflow-y:auto;overscroll-behavior:contain
}
.discovery-information::backdrop{background:rgb(0 0 0 / .24)}
.information-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
body .discovery-information h2{margin:0;font:inherit;font-size:12px;letter-spacing:.08em;font-weight:500;text-transform:none}
body .discovery-information .information-close{min-height:44px;min-width:44px;padding:8px 0;font:inherit;font-size:13px;color:#555;background:none;border:0;box-shadow:none}
body .discovery-information .information-copy p{font:inherit;font-size:15px;line-height:1.7;letter-spacing:0;text-transform:none;margin:0 0 22px;text-wrap:pretty}
body .discovery-information .information-copy p:last-child{margin-bottom:0}
.information-copy a{display:block;padding:12px 0;color:inherit;font-size:14px}
body .discovery-information button:focus-visible,.opening-info button:focus-visible{outline:2px solid #555;outline-offset:3px}

/* Long relationship-context answers read as complete thoughts, not narrow columns. */
body.lens-activated #experience .perceptual-stage[data-question-id=relational_context]{
 grid-template-rows:110px minmax(0,1fr) 0 auto
}
body.lens-activated #lens-field:has(.perceptual-stage[data-question-id=relational_context]) > .discovery-presence{display:none}
body.lens-activated #experience .perceptual-stage[data-question-id=relational_context] .perceptual-answers{
 grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;
 padding:6px 4px 16px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#aaa transparent
}
body.lens-activated #experience .perceptual-stage[data-question-id=relational_context] .perceptual-answer{
 grid-column:1;width:100%;max-width:none;min-height:48px;height:auto;
 padding:12px 6px!important;font-size:17px;line-height:1.5;letter-spacing:.01em;text-wrap:pretty
}
body #experience .perceptual-stage .perceptual-answer:is(.chosen,[aria-pressed=true]),
body #experience .perceptual-stage .perceptual-answer:is(.chosen,[aria-pressed=true]) .thought-label{
 font-family:Gilroy,Arial,sans-serif;font-weight:700;color:#171717!important
}
@media(max-height:740px){
 body.lens-activated #experience .perceptual-stage[data-question-id=relational_context]{grid-template-rows:100px minmax(0,1fr) 0 auto}
}

/* Explicit, tappable cue for answers below the visible reading area. */
body.lens-activated #experience .perceptual-stage[data-question-id=relational_context]{grid-template-rows:110px minmax(0,1fr) 44px auto}
body #experience .answer-scroll-cue{
 grid-row:3;justify-self:center;align-self:center;min-height:44px;
 padding:8px 12px!important;margin:0;font-size:13px;letter-spacing:.025em;color:#555!important;
 background:none;border:0;box-shadow:none
}
.perceptual-stage:not([data-phase=answers]) .answer-scroll-cue{visibility:hidden;pointer-events:none}
body #experience .perceptual-stage[data-question-id=relational_context] .perceptual-answers{
 scrollbar-gutter:stable both-edges;scrollbar-color:#858585 #f4f4f4
}
@media(max-height:740px){body.lens-activated #experience .perceptual-stage[data-question-id=relational_context]{grid-template-rows:100px minmax(0,1fr) 44px auto}}

/* A quiet writing surface for optional context, with neutral keyboard focus. */
body #experience .optional-reflection{padding:12px 2px 8px}
body #experience .optional-reflection .reflection-label{
 margin:0 0 10px;color:#68645f;font-size:12px;letter-spacing:.025em
}
body #experience .optional-reflection textarea{
 padding:14px 16px;min-height:104px;height:104px;
 background:#faf9f7;border:1px solid #e5e2dc;border-radius:6px;
 color:#292724;caret-color:#292724;font-size:16px;line-height:1.65;
 box-shadow:none;outline:none;transition:border-color 180ms ease,background-color 180ms ease
}
body #experience .optional-reflection textarea:focus{
 border-color:#858079;background:#fff
}
body #experience .optional-reflection textarea:focus-visible{
 outline:2px solid #858079;outline-offset:2px
}

/* Keep the two alternative experience responses together on a balanced final row. */
body.lens-activated .perceptual-stage[data-question-id=reflective_practices] .perceptual-answer{
 max-width:none;padding:8px 4px;min-height:44px;line-height:1.45
}
body.lens-activated .perceptual-stage[data-question-id=reflective_practices] .perceptual-answer:nth-of-type(7){grid-column:1 / -1}
body.lens-activated .perceptual-stage[data-question-id=reflective_practices] .perceptual-answer:nth-of-type(8){grid-column:1;grid-row:6}
body.lens-activated .perceptual-stage[data-question-id=reflective_practices] .perceptual-answer:nth-of-type(9){grid-column:2;grid-row:6;max-width:none}

/* Written reflections share the same warm, neutral material as optional responses. */
body #experience .perceptual-answers > .perceptual-reflection{
 padding:16px;min-height:140px;border:1px solid #e5e2dc;border-radius:6px;
 background:#faf9f7;color:#292724;caret-color:#292724;font-size:17px;line-height:1.7;
 box-shadow:none;outline:none
}
body #experience .perceptual-answers > .perceptual-reflection:focus{border-color:#858079;background:#fff}
body #experience .perceptual-reflection:focus-visible{outline:2px solid #858079;outline-offset:2px}
body #experience .perceptual-reflection::placeholder{color:#827e78;opacity:1}

/* A quiet contact handoff with one clear reading axis and compact input spacing. */
body.lens-activated #lens-field > main.contact{padding:32px 24px 24px}
body #experience.contact .eyebrow{margin:0 0 22px;font-size:10px;letter-spacing:.12em;color:#77716a;text-align:center}
body #experience.contact .observation{margin:0 0 16px;font-size:13px;line-height:1.6;color:#77716a;text-align:center}
body #experience.contact h1{font-size:24px;line-height:1.35;letter-spacing:0;text-align:center;text-wrap:balance;margin:0 auto 28px;max-width:22ch}
body #experience.contact form{margin:0}
body #experience.contact label{margin:18px 0 7px;font-size:12px;color:#68645f}
body #experience.contact input{height:48px;padding:10px 12px;border:1px solid #e5e2dc;border-radius:6px;background:#faf9f7;font-size:16px;line-height:1.5;color:#292724;box-shadow:none}
body #experience.contact input:focus{border-color:#858079;background:#fff}
body #experience.contact input:focus-visible{outline:2px solid #858079;outline-offset:2px}
body #experience.contact .fine{max-width:38ch;margin:24px auto;font-size:12px;line-height:1.8;letter-spacing:.012em;color:#706b65;text-align:center;white-space:normal;text-wrap:balance}
body #experience.contact .contact-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}
body #experience.contact .contact-actions button{width:auto;min-height:48px;margin:0;padding:12px 0;border:0;border-radius:0;background:none;box-shadow:none;font-size:13px;letter-spacing:.025em;color:#68645f}
body #experience.contact .contact-actions .primary{font-family:Gilroy,Arial,sans-serif;font-weight:700;color:#292724}

/* Existing Lens voice input, within the current written-response layout. */
body.lens-activated .perceptual-stage[data-question-id=why_now] .perceptual-answers{grid-template-rows:auto auto minmax(100px,1fr) auto}
.discovery-voice-control{display:flex;align-items:center;gap:12px;text-align:left;min-height:44px}
body .discovery-voice{display:flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:8px 4px;border:0;background:none;box-shadow:none;color:#555;font-size:13px}
.discovery-voice-status{font-size:12px;line-height:1.5;color:#706b65}
/* Status announcements must never intercept the response controls beneath them. */
body.lens-activated #status{pointer-events:none}

/* Demo cadence keeps the existing positions with shorter transitions. */
body .perceptual-question{transition-duration:350ms,400ms,400ms,400ms}
body .observation-composition .observation-dome{transition-duration:400ms}
body .perceptual-thought,body .result-frame{transition-duration:350ms}
body .opening-honesty,body .arrival-copy{transition-duration:500ms}
body .perceptual-answers :is(.response-note,.reflection-label,.perceptual-reflection){transition-duration:350ms}
body .discovery-presence.voice-enabled{pointer-events:auto}
body .discovery-portal-voice{position:absolute;inset:0;z-index:5;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer}
body .discovery-portal-voice:focus-visible{outline:2px solid #8a7453;outline-offset:5px}
body .discovery-presence.is-recording{outline:2px solid #8a7453;outline-offset:4px}
body .discovery-presence.voice-pending{outline:1px dashed #8a7453;outline-offset:4px}
.discovery-voice-control{justify-content:center;text-align:center}
body .discovery-result[data-result-step=synthesis] .result-copy{gap:18px}
body .discovery-result[data-result-step=synthesis] .result-paragraph{font-size:16px;line-height:1.55;text-wrap:pretty}

@media(prefers-reduced-motion:reduce){body .perceptual-question,body .perceptual-thought,body .observation-dome,body .result-frame,body .opening-honesty,body .arrival-copy{transition-duration:0ms!important}}