@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/bricolage-normal-latin.85f55a58a3.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/bricolage-normal-vietnamese.7e13a14cb0.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-normal-latin.48282a415e.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/fraunces-normal-vietnamese.7e3c046626.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Gentium Book Plus";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/gentium-normal-greek.5fd4a3c9dc.woff2) format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:"Gentium Book Plus";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/gentium-normal-latin.51139696ba.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Gentium Book Plus";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/gentium-normal-latin-ext.6773f9aa20.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Gentium Book Plus";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/gentium-normal-vietnamese.1757eb94a3.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-latin.e384e31812.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-vietnamese.b2322735d7.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/newsreader-normal-latin.01817351be.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/newsreader-normal-vietnamese.68ef9a14f1.woff2) format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}

:root{
  color-scheme: light;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-read:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ipa:"Gentium Book Plus","Charis SIL","Doulos SIL","Lucida Grande","Segoe UI",serif;

  --rank-iron:#666A70; --rank-bronze:#365EA8; --rank-silver:#176B73; --rank-gold:#386D3C;
  --rank-platinum:#E7BC50; --rank-diamond:#E99A57; --rank-wood:#A54135; --rank-wood-accent:#E9BC61;
  --rank-iron-ink:#FFF5E8; --rank-bronze-ink:#FFF5E8; --rank-silver-ink:#FFF5E8; --rank-gold-ink:#FFF5E8;
  --rank-platinum-ink:#34252B; --rank-diamond-ink:#34252B; --rank-wood-ink:#FFF5E8; --badge-edge:#34252B;
  --seg-iron:#494D53; --seg-bronze:#284D88; --seg-silver:#13585F; --seg-gold:#2B5830;
  --seg-platinum:#6B4C08; --seg-diamond:#843B12; --seg-wood:#852E26;
  --right:#478898;

  --ground:#FFF5E8;
  --ink:#34252B; --ink-2:#5F4848; --ink-3:#5F4848;
  --hair:#D5C3B2;
  --surface:#FFFCF6; --surface-strong:#FFFCF6; --surface-sunk:#F0E4D6; --surface-edge:#D5C3B2;
  --sheet-bg:#FFFCF6;
  --scrim:rgba(40,20,10,.38);
  --shadow:0 0 0 0 transparent; --shadow-lg:0 0 0 0 transparent;   /* no shadows (kept as tokens: used in lists) */
  --btn-bg:#A54135; --btn-ink:#FFF5E8; --btn-bg-hover:#8E342B;
  --btn2-bg:#FFFCF6; --btn2-ink:#34252B;
  --accent:#A54135; --accent-soft:#F0E4D6; --accent-text:#6B2824;
  --track:#DBCBBD;
  --chip-bg:#F0E4D6; --chip-ink:#34252B;
  --focus:#34252B;
  --rule:#C08075;
  --tile-notebook:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M8 0V32M16 0V32M24 0V32M0 8H32M0 16H32M0 24H32%22 stroke=%22%23EDE5D9%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M0 32V0H32%22 stroke=%22%23E0D8CC%22 stroke-width=%221%22 fill=%22none%22/%3E%3C/svg%3E"); --tile-paper:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22%3E%3Cpath d=%22M5 13l2 -1M37 8l3 1M65 32l-2 2M13 54l3 0M47 73l2 -1M79 57l1 2M31 36l1 1M72 85l3 -1M9 88l2 1%22 stroke=%22%23E5DCD0%22 stroke-width=%22.8%22 fill=%22none%22/%3E%3C/svg%3E");
}
:root[data-theme="navy"]{
  color-scheme: dark;
  --rank-iron:#AEB3B9; --rank-bronze:#91B4EE; --rank-silver:#79CED0; --rank-gold:#9BCB81;
  --rank-platinum:#EDC861; --rank-diamond:#F1AC72; --rank-wood:#AE4438; --rank-wood-accent:#E9BC61;
  --rank-iron-ink:#34252B; --rank-bronze-ink:#34252B; --rank-silver-ink:#34252B; --rank-gold-ink:#34252B;
  --rank-platinum-ink:#34252B; --rank-diamond-ink:#34252B; --rank-wood-ink:#FFF5E8; --badge-edge:#FFF5E8;
  --seg-iron:#AEB3B9; --seg-bronze:#91B4EE; --seg-silver:#79CED0; --seg-gold:#9BCB81;
  --seg-platinum:#EDC861; --seg-diamond:#F1AC72; --seg-wood:#F4A18C;
  --right:#A0EEFF;
  --scrim:rgba(8,4,6,.6);
  --ground:#172333;
  --ink:#F0F0E8; --ink-2:#BBC8D5; --ink-3:#BBC8D5;
  --hair:#465B73;
  --surface:#233247; --surface-strong:#233247; --surface-sunk:#111B29; --surface-edge:#465B73;
  --sheet-bg:#233247;
  --btn-bg:#F3A18D; --btn-ink:#34252B; --btn-bg-hover:#F8B5A0;
  --btn2-bg:#233247; --btn2-ink:#F0F0E8;
  --accent:#F3A18D; --accent-soft:#111B29; --accent-text:#F3A18D;
  --track:#4A6179;      /* the study's #506984, darkened: every rank's meter fill keeps 3:1 against it (A, S, F) */
  --chip-bg:#111B29; --chip-ink:#F0F0E8;
  --focus:#F0F0E8;
  --rule:#805954;
  --tile-notebook:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M8 0V32M16 0V32M24 0V32M0 8H32M0 16H32M0 24H32%22 stroke=%22%231D2C3E%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M0 32V0H32%22 stroke=%22%232C3D53%22 stroke-width=%221%22 fill=%22none%22/%3E%3C/svg%3E"); --tile-paper:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22%3E%3Cpath d=%22M5 13l2 -1M37 8l3 1M65 32l-2 2M13 54l3 0M47 73l2 -1M79 57l1 2M31 36l1 1M72 85l3 -1M9 88l2 1%22 stroke=%22%2328374B%22 stroke-width=%22.8%22 fill=%22none%22/%3E%3C/svg%3E");
}
:root[data-theme="chalk"]{
  color-scheme: dark;
  --rank-iron:#AEB3B9; --rank-bronze:#91B4EE; --rank-silver:#79CED0; --rank-gold:#9BCB81;
  --rank-platinum:#EDC861; --rank-diamond:#F1AC72; --rank-wood:#AE4438; --rank-wood-accent:#E9BC61;
  --rank-iron-ink:#34252B; --rank-bronze-ink:#34252B; --rank-silver-ink:#34252B; --rank-gold-ink:#34252B;
  --rank-platinum-ink:#34252B; --rank-diamond-ink:#34252B; --rank-wood-ink:#FFF5E8; --badge-edge:#FFF5E8;
  --seg-iron:#AEB3B9; --seg-bronze:#91B4EE; --seg-silver:#79CED0; --seg-gold:#9BCB81;
  --seg-platinum:#EDC861; --seg-diamond:#F1AC72; --seg-wood:#F4A18C;
  --right:#A0EEFF;
  --scrim:rgba(8,4,6,.6);
  --ground:#142824;
  --ink:#F2F3E6; --ink-2:#BACCC1; --ink-3:#BACCC1;
  --hair:#45655C;
  --surface:#203A34; --surface-strong:#203A34; --surface-sunk:#10201D; --surface-edge:#45655C;
  --sheet-bg:#203A34;
  --btn-bg:#F2A08C; --btn-ink:#34252B; --btn-bg-hover:#F7B39F;
  --btn2-bg:#203A34; --btn2-ink:#F2F3E6;
  --accent:#F2A08C; --accent-soft:#10201D; --accent-text:#F2A08C;
  --track:#48645A;      /* the study's #4C6A60, darkened: every rank's meter fill keeps 3:1 against it (A, S, F) */
  --chip-bg:#10201D; --chip-ink:#F2F3E6;
  --focus:#F2F3E6;
  --rule:#865950;
  --tile-notebook:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22 viewBox=%220 0 32 32%22%3E%3Cpath d=%22M8 0V32M16 0V32M24 0V32M0 8H32M0 16H32M0 24H32%22 stroke=%22%231B302A%22 stroke-width=%22.5%22/%3E%3Cpath d=%22M0 32V0H32%22 stroke=%22%2329433B%22 stroke-width=%221%22 fill=%22none%22/%3E%3C/svg%3E"); --tile-paper:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2296%22 height=%2296%22 viewBox=%220 0 96 96%22%3E%3Cpath d=%22M5 13l2 -1M37 8l3 1M65 32l-2 2M13 54l3 0M47 73l2 -1M79 57l1 2M31 36l1 1M72 85l3 -1M9 88l2 1%22 stroke=%22%23263C34%22 stroke-width=%22.8%22 fill=%22none%22/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
:root{--tile:var(--tile-notebook)}
:root[data-bg="paper"]{--tile:var(--tile-paper)}
body{margin:0;min-height:100vh;min-height:100svh;background:var(--ground) var(--tile) repeat;color:var(--ink);
  font:400 16px/1.5 var(--font-ui);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:12px}
[tabindex="-1"]:focus{outline:none}
[hidden]{display:none!important}

.stage{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;min-height:100svh}
.app{position:relative;z-index:1;width:100%;max-width:460px;padding:0 16px;display:flex;flex-direction:column;min-height:100svh;overflow-x:clip}
:root:not([data-bg="paper"]) .app::before{content:"";position:absolute;top:0;bottom:0;left:6px;width:2px;background:var(--rule);pointer-events:none;z-index:-1}
.screen{flex:1 0 auto;display:flex;flex-direction:column;padding:20px 0 8px}
.side-note{display:none}
@media (min-width:1000px){
  .stage{grid-template-columns:minmax(0,1fr) minmax(0,460px) minmax(0,1fr);column-gap:40px}
  .side-note{display:block;grid-column:1;justify-self:end;align-self:start;position:sticky;top:48px;max-width:250px;margin-top:48px;
    font-size:14px;line-height:1.55;color:var(--ink-2)}
  .app{grid-column:2}
}
.stage[data-screen="check"] .side-note,.stage[data-screen="reveal"] .side-note,
.stage[data-screen="check"] .foot,.stage[data-screen="reveal"] .foot{display:none}
.side-note h2{font:600 13px/1.3 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.side-note p{margin-bottom:10px}
.side-note code{font-size:12.5px;background:var(--surface-sunk);padding:1px 5px;border-radius:6px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand{--wm:150px;display:flex;align-items:center;gap:calc(var(--wm) / 15);min-width:0;color:var(--ink)}
.top-row.with-lang .brand{--wm:min(150px,calc((100vw - 182px) / 1.373))}
.brand-icon{display:block;flex:none;width:calc(var(--wm) * .373);height:calc(var(--wm) * .373)}
.brand-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.brand-wm{display:block;width:var(--wm);height:auto}
.brand-line{display:block;font:500 clamp(12px,calc(var(--wm) * .09),13.5px)/1.2 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--ink-2);margin-top:6px;white-space:nowrap}
.side-note .side-brand{margin:0 0 18px}
.top-acts{display:flex;align-items:center;gap:2px;flex:none;margin-left:auto}
.mt-4{margin-top:4px}.mt-10{margin-top:10px}

.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;min-width:44px;padding:0 22px;border-radius:999px;font:600 16px/1 var(--font-ui);letter-spacing:.005em;
  transition:background-color .15s ease,transform .12s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn-primary:hover{background:var(--btn-bg-hover)}
.btn-quiet{background:var(--btn2-bg);color:var(--btn2-ink);box-shadow:inset 0 0 0 1px var(--hair)}
.btn-quiet:hover{background:var(--surface-strong)}
.btn-xl{min-height:60px;font-size:18px;width:100%}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.btn-block{width:100%}
.text-btn{appearance:none;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 6px;
  color:var(--ink-2);font:500 14px/1.2 var(--font-ui);
  text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;border-radius:8px}
.text-btn:hover{color:var(--ink);text-decoration-color:currentColor}
.icon-btn{appearance:none;border:0;cursor:pointer;width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;
  background:transparent;color:var(--ink-2);flex:none;transition:background-color .15s}
.icon-btn:hover{background:var(--surface-sunk);color:var(--ink)}
.icon-btn svg{width:18px;height:18px}

.card{position:relative;background:var(--surface);border-radius:24px;padding:20px;box-shadow:inset 0 0 0 1px var(--hair)}
.section-h{font:600 22px/1.2 var(--font-display);font-variation-settings:"opsz" 48;letter-spacing:-.01em}
.sub{color:var(--ink-2);font-size:14px}
.tier-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
.badge{display:block;flex:none;overflow:visible}
.badge .b-tile{fill:var(--bf);stroke:var(--badge-edge);stroke-width:4;stroke-linejoin:miter}
.badge-s .b-tile{stroke:var(--rank-wood-accent)}
.badge .b-gold{fill:var(--rank-wood-accent)}
.badge .b-ink{fill:var(--bi)}
.grade{font-family:var(--font-ui);font-weight:700;letter-spacing:-.01em;white-space:nowrap}

.welcome{justify-content:space-between}
.check,.reveal{min-height:100svh}
.welcome .hero{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0 24px}
.welcome h1{font:500 clamp(40px,11vw,52px)/1.02 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.03em;margin-bottom:18px}
.welcome h1 em{font-style:italic;font-weight:400;padding-right:.06em}
.welcome .lede{font:400 20px/1.45 var(--font-read);color:var(--ink-2);max-width:30ch;text-wrap:pretty}
.how-to{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px;max-width:34ch}
.how-to li{display:flex;gap:10px;align-items:baseline;font:400 16.5px/1.45 var(--font-read);color:var(--ink-2)}
.how-to li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}
.how-to b{font:600 15px/1 var(--font-ui);color:var(--ink)}
.welcome .cta{display:grid;gap:8px;padding-bottom:12px}
@media (min-width:700px){.welcome{justify-content:flex-start}.welcome .hero{flex:none;justify-content:flex-start}}
.taste{display:grid;gap:28px;padding:24px 0}
.ts-card,.ts-in{clip-path:polygon(0 20px,20px 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.ts-card{padding:1px;background:var(--ink)}
.ts-in{background:var(--surface);padding:16px 16px 20px 26px}
.ts-top{display:flex;justify-content:space-between;gap:12px;font:600 13px/1.3 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.ts-top span{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.ts-q,.ts-end{display:grid;justify-items:center;text-align:center;gap:4px;margin-top:8px;animation:ts .3s ease}
@keyframes ts{from{opacity:0}}
.ts-q img{width:176px;height:176px}.ts-q img:not([src]){visibility:hidden}
.ts-w{font:500 40px/1.1 var(--font-display);font-variation-settings:"opsz" 96;letter-spacing:-.01em}
.ts-ask{font:400 17px/1.4 var(--font-read);color:var(--ink-2);margin-bottom:10px}
.ts-ans{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.ts-ans .btn{padding:0 4px;font-size:15px;line-height:1.2}
.ts-end p{font:400 19px/1.45 var(--font-read);max-width:34ch;margin-bottom:12px}
.ts-end .btn{width:100%;max-width:320px}
.ts-last{margin-top:12px;font-size:14px;color:var(--ink-2);text-align:center;text-wrap:pretty}
.ts-last b,.ts-m b{color:var(--ink);font-weight:600}
.ts-h{font:600 15px/1.3 var(--font-ui)}
.ts-sub{font-size:14px;color:var(--ink-2);margin:2px 0 12px}
.ts-m{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ts-m li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;min-height:54px;padding:7px 8px 7px 6px;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.3;color:var(--ink-2)}
.ts-m b{margin-right:4px}
.ts-c span+span::before{content:" · "}
.ts-m .on{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink);border-radius:8px;color:var(--ink)}
.ts-b svg{transition:transform .2s ease}
.badge.ghost .b-tile{fill:var(--surface-sunk);stroke:var(--hair)}.badge.ghost .b-ink{fill:var(--ink-2)}.badge.ghost .b-gold{fill:var(--hair)}
@media (min-width:1000px){
  .stage.wide[data-screen="welcome"]{grid-template-columns:minmax(0,1fr)}
  .wide[data-screen="welcome"] .app{grid-column:1;max-width:1180px;padding:0 32px}
  .wide[data-screen="welcome"] .side-note{grid-area:2/1;justify-self:center;position:static;width:100%;max-width:1180px;margin:0;padding:8px 32px 40px;columns:2;column-gap:64px}
  .wide[data-screen="welcome"] .side-brand{display:none}
  .wide .welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;column-gap:64px}
  .wide .welcome .top-row{grid-column:1/-1}
  .wide .welcome h1{font-size:60px}
  .wide .welcome .cta{align-self:start;max-width:420px}
  .wide .taste{grid-area:2/2/4;align-content:start;padding-top:40px}
  .wide .ts-in{padding:18px 28px 24px 44px}
  .wide .ts-q{grid-template-columns:200px 1fr;justify-items:start;align-items:center;text-align:left;column-gap:20px}
  .wide .ts-q img{width:200px;height:200px;grid-row:1/span 3}
  .wide .ts-w{align-self:end;font-size:48px}
  .wide .ts-ans{grid-template-columns:1fr}
  .wide .ts-m{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0 6px;border:0}
  .wide .ts-m li{grid-template-columns:none;justify-items:center;align-content:start;text-align:center;gap:2px;padding:0;border:0;font-size:12.5px}
  .wide .ts-b{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:100%;height:118px;padding-bottom:calc(var(--i) * 10px)}
  .wide .ts-b::after{content:"";align-self:stretch;height:1px;background:var(--hair);margin-top:6px}
  .wide .ts-m b{display:block;margin:4px 0 0;font-size:14px}
  .wide .ts-c span{display:block}.wide .ts-c span+span::before{content:none}
  .wide .ts-m .on{background:none;box-shadow:none}
  .wide .on .ts-b::after{height:2px;background:var(--ink)}
  .wide .on svg{transform:scale(1.18)}
}
.w-k{font:600 13px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px}
.exams{display:flex;flex-wrap:wrap;margin:0 0 6px}
.exams a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font:600 13px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2);text-decoration:none}
.exams a span{display:inline-grid;place-items:center;height:30px;padding:0 11px;border-radius:999px}
.exams a:hover span{color:var(--ink)}
.exams a[aria-current] span{background:var(--surface-strong);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.exams + .how{margin-top:2px}
.verse{position:relative;margin:0 0 20px}
.verse-stage{display:grid}
.verse-item{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity var(--vt,.25s) ease,visibility 0s linear var(--vt,.25s)}
.verse-item.on{opacity:1;visibility:visible;transition:opacity var(--vt,.25s) ease,visibility 0s}
.verse-main{margin:0;padding-left:14px;border-left:2px solid var(--accent);font:500 19px/1.4 var(--font-read);color:var(--ink)}
.verse-main span,.verse-sub span{display:block}
.verse-sub{margin:6px 0 0;padding-left:16px;font:italic 400 15px/1.4 var(--font-read);color:var(--ink-2)}
.verse-ctl{display:flex;align-items:center;margin:2px 0 -8px -10px}
.verse-btn{color:var(--ink-2)}
.verse-btn svg{width:16px;height:16px}
.verse-btn .v-play,.verse-btn[data-paused] .v-pause{display:none}
.verse-btn[data-paused] .v-play{display:block}
.verse-dots{display:flex;gap:6px;margin-left:8px}
.verse-dots i{width:6px;height:6px;border-radius:50%;background:var(--track)}
.verse-dots i.on{background:var(--accent)}
:root:not([data-bg="paper"]) .verse-main{border-left:0;padding-left:0}
:root:not([data-bg="paper"]) .verse-sub{padding-left:0}
:root:not([data-bg="paper"]) :is(.card,.deck,.level-chip,.browse,.promo-entry,.dk-counts li,.sum-stats div,.ss-intro,.opt,.fc-face,.empty,.imp-sum,.rank-stats div,.strip-plate,.recheck){border-radius:6px}

.check-top{display:flex;align-items:center;gap:12px;min-height:44px}
.c-progress{flex:1;display:flex;align-items:center;gap:10px}
.meter{flex:1;height:4px;border-radius:4px;background:var(--track);overflow:hidden}
.meter i{display:block;height:100%;width:0;border-radius:inherit;transition:width .35s ease}
.c-meter{height:3px}
.c-meter i{background:var(--accent)}
.c-count{font:500 13px/1 var(--font-ui);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.c-phase{margin:10px auto 0;text-align:center;font:500 14px/1.35 var(--font-ui);color:var(--chip-ink);background:var(--chip-bg);padding:6px 12px;border-radius:12px;max-width:34ch}
.item{flex:1;display:flex;flex-direction:column}
.item-kicker{font:500 15px/1.3 var(--font-ui);color:var(--ink-2);text-align:center;margin-top:18px}
.word-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px 0;min-height:240px}
.pos{font:500 13px/1 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.big-word{font:500 var(--wsize,58px)/1.05 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.025em;overflow-wrap:anywhere;max-width:100%}
.answers{display:grid;gap:12px;padding-bottom:16px}
.item.swap .word-stage,.item.swap .m-body{animation:itemIn .22s ease both}
@keyframes itemIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.m-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0}
.m-q{font:400 26px/1.25 var(--font-display);font-variation-settings:"opsz" 72;text-align:center;margin:8px 0 22px;overflow-wrap:anywhere}
.m-q em{font-style:italic;font-weight:600;padding-right:.06em}
.options{display:grid;gap:10px;padding-bottom:16px}
.opt{appearance:none;border:0;cursor:pointer;text-align:left;padding:14px 16px;border-radius:18px;min-height:56px;
  background:var(--surface-strong);color:var(--ink);font:400 17px/1.4 var(--font-read);box-shadow:var(--shadow),inset 0 0 0 1px var(--hair);
  transition:background-color .15s,transform .12s}
.opt:hover{background:var(--sheet-bg)}
.opt:active{transform:scale(.99)}

.reveal{justify-content:center;text-align:center;align-items:center}
.reveal-inner{display:flex;flex-direction:column;align-items:center;width:100%;padding:24px 0}
.eyebrow{font:600 13px/1 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.badge-wrap{position:relative;width:min(48vw,200px);aspect-ratio:1;margin:18px 0 6px}
.badge-wrap .badge{width:100%;height:100%}
.tier-name{font:500 clamp(28px,7.6vw,34px)/1.2 var(--font-display);font-variation-settings:"opsz" 96;letter-spacing:-.005em;margin:12px 0 16px;max-width:21ch;text-wrap:balance}
.tier-name em{font-style:italic;font-weight:600;padding-right:.04em;white-space:nowrap}     /* the name never breaks across lines */
.s-story{font:500 20px/1.4 var(--font-display);margin:-4px 0 16px;max-width:30ch}
.strip-plate{display:inline-flex;flex-direction:column;align-items:center;padding:12px 16px 10px;border-radius:18px;background:var(--sheet-bg);box-shadow:var(--shadow)}
.strip{display:flex;gap:6px;justify-content:center;align-items:center;margin:0;padding:0;list-style:none}
.strip li{width:28px;height:8px;border-radius:8px;background:var(--c)}
.strip li.cur{width:44px;height:14px;box-shadow:0 0 0 2px var(--sheet-bg),0 0 0 4px var(--c)}
.strip-label{font-size:14px;color:var(--ink-2);margin-top:10px}
.reveal-panel{margin-top:26px;width:100%;text-align:left}
.reveal-line{font:400 20px/1.45 var(--font-read)}
.reveal-line b{font-family:var(--font-display);font-weight:600}
.reveal-note{font-size:14px;color:var(--ink-2);margin-top:10px}
.reveal .btn{margin-top:22px}
.reveal.play .r1{animation:rise .6s .1s cubic-bezier(.2,.7,.1,1) both}
.reveal.play .badge-wrap{animation:medalIn .95s .3s cubic-bezier(.18,.9,.25,1.12) both}
.reveal.play .r2{animation:nameIn .9s 1.55s cubic-bezier(.16,.8,.2,1) both}
.reveal.play .r3{animation:rise .6s 2.15s cubic-bezier(.2,.7,.1,1) both}
.reveal.play .r4{animation:rise .6s 2.4s cubic-bezier(.2,.7,.1,1) both}
.reveal.play .r5{animation:rise .5s 2.65s cubic-bezier(.2,.7,.1,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nameIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes medalIn{from{opacity:0;transform:scale(.5) rotate(-6deg)}to{opacity:1;transform:none}}

.drawer{gap:18px}
.d-head{position:relative;display:flex;flex-direction:column;gap:16px;padding-bottom:4px}
.level-row{display:flex;flex-direction:column;gap:10px}
.level-chip{appearance:none;border:0;cursor:pointer;display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px 14px 12px 12px;border-radius:20px;background:var(--surface-strong);box-shadow:var(--shadow),inset 0 0 0 1px var(--hair);transition:transform .12s}
.level-chip:active{transform:scale(.99)}
.chip-text{flex:1;min-width:0}
.chip-k{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.chip-badge{flex:none;display:block;width:44px;height:44px;margin-left:2px}
.medal-name{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.chip-name{display:block;font-size:19px;line-height:1.2;font-variation-settings:"opsz" 36;margin-top:3px}
.chip-help{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.chip-help svg{width:18px;height:18px}
.next{display:flex;align-items:center;gap:10px;padding:0 4px}
.next .meter{height:5px}
.next .meter i{background:var(--seg)}
.next-label{font-size:13px;color:var(--ink-2);white-space:nowrap}
.promo-entry{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 10px 10px 16px;border-radius:18px;background:var(--surface-strong);box-shadow:var(--shadow),inset 0 0 0 1px var(--hair)}
.promo-entry p{flex:1;min-width:150px;font-size:14.5px;color:var(--ink-2)}
.promo-entry p b{color:var(--ink)}
.recheck{display:flex;align-items:center;flex-wrap:wrap;gap:0 6px;font-size:14px;color:var(--ink-2);background:var(--surface-sunk);padding:4px 6px 4px 14px;border-radius:14px}

.today h2{font:600 32px/1.1 var(--font-display);font-variation-settings:"opsz" 96;letter-spacing:-.02em;margin:2px 0 10px}
.stats{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:4px;font-size:15px;color:var(--ink-2)}
.stats b{color:var(--ink);font-weight:600}

.fy-chip{display:inline-block;vertical-align:2px;margin-left:4px;font:600 11.5px/1 var(--font-ui);color:var(--chip-ink);background:var(--chip-bg);padding:4px 8px;border-radius:999px;white-space:nowrap}
.dk-list li.dk-fy{display:flex;align-items:center;gap:2px;border-top:1px solid var(--hair)}
.dk-list li.dk-fy:first-child{border-top:0}
.dk-list li.dk-fy .dk-row{border-top:0;flex:1;min-width:0}
.fy-word{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.fy-word strong{font:600 19px/1.2 var(--font-display);font-variation-settings:"opsz" 36}
.fy-pos{font-size:13px;color:var(--ink-2)}
.ipa{font:400 15px/1.2 var(--font-ipa);color:var(--ink-2)}
.fy-def{font:400 15.5px/1.4 var(--font-read);color:var(--ink-2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reason{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);font:500 12.5px/1.2 var(--font-ui)}
.fy-actions{display:flex;gap:0;flex:none}
.fy-empty{padding:16px 0 4px;color:var(--ink-2);font-size:15px}

.deck-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.deck{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair)}
.deck-main{flex:1;min-width:0}
.deck-name{font:600 16.5px/1.25 var(--font-ui);overflow-wrap:anywhere}
.deck-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px;font-size:13.5px;color:var(--ink-2)}
.deck-tier{display:inline-flex;align-items:center;gap:6px;flex:none}
.deck-badge{display:block}
.fchip.fchip-medal{padding:0 9px;display:inline-flex;align-items:center;justify-content:center;min-width:44px}
.ring{width:44px;height:44px;flex:none;position:relative}
.ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.ring .trk{stroke:var(--track)}
.ring .val{stroke:var(--c);stroke-linecap:round}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font:600 11.5px/1 var(--font-ui)}
.empty{padding:22px 20px;border-radius:22px;border:1.5px dashed color-mix(in oklab,var(--ink) 22%,transparent);margin-top:12px;text-align:left}
.empty h3{font:600 18px/1.3 var(--font-display);margin-bottom:6px}
.empty p{color:var(--ink-2);font-size:15px;margin-bottom:14px}
.add-btn{min-width:88px}
.add-btn[aria-pressed="true"]{background:var(--surface-sunk);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.add-btn svg{width:16px;height:16px}
.browse{appearance:none;border:0;cursor:pointer;width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:18px 20px;border-radius:22px;
  background:var(--surface-strong);box-shadow:var(--shadow),inset 0 0 0 1px var(--hair)}
.browse .b-text{flex:1}
.browse strong{display:block;font:600 18px/1.2 var(--font-display)}
.browse span{font-size:14px;color:var(--ink-2)}
.browse svg{width:20px;height:20px;flex:none}
.retake{text-align:center;padding:2px 0 0}
.demo{margin-top:6px;padding:14px 16px;border-radius:18px;border:1.5px dashed color-mix(in oklab,var(--ink) 25%,transparent);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.demo p{flex:1;min-width:160px;font-size:13px;color:var(--ink-2)}
.demo b{display:block;font:600 12px/1.3 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

.deck-open{appearance:none;border:0;cursor:pointer;width:100%;text-align:left;color:inherit;font:inherit;transition:transform .12s}
.deck-open:active{transform:scale(.99)}
.deck-open > svg{width:18px;height:18px;flex:none;color:var(--ink-2)}
.deck-name,.deck-meta{display:block}.deck-meta{display:flex}
.dk{gap:16px}
.dk .ss-top .icon-btn,.fcs .ss-top .icon-btn{margin-left:-10px}
.dk-head{position:relative;display:flex;align-items:center;gap:16px}
.dk-ring .ring,.dk-ring .ring svg{width:76px;height:76px}
.dk-ring .ring span{font-size:16px}
.dk-title{flex:1;min-width:0}
.dk-title h1{font:500 32px/1.08 var(--font-display);font-variation-settings:"opsz" 96;letter-spacing:-.02em;margin:6px 0 6px;overflow-wrap:anywhere}
.dk-counts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.dk-counts li{background:var(--surface);border-radius:16px;padding:10px 12px;box-shadow:inset 0 0 0 1px var(--hair)}
.dk-counts b{display:block;font:600 26px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.dk-counts span{font-size:13px;color:var(--ink-2)}
.dk-study p{font:400 17px/1.45 var(--font-read);color:var(--ink-2);margin-bottom:14px}
.dk-acts{display:grid;gap:10px}
.dk .sheet-sec{margin:8px 0 0}
.dk-legend{margin-top:-8px}
.dk-list{list-style:none;margin:0;padding:0}
.dk-row{appearance:none;border:0;background:none;cursor:pointer;width:100%;text-align:left;color:inherit;font:inherit;display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--hair);border-radius:0}
.dk-list li:first-child .dk-row{border-top:0}
.dk-main{flex:1;min-width:0}.dk-main > span{display:block}.dk-main > .fy-word{display:flex}
.dk-def{font:400 15px/1.35 var(--font-read);color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-main .reason{display:inline-flex;margin-top:6px}
.stc{flex:none;font:600 12px/1 var(--font-ui);padding:6px 9px;border-radius:999px;background:var(--chip-bg);color:var(--chip-ink)}
.stc-l{background:var(--accent-soft);color:var(--ink)}
.stc-k{background:var(--btn-bg);color:var(--btn-ink)}
.stc-d{background:none;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair)}
.dk-foot{text-align:center;padding:4px 0 8px}
.stage[data-screen="cards"] .side-note,.stage[data-screen="cards"] .foot{display:none}
.fcs{min-height:100svh}
.fc-note{align-self:center;font:500 13.5px/1.3 var(--font-ui);color:var(--chip-ink);background:var(--chip-bg);padding:6px 12px;border-radius:12px;margin:10px 0 14px;text-align:center}
.fc{position:relative;flex:1;min-height:340px;max-height:540px;perspective:1400px;cursor:pointer;touch-action:manipulation;border-radius:28px;-webkit-tap-highlight-color:transparent}
.fc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.fc[data-flip="1"] .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:28px;background:var(--sheet-bg);box-shadow:var(--shadow-lg),inset 0 0 0 1px var(--hair);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:48px 22px 40px;overflow:auto}
.fc-back{transform:rotateY(180deg);justify-content:flex-start}
.fc-back::before,.fc-back::after{content:"";flex:1 1 0;margin:-6px 0}
.fc-face[inert]{pointer-events:none}
.fc-face .pos{margin:0}
.fc-say{position:absolute;top:10px;right:10px}
.fc-hint{position:absolute;bottom:16px;left:0;right:0;font-size:13px;color:var(--ink-2)}
.fc-back .fb-word{justify-content:center}
.vi-label{font:600 11.5px/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.fc-nav{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:16px 0 6px}
.fc-nav .btn{font-size:18px}
.fc-keys{text-align:center;font-size:12.5px;color:var(--ink-2);padding-bottom:14px}
@media (hover:none){.fc-keys{display:none}}

.w-import{text-align:center}
.tip{display:grid;gap:8px}
.tip-head{display:flex;align-items:flex-start;gap:8px}
.tip-h{flex:1;font:600 19px/1.25 var(--font-display);font-variation-settings:"opsz" 36;padding-top:10px;text-wrap:balance}
.tip-head .icon-btn{margin:0 -10px 0 0}
.tip-p,.tip-how{font:400 16px/1.45 var(--font-read);color:var(--ink-2)}
.tip-how b,.how b{color:var(--ink);font-weight:600}
.tip-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.set-acts{display:grid;gap:10px;margin-top:16px}
.sheet-sec.set-first{margin-top:6px}
.set-seg{display:flex;width:100%}
.set-seg button{flex:1 1 0;min-width:0;padding:0 8px;font-size:15px}
.seg.set-seg button[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink);box-shadow:none}
.set-note{margin-top:8px}
.set-h4{font:600 19px/1.25 var(--font-display);font-variation-settings:"opsz" 36;margin:0 0 6px}
.move-warn{margin-top:12px}
.set-status{margin-top:12px;font-size:14.5px;line-height:1.45;padding:10px 14px;border-radius:14px;background:var(--surface-sunk);color:var(--ink)}
.set-status[data-kind="error"]{box-shadow:inset 0 0 0 1.5px var(--accent)}
.imp-sum{display:grid;gap:4px;margin:4px 0 16px;padding:14px 16px;border-radius:16px;background:var(--surface-sunk)}
.imp-sum .imp-rank{font-size:22px;line-height:1.2;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.imp-sum .imp-name{font-size:21px}
.imp-sum span{font-size:15px;color:var(--ink-2)}
.share-ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.15em}

.foot{padding:24px 4px 28px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.foot-nav ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0 8px;margin-left:-8px;margin-right:4px;color:var(--ink-2);font:500 13.5px/1.2 var(--font-ui);
  text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;border-radius:8px}
.foot-nav a:hover{color:var(--ink);text-decoration-color:currentColor}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface-sunk);box-shadow:inset 0 0 0 1px var(--hair)}
.seg button{appearance:none;border:0;background:none;cursor:pointer;padding:0 14px;border-radius:999px;font:500 13px/1 var(--font-ui);color:var(--ink-2);min-height:44px;min-width:44px}
.seg button[aria-pressed="true"]{background:var(--surface-strong);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.set-btn svg{width:20px;height:20px}
.top-acts .set-btn{margin-right:-10px}
.reveal,.summary{position:relative}
.lang{position:relative;display:inline-flex;flex:none}
.lang::before{content:"";position:absolute;inset:6px 0;border-radius:999px;background:var(--surface-sunk);box-shadow:inset 0 0 0 1px var(--hair)}
.lang button{position:relative;appearance:none;border:0;background:none;cursor:pointer;width:44px;height:44px;padding:0;display:inline-grid;place-items:center;border-radius:999px;
  font:600 12.5px/1 var(--font-ui);letter-spacing:.06em;color:var(--ink-2)}
.lang button span{display:inline-grid;place-items:center;min-width:36px;height:28px;padding:0 6px;border-radius:999px}
.lang button[aria-pressed="true"] span{background:var(--surface-strong);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.lang button:hover span{color:var(--ink)}

dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;padding:0;border:0;width:100%;max-width:460px;max-height:min(88svh,780px);
  border-radius:26px 26px 0 0;background:var(--sheet-bg);color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden}
dialog.sheet[open]{display:flex;flex-direction:column;animation:sheetIn .26s cubic-bezier(.2,.8,.2,1)}
dialog.sheet::backdrop{background:var(--scrim)}
@keyframes sheetIn{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:700px) and (min-height:640px){dialog.sheet{inset:0;margin:auto;border-radius:26px;height:fit-content}}
.sheet-head{display:flex;align-items:center;gap:8px;padding:16px 10px 8px 20px}
.sheet-head h2{flex:1;font:600 22px/1.2 var(--font-display);font-variation-settings:"opsz" 48}
.sheet-body{overflow:auto;overscroll-behavior:contain;padding:4px 20px 24px}
.confirm-body{padding:24px 20px 20px}
.confirm-body h2{font:600 24px/1.2 var(--font-display);font-variation-settings:"opsz" 48;margin-bottom:8px}
.confirm-body p{color:var(--ink-2);font:400 17px/1.45 var(--font-read);margin-bottom:20px}
.confirm-actions{display:grid;gap:10px}
.guide{display:inline-block;font:500 12.5px/1.35 var(--font-ui);color:var(--chip-ink);background:var(--chip-bg);padding:6px 10px;border-radius:10px;margin-bottom:18px}
.refbar{position:relative;padding-top:34px;margin-bottom:6px}
.refbar .segs{display:flex;height:16px;border-radius:10px;overflow:hidden;gap:2px}
.refbar .segs i{background:var(--c);flex:var(--w) 1 0}
.marker{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font:600 12px/1 var(--font-ui)}
.marker span{background:var(--btn-bg);color:var(--btn-ink);padding:5px 8px;border-radius:8px;white-space:nowrap}
.marker::after{content:"";width:2px;height:22px;background:var(--btn-bg);margin-top:2px;border-radius:2px}
.reflabels{display:flex;gap:2px;margin-top:8px}
.reflabels div{flex:var(--w) 1 0;min-width:0;text-align:center;font-size:11.5px;line-height:1.25;color:var(--ink-2)}
.reflabels b{display:block;color:var(--ink);font:600 12px/1.25 var(--font-ui)}
.reflabels .cur b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.legend{list-style:none;margin:20px 0;padding:0;display:grid;gap:2px}
.legend li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px}
.legend li.cur{background:var(--surface-sunk)}
.legend .bd{color:var(--ink-2);font-size:14px;flex:1}
.legend .you{font:600 12px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.how{font:400 16.5px/1.5 var(--font-read);color:var(--ink-2)}
.how + .how{margin-top:8px}

.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 20px 12px;margin:0 -20px;scrollbar-width:none}
#lib-chips{flex-wrap:wrap;overflow-x:visible}   /* the medal filter: All + up to seven letters, on two rows if need be */
.chips::-webkit-scrollbar{display:none}
.fchip{appearance:none;border:0;cursor:pointer;flex:none;padding:0 16px;border-radius:999px;font:500 14px/1 var(--font-ui);color:var(--ink-2);
  background:var(--surface-sunk);box-shadow:inset 0 0 0 1px var(--hair);min-height:44px}
.fchip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink);box-shadow:none}
.lib-views{display:inline-flex;flex:none;border-radius:999px;background:var(--surface-sunk);box-shadow:inset 0 0 0 1px var(--hair)}
.lib-views button,.tadd{appearance:none;border:0;cursor:pointer;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:none;color:var(--ink-2)}
.lib-views button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.lib-views svg,.lib-back svg,.tadd svg,.tp-chev{width:18px;height:18px;flex:none}
.lib-back{appearance:none;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 12px 0 4px;margin:0 auto 0 -10px;border-radius:999px;font:600 15px/1 var(--font-ui);color:var(--accent-text)}
.topics{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.topic{appearance:none;border:1px solid var(--hair);cursor:pointer;width:100%;height:100%;text-align:left;color:inherit;font:inherit;display:flex;flex-direction:column;gap:8px;padding:0 0 12px;
  border-radius:16px;overflow:hidden;background:var(--surface)}
.tp-art{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:#FFF5E8}
.tp-art img{display:block;width:82%;height:auto}
.tp-body{display:grid;gap:6px;padding:0 12px;min-width:0}
.tp-name{font:700 15px/1.25 var(--font-ui);overflow-wrap:anywhere}
.tp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;line-height:1.3;color:var(--ink-2)}
.tp-count{flex:1 0 100%}
.tp-strip{display:inline-flex;gap:3px}
.lib-fit{font:600 12px/1 var(--font-ui);color:var(--accent-text);background:var(--accent-soft);padding:5px 8px;border-radius:999px;white-space:nowrap}
.tp-chev{display:none;color:var(--ink-2)}
.topics[data-view="list"]{grid-template-columns:minmax(0,1fr);gap:0}
.topics[data-view="list"] li + li{border-top:1px solid var(--hair)}
.topics[data-view="list"] .topic{flex-direction:row;align-items:center;gap:12px;padding:10px 0;border:0;border-radius:0;background:none;overflow:visible}
.topics[data-view="list"] .tp-art{flex:none;width:52px;aspect-ratio:1;border-radius:10px;box-shadow:0 0 0 1px var(--hair)}
.topics[data-view="list"] .tp-art img{width:92%}
.topics[data-view="list"] .tp-body{flex:1;padding:0;gap:4px}
.topics[data-view="list"] .tp-count{flex:0 1 auto}
.topics[data-view="list"] .tp-chev{display:block}
.tpg-head{display:grid;gap:6px;padding:2px 0 4px}
.tpg-head+.topics{margin-top:14px}
.tpg-name{font:600 26px/1.15 var(--font-display);font-variation-settings:"opsz" 72;letter-spacing:-.01em;overflow-wrap:anywhere}
.tpg-desc{font:400 16px/1.45 var(--font-read);color:var(--ink-2)}
.tpg-meta,.mg-h{font-size:13.5px;color:var(--ink-2)}
.mg{margin-top:14px}
.mg-h{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--hair);font-weight:500}
.mg-rows{list-style:none;margin:0;padding:0}
.tdeck{display:flex;align-items:center;gap:12px;padding:6px 0;cursor:pointer}
.tdeck + .tdeck{border-top:1px dashed var(--hair)}
.kring svg{display:block;flex:none;width:30px;height:30px;transform:rotate(-90deg)}
.kring .trk{stroke:var(--track)}
.kring .val{stroke:var(--c);stroke-linecap:round}
.tdeck-open{appearance:none;border:0;background:none;cursor:pointer;flex:1;min-width:0;min-height:44px;padding:4px 0;text-align:left;color:inherit;font:inherit;border-radius:8px}
.tdeck-w{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 15px/1.3 var(--font-ui)}
.tdeck-w i{font-style:normal;font-weight:400;color:var(--ink-2)}
.tdeck-n{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.tadd{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.tadd[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-ink);box-shadow:none}
.lib-none{padding:16px 0;color:var(--ink-2);font:italic 400 16px/1.4 var(--font-read)}
.known-group{margin-top:16px;border-top:1px solid var(--hair)}
.known-group summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font:500 14px/1.2 var(--font-ui);color:var(--ink-2);border-radius:10px}
.known-group summary::-webkit-details-marker{display:none}
.known-group summary::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s}
.known-group[open] summary::before{transform:rotate(45deg)}
.lib-head-sticky{position:sticky;top:-4px;margin-top:-4px;padding-top:4px;background:var(--sheet-bg);z-index:1}   /* over the body's 4 px top padding too */
.sess-group h3{font:600 13px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 8px}
.sess-list{list-style:none;margin:0;padding:0}
.sess-list li{padding:10px 0;border-top:1px solid var(--hair)}
.sess-list li:first-child{border-top:0}
.sess-list strong{font:600 17px/1.2 var(--font-display)}
.sess-list p{font:400 15px/1.4 var(--font-read);color:var(--ink-2);margin-top:2px}
.note{font-size:14px;color:var(--ink-2);background:var(--surface-sunk);padding:12px 14px;border-radius:14px}

.rank-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0 8px}
.step-line{font-size:14.5px;color:var(--ink-2);margin-top:12px}
.rank-hero .s-story{font-size:18px;margin:10px 0 0}
.hero-name{display:block;font-size:28px;line-height:1.15;font-variation-settings:"opsz" 72;margin-top:14px}
.steps{list-style:none;margin:16px 0 4px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.steps li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair);text-align:center}
.steps li .grade{font-size:20px;line-height:1}
.steps li span:last-child{font-size:12.5px;line-height:1.2;color:var(--ink-2)}
.steps li.here{background:var(--ink);box-shadow:none}
.steps li.here .grade,.steps li.here span:last-child{color:var(--ground)}
.rank-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
.rank-stats div{background:var(--surface-sunk);border-radius:16px;padding:12px 14px}
.rank-stats b{display:block;font:600 28px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.rank-stats span{display:block;font-size:13.5px;line-height:1.3;color:var(--ink-2)}
.rank-next{display:flex;align-items:center;gap:10px;margin:12px 2px 4px}
.rank-next .meter{height:6px}
.rank-next .meter i{background:var(--seg)}
.ladder{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:2px}
.ladder li{display:flex;align-items:center;gap:12px;padding:6px 10px;border-radius:14px;min-height:52px}
.ladder li.cur{background:var(--surface-sunk);box-shadow:inset 0 0 0 1.5px var(--seg)}
.ladder .badge{flex:none}
.ladder .ladder-name{flex:1;min-width:0;font-size:16.5px;line-height:1.25;font-variation-settings:"opsz" 36}
.ladder .st{font-size:13px;color:var(--ink-2);text-align:right}
.ladder .you{font:600 12px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.sheet-sec{font:600 13px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:22px 0 10px}
.share-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.share-card{width:min(100%,300px);aspect-ratio:1;height:auto;border-radius:6px;box-shadow:inset 0 0 0 1px var(--hair);background:var(--ground)}
.share-note{font-size:13.5px;color:var(--ink-2);text-align:center;max-width:34ch}
.promo-q{font:400 24px/1.25 var(--font-display);font-variation-settings:"opsz" 72;margin:6px 0 18px;overflow-wrap:anywhere}
.promo-q em{font-style:italic;font-weight:600}
.promo-meta{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-2)}
.promo-result{text-align:center;padding:18px 0 6px}
.promo-result h3{font:500 30px/1.15 var(--font-display);margin-bottom:8px}
.promo-result .promo-badge{margin:0 auto 10px}
.promo-result .promo-name{display:block;font-size:24px;line-height:1.2;margin-bottom:10px}
.promo-result p{color:var(--ink-2);font:400 17px/1.45 var(--font-read);margin-bottom:18px}

.toast{position:fixed;left:50%;bottom:16px;transform:translate(-50%,20px);width:calc(100% - 32px);max-width:428px;z-index:20;
  display:flex;align-items:center;gap:12px;padding:6px 6px 6px 18px;min-height:56px;border-radius:16px;background:var(--btn-bg);color:var(--btn-ink);
  font-size:14.5px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .2s,transform .2s,visibility 0s}
.toast span{flex:1;padding:8px 0}
.toast button{appearance:none;border:0;background:none;color:inherit;font:600 14px/1 var(--font-ui);min-height:44px;min-width:56px;padding:0 12px;border-radius:10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.toast button:focus-visible{outline-color:var(--btn-ink)}

.level-chip{min-height:64px;padding:8px 10px 8px 8px;border-radius:999px;gap:10px;
  box-shadow:var(--shadow),inset 0 0 0 1.5px color-mix(in oklab,var(--seg,var(--ink)) 45%,var(--hair))}
.level-chip:hover{background:var(--sheet-bg)}
.level-chip .chip-text{padding-left:2px}
.chip-go{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--surface-sunk);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair);transition:transform .15s}
.chip-go svg{width:18px;height:18px}
.level-chip:hover .chip-go{transform:translateX(2px)}
.demo{align-items:flex-start}
.demo-btns{display:flex;flex-wrap:wrap;gap:8px}
.demo .sim-day{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-2)}
.deck-focus{font:600 11.5px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--chip-ink);background:var(--chip-bg);padding:4px 8px;border-radius:999px}
.today .t-sub{font-size:14px;color:var(--ink-2);margin:-6px 0 12px}

.session,.summary{min-height:100svh}
.stage[data-screen="session"] .side-note,.stage[data-screen="summary"] .side-note,
.stage[data-screen="session"] .foot,.stage[data-screen="summary"] .foot{display:none}
.ss-top{display:flex;align-items:center;gap:8px;min-height:44px}
.ss-top .icon-btn{margin-left:-10px}
.ss-meter i{background:var(--accent)}
.ss-card{flex:1;display:flex;flex-direction:column;padding:8px 0 4px}
.ss-card.swap{animation:itemIn .22s ease both}
.ss-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:14px 0 4px;font-size:14px;color:var(--ink-2)}
.ss-badge{font:600 12px/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);background:var(--accent-soft);padding:6px 10px;border-radius:999px}
.ss-badge-check{color:var(--chip-ink);background:var(--chip-bg)}
.ss-intro{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 20px;margin:8px 0 16px;
  background:var(--surface-strong);border-radius:18px;box-shadow:inset 0 0 0 1px var(--hair)}
.word-tile{flex:none;align-self:center;width:132px;height:132px;border-radius:16px;overflow:hidden;background:#FFF5E8;box-shadow:0 0 0 1px var(--hair)}
.word-tile img{display:block;width:100%;height:100%}
:root:not([data-bg="paper"]) .word-tile{border-radius:4px}
@media (min-width:600px){.ss-tile{width:168px;height:168px}}
@media (max-height:700px){.ss-tile{width:104px;height:104px}}
.fc-tile{width:104px;height:104px}
.dk-loading{padding:18px 4px;color:var(--ink-2);text-align:center}
.ss-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.ss-head .pos{margin-bottom:10px;order:-1}
.ss-word{margin:0}
.ss-pron{display:flex;align-items:center;justify-content:center;gap:2px;min-height:44px;margin-top:6px}
.ss-pron .ipa{font-size:17px}
.ss-say{color:var(--ink)}
.ss-def{font:400 19px/1.45 var(--font-read);text-align:center;max-width:34ch;margin:0 auto}
.ss-def-q{margin:0 auto 10px}
.ss-ex,.ss-cloze{font:italic 400 18px/1.5 var(--font-read);color:var(--ink-2);text-align:center;max-width:34ch;margin:0 auto}
.ss-ex mark{background:var(--accent-soft);color:var(--ink);font-style:normal;font-weight:600;padding:0 4px;border-radius:6px;box-shadow:inset 0 -2px 0 color-mix(in oklab,var(--accent) 55%,transparent)}
.ss-cloze{font-size:20px;color:var(--ink);margin-bottom:16px}
.ss-cloze .gap{display:inline-block;min-width:4.2em;border-bottom:2.5px solid var(--accent);margin:0 3px;transform:translateY(-3px)}
.ss-vi-wrap{display:flex;flex-direction:column;align-items:center}
.ss-vi{font:500 18px/1.4 var(--font-ui);color:var(--ink);background:var(--surface-sunk);padding:8px 14px;border-radius:12px;text-align:center}
.ss-actions{padding:4px 0 16px}
.ss-q{margin:14px 0 18px}
.ss-words .opt{font:600 18px/1.3 var(--font-ui);text-align:center}
.opt[aria-disabled="true"]{cursor:default}
.opt.is-right{background:color-mix(in oklab,var(--right) 18%,var(--surface-strong));box-shadow:var(--shadow),inset 0 0 0 2px var(--right)}
.opt.is-right svg{width:18px;height:18px;vertical-align:-3px;margin-right:6px;color:var(--right)}
.opt.is-wrong{opacity:.62;box-shadow:inset 0 0 0 1.5px var(--hair)}
.ss-alt{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px;padding:0 0 16px}
.ss-type{display:flex;gap:8px;margin:0 0 8px}
.ss-input{flex:1;min-width:0;min-height:52px;padding:0 16px;border-radius:16px;border:0;background:var(--surface-strong);color:var(--ink);
  font:500 20px/1 var(--font-ui);box-shadow:var(--shadow),inset 0 0 0 1.5px var(--hair)}
.ss-input:focus{outline:2.5px solid var(--focus);outline-offset:2px}
.ss-type .btn{min-height:52px}
.ss-hint{text-align:center;font-size:14px;color:var(--ink-2);margin-bottom:6px}
.ss-feedback{position:sticky;bottom:0;z-index:2;margin:0 -16px;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;
  background:var(--sheet-bg);box-shadow:0 -1px 0 var(--hair);display:grid;gap:10px;animation:fbIn .2s ease both}
@keyframes fbIn{from{transform:translateY(12px);opacity:.3}to{transform:none;opacity:1}}
.fb-title{display:flex;align-items:center;gap:8px;font:600 19px/1.3 var(--font-display)}
.fb-title svg{width:22px;height:22px;color:var(--right)}
.fb-word{font-size:15px;color:var(--ink-2);display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
.fb-word b{font:600 19px/1.2 var(--font-display);color:var(--ink)}
.fb-def{font:400 16.5px/1.45 var(--font-read)}
.fb-answer{display:grid;gap:6px;background:var(--surface-sunk);border-radius:16px;padding:10px 14px}
.fb-answer .ss-ex{text-align:left;margin:0;font-size:16.5px}
.fb-next,.fb-typed{font-size:14px;color:var(--ink-2)}

.summary{justify-content:center}
.sum-body{display:flex;flex-direction:column;gap:16px;padding:28px 0 20px}
.sum-h{font:500 clamp(40px,11vw,54px)/1.05 var(--font-display);font-variation-settings:"opsz" 144;letter-spacing:-.03em;margin-top:-6px}
.sum-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sum-stats[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sum-stats[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.sum-stats[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sum-stats div{background:var(--surface);border-radius:18px;padding:12px;box-shadow:inset 0 0 0 1px var(--hair)}
.sum-stats b{display:block;font:600 30px/1.1 var(--font-display);font-variant-numeric:tabular-nums}
.sum-stats span{display:block;font-size:13px;line-height:1.3;color:var(--ink-2)}
.sum-rank{display:grid;gap:12px}
.sum-rank-row{display:flex;align-items:center;gap:12px}
.sum-rank-text{flex:1;min-width:0}
.sum-name{display:block;font-size:19px;line-height:1.2;margin-top:3px}
.sum-rank-text .sum-up{margin-top:8px}
.sum-up{display:inline-flex;align-items:center;gap:4px;font:600 13px/1 var(--font-ui);color:var(--btn-ink);background:var(--btn-bg);padding:7px 10px;border-radius:999px}
.sum-up svg{width:14px;height:14px}
.sum-next{margin:0}
.sum-meter i{transition:width 1.1s cubic-bezier(.3,.7,.2,1)}
.sum-note{margin-top:-4px}
.sum-streak{display:flex;align-items:center;gap:8px;font-size:15px}
.sum-streak b{font:600 18px/1.2 var(--font-display)}
.sum-plus{font:700 13px/1 var(--font-ui);color:var(--accent-text);background:var(--accent-soft);padding:5px 8px;border-radius:999px}
.sum-nextday{font:400 17px/1.4 var(--font-read);color:var(--ink-2)}
.summary.play .s1{animation:rise .55s .05s cubic-bezier(.2,.7,.1,1) both}
.summary.play .s2{animation:rise .55s .25s cubic-bezier(.2,.7,.1,1) both}
.summary.play .s3{animation:rise .55s .45s cubic-bezier(.2,.7,.1,1) both}
.summary.play .s4{animation:rise .55s 2.15s cubic-bezier(.2,.7,.1,1) both}
.summary.play .s5{animation:rise .5s 2.35s cubic-bezier(.2,.7,.1,1) both}
.summary.play .sum-up{animation:upPop .5s 2.05s cubic-bezier(.2,.9,.3,1.4) both}
.summary.play .sum-plus{animation:upPop .5s 2.3s cubic-bezier(.2,.9,.3,1.4) both}
@keyframes upPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .ss-feedback,.ss-card.swap{animation:none}
  .sum-meter i{transition:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}