:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#24342f;--frame:#df9c31;--accent:#805316;--ink:#29392f;--wash:#f5dfb7;--glow:#e4b75f;--secondary:#eff1e1;--card-ratio:2/3;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-width:320px;height:100vh;height:100dvh;overflow:hidden;background:var(--wash);-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{border:0}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}.ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 14% 22%,#ffffffb8,transparent 50%),radial-gradient(ellipse at 83% 78%,var(--glow),transparent 68%),linear-gradient(140deg,var(--secondary),var(--wash) 60%);transition:background 1s}.ambient:after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.12' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.16;pointer-events:none}.topbar{height:88px;padding:22px 40px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:21px;letter-spacing:-.5px;line-height:1.2}.brand strong{font-weight:normal}.brand small{display:block;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;letter-spacing:3px;margin-top:5px;opacity:.6}.brand-mark{height:44px;width:44px;display:grid;place-items:center;background:#ffffff85;border:1px solid #ffffff9c;border-radius:14px;box-shadow:0 3px 12px #35220e05}.brand-mark svg{width:23px;height:23px}.header-actions{display:flex;align-items:center;gap:22px}.connection{font-size:13px;opacity:.65}.icon-button{width:44px;height:44px;border-radius:50%;background:#ffffff55;display:grid;place-items:center;transition:background .2s}.icon-button:hover{background:#ffffffac}#stage{position:relative;height:calc(100dvh - 238px);min-height:100px;display:flex;align-items:center;justify-content:center;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}figure{margin:0;height:100%;max-width:calc(100vw - 170px);display:flex;align-items:center;justify-content:center}.card-wrap{position:relative;height:100%;aspect-ratio:var(--card-ratio);max-width:100%;border-radius:19px;box-shadow:0 24px 65px -20px #47321655,0 3px 12px #46392518;background:#fffdf7;transition:box-shadow .4s}.card-wrap>img{display:block;width:100%;height:100%;object-fit:contain;border-radius:19px;transition:opacity .18s}.card-wrap>img.changing{opacity:.15}.card-status{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:#fffcf3e8;border-radius:19px;padding:30px;font-size:15px;line-height:1.8}.card-status[hidden]{display:none}.zoom-button{position:absolute;right:12px;bottom:12px;width:36px;height:36px;background:#fffdf0c9;border:1px solid #ffffffab;border-radius:10px;display:grid;place-items:center;opacity:0;transition:opacity .2s;box-shadow:0 2px 15px #0001}.card-wrap:hover .zoom-button,.zoom-button:focus-visible{opacity:1}.zoom-button svg{width:18px;height:18px}.side-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#ffffff60;border:1px solid #ffffff87;box-shadow:0 4px 16px #35220e04;transition:background .2s,opacity .3s}.side-nav:hover{background:#ffffffba}.side-nav.previous{left:max(34px,calc(50% - (100dvh - 238px)/3 - 94px))}.side-nav.next{right:max(34px,calc(50% - (100dvh - 238px)/3 - 94px))}.bottom{height:150px;display:flex;align-items:center;flex-direction:column;position:relative;padding:14px 16px 12px;gap:12px}.card-caption{display:flex;align-items:center;gap:11px;min-height:18px;max-width:90vw;white-space:nowrap;overflow:hidden}.card-caption>#cardNumber{font-size:10px;letter-spacing:1.7px;opacity:.6}.caption-line{height:1px;width:18px;background:currentColor;opacity:.25}#wordLabel{font-family:Georgia,serif;font-size:17px}#meaningLabel{font-size:12px;opacity:.65;overflow:hidden;text-overflow:ellipsis;max-width:220px}.dock{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #ffffffc7;border-radius:22px;background:#ffffffa1;box-shadow:0 8px 30px #3a280e0b,inset 0 1px #ffffff;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.dock-icon{width:42px;height:42px;border-radius:14px;background:transparent;display:grid;place-items:center}.dock-icon:hover{background:#ffffff91}.dock-icon svg{width:21px;height:21px}.random-button{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 20px;height:42px;border-radius:14px;background:var(--accent);color:white;font-size:14px;font-weight:500;box-shadow:0 3px 8px #0000000d;transition:background .7s,transform .2s}.random-button:active{transform:scale(.96)}.random-button svg{width:18px;height:18px}.dock-divider{height:23px;width:1px;background:#24342f13;margin:0 2px}.hint{display:flex;gap:11px;align-items:center;justify-content:center;font-size:11px;color:var(--ink);opacity:.6}.hint i{font-style:normal;opacity:.5}.round-progress{margin-left:9px;font-variant-numeric:tabular-nums;font-size:10px}.chrome{transition:opacity .45s}.is-idle .chrome{opacity:0}.is-idle .chrome:focus-within,.is-idle .chrome:hover{opacity:1}dialog{color:var(--ink);padding:28px;border:3px solid var(--frame);border-radius:26px;background:#fffef8;box-shadow:0 24px 100px #1114;max-height:85dvh;overflow:auto;width:min(560px,calc(100vw - 32px))}dialog::backdrop{background:#28342945;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:600}h1{font-size:24px;font-weight:600;margin:9px 0 0;letter-spacing:-.4px}.dialog-heading .icon-button{background:#29392f08;width:36px;height:36px}h2{font-size:15px;margin:0 0 7px;font-weight:600}p{font-size:13px;line-height:1.65;margin:0}.search-field{display:flex;align-items:center;gap:12px;background:var(--wash);border:1px solid var(--frame);border-radius:14px;padding:8px 10px 8px 15px}.search-field>svg{color:var(--accent);width:20px;height:20px}.search-field input{width:100%;min-width:0;border:0;background:transparent;outline:none;font-size:16px;color:var(--ink);height:38px}.search-field input:focus-visible{outline:none}.search-field button{padding:9px 12px;border-radius:9px;background:var(--accent);color:white;white-space:nowrap;font-size:13px}.search-meta{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px;font-size:12px;color:#526155}.language-choice{display:flex;align-items:center;gap:8px}select{border:1px solid #25342b18;border-radius:8px;background:#fff;padding:7px;color:var(--ink);font-size:13px}.search-results{min-height:90px;max-height:38dvh;overflow:auto;display:grid;gap:7px}.result{padding:13px 14px;border:1px solid #24342f0a;border-radius:12px;text-align:left;display:flex;align-items:center;gap:13px;background:#29392f03}.result:hover{background:var(--wash)}.result-color{width:6px;height:34px;border-radius:4px;flex-shrink:0}.result-copy{flex:1;min-width:0}.result-word{font-family:Georgia,serif;font-size:20px;display:block}.result-meaning{font-size:13px;opacity:.7;display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-number{font-size:11px;opacity:.45}.search-footer{display:flex;align-items:center;gap:9px;padding-top:19px;margin-top:18px;border-top:1px solid #24342f12;font-size:12px;opacity:.65}.search-footer svg{width:15px;height:15px}.empty-results{padding:30px 8px;text-align:center;font-size:14px;line-height:1.9;color:#647166}.setting-row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 0;border-top:1px solid #29392f10}.setting-row p{font-size:12px;color:#68736a}.setting-row input[role=switch]{appearance:none;-webkit-appearance:none;flex-shrink:0;width:44px;height:26px;background:#cdd3cc;border-radius:20px;position:relative;cursor:pointer;transition:background .2s}.setting-row input[role=switch]:after{content:"";position:absolute;width:20px;height:20px;top:3px;left:3px;border-radius:50%;background:white;box-shadow:0 1px 4px #0002;transition:transform .2s}.setting-row input[role=switch]:checked{background:var(--accent)}.setting-row input[role=switch]:checked:after{transform:translateX(18px)}.cache-section{padding:22px 0;border-top:1px solid #29392f10}.cache-title{display:flex;align-items:center;justify-content:space-between}.cache-title span{font-size:12px;opacity:.7}.cache-meter{height:7px;background:#29392f0b;border-radius:6px;margin:12px 0}.cache-meter>div{height:100%;width:0;background:var(--accent);border-radius:6px;transition:width .4s}#cacheStats{font-size:13px}.setting-note{margin-top:10px;color:#68736a;font-size:12px}.cache-actions{display:flex;gap:12px;margin-top:18px}.cache-actions button{border-radius:10px;padding:11px 14px;background:var(--accent);color:white;font-size:13px}.cache-actions .quiet-button{background:#29392f07;color:var(--ink)}#downloadStatus{margin-top:10px;font-size:12px}.home-screen-tip{display:flex;gap:13px;border-radius:13px;background:var(--wash);padding:17px}.home-screen-tip strong{font-size:13px}.home-screen-tip p{font-size:12px;margin-top:5px;opacity:.7}.home-screen-tip svg{width:21px;height:21px}.voice-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#1c302648;backdrop-filter:blur(8px);pointer-events:none}.voice-overlay[hidden]{display:none}.voice-bubble{width:280px;border:3px solid var(--frame);border-radius:30px;background:#fffdf4f5;padding:34px 24px;display:flex;align-items:center;flex-direction:column;gap:16px;box-shadow:0 20px 80px #0002}.voice-bubble strong{font-size:20px}.voice-bubble span{font-size:14px;max-width:100%;text-align:center;line-height:1.6}.voice-bubble small{font-size:11px;opacity:.5}.voice-waves{display:flex;align-items:center;gap:7px;color:var(--accent);height:45px}.voice-waves svg{width:30px;height:30px;margin:0 8px}.voice-waves b{width:3px;height:18px;background:currentColor;border-radius:4px;animation:wave .8s ease-in-out infinite alternate}.voice-waves b:nth-child(2n){height:32px;animation-delay:-.3s}.voice-waves b:nth-child(3n){animation-delay:-.5s}@keyframes wave{to{transform:scaleY(.45)}}.toast{position:fixed;z-index:150;bottom:160px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:14px;background:#25352fea;color:white;font-size:14px;line-height:1.6;max-width:min(470px,90vw);text-align:center;box-shadow:0 5px 30px #0002}.toast[hidden]{display:none}.zoom-dialog{width:95vw;max-width:1800px;height:94dvh;max-height:94dvh;padding:12px;background:#fbfaf5;overflow:auto;border-width:0}.zoom-dialog img{width:100%;height:auto;display:block}.zoom-close{position:fixed;top:4dvh;right:5vw;background:#fffef4ed;z-index:2;box-shadow:0 3px 20px #0002}
@media (orientation:portrait){.topbar{height:76px;padding:18px 26px}.connection{display:none}#stage{height:calc(100dvh - 222px)}figure{max-width:calc(100vw - 36px)}.card-wrap{max-height:calc((100vw - 36px)*1.5)}.side-nav{display:none}.bottom{height:146px;padding-top:13px}.zoom-button{opacity:.7}.hint{font-size:11px}.round-progress{display:none}}
@media (max-width:540px){.topbar{height:68px;padding:12px 18px}.brand{font-size:18px;gap:9px}.brand-mark{height:38px;width:38px;border-radius:12px}.brand small{font-size:10px;letter-spacing:2px}.icon-button{width:40px;height:40px}#stage{height:calc(100dvh - 213px)}figure{max-width:calc(100vw - 28px)}.card-wrap{max-height:calc((100vw - 28px)*1.5);border-radius:15px}.card-wrap>img{border-radius:15px}.bottom{height:145px;gap:11px}.card-caption>#cardNumber{font-size:9px}#meaningLabel{max-width:130px}.hint{font-size:10px;gap:8px}dialog{padding:21px;border-radius:22px}.search-footer{font-size:11px}.search-meta{font-size:11px}h1{font-size:22px}}
@media (orientation:landscape) and (max-height:650px){.topbar{height:62px;padding:12px 26px}#stage{height:calc(100dvh - 172px)}.bottom{height:110px;padding-top:9px;gap:8px}.hint{display:none}.card-caption{min-height:16px}.dock{padding:5px 8px}.dock-icon,.random-button{height:36px}.side-nav.previous{left:calc(50% - (100dvh - 172px)/3 - 78px)}.side-nav.next{right:calc(50% - (100dvh - 172px)/3 - 78px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Full-screen reading: gestures are the only controls on the reading surface. */
.ambient{background:linear-gradient(to right,var(--secondary) 0%,var(--frame) var(--card-side-inset,25%),var(--frame) calc(100% - var(--card-side-inset,25%)),var(--secondary) 100%)}
.ambient:after{display:none}
.topbar,.bottom,.side-nav,.zoom-button{display:none!important}
#stage{height:100vh;height:100dvh;width:100vw;min-height:0}
#cardFigure{height:100%;width:100%;max-width:none}
.card-wrap{height:100%;width:100%;max-width:none;max-height:none;aspect-ratio:auto;background:transparent;border-radius:0;box-shadow:none}
.card-wrap>img{width:100%;height:100%;object-fit:contain;border-radius:0;clip-path:inset(var(--card-top-inset,0px) var(--card-side-inset,0px) round var(--card-corner-radius,0px))}
.card-status{background:transparent;border-radius:0}
.toast{bottom:max(25px,env(safe-area-inset-bottom))}
/* Match search and speech typography to the active card frame. */
#searchDialog,.voice-bubble{border-width:6px}
#searchDialog .search-field{border-width:2px}
#searchDialog,#searchDialog *,#voiceOverlay,#voiceOverlay *{font-family:"Kaiti SC","Kaiti TC","STKaiti","KaiTi","楷体",serif;color:var(--frame)}
#searchDialog .search-field input::placeholder{color:var(--frame);opacity:1}
#searchDialog .search-field button{background:#fffef8}
#searchDialog .result-meaning,#searchDialog .result-number,#searchDialog .search-footer,.voice-bubble small{opacity:1}
/* A static raised appearance, without card or background animation. */
.card-wrap{filter:drop-shadow(0 14px 18px #0005) drop-shadow(0 2px 5px #0003);transition:none}
.card-wrap>img,.ambient{transition:none}
.card-status{display:none}
.reading-controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--frame)}
.reading-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:17px}
.reading-toggle small{display:block;margin-top:4px;font-size:12px}
.reading-toggle input{appearance:none;-webkit-appearance:none;position:relative;width:44px;height:26px;margin:0;border:2px solid var(--frame);border-radius:20px;background:#fffef8;flex-shrink:0}
.reading-toggle input:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--frame)}
.reading-toggle input:checked{background:var(--frame)}
.reading-toggle input:checked:after{left:21px;background:#fffef8}
#readCurrent{border:2px solid var(--frame);border-radius:10px;padding:10px 12px;background:#fffef8;font-size:14px}
#readingHint{flex-basis:100%;font-size:12px}
#searchDialog .eyebrow{font-family:inherit;font-size:20px;font-weight:400;letter-spacing:normal}
.english-reading-options{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;width:100%}
.english-reading-options label{display:flex;flex-direction:column;gap:6px;font-size:13px}
.english-reading-options label:first-child{flex:1;min-width:150px}
#englishReadingVoice{width:100%;max-width:100%}
#repeatEnglish{padding:9px 10px;border:2px solid var(--frame);border-radius:8px;background:#fffef8;font-size:14px}