:root{
  --ink:#1c1c1e; --sub:#6e6e73; --line:#e5e5ea; --accent:#0a6c74; --accent-soft:#e8f1f2;
  --bg:#f5f5f7; --card:#fff; --warn:#c0392b;
}
*{box-sizing:border-box;margin:0}
body{font-family:-apple-system,"Apple SD Gothic Neo",Pretendard,sans-serif;background:var(--bg);
     color:var(--ink);display:flex;justify-content:center;min-height:100vh;-webkit-text-size-adjust:100%}
.app{width:100%;max-width:480px;display:flex;flex-direction:column;min-height:100vh;background:var(--card)}
.screen{display:none;flex:1;flex-direction:column}
.screen.on{display:flex}

header{padding:14px 18px 11px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
header h1{font-size:17px;font-weight:700;flex:1}
header .sub{font-size:13px;color:var(--sub);margin-top:2px}
.iconbtn{border:none;background:none;font-size:15px;color:var(--accent);cursor:pointer;padding:6px;font-weight:600}
.badge{font-size:11px;color:var(--sub);border:1px solid var(--line);border-radius:10px;padding:2px 8px}

.pad{padding:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.card h2{font-size:16px;font-weight:700;margin-bottom:4px}
.card .meta{font-size:12.5px;color:var(--sub);margin-bottom:8px}
.card p{font-size:14.5px;line-height:1.6;color:#3a3a3c}
.big{background:var(--accent-soft);border-color:#cfe3e5}

.btn{display:block;width:100%;padding:14px;font-size:16px;font-weight:600;color:#fff;
     background:var(--accent);border:none;border-radius:12px;cursor:pointer;margin-top:12px}
.btn:disabled{background:#c7c7cc}
.btn.ghost{background:none;color:var(--accent);border:1px solid var(--line)}
.btn.sm{padding:10px;font-size:14px;margin-top:8px}

.bar{height:8px;background:var(--line);border-radius:5px;overflow:hidden;margin:8px 0 4px}
.bar > i{display:block;height:100%;background:var(--accent);transition:width .4s}
.progress-label{font-size:12.5px;color:var(--sub);display:flex;justify-content:space-between}

input,textarea,select{font-family:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);
      border-radius:10px;outline:none;width:100%;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--accent)}
label.field{display:block;font-size:13px;color:var(--sub);margin:12px 0 5px}
.err{color:var(--warn);font-size:13.5px;min-height:19px;margin-top:8px}
.auth-switch{display:flex;gap:6px;padding:4px;margin-bottom:18px;background:var(--accent-soft);border-radius:12px}
.auth-switch button{flex:1;min-width:0;padding:11px 8px;border:0;border-radius:9px;background:transparent;color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.auth-switch button[aria-pressed="true"]{background:var(--accent);color:#fff}
.auth-switch button:disabled{cursor:wait;opacity:.65}
.auth-title{font-size:21px;margin:8px 0}
.auth-hint{margin-top:5px}
.auth-consent{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font-size:13px;line-height:1.6;cursor:pointer}
.auth-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--accent)}
#login-form input,#register-form input:not([type="checkbox"]){font-size:16px}

/* 대화 */
#chat{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:10px 14px;border-radius:16px;font-size:15.5px;line-height:1.55;white-space:pre-wrap}
.coach{align-self:flex-start;background:#f2f2f7;border-bottom-left-radius:4px}
.patient{align-self:flex-end;background:var(--accent-soft);border-bottom-right-radius:4px}
.interim{opacity:.5;font-style:italic}
#status{text-align:center;font-size:12.5px;color:var(--sub);min-height:18px;padding:2px 0 6px}
footer{border-top:1px solid var(--line);padding:10px 14px calc(12px + env(safe-area-inset-bottom))}
.row{display:flex;align-items:center;gap:10px}
#micBtn{width:62px;height:62px;border-radius:50%;border:none;background:var(--accent);color:#fff;
        font-size:25px;cursor:pointer;flex:none}
#micBtn.listening{background:var(--warn);animation:pulse 1.2s infinite}
#micBtn:disabled{background:#c7c7cc}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.4)}70%{box-shadow:0 0 0 16px rgba(192,57,43,0)}
                 100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}}
#sendBtn{border:none;background:none;color:var(--accent);font-size:15px;font-weight:600;cursor:pointer;padding:8px}
.opts{display:flex;gap:16px;justify-content:center;font-size:12.5px;color:var(--sub);margin-top:8px}
.opts label{display:flex;align-items:center;gap:4px;cursor:pointer}
.opts input{width:auto}

/* 연습 오버레이 */
#exercise{position:fixed;inset:0;background:#0b3d42;color:#fff;display:none;flex-direction:column;
          align-items:center;justify-content:center;gap:18px;z-index:50;padding:24px;text-align:center}
#exercise.on{display:flex}
#exercise h2{font-size:19px;font-weight:600}
#exercise .cue{font-size:22px;font-weight:600;min-height:30px}
#exercise .left{font-size:14px;opacity:.75}
.circle{width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.16);
        border:2px solid rgba(255,255,255,.5);transition:transform 1s linear}
#exercise .btn{max-width:260px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45)}

/* 일지 */
.chart{width:100%;height:150px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .dot{fill:var(--accent)}
.chart text{font-size:10px;fill:var(--sub)}
.slider-row{display:flex;align-items:center;gap:12px;margin-top:6px}
.slider-row input[type=range]{flex:1;padding:0}
.scoreval{font-size:24px;font-weight:700;color:var(--accent);width:38px;text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{border:1px solid var(--line);border-radius:16px;padding:7px 13px;font-size:14px;cursor:pointer;background:#fff}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.small{font-size:12.5px;color:var(--sub);line-height:1.6}
.hist{font-size:13.5px;color:#3a3a3c;border-top:1px solid var(--line);padding:10px 0}
.hist b{font-weight:600}
.hist-more summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--accent);font-size:14px;font-weight:600;border-top:1px solid var(--line)}

/* Small screens, keyboard focus, and reduced motion. */
button:focus-visible, summary:focus-visible {outline:3px solid #d28b25;outline-offset:3px}
#scr-session {height:100dvh;min-height:0}
#scr-session > header {flex-shrink:0}
.session-heading {flex:1;min-width:0;overflow-wrap:anywhere}
.session-home {flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;border:1px solid #c5d3c8;border-radius:12px;background:#f3f7ef;color:#2c4339;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;cursor:pointer}
.session-home:hover {background:#e6efe1}
.pilot-notice {margin:0;padding:12px 18px;background:#edf2e7;color:#30483c;font-size:14px;line-height:1.6}
.completion-choice {display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.completion-choice .btn {flex:1;min-width:180px;margin:0}
#chat {min-height:0}
#ex-intro {max-width:420px;font-size:14px;line-height:1.7;opacity:.85}
#exercise .circle {margin:22px 0}
pre {white-space:pre-wrap;overflow-wrap:anywhere}
.hist {overflow-wrap:anywhere}
@media(max-width:480px){.ldl{gap:3px!important;grid-template-columns:24px repeat(6,minmax(0,1fr))!important}.ldl input{min-width:0;padding:6px 1px!important}.wrap{padding:16px 10px!important}th,td{padding:7px 3px!important}.row{gap:4px}#micBtn{width:48px;height:48px}.opts{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Visual learning cards */
[hidden]{display:none!important}
#journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:20px 0}
.journey-step{background:#f4f6f6;border-radius:12px;padding:10px 4px;text-align:center;display:grid;gap:5px;font-size:11px;color:var(--sub)}
.journey-step b{font-size:12px;color:var(--ink)}
.journey-step.complete{background:var(--accent-soft);color:var(--accent)}
#visual-panel{flex-shrink:0;background:#eff6f5;border-bottom:1px solid #cfe3e5;max-height:48dvh;overflow:auto}
#visual-panel summary{padding:12px 18px;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
#visual-content{padding:0 16px 16px}
#visual-content h2{font-size:16px;margin:4px 0 12px}
.concept-flow{list-style:none;padding:0;display:flex;gap:16px;margin-bottom:14px}
.concept-flow li{position:relative;flex:1;min-width:0;border-radius:10px;background:#fff;padding:10px 7px;display:grid;gap:6px;font-size:12px;line-height:1.5}
.concept-flow li+li:before{content:'›';position:absolute;left:-13px;top:12px;color:var(--accent);font-size:20px}
.concept-flow b{color:var(--accent);font-size:13px}
.worksheet-grid,.comparison{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.thought-field,.comparison>div{min-width:0;border-radius:12px;background:#f4f4f7;padding:12px}
.thought-field span,.comparison span{display:block;font-size:12px;color:#50565a;margin-bottom:8px}
.thought-field textarea{font-size:14px;padding:8px;resize:vertical}
.alternative{background:#e2f0eb!important}
.summary-card .summary-mark{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--accent-soft);border-radius:50%;color:var(--accent);margin-bottom:8px}
.summary-section{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.summary-section h3{font-size:12px;color:var(--accent);margin-bottom:6px}
#endcard{max-height:55dvh;overflow:auto}
#endcard p{white-space:pre-wrap;overflow-wrap:anywhere}
#exercise{overflow-y:auto;justify-content:safe center;gap:12px}
#exercise .small{color:#dcf0ed}
#ex-progress{width:min(260px,100%);height:6px;accent-color:#98dbce}
#ex-body{display:flex;align-items:center;gap:12px;width:min(430px,100%)}
#ex-body svg{width:38%;max-height:230px;flex-shrink:0}
.body-base{fill:#497075;stroke:#73989b;stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.body-points circle{fill:#769a9d;stroke:#163f43;stroke-width:2}
.body-points circle.active{fill:#d5f8a6;stroke:#fff}
.body-steps{display:grid;gap:4px;text-align:left;font-size:12px;line-height:1.5}
.body-steps span{padding:3px 6px;border-radius:6px;opacity:.65}
.body-steps span.active{background:#d5f8a6;color:#143d32;opacity:1;font-weight:bold}
#ex-phase{min-height:20px;font-variant-numeric:tabular-nums}
.msg{overflow-wrap:anywhere}
@media(max-width:350px){.concept-flow{display:grid;grid-template-columns:1fr 1fr}.worksheet-grid,.comparison{grid-template-columns:1fr}.badge{display:none}}
@media(max-height:650px){#exercise{gap:7px;padding:16px}#exercise .circle{width:100px;height:100px;margin:12px 0}#ex-body svg{max-height:160px}#ex-intro{font-size:12px}}

#sendBtn{flex-shrink:0;white-space:nowrap}
.row input{min-width:0}

/* Task-first workspace: a large canvas with a separate conversation pane. */
.app.session-wide{max-width:1600px;width:100%;height:100dvh;min-height:0}
.session-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,420px);flex:1;min-height:0}
.conversation-pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:#fff;border-left:1px solid #dce5df}
.pane-label{padding:18px 20px;font-size:14px;font-weight:700;border-bottom:1px solid var(--line)}
.pane-label span{display:block;font-size:12px;font-weight:400;color:var(--sub);margin-top:5px}
#task-stage{position:relative;min-height:0;min-width:0;background:#edf2e9;overflow:auto}
#stage-art{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 40px;text-align:center}
.stage-heading{max-width:680px}
.stage-eyebrow{font-size:12px;letter-spacing:.12em;color:#597367}
.stage-heading h2{font-size:clamp(24px,2.4vw,36px);font-weight:600;letter-spacing:-.04em;line-height:1.4;margin:12px 0}
.task-illustration{width:100%;max-width:700px;min-height:0;max-height:42dvh;flex-shrink:0;margin:8px 0}
.stage-caption{max-width:540px;min-height:88px}
.stage-caption h3{font-size:20px;font-weight:600;line-height:1.5}
.stage-caption p{font-size:15px;line-height:1.8;color:#607166;margin-top:8px;overflow-wrap:anywhere}
.stage-steps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.stage-steps button{background:#ffffffa8;border:1px solid #d4dfd3;border-radius:12px;padding:12px 18px;color:#375648;cursor:pointer;font:inherit;font-size:14px}
.stage-steps button span{font-size:11px;color:#738d7e;margin-right:10px}
.stage-steps button[aria-pressed=true]{background:#356b5c;color:white;border-color:#356b5c}
.stage-steps button[aria-pressed=true] span{color:#d5e9df}
.motion-toggle{margin-top:20px;border:0;border-bottom:1px solid #aabcb0;background:transparent;padding:6px;color:#597367;font-size:12px;cursor:pointer}
.scene-breathe{transform-origin:300px 165px;animation:scene-breathe 8s ease-in-out infinite}
@keyframes scene-breathe{0%,100%{transform:scale(.94)}50%{transform:scale(1.06)}}
.motion-paused .scene-breathe{animation-play-state:paused}
.stage-help{font-size:25px;line-height:2;padding:40px 0}.stage-help a{color:var(--accent)}
#quick-actions{display:flex;gap:6px;padding:6px 14px 12px;flex-wrap:wrap}
#quick-actions button{border:1px solid #d6e3dc;border-radius:20px;background:#f6f9f7;padding:8px 10px;color:#436052;font:inherit;font-size:12px;cursor:pointer}
#visual-panel{max-height:44dvh}
#exercise{position:relative;inset:auto;min-height:100%;width:100%;z-index:auto;padding:30px 24px;overflow:visible}
#exercise .circle{width:190px;height:190px;margin:32px 0}
#ex-body{width:min(550px,100%)}
#ex-body svg{max-height:320px}
.body-steps{font-size:14px;gap:8px}
#exercise .cue{font-size:26px}
#ex-intro{max-width:520px}
.conversation-pane [inert]{opacity:.45}
@media(max-width:800px){
  .session-workspace{display:flex;flex-direction:column}
  #task-stage{flex:0 0 29dvh;min-height:165px;border-bottom:1px solid #dce5df}
  #stage-art{padding:12px 16px;display:grid;grid-template-columns:40% 1fr;gap:6px 12px;text-align:left;align-content:center}
  .stage-heading{grid-column:1 / -1}.stage-eyebrow{display:none}.stage-heading h2{font-size:17px;margin:0}
  .task-illustration{grid-column:1;grid-row:2 / 4;height:100px;margin:0}
  .stage-caption{min-height:0}.stage-caption h3{font-size:14px}.stage-caption p{font-size:12px;line-height:1.5;margin-top:3px}
  .stage-steps{grid-column:1 / -1;margin:0;gap:5px;justify-content:flex-start}.stage-steps button{padding:6px 10px;font-size:12px}.stage-steps button span{display:none}
  .motion-toggle{margin:0;justify-self:start;padding:2px;font-size:11px}
  .conversation-pane{flex:1;border-left:0;overflow:hidden}.pane-label{display:none}
  #visual-panel{max-height:33dvh}
  #endcard{max-height:42dvh}
  #task-stage:has(#exercise.on){flex-basis:43dvh}
  #exercise{min-height:100%;padding:15px;gap:8px}
  #exercise h2{font-size:16px}#ex-intro{font-size:12px}
  #exercise .circle{width:70px;height:70px;margin:14px 0}
  #exercise .cue{font-size:18px}
  #exercise .btn{padding:9px;margin-top:4px}
  #ex-body{max-width:330px}#ex-body svg{max-height:150px}.body-steps{font-size:10px;gap:1px}
  #chat{padding:12px}.msg{font-size:14px}
  #quick-actions{padding:4px 12px 7px}
}
@media(prefers-reduced-motion:reduce){.scene-breathe{animation:none}}

/* Link the selected visual topic and the current coaching turn. */
#stage-art{min-height:0}
#stage-dialogue{margin:0 32px 28px;padding:20px 24px;background:#fffdf6;border:1px solid #d8dfcf;border-radius:18px}
#stage-reply{font-size:18px;line-height:1.8;margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
#stage-answer,#stop-speaking{border:1px solid #b8cec2;border-radius:10px;background:#fff;padding:8px 12px;color:#356b5c;cursor:pointer;font:inherit;font-size:13px}
#reply-context{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#edf2e9;border-radius:8px;padding:6px 10px;margin-bottom:8px;font-size:12px}
#clear-context{border:0;background:none;font-size:20px;color:#356b5c;cursor:pointer}
.row textarea{min-width:0;resize:vertical;max-height:140px;font-size:16px}
#stop-speaking{margin-top:8px}
#voice-note:empty{display:none}
#voice-note{margin-top:6px}
@media(max-width:800px){#stage-dialogue{margin:4px 12px 12px;padding:10px 12px}#stage-reply{font-size:14px;line-height:1.6}.opts{flex-wrap:wrap}.conversation-pane footer{flex-shrink:0}}
@media(max-width:800px) and (max-height:550px){#task-stage{flex-basis:80px;min-height:80px}#task-stage:has(#exercise.on){flex-basis:35dvh}}

#test-voice{border:1px solid #b8cec2;border-radius:8px;background:#fff;color:#356b5c;padding:6px 10px;margin-top:8px;cursor:pointer}
#voice-output-note:empty{display:none}

.voice-buttons{display:flex;gap:8px;flex-wrap:wrap}
#replay-voice{border:1px solid #b8cec2;border-radius:8px;background:#fff;color:#356b5c;padding:6px 10px;margin-top:8px;cursor:pointer}
#voice-settings{margin-top:8px;font-size:12px;max-height:24dvh;overflow:auto}
#voice-settings summary{cursor:pointer;color:var(--accent);padding:4px 0}
#voice-settings label{display:block;margin:8px 0 4px}
#voice-settings select{font-size:14px;padding:6px}
#voice-settings p{margin-top:6px}

.stage-steps button small { display: block; margin-top: 6px; font-size: .8rem; font-weight: 400; line-height: 1.5; }

/* Everyday quests and a small RPG travel journal. */
#mission-board { background: #f7f6ed; border: 1px solid #d5dfcf; }
.mission-heading { display:flex; gap:12px; align-items:start; justify-content:space-between; flex-wrap:wrap; }
.mission-rank { background:#315f50; color:#fff; border-radius:20px; padding:7px 12px; font-size:.8rem; }
.mission-map { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0 12px; }
.mission-place { position:relative; text-align:left; padding:16px; border:1px solid #ced9c8; border-radius:16px; background:#fffdf6; color:#29493f; cursor:pointer; font:inherit; }
.mission-place > span, .mission-place b, .mission-place small, .mission-place em { display:block; }
.mission-place b { margin:5px 0; }
.mission-place small { font-size:.78rem; line-height:1.5; }
.mission-place em { margin-top:8px; font-size:.75rem; }
.mission-place[aria-pressed="true"] { outline:3px solid #547d66; outline-offset:1px; }
.mission-place:disabled { cursor:default; background:#eceee6; color:#61695f; }
.mission-place.explored { background:#e5efe1; }
.mission-pin { width:30px; height:30px; border-radius:50%; text-align:center; line-height:30px; background:#dce7d3; margin-bottom:12px; }
.mission-detail-card { border-top:1px solid #cbd7c5; padding-top:16px; margin-top:18px; }
.mission-scene { background:#edf1e4; border-radius:16px; overflow:hidden; }
.mission-scene svg { width:100%; max-height:170px; display:block; }
.mission-detail-card h3 { margin:10px 0; }
.mission-detail-card ol { padding-left:22px; line-height:1.8; }
.mission-actions { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
#mission-record { border-top:1px dashed #bbcbb5; margin-top:16px; padding-top:16px; }
#mission-record textarea { display:block; width:100%; margin:8px 0; }
#mission-record fieldset { border:0; margin:12px 0; padding:0; }
#mission-record fieldset label { display:block; padding:8px 0; }
.mission-log { border-top:1px solid #cbd7c5; padding-top:14px; margin-top:18px; }
.mission-log summary { cursor:pointer; font-weight:600; }
.mission-log article { padding:12px 0; border-bottom:1px solid #dde4d7; }
.mission-log article b { display:block; }
@media(max-width:380px) { .mission-map { grid-template-columns:1fr; } }

#mission-record input[type="radio"] { width:auto; margin:0 8px 0 0; flex:0 0 auto; }
#mission-record fieldset label { display:flex; align-items:center; }

.assessment-launchers { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.assessment-launchers button { font:inherit; border:1px solid #c5dcd6; border-radius:12px; padding:10px 14px; background:#eff7f3; color:#245c51; cursor:pointer; }
#assessment-dialog { box-sizing:border-box; width:min(680px,calc(100% - 24px)); max-height:90dvh; padding:24px; border:1px solid #cce0d5; border-radius:24px; background:#fcfdf7; color:#203d38; overflow-y:auto; scroll-padding-block:140px 64px; }
#assessment-dialog::backdrop { background:rgba(25,48,43,.5); }
.assessment-top { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.assessment-top h2 { margin:0; font-size:1.2rem; }
#assessment-close { flex:none; background:#e5f0e9; border:0; border-radius:12px; padding:10px 16px; color:#244c42; cursor:pointer; }
#assessment-intro { line-height:1.7; font-size:.9rem; }
.vas-item { border:1px solid #d6e5db; border-radius:18px; padding:16px; margin:12px 0; background:white; }
.vas-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vas-heading label { font-weight:700; }
.vas-heading small { display:block; font-size:.75rem; font-weight:400; color:#536b63; }
.vas-heading output { background:#e4f1e7; padding:6px 12px; border-radius:20px; white-space:nowrap; }
.vas-item p { font-size:.85rem; line-height:1.6; }
.vas-range { width:100%; min-height:44px; accent-color:#287764; cursor:pointer; padding:0; }
.vas-range.untouched { opacity:.55; }
.vas-help {color:#50685d;font-size:13px;}
.vas-heading label {display:flex;align-items:center;gap:10px;line-height:1.5;word-break:keep-all;}
.vas-symbol {width:44px;height:44px;flex-shrink:0;background:#eaf2e8;border-radius:14px;padding:9px;}
.vas-choices {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:12px 0;}
.vas-time-choices {grid-template-columns:repeat(5,minmax(0,1fr));}
.vas-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:12px;}
.vas-tabs button {min-height:52px;background:#f5f8ef;border:1px solid #cbd8c8;border-radius:10px;color:#415c4b;padding:5px;font-size:11px;cursor:pointer;}
.vas-tabs button[aria-current="step"] {border:2px solid #32725c;background:#e4efdb;}
.vas-tabs span {display:block;margin-top:4px;font-size:12px;font-weight:600;}
.vas-item[hidden],#assessment-save[hidden],#vas-next[hidden] {display:none;}
#assessment-save {margin-top:12px;}
.vas-choices button {flex:1 0 40px;min-height:44px;padding:5px;border:1px solid #bdcfc1;border-radius:10px;background:#fafcf7;color:#294f40;cursor:pointer;font:inherit;}
.vas-choices button[aria-pressed="true"] {background:#286a58;color:white;border-color:#286a58;}
.vas-choices button small {display:block;font-size:10px;line-height:1.3;}
.vas-item.answered {border-color:#73a087;}
#vas-progress {background:#f1f6ed;padding:9px 12px;border-radius:10px;font-size:13px;}

/* Character selection and the player's camp. */
.campaign-book {margin:24px 0;border:2px solid #8d7752;border-radius:18px;background:#faf3e4;box-shadow:0 8px 24px #2736291a;overflow:hidden;}
.campaign-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px;background:#263b32;color:#f7e9c5;border-bottom:3px double #bda16b;}
.campaign-heading .adventure-kicker {color:#dbbc7f;}
.campaign-heading h2 {margin:6px 0 0;font-size:26px;letter-spacing:.06em;}
.campaign-heading .btn {width:auto;background:#d8bb78;color:#20362b;box-shadow:0 3px 0 #9f844b;white-space:nowrap;font-size:14px;}
.act-tabs {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#263b32;gap:2px;padding:10px;}
.act-tabs button {border:1px solid #63745b;background:#354b3d;color:#e9e8d3;padding:13px 7px;border-radius:8px;cursor:pointer;min-height:92px;}
.act-tabs button[aria-pressed="true"] {border:2px solid #e3c785;background:#f4e8c8;color:#314735;}
.act-tabs span,.act-tabs b,.act-tabs small {display:block;line-height:1.5;}
.act-tabs span {font-family:Georgia,serif;letter-spacing:.15em;font-size:12px;}
.act-tabs b {font-size:14px;margin:6px 0;word-break:keep-all;}
.act-tabs small {font-size:11px;opacity:.8;}
.act-landscape {position:relative;padding:30px 24px 18px;text-align:center;overflow:hidden;background:radial-gradient(circle at 80% 25%,#f2d497 0 22px,transparent 23px),linear-gradient(155deg,transparent 50%,#a8b79b 50% 61%,transparent 61%),linear-gradient(20deg,#d8dfc5 42%,#eaf0d9 42%);}
.act-landscape>span {font-family:Georgia,serif;font-size:13px;letter-spacing:.25em;color:#5e684e;}
.act-landscape h3 {font-size:27px;margin:10px 0;color:#304837;}
.act-landscape p {font-size:14px;color:#425642;}
.act-route {font-size:20px;letter-spacing:4px;color:#6a744d;margin-top:25px;white-space:nowrap;}
.campaign-quests {list-style:none;margin:0;padding:12px 20px;}
.campaign-quests li {display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:center;padding:17px 0;border-bottom:1px solid #ded3b9;}
.quest-seal {display:grid;place-items:center;width:36px;height:36px;border:1px solid #b9a477;transform:rotate(-5deg);background:#efe0bb;border-radius:8px;font-family:Georgia,serif;font-weight:bold;}
.campaign-quests h4 {font-size:16px;margin:0 0 5px;color:#344c3c;}
.campaign-quests p {font-size:13px;margin:0;line-height:1.6;color:#64705c;}
.campaign-quests .btn {width:auto;margin:0;white-space:nowrap;}
.campaign-quests .complete .quest-seal {background:#436b50;color:#fff4d1;}
.campaign-quests .current {background:#fff9e9;}
.campaign-quests .locked {opacity:.65;}
.lecture-origin {font-size:12px;line-height:1.7;padding:16px 22px;color:#5d6c56;}
#character-dialog {border:2px solid #ab9161!important;box-shadow:0 0 0 6px #273b32,0 24px 80px #14221988;}
.character-option {border-radius:10px!important;}
.character-option[aria-pressed="true"] {box-shadow:0 0 0 3px #d5b36355!important;border-color:#9c7b37!important;}
#sound-dialog {position:fixed;inset:0;margin:auto;width:min(760px,calc(100% - 24px));max-height:94dvh;overflow:auto;border:2px solid #a58a5b;border-radius:22px;padding:26px;background:#faf6e9;color:#304739;}
#sound-dialog::backdrop {background:#172c24bc;backdrop-filter:blur(5px);}
#sound-dialog[open] {display:flex;flex-direction:column;overflow:clip;}
.sound-body {min-height:0;overflow-y:auto;padding-right:5px;}
.sound-heading,#sound-dialog>p,.sound-console {flex-shrink:0;}
#sound-dialog>p {margin:8px 0;}
.sound-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sound-heading h2 {font-size:28px;margin:6px 0;}
.sound-heading .btn {width:auto;flex-shrink:0;}
#sound-options {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0;}
#sound-options button {display:flex;flex-direction:column;align-items:center;gap:7px;border:1px solid #b9bfa8;border-radius:14px;background:#fffdf5;color:#3b503c;padding:14px 9px;cursor:pointer;}
#sound-options button[aria-pressed="true"] {border:2px solid #567455;background:#e9f0db;}
#sound-options button:disabled {opacity:.5;cursor:default;}
#sound-options b {font-size:16px;}
#sound-options small {font-size:11px;}
#sound-options button>span:last-child {font-size:12px;line-height:1.5;word-break:keep-all;}
.noise-emblem {display:grid;place-items:center;border-radius:50%;width:54px;height:54px;font-size:38px;line-height:1;background:#e3e9e0;}
.noise-pink {background:#f0dbd1;}.noise-brown {background:#d8c6af;}.noise-modulated {background:#dbd9e4;}.noise-rain {background:#cfdde8;}.noise-ocean {background:#c7e0e3;}.noise-stream {background:#d3e7d2;}.noise-cosmic {background:#d9d6ef;}.noise-crtones {background:#e6dcef;}.noise-flutter {background:#e3e6d4;}.noise-chimes {background:#f2e7cf;}
#sound-dialog label {display:block;font-weight:600;margin:14px 0 7px;}
#sound-dialog select {width:100%;min-height:44px;border:1px solid #b9c6b4;border-radius:10px;padding:9px;color:#2d4938;background:#fffdf6;}
#sound-volume {width:100%;min-height:44px;accent-color:#5f835e;padding:0;}
#sound-volume-value {float:right;font-weight:400;}
.sound-console {display:flex;align-items:center;gap:24px;background:#263b32;padding:22px;border:3px double #b39a67;border-radius:14px;margin:18px 0;color:#f5eac7;}
#sound-clock {font-family:Georgia,serif;font-variant-numeric:tabular-nums;font-size:42px;min-width:110px;}
.sound-console>div {display:flex;flex-wrap:wrap;gap:8px;flex:1;}
.sound-console .btn {width:auto;flex:1;padding:12px;font-size:13px;white-space:nowrap;}
.sound-console .btn.ghost {color:#f6efd9;border-color:#8b9c7e;}
.sound-console .btn:disabled {opacity:.5;}
#sound-status {font-size:14px;line-height:1.6;min-height:23px;}
#sound-listening-progress {padding:12px;border:1px solid #c7d3b2;border-radius:12px;background:#edf3df;font-size:14px;line-height:1.6;}
#sound-save-retry[hidden] {display:none;}
#sound-storage-note {font-size:11px;color:#687461;line-height:1.5;}
.sound-guidance {font-size:14px;line-height:1.8;border-left:3px solid #bca36e;padding-left:14px;}
.sound-unlocks {border-top:1px solid #d9d1b9;margin-top:20px;padding-top:16px;}
#sound-rewards {display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
#sound-rewards>span {border:1px solid #c9c6b5;color:#8b8978;border-radius:8px;padding:10px;flex:1;text-align:center;white-space:nowrap;}
#sound-rewards>span.earned {background:#e4edda;border-color:#7f9c6c;color:#3d5c3f;}
#sound-rewards small {display:block;margin-top:6px;}
@media(max-width:600px) {
 .campaign-heading {padding:18px 14px;flex-wrap:wrap;}.campaign-heading h2 {font-size:23px;}
 .act-tabs {gap:5px;padding:8px;}.act-tabs button {padding:10px 3px;}.act-tabs b {font-size:11px;}
 .campaign-quests {padding:8px 12px;}.campaign-quests li {grid-template-columns:28px 1fr;gap:9px;}.campaign-quests .btn {grid-column:2;justify-self:start;}.quest-seal {width:26px;height:30px;}
 .act-landscape {padding:22px 12px 16px;}.act-landscape h3 {font-size:23px;}.act-route {font-size:14px;letter-spacing:0;}
 #sound-dialog {padding:18px;}.sound-heading h2 {font-size:23px;}.sound-heading {flex-wrap:wrap;}
 #sound-options {grid-template-columns:repeat(2,minmax(0,1fr));}.sound-console {flex-direction:column;gap:12px;padding:16px;}.sound-console>div {width:100%;}.sound-console .btn {padding:10px 7px;}
}
.character-entry {background:linear-gradient(135deg,#e6efdf,#fff3d5);border:1px solid #ccd8bc;border-radius:22px;padding:22px;margin-bottom:26px;}
.character-entry h2 {font-size:24px;line-height:1.4;margin:8px 0;}
.character-entry p {line-height:1.7;}
.character-entry .btn {margin:16px 0 10px;}
#character-dialog {position:fixed;inset:0;margin:auto;width:min(900px,calc(100% - 24px));max-height:92dvh;overflow:auto;border:1px solid #d6dbc7;border-radius:26px;padding:30px;background:radial-gradient(ellipse at top,#fff8df,#f3f5eb 65%);color:#2a4639;}
#character-dialog::backdrop {background:#172c24b8;backdrop-filter:blur(5px);}
#character-dialog h2 {font-size:clamp(22px,4vw,32px);margin:8px 0;}
#character-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0;}
.character-option {border:2px solid #d5dfce;border-radius:20px;background:#ffffffa8;cursor:pointer;color:#294c3c;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;font:inherit;transition:transform .15s,border-color .15s;}
.character-option .character-art {width:100%;max-height:230px;}
.character-option b {font-size:20px;}
.character-option span {font-size:14px;}
.character-option small {font-size:12px;line-height:1.6;color:#536d5d;}
.character-option[aria-pressed="true"] {border-color:#32725c;background:#f0f7e7;box-shadow:0 0 0 3px #7da88930;transform:translateY(-4px);}
.character-option:focus-visible {outline:3px solid #a06a20;outline-offset:3px;}
.character-footer {display:flex;gap:10px;position:sticky;bottom:-30px;padding:14px 0;background:#f3f5eb;}
.character-footer .btn {width:auto;flex:1;}
.hero-card {display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center;border-radius:22px;background:linear-gradient(120deg,#e6efdf,#fff5dc);padding:20px;margin-bottom:20px;}
.hero-card .character-art {width:100%;max-height:200px;display:block;}
.hero-card h2 {font-size:26px;margin:6px 0;}
.hero-card p {margin:8px 0;line-height:1.6;}
.hero-xp {display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-top:14px;}
.hero-card progress {width:100%;height:12px;accent-color:#4c8a68;}
.hero-card .btn {width:auto;}
.camp-next {padding:20px 24px;margin-bottom:20px;border:1px solid #bfd1bf;border-radius:20px;background:#f5f9f0;}
.camp-next h3 {margin:6px 0;font-size:22px;}
.camp-next p {line-height:1.7;margin:8px 0;}
.camp-next .btn {width:auto;margin:10px 0;}
.camp-next small {display:block;color:#5c715f;line-height:1.6;}
.character-trail {display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;text-align:left;font-size:13px;font-weight:600;}
.character-trail svg {height:58px;width:52px;background:#fff8e7;border-radius:50%;}
.character-trail small {display:block;font-weight:400;font-size:11px;color:#627765;margin-top:3px;}
@media(max-width:800px) {.character-trail {justify-content:flex-start;margin:0 0 4px;}.character-trail svg {height:34px;width:32px;}.character-trail small {display:none;}}
@media(max-width:600px) {
  #character-dialog {padding:18px;}
  #character-options {grid-template-columns:1fr;gap:10px;margin:16px 0;}
  .character-option {display:grid;grid-template-columns:90px 1fr;text-align:left;gap:4px 12px;padding:8px;}
  .character-option .character-art {grid-row:1/4;max-height:116px;}
  .character-option b {font-size:18px;}
  .character-option small {font-size:11px;}
  .character-footer {bottom:-18px;flex-wrap:wrap;}
  .character-footer .btn {font-size:13px;}
  .hero-card {grid-template-columns:94px 1fr;gap:12px;padding:12px;}
  .hero-card h2 {font-size:20px;}
  .hero-xp {flex-wrap:wrap;gap:4px;}
  .hero-card .small {font-size:11px;}
  .vas-heading {align-items:flex-start;}
  .vas-heading output {font-size:13px;padding:6px 8px;}
}
.vas-anchors { display:flex; justify-content:space-between; gap:20px; font-size:.75rem; line-height:1.4; }
.vas-anchors span { max-width:47%; }
.vas-anchors span:last-child { text-align:right; }
.thi-item { border:1px solid #d4e2d9; border-radius:16px; margin:16px 0; padding:14px; min-width:0; background:white; }
.thi-item legend { font-weight:600; font-size:.95rem; line-height:1.6; padding:0 5px; }
.thi-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.thi-choices label { position:relative; cursor:pointer; }
.thi-choices input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.thi-choices span { display:flex; justify-content:center; align-items:center; min-height:48px; font-size:.85rem; text-align:center; border:1px solid #b7cfc3; border-radius:12px; padding:8px 4px; }
.thi-choices input:checked + span { background:#286a58; color:white; border-color:#286a58; }
.thi-choices input:focus-visible + span { outline:3px solid #d59545; outline-offset:3px; }
.assessment-navigation { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.assessment-navigation .btn { width:auto; }
.assessment-progress { color:#315f50; font-weight:600; }
.assessment-source { margin-top:20px; line-height:1.6; }
.assessment-history { margin-top:18px; font-size:.85rem; }
.assessment-result { padding:20px; border-radius:18px; background:#eaf3e5; line-height:1.8; }
#assessment-status { color:#8b421e; line-height:1.6; }
@media(max-width:380px) { #assessment-dialog {padding:16px;} .thi-choices {gap:4px;} }

/* A calm, readable game shell; photography belongs to real-life activities. */
:root { --accent:#246b57; --accent-soft:#e7f2e8; --bg:#f2f4ed; --ink:#243e36; --sub:#5d7167; --line:#dce5d9; }
body { background:radial-gradient(ellipse at top,#e8f2e1,#f6f3e9 65%); }
.app { background:#fffef8; }
.app.home-wide { max-width:960px; }
header { background:#fffef9; }
.btn { box-shadow:0 3px 0 #18523f; transition:background .15s,transform .15s; }
.btn:not(:disabled):active { transform:translateY(2px); box-shadow:0 1px 0 #18523f; }
.btn.ghost, .btn:disabled { box-shadow:none; }
button:focus-visible, summary:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid #bc7d27; outline-offset:3px; }
#mission-board { background:#fffdf5; padding:20px; border-radius:26px; box-shadow:0 8px 26px #40674c0b; }
.adventure-banner { display:grid; grid-template-columns:1fr 1fr; align-items:center; background:#eaf3df; border-radius:20px; overflow:hidden; padding:12px 0 0 20px; margin-bottom:24px; }
.adventure-banner h2 { font-size:clamp(23px,3.5vw,34px); line-height:1.25; letter-spacing:-.8px; margin:10px 0; }
.adventure-banner p { font-size:13px; color:#455c4c; margin-bottom:16px; }
.adventure-kicker { display:block; font-size:11px; font-weight:600; color:#4b7159; }
.adventure-banner svg { width:100%; height:auto; align-self:end; }
.mission-map { gap:16px; }
.mission-place { padding:12px; border-radius:18px; background:#fff; box-shadow:0 4px 0 #dde6d4; transition:transform .15s; }
.mission-place:not(:disabled):hover { transform:translateY(-2px); }
.mission-thumbnail { margin:-12px -12px 12px; height:104px; overflow:hidden; border-radius:17px 17px 0 0; background:#dce8d1; }
.mission-thumbnail img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 70%; }
.mission-place:disabled .mission-thumbnail { opacity:.6; }
.mission-place .mission-pin { border:3px solid #fffef8; margin-top:-30px; position:relative; width:36px; height:36px; line-height:30px; background:#f4d795; color:#38563d; }
.mission-place.explored .mission-pin { background:#286d54; color:white; }
.mission-real-scene img { width:100%; height:220px; display:block; object-fit:cover; object-position:center 70%; }
.mission-detail-card ol li { margin-bottom:10px; padding-left:4px; }
.photo-credits { margin-top:18px; line-height:1.6; }
.photo-credits p { font-size:12px; margin-top:8px; }
@media(min-width:700px) {
  .mission-map {grid-template-columns:repeat(4,minmax(0,1fr));}
  .adventure-banner {grid-template-columns:1fr 340px;padding-left:30px;}
  .mission-detail-card {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;}
  .mission-real-scene img {height:100%;min-height:300px;max-height:440px;}
}
@media(max-width:380px) {
  #mission-board {padding:14px;}
  .adventure-banner {grid-template-columns:1fr 125px;padding-left:14px;}
  .adventure-banner h2 {font-size:22px;}
  .adventure-banner p {font-size:12px;}
  .mission-map {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .mission-place {padding:10px;}
  .mission-thumbnail {margin:-10px -10px 12px;height:85px;}
}
@media(prefers-reduced-motion:reduce) { .btn,.mission-place {transition:none;} }
#assessment-dialog { margin:auto; }
.assessment-top { position:sticky; top:-24px; padding:10px 0; z-index:2; background:#fcfdf7; border-bottom:1px solid #e1e9db; }
#assessment-intro { margin:12px 0; }
.vas-anchors, .thi-item legend, .mission-place, .adventure-banner p { word-break:keep-all; overflow-wrap:anywhere; }
.mission-real-scene { align-self:start; }
@media(max-width:380px) { .assessment-top {top:-16px;} }

.stage-navigation {display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
#next-step, #assessment-skip {border:0;border-radius:12px;background:#246b57;color:#fff;font:inherit;font-weight:600;min-height:44px;padding:12px 16px;cursor:pointer;}
#next-step:disabled, #assessment-skip:disabled {opacity:.5;cursor:default;}
.assessment-top {flex-wrap:wrap;}
.assessment-top h2 {flex:1 1 100%;}
#assessment-skip {flex:1;}
#dialogue-navigation {padding:8px 14px; flex-shrink:0;}
#next-step {width:100%;}
.stage-scene {position:relative;width:min(700px,100%);margin:16px 0;}
.stage-photo {position:relative;overflow:hidden;border-radius:22px;background:#dce7d8;}
.stage-photo img {width:100%;height:clamp(220px,32dvh,380px);object-fit:cover;object-position:center 70%;display:block;}
.stage-photo figcaption {position:absolute;left:12px;top:12px;background:#fffef5ed;color:#294d40;border-radius:20px;padding:6px 12px;font-size:12px;}
.stage-concept {position:absolute;bottom:10px;right:10px;width:32%;border-radius:18px;background:#f8fbf1ef;box-shadow:0 4px 16px #253b3922;}
.stage-concept .task-illustration {display:block;width:100%;height:auto;max-height:none;margin:0;}
@media(max-width:800px) {
  .stage-scene {grid-column:1;grid-row:2 / 4;margin:0;}
  .stage-photo {border-radius:12px;}
  .stage-photo img {height:125px;}
  .stage-photo figcaption {font-size:9px;padding:3px 5px;left:4px;top:4px;}
  .stage-concept {width:46%;bottom:5px;right:5px;border-radius:8px;}
}

/* 이명 주파수 맞추기 (라디오 다이얼) */
.sound-match {margin:6px 0 14px;border:1px dashed #b39a67;border-radius:14px;padding:10px 14px;background:#fffdf5;}
.sound-match summary {cursor:pointer;font-weight:600;color:#3b503c;}
.sound-match {min-width:0;}
.tone-dial {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 4px;}
.tone-dial .btn {width:auto;flex:0 1 auto;min-width:0;padding:8px 10px;font-size:12px;white-space:nowrap;}
#tone-readout {flex:1 1 90px;min-width:0;text-align:center;font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;color:#263b32;background:#e3e9e0;border-radius:10px;padding:8px 6px;}
#tone-slider {width:100%;margin:6px 0;}
.tone-presets {display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;}
.tone-presets button {border:1px solid #b9bfa8;border-radius:999px;background:#fff;padding:6px 12px;cursor:pointer;color:#3b503c;font-size:13px;}
.tone-presets button[aria-pressed="true"] {border-color:#567455;background:#e9f0db;}
.tone-actions {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
#tone-status {margin:8px 0 2px;min-height:1.2em;}
.tone-actions .btn {width:auto;flex:1 1 auto;min-width:0;white-space:normal;}
#tone-slider {max-width:100%;}
#tone-play[aria-pressed="true"] {background:#8a3b2f;}
@media (max-width:480px) {#tone-readout {order:-1;flex:1 1 100%;font-size:20px;} .tone-dial .btn {flex:1 1 40%;}}
.assessment-crisis { padding:18px 20px; margin-bottom:14px; border-radius:18px; background:#fbe6df; color:#5a2414; line-height:1.7; border:1px solid #e9b7a6; }
.assessment-crisis a { color:#7a2a12; font-weight:700; }
.thi-choices.four { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px) { .thi-choices.four { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.assessment-high { margin:12px 0 0; padding:12px 14px; border-radius:14px; background:#fff1d6; border:1px solid #e8c77d; color:#4f3a0d; line-height:1.6; }
.hearing-eq-row{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:10px 12px;border-radius:12px;background:#eef4ef;line-height:1.55;font-size:14px}.hearing-eq-row input{width:22px;height:22px;margin-top:2px}
:root .connection-notice{margin:0;padding:12px 18px;background:#fff1ca;color:#553d13;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
/* 순음 크기(10/24): 잡음 음량과 따로 */
.tone-level {display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:nowrap;}
.tone-level label {margin:0;white-space:nowrap;font-weight:700;font-size:14px;}
.tone-level input {flex:1 1 auto;min-width:0;margin:0;}
.tone-level .btn {width:auto;flex:0 0 auto;min-width:40px;padding:6px 10px;}
.tone-level output {min-width:3em;text-align:right;font-variant-numeric:tabular-nums;}