/* HSK vocabulary and sentence flashcards, one app on the HSK 1 / Pinyin Converter / Pinyin Chart design.
   Flat white, sans-serif, light red headings, rules instead of cards. Scoped under .cli-flashcards (CLI Popups styles its
   gift box by that class). Kit: 08_marketing/CLI/website/drafts/2026-11-01_hsk-flashcards/app/. */
@font-face{font-family:"CLI Pinyin";src:local("Avenir Next Regular"),local("AvenirNext-Regular");font-weight:400}
@font-face{font-family:"CLI Pinyin";src:local("Avenir Next Medium"),local("AvenirNext-Medium");font-weight:500}
@font-face{font-family:"CLI Pinyin";src:local("Avenir Next Demi Bold"),local("AvenirNext-DemiBold");font-weight:600}
.cli-flashcards,.cli-flashcards *,.cli-flashcards *::before,.cli-flashcards *::after{box-sizing:border-box}
.cli-flashcards p,.cli-flashcards h1,.cli-flashcards h2,.cli-flashcards h3,.cli-flashcards ul,.cli-flashcards ol,.cli-flashcards li,.cli-flashcards table,.cli-flashcards figure{margin:0;padding:0}
.cli-flashcards{position:relative;
--ink:#1e1c1a;--body:#2b2926;--ash:#6e6358;--ash2:#574e45;--rule:#e2d8cc;--rule2:#eee7dc;--paper:#f7f5f0;--band2:#e2ded7;
--teal:#17566b;--teal-l:#e7eff1;--red:#c4463a;--red-d:#a83a30;--title:#ee1c25;
--t1:#d42b1a;--t2:#ab5a13;--t3:#1d8047;--t4:#2676aa;--t5:#7a6d5e;
--sans:"Avenir W01","Avenir Next",Avenir,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--py:"CLI Pinyin","Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
--zh:"PingFang SC","HarmonyOS Sans SC","MiSans","Hiragino Sans GB","Noto Sans CJK SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif;
font-family:var(--sans);color:var(--body);font-size:17px;line-height:1.6;background:#fff;
max-width:1120px;margin:0 auto;padding:36px 24px 64px;-webkit-text-size-adjust:100%}
.cli-flashcards h1,.cli-flashcards h2,.cli-flashcards h3{font-family:var(--sans);color:var(--ink);letter-spacing:0;text-transform:none;font-style:normal;border:0}
.cli-flashcards a{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(23,86,107,.35);text-underline-offset:2px}
.cli-flashcards button,.cli-flashcards input,.cli-flashcards select{font:inherit;color:inherit;letter-spacing:0;text-transform:none}
.cli-flashcards button{background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:inherit;border-radius:0;box-shadow:none;min-height:0;width:auto}
.cli-flashcards :focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.cli-flashcards [lang|="zh"]{font-family:var(--zh)}
.cli-flashcards [hidden]{display:none!important}
.cli-flashcards .t1{color:var(--t1)}.cli-flashcards .t2{color:var(--t2)}.cli-flashcards .t3{color:var(--t3)}.cli-flashcards .t4{color:var(--t4)}.cli-flashcards .t5{color:var(--t5)}
.cli-flashcards.fc-tones-off .fc-py .t1,.cli-flashcards.fc-tones-off .fc-py .t2,.cli-flashcards.fc-tones-off .fc-py .t3,.cli-flashcards.fc-tones-off .fc-py .t4,.cli-flashcards.fc-tones-off .fc-py .t5{color:inherit}
.cli-flashcards .fc-py{font-family:var(--py);letter-spacing:0;overflow-wrap:break-word}
.cli-flashcards .fc-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* head */
.cli-flashcards .fc-header{text-align:center;max-width:969px;margin:0 auto}
.cli-flashcards .fc-brand{font:400 14px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#767676}
.cli-flashcards .fc-title{font:300 38px/1.25 var(--sans);color:var(--title);margin-top:8px}
.cli-flashcards .fc-header p.fc-subtitle{margin:12px auto 0;max-width:704px;text-align:left}
/* level switch: the Converter's segmented control, seven segments */
.cli-flashcards .fc-levels{display:flex;width:fit-content;max-width:100%;margin:22px auto 20px;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
.cli-flashcards .fc-level-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:6px 14px;font-size:15px;line-height:1.3;color:var(--ash2);white-space:nowrap;border-right:1px solid var(--rule)}
.cli-flashcards .fc-level-btn:last-child{border-right:0}
.cli-flashcards .fc-lc{font-size:14px;color:var(--ash)}
.cli-flashcards .fc-level-btn.fc-active{background:var(--ink);color:#fff}
.cli-flashcards .fc-level-btn.fc-active .fc-lc{color:#d9d2c8}
.cli-flashcards .fc-level-btn:focus-visible{outline-offset:-3px}
/* tool box */
.cli-flashcards .fc-tool{position:relative;border:1px solid var(--rule);background:#fff}
.cli-flashcards .fc-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding:8px 24px;border-bottom:1px solid var(--rule2);font-size:14px}
.cli-flashcards .fc-show{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ash2);font-size:14px}
.cli-flashcards .fc-select{min-height:44px;min-width:7em;border:1px solid var(--rule);border-radius:4px;color:var(--ink);font-size:15px;padding:8px 34px 8px 12px;box-shadow:none;margin:0;-webkit-appearance:none;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23574e45' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center}
.cli-flashcards .fc-select:focus-visible{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal)}
.cli-flashcards .fc-chk{display:inline-flex;align-items:center;gap:7px;min-height:44px;color:var(--ash2);font-size:14px;cursor:pointer}
.cli-flashcards .fc-chk input{width:17px;height:17px;margin:0;accent-color:var(--teal);flex:none}
.cli-flashcards .fc-optbtn{display:none}
.cli-flashcards .fc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;border:1px solid var(--rule);border-radius:4px;background:#fff;color:var(--ink);font-size:15px;font-weight:500;line-height:1.25;text-align:center}
.cli-flashcards .fc-primary{margin-left:auto;background:var(--red);border-color:var(--red);color:#fff;font-weight:600;padding:8px 20px;white-space:nowrap}
.cli-flashcards .fc-done .fc-primary{margin-left:0}
.cli-flashcards .fc-body{padding:20px 24px 12px}
/* the card: both faces share one grid cell, so a long row makes the card taller and nothing is ever clipped */
.cli-flashcards .fc-area{position:relative;max-width:720px;margin:0 auto 14px}
.cli-flashcards .fc-card{display:block;width:100%;background:transparent;text-align:center;perspective:1000px;-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.cli-flashcards .fc-flip{display:grid;grid-template-columns:minmax(0,1fr);min-height:240px;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.cli-flashcards .fc-card.flipped .fc-flip{transform:rotateY(180deg)}
.cli-flashcards .fc-face{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:36px 28px 32px;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:visibility 0s .22s}
.cli-flashcards .fc-back{transform:rotateY(180deg)}
.cli-flashcards .fc-card:not(.flipped) .fc-back,.cli-flashcards .fc-card.flipped .fc-front{visibility:hidden}
.cli-flashcards .fc-card.fc-now .fc-flip,.cli-flashcards .fc-card.fc-now .fc-face{transition:none}
.cli-flashcards .fc-card:focus-visible{outline:0}
.cli-flashcards .fc-card:focus-visible .fc-face{outline:2px solid var(--teal);outline-offset:3px}
.cli-flashcards .fc-q{display:block;max-width:100%;color:var(--ink);overflow-wrap:break-word}
/* the page's own copy of row 1 holds the card's size until the script draws the first card, which is shuffled */
.cli-flashcards .fc-q.fc-pre{visibility:hidden}
.cli-flashcards .fc-q.is-zh{font:400 64px/1.2 var(--zh)}
.cli-flashcards .fc-q.is-en{font:400 26px/1.35 var(--sans)}
.cli-flashcards .fc-q.is-en.is-long{font-size:20px;line-height:1.45}
.cli-flashcards .fc-q.is-py{font-size:40px;line-height:1.3;font-weight:500}
.cli-flashcards .fc-hint{display:block;margin-top:16px;font-size:14px;line-height:1.4;color:var(--ash)}
.cli-flashcards .fc-a-zh{display:block;max-width:100%;font:400 48px/1.2 var(--zh);color:var(--ink);margin-bottom:8px}
.cli-flashcards .fc-a-py{display:block;max-width:100%;font-size:24px;line-height:1.35;font-weight:500;color:var(--ink);margin-bottom:6px}
.cli-flashcards .fc-a-en{display:block;max-width:100%;font-size:17px;line-height:1.5;color:var(--body);overflow-wrap:break-word}
.cli-flashcards .fc-a-pos{display:block;font-size:14px;line-height:1.4;color:var(--ash);margin-top:6px}
/* sentence cards */
.cli-flashcards.fc-sent .fc-flip{min-height:260px}
.cli-flashcards.fc-sent .fc-q.is-zh{font-size:38px;line-height:1.4}
.cli-flashcards.fc-sent .fc-q.is-zh.is-long{font-size:30px;line-height:1.5}
.cli-flashcards.fc-sent .fc-q.is-zh.is-xlong{font-size:24px;line-height:1.6}
.cli-flashcards.fc-sent .fc-q.is-py{font-size:24px;line-height:1.5}
.cli-flashcards.fc-sent .fc-q.is-py.is-long{font-size:20px}
.cli-flashcards.fc-sent .fc-a-zh{font-size:26px;line-height:1.45;margin-bottom:6px}
.cli-flashcards.fc-sent .fc-a-py{font-size:20px;line-height:1.5;font-weight:400}
.cli-flashcards.fc-sent .fc-a-en{font-size:18px}
/* speaker, HSK 1 vocabulary only */
.cli-flashcards .fc-say{position:absolute;top:8px;right:8px;z-index:3;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--teal);border-radius:4px}
.cli-flashcards .fc-say svg{width:22px;height:22px;display:block}
.cli-flashcards .fc-say.is-playing{background:var(--teal);color:#fff}
/* loading, error */
.cli-flashcards .fc-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:240px;max-width:720px;margin:0 auto 14px;padding:24px;background:var(--paper);text-align:center;color:var(--ash2);font-size:15px}
.cli-flashcards.fc-sent .fc-state{min-height:260px}
/* end of a session */
.cli-flashcards .fc-done{max-width:720px;margin:0 auto 14px;padding:32px 24px;background:var(--paper);text-align:center;outline:0}
.cli-flashcards .fc-done-h{font:600 20px/1.3 var(--sans);color:var(--ink)}
.cli-flashcards p.fc-done-stats{margin-top:4px;font-size:15px;color:var(--ash2)}
.cli-flashcards .fc-done-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.cli-flashcards .fc-cta-btn{display:inline-block;margin-top:12px;background:var(--red);color:#fff!important;text-decoration:none!important;font:600 16px/1.3 var(--sans);padding:12px 22px;border-radius:4px;box-shadow:none;border:0}
/* below the card */
.cli-flashcards .fc-nav{display:flex;align-items:center;justify-content:center;gap:16px;padding-bottom:8px}
.cli-flashcards .fc-nav-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:4px;background:#fff;color:var(--ash2)}
.cli-flashcards .fc-nav-btn svg{width:20px;height:20px}
.cli-flashcards .fc-nav-btn:disabled{opacity:.4;cursor:not-allowed}
.cli-flashcards .fc-counter{min-width:112px;font-size:15px;color:var(--ash2);text-align:center;font-variant-numeric:tabular-nums}
.cli-flashcards .fc-deck-note{text-align:center;font-size:14px;color:var(--ash);margin:-2px 0 6px}
.cli-flashcards .fc-rating{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.cli-flashcards .fc-rate{min-width:104px}
.cli-flashcards p.fc-summary{min-height:22px;font-size:14px;line-height:1.6;color:var(--ash);text-align:center}
.cli-flashcards .fc-strip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;padding:6px 24px 10px;border-top:1px solid var(--rule2)}
.cli-flashcards .fc-link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;line-height:1.25;color:var(--teal);text-align:left}
.cli-flashcards .fc-link:disabled{color:var(--ash);cursor:default}
.cli-flashcards .fc-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;width:100%;font-size:15px;color:var(--body)}
.cli-flashcards p.fc-export-err{padding:0 24px 12px;font-size:14px;color:var(--ash2)}
.cli-flashcards p.fc-mixnote{margin-top:2px;font-size:14px;line-height:1.5;color:var(--ash);text-align:center}
/* menu and sections, as on HSK 1 */
.cli-flashcards .fc-guide{display:grid;grid-template-columns:220px minmax(0,720px);gap:56px;margin-top:56px;padding-top:40px;border-top:1px solid var(--rule)}
.cli-flashcards .fc-toc{position:sticky;top:20px;align-self:start;font-size:15px;max-height:calc(100vh - 20px);overflow-y:auto;padding-left:3px;margin-left:-3px}
.cli-flashcards p.fc-toc-h{font-size:14px;color:var(--ash);margin-bottom:6px}
.cli-flashcards .fc-toc ol{list-style:none;border-top:1px solid var(--rule)}
.cli-flashcards .fc-toc li{border-bottom:1px solid var(--rule)}
.cli-flashcards .fc-toc a{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:0 8px;min-height:44px;padding:9px 8px;line-height:1.3;color:var(--body);text-decoration:none}
.cli-flashcards .fc-toc-n{font-size:14px;color:var(--ash);font-variant-numeric:tabular-nums}
.cli-flashcards .fc-toc a[aria-current="true"]{background:var(--band2);color:var(--ink);font-weight:500}
.cli-flashcards .fc-toc a:focus-visible{outline-offset:-2px}
.cli-flashcards .fc-main{min-width:0}
.cli-flashcards .fc-main>[id]{scroll-margin-top:24px}
.cli-flashcards .fc-below-section,.cli-flashcards .fc-sec{margin:56px 0 0}
.cli-flashcards .fc-main>:first-child{margin-top:0}
.cli-flashcards h2{font:300 30px/1.2 var(--sans);color:var(--title);margin-bottom:14px}
.cli-flashcards .fc-sec p+p,.cli-flashcards .fc-below-section p+p{margin-top:12px}
.cli-flashcards .fc-sec p+table,.cli-flashcards .fc-tscroll+p{margin-top:14px}
.cli-flashcards .fc-info-card{padding:18px 0;border-top:1px solid var(--rule2)}
.cli-flashcards .fc-info-card:last-child{border-bottom:1px solid var(--rule2)}
.cli-flashcards .fc-info-card h3{font:500 20px/1.3 var(--sans);margin-bottom:6px}
/* the level table (theme rules: table tr td{border-top:1px solid #555}, and Oxygen's !important sizes) */
.cli-flashcards .fc-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px}
.cli-flashcards .fc-t{width:100%;border-collapse:separate;border-spacing:0;font-size:16px}
.cli-flashcards .fc-t th,.cli-flashcards .fc-t td{border:0!important;border-bottom:1px solid var(--rule2)!important;font-size:16px!important;line-height:1.5!important;text-align:left;vertical-align:baseline;padding:10px 16px 10px 0;background:none}
.cli-flashcards .fc-t th:last-child,.cli-flashcards .fc-t td:last-child{padding-right:0}
.cli-flashcards .fc-t thead th{font-size:13px!important;font-weight:600;color:var(--ash2);border-bottom:1px solid var(--ink)!important}
.cli-flashcards .fc-t tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.cli-flashcards .fc-t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cli-flashcards .fc-t td a+a{margin-left:12px}
/* the sentences, one level at a time */
.cli-flashcards .fc-sl{list-style:none;border-top:1px solid var(--ink)}
.cli-flashcards .fc-sl li{padding:12px 0;border-bottom:1px solid var(--rule2)}
.cli-flashcards .fc-sl-zh{font:400 21px/1.45 var(--zh);color:var(--ink);margin-bottom:2px}
.cli-flashcards .fc-sl-py{font-size:16px;line-height:1.45;color:var(--ash2);margin-bottom:2px}
.cli-flashcards .fc-sl-en{font-size:16px;line-height:1.5;color:var(--body)}
/* ruled list of tools */
.cli-flashcards .fc-tools{list-style:none}
.cli-flashcards .fc-tools li{border-top:1px solid var(--rule2)}
.cli-flashcards .fc-tools li:last-child{border-bottom:1px solid var(--rule2)}
.cli-flashcards .fc-tools a{display:block;padding:11px 0;text-decoration:none}
/* free-lesson card, at the head of the main column */
.cli-flashcards .cli-trial-card{display:flex;align-items:center;gap:24px;background:var(--paper);padding:20px 22px}
.cli-flashcards .cli-trial-card__text{flex:1 1 auto;min-width:0}
.cli-flashcards p.cli-trial-card__title{font:600 17px/1.35 var(--sans);color:var(--ink);margin-bottom:4px}
.cli-flashcards p.cli-trial-card__body{font-size:15px;line-height:1.55;color:var(--body)}
.cli-flashcards .cli-trial-card .fc-cta-btn{flex:0 0 auto;margin-top:0;white-space:nowrap}
/* closing block */
.cli-flashcards .fc-hero-cta{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:28px;align-items:start;margin:56px 0 0}
.cli-flashcards .fc-hero-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:25% center}
.cli-flashcards .fc-hero-content h2{margin-bottom:8px;text-wrap:balance}
.cli-flashcards .fc-hero-content .fc-cta-btn{margin-top:18px}
.cli-flashcards .fc-hero-content p.fc-immersion{margin-top:18px;font-size:15px;line-height:1.55;color:var(--body)}
/* the gift box in the page's type, red and corners, as on HSK 1 (also its contrast: the popups' own muted gray fails on its paper) */
.cli-flashcards .cli-popups-page-host{--serif:var(--sans)}
.cli-flashcards .cli-popups-page-host[data-off]{display:none!important}
.cli-flashcards .cli-popups-page-host .cli-popup{--clip-serif:var(--sans);--clip-sans:var(--sans);--clip-ink:var(--ink);--clip-ink-soft:var(--body);--clip-ink-muted:var(--ash);--clip-accent:var(--red);--clip-accent-soft:var(--red-d);--clip-border:var(--rule);--clip-blue:var(--teal);--clip-radius-sm:4px;--clip-radius:0;color:var(--body)}
.cli-flashcards .cli-popups-page-host .mid-cta.cli-popup-gift-host{max-width:none!important;border:0!important;border-radius:0!important;background:var(--paper)!important}
.cli-flashcards .cli-popups-page-host .cli-popup.cli-popup-gift{border:0;border-radius:0;box-shadow:none;background:var(--paper)}
.cli-flashcards .cli-popups-page-host .mid-cta.cli-popup-gift-host:empty{display:none}
/* has to outrank cli-popups.css's own .cli-popup-gift p{display:block!important} */
.cli-flashcards[id] [data-cli-popups=page] .cli-popup-gift p.cli-popup__eyebrow{display:none!important}
.cli-flashcards .cli-popups-page-host .cli-popup__headline{font:600 17px/1.35 var(--sans)!important;letter-spacing:0;color:var(--ink)}
.cli-flashcards .cli-popups-page-host .cli-popup__btn svg{display:none!important}
.cli-flashcards .cli-popups-page-host .cli-popup__input:focus{border-color:var(--teal);box-shadow:none;outline:2px solid var(--teal);outline-offset:-1px}
@media (hover:hover){
.cli-flashcards a:hover{color:var(--ink)}
.cli-flashcards .fc-toc a:hover{color:var(--teal)}
.cli-flashcards .fc-level-btn:not(.fc-active):hover{color:var(--ink);background:var(--paper)}
.cli-flashcards .fc-btn:hover,.cli-flashcards .fc-nav-btn:not(:disabled):hover{border-color:var(--ash);color:var(--ink)}
.cli-flashcards .fc-primary:hover{background:var(--red-d);border-color:var(--red-d);color:#fff}
.cli-flashcards .fc-link:not(:disabled):hover,.cli-flashcards .fc-optbtn:hover{color:var(--ink)}
.cli-flashcards .fc-say:not(.is-playing):hover{background:var(--teal-l)}
.cli-flashcards .fc-cta-btn:hover{background:var(--red-d);color:#fff}
}
/* the menu goes above the content */
@media (max-width:900px){
.cli-flashcards .fc-guide{grid-template-columns:minmax(0,1fr);gap:32px}
.cli-flashcards .fc-toc{position:static;max-height:none;overflow:visible}
}
/* the switch: word counts show where seven of them fit */
@media (max-width:859px){.cli-flashcards .fc-lc{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
/* translated copies run longer: "5.600 Wörter", "5 600 слов" */
@media (max-width:1099px){html:not([lang|="en"]) .cli-flashcards .fc-lc{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
/* phone */
@media (max-width:600px){
.cli-flashcards{padding:30px 16px 48px;font-size:16px}
.cli-flashcards .fc-title{font-size:32px}
.cli-flashcards .fc-header p.fc-subtitle{display:none}
/* HSK once, then the seven levels */
.cli-flashcards .fc-levels{display:flex;width:100%;margin:16px 0}
.cli-flashcards .fc-levels::before{content:"HSK";display:flex;align-items:center;padding:0 4px 0 8px;font-size:14px;color:var(--ash)}
.cli-flashcards .fc-level-btn{flex:1 1 0;min-width:0;padding:6px 2px}
.cli-flashcards .fc-level-btn:last-child{flex-grow:1.35}
.cli-flashcards .fc-lh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
/* options behind one line */
.cli-flashcards .fc-toolbar{gap:0 12px;padding:6px 16px}
.cli-flashcards .fc-optbtn{display:inline-flex;align-items:center;min-height:44px;color:var(--teal);font-size:14px;order:1}
.cli-flashcards .fc-optbtn::after{content:"+";margin-left:6px}
.cli-flashcards .fc-optbtn[aria-expanded="true"]::after{content:"\2212"}
.cli-flashcards .fc-toolbar .fc-primary{order:2}
.cli-flashcards .fc-toolbar .fc-show,.cli-flashcards .fc-toolbar .fc-chk{display:none;order:3}
.cli-flashcards .fc-toolbar.is-open .fc-show{display:flex;flex:1 1 100%}
.cli-flashcards .fc-toolbar.is-open .fc-select{flex:1;min-width:0}
.cli-flashcards .fc-toolbar.is-open .fc-chk:not([hidden]){display:inline-flex;flex:1 1 40%}
.cli-flashcards .fc-body{padding:14px 16px 10px}
/* the rating buttons stay above a real Safari fold; long cards still grow */
.cli-flashcards .fc-flip{min-height:196px}
.cli-flashcards.fc-sent .fc-flip{min-height:236px}
.cli-flashcards .fc-state{min-height:196px}
.cli-flashcards.fc-sent .fc-state{min-height:236px}
.cli-flashcards .fc-face{padding:24px 20px}
.cli-flashcards .fc-q.is-zh{font-size:52px}
.cli-flashcards .fc-q.is-en{font-size:24px}
.cli-flashcards .fc-q.is-en.is-long{font-size:19px}
.cli-flashcards .fc-q.is-py{font-size:32px}
.cli-flashcards .fc-a-zh{font-size:40px}
.cli-flashcards .fc-a-py{font-size:22px}
.cli-flashcards.fc-sent .fc-q.is-zh{font-size:30px}
.cli-flashcards.fc-sent .fc-q.is-zh.is-long{font-size:26px}
.cli-flashcards.fc-sent .fc-q.is-zh.is-xlong{font-size:22px}
.cli-flashcards.fc-sent .fc-q.is-py{font-size:20px}
.cli-flashcards.fc-sent .fc-a-zh{font-size:22px}
.cli-flashcards.fc-sent .fc-a-py{font-size:18px}
.cli-flashcards.fc-sent .fc-a-en{font-size:17px}
.cli-flashcards .fc-rate{flex:1 1 0;min-width:0;padding:8px 6px}
.cli-flashcards .fc-strip{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;justify-items:start;padding:6px 16px 10px}
.cli-flashcards .fc-confirm{grid-column:1/-1}
.cli-flashcards p.fc-export-err{padding:0 16px 12px}
.cli-flashcards .fc-guide{margin-top:40px;padding-top:24px}
.cli-flashcards h2{font-size:26px}
.cli-flashcards .fc-below-section,.cli-flashcards .fc-sec{margin-top:48px}
.cli-flashcards .fc-t th,.cli-flashcards .fc-t td{font-size:15px!important;padding-right:10px}
.cli-flashcards .fc-t thead th{font-size:13px!important}
.cli-flashcards .cli-trial-card{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 16px}
.cli-flashcards .cli-trial-card .fc-cta-btn{white-space:normal}
.cli-flashcards .fc-hero-cta{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:48px}
}
@media (prefers-reduced-motion:reduce){.cli-flashcards .fc-flip,.cli-flashcards .fc-face{transition:none}}
@media print{.cli-flashcards .fc-toc,.cli-flashcards .fc-tool,.cli-flashcards .fc-levels,.cli-flashcards .fc-hero-cta,.cli-flashcards .cli-trial-card{display:none!important}.cli-flashcards .fc-guide{display:block;border:0}.cli-flashcards .fc-sl[hidden]{display:block!important}}