:root{--bg:#121214;--panel:#1b1b1f;--panel-2:#24242a;--line:#2f2f36;--line-strong:#6e6e7c;--text:#ececf0;--sub:#a0a0aa;--muted:#6f6f78;--accent:#ea8e7a;--accent-bg:#4f3836;--on-accent:#3a1a14;--lyric:#eeedfe;--lyric-text:#3c3489;--danger:#f09595;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,Hiragino Sans,sans-serif;font-size:14px;line-height:1.6}h1{letter-spacing:.02em;margin:0 0 6px;font-size:26px;font-weight:600}h3{color:var(--sub);margin:0 0 8px;font-size:13px;font-weight:600}button,select{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);cursor:pointer;border-radius:8px;padding:6px 12px}button:hover,select:hover{border-color:var(--muted)}button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}button.big{padding:12px 28px;font-size:16px}button:disabled{opacity:.6;cursor:default}input[type=range]{accent-color:var(--accent)}.seg{border:1px solid var(--line);border-radius:8px;display:inline-flex;overflow:hidden}.seg button{color:var(--sub);white-space:nowrap;background:0 0;border:0;border-radius:0}.seg button+button{border-left:1px solid var(--line)}.seg button.on{background:var(--accent-bg);color:var(--text)}.side .seg button{padding:6px 10px;font-size:13px}.muted{color:var(--muted);margin:4px 0 8px;font-size:12px}.error{color:var(--danger)}.check{cursor:pointer;align-items:center;gap:8px;display:flex}.check.small{color:var(--sub);font-size:12px}.import{flex-direction:column;gap:12px;max-width:760px;margin:0 auto;padding:24px 16px 16px;display:flex}.lead{color:var(--sub);margin:0}.import-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}@media (width<=640px){.import-grid{grid-template-columns:1fr}}.drop{background:var(--panel);border:1.5px dashed var(--line);cursor:pointer;border-radius:14px;flex-direction:column;gap:6px;min-height:92px;padding:12px 16px;display:flex}.drop:hover,.drop.over{border-color:var(--accent)}.drop.filled{border-style:solid;border-color:var(--accent);background:var(--accent-bg)}.drop-label{font-size:15px;font-weight:600}.drop-file{color:var(--text);word-break:break-all}.drop-hint{color:var(--muted);margin-top:auto;font-size:12px}.field{flex-direction:column;gap:6px;display:flex}.field-label{font-weight:600}.field-head{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.field-head .muted{margin:0}textarea{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);resize:vertical;border-radius:10px;padding:8px 12px}.import>button{align-self:flex-start}details.optional summary,details.help summary{cursor:pointer;color:var(--sub);font-size:13px}details.optional[open] summary{margin-bottom:10px}.editor{grid-template-rows:auto minmax(0,1fr) auto;height:100%;display:grid}.topbar{border-bottom:1px solid var(--line);background:var(--panel);align-items:center;gap:12px;padding:10px 16px;display:flex}.logo{letter-spacing:.03em;font-weight:700}.title{color:var(--sub);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.spacer{flex:1}.workspace{grid-template-columns:minmax(0,1fr) 320px;min-height:0;display:grid}.preview{justify-content:center;align-items:center;min-width:0;min-height:0;padding:16px;display:flex}.preview-frame{box-shadow:0 0 0 1px var(--line);border-radius:6px;position:relative;overflow:hidden}.preview-frame canvas{cursor:grab;display:block}.preview-frame canvas:active{cursor:grabbing}.preview-frame canvas.drag-lyrics{cursor:move}.safe{pointer-events:none;outline-offset:-1px;background:#e24b4a2e;outline:1px dashed #e24b4acc;position:absolute}.side{border-left:1px solid var(--line);background:var(--panel);flex-direction:column;gap:22px;padding:16px;display:flex;overflow-y:auto}.mode-tabs{z-index:2;background:var(--panel);border-bottom:1px solid var(--line-strong);margin:-16px -16px 0;padding:12px 16px 10px;position:sticky;top:-16px}.mode-tabs .muted{margin:8px 0 0}.mode-buttons{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;grid-template-columns:1fr 1fr;gap:4px;padding:3px;display:grid}.mode-buttons button{color:var(--sub);background:0 0;border:0;border-radius:8px;padding:8px 6px;font-size:13px;font-weight:600}.mode-buttons button.on{background:var(--accent-bg);color:var(--text);box-shadow:0 0 0 1px var(--accent) inset}.field-row{align-items:center;gap:10px;margin:8px 0;display:flex}.field-row>span:first-child{width:84px;color:var(--sub);flex-shrink:0;font-size:13px}.field-row input[type=range]{flex:1;min-width:0}.field-row select{flex:1}.field-row.disabled{opacity:.45}.field-row input[type=color]{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:6px;width:40px;height:28px;padding:0}.field-row input.hex{flex:1;min-width:0;font-family:ui-monospace,Menlo,monospace;font-size:12px}.numbox{flex-shrink:0;align-items:center;gap:3px;display:inline-flex}.numbox input{box-sizing:border-box;text-align:right;width:50px;font:inherit;font-variant-numeric:tabular-nums;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:12px}.numbox input:hover{border-color:var(--muted)}.numbox input:focus{border-color:var(--accent);background:var(--bg,var(--panel-2));outline:none}.numbox input:disabled{color:var(--muted);cursor:default}.numbox .unit{min-width:1.1em;color:var(--sub);font-size:12px}.num{font-variant-numeric:tabular-nums;color:var(--sub);text-align:right;min-width:44px;font-size:12px}.selected-line{background:var(--panel-2);border-radius:8px;margin-bottom:8px;padding:8px 10px}.selected-text{white-space:pre-line;font-weight:600}.help ul{color:var(--sub);margin:6px 0 10px;padding-left:0;font-size:12px;list-style:none}.help li{margin:4px 0}kbd{font:inherit;background:var(--panel-2);border:1px solid var(--line);color:var(--text);border-radius:4px;padding:0 5px;font-size:11px}.line-edit{box-sizing:border-box;width:100%;font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--line);resize:vertical;border-radius:8px;padding:6px 8px;font-size:14px;line-height:1.5;display:block}.line-edit:hover{border-color:var(--muted)}.line-edit:focus{border-color:var(--accent);outline:none}.line-editor .muted.small{margin:4px 0 6px}.lyrics-draft{width:100%;margin-bottom:8px;font-size:13px}.row-buttons{gap:8px;display:flex}.timeline{border-top:1px solid var(--line);background:var(--panel);grid-template-rows:auto minmax(0,1fr);display:grid}.tl-toolbar{border-bottom:1px solid var(--line);align-items:center;gap:12px;min-width:0;padding:8px 16px;display:flex}.play-btn{width:40px;height:30px;padding:0}.jump-btn{width:30px;height:30px;margin-left:-6px;padding:0;font-size:14px}.time{font-variant-numeric:tabular-nums;color:var(--sub);white-space:nowrap}.tl-status{color:var(--sub);align-items:center;gap:8px;min-width:0;font-size:12px;display:flex}.tl-status span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tl-status.error{color:var(--danger)}.tl-progress{background:var(--line);border-radius:2px;flex-shrink:0;width:120px;height:4px;overflow:hidden}.tl-progress>div{background:var(--accent);height:100%;transition:width .3s}.legend{color:var(--muted);white-space:nowrap;align-items:center;gap:4px;font-size:11px;display:flex}.sw{border-radius:3px;width:10px;height:10px;display:inline-block}.sw.auto{background:var(--lyric)}.sw.interp{background:#fac775}.sw.manual{background:#9fe1cb}.zoom{width:110px}.tl-body{grid-template-columns:56px minmax(0,1fr);align-items:start;min-height:0;display:grid;overflow-y:auto}.tl-labels{border-right:1px solid var(--line)}.tl-ruler-space{height:22px}.tl-label{height:52px;color:var(--sub);border-bottom:1px solid var(--line-strong);box-sizing:border-box;align-items:center;padding-left:12px;font-size:12px;display:flex}.tl-scroll{position:relative;overflow:auto hidden}.tl-content{height:100%;position:relative}.tl-ruler{border-bottom:1px solid var(--line-strong);cursor:pointer;-webkit-user-select:none;user-select:none;height:22px;position:relative}.tick{color:var(--muted);border-left:1px solid var(--line);font-variant-numeric:tabular-nums;padding-left:3px;font-size:10px;line-height:16px;position:absolute;top:3px}.tl-track{border-bottom:1px solid var(--line-strong);height:52px;position:relative}.tl-track.wave canvas{pointer-events:none;height:40px;position:absolute;top:6px}.tl-empty{color:var(--muted);font-size:12px;position:absolute;top:16px}.tl-playhead{pointer-events:none;z-index:3;background:#e24b4a;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:0}.lyric-block{background:var(--lyric);height:36px;color:var(--lyric-text);white-space:nowrap;cursor:grab;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-radius:5px;align-items:center;font-size:12px;display:flex;position:absolute;top:5px;overflow:hidden}.lyric-block:active{cursor:grabbing}.lyric-block.interp{color:#633806;background:#fac775}.lyric-block.manual{color:#04342c;background:#9fe1cb}.lyric-block.selected{outline-offset:1px;z-index:2;outline:2px solid #fff}.lyric-text{text-overflow:ellipsis;pointer-events:none;padding:0 8px;overflow:hidden}.break-mark{color:#fff;background:#d4537e;border-radius:3px;margin:0 4px;padding:0 3px;font-weight:800}.break-mark.auto{color:#b8305f;background:0 0;box-shadow:inset 0 0 0 1px #d4537e}.lyric-block input{font:inherit;color:#1d1d1b;background:#fffc;border:0;border-radius:3px;width:100%;margin:0 4px;padding:2px 6px}.edge{cursor:ew-resize;z-index:1;width:7px;position:absolute;top:0;bottom:0}.edge.start{left:0}.edge.end{right:0}.edge:hover{background:#0000002e}.bpm{font-variant-numeric:tabular-nums;color:var(--text);background:var(--panel-2);border:1px solid var(--line);white-space:nowrap;border-radius:6px;padding:1px 8px;font-size:12px}.snap{color:var(--muted);white-space:nowrap;align-items:center;gap:6px;font-size:11px;display:flex}.snap .seg button{padding:3px 8px;font-size:12px}.tl-grid{pointer-events:none;position:absolute}.tl-track.sections{position:relative}.section-block{white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;border-right:2px solid var(--panel);border-radius:5px;align-items:center;padding:0 8px;font-size:12px;font-weight:600;display:flex;position:absolute;top:3px;bottom:3px;overflow:hidden}.section-block.selected{outline-offset:-1px;z-index:2;outline:2px solid #fff}.section-edge{cursor:ew-resize;z-index:3;width:8px;position:absolute;top:0;bottom:0}.section-edge:hover{background:#ffffff40}.type-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0;display:grid}.type-grid button{white-space:nowrap;padding:5px 4px;font-size:12px}.tempo-row{align-items:baseline;gap:6px;display:flex}.tempo-value{font-variant-numeric:tabular-nums;font-size:24px;font-weight:600}.tempo-fixes{flex-direction:column;gap:6px;margin:8px 0;display:flex}.tempo-fixes button{text-align:left;font-size:13px}.flash{color:#fff;pointer-events:none;background:#0000008c;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;font-size:26px;animation:.7s ease-out forwards flash;display:flex;position:absolute;top:50%;left:50%}@keyframes flash{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.15)}}@media (width<=1100px){.legend{display:none}}.guide{background:var(--panel-2);border-radius:12px;padding:12px}.bubble{background:var(--bg);border:1px solid var(--line);border-radius:12px 12px 12px 3px;margin:0 0 8px;padding:8px 12px;font-size:13px;line-height:1.6}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0;display:grid}.choice-col{flex-direction:column;gap:6px;margin:8px 0;display:flex}.choice{text-align:left;overflow-wrap:anywhere;border-radius:10px;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:8px 12px;display:flex}.choice span{color:var(--muted);font-size:11px}.choice.on{background:var(--accent-bg);border-color:var(--accent)}.btn-grid{grid-template-columns:1fr 1fr;gap:6px;margin:8px 0;display:grid}.btn-grid button{padding:6px 8px;font-size:12px}.btn-grid button.on{background:var(--accent-bg);border-color:var(--accent)}.chips{flex-wrap:wrap;gap:6px;margin:8px 0;display:flex}.chip{border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;padding:5px 10px;font-size:13px;display:flex}.chip small{color:var(--sub);font-size:12px}.chip.on{background:var(--accent-bg);border-color:var(--accent)}.chip.on small{color:var(--text)}.chip.font span{font-size:17px;line-height:1.3}.chip .swatch{font-size:20px;font-weight:700;line-height:1.2}.sub-head{color:var(--sub);margin:12px 0 0;font-size:12px;font-weight:600}.muted.small{margin:0 0 6px;font-size:11px}.link{color:var(--sub);background:0 0;border:0;padding:4px 0;font-size:12px;text-decoration:underline}.tl-progress.wide{width:100%}.tl-track.effects{position:relative}.effect-block{cursor:grab;-webkit-user-select:none;user-select:none;box-sizing:border-box;opacity:.92;border-radius:4px;align-items:center;font-size:11px;font-weight:600;display:flex;position:absolute;overflow:hidden}.effect-block:active{cursor:grabbing}.effect-block.selected{outline-offset:1px;z-index:2;opacity:1;outline:2px solid #fff}.effect-label{white-space:nowrap;pointer-events:none;padding:0 8px}.row-buttons button.on-btn{background:var(--accent-bg);border-color:var(--accent)}.modal-back{z-index:50;background:#0009;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:min(560px,100%);max-height:calc(100vh - 32px);padding:20px 22px;overflow-y:auto}.modal h2{margin:0 0 14px;font-size:17px}.export-group{margin-bottom:14px}.export-label{color:var(--sub);margin-bottom:6px;font-size:12px;font-weight:600}.custom-range{flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;font-size:13px;display:flex}.custom-range input{width:72px;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 6px}.row-buttons.end{justify-content:flex-end;margin-top:12px}.muted.warn{color:#ef9f27}.tl-progress.big{border-radius:4px;height:8px}.error-bubble{border-color:var(--danger);color:var(--danger)}.saved{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 14px}.saved-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.saved h2,.new-head{margin:0;font-size:15px;font-weight:600}.new-head{margin-top:2px}.link-btn{color:var(--sub);cursor:pointer;font-size:12px;text-decoration:underline}.saved-list{flex-direction:column;gap:4px;max-height:108px;margin:8px 0 0;padding:0;list-style:none;display:flex;overflow-y:auto}.saved-list li{border-top:1px solid var(--line);align-items:center;gap:8px;padding:6px 0;display:flex}.saved-title{flex-direction:column;flex:1;min-width:0;display:flex}.saved-title b{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.save-state{box-sizing:border-box;text-align:right;width:12em;height:20px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;flex:none;font-size:12px;line-height:20px;overflow:hidden}.save-state[data-state=error]{color:var(--danger)}.thumb{background:var(--panel-2);border-radius:12px;padding:12px}.field-col{color:var(--sub);flex-direction:column;gap:4px;margin:8px 0;font-size:12px;display:flex}.field-col input[type=text]{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 8px}.env-notice p{margin:0 0 6px;font-size:13px}.warn-text{color:#ef9f27}.first-run{margin-top:4px}.app-footer{color:var(--muted);margin-top:24px;font-size:11px}.error-detail{background:var(--panel);border:1px solid var(--line);white-space:pre-wrap;word-break:break-all;color:var(--sub);border-radius:8px;padding:10px 12px;font-size:12px}.lyric-group,.lyric-rows{position:relative}.tl-track.lyrics{height:46px}.new-track-strip{border-bottom:1px dashed var(--line);color:var(--muted);-webkit-user-select:none;user-select:none;font-size:10px;position:relative}.new-track-strip span{white-space:nowrap;pointer-events:none;position:absolute;top:2px}.lyric-group.hint-top .lyric-rows:before,.lyric-group.hint-bottom .new-track-strip{color:var(--text);background:#ea8e7a33}.lyric-group.hint-top .lyric-rows:before{content:"＋ ここに置くと、新しいタイムラインが上にできます";border-top:2px dashed var(--accent);z-index:5;pointer-events:none;height:16px;padding-left:8px;font-size:10px;position:absolute;top:-2px;left:0;right:0}.lyric-group.hint-bottom .new-track-strip{border-bottom-color:var(--accent)}.tl-track.video{background:#5f8cc814;position:relative}.tl-track.video.locked .video-clip{opacity:.75;cursor:default}.video-clip{color:#e6f0ff;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:none;cursor:pointer;background:#4a6fa5;border-radius:5px;align-items:center;font-size:11px;display:flex;position:absolute;top:4px;bottom:4px;overflow:hidden}.video-clip.movable{cursor:grab}.video-clip.movable:active{cursor:grabbing}.video-clip.selected{outline-offset:1px;z-index:2;outline:2px solid #fff}.video-clip .video-text{white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;padding:0 8px}.video-clip .edge{cursor:ew-resize;z-index:3;background:#ffffff38;width:7px;position:absolute;top:0;bottom:0}.video-clip .edge.start{border-radius:5px 0 0 5px;left:0}.video-clip .edge.end{border-radius:0 5px 5px 0;right:0}.video-clip .edge:hover{background:#ffffff80}.cut-btn{white-space:nowrap;height:30px;margin-left:-6px;padding:0 10px;font-size:14px}.cut-btn .cut-label{margin-left:4px;font-size:12px}.cut-btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.cut-btn:disabled{opacity:.5}.sel-btn{margin-left:0}.tl-content.selecting,.tl-content.selecting .tl-track,.tl-content.selecting .new-track-strip{cursor:crosshair}.marquee{z-index:9;pointer-events:none;border:1px solid var(--accent);background:color-mix(in srgb, var(--accent) 18%, transparent);position:absolute}.tl-track.video.cutting,.tl-track.video.cutting .video-clip,.tl-track.video.cutting .video-clip .edge{cursor:crosshair}.tl-track.video.cutting{box-shadow:inset 0 0 0 1px var(--accent)}.cut-guide{border-left:2px solid var(--accent);pointer-events:none;z-index:6;width:0;position:absolute;top:0;bottom:0}.cut-guide span{white-space:nowrap;background:var(--accent);color:var(--on-accent);font-variant-numeric:tabular-nums;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:600;position:absolute;top:2px;left:6px}.cut-guide.no{border-left-color:var(--muted);border-left-style:dashed}.cut-guide.no span{background:var(--muted);color:var(--text);font-weight:400}.video-hint{z-index:7;color:var(--text);pointer-events:none;white-space:nowrap;background:#000000c7;border-radius:5px;padding:2px 8px;font-size:11px;position:absolute;top:7px;left:8px}.tl-track.lyrics.lane-0,.lyric-label.lane-0{--lane:143, 134, 240}.tl-track.lyrics.lane-1,.lyric-label.lane-1{--lane:93, 202, 165}.tl-track.lyrics.lane-2,.lyric-label.lane-2{--lane:244, 192, 209}.tl-track.lyrics.lane-3,.lyric-label.lane-3{--lane:250, 199, 117}.tl-track.lyrics{background:rgba(var(--lane), .13)}.tl-track.lyrics.drop-over{background:rgba(var(--lane), .22)}.lyric-label{background:rgba(var(--lane), .18);border-left:4px solid rgb(var(--lane));color:var(--text);padding-left:8px}.tl-track.sections{background:#ffffff08}.tl-track.effects{background:#fac7750d}.tl-track.wave{background:#ffffff05}.new-track-strip{border-bottom:1px dashed var(--line-strong)}.effect-label{padding:0 6px;font-size:10px}.tl-ruler-space{border-bottom:1px solid var(--line-strong);box-sizing:border-box}.tl-strip-space{border-bottom:1px dashed var(--line-strong);box-sizing:border-box}.image-list{flex-direction:column;gap:4px;margin:8px 0;padding:0;list-style:none;display:flex}.image-row{text-align:left;align-items:center;gap:8px;width:100%;padding:4px 8px;display:flex}.image-row.on{background:var(--accent-bg);border-color:var(--accent)}.image-row img{object-fit:contain;background:repeating-conic-gradient(#3a3a40 0% 25%,#2a2a2f 0% 50%) 50%/8px 8px;border-radius:3px;flex:none;width:36px;height:24px}.image-row .image-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.image-row small{color:var(--muted);font-variant-numeric:tabular-nums;flex:none}.row-buttons.wrap{flex-wrap:wrap;margin-top:6px}.image-controls .selected-text{word-break:break-all}.tl-track.images{background:#6ebedc12;position:relative}.image-block{color:#fff;cursor:grab;box-sizing:border-box;background:#4f86a3;border-radius:4px;align-items:center;gap:4px;padding:0 8px;font-size:11px;display:flex;position:absolute;overflow:hidden}.image-block:active{cursor:grabbing}.image-block.selected{outline-offset:1px;z-index:2;outline:2px solid #fff}.image-block img{object-fit:contain;pointer-events:none;border-radius:2px;flex:none;max-width:28px;height:18px}.image-label{white-space:nowrap;text-overflow:ellipsis;pointer-events:none;overflow:hidden}.image-badges{gap:3px;display:flex}.image-badges i{color:#fff;background:#4f86a3;border-radius:8px;padding:0 5px;font-size:10px;font-style:normal}.image-badges i.thumb{background:#b37fa0}.image-badges i.none{color:var(--muted);background:#55555c}