@charset "UTF-8";
@media(max-width:520px){nav>a.character-entry{display:block}header nav{gap:12px}.character-entry span{display:none}}
:root{color-scheme:dark;--ink:#f5e6cb;--muted:#c3ae8c;--line:#ccb48a40;--gold:#dfbd7d;font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);background:#211710;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button{border:0;background:none}button,a,select{transition:color .2s,background .2s,opacity .3s}button:hover,a:hover{color:#fff5df}button:active,.primary:active{transform:translateY(1px)}
#backdrop,#scene,.shade,.grain{position:fixed;inset:0}#backdrop{background:#4a2b1b url('./assets/vista-cover.png') center/cover no-repeat;transition:opacity 1s}#scene canvas{width:100%;height:100%;display:block;touch-action:none}#scene{opacity:0;transition:opacity 1.2s}body.ready #scene{opacity:1}body.ready #backdrop{opacity:0}.shade{pointer-events:none;background:linear-gradient(90deg,rgba(15,17,16,.82),rgba(19,19,17,.5) 25%,transparent 55%),linear-gradient(0deg,#171611a6,transparent 24%,transparent 83%,#1a191457);transition:opacity .7s}.grain{pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
header{position:absolute;left:5vw;right:5vw;top:30px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:2}.brand{display:flex;align-items:center;gap:13px;font-size:16px;letter-spacing:.24em}.brand-mark{font-family:"Noto Serif SC","Source Han Serif SC","SimSun",serif;font-size:27px;border:1px solid #dbc09390;width:39px;height:44px;display:grid;place-items:center;letter-spacing:0}.brand small{display:block;letter-spacing:.14em;font-size:8px;margin-top:7px;color:var(--muted)}nav{display:flex;gap:35px;font-size:12px;letter-spacing:.12em}nav button{padding:10px 0}nav a{align-self:center}nav span{margin-left:10px;color:var(--gold)}
main{position:absolute;left:8vw;top:32%;width:min(440px,38vw);z-index:1}.eyebrow{font-size:11px;letter-spacing:.22em;color:var(--muted);margin:0 0 22px}h1{font-family:"Noto Serif SC","Source Han Serif SC","SimSun",serif;font-weight:400;font-size:clamp(48px,6.3vw,98px);line-height:1.18;letter-spacing:.10em;margin:0 0 13px;white-space:nowrap;text-shadow:0 4px 30px #261c1550}.english{font-size:9px;letter-spacing:.34em;color:#dac6a5;margin:0 0 36px}.description{font-size:14px;line-height:2.2;letter-spacing:.12em;color:#dbcbb1;margin:0 0 37px}.actions{display:flex;align-items:center;gap:30px}.primary{background:#e1c28c;color:#2b251b!important;min-height:50px;padding:0 25px;letter-spacing:.16em;font-size:12px;display:inline-flex;align-items:center;gap:37px;border:1px solid #eddaa9}.primary:hover{background:#f2d7a3}.text-link{font-size:12px;letter-spacing:.12em;white-space:nowrap}.text-link span{margin-left:12px;color:var(--gold)}
footer{position:absolute;bottom:28px;left:5vw;right:5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:3}.caption{font-size:10px;letter-spacing:.18em;color:var(--muted);display:flex;align-items:center;gap:15px}.rule{display:block;width:35px;height:1px;background:var(--muted)}.controls{display:flex;align-items:center;gap:0;background:#221e17b3;border:1px solid var(--line);min-height:40px}.controls button,.controls select{font-size:10px;letter-spacing:.07em;padding:11px 15px;background:transparent;border:0;white-space:nowrap}.controls button+button,.quality-label,.controls button:last-child{border-left:1px solid var(--line)}select{cursor:pointer}select option{background:#28251e}.page-ui{transition:opacity .5s,visibility .5s}body.immersive .page-ui{opacity:0;visibility:hidden;pointer-events:none}body.immersive .shade{opacity:0}body.immersive footer{justify-content:flex-end}#scene-hint{position:fixed;bottom:86px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.18em;color:#efdcbd;pointer-events:none;text-shadow:0 2px 5px #000}
#loading{position:fixed;right:5vw;bottom:100px;z-index:5;font-size:11px;letter-spacing:.14em;background:#221d18d9;padding:13px 20px}#loading span{display:block;width:90px;height:1px;background:#dec48f;animation:load 1.5s ease-in-out infinite;transform-origin:left}#loading p{margin:10px 0 0}#notice{position:fixed;right:5vw;bottom:100px;max-width:340px;font-size:12px;line-height:1.8;background:#211e17ee;border:1px solid var(--line);padding:16px;z-index:5}#notice[hidden],#loading[hidden]{display:none}dialog{width:min(540px,90vw);max-height:85dvh;overflow:auto;background:#25251f;color:var(--ink);padding:45px;border:1px solid #baa27f55;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#151713a6;}dialog .close{position:absolute;right:16px;top:13px;font-size:28px}h2{font-family:"Noto Serif SC","Source Han Serif SC","SimSun",serif;font-size:36px;font-weight:400;line-height:1.45;margin:0 0 23px}dialog p{font-size:13px;line-height:2;color:#cdbf9f}dialog h3{font-size:14px;font-weight:400;margin-top:30px}details{margin-top:35px;border-top:1px solid var(--line);padding-top:17px;font-size:11px;color:var(--muted)}summary{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.no-script{position:fixed;bottom:80px;left:5vw;padding:16px;background:#211710}
@keyframes load{50%{transform:scaleX(.25);opacity:.5}}
@media(max-width:520px){header{top:22px;left:6vw;right:6vw}.brand{font-size:13px}.brand-mark{width:31px;height:37px;font-size:22px}.brand small{font-size:6px}nav{gap:18px;font-size:10px}nav>a{display:none}main{left:7vw;top:auto;bottom:132px;width:86vw}h1{font-size:53px;letter-spacing:.16em}.eyebrow{font-size:9px;margin-bottom:12px}.english{font-size:7px;margin-bottom:20px}.description{font-size:12px;line-height:1.9;margin-bottom:22px}.primary{min-height:45px;padding:0 20px;gap:25px}.shade{background:linear-gradient(0deg,#26120cf5,rgba(38,18,12,.75) 21%,transparent 70%),linear-gradient(180deg,#2c170f45,transparent 20%)}footer{bottom:22px;left:6vw;right:6vw;justify-content:center}.caption{display:none}.controls{width:100%;justify-content:space-around}.controls button,.controls select{padding:12px 8px;font-size:9px}.quality-label select{max-width:100px}#scene-hint{bottom:77px;font-size:9px}#notice,#loading{bottom:82px;right:6vw;max-width:88vw}dialog{padding:32px 26px}h2{font-size:30px}}
@media(max-height:620px) and (min-width:521px){main{top:24%}h1{font-size:62px}.description{margin-bottom:20px}.english{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* v2: keep the world and the vessel centered; copy occupies only the left margin. */
@media(min-width:521px){main{left:5vw;top:37%;width:23vw}h1{font-size:clamp(35px,4.1vw,66px);letter-spacing:.07em}.eyebrow{font-size:10px;line-height:1.8}.english{font-size:7px;letter-spacing:.18em;margin-bottom:25px}.description{font-size:12px;letter-spacing:.07em}.actions{gap:22px;flex-wrap:wrap}.primary{padding:0 18px;gap:20px}.shade{background:linear-gradient(90deg,#2a140c80,transparent 33%),linear-gradient(0deg,#24110865,transparent 23%,transparent 85%,#24110835)}}
@media(min-width:521px) and (max-width:1100px){main{top:auto;bottom:105px;width:26vw}h1{font-size:38px}.description{font-size:11px}.actions{gap:17px}.eyebrow{font-size:9px;margin-bottom:12px}.english{font-size:6px;margin-bottom:18px}.description{margin-bottom:20px}.primary{min-height:40px;font-size:10px}.text-link{font-size:10px}}
/* v3: a restrained title over the upper-left sky, with the ark below it. */
@media(min-width:1101px){main{top:27%;left:5vw;width:23vw}h1{font-size:clamp(38px,4.2vw,64px)}.eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:18px}.description{font-size:12px;line-height:2;margin-bottom:27px}.english{margin-bottom:26px}.shade{background:linear-gradient(90deg,#29140c80,transparent 31%),linear-gradient(0deg,#25100850,transparent 18%,transparent 88%,#25100835)}}
.controls{background:#2b160fa6;border-color:#baa37c35}.primary{background:#d5b67c;border-color:#ddc295}.primary:hover{background:#e3c58e}
/* Sound remains reachable when the scene is immersive, without covering the ark. */
#sound-dock{position:fixed;right:5vw;top:94px;z-index:4;font-size:11px;letter-spacing:.09em}
.sound-switch{display:flex;align-items:center;justify-content:flex-end;gap:0}
#sound-toggle{display:flex;align-items:center;gap:11px;min-height:42px;padding:0 13px;color:#e0c7a1;background:#27150d;border:1px solid #cdb38a35;border-right:0;}
#sound-settings{height:42px;display:grid;place-items:center;width:36px;border:1px solid #cdb38a35;background:#27150d;color:#ccb38c}
.sound-wave{display:flex;gap:3px;height:14px;align-items:center}.sound-wave i{width:1px;height:4px;background:currentColor;transform-origin:center;transition:height .4s}.sound-wave i:nth-child(2){height:11px}.sound-wave i:nth-child(3){height:7px}
[data-playing=true] .sound-wave i{animation:sound-wave 1.3s ease-in-out infinite alternate}[data-playing=true] .sound-wave i:nth-child(2){animation-delay:-.8s}[data-playing=true] .sound-wave i:nth-child(3){animation-delay:-.3s}[data-playing=true] .sound-wave i:nth-child(4){animation-delay:-1s}
@keyframes sound-wave{to{transform:scaleY(.35)}}
#sound-panel{position:absolute;right:0;top:52px;width:286px;padding:25px 24px 21px;border:1px solid #c5a77945;background:#23170f;box-shadow:none;max-height:calc(100dvh - 190px);overflow:auto}
#sound-panel[hidden]{display:none}#sound-close{position:absolute;right:11px;top:7px;font-size:24px;color:var(--muted);width:32px;height:32px}.sound-overline{font-size:8px;letter-spacing:.18em;color:#ad906a;margin:0 0 12px}#sound-panel h2{font-size:27px;margin:0 0 7px;letter-spacing:.12em}#sound-status{font-size:10px;line-height:1.8;color:#c5ab88;min-height:36px;margin:0 0 17px}#sound-panel label{display:flex;justify-content:space-between;font-size:11px;margin-top:18px}#sound-panel output{font-variant-numeric:tabular-nums;color:#bfa17a;font-size:10px}#sound-panel input{width:100%;height:24px;margin:7px 0 0;accent-color:#d1af74;cursor:pointer}#sound-panel input:focus-visible{outline:1px solid var(--gold);outline-offset:2px}.sound-note{font-size:9px;line-height:1.9;color:#ac9475;border-top:1px solid #c5a77925;padding-top:15px;margin:18px 0 0}
body.immersive #sound-dock{top:30px}
@media(max-width:520px){#sound-dock{right:6vw;top:81px}#sound-toggle{font-size:10px;min-height:36px}#sound-settings{height:36px;width:34px}#sound-panel{top:46px;width:min(286px,88vw);max-height:calc(100dvh - 205px)}body.immersive #sound-dock{top:22px}}
/* Art Bible v5: opaque earth surfaces, Song type, indigo interaction, one warm CTA. */
:root{--sun-red:#c7361b;--sand-gold:#d9a055;--earth:#3a2317;--bone:#e8dcc4;--indigo:#2e3a6b;--jade:#4fb05a}
h1{font-weight:600;letter-spacing:.12em}h2{font-weight:500}.primary{box-shadow:0 0 18px #f0b86015}.text-link:hover,nav button:hover,#view:hover,#sound-settings:hover{color:#a7b2de}.controls button:focus-visible,#sound-toggle:focus-visible,#sound-settings:focus-visible{outline-color:#7184c4}
button,a,select,.page-ui{transition-duration:.45s;transition-timing-function:cubic-bezier(.16,1,.3,1)}#sound-panel input{accent-color:#7c8bc1}#sound-settings[aria-expanded=true]{background:#2e3a6b}#sound-panel{border-color:#a9916b55}/* Helm: optional controls, revealed only after taking over the voyage. */
#helm{position:fixed;left:5vw;bottom:86px;z-index:4;font-size:10px;letter-spacing:.07em;color:#d6c4a0}
.helm-bar{display:flex;align-items:center;border:1px solid #baa37c40;background:#27190f;min-height:39px}
#helm-toggle{padding:12px 15px;color:#e8dcc4;border-right:1px solid #baa37c35;font-size:11px}#helm-toggle[aria-pressed=true]{background:#2e3a6b}#helm-toggle:disabled{opacity:.45;cursor:default}
#helm-reading{padding:0 12px;font-size:9px;font-variant-numeric:tabular-nums}
#helm-panel{background:#23170f;border:1px solid #baa37c40;border-top:0;width:310px;padding:15px}#helm-panel[hidden]{display:none}#helm-heading{font-size:9px;color:#bba583;margin:0 0 12px;font-variant-numeric:tabular-nums}
.helm-rudder{display:flex;gap:10px;margin-bottom:17px}.helm-rudder button{flex:1;min-height:44px;border:1px solid #8e7d6655;font-size:11px;touch-action:none;user-select:none}.helm-rudder button[aria-pressed=true]{background:#2e3a6b;border-color:#7c8bc1}kbd{font:9px inherit;color:#a89982;margin-left:5px}
#helm-panel label{display:flex;justify-content:space-between;font-size:10px}#helm-speed{width:100%;height:28px;margin:6px 0;accent-color:#7c8bc1;cursor:pointer}.helm-bottom{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#a99474}.helm-bottom button{padding:9px;border:1px solid #a9947450;color:#e8dcc4;font-size:10px}
body.piloting #scene-hint{bottom:auto;top:35px;text-align:left;left:5vw;right:auto;font-size:10px}body.piloting #helm{bottom:86px}
#helm button:focus-visible,#helm input:focus-visible{outline:1px solid #a7b2de;outline-offset:3px}
@media(max-width:520px){#helm{left:6vw;right:6vw;bottom:76px}.helm-bar{justify-content:space-between}#helm-toggle{font-size:10px;padding:10px 12px}#helm-panel{width:100%;padding:13px}.helm-rudder{margin-bottom:12px}body.piloting #helm{bottom:76px}body.piloting #scene-hint{top:73px;left:6vw;font-size:9px}}
@media(max-height:540px) and (min-width:521px){#helm{bottom:76px}body.piloting #helm{bottom:76px}#helm-panel{padding:10px}.helm-rudder{margin-bottom:8px}.helm-rudder button{min-height:36px}}
.helm-bar,#helm-toggle{min-height:44px}
@media(min-width:521px) and (max-width:1100px){body:not(.piloting) #helm{left:auto;right:5vw}}
/* v9: bone typography over charred umber, with restrained amber and indigo. */
:root{--ink:#e8dcc4;--muted:#c4ae8c;--gold:#d9a055;--line:#c7a67838}
h1{color:#f0e4ce;text-shadow:0 2px 20px #23160d55}.description{color:#e1ceb0}.eyebrow,.english{color:#ceb68e}
.primary{background:#d9af70;border-color:#e2bf89;color:#302015!important}.primary:hover{background:#ebc588}
.controls,.helm-bar,#sound-toggle,#sound-settings{background:#251c14;border-color:#a58b6548}#sound-panel,#helm-panel,dialog{background:#211a14;border-color:#b39b7550}
#sound-toggle,.controls button,.controls select,#helm-toggle{color:#e0ceb0}#sound-settings[aria-expanded=true],#helm-toggle[aria-pressed=true],.helm-rudder button[aria-pressed=true]{background:#2e3a6b;color:#e8dcc4}
.grain{pointer-events:none}#scene canvas{cursor:grab}#scene canvas:active{cursor:grabbing}
#helm-help{font-size:9px;margin:7px 0 0;color:#d2bb96}body.piloting #helm-help{display:none}
.controls button,.controls select{min-height:44px}.controls #zoom-in,.controls #zoom-out{font-size:17px;padding:7px 12px}
@media(max-width:1100px){footer .caption{display:none}footer{justify-content:flex-end}.controls{flex-wrap:wrap}}
@media(max-width:520px){.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}.controls button,.controls select{width:100%;font-size:9px;padding:10px 4px}.quality-label select{max-width:none}.quality-label{min-width:0}#helm,body.piloting #helm{bottom:126px}#scene-hint{bottom:auto;top:76px;left:6vw;right:6vw;text-align:left;font-size:9px;letter-spacing:.04em}main{bottom:190px}#notice,#loading{bottom:178px}}
