@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none;font-family:Space Grotesk,Noto Sans JP,system-ui,sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}::selection{background:var(--accent);color:var(--on-accent)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--text-2)}::-webkit-scrollbar-track{background:0 0}:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}.app{grid-template-columns:230px 1fr;min-height:100%;display:grid}.side{border-right:1px solid var(--line);padding:var(--sp-5) var(--sp-4);flex-direction:column;gap:2px;height:100vh;display:flex;position:sticky;top:0;overflow-y:auto}.brand{align-items:center;gap:var(--sp-2);letter-spacing:-.04em;margin:0 var(--sp-3) var(--sp-6);font-size:21px;font-weight:700;display:flex}.brand b{color:var(--accent-text)}.eq{align-items:flex-end;gap:2px;height:16px;display:inline-flex}.eq i{background:var(--accent-text);border-radius:2px;width:3px;animation:1s ease-in-out infinite eq}.eq i:first-child{height:60%}.eq i:nth-child(2){height:100%;animation-delay:.2s}.eq i:nth-child(3){height:40%;animation-delay:.4s}@keyframes eq{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}.eq.paused i{animation-play-state:paused}.nav{align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--radius-sm);color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;font-size:13.5px;font-weight:500;text-decoration:none;transition:color .15s;display:flex}.nav:hover{color:var(--text)}.nav.on{color:var(--on-accent);background:var(--accent);font-weight:700}.side-label{letter-spacing:.2em;color:var(--text-2);margin:var(--sp-5) var(--sp-3) var(--sp-2);text-transform:uppercase;font-size:10px}.storage{padding-top:var(--sp-4);margin-top:auto}.storage-bar{background:var(--line);border-radius:99px;height:4px;overflow:hidden}.storage-bar i{background:var(--accent-text);border-radius:99px;height:100%;display:block}.storage-text{color:var(--text-2);margin-top:var(--sp-2);font-variant-numeric:tabular-nums;font-size:11px}.main{padding:var(--sp-5) var(--sp-6) 150px;min-width:0}.page-head{justify-content:space-between;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6);display:flex}.search{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);max-width:400px;padding:var(--sp-3) var(--sp-4);color:var(--text);flex:1;font-size:14px}.search::placeholder{color:var(--text-2)}.search:focus{border-color:var(--accent-border);outline:none}.h1{letter-spacing:-.05em;text-transform:uppercase;margin-bottom:var(--sp-1);font-size:clamp(32px,6vw,56px);font-weight:700;line-height:.95}.h1 .outline{-webkit-text-stroke:1.5px var(--accent-text);color:#0000}.sub{color:var(--text-2);margin-bottom:var(--sp-6);font-variant-numeric:tabular-nums;font-size:14px}.h2{letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);margin:var(--sp-6) 0 var(--sp-4);align-items:center;gap:var(--sp-3);font-size:13px;font-weight:700;display:flex}.h2:after{content:"";background:var(--line);flex:1;height:1px}.btn{background:var(--accent);color:var(--on-accent);letter-spacing:.08em;text-transform:uppercase;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-sm);font-size:13px;font-weight:700;transition:background .15s}.btn:hover{background:var(--accent-hover)}.btn:active{background:var(--accent-press)}.btn.outline{color:var(--text);border:1px solid var(--line);background:0 0}.btn.outline:hover{border-color:var(--accent-border);color:var(--accent-text)}.btn:disabled{opacity:.45;cursor:not-allowed}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--sp-5)}.tag{letter-spacing:.14em;padding:4px var(--sp-2);border:1px solid var(--line);color:var(--text-2);text-transform:uppercase;border-radius:var(--radius-sm);white-space:nowrap;font-size:9px;font-weight:700}.tag.accent{border-color:var(--accent-border);color:var(--accent-text)}.track{gap:var(--sp-3);padding:var(--sp-3) var(--sp-1);border-bottom:1px solid var(--line);cursor:pointer;text-align:left;grid-template-columns:26px 40px 1fr auto auto 30px;align-items:center;width:100%;display:grid}.track-main{flex-direction:column;min-width:0;display:flex}.track-main>span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-del{color:var(--text-2);opacity:0;font-size:13px;transition:opacity .15s}.track:hover .track-del,.track-del:focus-visible{opacity:1}.track-del:hover{color:#ff6b6b}.track:hover{background:var(--panel)}.track.playing .track-title{color:var(--accent-text)}.track-no{color:var(--text-2);font-variant-numeric:tabular-nums;font-size:12px}.track-art{border-radius:var(--radius-sm);background:var(--panel-2);object-fit:cover;place-items:center;width:40px;height:40px;font-size:16px;display:grid}.track-title{font-size:14px;font-weight:600}.track-artist{color:var(--text-2);margin-top:2px;font-size:12px}.track-len{color:var(--text-2);font-variant-numeric:tabular-nums;font-size:12px}.empty{color:var(--text-2);text-align:center;padding:var(--sp-6);border:1px dashed var(--line);border-radius:var(--radius-md);font-size:14px}.tabbar{display:none}@media (width<=880px){.app{grid-template-columns:1fr}.side{display:none}.main{padding:var(--sp-5) var(--sp-4) 200px}.track{grid-template-columns:40px 1fr auto 30px}.track-no,.track .tag{display:none}.track-del{opacity:1}.tabbar{z-index:11;background:var(--panel);border-top:1px solid var(--line);padding:9px 6px calc(9px + env(safe-area-inset-bottom));display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar a{color:var(--text-2);letter-spacing:.08em;text-transform:uppercase;flex-direction:column;flex:1;align-items:center;gap:3px;font-size:9px;font-weight:700;text-decoration:none;display:flex}.tabbar a.on{color:var(--accent-text)}.tabbar .i{font-size:18px}}.player{z-index:10;background:color-mix(in srgb, var(--panel) 92%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--line);position:fixed;bottom:0;left:0;right:0}.progress{background:var(--line);cursor:pointer;height:4px;position:relative}.progress i{background:var(--accent-text);box-shadow:0 0 10px var(--accent-glow);position:absolute;top:0;bottom:0;left:0}.progress:hover{height:6px}.player-body{align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);grid-template-columns:1fr auto 1fr;display:grid}.player-now{gap:var(--sp-3);align-items:center;min-width:0;display:flex}.player-art{border-radius:var(--radius-sm);background:var(--panel-2);object-fit:cover;flex:none;place-items:center;width:46px;height:46px;font-size:18px;display:grid}.player-meta{min-width:0}.player-title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.player-artist{color:var(--text-2);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.player-ctrl{align-items:center;gap:var(--sp-5);display:flex}.ctrl-sm{color:var(--text-2);padding:2px 6px;font-size:15px;transition:color .15s,opacity .15s;position:relative}.ctrl-sm:hover{color:var(--text)}.ctrl-sm.on{color:var(--accent-text)}.ctrl-icon{opacity:.45;filter:grayscale();display:inline-block}.ctrl-sm.on .ctrl-icon{opacity:1;filter:none}.ctrl-badge{border-radius:var(--radius-sm);background:var(--accent);min-width:14px;color:var(--on-accent);text-align:center;letter-spacing:0;padding:0 3px;font-size:9px;font-weight:700;line-height:14px;position:absolute;top:-3px;right:-2px}.ctrl-play{background:var(--accent);width:42px;height:42px;color:var(--on-accent);border-radius:var(--radius-sm);flex:none;place-items:center;font-size:15px;display:grid}.ctrl-play:hover{background:var(--accent-hover)}.player-right{justify-content:flex-end;align-items:center;gap:var(--sp-4);display:flex}.player-time{color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px}.slider.volume{flex:none;width:90px}.player-error{padding:var(--sp-2) var(--sp-5);color:#ff6b6b;border-top:1px solid var(--line);font-size:12px}.dropzone{border:1px dashed var(--line);border-radius:var(--radius-md);padding:var(--sp-6);text-align:center;transition:border-color .15s,background .15s}.dropzone.on{border-color:var(--accent-text);background:var(--accent-soft)}.dropzone-title{font-size:14px;font-weight:600}.dropzone-note{color:var(--text-2);margin-top:var(--sp-2);font-size:12px}.import-failed{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--panel);color:var(--text-2);border-left:2px solid #ff6b6b;font-size:13px}.import-failed ul{margin:var(--sp-2) 0 0 var(--sp-4)}.resume{align-items:center;gap:var(--sp-4);text-align:left;width:100%;padding:var(--sp-3) var(--sp-4);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);transition:border-color .15s;display:flex}.resume:hover{border-color:var(--accent-border)}.resume-art{border-radius:var(--radius-sm);background:var(--panel-2);object-fit:cover;flex:none;place-items:center;width:56px;height:56px;font-size:22px;display:grid}.resume-meta{flex-direction:column;flex:1;min-width:0;display:flex}.resume-title{text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;overflow:hidden}.resume-artist{color:var(--text-2);margin-top:2px;font-size:12px}.resume-play{background:var(--accent);width:40px;height:40px;color:var(--on-accent);border-radius:var(--radius-sm);flex:none;place-items:center;font-size:14px;display:grid}.pl-grid{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px;display:grid}.pl-card{background:var(--panel);padding:var(--sp-4);cursor:pointer;transition:background .15s;position:relative}.pl-card:hover{background:var(--panel-2)}.pl-cover{aspect-ratio:1;margin-bottom:var(--sp-3);background:var(--panel-2);color:var(--accent-text);border-radius:var(--radius-sm);place-items:center;font-size:32px;display:grid}.pl-name{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600;overflow:hidden}.pl-count{color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;margin-top:3px;font-size:11px}.pl-del{top:var(--sp-2);right:var(--sp-2);color:var(--text-2);opacity:0;font-size:12px;transition:opacity .15s;position:absolute}.pl-card:hover .pl-del,.pl-del:focus-visible{opacity:1}.pl-del:hover{color:#ff6b6b}.track-add{color:var(--accent-text);font-size:18px;font-weight:700}.pl-confirm{background:var(--panel);padding:var(--sp-3);justify-content:center;gap:var(--sp-2);cursor:default;border:1px solid #ff6b6b;flex-direction:column;display:flex;position:absolute;inset:0}.pl-confirm-title{font-size:13px;font-weight:700}.pl-confirm-note{color:var(--text-2);font-size:11px;line-height:1.4}.pl-confirm-btns{gap:var(--sp-2);margin-top:var(--sp-1);display:flex}.pl-confirm-btns .btn{padding:var(--sp-2);letter-spacing:.04em;flex:1;font-size:11px}.btn.danger{color:#1a0000;background:#ff6b6b}.btn.danger:hover{background:#ff8585}.title-input{letter-spacing:-.04em;text-transform:uppercase;width:100%;padding:0 0 var(--sp-2);margin-bottom:var(--sp-1);background:0 0;border:none;border-bottom:1px solid #0000;font-size:clamp(28px,5vw,44px);font-weight:700}.title-input:hover{border-bottom-color:var(--line)}.title-input:focus{border-bottom-color:var(--accent-text);outline:none}@media (width<=880px){.pl-del,.track-add{opacity:1}.player{bottom:calc(58px + env(safe-area-inset-bottom))}.player-body{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2);grid-template-columns:1fr auto}.player-right{display:none}.player-ctrl{gap:var(--sp-3)}.ctrl-play{width:38px;height:38px}.player-ctrl .ctrl-sm:first-child,.player-ctrl .ctrl-sm:last-child{display:none}}.wave-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);touch-action:none;-webkit-user-select:none;user-select:none;height:160px;position:relative;overflow:hidden}.wave-canvas{cursor:pointer;display:block}.wave-cut{background:color-mix(in srgb, var(--bg) 72%, transparent);pointer-events:none;position:absolute;top:0;bottom:0}.wave-handle{background:var(--accent-text);cursor:ew-resize;box-sizing:content-box;touch-action:none;background-clip:content-box;width:2px;margin-left:-11px;padding:0 11px;position:absolute;top:0;bottom:0}.wave-handle.on,.wave-handle:hover{box-shadow:0 0 12px var(--accent-glow)}.wave-handle-grip{border-radius:var(--radius-sm);background:var(--accent-text);width:12px;height:34px;position:absolute;top:50%;left:50%;translate:-50% -50%}.wave-handle-grip:after{content:"";background:var(--bg);width:2px;height:14px;margin:auto;position:absolute;inset:0}.trim-head{align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);display:flex}.trim-times{gap:var(--sp-5);margin-top:var(--sp-3);color:var(--text-2);font-variant-numeric:tabular-nums;flex-wrap:wrap;font-size:13px;display:flex}.trim-times b{color:var(--text);font-weight:600}.trim-times em{color:var(--accent-text);font-style:normal}@media (width<=880px){.wave-wrap{height:130px}.trim-times{gap:var(--sp-3);font-size:12px}}.opt-grid{gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));display:grid}.opt{text-align:left;padding:var(--sp-3) var(--sp-4);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);flex-direction:column;align-items:flex-start;gap:4px;transition:border-color .15s;display:flex}.opt:hover{border-color:var(--accent-border)}.opt.on{border-color:var(--accent-text);background:var(--accent-soft)}.opt-label{letter-spacing:.06em;text-transform:uppercase;font-size:13px;font-weight:700}.opt.on .opt-label{color:var(--accent-text)}.opt-note{color:var(--text-2);font-size:11px}.swatches{gap:var(--sp-2);flex-wrap:wrap;display:flex}.swatch{border-radius:var(--radius-sm);border:2px solid #0000;width:40px;height:40px;transition:transform .12s;box-shadow:inset 0 0 0 1px #80808040}.swatch:hover{transform:scale(1.08)}.swatch.on{border-color:var(--text);box-shadow:0 0 0 3px var(--accent-soft)}.hex-row{align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap;display:flex}.color-input{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);cursor:pointer;width:46px;height:42px;padding:0}.color-input::-webkit-color-swatch-wrapper{padding:4px}.color-input::-webkit-color-swatch{border:none;border-radius:3px}.diag{gap:var(--sp-3);flex-direction:column;display:flex}.diag-row{align-items:center;gap:var(--sp-3);flex-wrap:wrap;display:flex}.diag-key{color:var(--text-2);min-width:140px;font-size:12px}.diag-chip{padding:6px var(--sp-3);border-radius:var(--radius-sm);font-size:12px;font-weight:700}.diag-val{color:var(--text-2);font-variant-numeric:tabular-nums;font-size:12px}.diag-val .ok{color:var(--accent-text);font-weight:700}.diag-val .warn{color:#ff6b6b;font-weight:700}.diag-val .adj{color:var(--text-2);font-style:italic}.diag-note{color:var(--text-2);border-left:2px solid var(--accent-border);padding-left:var(--sp-3);font-size:12px;line-height:1.6}.slider-row{align-items:center;gap:var(--sp-3);max-width:420px;display:flex}.slider-label{color:var(--text-2);text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;font-size:11px}.slider{appearance:none;background:var(--line);border-radius:99px;flex:1;height:4px}.slider::-webkit-slider-thumb{appearance:none;background:var(--accent-text);cursor:pointer;width:18px;height:18px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%}.slider::-moz-range-thumb{background:var(--accent-text);cursor:pointer;border:none;border-radius:50%;width:18px;height:18px}.sync-form{gap:var(--sp-3);flex-direction:column;max-width:520px;display:flex}.sync-label{gap:var(--sp-2);color:var(--text-2);flex-direction:column;font-size:12px;display:flex}.sync-label .search{max-width:100%}.sync-msg{padding:var(--sp-2) var(--sp-3);background:var(--panel);border-left:2px solid;font-size:13px}.sync-msg.ok{border-color:var(--accent-text);color:var(--text)}.sync-msg.ng{color:#ff8585;border-color:#ff6b6b}.sync-status{gap:var(--sp-4);flex-direction:column;display:flex}.sync-lines{gap:var(--sp-2);color:var(--text-2);flex-direction:column;font-size:13px;display:flex}.sync-lines b{color:var(--text)}.auto-toggle{align-items:flex-start;gap:var(--sp-3);cursor:pointer;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);font-size:13px;display:flex}.auto-toggle input{width:16px;height:16px;accent-color:var(--accent);flex:none;margin-top:2px}.auto-toggle em{color:var(--text-2);margin-top:4px;font-size:11px;font-style:normal;line-height:1.5;display:block}.track.no-audio{opacity:.55}.tag.missing{color:#ff8585;border-color:#ff6b6b}.preview-wave{height:56px;margin-bottom:var(--sp-4);align-items:center;gap:3px;display:flex}.preview-wave i{background:var(--line);border-radius:2px;flex:1}.preview-wave i.p{background:var(--accent-text)}.preview-actions{align-items:center;gap:var(--sp-2);flex-wrap:wrap;display:flex}