:root{color-scheme:dark;--cream:#efdfc7;--muted:#a3aec3;--accent:#83d8c0}*{box-sizing:border-box}body{margin:0;background:#050a19;color:#eee;font-family:Arial,"Microsoft YaHei",sans-serif}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #efe2be;outline-offset:6px}header{position:absolute;top:0;left:0;width:100%;z-index:30;padding:28px 40px;display:flex;justify-content:space-between;align-items:center}.brand{letter-spacing:.16em;font-family:Georgia,"Songti SC",serif;font-size:18px}.brand span{font:10px Arial;letter-spacing:.24em;color:#b5bdcf;margin-left:8px}.quiet{border:1px solid #b3bed338;border-radius:99px;background:#0a13234d;padding:10px 16px;font-size:11px;letter-spacing:.08em;min-height:44px;color:#d0d7e4}#ritual{height:100svh;min-height:620px;position:relative;overflow:hidden;isolation:isolate}.cosmos,.vignette{position:absolute;inset:0;z-index:-3}.cosmos{background:url('/assets/01_space_background.png') center/cover}.vignette{background:radial-gradient(ellipse at 50% 42%,transparent 20%,#03071655 70%,#030716cb);z-index:-2}#stage{position:absolute;width:1000px;height:760px;left:50%;top:49%;margin:-380px 0 0 -500px;transform:scale(var(--scale,1));pointer-events:none}#camera{position:absolute;inset:0;transform-origin:55% 48%;transition:transform 1.4s cubic-bezier(.22,.7,.2,1)}#assembly{position:absolute;inset:0;animation:float 8s ease-in-out infinite;perspective:1100px}.layer{position:absolute;pointer-events:none;display:block;overflow:hidden}.body{left:270px;top:240px;width:460px;height:244px;z-index:3}.lid{left:267px;top:136px;width:466px;height:174px;z-index:5;transform-origin:50% 12%;transition:transform 1.5s cubic-bezier(.25,.6,.2,1),filter 1s}.seam{position:absolute;left:347px;top:295px;width:377px;height:5px;background:#d9f8ff;box-shadow:0 0 12px 5px #92d6ff,0 0 60px 20px #397fff7d;transform:rotate(-3deg);z-index:4;animation:breathe 5s infinite}.chain{z-index:2;animation:sway 9s ease-in-out infinite alternate}.back-left{left:-70px;top:-15px;width:365px;height:274px;transform-origin:100% 100%}.back-right{left:714px;top:-15px;width:392px;height:274px;transform-origin:0 100%;animation-delay:-3s}.front-left{left:-30px;top:380px;width:350px;height:301px;transform-origin:100% 0;z-index:6}.front-right{left:708px;top:380px;width:350px;height:301px;transform-origin:0 0;z-index:6;animation-delay:-2s}.meteor{animation:drift 17s ease-in-out infinite alternate;opacity:.8}.meteor.a{left:70px;top:110px;width:95px;height:84px}.meteor.b{left:820px;top:300px;width:70px;height:68px;animation-delay:-8s}.meteor.c{left:180px;top:600px;width:50px;height:64px;animation-delay:-12s}#key{position:absolute;left:430px;top:650px;width:140px;height:96px;border:0;background:transparent;padding:0;pointer-events:auto;z-index:12;animation:keyfloat 7s ease-in-out infinite;filter:drop-shadow(0 0 12px #b5ddff80)}#key svg{width:100%;height:100%;overflow:visible}#key:hover{filter:drop-shadow(0 0 20px #d3f1ff)}.invitation{position:absolute;top:calc(49% + 150px * var(--scale,1));left:16px;right:16px;text-align:center;transition:opacity .5s;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.4em;color:#b6b8ca;margin:0 0 16px}h1{font:400 clamp(19px,2vw,28px) Georgia,"Songti SC","SimSun",serif;color:var(--cream);letter-spacing:.14em;margin:0}.hint{font-size:10px;letter-spacing:.24em;color:#aebbd1;margin-top:15px}footer{position:absolute;bottom:22px;left:24px;right:24px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em;color:#9ba7c1}#choice{position:absolute;top:18%;left:50%;transform:translateX(-50%);padding:16px 24px;background:#08152d99;border:1px solid #d5e9ff85;border-radius:12px;font-size:14px;letter-spacing:.1em;white-space:nowrap;opacity:0;transition:opacity .5s;z-index:15}#load{position:absolute;inset:0;display:grid;place-content:center;background:#060c20;z-index:20;color:#b7c7df;font-size:13px;letter-spacing:.2em}#load[hidden]{display:none}#restart{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);z-index:22}#light{position:absolute;inset:0;background:radial-gradient(ellipse at 55% 40%,#fff 5%,#d4efff 38%,#7fbaff 80%);opacity:0;pointer-events:none;z-index:25;transition:opacity .6s}body[data-state="transition"] #light{opacity:1}.gem{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);padding:0;border:none;border-radius:50%;background:transparent;z-index:8;pointer-events:none;visibility:hidden}.gem:after{content:"";position:absolute;inset:12px;border-radius:50%;box-shadow:0 0 15px 3px var(--gem);opacity:.45;transition:opacity .2s}.gem span{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#071226eb;border:1px solid #ffffff50;border-radius:6px;padding:8px 12px;font-size:11px;opacity:0;pointer-events:none}.gem:hover span,.gem:focus span{opacity:1}.gem:hover:after,.gem:focus:after,.gem.selected:after{opacity:1;box-shadow:0 0 22px 7px var(--gem)}body[data-state="choosing"] .gem{pointer-events:auto;visibility:visible}body[data-state="inserting"] .gem.selected,body[data-state="turning"] .gem.selected{visibility:visible}body:not([data-state="idle"]):not([data-state="loading"]) .invitation{opacity:0}body[data-state="approaching"] #camera,body[data-state="choosing"] #camera,body[data-state="inserting"] #camera,body[data-state="turning"] #camera,body[data-state="opening"] #camera,body[data-state="transition"] #camera{transform:scale(1.65)}body:not([data-state="idle"]) #assembly,body:not([data-state="idle"]) #key{animation:none}body[data-state="choosing"] #choice,body[data-state="inserting"] #choice,body[data-state="turning"] #choice{opacity:1}body[data-state="opening"] .seam,body[data-state="transition"] .seam{height:50px;top:255px;box-shadow:0 0 80px 55px #bdefff;transition:all 1.5s}body[data-state="opening"] .chain{animation:sway .8s ease-in-out alternate 2}body[data-state="destination"] header{position:relative}#destination{max-width:1100px;margin:0 auto;padding:70px 48px 80px}#destination[hidden]{display:none}.space-tag{font-size:10px;letter-spacing:.35em;color:var(--accent);text-transform:uppercase}.space-title{font:400 clamp(36px,5vw,64px) Georgia,"Songti SC",serif;letter-spacing:.04em;margin:22px 0}.welcome{color:#b7c4cf;font-size:14px;line-height:2.2;max-width:640px}.welcome strong{font-weight:400;color:#e6edec}.back{display:inline-block;font-size:12px;color:#b9c9d0;margin-bottom:38px}.status-panel{margin-top:55px;padding:28px 0;border-top:1px solid #ffffff24;border-bottom:1px solid #ffffff24;color:#b6c3cf;font-size:13px;line-height:2}.status-panel small{display:block;letter-spacing:.2em;font-size:10px;color:var(--accent);margin-bottom:12px}.music-layout{margin-top:42px;display:grid;grid-template-columns:240px 1fr;gap:40px;border-top:1px solid #ffffff20;padding-top:35px}.record{width:220px;height:220px;border:1px solid #a9e5d137;border-radius:50%;background:repeating-radial-gradient(circle,#102625 0 2px,#0b171e 3px 5px);display:grid;place-items:center;box-shadow:0 0 50px #4e9e8220}.record:after{content:'W';font:italic 40px Georgia;border-radius:50%;background:#89bca2;color:#182d27;border:15px solid #416556;width:100px;height:100px;display:grid;place-items:center}.player-head{display:flex;gap:15px;align-items:center;justify-content:space-between}.player-head h2{font-size:19px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}.upload{display:inline-block;background:#b8d8c9;color:#10251e;border:0;padding:14px 20px;border-radius:6px;white-space:nowrap;font-size:12px;cursor:pointer}#files{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:2px solid white;outline-offset:4px}.notice{color:#94a8af;font-size:12px;line-height:1.9}audio{display:block;width:100%;margin:22px 0}#volume{accent-color:#b8d8c9;width:130px;vertical-align:middle}#playlist{list-style:none;margin:28px 0 0;padding:0}#playlist button{width:100%;background:transparent;border:0;border-top:1px solid #ffffff18;text-align:left;padding:15px 10px;font-size:13px;overflow-wrap:anywhere}#playlist button.active{color:#b6e8d5;background:#a1dcc509}#audio-error{color:#f2bd93;font-size:13px}body.iwicca{background:#f5f1e7;color:#354535;color-scheme:light;--accent:#73836a}body.iwicca .brand span,body.iwicca .quiet,body.iwicca .welcome,body.iwicca .welcome strong,body.iwicca .back,body.iwicca .status-panel{color:#606c58}body.iwicca .status-panel{border-color:#7b89623b}body.iwicca .quiet{background:transparent;border-color:#7b896240}
@keyframes float{50%{transform:translateY(-9px)}}@keyframes keyfloat{50%{transform:translateY(-8px) rotate(3deg)}}@keyframes sway{to{transform:rotate(.8deg)}}@keyframes drift{to{transform:translate(12px,-17px) rotate(8deg)}}@keyframes breathe{50%{opacity:.6}}@media(max-width:600px){header{padding:18px 20px}.brand{font-size:16px}.brand span{font-size:8px;letter-spacing:.16em}.quiet{padding:9px 12px}#ritual{min-height:620px}#stage{top:47%}.invitation{top:calc(47% + 150px * var(--scale,1))}h1{font-size:19px;letter-spacing:.05em}.eyebrow{font-size:8px;letter-spacing:.25em}.hint{margin-top:12px}footer{font-size:9px;justify-content:center}footer span{display:none}#choice{top:20%;font-size:12px;padding:14px 17px}body[data-state="choosing"] #camera,body[data-state="approaching"] #camera,body[data-state="inserting"] #camera,body[data-state="turning"] #camera,body[data-state="opening"] #camera,body[data-state="transition"] #camera{transform:translateX(-30px) scale(2.2)}.meteor.a{opacity:.35}.meteor.b,.meteor.c{display:none}#destination{padding:38px 24px 60px}.space-title{font-size:38px}.music-layout{grid-template-columns:1fr;gap:25px}.record{width:150px;height:150px;margin:auto}.record:after{width:70px;height:70px;border-width:10px;font-size:28px}.player-head{align-items:start;flex-direction:column}.welcome{font-size:13px}.status-panel{margin-top:35px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.15s!important}body #camera{transition:none!important}}
/* Ritual v2: calibrated lid assembly and animation-owned timing. */
#camera{transition:none!important}body[data-state] #camera{transform:none}
.lid-hinge{position:absolute;left:273px;top:158px;width:456px;height:150px;z-index:5;transform-origin:48% 13%;transform-style:preserve-3d;pointer-events:none}
.lid-hinge .lid{left:0;top:0;width:100%;height:100%;transform:none!important;filter:none!important;transition:none;transform-origin:48% 13%}
#lock-anchor{position:absolute;left:60.2%;top:74.8%;width:2px;height:2px;transform:translate(-50%,-50%)}
#key{transform-origin:13% 85%;transform-style:preserve-3d;transition:none;opacity:1}
.key-shaft{position:absolute;inset:0;display:block;transform-origin:13% 85%;transform-style:preserve-3d}
#key-tip{position:absolute;left:13%;top:85%;width:2px;height:2px;transform:translate(-50%,-50%);pointer-events:none}
body:not([data-state="idle"]) #key{pointer-events:none}
body[data-state="opening"] .seam,body[data-state="transition"] .seam{height:5px;top:295px;box-shadow:0 0 12px 5px #92d6ff,0 0 60px 20px #397fff7d;transition:none}
.inner-glow{position:absolute;left:285px;top:224px;width:430px;height:98px;z-index:4;pointer-events:none;opacity:.08;background:radial-gradient(ellipse,#f1fbff 0,#9edaff88 32%,#5d8eff00 72%);filter:blur(7px);transform-origin:50% 80%}
.rays{position:absolute;left:174px;top:110px;width:640px;height:360px;z-index:9;opacity:0;pointer-events:none;background:repeating-conic-gradient(from 13deg at 55% 50%,transparent 0deg 17deg,#b4ddff35 18deg 20deg,transparent 22deg 36deg);mask-image:radial-gradient(ellipse,#000 0%,#0008 35%,transparent 70%);filter:blur(2px)}
body[data-state="opening"] #choice,body[data-state="transition"] #choice{opacity:1}#choice{top:16%;font-size:12px;background:#08152dcc}
#light{transition:none!important;background:radial-gradient(ellipse at 55% 40%,#e6f5ff 5%,#bfdfff 38%,#6d9ed5 80%)}body[data-state="transition"] #light{opacity:0}
body[data-state="opening"] .chain{animation:none}
@media(max-width:600px){#choice{top:15%;font-size:11px}body[data-state] #camera{transform:none}.inner-glow{filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.key-shaft,.lid-hinge{transition:none!important}}
/* The original rebuilt 03 lid has a different camera angle. Reuse only the
   exact lid polygon from the approved reference, as an independently hinged layer. */
.lid-hinge{left:270px;top:147px;width:460px;height:145px;transform-origin:47% 65%}
.lid-hinge .lid{overflow:visible}
#lock-anchor{left:60.7%;top:71.4%}
.rays{background:repeating-conic-gradient(from 13deg at 55% 50%,transparent 0deg 17deg,#d5eeff88 18deg 20deg,transparent 22deg 36deg)}
.rays:after{content:"";position:absolute;top:51%;left:8%;width:84%;height:2px;background:#ddf6ff;box-shadow:0 0 18px 5px #88d4ff;transform:rotate(-3deg)}
/* V3: replace the pre-perspectived image card with a rigid textured mesh. */
#mechanical-scene{position:absolute;inset:0;width:1000px;height:760px;z-index:5;pointer-events:none}
.lid-hinge,.inner-glow,.rays{display:none!important}
#key{filter:none;animation:none!important}#key:hover{filter:none}#key:focus-visible{border-radius:40px}
.aperture-light{position:absolute;inset:0;width:1000px;height:760px;z-index:4;opacity:.1;pointer-events:none;filter:drop-shadow(0 0 18px #a4dbff)}
.aperture-rays{position:absolute;left:180px;top:0;width:640px;height:460px;z-index:9;opacity:0;pointer-events:none;background:repeating-conic-gradient(from 13deg at 50% 85%,transparent 0deg 17deg,#d5eeff88 18deg 20deg,transparent 22deg 36deg);mask-image:radial-gradient(ellipse at 50% 85%,#000 0,#0008 35%,transparent 75%)}
.lock-gold{position:absolute;z-index:10;transform:translate(-50%,-50%);width:28px;height:34px;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(ellipse,#fff5b1 0,#f6ba43aa 40%,#d9970000 75%);box-shadow:0 0 20px #ffd57c}
#choice{top:auto!important;bottom:115px;max-width:calc(100% - 32px);font-size:12px;white-space:normal;text-align:center}
#assembly{perspective:none}
/* The interactive area follows the complete projected idle key, including its bow. */
#key{left:420px;top:592px;width:250px;height:170px}
/* Headroom is part of the 3D render viewport; opening does not crop the attached key. */
#mechanical-scene{inset:auto;left:-120px;top:-220px;width:1240px;height:1100px}

/* V4: all mechanics use one calibrated space; light is volumetric bloom. */
#assembly{animation:none!important}
.aperture-light,.aperture-rays{display:none!important}
#light{position:fixed;inset:0;z-index:100;pointer-events:none;background:radial-gradient(ellipse at 53% 35%,#f9feff 0%,#edfbff 36%,#ddf2ff 68%,#d2ebff 100%);transition:none!important}
body[data-state="transition"] #light{opacity:0}
.seam{height:3px!important;top:295px!important;background:#d9f7ff;box-shadow:0 0 12px 4px #98d9ff,0 0 38px 8px #478ef380;opacity:.7}
body[data-state="opening"] .seam,body[data-state="transition"] .seam{opacity:0}
#choice{bottom:115px;pointer-events:none}
/* V6 restores ambient space motion while keeping the V4 ritual mechanics. */
.global-controls{display:flex;gap:10px;align-items:center}#language{white-space:nowrap}
body[data-state="idle"] #assembly{animation:float 8s ease-in-out infinite!important}
.cosmos{animation:space-pan 36s ease-in-out infinite alternate;transform:scale(1.025)}
#starfield{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@keyframes space-pan{to{transform:scale(1.06) translate(-8px,5px)}}
@media(max-width:600px){header{gap:12px;align-items:flex-start}.global-controls{gap:6px;flex-wrap:wrap;justify-content:flex-end}.global-controls .quiet{font-size:9px;padding:7px 9px;min-height:36px}.brand span{display:none}#destination{padding-top:24px}}

.front-left,.front-right{scale:1.45}
@media(max-width:600px){#key{top:650px;height:190px}}