:root{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#18344b;background:#f5f8fa;font-synthesis:none;line-height:1.55;font-size:20px;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:700;cursor:pointer;min-height:64px;border:1.5px solid #a8bdcd;border-radius:16px;background:white;color:#18344b;padding:14px 18px;touch-action:manipulation}button:hover{background:#edf4f9}button:disabled{color:#71818d;border-color:#d5dfe6;background:#f3f5f7;cursor:default}button:focus-visible,a:focus-visible{outline:4px solid #337cb0;outline-offset:4px}h1:focus{outline:none}a{color:inherit}h1,p{margin:0}h1{font-size:34px;line-height:1.35;letter-spacing:-1.2px;word-break:keep-all;overflow-wrap:break-word}button{word-break:keep-all}.site-header{max-width:640px;margin:auto;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e0e9ef;font-size:20px;color:#526a7b}.clinic-name{font-size:25px;font-weight:800;letter-spacing:-1px;color:#18344b}main{max-width:640px;min-height:calc(100svh - 84px);margin:auto;background:#fff;padding:28px 24px 30px}.eyebrow{display:block;color:#46677f;font-size:20px;margin-bottom:12px}.page-intro{margin-bottom:24px}.poster-button{display:block;width:100%;padding:0;border:1px solid #d8e2e9;border-radius:8px;overflow:hidden;line-height:0;background:white;box-shadow:0 5px 22px #18344b0b}.poster{display:block;width:100%;height:auto}.primary{background:#163957;color:#fff;border-color:#163957}.primary:hover{background:#224e70}.start-button{width:100%;margin-top:20px;min-height:84px;font-size:clamp(22px,6.1vw,28px);padding:18px 8px;box-shadow:0 5px 14px #16395716}.help{color:#50677a;text-align:center;font-size:21px;margin:18px 0 6px}.text-button{display:block;margin:12px auto 0;border:0;background:transparent;font-size:20px;text-decoration:underline;text-underline-offset:5px}.contact{border-top:1px solid #dce5ec;margin-top:30px;padding-top:24px;text-align:center;display:flex;flex-direction:column;gap:8px}.contact>span{font-size:23px;font-weight:700}.contact a{font-size:29px;font-weight:750;text-decoration:none;min-height:58px;display:flex;align-items:center;justify-content:center;gap:14px}.contact a span{font-size:25px;color:#557d9a}.progress-heading{display:flex;align-items:center;justify-content:space-between;font-size:22px}.progress-heading strong{font-size:34px;line-height:1.2}.progress-heading strong span{color:#526b7d;font-size:27px}.dots{display:flex;gap:12px;margin:18px 0 30px}.dot{height:12px;width:12px;border:2px solid #aabfcc;border-radius:50%}.dot.current{background:#163957;border-color:#163957;width:34px;border-radius:10px}.dot.past{background:#91b7d2;border-color:#91b7d2}.step-number{width:64px;height:64px;border-radius:20px;background:#e9f2f9;color:#163957;display:grid;place-items:center;font-size:39px;font-weight:800;margin-bottom:18px}.instruction h1{font-size:32px}.instruction-text{list-style:none;margin:24px 0 26px;padding:0;font-size:25px;line-height:1.65;letter-spacing:-.55px;word-break:keep-all;overflow-wrap:break-word}.instruction-text li{position:relative;padding-left:20px;margin-bottom:16px}.instruction-text li:before{content:'';position:absolute;top:.72em;left:0;width:6px;height:6px;background:#618baa;border-radius:50%}.note{font-size:22px;padding:18px;border-radius:12px;background:#f0f5f9;margin:16px 0;word-break:keep-all}.step-illustration{display:block;max-width:100%;max-height:200px;object-fit:contain;margin:0 auto 20px}.audio-panel{padding:22px 0 0;border-top:1px solid #dde6ed}.audio-caption{display:flex;justify-content:space-between;gap:8px;font-size:20px;color:#49667d}#audio-time{font-variant-numeric:tabular-nums}progress{width:100%;height:8px;display:block;margin:14px 0 22px;appearance:none;border:0;border-radius:8px;overflow:hidden;background:#e5edf3}progress::-webkit-progress-bar{background:#e5edf3}progress::-webkit-progress-value{background:#497d9f}progress::-moz-progress-bar{background:#497d9f}.play-button{width:100%;font-size:27px;min-height:76px}.navigation{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.navigation button,.replay-button{font-size:23px}.replay-button{width:100%;margin-top:12px;background:#f0f6fa;border-color:#d7e4ee}.auto-note{text-align:center;font-size:20px;color:#526b7d;margin:18px 0 0;word-break:keep-all}.audio-message{font-size:21px;background:#fff7e7;color:#624616;padding:15px;margin-bottom:16px;border-radius:10px}.complete{text-align:center;padding-top:36px}.complete-mark{display:grid;place-items:center;width:84px;height:84px;background:#e7f2f8;border-radius:50%;color:#285d80;font-size:46px;margin:0 auto 28px}.complete h1{font-size:32px;margin-top:18px}.completion-actions{display:grid;gap:14px;margin-top:40px}.completion-actions button{min-height:80px;font-size:25px}.complete .contact{margin-top:44px}dialog{width:100vw;max-width:1100px;height:94svh;max-height:100svh;padding:0;border:0;border-radius:16px;color:#18344b}dialog::backdrop{background:#11283de0}.zoom-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#fff;border-bottom:1px solid #ccdce8;font-size:20px}.zoom-toolbar button{white-space:nowrap;min-height:58px}.zoom-scroll{height:calc(100% - 84px);overflow:auto;overscroll-behavior:contain;background:#f6f8fa}.zoom-scroll img{display:block;width:1000px;max-width:none;height:auto}.modal-open{overflow:hidden}[hidden]{display:none!important}noscript{display:block;text-align:center;padding:30px}
@media(max-width:360px){main{padding:24px 18px}.site-header{padding:18px}.instruction h1{font-size:30px}.instruction-text{font-size:24px}.audio-caption{font-size:20px}.completion-actions button{font-size:22px}.complete h1{font-size:29px}}
@media(min-width:700px){body{padding:28px 0}.site-header{border-radius:22px 22px 0 0}main{border-radius:0 0 22px 22px;padding:32px 38px 36px;min-height:80vh}}

/* Keep the clinic header compact on home; completion fits without shrinking text. */
.site-header{padding:10px 24px}
main[data-screen="home"]{padding-top:18px}
main[data-screen="complete"]{min-height:100svh;padding-top:16px;padding-bottom:16px}
.complete{padding-top:0}
.complete-mark{width:52px;height:52px;font-size:32px;margin-bottom:12px}
.complete .eyebrow{margin-bottom:8px}
.complete h1{margin-top:8px}
.completion-actions{margin-top:20px;gap:12px}
.complete .contact{margin-top:20px;padding-top:14px;gap:2px}
@media(max-height:650px){
  .complete-mark{width:40px;height:40px;font-size:27px;margin-bottom:8px}
  .completion-actions{margin-top:14px;gap:10px}
  .completion-actions button{min-height:68px}
  .complete .contact{margin-top:14px;padding-top:10px}
}

/* Detail screens: title → original artwork → readable copy → audio controls. */
main:has(.step){padding-top:20px}
.step .dots{margin:12px 0 20px}
.instruction-heading{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start}
.instruction-heading .step-number{width:52px;height:56px;border-radius:16px;font-size:36px;margin:0}
.instruction-heading h1{font-size:30px;line-height:1.35;letter-spacing:-1px}
.illustration-area{display:flex;align-items:center;justify-content:center;width:100%;height:210px;margin:14px auto 16px}
.illustration-area .step-illustration{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:0}
.warning-illustration{gap:18px;max-width:360px}
.warning-illustration .step-illustration{width:46%;max-height:100%}
.warning-icons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:48%;align-items:center;justify-items:center}
.warning-icons img{display:block;width:100%;max-width:80px;height:auto;object-fit:contain}
.step .instruction-text{margin:0 0 20px;font-size:24px;line-height:1.5}
.step .instruction-text li{margin-bottom:12px}
.step .audio-panel{padding-top:18px}
.step .audio-panel progress{margin:12px 0 18px}
@media(max-width:360px){
  .instruction-heading{grid-template-columns:46px minmax(0,1fr);gap:10px}
  .instruction-heading .step-number{width:46px;height:52px;font-size:34px}
  .instruction-heading h1{font-size:28px}
  .illustration-area{height:184px;margin-top:12px;margin-bottom:14px}
  .warning-illustration{gap:12px}
  .warning-icons{gap:10px}
}