*{box-sizing:border-box}html{background:#14241e}body{margin:0;background:linear-gradient(155deg,#162e24,#0d1b17);color:#f3f0e7;font-family:system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.shell{max-width:570px;margin:auto;padding:32px 20px 45px}header{text-align:center;margin-bottom:25px}.eyebrow{letter-spacing:.22em;font-size:11px;color:#b9cbb8}h1{font-size:48px;margin:4px 0 0;letter-spacing:-.04em}h1 span{color:#a5d3a8}.subtitle{margin:0;color:#a5b8a9;font-size:13px}.settings{background:#22392e;border:1px solid #365142;border-radius:17px;padding:16px;display:grid;gap:10px;margin-bottom:16px}.settings label{font-size:13px;color:#d0dfd0;display:flex;justify-content:space-between}.settings select{width:100%;background:#12271e;color:white;border:1px solid #50705a;border-radius:9px;padding:11px;font-size:15px}.settings input{accent-color:#a5d3a8;width:100%}.stage{border-radius:22px;background:#274333;border:1px solid #48634d;padding:30px 20px;text-align:center;min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.count{color:#bbd5bd;font-size:12px;letter-spacing:.12em;text-transform:uppercase}.technique{font-weight:750;font-size:clamp(25px,6vw,36px);line-height:1.22;overflow-wrap:break-word}.hint{color:#bed0c0;font-size:13px}.progress{width:100%;height:7px;background:#172d20;border-radius:20px;overflow:hidden;margin-top:8px}.progress>div{height:100%;width:0;background:#a6d5ab;transition:width .3s}.status{display:flex;justify-content:center;align-items:center;gap:9px;min-height:55px;color:#cbdacb;font-size:14px;text-align:center}.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}.dot.on{background:#75e3a1;box-shadow:0 0 12px #75e3a1}.dot.off{background:#a6a6a6}.dot.warn{background:#e9bc67}.actions{display:grid;gap:10px}button{border-radius:12px;min-height:54px;font-size:16px;font-weight:650;border:1px solid #607c65;color:#f3f4ed;background:#304c39;cursor:pointer;padding:10px}button:disabled{opacity:.35;cursor:not-allowed}.primary{background:#a5d3a8;color:#102318;border:0;font-size:18px;min-height:64px}.buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.buttons button{font-size:14px;padding:7px}.stop{background:transparent;color:#f3b7ad;border-color:#79574e}.commands{text-align:center;color:#c4d0c3;font-size:13px;line-height:1.8;margin:22px 0}details{font-size:13px;color:#b5c7b7;line-height:1.6;border-top:1px solid #385044;padding-top:14px}summary{cursor:pointer;color:#e3eee2}footer{text-align:center;font-size:11px;color:#82998a;margin-top:30px}@media(max-width:370px){.shell{padding:20px 12px}.buttons button{font-size:12px}}
.voice-note{font-size:12px;color:#bbd1bd;line-height:1.5}.settings select:focus-visible{outline:2px solid #a5d3a8}

.test-voice{width:100%;padding:12px;margin:8px 0 14px;border:1px solid #6c9d81;border-radius:10px;background:#294c3b;color:#fff;font-weight:600}

/* V8: one-screen responsive wood-background practice layout */
html,body{height:100%;min-height:100%;overflow:hidden}
body{background:linear-gradient(90deg,rgba(10,22,16,.70),rgba(12,27,19,.76)),url("wood-bg.jpg") center center / cover no-repeat fixed}
.shell{height:100dvh;max-height:100dvh;overflow:hidden;display:flex;flex-direction:column;gap:clamp(5px,1.1dvh,12px);padding:clamp(8px,1.5dvh,16px) 14px max(8px,env(safe-area-inset-bottom));max-width:620px}
header{margin:0;flex-shrink:0}h1{font-size:clamp(26px,5dvh,43px);margin:0}.eyebrow{font-size:10px}.subtitle{font-size:11px}
.settings{padding:clamp(8px,1.3dvh,13px);gap:clamp(3px,.7dvh,8px);margin:0;flex-shrink:0;background:rgba(21,44,31,.83)}
.settings label{font-size:clamp(10px,1.6dvh,13px)}.settings select{padding:clamp(5px,.8dvh,10px);font-size:14px}.settings input{margin:0;height:15px}
.stage{flex:1 1 auto;min-height:0;gap:clamp(6px,1.5dvh,15px);padding:clamp(10px,2dvh,22px) 12px;background:rgba(27,57,38,.86)}
.technique{font-size:clamp(19px,3.9dvh,33px)}.count{font-size:11px}.hint{font-size:12px}.progress{margin-top:0}
.status{min-height:22px;font-size:12px;flex-shrink:0}.actions{gap:clamp(4px,.7dvh,8px);flex-shrink:0}button{min-height:clamp(34px,5.5dvh,48px);padding:5px;font-size:14px}.primary{min-height:clamp(39px,6dvh,54px);font-size:16px}.buttons button{font-size:13px}.commands{margin:0;font-size:11px;line-height:1.3;flex-shrink:0}
details,footer{display:none}
@media(max-height:650px){.shell{gap:4px;padding-top:5px}.eyebrow,.subtitle{display:none}h1{font-size:26px}.settings{gap:3px;padding:7px}.settings label{font-size:10px}.settings select{padding:4px}.stage{gap:4px;padding:7px}.hint{display:none}.actions{gap:4px}.commands{font-size:10px}}

/* V10 · Ibuki No Ho inspired warm timber presentation */
:root{color-scheme:dark}
html,body{background:#442b19}
body{background:linear-gradient(rgba(79,42,15,.13),rgba(42,24,11,.23)),url("wood-bg.jpg") center center / cover no-repeat fixed;color:#fff8eb}
.topbar{height:48px;min-height:48px;position:relative;display:flex;align-items:center;justify-content:center;background:rgba(62,34,17,.92);box-shadow:0 2px 10px #2614064d;color:#f9eadd;font-size:20px;font-weight:450}
.topbar-title{white-space:nowrap}
.app-version{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;color:#dcc8b3}
.shell{height:calc(100dvh - 48px);max-height:calc(100dvh - 48px);padding:clamp(7px,1.3dvh,14px) 10px max(8px,env(safe-area-inset-bottom));gap:clamp(5px,1dvh,10px);max-width:620px}
header{display:flex;align-items:center;justify-content:center;gap:10px;min-height:28px}
header h1{font-size:clamp(22px,3.5dvh,31px);font-weight:600;color:#fff7e8;letter-spacing:-.02em}
header h1 span{color:#f3d3a6}
.eyebrow{letter-spacing:.1em;color:#f7e3c9;font-size:10px}
.subtitle{display:none}
.settings{border-radius:7px;border:1px solid #e8cfab7d;background:rgba(77,43,23,.82);box-shadow:0 2px 10px #24110324;padding:clamp(8px,1.3dvh,12px);gap:clamp(4px,.7dvh,7px)}
.settings label{color:#f6e6d1;font-size:12px}
.settings select{border:1px solid #e7c9a07d;background:rgba(141,100,67,.55);border-radius:5px;color:#fff9f0;font-size:14px;padding:clamp(6px,1dvh,10px)}
.settings input{accent-color:#e7c39b}
.stage{border-radius:8px;border:1px solid #f3d4a66b;background:rgba(75,41,20,.78);box-shadow:0 4px 15px #28110238;gap:clamp(8px,1.6dvh,16px)}
.count{color:#f1d7b7}
.technique{color:#fff7e9;text-shadow:0 2px 3px #2614076b;font-weight:650}
.hint{color:#f2d9bc}
.progress{background:#402713}
.progress>div{background:#e9c495}
.status{color:#fff2e1}
.dot.on{background:#bce5a4;box-shadow:0 0 9px #a8d18a}
button{border-radius:6px;background:rgba(130,91,62,.82);border:1px solid #ead0ae9e;color:#fff7ec;font-weight:550;box-shadow:0 2px 5px #2713062b}
.primary{background:rgba(153,112,80,.91);color:#fff7eb;border:1px solid #f2d8b4;font-weight:650}
.stop{background:rgba(81,46,30,.78);border-color:#d8b5a1;color:#f8dfd2}
.commands{color:#f7e7d4;text-shadow:0 1px 3px #321806}
@media(max-height:650px){
 .topbar{height:40px;min-height:40px;font-size:18px}
 .shell{height:calc(100dvh - 40px);max-height:calc(100dvh - 40px)}
 header{min-height:20px}
 header h1{font-size:23px}
 .eyebrow{display:block;font-size:9px}
 .settings{padding:6px}
 .settings label{font-size:10px}
}
@media(max-width:370px){.topbar{font-size:18px}.app-version{right:9px;font-size:11px}.shell{padding-left:8px;padding-right:8px}}

/* BETA.11: one app title, in the top bar only */
header{min-height:18px}

/* BETA.12: compact, collapsible iOS diagnostic output */
.diagnostics{margin:0;padding:4px 8px;border:1px solid #e8cfab70;border-radius:6px;background:#452914a8;font-size:11px;color:#fff0df;line-height:1.25;max-height:23px;overflow:hidden}
.diagnostics[open]{max-height:155px;overflow:auto}
.diagnostics summary{font-size:11px;cursor:pointer}
#diagState{margin:5px 0;font-weight:650}
#diagLog{font:10px/1.3 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:65px;overflow:auto}
#copyDiag{min-height:24px;padding:2px 8px;font-size:11px;margin:4px 0}