:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%}html,body,#root,.app{width:100%;height:100vh;height:100dvh;overflow:hidden}html,body{overscroll-behavior:none}body{background:#0b1622}.app-title{position:fixed;top:1rem;left:1.1rem;z-index:8;font-size:.95rem;font-weight:300;letter-spacing:.08em;color:#dcebfa66;text-shadow:0 1px 6px rgba(0,0,0,.35);pointer-events:none;-webkit-user-select:none;user-select:none}.controls-fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:9;width:2.8rem;height:2.8rem;border:none;border-radius:50%;background:#14263699;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e8f4ff;font-size:1.2rem;cursor:pointer}.controls-fab:hover{background:#233c54bf}.controls-fab.left,.controls.left{right:auto;left:1.1rem}.control-iconrow{display:flex;gap:.5rem;justify-content:flex-start}.control-iconrow .control-btn{align-self:auto}.controls-close{align-self:flex-end;width:1.7rem;height:1.7rem;margin-bottom:-.2rem;border:none;border-radius:50%;background:#283e5480;color:#cfe6f3;font-size:1rem;line-height:1;cursor:pointer}.controls-close:hover{background:#3c5a78b3}.controls{position:fixed;right:1.1rem;bottom:1.1rem;z-index:9;display:flex;flex-direction:column;align-items:stretch;gap:.55rem;padding:.8rem .9rem;border-radius:.9rem;background:#0e1c2a80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e8f4ff;font-size:.8rem;font-weight:300;-webkit-user-select:none;user-select:none;width:11.5rem}.control-row{display:flex;flex-direction:column;gap:.35rem}.control-label{opacity:.8;letter-spacing:.04em}.controls input[type=range]{width:100%;accent-color:#6fb3c9;cursor:pointer}.draw-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;cursor:crosshair;background:#08101a59;touch-action:none;user-select:none;-webkit-user-select:none}.guide-line{stroke:#aad2f061;stroke-width:1.5;stroke-dasharray:7 7}.guide-line-main{stroke:#bee1fa99;stroke-width:1.5;stroke-dasharray:10 6}.guide-text{fill:#c8e1f5a6;font-size:.78rem;font-weight:300}.draw-info{position:fixed;top:1.2rem;right:1.2rem;width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;border:1px solid rgba(150,190,220,.4);border-radius:50%;background:#142636b3;color:#e8f4ff;font-size:1.1rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.draw-info.on{border-color:#8cd2ffd9;background:#285678d9}.draw-hint{position:fixed;top:3.8rem;right:1.2rem;max-width:min(22rem,80vw);color:#e8f4ff;font-size:.85rem;font-weight:300;line-height:1.5;background:#0e1c2ad9;padding:.6rem .9rem;border-radius:.6rem;border:1px solid rgba(120,170,200,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}.draw-actions{position:fixed;bottom:1.6rem;left:50%;transform:translate(-50%);display:flex;gap:.6rem}.draw-actions button{border:1px solid rgba(150,190,220,.4);border-radius:.6rem;background:#142636b3;color:#e8f4ff;padding:.55rem 1rem;font-size:.85rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.draw-actions button:disabled{opacity:.4;cursor:default}.draw-done{border-color:#8cd2ffcc!important;background:#285678d9!important;font-weight:600}.control-select{width:100%;background:#14263699;color:#e8f4ff;border:1px solid rgba(120,170,200,.3);border-radius:.5rem;padding:.4rem .5rem;font-size:.78rem;cursor:pointer}.control-toggle.primary{background:#3c6e968c;border:1px solid rgba(150,210,240,.5);color:#eaf6ff}.layer-list{display:flex;flex-direction:column;gap:.3rem;max-height:9rem;overflow-y:auto}.layer-row{display:flex;flex-direction:column;gap:.3rem;padding:.3rem .4rem;border-radius:.45rem;background:#14263680}.layer-head{display:flex;align-items:center;gap:.4rem}.layer-tempo{display:flex;align-items:center}.layer-tempo input{flex:1}.layer-row.off{opacity:.45}.layer-dot{width:.7rem;height:.7rem;border-radius:50%;flex:0 0 auto}.layer-name{flex:1;font-size:.76rem}.layer-btn{border:none;background:transparent;color:#cfe6f3;font-size:.85rem;cursor:pointer;padding:.1rem .2rem}.layer-btn:hover{color:#fff}.control-sep{border:none;border-top:1px solid rgba(120,170,200,.18);margin:.2rem 0}.control-iorow{display:flex;gap:.5rem;justify-content:flex-end}.control-ico{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border:1px solid rgba(120,170,200,.3);border-radius:.55rem;background:#14263680;color:#cfe6f3;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}.control-ico:hover:not(:disabled){background:#233c54b3;border-color:#96d2f099;color:#fff}.control-ico:disabled{opacity:.4;cursor:default}.control-toggle{border:1px solid rgba(120,170,200,.3);border-radius:.6rem;background:#14263680;color:#cfe6f3;padding:.45rem .5rem;font-size:.78rem;cursor:pointer;white-space:nowrap;transition:background .2s ease,border-color .2s ease}.control-toggle.on{background:#3c6e968c;border-color:#96d2f099;color:#eaf6ff}.control-btn{align-self:flex-end;width:2.4rem;height:2.4rem;border:none;border-radius:50%;background:#1426368c;color:#e8f4ff;font-size:1rem;cursor:pointer;transition:background .2s ease,transform .1s ease}.control-btn:hover{background:#233c54b3}.control-btn:active{transform:scale(.92)}.control-toggle{display:flex;align-items:center;justify-content:center;gap:.4rem}.control-label{display:inline-flex;align-items:center;gap:.35rem}.control-btn,.controls-fab,.controls-close,.layer-btn,.draw-info{display:inline-flex;align-items:center;justify-content:center}.draw-overlay.erase{cursor:cell}.draw-tools{position:fixed;top:1.2rem;left:50%;transform:translate(-50%);display:flex;gap:.4rem}.draw-tool{display:inline-flex;align-items:center;gap:.35rem;border:1px solid rgba(150,190,220,.4);border-radius:.6rem;background:#142636b3;color:#e8f4ff;padding:.45rem .8rem;font-size:.82rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.draw-tool.on{border-color:#8cd2ffd9;background:#285678d9;font-weight:600}.overview-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#08101a8c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.overview-svg{position:absolute;top:0;right:0;bottom:0;left:0}.overview-close{position:fixed;top:1.2rem;right:1.2rem}.overview-legend{position:fixed;top:1.2rem;left:1.2rem;display:flex;flex-direction:column;gap:.3rem;max-height:70vh;overflow-y:auto;padding:.7rem .8rem;border-radius:.6rem;background:#0e1c2acc;border:1px solid rgba(120,170,200,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.overview-title{color:#e8f4ff;font-size:.82rem;font-weight:600;margin-bottom:.2rem}.overview-empty{color:#cfe6f3;font-size:.76rem;opacity:.8}.overview-item{display:flex;align-items:center;gap:.45rem;border:none;background:#14263680;border-radius:.45rem;color:#cfe6f3;padding:.35rem .5rem;font-size:.78rem;cursor:pointer}.overview-item:hover{background:#233c54b3;color:#fff}.overview-item.off{opacity:.45}.overview-item-name{flex:1;text-align:left}button,.controls-fab,.controls-close,.control-toggle,.control-btn,.control-ico,.layer-btn,.draw-tool,.draw-info,.draw-actions button,.overview-item,.overview-close{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.layer-list,.overview-legend{overscroll-behavior:contain}.controls-fab,.controls{right:calc(1.1rem + env(safe-area-inset-right));bottom:calc(1.1rem + env(safe-area-inset-bottom))}.controls-fab.left,.controls.left{left:calc(1.1rem + env(safe-area-inset-left))}.app-title{top:calc(1rem + env(safe-area-inset-top));left:calc(1.1rem + env(safe-area-inset-left))}.draw-info{top:calc(1.2rem + env(safe-area-inset-top));right:calc(1.2rem + env(safe-area-inset-right))}.draw-hint{top:calc(3.8rem + env(safe-area-inset-top));right:calc(1.2rem + env(safe-area-inset-right))}.draw-tools{top:calc(1.2rem + env(safe-area-inset-top))}.draw-actions{bottom:calc(1.6rem + env(safe-area-inset-bottom))}.overview-close{position:fixed;top:calc(1.2rem + env(safe-area-inset-top));right:calc(1.2rem + env(safe-area-inset-right))}.overview-legend{top:calc(1.2rem + env(safe-area-inset-top));left:calc(1.2rem + env(safe-area-inset-left))}@media(hover:none)and (pointer:coarse){.controls{max-height:calc(100dvh - 2.2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.layer-head{gap:.15rem}.layer-btn{flex:0 0 auto;min-width:2rem;min-height:2.75rem;padding:.4rem .25rem}.controls-close{width:2.75rem;height:2.75rem;font-size:1.2rem}.control-ico{width:2.75rem;height:2.75rem}.control-btn{width:2.8rem;height:2.8rem}.controls-fab{width:3.2rem;height:3.2rem}.control-toggle{min-height:2.75rem}.controls input[type=range]{height:2.75rem;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.controls input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#96c8e659}.controls input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#96c8e659}.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#6fb3c9;border:2px solid #eaf6ff}.controls input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#6fb3c9;border:2px solid #eaf6ff}.draw-info{width:2.8rem;height:2.8rem}.draw-hint{top:calc(4.2rem + env(safe-area-inset-top));max-width:min(22rem,calc(100vw - 2.4rem))}.draw-tool,.draw-actions button{min-height:2.75rem}.draw-actions{width:calc(100vw - 1.2rem - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:26rem;justify-content:center;gap:.4rem}.draw-actions button{flex:1 1 0;padding:.6rem .4rem;white-space:nowrap}.overview-item{min-height:2.75rem}.overview-legend{max-height:calc(70dvh - env(safe-area-inset-top));max-width:calc(100vw - 2.4rem - env(safe-area-inset-left) - env(safe-area-inset-right))}}