:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#e8e8e2;background:#101211;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled,input:disabled,select:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #d2ed7e;outline-offset:4px}header{height:86px;border-bottom:1px solid #2b2e29;display:flex;align-items:center;justify-content:space-between;padding:0 40px}.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;font-weight:650;font-size:20px}.brand-icon{color:#d2ed7e;font-size:35px}.brand small{display:block;font-size:9px;letter-spacing:3px;color:#90998a;margin-top:5px}.badge{border:1px solid #414735;border-radius:30px;color:#b9c3a8;padding:8px 13px;font-size:11px;letter-spacing:1px}main{display:grid;grid-template-columns:285px minmax(0,1fr);min-height:calc(100svh - 128px)}aside{padding:30px 25px 22px;border-right:1px solid #2b2e29;display:flex;flex-direction:column;gap:23px}.eyebrow{font-size:9px;letter-spacing:2px;color:#8a9287}.character{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1px solid #596043;background:#252b1f;color:#e8e8e2;border-radius:8px;padding:16px 13px}.character-number{font-family:monospace;color:#b7ce7b;font-size:18px}.character strong{font-size:15px}.character small{display:block;font-size:8px;letter-spacing:1.4px;margin-top:5px;color:#929d83}.selected-dot,.small-dot{width:6px;height:6px;background:#cce886;border-radius:50%;display:inline-block}.selected-dot{margin-left:auto}.details{margin-top:10px}.details h1{font-size:32px;letter-spacing:5px;margin:13px 0}.details h1 span{display:block;font-size:11px;letter-spacing:1px;color:#a3a99b;font-weight:400;margin-top:12px}.details p{font-size:11px;color:#7e8779;line-height:1.8;margin-bottom:0}.control-section{display:flex;flex-direction:column;gap:12px}label{font-size:12px;color:#c0c6b8;display:flex;justify-content:space-between}label output,label>span{font-family:monospace;color:#a6b48b;font-size:11px}select{padding:11px;background:#1b1e19;border:1px solid #383f30;border-radius:5px;color:#dce4d0;width:100%;font-size:12px}.hint{font-size:10px;color:#82897b;margin:0;line-height:1.7}input[type=range]{width:100%;height:3px;accent-color:#d2ed7e;margin:6px 0}.range-labels{display:flex;justify-content:space-between;color:#68705f;font-size:9px}.swatches{display:flex;gap:11px}.swatch{width:28px;height:28px;border:1px solid #545c4a;border-radius:50%;outline-offset:3px}.swatch.selected{outline:1px solid #d2ed7e}.dark{background:#181d19}.light{background:#dddcd1}.grid{background:conic-gradient(#bfc3b7 25%,#7b8572 0 50%,#bfc3b7 0 75%,#7b8572 0);background-size:12px 12px}.check{justify-content:flex-start;align-items:center;gap:7px;font-size:11px}.check input{accent-color:#cce886}.aside-bottom{margin-top:auto;padding-top:20px;font-size:9px;color:#828c77;line-height:1.8}.aside-bottom .small-dot{width:4px;height:4px;margin-right:4px}.aside-bottom a{display:block;color:#9ba58d;margin-top:8px;text-decoration:none}.stage{min-width:0;position:relative;overflow:hidden;background:radial-gradient(ellipse at 53% 44%,#323b2e 0,#1b211b 45%,#151915 85%);min-height:740px;isolation:isolate}.stage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#b5c29b06 1px,transparent 1px),linear-gradient(#b5c29b06 1px,transparent 1px);background-size:72px 72px;pointer-events:none}.stage[data-background=light]{background:#d4d7cc}.stage[data-background=grid]{background:conic-gradient(#343b31 25%,#242b22 0 50%,#343b31 0 75%,#242b22 0);background-size:36px 36px}.stage-top{position:absolute;z-index:3;left:30px;right:30px;top:26px;display:flex;justify-content:space-between;pointer-events:none}#status{font-size:10px;color:#bdcaab;background:#141b15b3;border:1px solid #45523977;border-radius:20px;padding:6px 10px}.stage-top .eyebrow{padding-top:8px}.stage-word{font-size:clamp(40px,7.5vw,135px);font-weight:800;letter-spacing:-6px;color:#cce88605;position:absolute;left:5%;top:34%;white-space:nowrap;pointer-events:none}#player{position:absolute;inset:58px 12px 150px;touch-action:none;cursor:grab}#player:active{cursor:grabbing}.spine-player{border:0!important}.spine-player canvas{width:100%!important;height:100%!important}.loading,.error{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;background:#171c16e8;z-index:6;text-align:center;padding:30px}.loading span{font-size:12px;color:#9da88f}.spinner{width:30px;height:30px;border:2px solid #49513e;border-top-color:#d2ed7e;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}[hidden]{display:none!important}.error p{max-width:500px;overflow-wrap:anywhere;color:#d7b7a5;line-height:1.6;font-size:13px}.stage-caption{position:absolute;bottom:133px;left:30px;right:30px;display:flex;justify-content:space-between;align-items:center;color:#a5af99;pointer-events:none}.stage-caption>span{font-size:11px;letter-spacing:2px}.stage-caption small{font-size:10px}.toolbar{position:absolute;bottom:68px;left:24px;right:24px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.toolbar button,.error button{padding:11px 15px;border:1px solid #4b5542;border-radius:6px;background:#20281fe6;color:#d8e1ce;font-size:11px;transition:background .2s}.toolbar button:hover{background:#3a4531}.toolbar .primary{background:#d2ed7e;color:#1e2910;border-color:#d2ed7e;min-width:90px}.toolbar .primary:hover{background:#e0f3aa}.timeline{position:absolute;left:30px;right:30px;bottom:29px;display:flex;align-items:center;gap:13px;font-size:10px;color:#9da991;font-family:monospace}.timeline>span{min-width:47px}.track{flex:1;height:2px;background:#3f4937}#progress{height:100%;width:0;background:#cce886}footer{height:42px;border-top:1px solid #2b2e29;display:flex;justify-content:space-between;align-items:center;padding:0 32px;color:#687260;font-size:9px;letter-spacing:.6px}.stage:fullscreen{height:100vh}.stage[data-background=light] .stage-caption{color:#4e5845}@media(max-width:850px){header{height:70px;padding:0 20px}main{grid-template-columns:220px minmax(0,1fr)}aside{padding:24px 18px;gap:19px}.stage{min-height:760px}.toolbar{gap:5px;left:8px;right:8px}.toolbar button{padding:10px;font-size:10px}.stage-caption small{display:none}.stage-word{letter-spacing:-2px}}@media(max-width:620px){main{display:flex;flex-direction:column-reverse}.stage{min-height:66svh}#player{inset:47px 0 133px}.stage-top{left:18px;right:18px}.toolbar{bottom:55px}.stage-caption{bottom:110px;left:20px}.timeline{left:20px;right:20px;bottom:22px}aside{display:grid;grid-template-columns:1fr 1fr;border:0;gap:22px;padding:25px 22px}.details,.character,.aside-bottom,aside>.eyebrow{grid-column:1/-1}.details{display:none}.character{margin-top:-7px}.aside-bottom{padding:0}.brand{font-size:17px}.badge{font-size:9px}.stage-word{font-size:13vw}footer{padding:0 20px;font-size:8px}.check{font-size:10px}.toolbar button{font-size:10px;padding:9px}}

@media(min-width:621px){main{height:calc(100svh - 128px);min-height:560px}aside{overflow-y:auto;gap:18px;padding-top:24px}.stage{min-height:0;height:100%}#player{inset:45px 0 125px}.details{margin-top:0}.details h1{margin:10px 0}.details p{display:none}.aside-bottom{padding-top:8px}}
@media(min-width:621px) and (max-width:850px){main{height:calc(100svh - 112px)}}
@media(max-width:620px){.stage{min-height:590px}#player{inset:44px 0 155px}.stage-caption{bottom:140px}.toolbar{max-width:350px;margin:auto}.stage-top{top:20px}}
.wardrobe{padding-top:4px}.wardrobe label{margin-bottom:2px}#scene-section label{margin:12px 0 9px}.motion-options{display:flex;align-items:center;justify-content:space-between;gap:8px}.text-button{background:transparent;border:0;color:#d2ed7e;font-size:10px;padding:3px 0;white-space:nowrap}.motion-options .check{font-size:10px}.details h1{font-size:27px!important}.details h1 span{letter-spacing:.5px!important}.control-section{gap:9px}aside{scrollbar-width:thin;scrollbar-color:#46513a transparent}.stage-caption>span{letter-spacing:1px}@media(min-width:621px){aside{gap:16px}.details{display:none}}@media(max-width:620px){.wardrobe,.motion-section{grid-column:1/-1}.stage{min-height:590px}.stage-caption{bottom:145px}.toolbar{max-width:350px}}
.character-picker input{padding:11px;background:#1b1e19;border:1px solid #383f30;border-radius:5px;color:#dce4d0;width:100%;font-size:12px}.character-picker{grid-column:1/-1}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#coverage-note{font-size:10px}#review-status{color:#b2bd98}.character{padding:12px}.character small{letter-spacing:1px}#character-title{font-weight:inherit}

/* Full-canvas immersion: controls float above the animation, never resize it. */
body.immersive-active{overflow:hidden}
.stage.immersive{position:fixed;inset:0;z-index:100;width:100%;height:100dvh;min-height:0;outline:none}
.stage.immersive #player{inset:0}
.stage.immersive::before,.stage.immersive>.stage-word,.stage.immersive>.stage-top,.stage.immersive>.stage-caption{display:none}
.immersive-actions{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));z-index:12;display:flex;gap:8px;align-items:center}
.immersive-actions button,.controls-reveal{border:1px solid #ffffff24;border-radius:24px;background:#111813bb;color:#d8e1d0;padding:11px 15px;font-size:12px;min-height:44px;backdrop-filter:blur(18px)}
.immersive-actions button:hover,.controls-reveal:hover{background:#273022;color:#d2ed7e;border-color:#b3c59266}
.stage.immersive>aside{position:absolute;z-index:11;right:max(18px,env(safe-area-inset-right));top:78px;bottom:max(22px,env(safe-area-inset-bottom));width:300px;display:flex;flex-direction:column;gap:17px;overflow-y:auto;overscroll-behavior:contain;padding:22px;border:1px solid #ffffff20;border-radius:18px;background:#111813ed;box-shadow:0 18px 60px #0006;backdrop-filter:blur(20px)}
.stage.immersive>aside .details,.stage.immersive>aside .aside-bottom,.stage.immersive>aside #coverage-note,.stage.immersive>aside>.character,.stage.immersive>aside>.eyebrow{display:none}
.stage.immersive>.toolbar{z-index:8;left:50%;right:auto;bottom:max(46px,calc(env(safe-area-inset-bottom) + 30px));transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);padding:8px;gap:4px;background:#111813bf;backdrop-filter:blur(20px);border:1px solid #ffffff20;border-radius:18px;box-shadow:0 8px 32px #0003}
.stage.immersive>.toolbar button{padding:10px 12px;min-height:42px;border-color:transparent;border-radius:11px;background:transparent}
.stage.immersive>.toolbar .primary{background:#cce886;color:#26301b}
.stage.immersive>.toolbar #immersive{display:none}
.stage.immersive>.timeline{z-index:8;left:50%;right:auto;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom));width:min(540px,calc(100% - 48px));padding:0;gap:12px;font-size:10px;opacity:.65}
.stage.immersive.settings-open>.toolbar,.stage.immersive.settings-open>.timeline{left:calc((100% - 340px)/2);max-width:calc(100% - 380px)}
.stage.immersive>.toolbar,.stage.immersive>.timeline,.immersive-actions{transition:opacity .22s ease,visibility .22s ease}
.stage.immersive.tools-collapsed>.toolbar,.stage.immersive.tools-collapsed>.timeline,.stage.immersive.chrome-hidden>.toolbar,.stage.immersive.chrome-hidden>.timeline,.stage.immersive.chrome-hidden>.immersive-actions{opacity:0;visibility:hidden;pointer-events:none}
.stage.immersive.chrome-hidden #player{cursor:none}
.controls-reveal{position:absolute;z-index:12;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);opacity:.28;min-height:36px;padding:8px 14px;font-size:11px;transition:opacity .2s}
.controls-reveal:hover,.controls-reveal:focus-visible{opacity:1}
@media(max-width:760px){
 .immersive-actions{left:12px;right:12px;top:max(12px,env(safe-area-inset-top));justify-content:flex-end;gap:5px}
 .immersive-actions button{padding:9px 10px;font-size:11px}
 .stage.immersive>aside{width:min(300px,calc(100% - 24px));right:12px;top:68px;bottom:max(16px,env(safe-area-inset-bottom))}
 .stage.immersive>.toolbar{width:min(380px,calc(100% - 24px));max-width:calc(100% - 24px);bottom:max(42px,calc(env(safe-area-inset-bottom) + 26px));gap:3px}
 .stage.immersive>.toolbar button{font-size:11px;padding:9px 10px}
 .stage.immersive.settings-open>.toolbar,.stage.immersive.settings-open>.timeline{visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.stage.immersive>.toolbar,.stage.immersive>.timeline,.immersive-actions,.controls-reveal{transition:none}}

.directory-link{margin-left:auto;margin-right:20px;color:#c6df9e;text-decoration:none;font-size:13px} @media(max-width:600px){header .badge{display:none}}

.static-illustration{width:100%;height:100%;object-fit:contain;display:block}

.touch-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.touch-guide rect{fill:#d2ed7e16;stroke:#d2ed7ed9;stroke-width:1.5;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}#touch-guide-option[hidden]{display:none}

.cg-link{font-size:13px;color:#d2ed7e;text-decoration:none;white-space:nowrap}.cg-link:hover{text-decoration:underline}