:root{font-family:Inter,Segoe UI,Microsoft YaHei,sans-serif;color:#e6edf2;background:#101b24;font-synthesis:none;font-size:13px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #6dd5ff;outline-offset:3px}button:disabled{opacity:.5;cursor:wait}header{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid #30404c;background:#101b24}.brand{display:flex;gap:13px;align-items:center}.logo{width:38px;height:38px;border:1px solid #89b5c5;border-radius:50%;display:grid;place-items:center;color:#89d9ed;font-size:23px}.brand b{font-size:17px;letter-spacing:3px}.brand small{display:block;font-size:10px;letter-spacing:1.5px;color:#92a4ae;margin-top:5px}.pill{border:1px solid #344b59;color:#a8becb;border-radius:20px;padding:7px 12px;font-size:11px}.top-actions{display:flex;gap:8px}button,select{border:1px solid #3b515f;background:#192b38;color:#dce7ed;border-radius:6px;padding:9px 12px}button:hover{background:#284453}.primary{background:#bedce5;color:#102733;border-color:#bedce5}.primary:hover{background:#e1f4fb}.layout{display:grid;grid-template-columns:minmax(0,1fr) 312px;height:calc(100dvh - 84px)}main{position:relative;min-width:0;overflow:hidden}#stage{position:absolute;top:0;right:0;bottom:0;left:0}canvas{display:block;width:100%;height:100%;touch-action:none}.heading{position:absolute;top:27px;left:30px;pointer-events:none}.eyebrow{color:#98b7c7;font-size:10px;letter-spacing:3px}.heading h1{font-weight:400;font-size:30px;letter-spacing:3px;margin:10px 0}.heading p{font-size:12px;color:#91a9b7;margin-top:8px}.viewtabs{position:absolute;left:28px;right:28px;bottom:138px;display:flex;justify-content:center;gap:5px}.viewtabs button{background:#12232cde;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;padding:10px 15px}.viewtabs button.active{background:#bcd8df;color:#132935}.playbar{position:absolute;bottom:32px;left:28px;right:28px;background:#142430e8;border:1px solid #3b5361;border-radius:12px;padding:16px 18px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.play-top{display:flex;gap:8px;align-items:center}.play-top p{flex:1;margin:0 8px;line-height:1.6;font-size:12px;color:#c4d8e3}.play-top small{color:#6ebed9}.progress{width:100%;height:3px;accent-color:#8bd4e9;margin:15px 0 0}.gesture{position:absolute;bottom:10px;left:30px;font-size:10px;color:#718e9e}.badge{position:absolute;top:28px;right:22px;max-width:210px;color:#e9bf77;font-size:11px;background:#342d2380;padding:8px;border:1px solid #726141;border-radius:5px}.labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.label{position:absolute;top:0;left:0;pointer-events:auto;background:#15232de0;border:1px solid #648598;padding:5px 8px;font-size:10px;white-space:nowrap;border-radius:3px;box-shadow:0 2px 10px #0003}.label:before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#96d9eb;left:-10px;top:10px}.label.active{border-color:#f3c784;color:#f3c784}[hidden]{display:none!important}aside{overflow:auto;background:#14222d;border-left:1px solid #344652;padding:23px 22px}section{border-bottom:1px solid #30414d;padding-bottom:20px;margin-bottom:20px}section h2{font-size:12px;letter-spacing:2px;font-weight:500;color:#91a8b6;margin:0 0 15px}.section-head{display:flex;justify-content:space-between;align-items:center}.section-head span{font-size:10px;color:#698394}.field{display:flex;align-items:center;justify-content:space-between;margin:12px 0;font-size:12px;color:#b9c9d3}.field select{max-width:155px;padding:6px;font-size:11px}input[type=range]{accent-color:#8fd5e7;width:100%}input[type=checkbox]{accent-color:#99d7e5;width:15px;height:15px}.hint{font-size:10px;line-height:1.7;color:#7e97a7}.component h3{font-size:21px;font-weight:400;margin:8px 0}.component .en{font-size:9px;letter-spacing:1.5px;color:#6da2bb}.zone{font-size:11px;color:#e3bd82}.component p{font-size:12px;line-height:1.9;color:#aabfcd}.component select{width:100%;margin:10px 0}.legend{display:flex;gap:13px;color:#94adbc;font-size:10px;margin-top:13px}.legend i{display:inline-block;width:15px;height:3px;background:#68cfff;margin-right:5px;vertical-align:middle}.legend span+span i{background:#ffbf66}.tiny{font-size:10px;line-height:1.8;color:#6f8a9b}a{color:#8bd2e5}.loading{position:absolute;top:0;right:0;bottom:0;left:0;background:#101b24e8;display:grid;place-content:center;text-align:center;z-index:10}.loading strong{font-size:23px;font-weight:300}.loading p{color:#89b6c9}.spinner{width:40px;height:40px;border:2px solid #355361;border-top-color:#a7def0;border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}dialog{background:#172934;color:#c8dbe5;border:1px solid #527184;border-radius:12px;max-width:680px;padding:28px;line-height:1.9}dialog::backdrop{background:#000a}dialog h2{font-weight:400}.drawer{display:none}.statusline{font-size:10px;color:#85a3b3;margin-top:10px}.focus{width:100%}@media(max-width:900px){header{height:68px;padding:0 16px}.brand b{font-size:13px}.pill{display:none}.layout{height:calc(100dvh - 68px);grid-template-columns:1fr}aside{position:absolute;right:0;top:68px;bottom:0;width:290px;z-index:7;display:none}aside.open{display:block}.drawer{display:inline-block}.heading{top:22px;left:18px}.heading h1{font-size:24px}.badge{top:100px;right:12px}.viewtabs{left:10px;right:10px;bottom:150px;flex-wrap:wrap}.viewtabs button{padding:8px}.playbar{left:10px;right:10px;bottom:27px}.play-top{flex-wrap:wrap}.play-top p{order:3;flex-basis:100%;min-height:32px}.gesture{font-size:9px;left:12px}.label{font-size:9px;padding:4px}.top-actions button{font-size:11px;padding:7px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}.chapter-nav{display:flex;gap:8px;margin:12px 0}.chapter-nav button{flex:1;font-size:11px}.chapter-nav button:disabled{cursor:default}#guide-status{min-height:34px;color:#a2c9d5}.chapters{display:grid;gap:5px;margin:0 0 16px}.chapters button{font-size:11px;text-align:left;padding:7px 9px;background:transparent;border-color:#2b424f}.chapters button span{color:#7899a9;margin-right:9px;font-size:9px}.chapters button.current{border-color:#88c8d9;background:#213b48;color:#d4f3ff}.chapters button:hover{background:#294552}.top-actions #language{max-width:110px;font-size:12px}html[lang=en] .heading h1{font-size:26px;letter-spacing:0}html[lang=en] .heading p{max-width:330px}html[lang=en] .component h3{font-size:19px}html[lang=en] .viewtabs button{font-size:11px;padding:9px}html[lang=en] .play-top p{font-size:11px}html[lang=en] .label{max-width:190px;white-space:normal}@media(max-width:600px){header{padding:0 8px}.brand{gap:6px}.brand b{font-size:10px;letter-spacing:1px}.brand small{max-width:125px;font-size:8px;letter-spacing:0}.logo{width:25px;height:25px;font-size:17px}.top-actions{gap:4px}.top-actions #language{max-width:85px;font-size:10px;padding:5px}.top-actions button{font-size:10px;padding:5px}html[lang=en] .heading h1{font-size:22px}html[lang=en] .heading p{max-width:240px}}@media(max-width:900px){html[lang=en] .viewtabs{bottom:190px}}