:root{color-scheme:light;--cream:#fffaf3;--peach:#f8e3dc;--ink:#766364;--accent:#77bdb5;--paper:#fffdf9;--control-space:88px;font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;color:var(--ink);background:transparent}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--cream);transition:background-color .35s ease}
body[data-background=peach]{background:var(--peach)}
body[data-background=transparent]{background-color:#f6f6f6;background-image:conic-gradient(#e8e8e8 25%,transparent 0 50%,#e8e8e8 0 75%,transparent 0);background-size:24px 24px}
body.embed{background:transparent!important;--control-space:0px}
.scene{height:100%;height:100dvh;display:flex;justify-content:center;align-items:flex-end;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:calc(var(--control-space) + env(safe-area-inset-bottom));overflow:hidden}
.poster{width:min(100%,calc((100dvh - var(--control-space) - env(safe-area-inset-bottom) - 16px)*2800/4374));height:auto;max-width:100%;aspect-ratio:2800/4374;position:relative;overflow:hidden;flex:0 1 auto;-webkit-tap-highlight-color:transparent}
canvas,.fallback{display:block;width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
canvas{opacity:0;cursor:pointer;touch-action:pan-y;outline-offset:-3px}
.ready canvas{opacity:1}
.ready .fallback{visibility:hidden}
.fallback{pointer-events:none;user-select:none}
.controls{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:10px 12px;border:1px solid #76636419;border-radius:40px;background:#fffdf9e8;box-shadow:0 4px 24px #76636409;backdrop-filter:blur(12px);max-width:calc(100% - 24px);z-index:2}
button{font:inherit;color:inherit;cursor:pointer;flex:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:7px;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease,transform .2s ease}
button:hover{background:#7663640c}
button:active{transform:scale(.95)}
button:disabled{opacity:.45;cursor:default}
svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.play svg{width:19px;height:19px}
.play-icon{display:none}
body.paused .pause-icon{display:none}
body.paused .play-icon{display:block}
.divider{width:1px;height:18px;background:#76636420;flex:none}
.backgrounds{display:flex;align-items:center;gap:9px}
.swatch{width:26px;height:26px;min-width:26px;min-height:26px;border:1px solid #76636422;padding:0;position:relative}
.swatch.cream{background:var(--cream)}
.swatch.peach{background:var(--peach)}
.swatch.transparent{background:conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0);background-size:10px 10px}
.swatch[aria-pressed=true]::after{content:"";position:absolute;inset:-4px;border:1.5px solid var(--accent);border-radius:50%}
.intensity{display:flex;align-items:center;gap:9px;font-size:11px;white-space:nowrap;letter-spacing:.08em}
input[type=range]{appearance:none;width:84px;height:18px;background:transparent;margin:0;cursor:pointer;accent-color:var(--accent)}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:#d8d9ce;border-radius:4px}
input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:var(--accent);margin-top:-4px;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--accent)}
input[type=range]::-moz-range-track{height:3px;background:#d8d9ce;border-radius:4px}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--paper)}
output{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.hide{margin-left:-3px;opacity:.65}
.restore{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));right:16px;z-index:3;background:#fffdf9d9;border:1px solid #7663641c;opacity:.55}
.restore:hover,.restore:focus-visible{opacity:1}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.status{position:fixed;top:12px;left:50%;transform:translateX(-50%);font-size:12px;line-height:1.6;margin:0;max-width:90%;padding:7px 12px;border-radius:20px;background:#fffdf9ed;z-index:4;text-align:center}
.status:empty{display:none}
.controls-hidden{--control-space:0px}
.embed .scene{padding:0}
.embed .poster{width:min(100%,calc(100dvh*2800/4374))}
.qa-detail .scene{padding:0}.qa-detail .poster{width:100%;height:100%;aspect-ratio:auto}.qa-detail .controls,.qa-detail .restore{display:none}
.qa-dark{background:#22232b!important}
@media(max-width:480px){:root{--control-space:84px}.controls{gap:10px;padding:8px 10px;bottom:calc(14px + env(safe-area-inset-bottom))}.intensity{gap:7px}input[type=range]{width:60px}.backgrounds{gap:8px}.scene{padding-top:max(16px,env(safe-area-inset-top))}}
@media(max-width:350px){.controls{gap:8px}.intensity span{display:none}.backgrounds{gap:7px}input[type=range]{width:54px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* The homepage keeps its own loading fallback and controls. */
.embed .status{display:none}