/* Quiet, test-specific spaces for exploring a saved reading. */
.result-exploration,.ex-actions{--ex-color:#ffc24b;--ex-soft:color-mix(in srgb,var(--ex-color) 15%,transparent);--ex-line:color-mix(in srgb,var(--ex-color) 30%,transparent);color:#f3edf3;text-align:left}
.result-exploration{position:relative;isolation:isolate;margin:30px 0;padding:28px;border:1px solid var(--ex-line);border-radius:26px;background:radial-gradient(ellipse at 80% 25%,var(--ex-soft),transparent 62%),linear-gradient(150deg,rgba(20,33,57,.85),rgba(38,39,65,.78));box-shadow:0 14px 55px #111a2825}
.result-exploration button,.ex-actions button{font-family:var(--sans);-webkit-tap-highlight-color:transparent}
.ex-heading,.ex-action-heading{position:relative}
.ex-kicker{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ex-color);padding-top:8px}
.ex-heading h2{font:400 clamp(26px,4vw,34px)/1.18 var(--serif);letter-spacing:-.025em;margin:22px 0 12px;max-width:440px;color:#f7eff4;text-wrap:balance}
.ex-heading>p,.ex-action-heading>p{font-size:14px;line-height:1.75;color:#d2cfdf;margin:0;max-width:530px}
.ex-scene{position:relative;isolation:isolate;height:340px;margin:25px -4px 5px;border-radius:18px;background:radial-gradient(ellipse at center,var(--ex-soft),transparent 66%)}
.ex-scene::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 6% 28%,var(--ex-color) 0 1px,transparent 1.6px),radial-gradient(circle at 64% 4%,#fff 0 .7px,transparent 1.3px),radial-gradient(circle at 92% 76%,var(--ex-color) 0 1px,transparent 1.8px),radial-gradient(circle at 35% 94%,var(--ex-color) 0 1px,transparent 1.7px),radial-gradient(circle at 38% 27%,#fff 0 .6px,transparent 1.3px);opacity:.4}
.ex-scenery{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ex-trace{fill:none;stroke:var(--ex-color);stroke-width:.8;stroke-opacity:.28;vector-effect:non-scaling-stroke}
.ex-center{display:none;position:absolute;left:35%;top:43%;width:30%;text-align:center;font:italic 16px/1.45 var(--serif);color:#e2d9e6;pointer-events:none;text-wrap:balance}
:is([data-scene="orbit"],[data-scene="compass"],[data-scene="roundtable"],[data-scene="facets"],[data-scene="ripples"]) .ex-center{display:block}
.ex-point{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:110px;min-height:68px;padding:9px 7px;border:1px solid transparent;border-radius:14px;background:transparent;color:#e0d9e5;line-height:1.3;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .25s,color .25s;z-index:1}
.ex-point:hover,.ex-point[aria-pressed="true"]{background:rgba(29,35,54,.9);border-color:var(--ex-line);color:#fff;box-shadow:0 0 24px var(--ex-soft)}
.ex-point:focus-visible,.ex-bubble:focus-visible,.ex-lens:focus-visible{outline:2px solid var(--ex-color);outline-offset:4px;z-index:3}
.ex-point-label{position:relative;display:block;font-size:12px;font-weight:500;text-align:center;text-wrap:balance}
.ex-point-mark{display:grid;place-items:center;position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--ex-line);background:#27334b;color:var(--ex-color);font:10px var(--sans);letter-spacing:.02em;box-shadow:0 0 16px var(--ex-soft)}
.ex-point[aria-pressed="true"] .ex-point-mark{background:var(--ex-color);color:#1d2233;border-color:var(--ex-color);box-shadow:0 0 24px var(--ex-soft)}
.ex-point[data-visited="true"]::after{content:'';position:absolute;right:8px;top:7px;width:3px;height:3px;border-radius:50%;background:var(--ex-color)}
.ex-explorer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 16px}
.ex-progress{color:#c5bfd2;font-size:11px;letter-spacing:.03em}
.ex-insight{border-top:1px solid var(--ex-line);padding-top:22px}
.ex-insight-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 20px;justify-content:space-between}
.ex-insight-heading h3{font:400 24px/1.25 var(--serif);color:#f8f0f4;margin:0}
.ex-measure{font-size:11px;line-height:1.5;color:var(--ex-color);white-space:normal}
.ex-lenses{display:flex;gap:6px;flex-wrap:wrap;margin:20px 0 17px}
.ex-lens{flex:0 1 auto;min-height:38px;padding:8px 12px;border:1px solid var(--ex-line);border-radius:20px;background:transparent;color:#d0cbdc;font-size:11px;line-height:1.4;cursor:pointer}
.ex-lens[aria-pressed="true"]{background:var(--ex-soft);color:#fff;border-color:var(--ex-color)}
.ex-copy,.ex-comparison p{color:#e2dce7;font-size:15px;line-height:1.8;margin:0 0 20px;min-height:54px}
.ex-comparison:empty{display:none}
.ex-comparison:not(:empty){border-left:2px solid var(--ex-color);padding:0 0 0 18px;margin:20px 0 24px}
.ex-comparison h4{font:400 21px var(--serif);margin:9px 0 6px;color:#f6edf4}
.ex-comparison p{margin:13px 0 0}
.ex-reflection{margin-top:22px;border-top:1px solid #ffffff18;padding-top:18px}
.ex-reflection summary{color:var(--ex-color);cursor:pointer;font-size:12px;line-height:1.6;padding:3px 0;min-height:28px}
.ex-reflection summary:focus-visible{outline:2px solid var(--ex-color);outline-offset:4px}
.ex-reflection p{font:italic 19px/1.65 var(--serif);color:#f0e7ed;margin:17px 0 0}
.ex-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Each scene has its own geometry. Only the vessels, map and bridges encode scores. */
[data-scene="constellation"] .ex-scene{height:440px}
[data-scene="constellation"] .ex-point-mark{font-size:0;width:12px;height:12px;border-radius:2px;rotate:45deg}
[data-scene="constellation"] .ex-point[aria-pressed="true"] .ex-point-mark{box-shadow:0 0 7px var(--ex-color),0 0 30px var(--ex-color)}
[data-scene="constellation"] .ex-point{min-height:57px;gap:10px}
[data-scene="lanterns"] .ex-point{border-radius:46% 46% 42% 42%;height:104px;width:96px;background:radial-gradient(ellipse at 50% 43%,var(--ex-soft),#253049 75%);border-color:var(--ex-line);box-shadow:0 0 28px var(--ex-soft)}
[data-scene="lanterns"] .ex-point-mark{border:0;background:transparent;font-size:0;height:16px}
[data-scene="lanterns"] .ex-point-mark::before{content:'';width:9px;height:14px;border-radius:60% 60% 50% 50%;background:var(--ex-color);box-shadow:0 0 18px var(--ex-color)}
[data-scene="doors"] .ex-scene{height:355px}
[data-scene="doors"] .ex-point{height:120px;width:104px;border-radius:55px 55px 8px 8px;border:1px solid var(--ex-line);background:linear-gradient(90deg,#232940 78%,var(--ex-soft));box-shadow:inset -6px 0 0 #ffffff08}
[data-scene="doors"] .ex-point[aria-pressed="true"]{background:linear-gradient(90deg,#252d44,var(--ex-soft));box-shadow:inset -14px 0 20px var(--ex-soft),0 0 24px var(--ex-soft)}
[data-scene="pathway"] .ex-trace,[data-scene="stepping"] .ex-trace{stroke-dasharray:3 8;stroke-width:1.5}
[data-scene="spiral"] .ex-trace{stroke-width:1.3;stroke-dasharray:1 5;stroke-linecap:round}
[data-scene="conversation"] .ex-scene{height:390px;background:none}
[data-scene="conversation"] .ex-point{flex-direction:row;width:185px;min-height:60px;gap:12px;padding:12px;border:1px solid var(--ex-line);border-radius:20px 20px 20px 3px;background:var(--ex-soft)}
[data-scene="conversation"] .ex-point:nth-of-type(even){border-radius:20px 20px 3px 20px;background:rgba(191,170,211,.08)}
[data-scene="conversation"] .ex-point-label{text-align:left}
[data-scene="vessels"] .ex-scene{height:285px}
[data-scene="vessels"] .ex-point{height:190px;width:24%;justify-content:flex-start;padding:22px 10px;border:1px solid var(--ex-line);border-radius:18px 18px 40px 40px;overflow:hidden;background:#25334b;isolation:isolate;gap:17px}
[data-scene="vessels"] .ex-point::before{content:'';position:absolute;bottom:0;left:0;right:0;height:var(--ex-fill);background:linear-gradient(0deg,var(--ex-soft),color-mix(in srgb,var(--ex-color) 26%,transparent));border-top:1px solid var(--ex-line);z-index:-1}
[data-scene="vessels"] .ex-point-label{font-size:13px}
.ex-vessel-score{margin-top:auto;font-size:12px;color:#fff}
[data-scene="mirror"] .ex-point{width:122px;height:105px;border-radius:50%;background:linear-gradient(140deg,#ffffff18,transparent 50%,var(--ex-soft));border-color:var(--ex-line)}
[data-scene="tides"] .ex-trace{stroke-opacity:.2;stroke-width:1.2}
[data-scene="stepping"] .ex-point{border-radius:50% 45% 44% 37%;border-color:var(--ex-line);background:linear-gradient(140deg,var(--ex-soft),#243448);width:118px;min-height:85px;box-shadow:0 10px 0 #0f1c291e}
[data-scene="threads"] .ex-trace{stroke-opacity:.4;stroke-width:1.2}
[data-scene="workbench"] .ex-point{width:25%;height:108px;border:1px solid var(--ex-line);border-radius:12px 12px 22px 12px;background:linear-gradient(145deg,var(--ex-soft),#273044);rotate:-3deg}
[data-scene="workbench"] .ex-point:nth-of-type(even){rotate:3deg}
[data-scene="facets"] .ex-trace{fill:var(--ex-soft)}
[data-scene="facets"] .ex-point-mark{border-radius:5px;rotate:45deg}
[data-scene="horizons"] .ex-scene{background:radial-gradient(ellipse at 80% 20%,var(--ex-soft),transparent 52%)}
[data-scene="horizons"] .ex-trace{stroke-opacity:.5}
[data-scene="horizons"] .ex-point{width:155px;border-color:var(--ex-line);border-radius:30px;background:#29334b;flex-direction:row;gap:14px;padding:13px}
[data-scene="ripples"] .ex-trace{stroke-width:1.3;stroke-opacity:.4}
[data-scene="orbit"] .ex-point-mark{width:20px;height:20px;font-size:0;background:radial-gradient(circle at 30% 30%,#fff,var(--ex-color) 35%,#8b71596b);border:0}
[data-scene="orbit"] .ex-point[aria-pressed="true"] .ex-point-mark{box-shadow:0 0 24px var(--ex-color)}

/* Two independent scales, with a fixed answer-derived point. */
[data-scene="attachment"] .ex-scene{height:370px;margin-top:30px}
.ex-attachment-map{position:absolute;left:17%;right:6%;top:15px;height:210px;border-left:1px solid var(--ex-color);border-bottom:1px solid var(--ex-color);background:linear-gradient(90deg,#ffffff09 1px,transparent 1px),linear-gradient(0deg,#ffffff09 1px,transparent 1px),radial-gradient(ellipse at center,var(--ex-soft),transparent);background-size:25% 25%,25% 25%,100% 100%}
.ex-map-point{position:absolute;width:13px;height:13px;margin:0 0 -6.5px -6.5px;border:2px solid #fff;border-radius:50%;background:var(--ex-color);box-shadow:0 0 20px var(--ex-color)}
.ex-map-point::after{content:'';position:absolute;inset:-12px;border:1px solid var(--ex-color);border-radius:50%;opacity:.4}
.ex-axis-x{position:absolute;top:252px;left:17%;right:6%;text-align:center;font-size:11px;color:var(--ex-color)}
.ex-axis-y{position:absolute;left:0;top:24px;height:195px;writing-mode:vertical-rl;rotate:180deg;text-align:center;font-size:11px;color:var(--ex-color)}
.ex-zero,.ex-x-max,.ex-y-max{position:absolute;font-size:9px;color:#c8bfd7}
.ex-zero{left:-13px;bottom:-19px}.ex-x-max{right:-7px;bottom:-19px}.ex-y-max{left:-29px;top:-4px}
[data-scene="attachment"] .ex-point{left:0;bottom:0;transform:none;width:48%;min-height:68px;flex-direction:row;padding:10px;border-color:var(--ex-line)}
[data-scene="attachment"] .ex-point:last-child{left:auto;right:0}
[data-axis="0"] .ex-attachment-map{border-bottom-width:2px}
[data-axis="1"] .ex-attachment-map{border-left-width:2px}

/* Need and support share one scale; endpoint labels also carry the meaning. */
[data-scene="bridges"] .ex-scene{height:auto;padding:0 0 10px;display:grid;gap:15px;background:none}
.ex-bridge-key{color:#cec7dc;font-size:11px;padding:0 7px 2px}
[data-scene="bridges"] .ex-point{position:relative;transform:none;width:100%;min-height:116px;padding:15px 25px;align-items:stretch;gap:15px;border:1px solid var(--ex-line);background:#26314980}
[data-scene="bridges"] .ex-point-label{text-align:left;font-size:14px}
.ex-bridge-track{position:relative;width:100%;height:1px;background:#ffffff26;margin:3px 0}
.ex-bridge-span{position:absolute;top:-1px;height:3px;background:linear-gradient(90deg,var(--ex-color),#a9cdda);box-shadow:0 0 14px var(--ex-soft)}
.ex-bridge-dot{position:absolute;width:12px;height:12px;top:-5.5px;margin-left:-6px;border-radius:50%;background:var(--ex-color);border:2px solid #e8dff0;box-shadow:0 0 14px var(--ex-soft)}
.ex-bridge-dot.support{background:#9dcbce;border-radius:2px;rotate:45deg;width:10px;height:10px;top:-4.5px;margin-left:-5px}
.ex-bridge-values{font-size:11px;color:#e0d3e5;text-align:left}

/* Invitations form a circle, with a second inner ring for dense mobile collections. */
.ex-actions{container-type:inline-size;border-top:1px solid var(--ex-line);margin-top:28px;padding-top:23px}
.ex-action-heading h3{font:400 26px/1.3 var(--serif);letter-spacing:-.02em;color:#f8eff2;margin:22px 0 12px;text-wrap:balance}
.ex-actions .ex-action-heading p{font-size:14px;line-height:1.7;margin:0;color:#d4ccdd}
.ex-actions .ex-action-hint{font-size:11px;color:#bfb6ce;line-height:1.7;margin:14px 0 6px}
.ex-bubble-garden{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:12px auto 20px;background:radial-gradient(circle at center,var(--ex-soft),transparent 67%)}
.ex-bubble-garden::before{content:'';position:absolute;inset:var(--ex-orbit-inset);border:1px solid var(--ex-line);border-radius:50%;opacity:.32;pointer-events:none}
.ex-bubble-slot{position:absolute;left:var(--ex-x);top:var(--ex-y);translate:-50% -50%;width:min(var(--ex-bubble-size),145px);z-index:1}
.ex-bubble-slot:focus-within,.ex-bubble-slot:hover{z-index:3}
.ex-bubble-surface{position:relative;width:100%}
.ex-bubble{display:grid;place-items:center;box-sizing:border-box;width:100%;aspect-ratio:1;padding:10px 7px;border:1px solid var(--ex-line);border-radius:50%;background:radial-gradient(circle at 30% 15%,#ffffff15,transparent 45%),radial-gradient(circle at 65% 85%,var(--ex-soft),transparent 65%),#27334b;color:#e9e0ea;font-size:clamp(10px,3.4cqw,13px);line-height:1.35;text-wrap:balance;hyphens:auto;box-shadow:inset 0 -5px 16px #ffffff05,0 8px 25px #111a2425;transition:box-shadow .25s,border-color .25s,background .25s;cursor:pointer}
.ex-bubble:hover,.ex-bubble[aria-pressed="true"]{border-color:var(--ex-color);color:#fff;box-shadow:0 0 28px var(--ex-soft),inset 0 0 25px var(--ex-soft)}
@container(max-width:420px){
 .ex-bubble-garden[data-dense="true"]{--ex-bubble-size:22%!important;--ex-orbit-inset:13.5%!important}
 .ex-bubble-garden[data-dense="true"] .ex-bubble-slot{left:var(--ex-compact-x);top:var(--ex-compact-y)}
 .ex-bubble-garden[data-dense="true"] .ex-bubble{padding:4px 2px;font-size:clamp(9px,3.7cqw,12px);line-height:1.2}
 .ex-bubble-garden[data-dense="true"] .ex-bubble-surface{--ex-drift:1px}
}
.ex-action-detail{padding:20px 22px;border:1px solid var(--ex-line);border-radius:18px;background:var(--ex-soft);margin:0 0 7px}
.ex-action-detail h4{font:400 23px/1.3 var(--serif);margin:0 0 12px;color:#fff0ed}
.ex-action-detail p{margin:0;font-size:15px;line-height:1.8;white-space:pre-line;color:#e4dce6}

@media(prefers-reduced-motion:no-preference){
 .ex-bubble-surface{animation:ex-bubble-drift var(--ex-duration,8s) ease-in-out var(--ex-delay,0s) infinite alternate}
 .ex-point-mark{animation:ex-point-breathe var(--ex-duration,8s) ease-in-out var(--ex-delay,0s) infinite alternate}
 [data-scene="ripples"] .ex-trace{animation:ex-ripple 9s ease-in-out infinite alternate;transform-origin:center}
 [data-scene="ripples"] .ex-trace:nth-child(2){animation-delay:-3s}
 [data-scene="ripples"] .ex-trace:nth-child(3){animation-delay:-6s}
 [data-scene="tides"] .ex-scenery{animation:ex-tide 12s ease-in-out infinite alternate}
 [data-scene="pathway"] .ex-trace,[data-scene="spiral"] .ex-trace{animation:ex-path-flow 25s linear infinite}
 .ex-bubble-slot:hover .ex-bubble-surface,.ex-bubble-slot:focus-within .ex-bubble-surface{animation-play-state:paused}
 [data-motion="paused"] *,[data-motion="paused"] *::before,[data-motion="paused"] *::after{animation-play-state:paused!important}
 @keyframes ex-bubble-drift{0%{transform:translateY(var(--ex-drift,3px))}100%{transform:translateY(calc(-1 * var(--ex-drift,3px)))}}
 @keyframes ex-point-breathe{from{filter:drop-shadow(0 0 1px var(--ex-soft))}to{filter:drop-shadow(0 0 7px var(--ex-color))}}
 @keyframes ex-ripple{from{scale:.98;opacity:.45}to{scale:1.03;opacity:.95}}
 @keyframes ex-tide{from{transform:translateY(-3px)}to{transform:translateY(4px)}}
 @keyframes ex-path-flow{to{stroke-dashoffset:-110}}
}
@media(prefers-reduced-motion:reduce){.result-exploration *,.ex-actions *{animation:none!important;transition:none!important}}
@media(max-width:520px){
 .result-exploration{padding:23px 18px;border-radius:22px;margin:25px 0}
 .ex-heading h2{font-size:27px;margin-top:23px}
 .ex-heading>p{font-size:13px;line-height:1.75}
 .ex-scene{height:325px;margin:24px -3px 3px}
 .ex-point{width:90px;padding:8px 4px;gap:7px}
 .ex-point-label{font-size:11px}
 .ex-center{font-size:13px}
 .ex-insight-heading h3{font-size:23px}
 .ex-lens{font-size:10px;padding:8px 10px;min-height:38px}
 .ex-copy,.ex-comparison p{font-size:14px;line-height:1.8}
 [data-scene="constellation"] .ex-scene{height:450px}
 [data-scene="constellation"] .ex-point{width:82px}
 [data-scene="lanterns"] .ex-point{width:78px;height:101px}
 [data-scene="doors"] .ex-point{width:80px;height:113px}
 [data-scene="conversation"] .ex-point{width:140px;gap:7px;padding:11px 8px}
 [data-scene="mirror"] .ex-point{width:100px;height:96px}
 [data-scene="stepping"] .ex-point{width:94px}
 [data-scene="horizons"] .ex-point{width:121px;gap:8px}
 [data-scene="vessels"] .ex-point{width:27%;padding:21px 6px;height:180px}
 [data-scene="vessels"] .ex-point-label{font-size:11px}
 .ex-vessel-score{font-size:10px}
 .ex-actions .ex-kicker{font-size:9px;letter-spacing:.12em}
 .ex-action-heading h3{font-size:24px}
 .ex-bubble{padding:8px 5px}
 .ex-action-detail{padding:19px 17px}
 .ex-action-detail h4{font-size:22px}
 .ex-action-detail p{font-size:14px}
}
@media(max-width:360px){
 .result-exploration{padding:21px 14px}
 .ex-point{width:72px}.ex-point-label{font-size:10px}
 [data-scene="constellation"] .ex-point{width:71px}
 [data-scene="conversation"] .ex-point{width:123px}
 [data-scene="doors"] .ex-point{width:72px}
 [data-scene="lanterns"] .ex-point{width:69px}
 .ex-bubble{padding:6px 4px}
.ex-kicker{font-size:9px;letter-spacing:.12em}
}

.ex-full-guidance{margin:20px 0 0;border-top:1px solid #ffffff20;padding-top:18px}
.ex-full-guidance summary{font-size:12px;line-height:1.6;color:#e7c995;cursor:pointer;padding:7px 0}
.ex-full-guidance summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ex-full-guidance>p:first-of-type{margin-top:22px}
.reading-section>h2+.ex-actions{container-type:inline-size;border-top:0;padding-top:0;margin-top:0}