:root{font-family:'Nunito','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;color:#514d42;background:#faf6eb;font-synthesis:none;text-rendering:optimizeLegibility;--green:#dcebd2;--blue:#d9e9f2;--ink-soft:#928976;--shadow:0 12px 30px rgba(111,96,69,.09)}
*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#fffdf7 0,#faf6eb 68%);-webkit-tap-highlight-color:transparent}button{font:inherit}button:focus-visible{outline:3px solid #d2a66c;outline-offset:3px}.page-shell{width:min(100% - 36px,1040px);margin:0 auto;padding:22px 0 18px}.topbar{display:flex;align-items:center;gap:11px}.brand-mark{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:15px 18px 15px 19px;background:#e6eedb;color:#6e865f;font-size:25px;font-weight:900;transform:rotate(-4deg)}.brand-mark i{position:absolute;right:3px;top:-4px;color:#e7ad70;font-size:13px;font-style:normal}.brand-copy p{margin:0 0 1px;color:#a39377;font-size:9px;letter-spacing:.12em;font-weight:900}.brand-copy h1{margin:0;color:#5f7654;font-size:19px;font-weight:900;line-height:1.2}.edition{margin-left:auto;padding:7px 11px;border:1px solid #eee5d2;border-radius:99px;background:rgba(255,253,248,.7);color:#a39479;font-size:11px;font-weight:800}.intro{display:flex;justify-content:space-between;align-items:center;min-height:126px;padding:16px 26px 12px}.eyebrow{color:#bc9870;font-size:12px;font-weight:900;letter-spacing:.08em}.intro h2{margin:4px 0;color:#514d42;font-size:clamp(25px,4vw,32px);line-height:1.2;letter-spacing:-.04em}.intro p{margin:7px 0 0;color:#918873;font-size:13px}.mascot{display:flex;align-items:center;gap:8px;color:#8c816c;font-size:11px;font-weight:800}.mascot span{font-size:43px;filter:drop-shadow(0 5px 4px rgba(110,92,70,.1))}.mode-tabs,.group-tabs,.category-tabs{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}.mode-tabs::-webkit-scrollbar,.group-tabs::-webkit-scrollbar,.category-tabs::-webkit-scrollbar{display:none}.mode-tabs{margin:0 0 11px}.mode-tab,.group-tab,.category-tab{flex:0 0 auto;min-height:42px;padding:0 15px;border:1px solid #ebe3d2;border-radius:13px;background:rgba(255,253,248,.72);color:#8e816b;font-size:12px;font-weight:900;cursor:pointer;touch-action:manipulation}.mode-tab.active,.group-tab.active,.category-tab.active{border-color:#c7d8b7;background:#eaf1e2;color:#607851;box-shadow:0 2px 6px rgba(97,122,77,.08)}.mode-tab span{display:inline-grid;place-items:center;width:19px;height:19px;margin-left:3px;border-radius:50%;background:#fff;color:#6f845f;font-size:9px}.group-tabs{margin-bottom:10px}.group-tab{min-width:48px;min-height:38px;padding:0 13px}.group-tab small{margin-left:4px;color:#a89c84;font-size:9px}.bubble-trays{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px}.tray,.whole-panel,.reading-card-panel{position:relative;min-height:204px;padding:17px 18px 12px;border:1px solid rgba(255,255,255,.9);border-radius:23px;background:rgba(255,255,255,.53);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.initial-tray{background:linear-gradient(145deg,rgba(244,249,239,.92),rgba(255,255,255,.63))}.final-tray{background:linear-gradient(145deg,rgba(240,248,251,.93),rgba(255,255,255,.65))}.tray-heading,.whole-heading{display:flex;align-items:center;justify-content:space-between}.tray-heading>div,.whole-heading>div{display:flex;align-items:center;gap:9px}.step-number{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#fffdf8;color:#a59a83;font-size:10px;font-weight:900}.tray-heading h2,.whole-heading h2{margin:0;color:#5d594d;font-size:16px;font-weight:900}.tray-heading p,.whole-heading p{margin:2px 0 0;color:#9a927f;font-size:10px}.tray-count{padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.75);color:#a09783;font-size:10px;font-weight:800}.bubble-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,14px);min-height:108px;padding:8px 0 2px}.bubble{position:relative;display:grid;place-items:center;width:58px;height:58px;min-width:48px;min-height:48px;flex:0 0 58px;border:1px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:inset 5px 5px 12px rgba(255,255,255,.65),inset -4px -6px 12px rgba(87,113,90,.08),0 7px 13px rgba(94,111,87,.11);background:radial-gradient(circle at 34% 27%,#fafff5 0,#e3f0d9 49%,#d0e4c7 100%);color:#53674c;font-size:24px;font-weight:900;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .2s,box-shadow .2s;animation:bubble-in .3s both}.final-bubble{background:radial-gradient(circle at 34% 27%,#fbfeff 0,#e1f0f6 49%,#cde2ed 100%);color:#4f788b;box-shadow:inset 5px 5px 12px rgba(255,255,255,.8),inset -4px -6px 12px rgba(75,119,140,.08),0 7px 13px rgba(80,125,145,.12)}.bubble::before{content:"";position:absolute;left:12px;top:8px;width:14px;height:7px;border-radius:50%;background:rgba(255,255,255,.7);transform:rotate(-32deg)}.bubble:hover{transform:translateY(-2px) scale(1.04)}.bubble[aria-pressed=true]{transform:scale(1.1);box-shadow:0 0 0 4px rgba(151,185,133,.24),0 9px 16px rgba(94,111,87,.15)}.final-bubble[aria-pressed=true]{box-shadow:0 0 0 4px rgba(128,174,195,.24),0 9px 16px rgba(80,125,145,.16)}.bubble.dragging{transform:scale(1.12)}.bubble-list .bubble:nth-child(2){animation-delay:.04s}.bubble-list .bubble:nth-child(3){animation-delay:.08s}.bubble-list .bubble:nth-child(4){animation-delay:.12s}.tray-connector{position:absolute;z-index:1;left:50%;top:100px;display:flex;flex-direction:column;align-items:center;gap:2px;transform:translateX(-50%);pointer-events:none}.tray-connector span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #efe6d6;border-radius:50%;background:#faf6eb;color:#b7a684;font-size:16px}.tray-connector small{color:#b0a48e;font-size:8px}.category-tabs{gap:5px;margin-top:9px}.category-tab{min-height:30px;padding:0 9px;border-radius:10px;font-size:9px}.final-list{min-height:91px;align-content:center}.empty-hint{position:absolute;left:0;right:0;top:102px;display:flex;align-items:center;justify-content:center;gap:8px;color:#b5b1a5;pointer-events:none}.empty-hint[hidden]{display:none}.empty-hint span{font-size:25px}.empty-hint p{font-size:11px}.pager{position:absolute;right:15px;bottom:9px;display:flex;align-items:center;gap:8px;color:#93866f;font-size:9px;font-weight:800}.pager button{width:30px;height:30px;border:1px solid #e7dfcf;border-radius:10px;background:#fffdf8;color:#88785e;font-size:22px;line-height:1;cursor:pointer;touch-action:manipulation}.pager button:disabled{opacity:.42;cursor:default}.whole-panel{min-height:195px;margin:0 0 14px;background:linear-gradient(145deg,rgba(244,249,239,.92),rgba(255,255,255,.63))}.whole-bubbles{display:grid;grid-template-columns:repeat(8,minmax(48px,1fr));gap:9px;margin-top:15px}.whole-bubble{width:100%;min-height:48px;border:1px solid #dfe9d6;border-radius:16px;background:#eff5e9;color:#5c7652;font-size:19px;font-weight:900;cursor:pointer;touch-action:manipulation}.whole-bubble[aria-pressed=true]{box-shadow:0 0 0 3px rgba(151,185,133,.22)}.reading-stage{position:relative;margin-top:18px;padding:17px 20px 13px;border:1px solid #e8dcc5;border-radius:25px;background:linear-gradient(150deg,#f3e7d2,#ebd8b9);box-shadow:0 5px 0 rgba(196,171,130,.22),0 15px 30px rgba(111,96,69,.09);overflow:hidden}.reading-stage::before{content:"";position:absolute;left:12px;right:12px;top:7px;height:1px;background:rgba(255,255,255,.7)}.stage-heading{display:flex;justify-content:space-between;align-items:center;color:#8e795b;font-size:10px;font-weight:900}.stage-heading span:last-child{color:#a18d6d;font-size:9px;font-weight:700}.combination{display:flex;align-items:center;justify-content:center;gap:clamp(7px,2.2vw,22px);min-height:102px}.slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:72px;height:72px;border:2px dashed rgba(173,154,120,.42);border-radius:50%;background:rgba(255,253,248,.4);transition:transform .25s,background .25s}.slot-label{color:#a08e70;font-size:8px;font-weight:800}.slot-letter{font-size:27px;font-weight:900;color:#79705f}.initial-slot.has-letter{border-style:solid;border-color:#c7d9ba;background:#e5efdd}.initial-slot.has-letter .slot-letter{color:#617956}.final-slot.has-letter{border-style:solid;border-color:#bed4df;background:#e2eff4}.final-slot.has-letter .slot-letter{color:#547f93}.plus-sign,.equals-sign{color:#ab9877;font-size:17px;font-weight:800}.result-bubble{display:grid;place-items:center;width:82px;height:82px;border:1px solid rgba(255,255,255,.98);border-radius:50%;background:radial-gradient(circle at 34% 26%,#fffef9,#faf7ed 58%,#eee4cf);box-shadow:inset 6px 6px 13px rgba(255,255,255,.9),inset -5px -7px 13px rgba(160,133,91,.08),0 8px 15px rgba(125,101,66,.11);color:#665943;font-size:30px;font-weight:900;transition:transform .25s,background .25s}.result-bubble.has-result{background:radial-gradient(circle at 34% 26%,#fffef9,#f1f4dc 58%,#dde8c9);color:#5c764f}.result-bubble.is-merging{animation:merge-pop .48s cubic-bezier(.2,.8,.25,1)}.drag-hint{margin:-2px 0 9px;text-align:center;color:#9a8869;font-size:9px}.stage-actions{display:flex;justify-content:center;gap:9px}.stage-actions button{min-height:44px;padding:0 15px;border:0;border-radius:14px;font-size:12px;font-weight:900;cursor:pointer;touch-action:manipulation}.stage-actions button:disabled{cursor:not-allowed;opacity:.55}.combine-button{background:#789168;color:#fffdf8;box-shadow:0 4px 0 #657e58}.combine-button span{margin-right:4px;color:#f7e5aa}.listen-button{border:1px solid #d3c4a8!important;background:#fffaf0;color:#856e4d}.listen-button small{margin-left:4px;color:#ae9c7f;font-size:8px}.result-info{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:12px auto 0}.result-info[hidden],.tone-area[hidden]{display:none}.info-chip{padding:7px 10px;border:1px solid rgba(255,255,255,.8);border-radius:11px;background:rgba(255,253,247,.65);color:#7e7058;font-size:10px;font-weight:800}.info-chip strong{color:#5c7652}.tone-area{margin:10px auto 0;text-align:center;color:#8d7a5d;font-size:10px}.tone-button{min-width:48px;min-height:40px;margin:3px;padding:0 9px;border:1px solid #dfd4c0;border-radius:11px;background:#fffdf7;color:#6c5f48;font-size:17px;font-weight:900;cursor:pointer}.tone-button[aria-pressed=true]{border-color:#b8c99e;background:#edf3e5;color:#5c764f}.tone-button:disabled{opacity:.5;cursor:default}.status-message{min-height:16px;margin:9px 0 0;text-align:center;color:#8e816b;font-size:9px;font-weight:700}.debug-panel{margin-top:12px;padding:10px 12px;border:1px solid #e9e0cf;border-radius:15px;background:#fffdf8;color:#82755e;font-size:11px}.debug-panel summary{font-weight:900;cursor:pointer}.debug-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.debug-grid pre{max-height:230px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.5 ui-monospace,monospace}.debug-grid div{line-height:1.7}footer{display:flex;justify-content:space-between;gap:12px;margin:13px 4px 0;color:#b0a58e;font-size:9px;font-weight:700}footer a{color:#98876a;text-underline-offset:3px}
@keyframes bubble-in{from{opacity:0;transform:translateY(6px) scale(.86)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes merge-pop{0%{transform:scale(.87)}35%{transform:scale(1.1)}68%{transform:scale(.98)}100%{transform:scale(1)}}
@media(max-width:700px){.page-shell{width:min(100% - 24px,520px);padding-top:13px}.topbar{gap:8px}.brand-mark{width:37px;height:37px;font-size:22px}.brand-copy p{font-size:7px;letter-spacing:.08em}.brand-copy h1{font-size:17px}.edition{padding:6px 8px;font-size:9px}.intro{min-height:106px;padding:14px 4px 11px}.intro h2{font-size:24px}.intro p{max-width:270px;font-size:11px;line-height:1.55}.mascot{gap:0;font-size:0}.mascot span{font-size:38px}.mode-tab{min-height:39px;padding:0 12px;font-size:11px}.group-tabs{gap:5px}.group-tab{min-width:44px;min-height:36px;padding:0 10px}.bubble-trays{gap:9px}.tray{min-height:198px;padding:12px 9px 10px;border-radius:18px}.tray-heading>div{gap:6px}.step-number{width:25px;height:25px;font-size:9px}.tray-heading h2{font-size:13px}.tray-heading p{max-width:120px;font-size:8px;line-height:1.35}.tray-count{padding:4px 7px;font-size:8px}.bubble-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;align-content:center;min-height:115px;gap:5px;padding-top:5px}.bubble{width:clamp(48px,12vw,56px);height:clamp(48px,12vw,56px);min-width:48px;min-height:48px;flex:none;font-size:22px}.bubble::before{left:10px;top:8px;width:12px;height:6px}.category-tabs{gap:4px;margin-top:7px}.category-tab{min-height:28px;padding:0 7px;font-size:8px}.final-list{min-height:96px}.empty-hint{top:107px;gap:4px}.empty-hint p{font-size:9px}.pager{right:8px;bottom:6px;gap:5px}.pager button{width:27px;height:27px}.tray-connector{top:88px}.tray-connector span{width:24px;height:24px}.tray-connector small{font-size:7px}.whole-panel{padding:12px 10px;min-height:170px}.whole-heading h2{font-size:14px}.whole-heading p{font-size:9px}.whole-bubbles{grid-template-columns:repeat(4,minmax(48px,1fr));gap:7px;margin-top:11px}.whole-bubble{min-height:45px;font-size:17px}.reading-stage{margin-top:13px;padding:14px 9px 10px;border-radius:21px}.stage-heading{font-size:9px}.stage-heading span:last-child{font-size:8px}.combination{min-height:90px;gap:clamp(5px,1.8vw,10px)}.slot{width:clamp(52px,16vw,65px);height:clamp(52px,16vw,65px)}.slot-letter{font-size:24px}.slot-label{font-size:7px}.plus-sign,.equals-sign{font-size:14px}.result-bubble{width:clamp(62px,18vw,74px);height:clamp(62px,18vw,74px);font-size:27px}.drag-hint{font-size:8px}.stage-actions{gap:7px}.stage-actions button{min-height:43px;padding:0 10px;font-size:11px}.listen-button small{display:block;margin:0;font-size:7px}.result-info{gap:5px}.info-chip{padding:6px 7px;font-size:8px}.tone-button{min-height:39px;font-size:16px}.debug-grid{grid-template-columns:1fr}.debug-grid pre{max-height:170px}footer{flex-direction:column;align-items:center;gap:4px;margin-top:11px;font-size:8px}}
@media(max-width:365px){.page-shell{width:calc(100% - 18px)}.bubble-trays{gap:6px}.tray{padding-left:6px;padding-right:6px}.bubble-list{grid-template-columns:repeat(2,minmax(0,1fr))}.bubble{width:48px;height:48px}.combination{gap:4px}.slot{width:49px;height:49px}.result-bubble{width:58px;height:58px}.whole-bubbles{grid-template-columns:repeat(4,minmax(43px,1fr));gap:4px}.whole-bubble{min-height:42px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* V0.3 classification swatches: category colors are a teaching cue only. */
.final-tray[data-category="all"]{background:linear-gradient(145deg,rgba(250,248,237,.96),rgba(255,255,255,.72))}
.final-tray[data-category="simple"]{background:linear-gradient(145deg,#fbf5db,#fffdf5)}
.final-tray[data-category="compound"]{background:linear-gradient(145deg,#fbe6dc,#fffaf6)}
.final-tray[data-category="front-nasal"]{background:linear-gradient(145deg,#e2f2e7,#f8fffa)}
.final-tray[data-category="back-nasal"]{background:linear-gradient(145deg,#e1eaf3,#f9fbff)}
.final-bowl{position:relative;display:grid;place-items:center;min-height:108px;margin-top:10px;border:1px solid color-mix(in srgb,var(--category-solid),white 30%);border-radius:20px;background:color-mix(in srgb,var(--category-soft),white 18%);box-shadow:inset 0 2px 8px rgba(255,255,255,.7),inset 0 -4px 10px rgba(85,90,92,.035);transition:background .25s,border-color .25s}
.final-bowl .empty-hint{position:relative;inset:auto}
.final-list{width:100%;min-height:98px;padding:9px}
.final-bubble{background:radial-gradient(circle at 34% 27%,#fff 0,var(--category-soft) 50%,var(--category-solid) 100%);color:var(--category-ink);box-shadow:inset 5px 5px 12px rgba(255,255,255,.85),inset -4px -6px 12px rgba(70,80,90,.08),0 7px 13px rgba(80,90,100,.10);touch-action:none}
.final-bubble[aria-pressed=true]{box-shadow:0 0 0 4px color-mix(in srgb,var(--category-solid),transparent 58%),0 9px 16px rgba(80,90,100,.15)}
.category-tabs{justify-content:center;flex-wrap:wrap;overflow:visible;margin:10px 0 0}
.category-tab{border-color:color-mix(in srgb,var(--category-solid),white 24%);background:color-mix(in srgb,var(--category-soft),white 20%);color:var(--category-ink)}
.category-tab[data-category="all"]{--category-solid:#e7e5d7;--category-soft:#f1efe5;--category-ink:#817b66}
.category-tab[data-category="simple"]{--category-solid:#f5e8ad;--category-soft:#fbf5db;--category-ink:#8e7a35}
.category-tab[data-category="compound"]{--category-solid:#f3cdbd;--category-soft:#fbe6dc;--category-ink:#a66d56}
.category-tab[data-category="front-nasal"]{--category-solid:#cbe7d5;--category-soft:#e2f2e7;--category-ink:#5d8b6e}
.category-tab[data-category="back-nasal"]{--category-solid:#c8d9e9;--category-soft:#e1eaf3;--category-ink:#5e7892}
.category-tab.active{border-color:var(--category-solid);background:var(--category-solid);color:var(--category-ink);box-shadow:0 2px 7px color-mix(in srgb,var(--category-solid),transparent 40%)}
.tray-controls{display:flex;align-items:center;justify-content:space-between;min-height:31px;margin-top:2px}.tray-controls .pager{position:static}
.medial-picker{margin-top:12px;padding:12px 16px;border:1px solid #e8dcc5;border-radius:20px;background:linear-gradient(145deg,#f4edda,#fbf8ed);box-shadow:var(--shadow)}
.medial-picker[hidden]{display:none}.medial-heading{display:flex;align-items:center;gap:9px}.medial-heading h2{margin:0;color:#665c49;font-size:14px;font-weight:900}.medial-heading p{margin:2px 0 0;color:#96866a;font-size:10px}.medial-heading .tray-count{margin-left:auto}.medial-bubbles{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;min-height:62px;padding-top:7px}
.medial-bubble{position:relative;width:54px;height:54px;border:1px solid #f1e4bd;border-radius:50%;background:radial-gradient(circle at 34% 27%,#fffef7,#f8edc7 54%,#ebdba5);color:#8e7840;font-size:22px;font-weight:900;box-shadow:inset 4px 4px 10px rgba(255,255,255,.9),0 6px 12px rgba(146,126,68,.12);cursor:pointer;touch-action:manipulation}
.medial-bubble[aria-pressed=true]{outline:4px solid rgba(216,187,105,.28);transform:scale(1.07)}
.direct-two-part{min-height:48px;padding:0 14px;border:1px solid #d8d1bc;border-radius:15px;background:#fffdf5;color:#786d54;font-size:12px;font-weight:900;cursor:pointer;touch-action:manipulation}
.direct-two-part[aria-pressed=true]{background:#e9e4d0;border-color:#c8bea0}
.medial-slot.has-letter{border-style:solid;border-color:#d8c789;background:#f8edc7}.medial-slot.has-letter .slot-letter{color:#8e7840}
.combination:has(#medialSlot:not([hidden])){gap:clamp(5px,1.3vw,13px)}
@media(max-width:700px){.final-bowl{min-height:106px;margin-top:8px;border-radius:16px}.final-list{min-height:96px;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.category-tabs{gap:4px;margin-top:8px}.category-tab{min-height:30px;padding:0 8px;font-size:8px}.tray-controls{margin-top:2px}.medial-picker{padding:10px 11px}.medial-bubble{width:50px;height:50px}.combination:has(#medialSlot:not([hidden])){gap:4px}.combination:has(#medialSlot:not([hidden])) .slot{width:clamp(48px,14vw,60px);height:clamp(48px,14vw,60px)}.combination:has(#medialSlot:not([hidden])) .result-bubble{width:clamp(58px,16vw,68px);height:clamp(58px,16vw,68px);font-size:25px}}
.variant-tray{margin:12px 2px 0;padding:11px 13px;border:1px solid rgba(231,220,197,.9);border-radius:17px;background:rgba(255,252,243,.66)}
.variant-tray[hidden]{display:none}.variant-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.variant-heading h3{margin:0;color:#75684e;font-size:12px;font-weight:900}.variant-heading p{margin:3px 0 0;color:#9b8d73;font-size:9px}.variant-choices{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.variant-choice{display:flex;min-width:94px;min-height:52px;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 10px;border:1px solid #e9dfc9;border-radius:13px;background:#fffdf7;color:#695d48;cursor:pointer;touch-action:manipulation}
.variant-choice strong{font-size:17px;line-height:1}.variant-choice small{color:#94866d;font-size:9px}.variant-choice.active{border-color:#9cac7f;background:#edf3e5;box-shadow:0 0 0 2px rgba(151,185,133,.18)}
@media(max-width:700px){.variant-tray{margin-top:10px;padding:9px}.variant-choices{gap:6px}.variant-choice{min-width:82px;min-height:49px}}

/* V1.3 shared recognition-card surface */
.reading-card-panel{position:relative;min-height:230px;margin:0 0 14px;padding:17px 18px 16px;border:1px solid rgba(255,255,255,.9);border-radius:23px;background:linear-gradient(145deg,rgba(244,249,239,.94),rgba(255,255,255,.73));box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.reading-card-panel[hidden],.reading-stage[hidden]{display:none}
.reading-card-panel .whole-bubbles{grid-template-columns:repeat(8,minmax(48px,1fr))}
.reading-card{display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:14px;margin-top:16px;padding:15px 20px;border:1px solid #e9d9b7;border-radius:20px;background:rgba(255,250,235,.78);box-shadow:inset 0 1px rgba(255,255,255,.85),0 8px 20px rgba(126,102,58,.08)}
.reading-card[hidden]{display:none}
.reading-card-label{grid-column:1/-1;justify-self:start;padding:4px 9px;border-radius:99px;background:#e9f0df;color:#718461;font-size:10px;font-weight:900}
.reading-card-syllable{color:#6f865e;font-size:clamp(25px,5vw,38px);font-weight:900;letter-spacing:.02em}
.reading-card-hanzi{color:#514d42;font-size:clamp(34px,7vw,52px);font-weight:900;line-height:1}
.reading-card-pinyin{padding-left:13px;border-left:1px solid #e5d9c1;color:#a18557;font-size:20px;font-weight:800}
.reading-card-example{margin:0 0 0 auto;color:#8c806b;font-size:14px;font-weight:700;text-align:right}
.reading-card-empty{margin:13px 0 0;color:#a39a88;font-size:12px;text-align:center}
.reading-card-empty[hidden]{display:none}
.independent-panel{background:linear-gradient(145deg,rgba(251,247,233,.96),rgba(255,255,255,.76))}
@media(max-width:700px){
 .reading-card-panel{padding:13px 12px;min-height:220px}
 .reading-card-panel .whole-bubbles{grid-template-columns:repeat(4,minmax(48px,1fr));gap:8px}
 .reading-card{grid-template-columns:auto auto;justify-content:center;gap:7px 14px;padding:14px 10px;text-align:center}
 .reading-card-label{grid-column:1/-1;justify-self:center}
 .reading-card-syllable{font-size:28px}
 .reading-card-hanzi{font-size:42px}
 .reading-card-pinyin{padding:0;border:0;font-size:18px}
 .reading-card-example{grid-column:1/-1;margin:2px 0 0;text-align:center;font-size:13px}
}