:root{color-scheme:dark;font-family:'Iowan Old Style','Baskerville','Songti SC','Noto Serif CJK SC',serif;background:#0b121e;color:#e2e5e8;--light:#d5e1e7;--card-duration:240ms;--spatial-duration:450ms;--light-duration:350ms;--unit-duration:400ms}*{box-sizing:border-box}body{margin:0;min-width:280px}button,a{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer;background:transparent;border:0;padding:12px;min-height:44px;min-width:44px}a{display:inline-flex;align-items:center;min-height:44px;padding:10px;text-decoration:none}a:hover,button:hover{color:#fff}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:1px solid #c9d6e2;outline-offset:5px}button:disabled:hover{color:inherit}[hidden]{display:none!important}#shell{min-height:100svh;isolation:isolate}header,footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:2;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left))}header{justify-content:space-between;padding-top:max(12px,env(safe-area-inset-top))}footer{justify-content:center;padding-bottom:max(18px,env(safe-area-inset-bottom));font-size:14px;color:#c0c7d0}#architecture{position:fixed;inset:0;z-index:-1;background:#0b121e;pointer-events:none}#plate{width:100%;height:100%;object-fit:cover;object-position:center}#branch-light{position:absolute;left:25%;top:15%;width:50%;height:55%;opacity:.11;background:radial-gradient(ellipse,var(--light),transparent 65%);transition:background-color var(--light-duration);mix-blend-mode:screen}main{max-width:960px;margin:auto;padding:4vh max(24px,env(safe-area-inset-right)) 3vh max(24px,env(safe-area-inset-left));min-height:calc(100svh - 160px)}h1{font-weight:400}#scene-title{font-size:clamp(26px,5vw,42px);margin:8vh 0 5vh}#scene-content{display:flex;flex-direction:column;gap:24px;align-items:flex-start}#scene-content a{font-size:clamp(22px,4vw,32px)}#scene{max-width:640px;margin:auto}#reader{min-height:65svh;display:flex;flex-direction:column}#path-label,#index-path{font-size:14px;letter-spacing:.12em;line-height:1.7;font-weight:400;color:#c4ccd7;margin:1vh 0 4vh}#card-text{font-size:clamp(25px,4.6vw,38px);line-height:1.55;max-width:680px;width:100%;margin:auto;white-space:pre-wrap;overflow-wrap:break-word;padding:5vh 0 7vh;text-wrap:pretty}#card-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:8px;width:100%;margin-top:auto;font-size:clamp(13px,2.9vw,16px)}#previous{text-align:left}#next{text-align:right}#index-entries{list-style:none;padding:0;max-width:680px;margin:3vh auto}#index-entries li{margin:0 0 24px}#index-entries a{display:block;font-size:clamp(20px,3.8vw,27px);line-height:1.55;padding:12px 0}#index-entries .index-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#index-entries [aria-current]{text-decoration:underline;text-underline-offset:.3em}#about{max-width:660px;margin:auto}#about-title{font-size:clamp(30px,5vw,44px);margin-bottom:2em}#about-copy section{margin:5vh 0 12vh;font-size:clamp(21px,3.6vw,28px);line-height:1.7}#about-copy p{margin:0 0 1.5em;white-space:pre-line}.passage{min-width:140px;min-height:100px;border-bottom:1px solid #637386;justify-content:center}#scene-content .passage{font-size:28px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip:focus{position:fixed;top:0;left:0;background:#142333;z-index:10}html:lang(zh) #card-text{line-height:1.75}html:lang(zh) #path-label{letter-spacing:.06em}@media(min-width:800px){main{padding-top:6vh}#scene-content{gap:36px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Gate 2 — scene plates and live optical-space labels. About rules remain untouched. */
#shell:not([data-scene="about"]) #architecture{background:#080f1a}
#plate,#plate-back{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#plate-back{z-index:0}#plate{z-index:1}
#branch-light{z-index:2;left:10%;top:0;width:80%;height:85%;opacity:.22;background:var(--light);mask-image:radial-gradient(ellipse at 50% 28%,#000,transparent 68%);transition:background-color var(--light-duration) ease;mix-blend-mode:screen}
#shell:not([data-scene="about"]) header{font-size:16px}
#shell:is([data-scene="exterior"],[data-scene="threshold"],[data-scene="units"],[data-scene="unit"]) main{padding:0 0 20px;max-width:100%}
.visual-scene{width:min(100%,520px);max-width:520px!important;position:relative}
.visual-scene #scene-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.visual-scene #scene-content{position:relative;display:block;width:100%}
.scene-plate{display:block;width:100%;height:auto}
.visual-scene #scene-content a{position:absolute;justify-content:center;text-align:center;line-height:1.25;min-height:48px;padding:8px;z-index:1;text-shadow:0 2px 8px #020711,0 0 14px #020711;font-size:clamp(18px,4.8vw,27px)}
.visual-scene .entrance{left:47%;top:77%;transform:translateX(-50%);min-width:80px}
.visual-scene #scene-content .passage{left:48%;top:15%;width:37%;height:35%;border:0;border-radius:0;min-width:44px;min-height:100px}
.visual-scene .passage:hover{box-shadow:inset 0 0 24px #c4dcea18}
.threshold-copy{position:absolute;top:53%;left:8%;width:84%;font-size:clamp(20px,5.35vw,27px);line-height:1.5;text-shadow:0 2px 8px #020711}
.threshold-copy p{margin:0 0 1em;white-space:pre-line}
.visual-scene .unit-label{width:48%}
.visual-scene .unit-label.label-0{left:0;top:46%}
.visual-scene .unit-label.label-1{right:0;top:46%}
.visual-scene .unit-label.label-2{left:0;top:91%}
.visual-scene .unit-label.label-3{right:0;top:91%}
.visual-scene .branch-label.label-0{left:28%;top:36%;width:40%}
.visual-scene .branch-label.label-1{left:3%;top:59%;width:49%}
.visual-scene .branch-label.label-2{right:5%;top:67%;width:40%}
#shell:is([data-scene="reader"],[data-scene="index"]) main{max-width:820px;padding-top:2vh}
#shell[data-scene="reader"] #reader{min-height:calc(100svh - 175px)}
#card-text{font-size:clamp(25px,5.9vw,36px);line-height:1.55;max-width:640px;text-shadow:0 2px 12px #060c17;text-align:center}
#path-label,#index-path{text-align:center;letter-spacing:.1em}
#card-nav{font-size:16px;gap:4px;padding-top:16px}
#branch-index{min-height:65svh}
#index-entries a{text-shadow:0 2px 12px #060c17}
#close-index{display:block;margin:auto}
@media(max-width:350px){.threshold-copy{font-size:20px;top:50%}.visual-scene[data-kind="threshold"]{padding-bottom:50px}.visual-scene[data-kind="threshold"] #scene-content{padding-bottom:50px}}
@media(min-width:800px){.visual-scene{width:min(520px,calc((100svh - 100px)*.64));min-width:360px}#card-text{padding:6vh 0}#reader{min-height:calc(100svh - 185px)}}
@media(prefers-reduced-motion:reduce){#branch-light{transition:none!important}}

/* Content can grow independently of the Threshold plate at larger text sizes. */
.visual-scene[data-kind="threshold"]{container-type:inline-size}
.visual-scene[data-kind="threshold"] #scene-content{display:grid;padding-bottom:0}
.visual-scene[data-kind="threshold"] .scene-plate{grid-area:1/1;align-self:start}
.threshold-copy{position:relative;grid-area:1/1;align-self:start;left:auto;top:auto;margin:94% 8% 6%;font-size:clamp(1.25rem,5.35vw,1.6875rem)}
.visual-scene[data-kind="threshold"] #scene-content .passage{top:26.6cqw;height:62cqw}
#reading:focus{outline:none}

#path-label,#index-path{color:#e1e7ec;text-shadow:0 1px 4px #02050a,0 0 12px #02050a}


/* Authorized Gate 2 corrections: overlay UI, continuous Threshold, non-overlapping reader. */
#shell header{position:absolute;inset:0 0 auto;background:none;z-index:5;pointer-events:none;font-size:1rem}
#shell header>*{pointer-events:auto;text-shadow:0 1px 5px #030914}
#locale{margin-left:auto}
#shell:is([data-scene="reader"],[data-scene="index"]) main{padding-top:max(76px,calc(env(safe-area-inset-top) + 64px))}
#shell[data-scene="unit"] #scene:not(.visual-scene){padding-top:70px}

/* The same unmodified chamber plate stays beneath the whole Threshold reading field. */
.visual-scene[data-kind="threshold"]{min-height:100svh;padding-bottom:0}
.visual-scene[data-kind="threshold"] #scene-content{display:block;min-height:100svh;padding:58svh 0 8svh}
.visual-scene[data-kind="threshold"] .scene-plate{position:fixed;inset:0;margin:0 auto;width:min(100%,520px);height:100svh;object-fit:cover;object-position:center;z-index:-1}
.visual-scene[data-kind="threshold"] .threshold-copy{position:relative;top:auto;left:auto;grid-area:auto;width:84%;max-width:32ch;margin:0 auto;padding:0;font-size:clamp(1.25rem,5.2vw,1.65rem);line-height:1.65;text-align:left;text-wrap:pretty}
.threshold-copy p{margin:0 0 1.2em}
.visual-scene[data-kind="threshold"] #scene-content .passage{top:15svh;height:35svh}

/* A bounded reading row scrolls; the control row never paints over it. */
#shell[data-scene="reader"] main{padding-bottom:0;min-height:100svh}
#shell[data-scene="reader"] #reader{height:calc(100svh - max(76px,calc(env(safe-area-inset-top) + 64px)));min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#reader #path-label{margin:0 0 16px}
#reader #card-text{min-height:0;height:auto;width:100%;margin:0 auto;overflow-y:auto;overscroll-behavior-y:contain;display:flex;flex-direction:column;padding:20px 0;scrollbar-width:thin;scrollbar-color:#687889 transparent}
#card-copy{flex:none;margin:auto 0;white-space:pre-wrap}
#reader #card-nav{position:static;margin:0;padding:12px 0 max(16px,env(safe-area-inset-bottom));min-height:72px;background:none;z-index:auto}
@media(min-width:800px){.visual-scene[data-kind="threshold"]{width:520px}}
/* Keep the reader and its existing footer within one viewport; only copy scrolls. */
#shell[data-scene="reader"]{height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto}
#shell[data-scene="reader"] main{width:100%;height:100%;min-height:0}
#shell[data-scene="reader"] #reader{height:100%;min-height:0}

/* Gate 2: one continuous field behind Unit scenes and their existing bottom links. */
#shell:is([data-scene="units"],[data-scene="unit"]) #architecture{
 background:
  linear-gradient(rgba(2,5,12,.6),rgba(2,5,12,.35)),
  url('/assets/card-reader/01.jpeg') center / cover no-repeat;
}
#shell:is([data-scene="units"],[data-scene="unit"]) .scene-plate{
 -webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);
 mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);
}
#shell:is([data-scene="units"],[data-scene="unit"]) footer{
 background:none;
}

/* Gate 3: approved remaining Unit plates have vertically stacked chambers. */
.visual-scene:is([data-kind="clearing"],[data-kind="living"],[data-kind="alignment"]) .branch-label{left:20%;right:auto;width:60%}
.visual-scene[data-kind="clearing"] .branch-label.label-0{top:25%}
.visual-scene[data-kind="clearing"] .branch-label.label-1{top:43%}
.visual-scene[data-kind="clearing"] .branch-label.label-2{top:65%}
.visual-scene[data-kind="living"] .branch-label.label-0{top:32%}
.visual-scene[data-kind="living"] .branch-label.label-1{top:46%}
.visual-scene[data-kind="living"] .branch-label.label-2{top:63%}
.visual-scene[data-kind="alignment"] .branch-label.label-0{top:25%}
.visual-scene[data-kind="alignment"] .branch-label.label-1{top:43%}
.visual-scene[data-kind="alignment"] .branch-label.label-2{top:64%}

/* Three reading depths share the approved typography, plate and branch light. */
#shell[data-scene="reader"] #reader{grid-template-rows:auto minmax(0,1fr) auto auto}
#layer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;font-size:clamp(12px,3vw,15px);color:#c4ccd7}
#layer-nav button{padding:8px 2px;text-underline-offset:.35em}
#layer-nav [aria-pressed="true"]{color:#e2e5e8;text-decoration:underline}
#shell[data-layer="exp1"] #card-text,#shell[data-layer="exp2"] #card-text{font-size:clamp(19px,4.6vw,27px);text-align:left;line-height:1.65}
html:lang(zh) #shell[data-layer="exp1"] #card-text,html:lang(zh) #shell[data-layer="exp2"] #card-text{line-height:1.8}
#shell[data-layer="exp1"] #branch-light{opacity:.18}
#shell[data-layer="exp2"] #branch-light{opacity:.14}
@media(max-width:350px){#reader #path-label{margin-bottom:8px}#reader #card-nav{font-size:14px;padding-top:4px;min-height:64px}#shell[data-scene="reader"] footer{gap:0;padding-top:4px;padding-bottom:max(8px,env(safe-area-inset-bottom))}}

/* Four unchanged regions of the approved plate form complete crystal + label links. */
.visual-scene[data-kind="units"] #scene-content{aspect-ratio:2/3;isolation:isolate}
.visual-scene[data-kind="units"] #scene-content .unit-target{position:absolute;display:block;width:50%;height:55%;top:0;left:0;padding:0;overflow:hidden;transform-origin:center;min-height:0}
.visual-scene[data-kind="units"] #scene-content .unit-target:nth-of-type(2n){left:50%}
.visual-scene[data-kind="units"] #scene-content .unit-target.label-2,.visual-scene[data-kind="units"] #scene-content .unit-target.label-3{top:55%;height:45%}
.unit-target .unit-art{position:absolute;width:200%;max-width:none;height:auto;left:0;top:0;pointer-events:none}
.unit-target:is(.label-1,.label-3) .unit-art{left:-100%}
.unit-target:is(.label-2,.label-3) .unit-art{top:auto;bottom:0}
.visual-scene .unit-target .unit-label{position:absolute;left:0;top:60%;width:100%;text-align:center;line-height:1.25;padding:8px;pointer-events:none;font-size:clamp(16px,4vw,21px);text-shadow:0 2px 5px #020711,0 0 10px #020711,0 0 18px #020711}
.visual-scene .unit-target:is(.label-2,.label-3) .unit-label{top:50%}
.unit-target:focus-visible{outline-offset:-3px;z-index:3}
.unit-core{position:absolute;left:50%;top:55%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#d5e1e7;box-shadow:0 0 18px #b9cddd;opacity:0;pointer-events:none}
.unit-target .unit-art{-webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,#000 92%,transparent 100%)}

/* Show each card’s canonical position beside its unchanged index excerpt. */
#index-entries a{display:grid;grid-template-columns:4ch minmax(0,1fr);gap:12px;align-items:start}
#index-entries .index-number{font-variant-numeric:tabular-nums;color:#c4ccd7;text-align:right}

/* Explicit onward link follows the Threshold copy in normal reading order. */
.visual-scene[data-kind="threshold"] #scene-content .threshold-enter{position:relative;display:inline-flex;min-height:48px;padding:10px 0;margin-top:4px;font-size:1em;line-height:1.5;text-align:left;border-bottom:1px solid #8b9bab}

.visual-scene .unit-target:is(.label-1,.label-3) .unit-label{left:-18%}

/* Unit introductions follow the unchanged plate and its branch labels in document flow. */
.visual-scene.unit-scene{padding-top:calc(76px + env(safe-area-inset-top))}
.visual-scene.unit-scene #scene-title{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:0 8% 20px;font-size:32px;line-height:1.3;text-align:center}
.unit-intro{margin:28px 8% 28px;font-size:20px;line-height:1.65;color:#d4dbe3;overflow-wrap:break-word}
.unit-choices{position:relative;width:100%}

/* Anchor the lower Seeing labels to the centers of their crystal cavities. */
.visual-scene[data-kind="seeing"] .branch-label.label-1{left:5%;right:auto;top:56%;width:42%;transform:translateY(-50%)}
.visual-scene[data-kind="seeing"] .branch-label.label-2{left:43%;right:auto;top:62%;width:40%;transform:translateY(-50%)}

/* A quiet portrait before the bilingual conclusion; preserve the supplied photo ratio. */
#about-copy .observer-portrait{display:block;width:60vw;max-width:280px;height:auto;margin:56px auto;border:0;border-radius:0;box-shadow:none;filter:none}
@media(min-width:800px){#about-copy .observer-portrait{width:280px;margin:72px auto}}

/* Quiet, persistent ambient controls in the existing footer. */
#sound-control{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:inherit}
#sound-toggle{padding:10px 8px}
#sound-volume{display:flex;align-items:center;gap:8px;font-size:12px}
#sound-level{width:96px;min-height:44px;margin:0;accent-color:#b4c3cf;cursor:pointer}
#sound-level:focus-visible{outline:1px solid #c9d6e2;outline-offset:3px}

/* Closing invitation follows the complete approved Observer text. */
#about-copy .observer-invitation{margin-top:clamp(56px,10vh,96px);margin-bottom:8vh}
#about-copy .observer-invitation p{margin-bottom:.75em}
#about-copy .observer-email{padding:10px 0;max-width:100%;font-size:clamp(20px,3.6vw,26px);line-height:1.5;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;color:var(--light)}

/* A quiet recent-batch index, separate from the permanent Four Units navigation. */
#shell[data-scene="recent"] main{padding-top:max(76px,env(safe-area-inset-top));}
#recent-additions{max-width:680px;margin:0 auto;}
#recent-title{font-size:clamp(24px,4vw,32px);font-weight:400;}
#recent-intro,.recent-path{font-size:14px;color:#c0c7d0;}
#recent-groups section{margin:36px 0;}
#recent-groups h2{font-size:16px;font-weight:400;letter-spacing:.08em;}
#recent-groups ol{list-style:none;padding:0;}
#recent-groups li{margin:18px 0;}
#recent-groups a{display:block;padding:8px 0;font-size:clamp(20px,3vw,27px);line-height:1.55;}
.recent-path{display:block;margin-bottom:4px;}