:root{font-family:"Yu Gothic",Meiryo,system-ui,sans-serif;font-size:16px;line-height:1.8;color:#29283d;background:#fafaff;--primary:#5b44d6}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}header,main{width:min(100% - 2rem,46rem);margin:auto}header{padding:1rem 0;font-weight:700}#mode{background:#fff1c6;padding:.5rem .8rem;font-size:.95rem;border-radius:.6rem}.card{padding:clamp(1rem,4vw,2.5rem);background:white;border:1px solid #e2dff1;border-radius:1.2rem;margin-bottom:2rem}h1{font-size:1.65rem;line-height:1.5;margin:0 0 1.2rem}p{margin:.8rem 0}p,label,legend{word-break:normal;line-break:strict;overflow-wrap:normal}button,select,input{font:inherit}button{width:100%;min-height:52px;padding:.7rem 1rem;border:1px solid var(--primary);border-radius:.7rem;background:var(--primary);color:white;font-weight:700;margin-top:1rem;cursor:pointer}button:disabled{background:#eeedf3;color:#706c80;border-color:#d7d4e1;cursor:default}button.secondary{background:white;color:var(--primary)}button span{display:block;font-size:.85rem;font-weight:400}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #9a5c00;outline-offset:3px}.field{display:block;font-weight:600;margin:1.3rem 0}select{display:block;width:100%;min-height:48px;padding:.5rem;margin-top:.4rem;border:1px solid #807a99;border-radius:.5rem;background:white;color:inherit}.check{display:flex;align-items:flex-start;gap:.6rem;margin:1.2rem 0}.check input,input[type=radio]{width:1.2rem;height:1.2rem;accent-color:var(--primary);flex:none;margin-top:.3rem}fieldset{border:1px solid #d5d0ef;border-radius:.8rem;margin:1rem 0;padding:1rem;min-width:0}legend{font-size:1.1rem;font-weight:700;padding:0 .3rem}.rating-option{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem;cursor:pointer}.rating-option:has(input:checked){background:#f1eeff;border-radius:.4rem}.muted{font-size:.95rem;color:#605d76}progress{width:100%;accent-color:var(--primary)}#audio-status,#volume-audio-status{font-size:.95rem;color:#605d76}#save-status{white-space:pre-line}h1:focus{outline:none}@media(max-width:400px){header,main{width:calc(100% - 1.4rem)}fieldset{padding:.7rem}h1{font-size:1.45rem}}
/* Compact five-point controls; the displayed midpoint remains unanswered until touched. */
.slider-field{display:block;font-weight:400}
input[type=range]{width:100%;min-height:44px;accent-color:var(--primary);margin:.2rem 0;cursor:pointer}
input[type=range]:disabled{cursor:default}
.scale-ends{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;line-height:1.5;color:#605d76}
.scale-ends span{max-width:48%}.scale-ends span:last-child{text-align:right}
output{display:block;font-size:1rem;font-weight:600;min-height:1.8em;margin-top:.5rem}
fieldset .check{margin:.5rem 0 0}input[type=checkbox]{accent-color:var(--primary)}
progress{appearance:none;height:.65rem;border:0;border-radius:1rem;overflow:hidden;background:#eeedf3}
progress::-webkit-progress-bar{background:#eeedf3}progress::-webkit-progress-value{background:var(--primary)}progress::-moz-progress-bar{background:var(--primary)}
#play,#volume-play{min-height:56px}#audio-status{min-height:1.8em}
/* Fixed thumb geometry keeps all five labels on the actual thumb centre path. */
.slider-field{--thumb-size:24px;--track-size:6px}
input.rating-slider{appearance:none;-webkit-appearance:none;display:block;width:100%;height:44px;min-height:44px;border:0;padding:0;margin:0;background:transparent;border-radius:0}
.rating-slider::-webkit-slider-runnable-track{height:var(--track-size);background:#d8d0f6;border:0;border-radius:1rem}
.rating-slider::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--thumb-size);height:var(--thumb-size);margin-top:calc((var(--track-size) - var(--thumb-size)) / 2);border:2px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.rating-slider::-moz-range-track{height:var(--track-size);background:#d8d0f6;border:0;border-radius:1rem}
.rating-slider::-moz-range-thumb{box-sizing:border-box;width:var(--thumb-size);height:var(--thumb-size);border:2px solid #fff;border-radius:50%;background:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.rating-slider:disabled{opacity:.5}
.slider-ticks{position:relative;height:1.6rem;margin:0 calc(var(--thumb-size) / 2) .25rem;font-size:.875rem;line-height:1.4;color:#605d76}
.slider-ticks>span{position:absolute;top:0;width:1.5rem;transform:translateX(-50%);padding-top:7px;text-align:center}
.slider-ticks>span::before{content:"";position:absolute;top:0;left:50%;height:5px;border-left:1px solid #807a99}
.slider-ticks>[data-value="1"]{left:0%}.slider-ticks>[data-value="2"]{left:25%}.slider-ticks>[data-value="3"]{left:50%}.slider-ticks>[data-value="4"]{left:75%}.slider-ticks>[data-value="5"]{left:100%}
.slider-ticks>[data-selected="true"]{font-weight:700;color:var(--primary)}
.slider-field>output{margin:0 0 .1rem}
.anomaly-report{margin:.8rem 0;color:#605d76;font-size:.9rem}
.anomaly-report>summary{cursor:pointer;padding:.35rem 0;font-weight:400}
.anomaly-report .field{font-size:1rem;margin:.65rem 0}.anomaly-report p{font-size:.9rem}
summary:focus-visible{outline:3px solid #9a5c00;outline-offset:3px}
/* Playback progress stays inside the existing button; no separate visible bar. */
.play-control{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:56px}
.play-control[data-active="true"]{background:#f1eeff;color:#29283d;border-color:var(--primary)}
.play-control>.play-label-size{position:relative;grid-area:1 / 1;min-width:0;max-width:100%;font:inherit}
.play-label-size{visibility:hidden;pointer-events:none}
.play-fill{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.play-fill>rect{fill:var(--primary)}
/* One SVG text node only. Two coincident gradient stops switch its colour at
   the same x coordinate as the fill; no separately positioned text overlay. */
.play-label{font:inherit}
.play-control:not([data-active="true"]) .play-label{fill:#fff}
.play-control:disabled:not([data-active="true"]) .play-label{fill:#706c80}
#save{display:grid;grid-template-columns:minmax(0,1fr);place-items:center}
#save>span{grid-area:1 / 1;max-width:100%;min-width:0;font:inherit;line-height:1.65;word-break:normal;line-break:strict;text-wrap:balance}
.next-label-size{visibility:hidden;pointer-events:none}
/* RQ1-style resume summary and thank-you card, scoped to these two screens. */
#resume h2{font-size:1.08rem;margin:1.5rem 0 .7rem}
.saved-progress{display:table;max-width:100%;font-weight:700;margin:0 0 1.3rem;padding:.35rem .8rem;border-radius:2rem;color:var(--primary);background:#f1eeff}
.saved-summary{margin:0 0 1.2rem;padding:.2rem 1rem;background:#faf9ff;border:1px solid #e2dff1;border-radius:1rem}
.saved-summary>div{padding:.8rem 0}.saved-summary>div+div{border-top:1px solid #e2dff1}
.saved-summary dt{font-size:1rem;color:#605d76}.saved-summary dd{margin:.2rem 0 0;font-weight:700;overflow-wrap:anywhere}
.resume-guidance p{margin:.65rem 0;line-height:1.85}.resume-guidance strong,.phrase{display:inline-block;max-width:100%}
#resume .check{padding:.8rem .9rem;min-height:52px;border:1px solid #807a99;border-radius:.8rem;cursor:pointer}
#resume .check:has(input:checked){background:#f1eeff;border-color:var(--primary)}
#finish{text-align:center;border-color:#b7a9f2;border-top:6px solid #ffdf88;background:linear-gradient(150deg,#fff9e8,#fff 45%,#f1eeff);padding-block:clamp(2rem,6vw,3rem)}
#finish .finish-badge{display:table;max-width:100%;margin:0 auto 1.1rem;padding:.3rem .85rem;border-radius:2rem;background:#ffdf88;color:#29283d;font-weight:700}
#finish h1{color:var(--primary);font-size:clamp(1.25rem,5vw,2rem);margin-bottom:.9rem}
#finish p{max-width:30rem;margin-inline:auto;text-wrap:balance}#finish .completion-message{font-size:1.05rem;font-weight:600}
#finish .finish-development{margin-top:1.6rem;padding-top:1rem;border-top:1px solid #e2dff1}
@media(min-width:600px){.saved-summary>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:baseline}.saved-summary dd{margin:0}}
@media(max-width:400px){.saved-summary{padding-inline:.8rem}.resume-guidance{font-size:1rem}}
/* Group the task by action, with one main card rather than colour everywhere. */
.equipment-field>label{display:block}.equipment-field>p{margin:.5rem 0 .7rem;font-size:1rem;line-height:1.75;font-weight:400;color:#605d76}
#instructions .instruction-section{margin:1.35rem 0;min-width:0}
#instructions .instruction-section h2{margin:0 0 .65rem;font-size:1rem;line-height:1.6;font-weight:700;color:#29283d}
#instructions .instruction-section p{margin:.6rem 0;line-height:1.85}
#instructions .instruction-key{padding:1.15rem;background:#f1eeff;border:1px solid #b7a9f2;border-radius:1rem}
#instructions .instruction-key h2{display:table;padding:.15rem .55rem;background:#ffdf88;border-radius:.4rem}
#instructions .instruction-lead{font-size:clamp(1.05rem,2.6vw,1.16rem);text-wrap:pretty}
#instructions strong{display:inline-block;max-width:100%;color:#29283d;font-weight:700}
#instructions .instruction-note{font-size:1rem;color:#605d76}
#instructions .scale-guide{padding:.1rem 0 .1rem 1rem;border-left:3px solid #b7a9f2}
#volume-guide{line-height:1.85}
@media(max-width:400px){#instructions .instruction-key{padding:.9rem}#instructions .instruction-section{margin:1.1rem 0}}