:root{--bg:#071012;--panel:#0d181b;--panel2:#111f22;--line:#20363a;--text:#e8f2ef;--muted:#8ba39d;--accent:#67e6b1;--accent2:#35b884;--warn:#f2c15c;--danger:#ff6b72;--shadow:0 18px 50px rgba(0,0,0,.28)}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;font-family:Inter,"Noto Sans JP","Segoe UI",sans-serif;background:radial-gradient(circle at 15% 0%,#12312b 0,transparent 30rem),linear-gradient(180deg,#071012,#091316 65%,#071012);color:var(--text);min-height:100vh}
button,input{font:inherit}button{min-height:46px;border:1px solid #315158;background:#122327;color:var(--text);border-radius:10px;padding:.72rem 1rem;font-weight:800;letter-spacing:.06em;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.35;cursor:not-allowed}.primary{background:linear-gradient(135deg,#1b7c5d,#2aa878);border-color:#45d49c}.record{background:linear-gradient(135deg,#8e2632,#d04450);border-color:#f06770}.wide{width:100%}
.site-header{max-width:1100px;margin:auto;padding:34px 20px 16px;display:flex;gap:20px;justify-content:space-between;align-items:end}.brand h1{margin:.1rem 0;font-size:clamp(2rem,7vw,4.2rem);line-height:.95;letter-spacing:-.055em}.brand h1 span{color:var(--accent)}.eyebrow,.subtitle{margin:.25rem 0;color:var(--muted);font-size:.75rem;letter-spacing:.18em;font-weight:800}.status-pill,.micro-status,.data-state,.badge{border:1px solid var(--line);border-radius:999px;padding:.42rem .65rem;font-size:.68rem;letter-spacing:.08em;font-weight:900;white-space:nowrap}.status-pill[data-state=recording]{color:#fff;border-color:var(--danger);background:#5a1820}.status-pill[data-state=error]{color:#fff;border-color:var(--danger)}.status-pill[data-state=ready]{color:var(--accent)}
.shell{max-width:1100px;margin:auto;padding:8px 20px 40px}.panel{background:linear-gradient(180deg,rgba(17,31,34,.96),rgba(11,22,25,.96));border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0;box-shadow:var(--shadow)}.intro{border-left:4px solid var(--accent)}.intro p{margin:.25rem 0}.en{color:var(--muted);font-size:.88em}.section-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}.section-head>div{display:flex;align-items:center;gap:9px}.section-head h2{margin:0;font-size:1rem;letter-spacing:.1em}.kicker{display:grid;place-items:center;width:30px;height:30px;border:1px solid #2c4b4f;border-radius:8px;color:var(--accent);font-size:.7rem;font-weight:900}
.meter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.metric{background:#081215;border:1px solid #1d3337;border-radius:12px;padding:12px}.metric span{display:block;color:var(--muted);font-size:.66rem;letter-spacing:.12em;font-weight:800}.metric strong{display:block;margin-top:4px;font-size:clamp(1rem,4vw,1.55rem);font-variant-numeric:tabular-nums}.level-track,.progress{height:8px;background:#061013;border-radius:999px;overflow:hidden;margin:12px 0}.level-bar,.progress>div{height:100%;width:0;background:linear-gradient(90deg,#2eb47e,#73e7b4);transition:width .08s linear}.scope{position:relative;margin-top:12px;border:1px solid #1b3034;border-radius:12px;overflow:hidden;background:#050d0f}.scope-label{position:absolute;z-index:1;top:8px;left:10px;color:#6e9189;font-size:.62rem;letter-spacing:.14em;font-weight:900}.scope canvas{display:block;width:100%;height:110px}.warning-line{display:block;height:1.25rem;min-height:1.25rem;line-height:1.25rem;margin-top:8px;color:var(--warn);font-weight:900;font-size:.8rem;overflow:hidden;white-space:nowrap}
.permission-panel{border-color:#346a5c}.error-box{padding:12px;margin:10px 0;border:1px solid #77373d;background:#31171b;border-radius:10px;color:#ffd9db}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.work-grid .panel{margin:0}.timer{display:flex;align-items:baseline;gap:8px;margin:22px 0 8px}.timer strong{font-size:2.5rem;font-variant-numeric:tabular-nums}.timer span{color:var(--muted)}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.message{min-height:1.5em;margin:10px 0;color:var(--accent);font-weight:800}.facts,.tech{margin:12px 0 0}.facts div,.tech div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:8px 0}.facts dt,.tech dt{color:var(--muted);font-size:.72rem;letter-spacing:.08em}.facts dd,.tech dd{margin:0;font-weight:800}.disabled-section{opacity:.68}.tabs,.preset-grid{display:grid;gap:8px}.tabs{grid-template-columns:1fr 1fr;margin-bottom:10px}.preset-grid{grid-template-columns:1fr 1fr;margin-bottom:10px}.phase-note{color:var(--muted);font-size:.8rem}.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.cap{padding:10px;border:1px solid var(--line);border-radius:10px;background:#081215}.cap strong{display:block;font-size:.7rem}.cap span{color:var(--accent);font-weight:900}.cap.no span{color:var(--danger)}details{margin-top:12px}summary{cursor:pointer;color:var(--accent);font-weight:800}.info li{margin:.55rem 0}.info hr{border:0;border-top:1px solid var(--line);margin:18px 0}
footer{max-width:1100px;margin:auto;padding:20px;display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.78rem}a{color:var(--accent)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:20px;z-index:10}.modal[hidden]{display:none}.modal-card{width:min(480px,100%);background:#0f1d20;border:1px solid #365b60;border-radius:18px;padding:20px;box-shadow:0 30px 90px #000}.modal-card h2{margin-top:0}
@media(max-width:700px){.site-header{display:block}.status-pill{display:inline-block;margin-top:16px}.work-grid{grid-template-columns:1fr}.meter-grid{grid-template-columns:1fr 1fr}.cap-grid{grid-template-columns:1fr 1fr}footer{flex-direction:column}.shell{padding-inline:12px}.site-header{padding-inline:14px}.panel{padding:14px;border-radius:14px}}
@media(max-width:340px){.preset-grid{grid-template-columns:1fr}.meter-grid{gap:6px}.metric{padding:9px}.timer strong{font-size:2rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

[hidden]{display:none!important}

.meter-grid{grid-template-columns:repeat(5,1fr)}
.playback-timer strong{font-size:1.8rem}
@media(max-width:700px){.meter-grid{grid-template-columns:1fr 1fr}.meter-grid .metric:last-child{grid-column:1/-1}}


/* Phase 2 Rev.4: microphone state remains visible when permission panel is hidden. */
.mic-status-persistent{
  display:flex;
  align-items:center;
  min-height:44px;
  margin:10px 0;
}
.mic-status-persistent .micro-status{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  font-weight:700;
  letter-spacing:.04em;
}

.preset-grid button.selected{outline:2px solid currentColor;font-weight:800}

.applied-settings{margin:12px 0 16px}.applied-settings h3{margin:0 0 8px;font-size:.9rem}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.setting-chip{padding:8px;border:1px solid var(--line);border-radius:8px;min-width:0}
.setting-chip strong,.setting-chip span{display:block;overflow-wrap:anywhere}.setting-chip strong{font-size:.72rem;opacity:.72}.setting-chip span{font-weight:700}
.comparison-wrap{width:100%;overflow-x:auto}.comparison-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.comparison-table th,.comparison-table td{padding:9px 7px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.comparison-table th:first-child{text-align:left}.comparison-table thead th{font-size:.72rem;opacity:.75}
@media(max-width:599px){
 .settings-grid{grid-template-columns:1fr 1fr}
 .comparison-table{font-size:.76rem}
 .comparison-table th,.comparison-table td{padding:8px 5px}
}
@media(max-width:340px){.settings-grid{grid-template-columns:1fr}.comparison-table{font-size:.7rem}}

.manual-grid{display:grid;gap:10px;padding:10px 0}.manual-grid label{display:grid;gap:5px;font-size:.78rem;font-weight:700}
.manual-grid label>span{display:grid;grid-template-columns:minmax(0,1fr) 76px auto;gap:6px;align-items:center}
.manual-grid input[type=number],.manual-grid select{width:100%;box-sizing:border-box}
.processor details{border-top:1px solid var(--line);padding:7px 0}.processor details summary{cursor:pointer;font-weight:800}
.processor-tabs button.active{font-weight:900;outline:2px solid currentColor}
#bypassBtn.active{outline:2px solid currentColor;font-weight:900}
@media(min-width:700px){.manual-grid{grid-template-columns:1fr 1fr}}