:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#c8dbe1}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}canvas{touch-action:none;cursor:grab;outline:none;width:100%;height:100%;display:block}canvas:active{cursor:grabbing}.environment-controls{top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:10;color:#f3eedf;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-user-select:none;user-select:none;background:#182428e0;border:1px solid #d9e4cd26;border-radius:0;gap:20px;width:586px;max-width:calc(100vw - 32px);padding:16px 18px;font:13px/1.4 system-ui,Microsoft YaHei,sans-serif;display:flex;position:fixed;box-shadow:0 8px 28px #05151b25}.environment-presets{flex:none;gap:9px;display:grid}.control-row{align-items:center;gap:10px;display:flex}.control-label{color:#b8c6c4;letter-spacing:.12em;font-size:12px}.segments{background:#0d1c225e;border-radius:0;gap:3px;padding:3px;display:flex}.segments button{color:#becbc7;min-height:32px;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:0;padding:6px 10px;transition:background .15s,color .15s}.segments button:hover{color:#fff;background:#edf2d916}.segments button[aria-pressed=true]{color:#273230;background:#d7b97f;box-shadow:0 1px 3px #0003}.segments button:focus-visible,.ruler-track input:focus-visible{outline-offset:3px;outline:2px solid #f7dca4}.time-ruler{border-left:1px solid #c7d4cf26;flex:1;align-self:center;min-width:0;padding-left:20px}.ruler-heading{align-items:baseline;gap:8px;margin-bottom:9px;display:flex}.ruler-heading label{color:#c5d0cb;font-size:12px}.time-status{color:#94a8a5;font-size:10px}.ruler-heading output{color:#f5d9a2;font-variant-numeric:tabular-nums;margin-left:auto;font:500 17px/1.1 ui-monospace,Consolas,monospace}.ruler-track{background:repeating-linear-gradient(90deg,#b3c1ba77 0 1px,#0000 1px 4.16667%) 0 100%/100% 7px no-repeat;height:27px;margin:0 7px;position:relative}.ruler-track input{appearance:none;cursor:ew-resize;touch-action:none;background:0 0;width:calc(100% + 14px);height:24px;margin:0;position:absolute;top:-4px;left:-7px}.ruler-track input::-webkit-slider-runnable-track{background:#9eafa9;border-radius:0;height:4px}.ruler-track input::-webkit-slider-thumb{appearance:none;background:#f4ddb0;border:1px solid #fff6;border-radius:0;width:10px;height:16px;margin-top:-6px;box-shadow:0 2px 5px #0007}.ruler-track input::-moz-range-track{background:#9eafa9;border-radius:0;height:4px}.ruler-track input::-moz-range-thumb{background:#f4ddb0;border:1px solid #fff6;border-radius:0;width:8px;height:14px}.ruler-labels{color:#92a6a4;justify-content:space-between;margin:0 2px;font:10px/1 ui-monospace,Consolas,monospace;display:flex}@media (width<=640px){.environment-controls{top:max(12px,env(safe-area-inset-top));flex-direction:column;gap:12px;width:314px;padding:12px 14px;right:12px}.environment-presets{gap:5px}.segments{flex:1}.segments button{flex:1;min-height:36px;padding:6px 8px}.time-ruler{border-top:1px solid #c7d4cf26;border-left:0;width:100%;padding:12px 0 0}}@media (prefers-reduced-motion:reduce){.segments button{transition:none}}