:root{color-scheme:dark;--bg:#101210;--paper:#e7e9e0;--muted:#777d72;--accent:#00c853;--line:rgba(218,226,206,.13)}
[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg)}body{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--paper);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,#scene:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-decoration:none}button{color:inherit}button, .swatch{touch-action:manipulation}.experience{max-width:1920px;margin:auto;padding:0 44px;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}.header{height:100px;min-height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);z-index:2}.wordmark{display:flex;align-items:center;font-size:19px;letter-spacing:-.8px;font-weight:750;gap:5px}.brand-symbol{font-size:37px;line-height:1;margin-right:9px;color:var(--accent);font-weight:400}.brand-light{font-weight:400}.brand-dot{font-size:10px;align-self:flex-start;margin-top:4px;margin-left:2px}.header-note{font-family:monospace;font-size:10px;letter-spacing:1.4px;color:#858a7e}.live{border:1px solid var(--line);border-radius:30px;padding:9px 13px;display:flex;align-items:center;gap:8px;font-size:11px;color:#b6bbae;letter-spacing:.5px}.live i{width:5px;height:5px;background:#b9d290;border-radius:100%;box-shadow:0 0 8px #b9d23340}.stage{position:relative;flex:1;min-height:480px;height:calc(100svh - 298px);max-height:950px;isolation:isolate}.stage:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 43%,#59613b14,transparent 65%);pointer-events:none}.scene-heading{position:absolute;top:35px;left:0;pointer-events:none;z-index:1}.eyebrow{font-family:monospace;display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.6px;color:#868e7d}.tiny-cross{font-size:17px;color:var(--accent)}h1{font-size:25px;letter-spacing:1px;line-height:1.7;font-weight:450;margin:15px 0 0}h1 span{color:#8f9786}.scene-index{position:absolute;right:0;top:45px;text-align:right;z-index:1;display:flex;flex-direction:column;gap:11px;pointer-events:none}.scene-index span:first-child{font-family:monospace;font-size:15px;color:#b1b9a6}.scene-index span:last-child{font-size:8px;letter-spacing:1.6px;color:#6e7664}#scene{position:absolute;inset:0;cursor:grab;touch-action:none;outline-offset:-4px}#scene:active{cursor:grabbing}#scene canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.2s}body.ready #scene canvas{opacity:1}.loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;transition:opacity .5s}.loading span{display:block;width:28px;height:28px;border:1px solid #454a3d;border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin:auto}.loading p{font-size:11px;color:#89917e;letter-spacing:2px;margin-top:20px}body.ready .loading{opacity:0}.scene-caption{position:absolute;left:0;bottom:35px;font-family:monospace;letter-spacing:1.2px;color:#707965;font-size:8px;display:flex;align-items:center;gap:10px;pointer-events:none}.caption-line{width:20px;height:1px;background:#58604d}.hint{position:absolute;bottom:31px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:1.4px;color:#949d86;pointer-events:none;white-space:nowrap}.hint svg{width:19px;height:24px;color:#7b856c}.hint-divider{padding:0 12px;color:#444e38}.mobile-hint{display:none}.axis{position:absolute;right:0;bottom:19px;width:63px;height:63px;color:#69745a;pointer-events:none}.axis svg{position:absolute;width:60px;height:60px;stroke:#4c5740;stroke-width:1;fill:none}.axis span{position:absolute;font-family:monospace;font-size:8px}.axis-y{left:22px;top:-4px}.axis-x{right:0;top:42px}.axis-z{left:0;bottom:3px}.control-area{border-top:1px solid var(--line);min-height:130px;display:flex;align-items:center;gap:40px}.intro{flex:1}.intro h2{font-size:18px;font-weight:450;letter-spacing:.5px;margin:0 0 11px}.intro p{font-size:11px;line-height:1.9;letter-spacing:.3px;color:#7d8672;margin:0}.material-picker{border:0;padding:0;margin:0}.material-picker legend{padding:0;margin-bottom:15px;font-size:10px;color:#a3ad96;letter-spacing:.5px}.material-picker legend span{font-family:monospace;color:#525e45;font-size:8px;letter-spacing:1.1px;margin-left:8px}.swatches{display:flex;gap:20px}.swatch{border:0;background:none;padding:0;display:flex;align-items:center;gap:7px;color:#737e65;font-size:10px;transition:color .2s}.swatch i{display:block;border-radius:100%;width:15px;height:15px;position:relative;box-shadow:inset 0 0 0 1px #ffffff10}.swatch i:after{content:"";position:absolute;inset:-4px;border:1px solid transparent;border-radius:50%;transition:border-color .2s}.swatch.selected{color:var(--paper)}.swatch.selected i:after{border-color:#bbc5ac}.swatch:hover{color:var(--paper)}.green{background:linear-gradient(135deg,#b4ffd0 4%,#00c853 45%,#005c29 90%)}.ember{background:linear-gradient(135deg,#ffd09a 4%,#ec7035 45%,#78341c 90%)}.ice{background:linear-gradient(135deg,#e8fcff,#65b9d8 50%,#214a68)}.chrome{background:linear-gradient(135deg,#fff,#949c9b 45%,#3a3f3f 65%,#c8d0cc)}.action-buttons{display:flex;gap:10px;align-items:center;margin-left:12px;padding-left:35px;border-left:1px solid var(--line)}.round-button,.reset-button{height:44px;border:1px solid #343b2c;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:100px;transition:background .2s,border-color .2s}.round-button:hover,.reset-button:hover{background:#ffffff08;border-color:#78886a}.round-button{width:44px}.round-button svg{width:18px;height:18px}.play-icon{display:none}.paused .pause-icon{display:none}.paused .play-icon{display:block}.reset-button{gap:20px;padding:0 19px;font-size:11px}.reset-button svg{width:16px;height:16px}footer{height:68px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);font-family:monospace;font-size:8px;letter-spacing:1.2px;color:#636f56}footer>span{display:flex;align-items:center;gap:12px}.footer-center{font-family:Arial,"PingFang SC",sans-serif;letter-spacing:2px;font-size:9px;color:#7c8a6b}.footer-center i{width:4px;height:4px;border-radius:50%;background:#899b72}.footer-star{font-size:22px;color:#81916c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.fallback[hidden]{display:none}.fallback>div{font-size:clamp(68px,13vw,160px);font-weight:900;line-height:.85;letter-spacing:-5px;color:var(--accent);text-shadow:1px 1px #006c2c,3px 3px #006c2c,6px 6px #003c1a,12px 12px 40px #000;transform:rotate(-5deg)}.fallback p{font-size:11px;color:#929d86;margin-top:32px}.fallback span{color:#fff3df}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1600px){.experience{padding:0 64px}.header{height:112px;min-height:112px}.stage{height:calc(100svh - 330px)}.control-area{min-height:145px}.scene-heading{top:45px}.intro h2{font-size:21px}.intro p{font-size:12px}.swatches{gap:25px}.swatch{font-size:12px}}
@media(max-width:1000px){.experience{padding:0 28px}.header{height:84px;min-height:84px}.header-note{font-size:8px;letter-spacing:.7px}.stage{height:calc(100svh - 350px);min-height:470px}.control-area{flex-wrap:wrap;gap:24px;min-height:190px;padding:25px 0}.intro{flex-basis:100%;flex-grow:1}.material-picker{margin-right:auto}.action-buttons{margin:0;padding:0;border:0}.scene-caption{max-width:145px;font-size:7px;line-height:1.7}.intro h2{font-size:17px}.intro p{font-size:11px}}
@media(max-width:600px){.experience{padding:0 22px}.header{height:76px;min-height:76px}.wordmark{font-size:16px}.brand-symbol{font-size:29px;margin-right:5px}.header-note{display:none}.live{padding:8px 10px;font-size:9px}.stage{height:530px;min-height:420px;max-height:65svh;flex:none}.scene-heading{top:28px}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:21px;margin-top:10px}.scene-index{top:33px}.scene-index span:first-child{font-size:11px}.scene-index span:last-child{display:none}.scene-caption{display:none}.axis{transform:scale(.75);transform-origin:bottom right;bottom:18px;right:0}.hint{bottom:28px;font-size:9px;letter-spacing:1px}.hint svg{width:16px}.desktop-hint{display:none}.mobile-hint{display:inline}.control-area{gap:26px;padding:27px 0;min-height:0}.intro h2{font-size:17px}.intro p{max-width:300px;font-size:11px;line-height:1.9}.material-picker legend{font-size:9px;margin-bottom:14px}.material-picker legend span{display:none}.swatches{gap:15px}.swatch{font-size:9px;gap:6px}.swatch i{width:13px;height:13px}.action-buttons{gap:8px}.round-button{width:37px;height:37px}.reset-button{width:37px;height:37px;padding:0}.reset-button span{display:none}footer{height:65px;font-size:6px;letter-spacing:.5px}.footer-center{display:none}footer>span{gap:6px}.footer-star{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}