@import"https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700&family=Manrope:wght@500;600;700&display=swap";:root{font-family:Manrope,PingFang SC,Microsoft YaHei,sans-serif;color:#1f3329;background:#eee7d8;font-synthesis:none;--green: #234838;--red: #c84232;--paper: rgba(248, 243, 232, .84)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}button,input{font:inherit}#app{position:relative;isolation:isolate;background:radial-gradient(circle at 68% 38%,rgba(255,255,255,.74),transparent 31%),linear-gradient(122deg,#f5f0e5,#e9e1d0)}#app:before,#app:after{content:"";position:absolute;z-index:-1;pointer-events:none}#app:before{inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");mix-blend-mode:multiply}#app:after{width:38vw;height:38vw;right:-10vw;top:-17vw;border:1px solid rgba(35,72,56,.09);border-radius:50%;box-shadow:0 0 0 44px #23483806,0 0 0 88px #23483805}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%}.intro{position:absolute;z-index:2;top:clamp(40px,8vh,78px);left:clamp(36px,7vw,116px);width:min(680px,58vw);pointer-events:none}h1{margin:0;color:var(--green);font:600 clamp(52px,5.7vw,88px)/1.02 "Noto Serif SC",serif;letter-spacing:-.045em;text-wrap:balance}h1 em{color:var(--red);font-style:normal}.controls{position:absolute;z-index:4;bottom:38px;left:clamp(36px,7vw,116px);display:grid;grid-template-columns:130px 132px 240px;align-items:stretch;border-radius:16px}.motion-button{width:130px;border:0;color:#f7efe1;background:var(--green);position:relative;z-index:1;border-radius:16px 0 0 16px;box-shadow:0 18px 45px #3f35221f;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:background .2s ease,transform .2s ease}.motion-button:hover{background:#2d5945}.motion-button:active{transform:scale(.98)}.pause-icon{display:flex;gap:3px;width:13px;justify-content:center}.pause-icon i{width:3px;height:12px;border-radius:2px;background:currentColor}.motion-button.playing .pause-icon{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}.motion-button.playing .pause-icon i{display:none}.motion-button span:last-child{font-size:12px;font-weight:700;letter-spacing:.09em}.sound-button{border:1px solid rgba(35,72,56,.12);border-right:0;color:var(--green);background:#f8f3e8f5;box-shadow:0 18px 45px #3f35221f;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 8px;cursor:pointer;transition:color .2s ease,background .2s ease,transform .2s ease}.sound-button:hover{background:#fffaf0}.sound-button:active{transform:scale(.98)}.sound-option{padding:5px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;white-space:nowrap;opacity:.45;transition:color .2s ease,background .2s ease,opacity .2s ease}.sound-option.active{color:#fff7ea;background:var(--red);opacity:1}.sound-divider{color:#23483838;font-size:10px}.speed-control{width:240px;padding:14px 20px 12px;border:1px solid rgba(35,72,56,.12);border-left:0;border-radius:0 16px 16px 0;background:#f8f3e8f5;box-shadow:0 18px 45px #3f35221f}.speed-control label,.range-labels{display:flex;justify-content:space-between}.speed-control label{color:var(--green);font-size:10px;font-weight:700;letter-spacing:.08em}.speed-control output{color:var(--red)}.speed-control input{width:100%;height:3px;margin:12px 0 6px;appearance:none;border-radius:3px;outline:none;background:linear-gradient(90deg,var(--red) 52%,rgba(35,72,56,.15) 52%)}.speed-control input::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:3px solid #f7f0e3;border-radius:50%;background:var(--red);box-shadow:0 2px 7px #632e224d;cursor:pointer}.speed-control input::-moz-range-thumb{width:10px;height:10px;border:3px solid #f7f0e3;border-radius:50%;background:var(--red);cursor:pointer}.range-labels{color:#1f332959;font-size:8px;letter-spacing:.08em}.webgl-error{position:absolute;z-index:10;inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:20px;border-radius:12px;color:#721f19;background:#fff4ed;box-shadow:0 10px 40px #00000026}@media(max-width:780px){.intro{top:28px;left:22px;width:calc(100vw - 44px)}h1{font-size:clamp(38px,11.8vw,52px);line-height:1.06;letter-spacing:-.055em}.controls{left:20px;right:20px;bottom:20px;grid-template-columns:1fr 1fr}.motion-button{width:auto;min-height:46px;border-radius:16px 0 0}.sound-button{min-height:46px;border-radius:0 16px 0 0;border-left:0;border-right:1px solid rgba(35,72,56,.12)}.speed-control{width:auto;grid-column:1 / -1;padding:11px 14px 9px;border-top:0;border-left:1px solid rgba(35,72,56,.12);border-radius:0 0 16px 16px}.speed-control input{margin-top:9px}}@media(max-height:620px)and (min-width:781px){.intro{top:24px}h1{font-size:clamp(44px,5.3vw,72px)}.controls{bottom:22px}}@media(prefers-reduced-motion:reduce){.motion-button,.sound-button{transition:none}}