*{box-sizing:border-box}html,body{margin:0;min-width:300px;width:100%;height:100%;overflow:hidden}body{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#f4f1e8;background:#1c2429}button,select{font:inherit;font-size:14px}button,select{color:inherit;border:1px solid #ffffff20;background:#ffffff07;border-radius:12px;cursor:pointer}button:hover,select:hover{background:#ffffff14}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #b7f5a0;outline-offset:4px}button:disabled{opacity:.35;cursor:default}#app{position:relative;height:100dvh;min-height:430px;background:radial-gradient(ellipse at 48% 38%,#3d4a4e 0,#263137 45%,#192125 100%)}#scene{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}header{position:absolute;top:25px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;gap:12px;align-items:center}.logo{font-family:Georgia,serif;font-size:42px;line-height:44px;color:#b7f5a0;font-style:italic;font-weight:bold}.brand h1{font-size:21px;font-weight:550;margin:0 0 5px;letter-spacing:3px}.eyebrow{font-size:10px;letter-spacing:3px;color:#a9b8b9}.top-actions{display:flex;align-items:center;gap:14px;pointer-events:auto}.free{font-size:12px;letter-spacing:1px;color:#b7f5a0;border:1px solid #b7f5a033;border-radius:50px;padding:7px 13px}.icon{width:35px;height:35px;border-radius:50%;font-size:18px}.settings{position:absolute;top:100px;right:28px;width:236px;padding:17px;border-radius:18px;background:#101c2260;border:1px solid #ffffff13;backdrop-filter:blur(12px)}.row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:15px}.row label{font-size:12px;color:#aababc}.row select{padding:7px 9px;background:#263238;max-width:155px}.segment{display:flex;background:#10181c;border-radius:11px;padding:4px;gap:3px}.segment button{flex:1;white-space:nowrap;border:0;font-size:12px;padding:9px 6px;border-radius:8px}.segment button.active{background:#e9efe8;color:#223029}.settings p{font-size:11px;margin:11px 0 14px;color:#9fb1b3;line-height:1.5}.colors{display:flex;gap:10px}.colors button{background:var(--swatch);width:22px;height:22px;border-radius:50%;border:3px solid transparent;box-shadow:0 0 0 1px #ffffff12}.colors .selected{outline:1px solid white;outline-offset:3px}.view-actions{position:absolute;top:106px;left:28px;display:flex;flex-direction:column;gap:8px}.view-actions button{text-align:left;padding:10px 13px;font-size:16px;background:#16232960}.view-actions span{font-size:12px;margin-left:5px}.view-actions button[aria-pressed=true]{color:#b7f5a0;border-color:#b7f5a080}#status{position:absolute;top:76px;left:50%;transform:translateX(-50%);font-size:13px;color:#d6e2df;text-align:center;padding:9px 16px;border:1px solid #ffffff13;background:#14222750;border-radius:40px;white-space:nowrap;pointer-events:none;transition:opacity .4s}.gesture{position:absolute;bottom:148px;left:50%;transform:translateX(-50%);font-size:12px;color:#c3cdca;white-space:nowrap;display:flex;align-items:center;gap:8px;pointer-events:none}.gesture-dot{width:5px;height:5px;border-radius:50%;background:#b7f5a0;box-shadow:0 0 15px #b7f5a0}.counter{position:absolute;bottom:162px;right:36px;display:flex;align-items:baseline;gap:7px;color:#849c9e;pointer-events:none}.counter span{font-family:Georgia,serif;font-size:35px;font-style:italic;color:#b7f5a0}.counter small{font-size:11px}.bottom{position:absolute;bottom:43px;left:28px;right:28px;display:flex;align-items:stretch;gap:12px}.bottom nav{display:flex;flex:1;gap:5px;padding:8px;border:1px solid #ffffff1a;border-radius:20px;background:#132127b8;backdrop-filter:blur(16px);overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff22 transparent}.tool{flex:1;min-width:59px;padding:9px 5px 8px;border:none;display:flex;flex-direction:column;gap:7px;align-items:center;border-radius:12px;color:#b8c9c9;font-size:11px;white-space:nowrap}.tool svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tool.active{background:#b7f5a0;color:#1c3627}.tool:hover{background:#ffffff15}.tool.active:hover{background:#c5ffb2}#reset{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:11px;padding:10px 17px;border-radius:20px;background:#14222880;white-space:nowrap}#reset span{font-size:28px;line-height:26px}footer{position:absolute;bottom:16px;left:36px;right:36px;display:flex;justify-content:space-between;font-size:10px;color:#6f858a;pointer-events:none}dialog{color:#eef2e9;background:#233139;border:1px solid #657b7d;border-radius:24px;width:min(460px,calc(100% - 30px));padding:34px;box-shadow:0 40px 100px #0008}dialog::backdrop{background:#0a1319aa;backdrop-filter:blur(8px)}dialog h2{font-size:26px;margin:18px 0}dialog p,dialog li{font-size:14px;color:#b6c9cb;line-height:1.85}dialog ul{padding-left:20px}dialog li{margin:10px 0}dialog .note{font-size:12px;color:#8ca6a7}.close{position:absolute;right:15px;top:15px;width:30px;height:30px;font-size:23px}#start-play{background:#b7f5a0;color:#173024;width:100%;padding:13px;border:0;margin-top:8px;font-weight:600}@media(max-width:900px){.settings{width:205px;right:18px;padding:13px}.view-actions{left:18px}.bottom{left:16px;right:16px;gap:7px}.tool{min-width:60px;flex:0 0 60px}.counter{right:25px}.bottom nav{border-radius:16px}#reset{padding:10px 12px;border-radius:16px}}@media(max-width:600px){header{left:18px;right:18px;top:17px}.logo{font-size:36px}.brand{gap:9px}.brand h1{font-size:17px;letter-spacing:2px}.brand .eyebrow{font-size:8px;letter-spacing:2px}.free{font-size:11px;padding:5px 9px}.top-actions{gap:9px}.settings{top:79px;right:16px;width:177px;padding:10px 11px}.settings .row{margin-bottom:9px}.row select{font-size:12px;padding:5px}.segment button{font-size:11px;padding:7px 3px}.settings p{display:none}.colors{gap:9px;margin-top:11px}.colors button{width:18px;height:18px}.view-actions{top:87px;left:16px;gap:6px}.view-actions button{padding:8px 10px;font-size:15px}.view-actions span{font-size:11px}#status{top:auto;bottom:146px;font-size:11px;padding:7px 12px;max-width:90%;white-space:normal;width:max-content}.gesture{bottom:125px;font-size:10px}.bottom{bottom:35px;left:10px;right:10px;gap:6px}.bottom nav{padding:5px;gap:3px}.tool{min-width:52px;flex-basis:52px;font-size:10px;padding:8px 2px 6px;gap:5px}.tool svg{width:21px;height:21px}#reset{font-size:10px;padding:8px 10px;gap:5px}#reset span{font-size:26px}.counter{bottom:175px;right:20px;gap:4px}.counter span{font-size:25px}.counter small{font-size:9px}footer{left:18px;right:18px;bottom:12px;font-size:8px}footer span:last-child{display:none}}@media(max-height:550px) and (min-width:601px){header{top:14px}.settings,.view-actions{top:80px}.settings{width:210px}.settings p{display:none}.colors{margin-top:12px}.bottom{bottom:30px}.gesture{bottom:127px}footer{bottom:9px}}

#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#care-panel{position:absolute;left:28px;top:280px;width:174px;padding:16px;border:1px solid #e8ffbd22;border-radius:16px;background:#14222780;backdrop-filter:blur(12px)}#care-panel[hidden]{display:none}#care-panel>span{font-size:11px;color:#bfd3c5;letter-spacing:2px}#care-panel p{font-size:12px;color:#bfd0c9;margin:12px 0}#care-panel b{font-family:Georgia,serif;font-size:30px;font-weight:400;color:#d7f3b5;margin-right:5px}#care-panel button{font-size:11px;padding:8px 11px;color:#d7f3b5}#care-panel small{display:block;font-size:9px;color:#8caaa1;line-height:1.7;margin-top:13px}@media(max-width:600px){#care-panel{top:230px;left:16px;width:110px;padding:10px;background:#14222755}#care-panel>span{font-size:10px}#care-panel p{font-size:10px;margin:5px 0}#care-panel b{font-size:23px}#care-panel small{display:none}#care-panel button{font-size:10px;padding:6px 8px}.settings{width:177px}.settings .row{margin-bottom:7px}}

.volume-control{width:110px;padding:8px 11px 9px;border:1px solid #ffffff13;border-radius:12px;background:#14222770}.volume-control label{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#abc0bc}.volume-control output{font-variant-numeric:tabular-nums;color:#d7e4d8}.volume-control input{display:block;width:100%;height:21px;margin:5px 0 0;cursor:pointer;accent-color:#b7f5a0}.volume-control input:focus-visible{outline:2px solid #b7f5a0;outline-offset:3px}.view-actions+.volume-control{pointer-events:auto}#care-panel{top:339px}@media(max-width:600px){.volume-control{width:98px;padding:7px 10px 6px}.volume-control input{height:24px;margin-top:1px}#care-panel{top:282px}}

.lab-back{color:#b7f5a0;font-size:12px;text-decoration:none}.top-actions select{padding:7px 9px;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}footer a{color:inherit;text-decoration:none}.brand{pointer-events:auto}html[lang=en] .brand h1{letter-spacing:0}html[lang=en] .tool{font-size:11px}html[lang=en] .settings label{min-width:62px}select option{background:#243037;color:#f4f1e8}@media(max-width:600px){header{left:14px;right:14px}.brand h1{font-size:17px;letter-spacing:1px}.top-actions{gap:7px}.lab-back{font-size:11px}.top-actions select{padding:6px}.logo{font-size:32px}.top-actions .icon{width:30px;height:30px}footer{font-size:9px}.gesture{font-size:10px}html[lang=en] .tool{font-size:10px}html[lang=en] .settings{max-width:180px}}
.settings .row{min-width:0}.settings .row select{min-width:0;flex:1;width:0;max-width:100%}.settings .row label{flex-shrink:0}html[lang=en] .settings .row label{min-width:0;margin-right:8px}.settings .segment button{min-width:0;font-size:12px;padding-left:6px;padding-right:6px}.gesture{background:rgba(25,33,37,.65);padding:6px 10px;border-radius:20px;color:#b9c7c8}