:root{color-scheme:dark;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:#101821;color:#eaf3fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.app{max-width:800px;margin:auto;padding:20px 16px 60px}header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:18px}h1{font-size:clamp(22px,5vw,27px);margin:0 0 4px;letter-spacing:.01em}header p{font-size:13px;color:#abc5d2;margin:0}.version{color:#92c6b9}button,input,label{font:inherit}button{cursor:pointer;border-radius:12px;border:1px solid #68848d;background:#29464a;color:#e8ffff;min-height:47px;padding:10px 15px;font-weight:700}button:disabled{opacity:.42;cursor:not-allowed}.ghost{background:#23363b}.primary{background:#b3eddd;color:#0e2530;border:1px solid #b3eddd}h2{margin:0 0 15px;font-size:19px}.panel{background:#1b2835;border:1px solid #526b7a;border-radius:18px;padding:17px;margin:12px 0}.hidden{display:none!important}.fileGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fileBox{background:#213d3e;border:2px solid #a5d9c9;border-radius:13px;padding:16px 11px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative;cursor:pointer;min-width:0}.fileBox input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}.fileBox strong{font-size:15px}.fileBox:focus-within{outline:3px solid #efcd73;outline-offset:1px}.fileBox small{color:#d6e7e7;display:block;overflow-wrap:anywhere;font-weight:400;font-size:12px}.pill{font-size:11px;background:#a8decb;color:#133133;border-radius:999px;padding:4px 9px;font-weight:800}.notice,.explain{color:#b8cfda;font-size:12px;line-height:1.6;margin:12px 0 0}.explain{background:#152431;border-radius:10px;padding:11px;margin:8px 0 17px}.headingRow,.rangeText,.waveLabel,.playMeta,.btnrow{display:flex;justify-content:space-between;align-items:center;gap:10px}.micro{color:#bed5dd;font-size:11px}.optionGroup{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 16px}.choice{flex:1;min-width:90px}.choice input,.mode input{position:absolute;opacity:0;width:1px;height:1px}.choice span,.mode span{display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid #6c8390;background:#15222e;padding:12px 6px;font-size:14px;min-height:44px;cursor:pointer;text-align:center;font-weight:700}.choice input:checked+span,.mode input:checked+span{background:#24474a;border:2px solid #a8dfcf;color:#fff}.choice input:focus-visible+span,.mode input:focus-visible+span{outline:3px solid #f6d47d}.wavewrap{background:#101c28;border:1px solid #526d78;border-radius:12px;padding:10px}.waveLabel{font-size:12px;color:#b8d4dd;margin:3px 0 4px}canvas{display:block;width:100%;height:94px;background:#0b1722;border-radius:8px;touch-action:manipulation}canvas+div{margin-top:10px}.rangeText{color:#dcecf6;font-size:12px;margin:10px 0 0}.range{width:100%;accent-color:#a8dfcf;margin:10px 0 14px;min-height:25px}.btnrow{justify-content:flex-start}.status{padding:11px 13px;border-left:4px solid #b5e8db;background:#1a333b;line-height:1.55;margin:12px 0 0;font-size:13px}.status.error{border-left-color:#e7a393;background:#3b2b29}.status.pending{border-left-color:#f1d394;background:#36342c}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.stats>div{background:#11202c;border:1px solid #4a6677;border-radius:10px;padding:10px}.stats .micro{display:block}.stats b{display:block;font-size:18px;margin-top:4px;font-variant-numeric:tabular-nums}.subhead{font-weight:800;font-size:13px;margin-top:10px}.modeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 16px}.mode span{font-size:13px;padding:12px 5px}.transport{display:grid;grid-template-columns:1fr;gap:9px}.switch{border:2px solid #a8dfcf;background:#243e40;color:#e3fffa}.switch.active{background:#46615d}.arrows{margin:0 5px;opacity:.7}.playMeta{font-size:12px;color:#c8dce3;margin:12px 0 7px}.progress{width:100%;height:6px;border-radius:999px;background:#0e1c28;overflow:hidden}.progress>div{height:100%;width:0;background:#a8dfcf}.learning{border-color:#78b3a7}.learning p{line-height:1.7;font-size:14px;margin:8px 0}.foot{padding:12px 6px;color:#bdcfda;font-size:12px;line-height:1.75}.foot summary{cursor:pointer;font-weight:700}.foot li{margin:6px 0}footer{text-align:center;color:#97aebb;font-size:11px;padding:20px}@media(max-width:390px){.app{padding:12px 10px 40px}header .ghost{padding:8px;min-height:38px;font-size:12px}.panel{padding:12px}.fileBox{padding:13px 7px}.fileBox strong{font-size:13px}.mode span{font-size:12px}}@media(max-width:340px){.fileGrid{grid-template-columns:1fr}.transport{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}

.choice input:disabled+span{opacity:.35;cursor:not-allowed;background:#111a22;border-style:dashed}

/* v0.1.2: touch-friendly waveform drag, split toggle and live seek */
.headingRow{flex-wrap:wrap}.headingRow h2{margin-bottom:6px}.waveLabel{flex-wrap:wrap}
canvas{touch-action:none;cursor:crosshair}
.waveHint,.seekHint{font-size:11px;color:#b7d1d7;line-height:1.5;margin:2px 0 10px}
.modeGrid .splitSwitch{width:100%;background:#15222e;border:1px solid #6c8390;font-size:13px;min-height:52px;line-height:1.45;padding:10px 8px;overflow-wrap:anywhere}
.modeGrid .splitSwitch[aria-pressed="true"]{background:#24474a;border:2px solid #a8dfcf;color:#fff}
.modeGrid .splitSwitch:focus-visible{outline:3px solid #f6d47d}
/* v0.1.8: stereo 4 independent L/R lanes, mono 2 lanes, audible-ear mapping. */
.seekWrap{position:relative;margin:4px 0 0;--seek-h:276px}
.seekWrap.twoLanes{--seek-h:164px}
.seekWrap.fourLanes{--seek-h:276px}
.seekWave{display:block;width:100%;height:var(--seek-h);background:#10202c;border:1px solid #3e6070;border-radius:12px;touch-action:none;pointer-events:none}
.seekWaveLabels{position:absolute;inset:0;pointer-events:none;color:#ecffff;font-weight:750;font-size:12px;line-height:17px;text-shadow:0 1px 3px #0a1720;display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:4px}
.twoLanes .seekWaveLabels{grid-template-rows:repeat(2,minmax(0,1fr))}
.seekWaveLabelRow{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:6px 8px;min-width:0}
.laneName,.earLabel{display:inline-block;padding:2px 6px;border:1px solid rgba(151,204,216,.25);border-radius:5px;background:rgba(9,25,36,.86);white-space:nowrap;line-height:17px}
.earLabel{background:#b5f4e1;color:#15323a;border-color:#b5f4e1;text-shadow:none;font-size:11px;font-weight:800}
.earRoutingSummary{margin:8px 0 0;color:#bde6dc;font-size:12px;line-height:1.5}
.seek{position:absolute;inset:0;display:block;appearance:none;-webkit-appearance:none;width:100%;height:var(--seek-h);margin:0;background:transparent;cursor:pointer;--pct:0%;touch-action:pan-y}
.seek::-webkit-slider-runnable-track{height:var(--seek-h);border-radius:12px;background:linear-gradient(to right,rgba(168,223,207,.095) 0%,rgba(168,223,207,.095) var(--pct),transparent var(--pct),transparent 100%)}
.seek::-moz-range-track{height:var(--seek-h);border-radius:12px;background:transparent}
.seek::-moz-range-progress{height:var(--seek-h);border-radius:12px;background:rgba(168,223,207,.095)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:calc(var(--seek-h) - 4px);margin-top:2px;background:linear-gradient(90deg,transparent 0%,transparent 2px,#b5f4e1 2px,#b5f4e1 6px,transparent 6px);border:0;border-radius:0;filter:drop-shadow(0 0 2px #0b1722)}
.seek::-moz-range-thumb{width:8px;height:calc(var(--seek-h) - 4px);background:#b5f4e1;border:0;border-radius:2px;box-shadow:0 0 0 1px #142432}
.seek:disabled{opacity:.43;cursor:not-allowed}
.seek:focus-visible{outline:3px solid #f6d47d;outline-offset:3px}
@media(max-width:390px){.modeGrid .splitSwitch{font-size:12px}.choice{min-width:70px}.headingRow h2{font-size:16px}}

/* v0.1.3: optional manual waveform offset controls */
.syncKind{margin-top:10px;border:1px solid #73b4a9;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700;background:#183a3c}
.syncKind.warning{border-color:#e5b676;background:#382f25;color:#ffdfa8}
.syncKind.manual{border-color:#a6b7cc;background:#263648}
.manualPanel{margin:11px 0 0;padding:12px;border:1px solid #5c7581;border-radius:12px;background:#122431}
.manualPanel summary{font-weight:700;cursor:pointer;font-size:14px}
.manualHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:15px 0 10px;flex-wrap:wrap}
.manualHead span{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.manualHead button{min-height:38px;font-size:12px;padding:6px 11px}
.manualButtons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}
.manualButtons button{padding:7px 3px;min-height:44px;font-size:12px}
#restoreAuto{font-size:12px;min-height:40px;margin:2px 0}
@media(max-width:390px){.manualButtons{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v0.1.4: two independent split-mode toggles and full-track warning */
.modeGrid .splitSwitch{font-size:clamp(11px,2.7vw,13px);padding:10px 5px;min-height:78px;line-height:1.55;overflow-wrap:anywhere}
.fullWarning{border-left:4px solid #e3b672;background:#3c3227;color:#ffe1b7;padding:11px 12px;border-radius:6px;font-size:12px;line-height:1.7;margin:10px 0 12px}
@media(max-width:390px){.modeGrid .splitSwitch{font-size:11px;min-height:85px}}

/* v0.1.5: A/B toggle is integrated into the two listening-mode buttons. */
.modeGrid .abModeSwitch{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;min-width:0;min-height:67px;padding:9px 5px;background:#15222e;border:1px solid #6c8390;line-height:1.35;overflow-wrap:anywhere}
.modeGrid .abModeSwitch strong{font-size:clamp(13px,3.4vw,16px)}
.modeGrid .abModeSwitch small{font-size:clamp(10px,2.65vw,12px);font-weight:500;color:#c0d9db}
.modeGrid .abModeSwitch.selected{background:#24474a;border:2px solid #a8dfcf;color:#fff}
.modeGrid .abModeSwitch:focus-visible{outline:3px solid #f6d47d;outline-offset:2px}
.modeHint{margin:-8px 0 14px;font-size:11px;line-height:1.55;color:#b7d1d7}
.transport #play{width:100%;min-height:62px;font-size:17px}

/* Embedded use inside the loudness app; standalone v0.1.8 is untouched. */
body.embedded{background:transparent}
body.embedded .app{max-width:none;padding:0 3px 16px}
body.embedded header,body.embedded #compareLoader,body.embedded .learning,body.embedded footer{display:none!important}
body.embedded .panel{margin:7px 0;padding:12px 9px}
body.embedded .embeddedFiles{font-size:12px;color:#bed5dd;overflow-wrap:anywhere;margin:8px 4px}
body.embedded .modeGrid .splitSwitch{font-size:11px}
body.embedded .headingRow h2{font-size:16px}

/* v0.2.0 loop control, no additional audio buffers */
.loopRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px;font-size:13px;color:#c8dce3}
.loopRow button{min-height:42px;padding:8px 16px;background:#1b303a;border:1px solid #718e97;color:#d8e9ed;font-size:13px}
.loopRow button[aria-pressed="true"]{background:#24474a;border:2px solid #a8dfcf;color:#fff}
.loopRow button:disabled{opacity:.5;cursor:not-allowed}

/* Integrated mode: save the existing completed WAV without re-encoding. */
.embeddedSave{display:none}
body.embedded .embeddedSave:not([hidden]){display:block;margin:10px 0 13px;padding:14px 10px;min-height:50px;border-radius:12px;background:#a8dfcf;color:#14262d;text-align:center;text-decoration:none;font-weight:800}
body.embedded .embeddedSave:focus-visible{outline:3px solid #f6d47d;outline-offset:2px}

/* v0.14.13: Give the main sync/loudness inspection action full width and a generous touch target. */
.verifyRow{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:12px 0 0}
.verifyRow #verify{display:block;width:100%;min-height:64px;padding:15px 18px;font-size:18px;font-weight:800;line-height:1.4;border-radius:13px}
.verifyRow #recheck:not([hidden]){align-self:stretch;min-height:46px}