*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:#1d1d1d;color:#d8d8d8;font-family:-apple-system,Segoe UI,Hiragino Sans,Noto Sans JP,sans-serif;font-size:13px;-webkit-user-select:none;user-select:none;overflow:hidden}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;flex-direction:column;gap:4px;padding:6px 12px;background:#2d2d2d;border-bottom:1px solid #111}.topbar-row{display:flex;align-items:center;gap:10px;min-height:28px}.tb-cap{color:#888;font-size:11px}.tb-proj-name{width:150px;background:#1c1c1c;border:1px solid #111;border-radius:3px;color:#e8e8e8;font-size:12px;font-weight:600;padding:3px 7px}.tb-proj-name:focus{outline:1px solid #1473e6}.tb-group.noborder{border-left:none;padding-left:0}.tb-btn.danger:hover:not(:disabled){background:#c0392b;color:#fff}.app-title{font-size:15px;font-weight:700;letter-spacing:.5px;margin-right:6px}.app-title .accent{color:#1473e6}.tb-group{display:flex;align-items:center;gap:4px;padding:0 8px;border-left:1px solid #404040}.tb-btn{background:#3a3a3a;color:#ddd;border:1px solid #1c1c1c;border-radius:3px;padding:4px 9px;font-size:12px;cursor:pointer;white-space:nowrap}.tb-btn:hover:not(:disabled){background:#484848}.tb-btn:disabled{opacity:.4;cursor:default}.tb-btn.on,.tb-btn.primary{background:#1473e6;color:#fff;border-color:#0d5cba}.tb-nr{display:flex;align-items:center;gap:5px;font-size:11px;color:#aaa}.tb-nr input[type=range]{width:70px}.tb-group.devices label{display:flex;align-items:center;gap:4px;font-size:11px;color:#aaa}.tb-group.devices select{max-width:150px;background:#232323;color:#ddd;border:1px solid #111;border-radius:3px;padding:3px 4px;font-size:11px}.tb-group.lang{margin-left:auto;border-left:none}.main{flex:1 1 54%;display:flex;min-height:0}.headers-viewport{width:230px;flex:none;background:#262626;border-right:1px solid #111;display:flex;flex-direction:column;overflow:hidden}.headers-ruler-pad{flex:none;background:#2b2b2b;border-bottom:1px solid #3a3a3a}.headers-clip{flex:1;overflow:hidden}.track-header{padding:7px 10px;border-bottom:1px solid #101010;display:flex;flex-direction:column;gap:5px;box-sizing:border-box;overflow:hidden}.th-row1{display:flex;align-items:center;gap:5px}.th-color{width:4px;height:16px;border-radius:2px;flex:none}.th-name{flex:1;min-width:0;background:transparent;border:1px solid transparent;border-radius:3px;color:#e8e8e8;font-size:12px;font-weight:600;padding:2px 4px}.th-name:hover,.th-name:focus{background:#1c1c1c;border-color:#3a3a3a;outline:none}.th-del{background:transparent;border:none;color:#777;font-size:14px;cursor:pointer;padding:0 4px}.th-del:hover:not(:disabled){color:#e05555}.th-btn{width:22px;height:18px;font-size:10px;font-weight:700;border-radius:3px;border:1px solid #181818;background:#3a3a3a;color:#999;cursor:pointer;line-height:1}.th-btn.rec.on{background:#d33;color:#fff}.th-btn.mute.on{background:#2e8a2e;color:#fff}.th-btn.solo.on{background:#c9a227;color:#111}.th-idx{margin-left:auto;color:#666;font-size:10px}.th-spacer{flex:1}.th-db-input{width:58px;background:#161616;color:#7ee07e;border:1px solid #0a0a0a;border-radius:3px;font-size:11px;font-family:SF Mono,Consolas,monospace;padding:2px 4px;text-align:right}.th-db-input:focus{outline:1px solid #1473e6}.th-unit{color:#777;font-size:10px}.th-slider-row{display:flex;align-items:center;gap:6px;height:18px}.th-slider-row input[type=range]{flex:1;min-width:0;height:14px;margin:0}.th-lab{color:#888;font-size:10px;font-weight:700;width:10px;flex:none}.th-val{color:#aaa;font-size:10px;font-family:SF Mono,Consolas,monospace;width:38px;flex:none;text-align:right}.arrange-wrap{flex:1;min-width:0;position:relative}.arrange-scroller{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.arrange-canvas{position:sticky;top:0;left:0;display:block;z-index:1;cursor:default;touch-action:none}.arrange-spacer{position:absolute;top:0;left:0;pointer-events:none}.transport{display:flex;align-items:center;gap:14px;padding:8px 14px;background:#2d2d2d;border-top:1px solid #111}.tp-buttons{display:flex;gap:5px}.tp-btn{width:44px;height:32px;background:#3a3a3a;color:#ddd;border:1px solid #181818;border-radius:4px;font-size:15px;cursor:pointer}.tp-btn:hover:not(:disabled){background:#4a4a4a}.tp-btn:disabled{opacity:.35;cursor:default}.tp-btn.rec-btn{color:#e04444}.tp-btn.rec-btn.active{background:#e04444;color:#fff}.tp-btn.punch-btn{color:#e08a44;font-size:13px}.tp-tools{display:flex;gap:4px}.tp-tool{width:34px;height:32px;background:#3a3a3a;color:#bbb;border:1px solid #181818;border-radius:4px;font-size:14px;cursor:pointer}.tp-tool.on{background:#1473e6;color:#fff;border-color:#0d5cba}.tp-clock{font-family:SF Mono,Consolas,monospace;font-size:22px;color:#7ee07e;background:#141414;border:1px solid #000;border-radius:4px;padding:2px 12px;width:150px;text-align:center}.tp-clock:focus{outline:1px solid #1473e6;color:#fff}.tp-clock.rec{color:#f66}.rec-label{color:#f66;font-weight:700;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.25}}.tp-zoom{display:flex;align-items:center;gap:6px;color:#999;font-size:11px}.tp-zoom input{width:130px}.tp-hint{margin-left:auto;color:#666;font-size:11px}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50}.context-menu{position:fixed;z-index:51;background:#2f2f2f;border:1px solid #151515;border-radius:5px;box-shadow:0 6px 22px #0009;padding:4px;display:flex;flex-direction:column;min-width:230px}.menu-item{background:transparent;border:none;color:#ddd;text-align:left;padding:6px 10px;font-size:12px;border-radius:3px;cursor:pointer}.menu-item:hover:not(:disabled){background:#1473e6;color:#fff}.menu-item:disabled{color:#666;cursor:default}.menu-item.danger:hover:not(:disabled){background:#c0392b}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#2c2c2c;border:1px solid #151515;border-radius:6px;padding:18px 20px;width:360px;box-shadow:0 10px 40px #000000b3}.modal h3{margin:0 0 14px;font-size:14px}.modal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px;color:#bbb}.modal-row input,.modal-row select{background:#1c1c1c;color:#ddd;border:1px solid #111;border-radius:3px;padding:5px 7px;width:200px;font-size:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.vocal-panel{flex:1 1 46%;min-height:0;display:flex;flex-direction:column;position:relative;background:#0d1014;border-top:2px solid #1473e6}.vocal-bar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#1c2128;border-bottom:1px solid #000;flex-wrap:wrap}.vocal-title{font-size:13px;font-weight:700;color:#eaeaea}.vocal-sel{display:flex;align-items:center;gap:5px;font-size:11px;color:#aaa}.vocal-sel select{background:#232323;color:#ddd;border:1px solid #111;border-radius:3px;padding:3px 5px;font-size:11px;max-width:150px}.vocal-style{display:flex;gap:3px}.vocal-transport{display:flex;gap:4px}.vocal-score{font-size:13px;color:#bbb}.vocal-score strong{font-size:20px;color:#46d17a;font-family:SF Mono,Consolas,monospace}.vocal-close{margin-left:auto}.vocal-canvas{flex:1;min-height:0;width:100%;display:block;cursor:pointer}.vocal-empty{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);color:#8aa;font-size:13px;background:#00000080;padding:8px 16px;border-radius:6px;pointer-events:none;max-width:80%;text-align:center}.countdown{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);font-size:140px;font-weight:800;font-family:SF Mono,Consolas,monospace;color:#ffd23e;text-shadow:0 0 40px rgba(0,0,0,.9);z-index:150;pointer-events:none;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.55}to{opacity:1}}.projects-modal{width:460px}.projects-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.projects-empty{color:#777;font-size:12px;padding:14px 0;text-align:center}.project-row{display:flex;align-items:center;gap:8px;background:#232323;border:1px solid #161616;border-radius:4px;padding:8px 10px}.project-row.current{border-color:#1473e6}.project-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.project-name{font-size:13px;font-weight:600;color:#e8e8e8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-name em{color:#1473e6;font-style:normal;font-size:11px}.project-meta{font-size:10px;color:#888}.toast{position:fixed;bottom:70px;left:50%;transform:translate(-50%);background:#1473e6;color:#fff;padding:9px 18px;border-radius:5px;font-size:13px;box-shadow:0 4px 18px #00000080;z-index:200;max-width:70vw}