:root{font-family:Segoe UI,Arial,sans-serif;color:#173c38;background:#f3f2eb}*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:32px}header{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:2px}.logo{font-size:36px;font-weight:800;letter-spacing:-3px}.tag{margin-left:auto;letter-spacing:0;color:#647971}.intro{padding:36px 0 28px}.intro h1{font-size:50px;letter-spacing:-2px;line-height:1.08;margin:12px 0}.intro p{color:#647971}.layout{display:grid;grid-template-columns:280px 1fr;gap:28px}aside{display:flex;flex-direction:column;gap:17px;background:#e8e9e0;border-radius:20px;padding:24px}label{font-size:13px;font-weight:600;display:block}select{display:block;width:100%;margin-top:8px;padding:10px;border:1px solid #ccd2c7;border-radius:8px;background:#fafaf4;color:#173c38}input[type=range]{width:100%;accent-color:#246653;margin-top:12px}output{float:right}.check{display:flex;align-items:center;gap:8px;line-height:1.5}.check input{accent-color:#246653}.player{background:#fffef8;border:1px solid #dde1d5;border-radius:24px;padding:28px;display:flex;flex-direction:column;min-height:560px}.cardtop{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:1px;color:#688176}.wordarea{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;padding:25px 0;min-height:270px}#phase{font-size:11px;letter-spacing:1px;color:#728478}h2{font-size:clamp(32px,4vw,58px);line-height:1.15;letter-spacing:-1px;margin:25px 0 12px}#polish{font-size:24px;margin:0 0 20px}#phonetic{font-size:16px;color:#64786c;line-height:1.6;margin:0}.progress{height:4px;background:#e8ece1;border-radius:4px;overflow:hidden}#bar{height:100%;width:0;background:#d8a644;transition:width .3s}.controls{display:flex;justify-content:center;gap:12px;margin-top:24px}button{cursor:pointer;font:inherit;border:1px solid #d6ddcf;border-radius:10px;padding:13px 20px;background:transparent;color:#173c38}button:hover{background:#e9eee2}.primary{background:#205b4b;color:white;min-width:140px}.primary:hover{background:#174637}.ratings{display:flex;justify-content:center;gap:15px;margin:14px 0}.ratings button{border:0;font-size:13px;padding:8px}footer{text-align:center;font-size:12px;color:#728478;margin-top:12px}button:focus-visible,select:focus-visible{outline:3px solid #d8a644;outline-offset:3px}@media(max-width:700px){main{padding:20px}.intro h1{font-size:38px}.layout{grid-template-columns:1fr}aside{display:grid;grid-template-columns:1fr 1fr;padding:18px;gap:14px}.player{padding:20px;min-height:490px}.tag{display:none}.controls{gap:8px}button{padding:12px}.primary{min-width:105px}}

.settings{min-width:0;background:#e8e9e0;border-radius:20px;align-self:start}.settings summary{cursor:pointer;padding:20px 24px;list-style:none;font-size:14px;font-weight:600;min-height:48px}.settings summary::-webkit-details-marker{display:none}.settings summary span{float:right}.settings aside{padding-top:0}.layout>*{min-width:0}select{min-width:0;max-width:100%;font-size:16px;min-height:46px}button{min-height:48px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.45;cursor:default}input[type=checkbox]{width:20px;height:20px;flex-shrink:0}input[type=range]{min-height:28px}.wordarea{overflow-wrap:anywhere}.ratings button{min-height:44px}.cardtop{flex-wrap:wrap}
@media(max-width:700px){main{padding:16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(20px,env(safe-area-inset-bottom))}header{font-size:10px;letter-spacing:1px;gap:12px}.logo{font-size:30px}.intro{padding:10px 0 12px}.intro h1{font-size:30px;line-height:1.08;margin:8px 0}.intro h1 br{display:none}.intro p{font-size:14px;margin:8px 0}.layout{gap:12px}.settings summary{padding:16px 18px}.settings aside{grid-template-columns:1fr 1fr;gap:16px}.settings aside label:nth-of-type(5),.settings aside label:nth-of-type(6),.check{grid-column:1/-1}.player{min-height:440px;padding:20px 16px;border-radius:18px}.wordarea{min-height:210px;padding:20px 0}h2{font-size:clamp(30px,8vw,46px);margin:18px 0 12px}#polish{font-size:21px}#phonetic{font-size:16px}.controls{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:7px;margin-top:18px}.controls button{padding:12px 6px;font-size:14px;min-width:0}.ratings{gap:8px;margin:8px 0}.ratings button{font-size:13px;padding:8px}footer{line-height:1.5}#phase{font-size:10px;letter-spacing:.5px}}
@media(max-width:350px){.settings aside{grid-template-columns:1fr}.settings aside label{grid-column:1}.controls button{font-size:12px}.cardtop{font-size:10px}}
@media(prefers-reduced-motion:reduce){#bar{transition:none}}
@media(max-width:700px){.settings aside label{grid-column:auto}.settings aside label:has(#enVoice),.settings aside label:has(#plVoice),.settings aside .check{grid-column:1/-1}}
.database{text-align:center;font-size:11px;line-height:1.8;color:#728478;margin-top:12px}.database a{color:#326b58}
#phonetic.speaking{color:#173c38;font-weight:700;background:#eef0d9;border-radius:10px;padding:10px}
.level-counts{font-size:12px;line-height:1.6;color:#526d60}@media(max-width:700px){.settings aside .level-counts{grid-column:1/-1}}
:root{color-scheme:light}.theme-toggle{margin-left:8px;flex-shrink:0;width:auto;min-height:44px;padding:10px 14px;font-size:13px;line-height:1;letter-spacing:0}.theme-toggle:focus-visible{outline:3px solid #d8a644;outline-offset:3px}
:root[data-theme=dark]{color-scheme:dark;background:#111c19;color:#e3eee7}
[data-theme=dark] .settings,[data-theme=dark] aside{background:#1b2a24}
[data-theme=dark] .player{background:#17231e;border-color:#35463a}
[data-theme=dark] select{background:#111c19;border-color:#46584a;color:#e3eee7}
[data-theme=dark] button{color:#e3eee7;border-color:#46584a}
[data-theme=dark] button:hover{background:#2a4033}
[data-theme=dark] .primary{background:#91c5aa;color:#10251a;border-color:#91c5aa}
[data-theme=dark] .primary:hover{background:#b0dbc3}
[data-theme=dark] .tag,[data-theme=dark] .intro p,[data-theme=dark] .cardtop,[data-theme=dark] #phase,[data-theme=dark] #phonetic,[data-theme=dark] footer,[data-theme=dark] .database,[data-theme=dark] .level-counts{color:#acbeb0}
[data-theme=dark] .progress{background:#304136}
[data-theme=dark] input[type=range],[data-theme=dark] input[type=checkbox]{accent-color:#91c5aa}
[data-theme=dark] .database a{color:#a2d8ba}
[data-theme=dark] #phonetic.speaking{background:#38452b;color:#f0f2cd}
@media(max-width:700px){.theme-toggle{margin-left:auto;width:auto;min-height:44px;font-size:12px}}
.faq-page{max-width:920px}.faq-page .theme-toggle{margin-left:auto}.faq-page .intro h1{font-size:42px}.faq-page a{color:#326b58;text-underline-offset:3px}.faq-nav{display:flex;flex-wrap:wrap;gap:10px 20px;margin:8px 0 28px;font-size:14px}.faq-nav a{display:inline-flex;align-items:center;min-height:44px;padding:10px 0}.faq-section{scroll-margin-top:20px;margin:30px 0}.faq-section h2{font-size:24px;letter-spacing:-.4px;margin:0 0 16px}.faq-list{border:1px solid #dde1d5;background:#fffef8;border-radius:18px;overflow:hidden}.faq-list details{padding:20px 24px;border-bottom:1px solid #dde1d5}.faq-list details:last-child{border-bottom:0}.faq-list summary{cursor:pointer;font-size:16px;font-weight:600;line-height:1.5}.faq-list details[open] summary{margin-bottom:12px}.faq-list p,.faq-note p{font-size:15px;line-height:1.8;margin:10px 0 0}.faq-list summary:focus-visible{outline:3px solid #d8a644;outline-offset:5px;border-radius:3px}.faq-note{padding:18px 24px;border-left:3px solid #205b4b;background:#e8e9e0;border-radius:0 12px 12px 0}.faq-note p{margin:0}.faq-date{font-size:12px;color:#647971}[data-theme=dark] .faq-page a{color:#a2d8ba}[data-theme=dark] .faq-list{background:#17231e;border-color:#35463a}[data-theme=dark] .faq-list details{border-color:#35463a}[data-theme=dark] .faq-note{background:#1b2a24;border-color:#91c5aa}[data-theme=dark] .faq-date{color:#acbeb0}@media(max-width:700px){.faq-page .intro h1{font-size:32px}.faq-nav{gap:4px 18px;margin-bottom:20px}.faq-list details{padding:18px 16px}.faq-section{margin:24px 0}.faq-section h2{font-size:22px}.faq-note{padding:16px}}
.brand-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}.brand-name{line-height:1.5}.brand-copy .tag{display:block;margin:0;font-size:12px;letter-spacing:0;line-height:1.4}@media(max-width:700px){.brand-copy{gap:3px}.brand-copy .tag{font-size:11px}}