/* Layout: single-column phone-first study app; gauge-manifold blue (low side) + red (high side) as the two signal colors */
:root{
  --txa-bg:#eef2f6; --txa-surface:#ffffff; --txa-ink:#14202e; --txa-muted:#5a6878; --txa-line:#d3dbe4;
  --txa-blue:#1f5fa8; --txa-blue-soft:#e3edf8; --txa-red:#c23a2b; --txa-red-soft:#f9e6e3;
  --txa-good:#1d7a45; --txa-good-soft:#e2f3e9;
  --txa-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --txa-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}

.txa{font-family:var(--txa-body);color:var(--txa-ink);background:var(--txa-bg);font-size:22px;line-height:1.5;max-width:820px;margin:0 auto;padding-block:20px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));box-sizing:border-box}
.txa *{box-sizing:border-box}
.txa h1,.txa h2,.txa h3{font-family:var(--txa-display);font-weight:700;line-height:1.1;margin:0;text-wrap:balance;letter-spacing:.01em}
.txa h1{font-size:2.2em}.txa h2{font-size:1.7em}.txa h3{font-size:1.3em}
.txa p{margin:0}
.txa-stack{display:flex;flex-direction:column;gap:16px}
.txa-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.txa-head{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:3px solid var(--txa-ink);padding-bottom:10px}
.txa-brand{font-family:var(--txa-display);font-weight:700;font-size:1.25em;letter-spacing:.08em;text-transform:uppercase}
.txa-brand b{color:var(--txa-red)}
.txa-eyebrow{font-family:var(--txa-display);font-size:.85em;letter-spacing:.12em;text-transform:uppercase;color:var(--txa-muted);font-weight:600}
.txa-muted{color:var(--txa-muted)}
.txa-card{background:var(--txa-surface);border:1px solid var(--txa-line);border-radius:10px;padding:18px}
.txa-btn{font:inherit;font-family:var(--txa-display);font-weight:700;font-size:1.05em;letter-spacing:.04em;border:2px solid var(--txa-ink);background:var(--txa-ink);color:var(--txa-surface);border-radius:8px;padding:12px 22px;cursor:pointer;min-height:54px}
.txa-btn.ghost{background:transparent;color:var(--txa-ink)}
.txa-btn.sm{font-size:1em;padding:8px 14px;min-height:44px}
.txa-btn:disabled{opacity:.45;cursor:default}
.txa-btn:focus-visible,.txa-opt:focus-visible,.txa-tile:focus-visible,.txa-flash:focus-visible,.txa input:focus-visible{outline:3px solid var(--txa-blue);outline-offset:2px}
.txa-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.txa-tile{font:inherit;text-align:left;background:var(--txa-surface);border:1px solid var(--txa-line);border-radius:10px;padding:20px;cursor:pointer;color:var(--txa-ink);display:flex;flex-direction:column;gap:6px;min-width:0}
.txa-tile:hover{border-color:var(--txa-ink)}
.txa-tile strong{font-family:var(--txa-display);font-size:1.5em}
.txa-tile span{color:var(--txa-muted);font-size:1em}
.txa-tile.main{grid-column:1/-1;background:var(--txa-ink);color:var(--txa-surface);border-color:var(--txa-ink)}
.txa-tile.main span{color:inherit;opacity:.8}
.txa-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.txa-stat{text-align:center;min-width:0}
.txa-stat b{display:block;font-family:var(--txa-display);font-size:2.4em;font-variant-numeric:tabular-nums;line-height:1}
.txa-stat small{color:var(--txa-muted);font-size:.9em;letter-spacing:.06em;text-transform:uppercase}
.txa-gauge{height:12px;border-radius:6px;background:var(--txa-line);overflow:hidden}
.txa-gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--txa-blue),var(--txa-red));transition:width .3s}
.txa-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.txa-set{font:inherit;font-size:1em;background:var(--txa-surface);border:1px solid var(--txa-line);border-radius:8px;padding:16px;cursor:pointer;text-align:left;color:var(--txa-ink)}
.txa-set:hover{border-color:var(--txa-ink)}
.txa-set b{display:block;font-family:var(--txa-display);font-size:1.35em}
.txa-set small{color:var(--txa-muted);font-variant-numeric:tabular-nums}
.txa-q{font-size:1.3em;font-weight:600;line-height:1.4}
.txa-opts{display:flex;flex-direction:column;gap:10px}
.txa-opt{font:inherit;text-align:left;display:flex;gap:12px;align-items:flex-start;background:var(--txa-surface);border:2px solid var(--txa-line);border-radius:10px;padding:16px 16px;cursor:pointer;color:var(--txa-ink);min-height:62px;font-size:1.1em}
.txa-opt:hover:not(:disabled){border-color:var(--txa-blue)}
.txa-opt .k{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid currentColor;display:grid;place-items:center;font-family:var(--txa-display);font-weight:700;font-size:.95em}
.txa-opt.right{border-color:var(--txa-good);background:var(--txa-good-soft)}
.txa-opt.right .k{background:var(--txa-good);border-color:var(--txa-good);color:#fff}
.txa-opt.wrong{border-color:var(--txa-red);background:var(--txa-red-soft)}
.txa-opt.wrong .k{background:var(--txa-red);border-color:var(--txa-red);color:#fff}
.txa-opt:disabled{cursor:default}
.txa-feedback{border-left:4px solid var(--txa-good);background:var(--txa-good-soft);padding:10px 14px;border-radius:0 8px 8px 0}
.txa-feedback.no{border-color:var(--txa-red);background:var(--txa-red-soft)}
.txa-progress{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--txa-muted);font-size:.92em}
.txa-grade{font-family:var(--txa-display);font-size:5em;font-weight:700;line-height:1}
.txa-pill{display:inline-block;font-family:var(--txa-display);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85em;padding:3px 10px;border-radius:99px}
.txa-pill.pass{background:var(--txa-good-soft);color:var(--txa-good)}
.txa-pill.fail{background:var(--txa-red-soft);color:var(--txa-red)}
.txa-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.txa-list li{background:var(--txa-surface);border:1px solid var(--txa-line);border-radius:8px;padding:12px 14px}
.txa-list .ans{color:var(--txa-good);font-weight:600}
.txa-list .yours{color:var(--txa-red)}
.txa-flash{font:inherit;width:100%;min-height:320px;background:var(--txa-surface);border:1px solid var(--txa-line);border-radius:12px;padding:24px;cursor:pointer;color:var(--txa-ink);display:flex;flex-direction:column;justify-content:center;gap:12px;text-align:left}
.txa-flash.back{background:var(--txa-blue-soft);border-color:var(--txa-blue)}
.txa-flash .big{font-size:1.45em;font-weight:600;line-height:1.4}
.txa-flash .ansbig{font-family:var(--txa-display);font-size:1.8em;font-weight:700;color:var(--txa-blue)}
.txa-field{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 120px}
.txa-field label{font-size:.85em;color:var(--txa-muted);font-weight:600}
.txa input{font:inherit;font-variant-numeric:tabular-nums;padding:10px 12px;border:2px solid var(--txa-line);border-radius:8px;background:var(--txa-surface);color:var(--txa-ink);width:100%}
.txa-result{font-family:var(--txa-display);font-size:1.6em;font-weight:700;color:var(--txa-blue);font-variant-numeric:tabular-nums}
.txa-formula{font-family:var(--txa-display);letter-spacing:.04em;color:var(--txa-muted)}
.txa-toggle{display:flex;gap:8px;align-items:center;font-size:.95em;color:var(--txa-muted)}
/* phones: break out of the theme's content column and fill the screen edge to edge */
@media (max-width:768px){.txa{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:100vh;min-height:100dvh;font-size:23px;padding-block:16px 32px;border-radius:0}.txa h1{font-size:2.1em}.txa-sets{grid-template-columns:1fr 1fr}.txa-card{padding:20px}}
@media (max-width:480px){.txa-tiles,.txa-sets{grid-template-columns:1fr}.txa{font-size:22px}.txa h1{font-size:1.9em}.txa-grade{font-size:4.5em}.txa-tile.main{padding:24px}}
@media (prefers-reduced-motion:reduce){.txa-gauge i{transition:none}}

body:has(#txa-app){overflow-x:hidden}
/* The theme turns buttons red on hover; keep the small gray text readable there */
.txa button:hover small,.txa button:hover .txa-muted,.txa button:hover .txa-eyebrow,.txa .txa-tile:hover span{color:#ffd23f}
/* A revealed flashcard keeps its light blue background on hover, so its small text stays black */
.txa button.txa-flash.back:hover .txa-muted,.txa button.txa-flash.back:hover .txa-eyebrow{color:#000}

/* Small site logo in front of the app name */
.txa .txa-brand{display:flex;align-items:center;gap:10px}
.txa .txa-logo{width:2em;height:2em;object-fit:contain;flex:none;display:block}
/* Header with the English/Español switch: keep the name on one line and let the buttons wrap below on small phones */
.txa .txa-head{flex-wrap:wrap}
.txa .txa-brand{white-space:nowrap}
.txa .txa-lang{display:inline-flex;gap:4px}
.txa .txa-lang .txa-btn{padding-inline:.7em}
/* Buy buttons in the demo are links styled as buttons */
.txa a.txa-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--txa-surface)}
.txa a.txa-btn.ghost{color:var(--txa-ink)}
.txa a.txa-btn:hover,.txa a.txa-btn:focus{text-decoration:none;color:#fff}
/* Outlined buy button: fill it on hover so the text stays readable */
.txa a.txa-btn.ghost:hover,.txa a.txa-btn.ghost:focus{background:var(--txa-ink);border-color:var(--txa-ink);color:#fff}

@media (max-width:480px){.txa .txa-brand{font-size:1.02em;letter-spacing:.04em;gap:8px}.txa .txa-logo{width:30px;height:auto}}
@media (max-width:360px){.txa .txa-brand{font-size:.92em;letter-spacing:.02em}}
.txa .txa-stat small{display:block;overflow-wrap:normal;word-break:normal;hyphens:manual}
@media (max-width:480px){.txa .txa-stat small{font-size:.74em;letter-spacing:.02em}}
.txa .txa-opt:hover,.txa .txa-opt:focus,.txa .txa-opt:active{color:var(--txa-ink)}
.txa .txa-opt:disabled,.txa .txa-opt:disabled:hover,.txa .txa-opt:disabled:focus,.txa .txa-opt.right,.txa .txa-opt.wrong{color:#111!important}
.txa .txa-opt.right .k,.txa .txa-opt.wrong .k{color:#fff!important}
.txa .txa-opt.right:hover{background:var(--txa-good-soft)}.txa .txa-opt.wrong:hover{background:var(--txa-red-soft)}
/* Flashcard question side: always the red card (same look as hover), so every card matches */
.txa button.txa-flash:not(.back),.txa button.txa-flash:not(.back):hover,.txa button.txa-flash:not(.back):focus{background:#ab0b30;border-color:#ab0b30;color:#fff}
.txa button.txa-flash:not(.back) .big{color:#fff}
.txa button.txa-flash:not(.back) .txa-eyebrow,.txa button.txa-flash:not(.back) .txa-muted{color:#ffd23f}
/* Demo buy box: smaller buttons */
.txa .txa-buy .txa-btn{font-size:.82em;min-height:42px;padding:8px 16px;letter-spacing:.03em}
.txa .txa-buy .txa-row{gap:8px}