:root{font-family:"Fira Sans",system-ui,sans-serif;color:#354c70;background:#f4f7fc;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{min-height:100vh;min-height:100dvh;margin:0;display:grid;grid-template-rows:auto 1fr auto}
button,select{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #7c91cf;outline-offset:4px}
.ambient-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(20px,3vw,42px) clamp(22px,4vw,64px)}
.ambient-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#536b94;opacity:.76}
.ambient-brand>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#dfe8fa;color:#5573b3;font-size:19px}
.ambient-brand strong{font-size:18px;letter-spacing:-.7px}.ambient-brand em{font-style:normal;color:#ddae6a}
.header-actions{display:flex;gap:6px}.icon-button{width:42px;height:42px;display:grid;place-items:center;color:#7083a2;background:transparent;border:0;border-radius:12px}.icon-button:hover,.icon-button[aria-expanded="true"]{background:#e7edf8;color:#48649a}.icon-button svg{width:22px;height:22px}
.ambient-main{min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 24px 18px}
.word-display{width:min(100%,1050px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.content-label{margin-bottom:18px;color:#91a2bd;font-size:12px;letter-spacing:.03em}
.word-part{display:block;max-width:100%;padding:0;border:0;background:transparent;overflow-wrap:anywhere;color:inherit;line-height:1.25;text-align:center}
.word-token{border-radius:.14em;transition:background-color .12s,color .12s;box-decoration-break:clone;-webkit-box-decoration-break:clone}.word-token[data-speak]{cursor:pointer}.word-token.is-linked{background:#dce8fa;color:#2f5796}
.word-part[data-hidden="false"]{cursor:default}.word-part[data-hidden="true"]{color:#a6b6d0;transition:color .2s}.word-part[data-hidden="true"]:hover{color:#6683bd}
.word-part[data-hidden="true"]::after{content:attr(data-hint);display:block;color:#7285a5;font-size:13px;font-weight:500;letter-spacing:0;margin-top:4px}
.word-hanzi{font-family:"Noto Sans CJK SC","Noto Sans SC",sans-serif;font-size:clamp(2rem,var(--hanzi-size,15vw),14rem);font-weight:600;letter-spacing:.04em;line-height:1.2;color:#36568c}
.word-hanzi[data-hidden="true"]{font-family:system-ui,sans-serif;font-size:clamp(5rem,11vw,10rem);letter-spacing:.13em}
.word-pinyin{margin-top:10px;font-size:clamp(1.2rem,2.8vw,2.4rem);font-weight:400;color:#7189b5;letter-spacing:.04em}
.word-divider{width:42px;height:2px;border-radius:5px;background:#dbe4f2;margin:clamp(22px,3vh,36px) 0}
.word-german{font-size:clamp(1.25rem,2.5vw,2.1rem);font-weight:500;color:#455b79}
.empty-message{color:#7285a5;font-size:15px;line-height:1.7}.empty-message a{color:#526eaa}.empty-message button{display:block;margin:16px auto 0;padding:9px 14px;border:1px solid #dce5f3;border-radius:9px;background:white;color:#526eaa}
.ambient-footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:90px;padding:18px clamp(22px,4vw,64px) clamp(22px,3vw,40px);color:#7386a4;font-size:13px}
.footer-actions{display:flex;gap:10px}.footer-button{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;color:#6b7f9f;background:transparent;border:0;border-radius:10px}.footer-button:hover{color:#435f99;background:#e8eef8}.footer-button:disabled{opacity:.45;cursor:default}.footer-button svg{width:19px;height:19px}.footer-button span{font-size:17px}.interval-note{white-space:nowrap}.audio-note{position:absolute;bottom:calc(100% + 3px);left:clamp(22px,4vw,64px);max-width:min(420px,80vw);line-height:1.5;color:#657b9e;font-size:12px}
.settings{position:fixed;z-index:2;top:clamp(72px,8vw,105px);right:clamp(18px,4vw,64px);width:min(350px,calc(100vw - 36px));max-height:calc(100dvh - 100px);overflow:auto;padding:25px;border:1px solid #e0e8f3;border-radius:18px;background:#fff;box-shadow:0 20px 65px #536b9321;color:#3c5272}
.settings-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:24px}.settings-heading span{font-size:12px;color:#8496b0}.settings-heading h1{font-size:20px;letter-spacing:-.4px;margin:4px 0 0}.close-settings{border:0;background:transparent;color:#8092ad;font-size:26px;line-height:1;padding:0 4px}.close-settings:hover{color:#405a86}
.setting-row,.voice-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:600}.settings select{max-width:170px;padding:9px 30px 9px 11px;border:1px solid #e1e8f2;border-radius:9px;background:#f8fafd;color:#4e668b;font-size:12px}
.settings input[type="number"]{width:85px;padding:9px 11px;border:1px solid #e1e8f2;border-radius:9px;background:#f8fafd;color:#4e668b;font:inherit;font-size:12px}
.interval-control{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:400;color:#7386a4}
.visibility-options{border:0;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7;margin:22px 0;padding:20px 0}.visibility-options legend{padding:0 10px 0 0;font-size:13px;font-weight:600}.visibility-options p{font-size:12px;line-height:1.5;color:#8193ad;margin:2px 0 13px}.visibility-options label{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:13px}.visibility-options label span{margin-left:auto;color:#95a5bb;font-size:12px}.settings input[type="checkbox"]{width:16px;height:16px;margin:0;accent-color:#7186d9}
.sentence-options{border:0;border-top:1px solid #edf1f7;margin:22px 0 0;padding:18px 0 0}.sentence-options legend{font-size:13px;font-weight:600;padding:0 10px 0 0}.sentence-options .setting-row+.setting-row{margin-top:10px}.sentence-options .mix-setting{margin-bottom:18px}.sentence-options p{margin:10px 0 0;font-size:11px;line-height:1.5;color:#8193ad}.sentence-options select:disabled{opacity:.55}.translation-setting{margin-top:18px}
.mix-ratio{margin:0 0 18px;font-size:13px;font-weight:600}.ratio-labels{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:#7386a4;font-size:12px;font-weight:400}.settings input[type="range"]{display:block;width:100%;margin:9px 0 0;accent-color:#7186d9;cursor:pointer}
.setting-check{display:flex;align-items:start;gap:10px;font-size:13px}.setting-check input{margin-top:2px!important}.setting-check span{display:grid;gap:4px}.setting-check small{font-size:12px;color:#8193ad}.voice-setting{margin-top:20px}.settings-note{font-size:11px;line-height:1.5;color:#94a3b7;margin:24px 0 0}
@media(max-width:560px){.ambient-header{padding:20px}.ambient-main{padding:10px 20px}.ambient-footer{padding:16px 20px 22px;flex-wrap:wrap}.footer-actions{gap:2px}.footer-button{padding:8px}.interval-note{font-size:12px}.word-hanzi{font-size:clamp(2rem,var(--hanzi-size,15vw),9rem)}.word-hanzi[data-hidden="true"]{font-size:clamp(4rem,18vw,7rem)}.word-pinyin{margin-top:8px}.settings{top:72px;right:18px;max-height:calc(100dvh - 90px)}}
@media(max-height:600px){.ambient-header{padding-top:12px;padding-bottom:8px}.ambient-footer{min-height:55px;padding-top:6px;padding-bottom:14px}.word-hanzi{font-size:clamp(2rem,var(--hanzi-size,15vw),min(9rem,28vh))}.word-hanzi[data-hidden="true"]{font-size:clamp(3rem,11vw,6rem)}.word-pinyin{font-size:clamp(1rem,2vw,1.5rem)}.word-german{font-size:clamp(1rem,2vw,1.4rem)}.word-divider{margin:12px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}