:root{color-scheme:dark;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#eee9d9;background:#06130e}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ead5a1;outline-offset:6px}#world,#shade{position:fixed;inset:0}canvas{display:block;width:100%;height:100%;touch-action:none}#shade{pointer-events:none;background:linear-gradient(90deg,rgba(3,13,10,.7),transparent 60%);transition:opacity 2s}header{position:fixed;top:35px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:5}header a{font-family:"Songti SC",serif;letter-spacing:4px;color:#ece4cb;text-decoration:none;font-size:20px}header span{font-size:10px;letter-spacing:3px;color:#9aab9a}header button,.actions button{background:none;border:0;font-size:12px;letter-spacing:2px;color:#c5cebd;padding:12px}#intro{position:fixed;left:9%;top:25%;transition:opacity 1.2s,transform 1.2s;pointer-events:none}#intro button{pointer-events:auto}.eyebrow{font-size:11px;letter-spacing:5px;color:#b4c3a5;margin-bottom:30px}h1{font-family:"Songti SC","STSong",serif;font-weight:400;font-size:clamp(46px,5.7vw,92px);line-height:1.25;letter-spacing:-3px;margin:0}h1 span{color:#d9bc7b}.sub{font-size:14px;line-height:2.1;color:#b5bfae;margin:25px 0 30px}.primary{width:220px;padding:19px 23px;background:#d6bd86;color:#15251b;border:1px solid #eddcb4;text-align:left;letter-spacing:2px;font-size:14px;box-shadow:0 0 60px #dbce8820;transition:background .3s}.primary:hover{background:#f4dfae}.primary b{float:right;font-size:20px;font-weight:400}small{display:block;margin-top:18px;font-size:10px;letter-spacing:2px;color:#809381}#seed-label{position:fixed;right:13%;top:73%;font-size:9px;letter-spacing:4px;color:#d5c08c;transition:opacity 1s}#seed-label span{display:block;font-size:12px;letter-spacing:3px;margin-top:10px;color:#9cae94}#seed-label i{display:block;width:1px;height:55px;background:linear-gradient(transparent,#d5c08c);position:absolute;left:0;top:-75px}#caption{position:fixed;left:8%;bottom:24%;opacity:0;pointer-events:none;transition:opacity 1s,transform 1s;max-width:580px;text-shadow:0 2px 30px #001b13}#chapter{color:#b3c899;letter-spacing:4px;font-size:10px}h2{font-family:"Songti SC",serif;font-size:clamp(30px,4vw,55px);font-weight:400;margin:16px 0}#description{color:#bcccb8;line-height:1.9;font-size:14px;white-space:pre-line}#hud{position:fixed;bottom:9%;left:8%;right:8%}.steps{display:flex;gap:30px}.steps button{border:0;background:none;padding:12px 0;font-size:11px;letter-spacing:2px;color:#8eaa91}.steps button.active{color:#e4d7a7}.actions{position:absolute;right:0;bottom:15px}.track{height:1px;background:#b5d5ad22;margin-top:12px}.track i{display:block;background:#b9d299;height:1px;width:0;box-shadow:0 0 12px #bbffb0}footer{position:fixed;bottom:25px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#6e8978;pointer-events:none}.travel #intro{opacity:0;transform:translateY(-20px);visibility:hidden;transition:opacity 1.2s,transform 1.2s,visibility 0s 1.2s}.travel #seed-label{opacity:0}.travel #shade{opacity:.9}.travel #caption{opacity:1}#error{position:fixed;inset:40% 15%;text-align:center;padding:40px;background:#14291c}[hidden]{display:none!important}@media(max-width:650px){header{top:20px}header span{display:none}header a{font-size:16px}#intro{left:7%;top:21%}h1{font-size:48px}.sub{font-size:12px}#seed-label{display:none}#caption{left:7%;bottom:27%;max-width:85%}.steps{gap:15px}.steps button{font-size:9px;letter-spacing:0}.actions{position:static;margin-top:8px}.actions button{padding:10px 15px 0 0}footer{font-size:8px;letter-spacing:0}footer span:last-child{max-width:42%;text-align:right}#hud{bottom:10%}#intro small{font-size:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* V2: a short classroom film inside a real-time scene. */
header div{display:flex;gap:14px}header button{font-size:11px;letter-spacing:1px}#intro{top:27%;left:8%}h1{font-size:clamp(44px,5.3vw,84px);line-height:1.23}#shade{background:linear-gradient(90deg,rgba(0,9,5,.62),transparent 62%)}.travel #shade{opacity:0}.travel header{opacity:.55}.travel header:hover{opacity:1}#seed-label{right:9%;top:79%}#seed-label span{font-size:10px}#caption{bottom:24%;max-width:700px;left:8%}#caption h2{font-size:clamp(28px,3.7vw,58px);line-height:1.3}#description{color:#d7dfcc;font-size:13px;text-shadow:0 2px 12px #000}#hud{bottom:8%;transition:opacity .5s}.travel.rush #hud{opacity:.35}.travel.rush #hud:hover{opacity:1}.travel #caption{opacity:0}.travel.arrival #caption{opacity:1;transform:translateY(0)}.travel.arrival #shade{opacity:1}#impact-word{position:fixed;left:0;right:0;top:45%;text-align:center;font-family:"Songti SC",serif;font-size:clamp(25px,4vw,56px);letter-spacing:.25em;color:#fff6de;text-shadow:0 0 45px #17251b;pointer-events:none;opacity:0;transform:scale(1);will-change:opacity,transform}#letterbox:before,#letterbox:after{content:"";position:fixed;left:0;right:0;background:#020703;height:0;z-index:3;pointer-events:none;transition:height .6s}#letterbox:before{top:0}#letterbox:after{bottom:0}.travel.rush #letterbox:before,.travel.rush #letterbox:after{height:4vh}footer{z-index:4}.steps button{padding:12px 0}.actions button{min-width:66px}.arrival #title{max-width:740px}#error{z-index:20;background:#213028;line-height:1.8}.primary:disabled{cursor:wait;opacity:.65}@media(max-width:650px){header div{gap:0}#fullscreen{display:none}header{left:6%;right:6%}#intro{top:27%;left:7%}h1{font-size:43px}#caption{left:7%;bottom:29%;max-width:86%}#caption h2{font-size:33px}#description{font-size:12px}#hud{bottom:10%}#impact-word{top:46%;letter-spacing:.12em}.sub{max-width:240px}.primary{padding:17px 20px;width:210px}.travel.rush #hud{opacity:.6}}

/* V3: leave room for the actual volume; controls move the camera in the cell. */
#movement{display:none;position:fixed;right:5%;bottom:19%;gap:5px;z-index:6;grid-template-columns:repeat(3,42px)}.exploring #movement{display:grid}#movement button{background:#101e14b8;border:1px solid #acbe8755;padding:12px 4px;border-radius:3px;color:#dde7c9;font-size:14px;touch-action:none}#movement button:first-child{grid-column:1/4;font-size:12px;letter-spacing:2px}#movement button:active{background:#b7c58a;color:#142013}.arrival #caption{max-width:560px;bottom:26%}.arrival #caption h2{font-size:clamp(27px,3vw,43px)}.arrival #description{font-size:12px}.travel.arrival #shade{opacity:.6}.exploring #caption{pointer-events:none}header{filter:drop-shadow(0 1px 5px #000)}
@media(max-width:650px){.arrival #caption{bottom:33%;max-width:82%}.arrival #caption h2{font-size:27px}#movement{bottom:19%;right:6%}#movement button{padding:8px 3px}.actions{max-width:65%}}
:root{background:#080e1e;color:#f3eedf}#shade{background:linear-gradient(90deg,#070e20bc,transparent 70%)}.eyebrow{color:#b7c5d7}h1 span{color:#e4c48a}.sub{color:#c0c9d8}small,footer{color:#8eabc1}header span{color:#aebfd0}.primary{background:#e0c389;color:#17283c;border-color:#f2dfaf}#seed-label{color:#e1c68f}#seed-label span{color:#a9bdd3}.travel.arrival #shade{opacity:.5}#chapter{color:#b3c5d8}#description{color:#cad8e6}.steps button{color:#a6bbd2}.steps button.active{color:#f0d29d}.track i{background:#d4c1ed;box-shadow:0 0 16px #cab5ff}#letterbox:before,#letterbox:after{background:#05091b}.arrival #caption{top:16%;bottom:auto;max-width:800px}.arrival #caption h2{font-size:clamp(26px,3vw,42px)}.arrival #description{font-size:12px}#spells{position:fixed;left:8%;bottom:20%;width:402px;display:none;z-index:6}.exploring #spells{display:block}.spell-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:10px;letter-spacing:2px;color:#ccdaea}.spell-top button,.listen-row button{background:#14273db5;border:1px solid #b2c9e344;border-radius:3px;padding:8px 11px;color:#d5e0ee;font-size:10px;letter-spacing:1px}.spell-top button[aria-pressed=true],.listen-row button[aria-pressed=true]{background:#536075;border-color:#deccad}.spell-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.spell-buttons button{position:relative;min-height:84px;padding:20px 10px 17px;background:linear-gradient(145deg,#26344ae6,#111e31d9);border:1px solid #c0c6da65;border-radius:5px;transition:background .3s,box-shadow .3s,transform .25s}.spell-buttons button b{font-family:Georgia,serif;font-size:24px;font-weight:400;letter-spacing:2px;color:#f2dab0}.spell-buttons button small{position:absolute;left:10px;top:6px;font-size:8px;margin:0;color:#9cb6ce}.spell-buttons button.done{border-color:#d0c391;box-shadow:0 0 25px #f6c97820}.spell-buttons button.done:after{content:'✧';position:absolute;right:7px;top:4px;color:#e5c37f}.spell-buttons button.cast{background:#867044;box-shadow:0 0 40px #efc98b55;transform:translateY(-3px)}.translation{display:none;font-size:10px;letter-spacing:1px;color:#c8d5e4;margin-top:9px}.show-translation .translation{display:block}.listen-row{display:flex;gap:7px;margin-top:13px}#spoken-line{font-family:Georgia,serif;font-size:16px;line-height:1.5;letter-spacing:.3px;color:#f1dab4;margin:14px 0 5px;text-shadow:0 2px 14px #000}#spell-status{font-size:10px;line-height:1.6;color:#aac2d7;margin:0}#movement button{background:#11243ad1;border-color:#a3c0df55;color:#d6e7f7}#movement button:active{background:#b3c3de;color:#11233f}.spell-buttons button:disabled{cursor:wait;opacity:.65}#movement{bottom:21%}#caption{transition:opacity .6s}.watch-magic #caption{opacity:0!important}.watch-magic #spells{opacity:.5}.watch-magic #spells:hover{opacity:1}#spells{transition:opacity .4s}header{z-index:7}footer{font-size:9px}.travel header{opacity:.65}@media(max-width:650px){#intro{top:27%}h1{font-size:43px}.arrival #caption{top:17%;bottom:auto;max-width:85%}.arrival #caption h2{font-size:26px}.arrival #description{font-size:11px}#spells{left:6%;bottom:28%;width:80%;max-width:402px}.spell-buttons{gap:6px}.spell-buttons button b{font-size:22px}.spell-buttons button{min-height:76px;padding:21px 7px 14px}.spell-top{font-size:9px;margin-bottom:10px}.spell-top button,.listen-row button{font-size:9px;padding:8px}#spoken-line{font-size:14px;margin-top:11px}#spell-status{font-size:9px}#movement{right:6%;bottom:19%;grid-template-columns:repeat(3,32px)}.translation{font-size:9px}.spell-buttons button small{font-size:7px}}