/* Mineral green light suspended in a deep, warm charcoal atmosphere. */
body[data-theme="particles"]{--ink:#061417;--paper:#f2f2df;--coral:#aed8c6;--form-surface:#112627}
body[data-theme="particles"] .atmosphere{background:radial-gradient(ellipse at 77% 38%,#173b39 0%,#0c2528 31%,#061417 74%)}
body[data-theme="particles"] .color-field{inset:-30%;background:radial-gradient(ellipse at 63% 34%,#73987f12,transparent 43%),radial-gradient(ellipse at 18% 81%,#0d3f442e,transparent 44%);mix-blend-mode:screen}
body[data-theme="particles"] .metric-label{color:#d0dfd3}
body[data-theme="particles"] .hero-copy>p,body[data-theme="particles"] .journey-step p{color:#ccdbd2}
body[data-theme="particles"] .primary,body[data-theme="particles"] .header-cta{box-shadow:0 0 25px #a8d8c308}
body[data-theme="particles"] .primary:hover,body[data-theme="particles"] .header-cta:hover{box-shadow:0 0 40px #b4ead824}
body[data-theme="particles"] .journey-node{box-shadow:0 0 0 7px #b0e4d00c,0 0 26px #b0e4d044}
body[data-theme="particles"].no-webgl .color-field{background:radial-gradient(ellipse at 70% 45%,#407e6833,transparent 45%)}


@media(max-width:650px){body[data-theme="particles"] .hero{padding-top:16svh}body[data-theme="particles"] .hero-copy>p{margin-top:20px;margin-bottom:18px}}



/* The first two statements are drawn from particles; DOM text remains semantic
   and becomes visible automatically if WebGL is unavailable. */
body[data-theme="particles"] .metric .metric-copy{padding-top:0}
body.particle-type-ready:not(.no-webgl) .particle-type .metric-copy{opacity:0!important}
body[data-theme="particles"] .fold-letter{clip-path:none!important}
body[data-theme="particles"] .metric[data-scene="3"] .metric-copy{isolation:isolate}
body[data-theme="particles"] .metric[data-scene="3"] .metric-copy:before{content:'';position:absolute;z-index:-1;inset:-8px -12px;background:radial-gradient(ellipse,#07161966 0%,#07161922 40%,#07161900 72%);pointer-events:none}
body[data-theme="particles"] .metric[data-scene="3"] .metric-number{color:#fffbea;text-shadow:0 2px 8px #061417dd}
body[data-theme="particles"] .metric[data-scene="3"] .metric-label{color:#f2f2df;font-weight:500;text-shadow:0 1px 6px #061417dd}
body[data-theme="particles"] .closing{height:100svh;padding:0 var(--gutter);align-items:center;justify-content:center}
body[data-theme="particles"] .closing-copy{width:100%}
body[data-theme="particles"] .closing h2{font-size:clamp(68px,min(12.8vw,18svh),180px);margin-bottom:28px}
body[data-theme="particles"] footer{position:absolute;bottom:12px;left:var(--gutter);padding:0;opacity:.45}
body[data-theme="particles"] footer .wordmark{font-size:16px}

/* Broad color pools travel behind every scene, including reading holds. */
body[data-theme="particles"] .color-field{inset:-25%;background:radial-gradient(ellipse at 22% 32%,#347d7199,transparent 48%),radial-gradient(ellipse at 79% 66%,#65547c88,transparent 48%),radial-gradient(ellipse at 52% 91%,#75927c40,transparent 46%);mix-blend-mode:screen;animation:constellation-atmosphere 28s ease-in-out infinite alternate;opacity:.82}
@keyframes constellation-atmosphere{0%{translate:-7% -5%;rotate:-9deg}50%{translate:6% -1%;rotate:3deg}100%{translate:-1% 7%;rotate:12deg}}
@media(prefers-reduced-motion:reduce){body[data-theme="particles"] .color-field{animation:none}}

/* A quiet, browsable proof section between the galaxy and the closing waves. */
.page-selection{position:relative;max-width:1200px;margin:0 auto;padding:110px var(--gutter) 100px}
.section-eyebrow{font-size:10px;letter-spacing:.18em;font-weight:500;color:#b0c9be}
.selection-head{max-width:640px;margin-bottom:42px}
.selection-head h2{font-size:clamp(48px,6.2vw,88px);line-height:1.02;letter-spacing:-.055em;margin:17px 0}
.selection-head h2 em{white-space:nowrap}
.selection-head>p:last-child{font-size:16px;line-height:1.55;color:#b9c9c3;max-width:360px}
.selected-pages{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:1px solid #d5e6dc30}
.page-row{display:flex;align-items:center;gap:13px;min-width:0;padding:19px 0;border-bottom:1px solid #d5e6dc24;transition:background .2s,color .2s}
.page-row:hover{color:#d3ffe8;background:#d5f7e507}
.page-monogram{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;font-size:10px;letter-spacing:.04em;color:hsl(var(--page-hue) 26% 83%);background:linear-gradient(135deg,hsl(var(--page-hue) 25% 30% / .75),hsl(var(--page-hue) 22% 17% / .45));border:1px solid hsl(var(--page-hue) 28% 65% / .23)}
.page-handle{font-size:14px;letter-spacing:-.025em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-followers{font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-left:auto;color:#c0d1c7;white-space:nowrap}
.page-arrow{font-size:16px;color:#8da99b}
.selection-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:34px}
.page-list-button{display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #d5e6dc45;background:#d5e6dc08;border-radius:100px;padding:17px 22px;font-size:13px;min-height:52px}
.page-list-button:hover{background:#d5e6dc14;border-color:#d5e6dc88}
.page-list-button span{font-size:11px;color:#afcbbd;white-space:nowrap}
.selection-foot>p{font-size:10px;color:#94aea1;line-height:1.5;max-width:210px}
#page-directory{background:#102323;border-color:#b8dbca35;width:min(740px,calc(100% - 28px));padding:28px 34px;border-radius:22px;max-height:88svh}
.directory-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px}
.directory-head h2{font-size:48px;letter-spacing:-.045em;margin:14px 0 0;line-height:1}
.directory-close{background:transparent;border:1px solid #d5e6dc40;border-radius:50%;width:38px;height:38px;font-size:24px;flex-shrink:0}
.directory-search input{background:#ffffff05;border-color:#d5e6dc40;font-size:16px;border-radius:10px;padding:15px}
#directory-count{font-size:11px;color:#afc3b9;margin:18px 0 0}
#directory-results .page-row{padding:15px 0}
.directory-note{font-size:11px;color:#9fb6aa;line-height:1.55;margin-top:24px}
.directory-empty{padding:40px 0;color:#afc3b9;font-size:14px}
@media(max-width:650px){
 .page-selection{padding-top:80px;padding-bottom:65px}
 .selection-head{margin-bottom:30px}.selection-head h2{font-size:52px;max-width:310px}.selection-head>p:last-child{font-size:14px;max-width:260px}
 .selected-pages{grid-template-columns:1fr}.page-row{padding:13px 0;gap:10px}.page-handle{font-size:13px}.page-followers{font-size:13px}.page-monogram{flex-basis:32px;height:32px}.page-arrow{font-size:14px}
 .selection-foot{display:block;margin-top:27px}.page-list-button{width:100%;gap:18px;padding:16px 20px}.selection-foot>p{margin-top:16px;max-width:none;font-size:9px}
 #page-directory{padding:23px 20px}.directory-head h2{font-size:40px}
}

/* Give the actual pages more presence in the selection. */
.page-row{position:relative;border-radius:8px;transition:background .22s,box-shadow .22s,transform .22s}
.page-row:hover,.page-row:focus-visible{background:#c1f0d912;box-shadow:0 0 0 9px #c1f0d912;transform:translateX(2px)}
.page-monogram{position:relative;flex-basis:44px;height:44px;overflow:hidden;font-size:12px;border-color:#d2e9dd33}
.page-monogram img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-handle{font-size:16px;font-weight:500;letter-spacing:-.03em;color:#f2f4e8}
.page-followers{display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:#f3f7e9}
.page-followers strong{font-size:19px;font-weight:500;line-height:1.1}
.page-followers small{font-size:9px;font-weight:400;letter-spacing:.015em;color:#a9c0b3}
.page-arrow{transition:transform .22s,color .22s}
.page-row:hover .page-arrow{transform:translate(2px,-2px);color:#deffed}
.page-list-button{background:#b7ddca;color:#102924;border-color:#b7ddca;font-size:14px;font-weight:500;padding:19px 25px;box-shadow:0 5px 24px #03141130;transition:background .2s,box-shadow .2s}
.page-list-button span{color:#345b4c;font-size:11px}
.page-list-button:hover{background:#cee9d9;border-color:#cee9d9;box-shadow:0 7px 28px #03141145}
@media(max-width:650px){
 .page-row{gap:11px;padding:14px 0}.page-monogram{flex-basis:40px;height:40px}.page-handle{font-size:14px}.page-followers strong{font-size:17px}.page-followers small{font-size:8px}.page-arrow{font-size:14px}
 .page-list-button{font-size:14px;padding:18px 20px}
 #directory-results .page-row{gap:9px}#directory-results .page-monogram{flex-basis:34px;height:34px}#directory-results .page-handle{font-size:12px}#directory-results .page-followers strong{font-size:15px}
}

/* Full-number comparison: retain the entire follower count on one line. */
body[data-theme="particles"] .metric[data-scene="3"] .metric-number{font-size:clamp(30px,14.3vw,144px);letter-spacing:-.055em}

body[data-theme="particles"] .primary[data-inquiry]{min-width:168px;justify-content:center}
body[data-theme="particles"] .primary .cta-content{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:inherit;line-height:1;transform:none}
body[data-theme="particles"] .primary .cta-label{font-size:inherit;line-height:1;transform:none}
body[data-theme="particles"] .primary .cta-arrow{display:block;flex:0 0 22px}

.type-caption{position:absolute;left:0;width:100%;text-align:center;transform:translateY(-50%);line-height:1.2;font-weight:500;letter-spacing:-.035em;color:#e2eadd;opacity:0;pointer-events:none}

.page-list-button{justify-content:center}

/* Dormant artwork should not compete with reading or dialog interactions. */
body.render-idle .color-field{animation-play-state:paused!important}
body.no-webgl .type-caption{display:none}