/* Teorama frame, direction B (Indice): graphite on white, one sans, tabular figures. The frame has no colour
   of its own but the family stripe. A section's palette file sets the --s-* tokens on body.sec-<app>. */
:root{--bg:#fff;--surface:#f4f5f6;--line:#dadde1;--ink:#0e1116;--ink2:#4d5562;--link:#0e1116;
--ok:#0b7a3a;--ok-soft:#e3f5e9;--bad:#b42328;--bad-soft:#fbe9e9;
--sans:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}
@media(prefers-color-scheme:dark){:root{--bg:#0b0d10;--surface:#15181d;--line:#2a2f37;--ink:#f2f4f7;--ink2:#a3acb9;--link:#f2f4f7;
--ok:#5fd58d;--ok-soft:#10301f;--bad:#ff8f8a;--bad-soft:#3a1719}}
body{--s-bg:var(--surface);--s-line:var(--line);--s-ink:var(--ink);--s-ink2:var(--ink2);--s-accent:var(--ink);--s-link:var(--link);--s-btn:var(--ink);--s-btn-ink:var(--bg);--s-soft:var(--surface)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 var(--sans);overflow-wrap:break-word}
a{color:var(--s-link);text-underline-offset:.2em}
img{max-width:100%}

/* header: brand, exams, languages */
header.frame{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 1rem;padding:.6rem 1rem 0;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:.5rem;align-items:center;text-decoration:none;color:var(--ink);font:700 1.15rem/1 var(--sans);letter-spacing:-.02em;padding:.6rem 0;margin-right:auto;min-height:2.75rem}
.mark{width:26px;height:26px;flex:none}.mark-bg{fill:var(--ink)}.mark-fg{stroke:var(--bg)}.mark-dot{fill:var(--bg)}
nav.lang{display:flex;font-size:.82rem;font-weight:600;border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
nav.lang a{color:var(--ink2);text-decoration:none;min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center}
nav.lang a+a{border-left:1px solid var(--line)}
nav.lang a[aria-current]{background:var(--ink);color:var(--bg)}
header nav.exams{order:3;flex-basis:100%;display:flex;gap:1.4rem;overflow-x:auto;font-size:.92rem;font-weight:500}
header nav.exams a{color:var(--ink2);text-decoration:none;padding:.65rem 0;border-bottom:3px solid transparent;white-space:nowrap;min-height:2.75rem}
header nav.exams a[aria-current]{color:var(--ink);border-color:var(--s-accent)}
@media(min-width:760px){header.frame{padding:.5rem max(2rem,calc((100% - 72rem)/2 + 2rem)) 0}header nav.exams{order:0;flex-basis:auto;margin-right:auto;padding-left:2rem}.brand{margin-right:0}}

/* section masthead: one row, the app's paper */
.masthead{background:var(--s-bg);border-bottom:1px solid var(--s-line);border-top:4px solid var(--s-accent)}
.mh-in{max-width:72rem;margin:0 auto;padding:.5rem 1rem;display:flex;gap:1rem;align-items:center;justify-content:space-between}
.mh-app{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:var(--s-ink);font-weight:700;font-size:1.05rem;min-height:2.75rem}
.app-icon{width:36px;height:36px;flex:none}.ai-bg{fill:var(--s-btn)}
.btn.store{background:var(--ink);color:var(--bg);flex:none}.btn.store .lg{display:none}
@media(min-width:760px){.mh-in{padding:.6rem 2rem}.btn.store .lg{display:inline}.btn.store .sm{display:none}}

/* footer: on every page */
footer.frame{background:var(--surface);border-top:1px solid var(--line);margin-top:3rem}
.ft-in{max-width:72rem;margin:0 auto;padding:1.5rem 1rem 2.5rem;color:var(--ink2);font-size:.88rem;display:grid;gap:.4rem}
.ft-brand{font-weight:700;color:var(--ink);margin:0}
.ft-links{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 1.2rem}
.ft-links a{display:inline-block;padding:.6rem 0;color:var(--ink);text-decoration:none;font-weight:500}
.ft-note{margin:0;max-width:46rem}
@media(min-width:760px){.ft-in{grid-template-columns:12rem 1fr;padding:2rem}.ft-links,.ft-note{grid-column:2}}

/* type */
main{max-width:72rem;margin:0 auto;padding:1rem 1rem 0}
main>*{max-width:46rem}main>.chapters,main>.bych,main>.exams-list,main>.how{max-width:none}
h1{font-size:1.75rem;line-height:1.15;letter-spacing:-.025em;margin:.4rem 0 .5rem;font-weight:700}
h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin:2rem 0 .6rem;font-weight:700}
h3{font-size:1.05rem;margin:1rem 0 .3rem}
section.en h2{font-size:1.4rem;text-transform:none;letter-spacing:-.02em;color:var(--ink)}
.lead{font-size:1.05rem;color:var(--ink2);margin:0 0 .8rem}
.kicker{margin:.6rem 0 0;font-size:.82rem;font-weight:600;color:var(--s-link);text-transform:uppercase;letter-spacing:.06em}
.crumbs{font-size:.85rem;color:var(--ink2);margin:.2rem 0}.crumbs a{color:var(--ink2);display:inline-block;padding:.35rem 0}
.meta,.facts,.dated,.official-title{font-size:.86rem;color:var(--ink2)}.dated{margin:0 0 .6rem}
.origin,.ref,.src,.note,.disclosure{font-size:.84rem;color:var(--ink2)}
@media(min-width:760px){main{padding:1.5rem 2rem 0}h1{font-size:2.4rem}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-height:2.75rem;padding:.5rem 1rem;border-radius:.55rem;font:600 1rem/1.2 var(--sans);text-decoration:none;text-align:center;border:0;cursor:pointer;background:var(--s-btn);color:var(--s-btn-ink)}
.btn.ghost{background:transparent;color:var(--s-link);box-shadow:inset 0 0 0 1px var(--s-line)}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.actions.three{display:grid;grid-template-columns:1fr;gap:.5rem;margin:1rem 0}
@media(min-width:560px){.actions.three{grid-template-columns:repeat(3,1fr)}}

/* section home */
.format{list-style:none;padding:0;margin:0 0 .6rem;font-variant-numeric:tabular-nums;font-weight:600}
.format li{padding:.1rem 0}
.trust{font-size:.86rem;color:var(--ink2);margin:0;padding:.5rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.count{font-variant-numeric:tabular-nums;color:var(--ink2);margin-left:.4rem;font-weight:500}
.chapters{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);columns:1}
@media(min-width:900px){.chapters{columns:2;column-gap:2.5rem}}
.chapters li{break-inside:avoid;border-bottom:1px solid var(--line)}
.chapters a{display:grid;grid-template-columns:2.4rem 1fr;gap:.5rem;padding:.7rem 0;text-decoration:none;color:var(--ink);min-height:2.75rem}
.chapters a:hover b{text-decoration:underline}
.num{font-variant-numeric:tabular-nums;color:var(--s-link);font-weight:700}
.ch-body{display:flex;flex-direction:column}.ch-body b{font-weight:500}
.rows{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.rows a{display:flex;flex-direction:column;padding:.7rem 0;text-decoration:none;color:var(--ink);min-height:2.75rem}.rows b{font-weight:500}
.bych{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.bych li{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line)}
.pills{display:flex;gap:.4rem;flex-wrap:wrap}
.pills a{display:inline-grid;place-items:center;min-height:2.75rem;padding:0 .8rem;border-radius:.5rem;box-shadow:inset 0 0 0 1px var(--s-line);text-decoration:none;font-size:.9rem;font-weight:600}
@media(min-width:900px){.bych{columns:2;column-gap:2.5rem}.bych li{break-inside:avoid}}
.facts-list{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0}.facts-list dt{color:var(--ink2)}.facts-list dd{margin:0}

/* home pages */
.hero{padding:.5rem 0 1rem}.hero h1{max-width:22ch}
.exams-list,.how{list-style:none;padding:0;margin:0}
.exams-list{display:grid;gap:.6rem}
@media(min-width:760px){.exams-list{grid-template-columns:repeat(3,1fr)}}
.exam a{display:flex;flex-direction:column;gap:.2rem;padding:1rem;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:.6rem;border-top:4px solid var(--app,var(--ink));height:100%}
.exam b{font-size:1.1rem}.exam span{color:var(--ink2);font-size:.93rem}
.exam em{font-style:normal;font-size:.82rem;font-weight:600;color:var(--app-ink,var(--ink));margin-top:auto;padding-top:.4rem}
.how{border-top:1px solid var(--line)}
.how li{display:grid;grid-template-columns:1fr;padding:.8rem 0;border-bottom:1px solid var(--line)}.how span{color:var(--ink2);font-size:.95rem}
@media(min-width:760px){.how li{grid-template-columns:14rem 1fr}}

/* sheets */
.pager{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.4rem 0 .8rem}
.pager .of{font-weight:600;font-variant-numeric:tabular-nums}.pager .pg{display:flex;gap:.5rem}
.pager .back{display:inline-block;padding:.6rem 0}
.modes{display:inline-flex;border:1px solid var(--s-line);border-radius:.55rem;overflow:hidden;margin:0 0 .8rem}
.modes a{min-height:2.75rem;min-width:6rem;display:grid;place-items:center;padding:0 1rem;text-decoration:none;font-weight:600;color:var(--ink2)}
.modes a+a{border-left:1px solid var(--s-line)}
.modes a[aria-current]{background:var(--s-btn);color:var(--s-btn-ink)}
.tiles{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(4.6rem,1fr));gap:.5rem}
.tiles li{border:1px solid var(--line);border-radius:.5rem;padding:.4rem .6rem;display:flex;flex-direction:column}
.tiles b{font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1.2}.tiles span{font-size:.8rem;color:var(--ink2)}
.scorebar,.exambar{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;background:var(--bg);padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.92rem;font-variant-numeric:tabular-nums}
.score,.timer{font-weight:700}.left,.done-n{color:var(--ink2)}
.scorebar progress{flex:1;min-width:4rem;height:6px;appearance:none;border:0;background:var(--line);border-radius:3px}
.scorebar progress::-webkit-progress-bar{background:var(--line);border-radius:3px}
.scorebar progress::-webkit-progress-value{background:var(--s-accent);border-radius:3px}
.scorebar progress::-moz-progress-bar{background:var(--s-accent)}
.timer{font-size:1.1rem}
.qgrid{list-style:none;padding:0;margin:.6rem 0;display:grid;grid-template-columns:repeat(auto-fill,2.75rem);gap:.35rem}
.qgrid a{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid var(--line);border-radius:.45rem;text-decoration:none;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600;font-size:.9rem}
.qgrid a.done{background:var(--s-soft);border-color:var(--s-accent)}.qgrid a.done::after{content:"•";color:var(--s-link);margin-left:.1rem}
.qgrid a.ok{background:var(--ok-soft);border-color:var(--ok)}.qgrid a.ko{background:var(--bad-soft);border-color:var(--bad)}
.qgrid a.ok::after{content:"✓";color:var(--ok);font-size:.7rem;margin-left:.1rem}.qgrid a.ko::after{content:"✕";color:var(--bad);font-size:.7rem;margin-left:.1rem}
.verdictbox:empty{display:none}.verdictbox{margin:1rem 0;padding:.8rem 1rem;border:2px solid var(--line);border-radius:.6rem}
.verdictbox.pass{border-color:var(--ok)}.verdictbox.fail{border-color:var(--bad)}.verdictbox h2{margin:0 0 .3rem;font-size:1.2rem;text-transform:none;letter-spacing:0;color:var(--ink)}

/* questions: the authority's text in the plain face, regular weight, never bold (DESIGN-DNA §1) */
.q{border-bottom:1px solid var(--line);padding:1.2rem 0;scroll-margin-top:4rem}
.q-top{display:block}.q.numbered .q-top{display:grid;grid-template-columns:2rem 1fr}
.n{font-variant-numeric:tabular-nums;color:var(--ink2);font-weight:600}
blockquote.official{margin:0;font:400 1.06rem/1.55 var(--sans)}
.q.numbered .fig,.q.numbered .opts,.q.numbered .answer,.q.numbered .ref{margin-left:2rem}
.fig{display:block;height:auto;max-width:min(100% - 2rem,16rem);margin:.8rem 0 0;border-radius:.4rem;background:#fff}
.opts{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.opts li{flex:1 1 9rem;max-width:22rem}
.opt{width:100%;min-height:2.75rem;font:600 .98rem/1.3 var(--sans);padding:.45rem .8rem;border-radius:.5rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:flex;gap:.35rem;align-items:center;justify-content:center;text-align:center;cursor:pointer}
.opt.picked{border:2px solid var(--s-accent);background:var(--s-soft)}
.opt.right{border:2px solid var(--ok);background:var(--ok-soft)}.opt.wrong{border:2px solid var(--bad);background:var(--bad-soft)}
.opt:disabled{color:var(--ink);opacity:1;cursor:default}
.tick{font-weight:700}.opt.right .tick{color:var(--ok)}.opt.wrong .tick{color:var(--bad)}
.no-js .opt{cursor:default}
details.answer{margin-top:.6rem}
details.answer summary .hd,details.answer[open] summary .sh{display:none}details.answer[open] summary .hd{display:inline}
details.answer summary{display:inline-flex;align-items:center;min-height:2.75rem;cursor:pointer;color:var(--s-link);font-weight:600;font-size:.95rem}
.verdict,.verdict-say{margin:.2rem 0 .3rem}.verdict-say{font-weight:700}
.ours{border-left:3px solid var(--s-accent);background:var(--s-soft);padding:.5rem .8rem;margin:.4rem 0;border-radius:0 .4rem .4rem 0}
.ours p{margin:.2rem 0}.ours .src{margin-top:.3rem}
.lesson{font-size:.9rem;margin:.4rem 0 0}
.ref{margin-top:.6rem;margin-bottom:0}
.js .exam:not(.corrected) details.answer{display:none}
.no-js .js-only,.no-js .scorebar{display:none}

/* lessons */
.card{border:1px solid var(--line);border-radius:.6rem;padding:.2rem 1rem .8rem;margin:.8rem 0}
.card dt{font-weight:700}.card dd{margin:0 0 .4rem}
.remember{background:var(--s-soft);border-radius:.4rem;padding:.4rem .7rem}

/* books, support pages */
.books{margin:2rem 0 1rem;padding-top:.4rem;border-top:1px solid var(--line)}
.list{list-style:none;padding:0;margin:.5rem 0}.list li{padding:.5rem 0;border-bottom:1px solid var(--line)}.list span{color:var(--ink2);font-size:.86rem}
.links a{white-space:nowrap}section.en hr{border:0;border-top:1px solid var(--line);margin:2rem 0 1rem}
select{font:inherit;min-height:2.75rem;padding:.3rem .5rem;border-radius:.5rem;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.opt{transition:background .15s,border-color .15s}}
header.frame::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#2f6fe6 0% 20%,#0a6599 20% 40%,var(--line) 40% 100%)}
.app-semaforo{--app:#2f6fe6;--app-ink:#1f55cf}.app-prua{--app:#0a6599;--app-ink:#0a6599}
@media(prefers-color-scheme:dark){.app-semaforo{--app:#2753b5;--app-ink:#8db2ff}.app-prua{--app:#0a6599;--app-ink:#6cc0f0}}