@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans','PingFang SC','Microsoft YaHei',sans-serif;color:#1d2227;background:#f5f6f7;font-synthesis:none;--accent:#c5f76e;--muted:#7b8086;--line:#dfe2e5}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #77a830;outline-offset:4px}button svg,svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button{border:0}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}.icon-library{display:none}.site-header{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.5vw}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:14px;font:800 31px 'Manrope',sans-serif;letter-spacing:-1.8px}.brand-mark{display:flex;align-items:center;position:relative;font:750 33px 'Manrope';letter-spacing:-5px}.brand-mark>span{font-size:27px;margin-top:-9px}.brand-dot{color:#7a9e41}.header-label{font-size:13px;color:#6c7378;letter-spacing:.13em}.edition{font-size:11px;letter-spacing:.12em;color:#80858a}.edition span{margin-left:12px;color:#23282d;font-size:12px}main{max-width:1680px;padding:33px 4.5vw 0;margin:auto}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:.17em;font-weight:600;display:flex;align-items:center;gap:9px}.tiny-cross{font-size:18px;color:#6c747a}h1{font-size:34px;font-weight:600;letter-spacing:-.055em;margin:9px 0 0}h1>span{color:#86977c}.heading-note{font-size:13px;line-height:1.8;color:#6a7177}.heading-note>span{color:#92969b}.workspace{display:grid;grid-template-columns:266px minmax(0,1fr);gap:31px}.experiment-list{min-width:0}.list-label{display:flex;justify-content:space-between;font-size:12px;color:#727a81;margin:0 4px 16px}.list-label span:last-child{font-family:'Manrope';font-size:11px;color:#93999e}.tabs{display:flex;flex-direction:column;gap:9px}.experiment{display:flex;align-items:center;text-align:left;padding:12px 11px;width:100%;background:transparent;border:1px solid transparent;border-radius:11px;gap:12px;transition:background .25s,border .25s,transform .25s;position:relative}.experiment:hover{background:#e9ecee;transform:translateX(3px)}.experiment.active{background:#fff;border-color:#dce1e5;box-shadow:0 3px 7px #222d3b05}.thumb{width:62px;height:68px;flex:0 0 62px;overflow:hidden;border-radius:6px;background:#131719}.thumb img{height:100%;width:100%;object-fit:cover;transition:transform .7s}.thumb-bloom img{object-fit:cover;transform:scale(1.5)}.thumb-float{background:#e6e9eb}.experiment:hover .thumb img{transform:scale(1.1)}.experiment:hover .thumb-bloom img{transform:scale(1.7)}.experiment-copy{display:flex;flex-direction:column;gap:6px;white-space:nowrap}.experiment-no{font-size:9px;letter-spacing:.1em;color:#92989c}.experiment-copy strong{font-size:15px;font-weight:550;letter-spacing:.02em}.experiment-en{font-size:10px;color:#94999d}.active-arrow{opacity:0;position:absolute;right:12px;top:12px;font-size:15px}.active .active-arrow{opacity:1}.aside-note{margin:29px 12px;display:flex;gap:12px;color:#a0a6ab}.aside-note svg{width:16px;height:16px;flex-shrink:0;margin-top:4px}.aside-note p{font-size:12px;line-height:1.9;margin:0}.playground{background:#111416;position:relative;border-radius:15px;overflow:hidden;height:clamp(465px,55vw,600px);color:#f1f5f5;isolation:isolate;transition:background .5s;color-scheme:dark}.stage-top{position:absolute;left:27px;right:23px;top:22px;display:flex;align-items:center;justify-content:space-between;z-index:5;pointer-events:none}.stage-index{font-size:9px;letter-spacing:.14em;color:#81888e}.stage-index b{margin-left:7px;font-weight:500;color:#d7dddf}.stage-slash{margin:0 7px;color:#454c50}.stage-actions{display:flex;gap:17px;align-items:center;pointer-events:auto}.live-state{display:flex;align-items:center;gap:7px;font-size:10px;color:#a4acae}.live-state>span:first-child{width:4px;height:4px;border-radius:50%;background:#bdea74;box-shadow:0 0 6px #bdea7433}.icon-button{background:transparent;color:#aeb6b9;width:26px;height:26px;padding:3px}.icon-button:hover{color:white}.icon-button svg{width:18px}.stage{position:absolute;inset:0;overflow:hidden;touch-action:pan-y}.scene{position:absolute;inset:0;overflow:hidden;animation:scene-in .8s both}@keyframes scene-in{from{opacity:0}to{opacity:1}}.stage-bottom{position:absolute;z-index:5;bottom:24px;left:27px;right:27px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:10px}.stage-name{font-size:8px;letter-spacing:.14em;color:#687276}.stage-material{font-size:7px;letter-spacing:.11em;color:#657073}.interaction-hint{display:flex;align-items:center;gap:7px;color:#bdc6c9;font-size:11px}.interaction-hint svg{width:15px;height:15px}.scene-word{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);font:650 clamp(90px,12vw,190px)/1 'Manrope',sans-serif;letter-spacing:-.075em;color:#cbd9df0e;white-space:nowrap}.car-wrap{position:absolute;width:400px;height:600px;left:50%;top:50%;transform:translate(-50%,-50%);perspective:1000px;isolation:isolate}.car-base,.door,.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.car-base{mix-blend-mode:lighten}.car-shadow{position:absolute;width:44%;height:71%;left:28%;top:14%;box-shadow:0 0 90px 40px #0007;border-radius:45%;transition:box-shadow 1.2s}.door{z-index:2;will-change:transform;transform-origin:32% 39%;transform:rotate(0);filter:brightness(1);transition:filter .9s}.door-fl{clip-path:polygon(27% 36%,37% 36%,35% 56%,26% 56%)}.door-fr{clip-path:polygon(63% 36%,73% 36%,74% 56%,65% 56%);transform-origin:68% 39%}.door-rl{clip-path:polygon(26% 56%,35% 56%,37% 73%,27% 73%);transform-origin:31% 58%}.door-rr{clip-path:polygon(65% 56%,74% 56%,73% 73%,63% 73%);transform-origin:69% 58%}.car-hit{position:absolute;inset:12% 24% 11%;background:transparent;border-radius:45% 45% 32% 32%;z-index:3}.car-hit:focus-visible{outline:1px solid #c5f76e99;outline-offset:12px}.bloom-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.bloom-rings i{position:absolute;width:310px;height:310px;border:1px solid #a9d29a00;border-radius:50%;transform:scale(.6);opacity:0}.car-side-label{position:absolute;top:48%;writing-mode:vertical-rl;font-size:7px;letter-spacing:.24em;color:#616d73}.label-left{left:18%}.label-right{right:18%;transform:rotate(180deg)}.bloom-status{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:.1em;color:#91a3aa}.bloom-status>span:first-child{height:4px;width:4px;border-radius:50%;background:currentColor}.controls{padding:23px 1px 19px;display:flex;justify-content:space-between;gap:20px}.control-title h2{font-size:16px;font-weight:550;margin:0 0 8px}.control-title h2 span{color:#9a9fa4;font-size:12px;font-weight:400;margin-left:5px}.control-title p{color:#868d93;font-size:12px;margin:0;line-height:1.6}.control-inputs{display:flex;align-items:center;gap:29px}.strength-control{width:138px;display:flex;flex-direction:column;gap:9px}.strength-control>span{font-size:10px;color:#8a9197;display:flex;justify-content:space-between}.strength-control output{color:#4b545b;font-size:10px;font-family:'Manrope'}.control-buttons{display:flex;gap:8px}.outline-button{width:35px;height:35px;border:1px solid #d9dee2;border-radius:7px;background:transparent;display:grid;place-items:center;color:#5e6871}.outline-button:hover{background:#fff;border-color:#aab5bd}.outline-button svg{width:15px;height:15px}.strength-control input,.scroll-control input{width:100%;height:3px;appearance:none;border-radius:3px;background:linear-gradient(to right,#2c363d 70%,#dce1e5 70%);cursor:pointer;margin:4px 0}.strength-control input::-webkit-slider-thumb,.scroll-control input::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:#2c363d;border:2px solid #f5f6f7;box-shadow:0 0 0 1px #2c363d}.strength-control input::-moz-range-thumb,.scroll-control input::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:#2c363d;border:2px solid #f5f6f7}.scroll-control{display:flex;align-items:center;gap:15px;border-top:1px solid var(--line);padding:15px 0;color:#717b83;font-size:11px}.scroll-control input{flex:1;width:auto;background:#dce1e5}.scroll-control output{min-width:31px;color:#38444e}.scroll-tip{font-size:10px;color:#9ba2a8}.progress-rail{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#ffffff12;z-index:6}.progress-rail span{display:block;height:100%;width:0;background:#d8efb2}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:21px 0 26px;margin-top:20px;font-size:9px;letter-spacing:.1em;color:#8d969e}.footer-note{font-size:10px;letter-spacing:.03em}.toast{position:fixed;bottom:35px;left:50%;transform:translate(-50%,20px);background:#192126;color:#fff;border:1px solid #465159;border-radius:8px;padding:12px 22px;font-size:13px;opacity:0;pointer-events:none;transition:.3s;z-index:100}.toast.visible{opacity:1;transform:translate(-50%,0)}.playground:fullscreen{border-radius:0;height:100vh}.playground:fullscreen .car-wrap{width:550px;height:825px}.paused .live-state>span:first-child{background:#aaa}.scene-vortex .stage{touch-action:none}.scene-ribbon .stage{touch-action:none}.scene-vortex canvas,.scene-glow canvas{width:100%;height:100%;position:absolute;inset:0}.scene-title{position:absolute;left:8%;top:27%;pointer-events:none;z-index:1;text-shadow:0 2px 30px #0009}.scene-title>span,.glow-type>span{font-size:8px;letter-spacing:.24em;color:#b0c9dc}.scene-title h2{font:450 clamp(42px,5.5vw,80px)/1.03 'Manrope',sans-serif;letter-spacing:-.065em;margin:20px 0}.scene-title em,.glow-type em{font-family:Georgia,serif;font-weight:400}.depth-readout{position:absolute;bottom:87px;right:36px;color:#8fafd0;font-size:9px;letter-spacing:.15em}.depth-readout b{color:#e1f0fa;font:400 30px 'Manrope';letter-spacing:0;margin:0 8px}.scene-float{background:#edf0f2;color:#34414a;color-scheme:light}.scene-float .stage-name,.scene-float .stage-material{color:#919ca5}.scene-float .interaction-hint{color:#657785}.scene-float .stage-index,.scene-float .live-state,.scene-float .icon-button{color:#7b8994}.scene-float .stage-index b{color:#3e5464}.float-type{position:absolute;top:20%;left:7%;font:550 clamp(14px,2vw,25px)/1.6 'Manrope';color:#8c99a2;letter-spacing:.02em;z-index:1;pointer-events:none}.float-type em{font:italic 400 clamp(25px,3vw,42px)/1.5 Georgia;color:#475f71;letter-spacing:-.04em}.float-world{position:absolute;inset:0;perspective:900px;transform-style:preserve-3d;touch-action:none}.float-object{position:absolute;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;will-change:transform;filter:saturate(.83)}.float-main{width:64%;height:96%;left:27%;top:2%}.float-satellite.one{width:20%;left:4%;top:58%;filter:blur(1px) saturate(.6)}.float-satellite.two{width:13%;right:9%;top:4%;filter:blur(2px)}.float-satellite.three{width:10%;left:38%;top:6%;opacity:.38;filter:blur(3px)}.float-caption{position:absolute;left:7%;bottom:22%;font-size:11px;color:#8495a0;letter-spacing:.1em;pointer-events:none}.orbit-cursor{position:absolute;left:50%;top:50%;border:1px solid #8a9fac88;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-size:8px;letter-spacing:.1em;color:#516c7d;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .3s}.scene-float .stage:hover .orbit-cursor{opacity:1}.scene-ribbon{background:#100d08}.ribbon-image{position:absolute;height:125%;width:auto;max-width:none;aspect-ratio:1;object-fit:contain;left:50%;top:50%;transform:translate(-50%,-50%);mix-blend-mode:screen;will-change:transform}.ribbon-aura{position:absolute;inset:0;background:radial-gradient(ellipse at center,#56320919,transparent 60%)}.ribbon-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;text-shadow:0 2px 25px #000;white-space:nowrap}.ribbon-center>span:first-child{font-size:8px;letter-spacing:.24em;color:#bb965c}.ribbon-center h2{font:italic 400 clamp(29px,4vw,52px) Georgia;margin:12px 0 20px;letter-spacing:-.04em;color:#f8e7c7}.rotation-value{font:400 11px 'Manrope';color:#b9975d;letter-spacing:.12em}.ribbon-label{position:absolute;left:31px;top:48%;font-size:7px;letter-spacing:.23em;writing-mode:vertical-rl;color:#786b56}.ribbon-echo{position:absolute;inset:-40%;background:url('./assets/ribbon.png') center/contain no-repeat;mix-blend-mode:screen;opacity:0;pointer-events:none;will-change:transform}.scene-glow{background:#060d11}.glow-object-wrap{position:absolute;width:94%;height:126%;top:-9%;left:14%;mix-blend-mode:screen;will-change:transform}.glow-base,.glow-reveal{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.glow-base{filter:brightness(.48) saturate(.75)}.glow-reveal{filter:brightness(1.65) saturate(1.25);mask-image:radial-gradient(circle 220px at 50% 50%,#000,transparent);-webkit-mask-image:radial-gradient(circle 220px at 50% 50%,#000,transparent)}.glow-type{position:absolute;top:27%;left:7%;z-index:2;pointer-events:none}.glow-type h2{font:450 clamp(45px,5.7vw,85px)/.98 'Manrope';letter-spacing:-.07em;margin:24px 0;color:#d5e5e9}.glow-type>span{color:#60828d}.glow-type em{color:#9ad6c5}.glow-pointer{position:absolute;border:1px solid #b5ffe5aa;width:32px;height:32px;transform:translate(-50%,-50%);border-radius:50%;left:50%;top:50%;pointer-events:none;box-shadow:0 0 30px #4effd52a;opacity:0}.scene-glow .stage:hover .glow-pointer{opacity:1}.coordinates{position:absolute;bottom:84px;left:7%;color:#5d888a;font-size:9px;letter-spacing:.16em}.scene-glow .stage,.scene-float .stage{touch-action:none}.scene-glow .stage{cursor:none}
@media(min-width:1550px){.workspace{grid-template-columns:286px minmax(0,1fr);gap:36px}.experiment{padding:14px 13px}.thumb{width:70px;flex-basis:70px;height:74px}.experiment-copy strong{font-size:16px}.experiment-en{font-size:11px}.playground{height:650px}.car-wrap{height:650px;width:433px}}
@media(max-width:1100px){.site-header{padding:0 3vw}.edition{display:none}main{padding:28px 3vw 0}.workspace{grid-template-columns:220px minmax(0,1fr);gap:22px}.experiment{padding:10px 7px;gap:10px}.thumb{width:49px;flex-basis:49px;height:62px}.experiment-en{font-size:8px}.experiment-copy strong{font-size:14px}.active-arrow{right:8px;font-size:12px}.playground{height:520px}.stage-material{display:none}.stage-name{display:none}.stage-bottom{justify-content:center}.control-inputs{gap:17px}.strength-control{width:105px}.car-wrap{width:350px;height:525px}.controls{gap:10px}.control-title h2 span{display:none}.heading-note{font-size:12px}}
@media(max-width:760px){.site-header{height:72px;padding:0 5vw}.brand{font-size:27px}.brand-mark{font-size:28px}.brand-mark>span{font-size:23px}.header-label{font-size:10px;letter-spacing:.03em}main{padding:26px 5vw 0}.page-heading{margin-bottom:24px}.eyebrow{font-size:8px}h1{font-size:29px;margin-top:7px}.heading-note{display:none}.workspace{display:block}.list-label,.aside-note{display:none}.tabs{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -5vw 16px;padding:0 5vw 4px}.tabs::-webkit-scrollbar{display:none}.experiment{flex:0 0 auto;width:auto;min-width:142px;gap:8px;padding:7px}.thumb{width:37px;height:43px;flex-basis:37px;border-radius:4px}.experiment-copy{gap:5px}.experiment-copy strong{font-size:12px}.experiment-no{font-size:7px}.experiment-en,.active-arrow{display:none}.playground{height:540px;border-radius:12px}.stage-top{top:20px;left:20px;right:17px}.stage-index{font-size:8px}.live-state{font-size:9px}.stage-actions{gap:10px}.stage-bottom{left:16px;right:16px;bottom:23px}.interaction-hint{font-size:10px}.car-wrap{height:550px;width:367px}.scene-word{font-size:90px;top:47%}.label-left{left:9%}.label-right{right:9%}.bloom-status{bottom:76px}.controls{padding-top:20px;flex-direction:column;gap:22px}.control-title h2{font-size:16px}.control-title h2 span{display:inline;font-size:11px}.control-title p{font-size:12px}.control-inputs{justify-content:space-between}.strength-control{width:min(52%,230px)}.strength-control>span{font-size:11px}.outline-button{height:37px;width:39px}.scroll-control{flex-wrap:wrap;gap:14px}.scroll-tip{width:100%;font-size:10px}.footer-note{display:none}footer{margin-top:14px;font-size:8px;padding:23px 0}.scene-title{top:24%;left:9%}.scene-title h2{font-size:54px}.scene-title>span,.glow-type>span{font-size:7px}.depth-readout{bottom:78px;right:24px}.depth-readout b{font-size:22px}.float-type{top:21%;left:9%;font-size:15px}.float-type em{font-size:28px}.float-main{width:114%;height:80%;left:6%;top:18%}.float-satellite.one{width:33%;left:-7%;top:63%}.float-satellite.two{width:20%;right:8%;top:7%}.float-caption{left:9%;bottom:19%;font-size:10px}.ribbon-image{height:105%}.ribbon-center h2{font-size:34px}.ribbon-label{left:18px}.glow-type{left:9%;top:20%}.glow-type h2{font-size:58px}.glow-object-wrap{width:162%;height:105%;left:-8%;top:8%}.coordinates{left:9%;font-size:8px}.playground:fullscreen .car-wrap{width:400px;height:600px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important}.experiment,.toast{transition:none}}
.mask-library{position:absolute;pointer-events:none}.car-base{clip-path:url(#car-body-cut)}.car-wrap{filter:drop-shadow(0 12px 20px #0004)}.door-fl{clip-path:polygon(25.3% 31.3%,28.3% 31.3%,32.8% 49.2%,25% 49.2%,25% 38.4%,21.2% 38.6%,22% 36%,25% 35.4%);transform-origin:27.4% 32.5%}.door-fr{clip-path:polygon(74.7% 31.3%,71.7% 31.3%,67.2% 49.2%,75% 49.2%,75% 38.4%,78.8% 38.6%,78% 36%,75% 35.4%);transform-origin:72.6% 32.5%}.door-rl{clip-path:polygon(25% 49.5%,32.7% 49.5%,33% 68.4%,27% 69.4%,25% 65.8%);transform-origin:28% 50%}.door-rr{clip-path:polygon(75% 49.5%,67.3% 49.5%,67% 68.4%,73% 69.4%,75% 65.8%);transform-origin:72% 50%}
.playground .car-wrap{height:92%;width:auto;aspect-ratio:2/3;mix-blend-mode:lighten;filter:none}.bloom-status{bottom:56px}.scene-word{font-weight:500}
.scene-bloom-content{background:#101213}.scene-ribbon{background:#000}.float-object{mix-blend-mode:darken;mask-image:radial-gradient(ellipse at center,#000 52%,transparent 73%)}.float-caption{bottom:16%}.playground::after{content:'';position:absolute;inset:0;background:linear-gradient(#0006,transparent 15%,transparent 83%,#0008);z-index:4;pointer-events:none}.scene-float::after{background:linear-gradient(#edf0f24d,transparent 15%,transparent 83%,#edf0f299)}
.scene-glow-content{background:#060d11}.scene-ribbon-content{background:#000}
.playground.is-expanded{position:fixed;inset:0;width:100vw;height:100dvh;max-height:none;border-radius:0;z-index:80}.stage-expanded{overflow:hidden}.playground.is-expanded .stage-bottom{bottom:32px}.playground.is-expanded .bloom-status{bottom:76px}