:root{--ink:#181a25;--paper:#f2f0e8;--panel:#fffdf8;--line:#c9c5b7;--accent:#ef4d36;--teal:#16867d;--muted:#6d6b70}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Noto Sans Thai,sans-serif}.shell{width:min(1240px,calc(100% - 40px));margin:auto}.masthead{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.wordmark{font:700 27px Space Grotesk,sans-serif;letter-spacing:-1.8px;color:var(--ink);text-decoration:none;position:relative}.wordmark span{color:var(--accent)}.wordmark i{background:var(--teal);width:6px;height:6px;border-radius:50%;position:absolute;right:-10px;top:6px}.header-end{display:flex;align-items:center;gap:20px}.sync-state{display:flex;align-items:center;gap:7px;color:var(--muted);font:11px DM Mono,monospace}.sync-state b{width:8px;height:8px;border-radius:50%;background:#bbb6a8}.sync-state.ready b{background:var(--teal);box-shadow:0 0 0 4px #16867d22}.sync-state.warning b{background:var(--accent)}.language-picker select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--panel);padding:7px 10px;color:var(--ink);font:11px DM Mono,monospace}.link-panel{padding:48px 0 33px;border-bottom:2px solid var(--ink)}.link-kicker{font:11px DM Mono,monospace;letter-spacing:1.5px;color:var(--teal);margin:0 0 12px}.link-panel form{display:flex;align-items:center;gap:16px}.link-panel label{font:600 15px Space Grotesk,sans-serif;white-space:nowrap}.url-row{display:flex;flex:1;max-width:720px}.url-row input{flex:1;min-width:0;border:1px solid var(--line);border-right:0;background:var(--panel);padding:14px;outline:0;color:var(--ink)}.url-row input:focus{box-shadow:inset 0 0 0 2px var(--teal)}button{font:inherit;cursor:pointer}.url-row button,.transport-button.primary{border:0;background:var(--accent);color:#fff;padding:0 17px;font-weight:700;white-space:nowrap}.form-note{margin:0;color:var(--muted);font:10px DM Mono,monospace}.transport{min-height:81px;border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:8px}.transport-button{border:0;background:transparent;padding:11px 12px;color:var(--ink);font-size:13px;font-weight:700}.transport-button span+span{margin-left:7px}.transport-button:disabled{opacity:.32;cursor:not-allowed}.master-readout{margin-left:auto;text-align:right;display:grid;gap:2px}.master-readout span,.drift span,.control-label{font:10px DM Mono,monospace;letter-spacing:.8px;color:var(--muted)}.master-readout output{font:500 18px DM Mono,monospace}.desk{padding:34px 0 50px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.empty-state{grid-column:1/-1;min-height:210px;border:1px dashed var(--line);display:grid;place-items:center;align-content:center;gap:10px;color:var(--muted)}.empty-state span{font:28px DM Mono,monospace;color:var(--accent)}.empty-state p{margin:0;font-size:14px}.track{background:var(--panel);border:1px solid var(--line);box-shadow:5px 5px #d4d0c2}.track-bar{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:11px}.track-index{color:var(--accent);font:11px DM Mono,monospace}.master-choice{margin-left:auto;font:10px DM Mono,monospace;display:flex;gap:5px;align-items:center}.master-choice input{accent-color:var(--accent)}.remove-track{border:0;background:transparent;color:var(--muted);font-size:23px;line-height:1}.player-wrap{aspect-ratio:16/9;background:#11131a}.player-wrap,.player-wrap iframe,.player{width:100%;height:100%;border:0;display:block}.track-footer{padding:14px 15px 16px}.track-name{font:600 14px Space Grotesk,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:14px}.controls{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:end}.offset-group,.volume-group,.drift{display:grid;gap:5px}.offset-box{display:flex;align-items:center;border-bottom:1px solid var(--line)}.offset{width:57px;border:0;background:transparent;text-align:right;padding:2px 0;outline:0;font:12px DM Mono,monospace}.offset-box small{font:10px DM Mono,monospace;color:var(--muted)}.volume-range{accent-color:var(--teal);width:100%;min-width:70px}.volume-value,.drift output{font:11px DM Mono,monospace;text-align:right;color:var(--teal)}.offset-tools{display:flex}.offset-tools button{border:1px solid var(--line);background:transparent;padding:3px 7px;font:10px DM Mono,monospace}.offset-tools button+button{border-left:0}.offset-tools .capture{color:var(--teal);font-family:Noto Sans Thai,sans-serif;font-weight:700}.offset-tools button:hover{background:var(--ink);color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:780px){.shell{width:min(100% - 28px,600px)}.masthead{height:66px}.sync-state span{display:none}.header-end{gap:10px}.link-panel{padding:31px 0 24px}.link-panel form{display:block}.link-panel label{display:block;margin-bottom:9px}.form-note{margin-top:8px}.transport{flex-wrap:wrap;padding:9px 0}.master-readout{order:-1;width:100%;text-align:left}.desk{grid-template-columns:1fr;gap:20px;padding-top:25px}.controls{grid-template-columns:auto 1fr}.drift{grid-column:2;text-align:right}.volume-group{grid-column:1/-1}.volume-range{width:100%}}#playAll,#pauseAll{min-height:58px;padding:0 24px;font:700 16px Space Grotesk,Noto Sans Thai,sans-serif;letter-spacing:-.25px;transition:transform .16s ease,box-shadow .16s ease}#playAll{box-shadow:4px 4px #bf3928}#playAll:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:6px 6px #bf3928}#pauseAll{background:var(--panel);border:1px solid var(--ink);box-shadow:4px 4px #c9c5b7}#pauseAll:hover:not(:disabled){background:var(--ink);color:#fff;transform:translate(-1px,-1px)}#shareLink{border:1px solid var(--line);background:var(--panel);min-height:40px;margin-left:5px;color:var(--teal)}#shareLink:hover:not(:disabled){border-color:var(--teal);background:#e5f2ef}.transport-button.align{margin-left:12px}@media(max-width:780px){#playAll,#pauseAll{min-height:52px;padding:0 16px;font-size:14px}#shareLink{margin-left:0}.transport-button.align{margin-left:auto}}.masthead{height:92px;display:grid;grid-template-columns:auto minmax(290px,560px) auto;gap:28px}.nav-search{height:42px;display:flex;border:1px solid var(--line);background:var(--panel);transition:border-color .16s ease,box-shadow .16s ease}.nav-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px #16867d1f}.nav-search input{flex:1;min-width:0;border:0;background:transparent;padding:0 13px;outline:0;color:var(--ink);font:12px DM Mono,monospace}.nav-search input::placeholder{color:#8b887f}.nav-search button{width:46px;border:0;border-left:1px solid var(--line);background:var(--ink);color:#fff;font:24px/1 DM Mono,monospace;transition:background .16s ease}.nav-search button:hover{background:var(--accent)}.transport{border-top:2px solid var(--ink)}@media(max-width:780px){.masthead{height:auto;min-height:116px;padding:13px 0;grid-template-columns:1fr auto;gap:12px}.nav-search{grid-column:1/-1;grid-row:2;width:100%;height:39px}.header-end{gap:9px}.wordmark{font-size:24px}}.desk{align-items:start}.track{align-self:start}.player-wrap{height:auto;aspect-ratio:16/9}.player-wrap iframe,.player{height:100%}.site-info{border-top:1px solid var(--line);padding:20px 0 36px;color:var(--muted);max-width:760px}.site-info h1{margin:0 0 7px;color:var(--ink);font:600 15px Space Grotesk,Noto Sans Thai,sans-serif}.site-info p{margin:0;font-size:13px;line-height:1.7}.guide-footer{margin-inline:calc((100vw - min(1240px,calc(100vw - 40px)))/-2);padding:42px max(20px,calc((100vw - min(1240px,calc(100vw - 40px)))/2));background:var(--ink);color:#f5f1e8;display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.6fr);gap:34px}.guide-footer .wordmark{color:#f5f1e8}.footer-brand p{color:#aeb0bb;margin:11px 0 0;font-size:13px}.footer-kicker{color:#63c3bb;font:11px DM Mono,monospace;letter-spacing:1.3px;margin:0 0 14px}.guide-steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:0}.guide-steps li{display:grid;gap:7px;font-size:13px;line-height:1.55;color:#e2e0da}.guide-steps b{color:var(--accent);font:11px DM Mono,monospace}.footer-note{border-top:1px solid #454651;margin:22px 0 0;padding-top:12px;color:#aeb0bb;font-size:11px}.copyright{grid-column:1/-1;margin:4px 0 0;color:#777984;font:10px DM Mono,monospace}@media(max-width:780px){.guide-footer{margin-inline:calc((100vw - min(100% - 28px,600px))/-2);padding:33px 14px;grid-template-columns:1fr}.guide-steps ol{grid-template-columns:1fr}.copyright{grid-column:auto}}html[lang=ja] body,html[lang=ja] button,html[lang=ja] input,html[lang=ja] select,html[lang=ja] output,html[lang=ja] small,html[lang=ja] p,html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] span,html[lang=ja] label,html[lang=ja] li{font-family:Zen Kaku Gothic New,sans-serif!important}html[lang=ko] body,html[lang=ko] button,html[lang=ko] input,html[lang=ko] select,html[lang=ko] output,html[lang=ko] small,html[lang=ko] p,html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] span,html[lang=ko] label,html[lang=ko] li{font-family:Noto Sans KR,sans-serif!important}html[lang=zh-CN] body,html[lang=zh-CN] button,html[lang=zh-CN] input,html[lang=zh-CN] select,html[lang=zh-CN] output,html[lang=zh-CN] small,html[lang=zh-CN] p,html[lang=zh-CN] h1,html[lang=zh-CN] h2,html[lang=zh-CN] span,html[lang=zh-CN] label,html[lang=zh-CN] li{font-family:Noto Sans SC,sans-serif!important}html[lang=ja] .wordmark,html[lang=ja] .wordmark *,html[lang=ko] .wordmark,html[lang=ko] .wordmark *,html[lang=zh-CN] .wordmark,html[lang=zh-CN] .wordmark *{font-family:Space Grotesk,sans-serif!important}
