*{box-sizing:border-box}body{margin:0;background:#f4eee0;color:#243e3d;font-family:'Yu Gothic','Meiryo',sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px #bd432a!important}[hidden]{display:none!important}.radio-page{max-width:1240px;padding:18px 14px 28px;margin:auto}.radio-page h1{margin:8px 0;font-size:clamp(24px,3vw,36px)}.radio-page>p{line-height:1.8;margin:10px 0 18px}.parent-note{font-size:14px}#host{container-type:inline-size;position:relative;isolation:isolate;width:100%;aspect-ratio:16/9;background:#518c86 url('./assets/studio.webp') center/cover;border:3px solid #286e6a;border-radius:16px;overflow:hidden;font-weight:800;color:#342d22}#host:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}#base{height:100%;display:flex;flex-direction:column;gap:2%;padding:1.5% 3% 2.5%}#host button{font-weight:800;border:2px solid #bd9855;border-radius:12px;background:#f9eac9;color:#244e4b;padding:.5em .8em;line-height:1.3;box-shadow:0 3px 0 #133e4270;min-height:2.3em}#host button:hover{border-color:#ba3f26}#host button[aria-pressed=true],#host button.coral{background:#c7482d;color:#fff9dc;border-color:#923b24}#host button[aria-disabled=true]{cursor:default}.radio-top{display:flex;align-items:center;justify-content:space-between;gap:10px;height:9%;min-height:38px;font-size:clamp(12px,1.3cqw,22px);padding:0 1%}.radio-top>strong{background:#f9e8c6;border:3px solid #a58343;border-radius:12px;padding:.3em .7em;font-size:1.3em;white-space:nowrap}.top-tools{display:flex;gap:6px}.top-tools button{padding:.4em .65em!important}.panel-art{background:#249b9b url('./assets/console.webp') center/100% 100%}.radio-cover{flex:1;min-height:0;margin:0 3%;padding:3.5% 8%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3%;text-align:center;font-size:clamp(14px,1.9cqw,30px)}.radio-cover h2{background:#fcf1d8;border:3px solid #c09e5c;border-radius:14px;padding:.2em .5em;margin:0;color:#a83923;font-size:2.1em;line-height:1.2}.radio-cover>p{margin:.2em 0;color:#fffae8;text-shadow:0 1px 2px #144b49}.stations{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:4%;margin:2% 0}.stations button{background-image:url('./assets/key.webp')!important;background-size:100% 100%!important;background-color:transparent!important;border:0!important;box-shadow:none!important;min-height:8.8em!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;color:#275953!important;position:relative}.stations button[aria-pressed=true]{outline:4px solid #d95535;outline-offset:-9px}.stations b{font-size:1.35em;color:#b63e27}.stations span{font-size:.8em}.stations small{font-size:.7em}.start-row{display:flex;align-items:center;justify-content:space-between;width:90%;gap:6%;margin-top:1%}.sample-pair{background:#fff0cf;border:2px solid #b29454;border-radius:9px;padding:.2em .5em;font-size:1.8em;white-space:nowrap}.sample-pair span{color:#c2442d}.start-row button{font-size:1.3em;flex:1}.play{flex:1;min-height:0;display:flex;flex-direction:column;padding:2.5% 6% 2%;gap:2%;font-size:clamp(12px,1.6cqw,26px)}.station-tabs{display:flex;gap:6px;align-items:center;flex-shrink:0;font-size:.77em}.station-tabs #restart{margin-left:auto}.play-body{flex:1;min-height:0;display:grid;grid-template-columns:40% minmax(0,1fr);gap:6%}.broadcast{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;gap:3%}.dial{background:url('./assets/dial.webp') center/100% 100%;width:min(100%,30cqw);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2%;border-radius:50%;overflow:hidden}.dial p{margin:0;font-size:1.3cqw}.dial strong{font-size:17cqw;line-height:1.06;color:#282824}.broadcast>button{width:82%;font-size:1.1em}.broadcast>small{font-size:.65em;color:#fff}.answer-deck{display:flex;flex-direction:column;min-height:0;gap:3%}.keys{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4%;flex:1;min-height:0}.keys button{background:transparent url('./assets/key.webp') center/100% 100%!important;border:0!important;border-radius:16px!important;font-size:7cqw;line-height:1!important;padding:3% 8%!important;min-height:0!important;box-shadow:none!important;position:relative;color:#282824!important}.keys button.correct::after,.keys button.wrong::after{content:'○';position:absolute;right:9%;bottom:6%;font-size:2.2cqw;color:#126348;background:#ffffed;border-radius:50%;width:1.15em;height:1.15em;display:grid;place-content:center;font-weight:900}.keys button.wrong::after{content:'△';color:#b24027}.keys button.correct{outline:4px solid #174f40;outline-offset:-5px}.keys button.wrong{outline:4px solid #b13d25;outline-offset:-5px}.feedback{margin:0;border-radius:10px;padding:.5em 1em;text-align:center;background:#c7482d;color:#fffce9;border:2px solid #973c23;min-height:3em;max-height:3em;display:grid;place-content:center;font-size:.85em;line-height:1.35}.tape{display:flex;gap:5%;align-items:center;justify-content:space-between;background:#173637;border:3px solid #b79351;border-radius:10px;padding:.4em .8em;color:#fff6db;flex-shrink:0;font-size:.85em}.tape span{white-space:nowrap}.tape b{font-size:1.35em;margin-left:.2em;color:#fff}.tape button{font-size:.9em}.record-screen{flex:1;min-height:0;background:#eee2c6 url('./assets/record.webp') center/100% 100%;margin:0 2%;padding:3% 8%;display:flex;flex-direction:column;gap:3%;font-size:clamp(12px,1.8cqw,28px)}.record-screen h2{margin:0;color:#9c3b24;font-size:1.7em}.record-body{display:grid;grid-template-columns:40% 1fr;gap:7%;flex:1;min-height:0}.record-totals{display:flex;flex-direction:column;justify-content:space-evenly}.record-totals p{margin:.2em 0;border-bottom:1px solid #b9a88b;padding-bottom:.3em;font-size:.75em}.record-totals strong{display:block;font-size:3em;line-height:1.2;color:#bf422b}.record-totals p:nth-child(2) strong{color:#136b63}.record-totals p:nth-child(3) strong{font-size:2em;color:#6a582f}.recent{display:flex;flex-direction:column;min-height:0}.recent h3{font-size:.8em;margin:0 0 .8em}.recent #recent-list{display:grid;grid-template-columns:1fr 1fr;gap:.4em .7em;overflow:auto;min-height:0}.recent article{display:flex;align-items:center;justify-content:space-between;gap:.2em;font-size:1.2em;border-bottom:1px dashed #b5a17a;padding:.15em 0}.recent article small{color:#a23f28;font-size:.65em}.recent article i{font-size:.7em;color:#296d5c;font-style:normal}.encouragement{font-size:.7em;text-align:center;margin:0}.record-actions{display:flex;gap:3%;justify-content:center}.record-actions button{font-size:.85em;white-space:nowrap}#modal{position:absolute;inset:0;background:#0b3f42cc;display:grid;place-items:center;padding:3%;z-index:8}.dialog{width:85%;max-width:800px;max-height:96%;overflow:auto;background:#fbefcf url('./assets/key.webp') center/100% 100%;padding:4% 5%;border-radius:18px;font-size:clamp(14px,1.7cqw,25px);color:#3b3426}.dialog header{display:flex;justify-content:space-between;align-items:center;gap:10px}.dialog h2{font-size:1.4em;margin:0}.dialog h3{font-size:1.1em}.dialog p{line-height:1.7}.dialog button{margin:.3em}.dialog small{display:block;line-height:1.7;font-size:.8em}.dialog input{width:95%}.dialog label{display:block;margin-top:1em}.help-pair{text-align:center;font-size:3em;color:#a54229;margin:.2em}.help-bottom{font-size:.85em}
@media(max-width:600px) and (orientation:portrait){.radio-page{padding:12px 8px}.radio-page>p{font-size:14px}#host{aspect-ratio:auto;height:700px}#host:fullscreen{height:100dvh}#base{padding:12px 8px 14px;gap:10px}.radio-top{flex-wrap:wrap;justify-content:center;height:auto;min-height:67px;gap:7px;font-size:12px}.radio-top>strong{font-size:16px}.top-tools button{min-height:30px!important}.radio-cover{margin:0;padding:22px 15px;gap:4%;font-size:16px}.radio-cover h2{font-size:1.6em}.radio-cover>p{font-size:.85em}.stations{grid-template-columns:1fr;gap:8px;margin:0}.stations button{min-height:88px!important;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;padding:14px 25px!important;background-image:url('./assets/record.webp')!important}.stations b{font-size:21px;grid-row:1/3;align-self:center}.stations span{font-size:14px}.stations small{font-size:13px}.stations button[aria-pressed=true]{outline-offset:-6px;outline-width:3px}.start-row{width:100%;gap:8px}.sample-pair{font-size:22px}.start-row button{font-size:19px}.play{padding:15px 14px;font-size:16px;gap:12px}.station-tabs{font-size:11px;flex-wrap:wrap;gap:4px;justify-content:center}.station-tabs button{padding:7px 8px!important;min-height:32px!important}.station-tabs #restart{margin-left:0}.play-body{grid-template-columns:1fr;grid-template-rows:220px minmax(0,1fr);gap:10px}.broadcast{display:grid;grid-template-columns:1fr auto;gap:7px}.dial{width:195px;max-width:100%;justify-self:center}.dial p{font-size:11px}.dial strong{font-size:105px}.broadcast>button{font-size:12px;width:50px;line-height:1.8!important;word-break:normal;padding:5px!important}.broadcast>small{font-size:10px}.answer-deck{gap:10px}.keys{gap:8px}.keys button{font-size:55px!important;min-height:80px!important}.keys button.correct::after,.keys button.wrong::after{font-size:22px}.feedback{font-size:13px;min-height:42px;max-height:42px;padding:5px}.tape{font-size:10px;gap:7px;padding:6px;flex-wrap:wrap;justify-content:center}.tape b{font-size:16px}.tape button{font-size:12px!important;min-height:28px!important;padding:4px 7px!important}.record-screen{margin:0;padding:22px 22px;font-size:16px;gap:16px}.record-screen h2{font-size:23px}.record-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px}.record-totals{flex-direction:row;gap:8px}.record-totals p{font-size:11px;flex:1}.record-totals strong{font-size:32px!important}.recent h3{font-size:13px}.recent #recent-list{gap:5px 12px}.recent article{font-size:22px;padding:5px 0}.record-actions{flex-wrap:wrap;gap:6px}.record-actions button{font-size:13px!important;padding:8px!important;min-height:36px!important}.encouragement{font-size:12px}.dialog{width:100%;padding:22px;font-size:15px}.dialog header button{font-size:12px}.dialog p{line-height:1.6}.dialog h2{font-size:20px}}
@media(max-height:550px) and (orientation:landscape){.radio-page{padding:8px}#host{width:min(100%,calc((100dvh - 16px)*16/9));margin:auto}.radio-top{min-height:30px;font-size:10px}.radio-top>strong{font-size:12px}.top-tools{gap:3px}.top-tools button{font-size:10px}.play{font-size:1.6cqw}.radio-cover{font-size:1.9cqw}.dialog{font-size:14px}.dialog p{margin:.5em 0}}

#speak span{display:inline-block;white-space:nowrap}

.recent article{line-height:1.3}.recent #recent-list{align-content:start}