/* Shared styles for for-ttn-Quantum-TE (all sections, all languages) */
:root{
  --bg:#f7f8fb; --card:#ffffff; --text:#1c2333; --muted:#5a6479; --line:#dfe3ec;
  --accent:#2457d6; --accent-soft:#e6edff; --code:#f0f3fa;
  --good:#16794c; --good-bg:#e5f6ec; --warn:#a15c00; --warn-bg:#fff2dc; --bad:#b3261e; --bad-bg:#fde8e6;
  --info:#0b6a8a; --info-bg:#e3f4fa; --shadow:0 1px 3px rgba(20,30,60,.08),0 6px 18px rgba(20,30,60,.05);
  --radius:12px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#0f1420; --card:#171d2c; --text:#e6e9f2; --muted:#9aa4bb; --line:#2a3247;
    --accent:#7aa2ff; --accent-soft:#1d2946; --code:#1b2234;
    --good:#5bd39a; --good-bg:#12291f; --warn:#f0b35a; --warn-bg:#2d2412; --bad:#ff8a80; --bad-bg:#33191a;
    --info:#66c6e6; --info-bg:#12262e; --shadow:none;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1420; --card:#171d2c; --text:#e6e9f2; --muted:#9aa4bb; --line:#2a3247;
  --accent:#7aa2ff; --accent-soft:#1d2946; --code:#1b2234;
  --good:#5bd39a; --good-bg:#12291f; --warn:#f0b35a; --warn-bg:#2d2412; --bad:#ff8a80; --bad-bg:#33191a;
  --info:#66c6e6; --info-bg:#12262e; --shadow:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{font-size:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;font-size:1.0625rem}
a{color:var(--accent)}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
header.top{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:10px;min-height:52px;flex-wrap:wrap}
header.top .brand{font-weight:800;text-decoration:none;color:var(--text)}
header.top nav{display:flex;gap:6px;margin-left:auto;align-items:center;flex-wrap:wrap}
.btn,button.btn{font:inherit;font-size:.85rem;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{color:#fff;opacity:.9}
.crumbs{font-size:.85rem;color:var(--muted);margin:14px 0 4px}
.hero{padding:18px 0 6px}
.hero h1{margin:.2em 0;font-size:2rem;line-height:1.2}
.hero .lead{color:var(--muted);margin:.2em 0 .8em}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);margin-right:6px}
h2.sec{margin:34px 0 10px;font-size:1.35rem;border-left:5px solid var(--accent);padding-left:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
a.mod-card,div.mod-card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
a.mod-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.mod-card h3{margin:.3em 0;font-size:1.05rem;line-height:1.3}
.mod-card .num{font-weight:800;color:var(--accent);font-size:.8rem;letter-spacing:.06em}
.mod-card p{margin:.3em 0 0;color:var(--muted);font-size:.9rem}
.soon{opacity:.55;cursor:default}
ul.obj{margin:.3em 0;padding-left:1.2em}
/* callouts */
.callout{border-left:5px solid var(--info);background:var(--info-bg);padding:10px 14px;border-radius:8px;margin:12px 0}
.callout.good{border-color:var(--good);background:var(--good-bg)}
.callout.warn{border-color:var(--warn);background:var(--warn-bg)}
.callout.bad{border-color:var(--bad);background:var(--bad-bg)}
.callout b.h{display:block;margin-bottom:2px}
.callout p{margin:.35em 0}
.callout ol,.callout ul{margin:.3em 0;padding-left:1.3em}
/* formula box */
.pd-formula{background:var(--code);border:2px solid var(--accent);border-radius:10px;padding:12px 16px;margin:12px 0;text-align:center;overflow-x:auto}
.pd-formula-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:4px}
.pd-legend{list-style:none;margin:6px 0 12px;padding:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.92rem}
.pd-legend li{display:contents}
.pd-legend b{text-align:right;white-space:nowrap}
.tex[data-display]{display:block;margin:.4em 0;overflow-x:auto}
.katex{font-size:1.08em}
/* figure */
figure.fig{margin:12px 0;text-align:center}
figure.fig img{max-width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}
figure.fig figcaption{font-size:.85rem;color:var(--muted);margin-top:4px}
/* tables */
table.t{border-collapse:collapse;width:100%;font-size:.92rem;margin:10px 0;display:block;overflow-x:auto}
table.t th,table.t td{border:1px solid var(--line);padding:6px 10px;text-align:left}
table.t th{background:var(--code)}
code,pre{font-family:var(--mono);font-size:.88em;background:var(--code);border-radius:6px}
code{padding:1px 5px}
pre{padding:10px 12px;overflow-x:auto}
/* mini deck */
.mdeck{scroll-margin-top:60px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);outline:none}
.mdeck:focus-visible{border-color:var(--accent)}
.mdeck:fullscreen{overflow:hidden;border-radius:0;display:flex;flex-direction:column;height:100vh}
.mdeck:fullscreen .mdeck-viewport{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;justify-content:center}
.mdeck:fullscreen .mdeck-slide{width:100%}
.mdeck-viewport{padding:22px 26px;min-height:340px}
.mdeck-slide{display:none}
.mdeck-slide.active{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.mdeck-slide h3{margin:.1em 0 .5em;font-size:1.3rem;line-height:1.3}
.kicker{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.part-divider{text-align:left}
.part-num{font-size:3.4rem;font-weight:900;color:var(--accent);line-height:1;opacity:.85}
.part-divider h2{margin:.1em 0 .3em;font-size:1.6rem}
.scr{display:grid;gap:6px;margin:.6em 0}
.scr div{padding:6px 10px;border-radius:8px;background:var(--code);font-size:.95rem}
.scr b{color:var(--accent)}
.part-list{margin:.4em 0;padding-left:1.2em;color:var(--muted)}
.mdeck-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.mdeck-bar button{font:inherit;font-size:.85rem;padding:5px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);cursor:pointer}
.mdeck-bar button:disabled{opacity:.4;cursor:default}
.mdeck-count{font-size:.85rem;color:var(--muted);min-width:44px}
.mdeck-progress{height:4px;background:var(--line);border-radius:12px 12px 0 0;overflow:hidden}
.mdeck-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.mdeck-jump{flex:1;min-width:120px;max-width:100%;font:inherit;font-size:.85rem;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text)}
/* quiz */
.qitem{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin:12px 0}
.qitem .opt{display:block;width:100%;text-align:left;font:inherit;padding:8px 12px;margin:6px 0;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);cursor:pointer}
.qitem .opt:hover:not([data-done]){border-color:var(--accent)}
.qitem .opt.correct{background:var(--good-bg);border-color:var(--good)}
.qitem .opt.wrong{background:var(--bad-bg);border-color:var(--bad)}
.qitem .explain{display:none;margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--info-bg);font-size:.93rem}
.qitem .explain.show{display:block}
.quiz-score{position:sticky;bottom:0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
footer.foot{margin:50px 0 30px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem}
.lang-note{font-size:.82rem;color:var(--muted)}
@media (max-width:640px){
  body{font-size:1rem}
  .hero h1{font-size:1.6rem}
  .mdeck-viewport{padding:16px 14px}
  .part-num{font-size:2.6rem}
}

/* ---- extra colour themes ---- */
:root[data-theme="pink"]{--bg:#fff4f8;--card:#ffffff;--text:#3a1f2b;--muted:#7d5a6a;--line:#f2cddb;--accent:#d6336c;--accent-soft:#ffe3ee;--code:#fdeaf1}
:root[data-theme="blue"]{--bg:#eef5ff;--card:#ffffff;--text:#14243d;--muted:#51678a;--line:#cfe0f7;--accent:#1d6fd6;--accent-soft:#dfeeff;--code:#e8f1fd}
:root[data-theme="green"]{--bg:#eff8f1;--card:#ffffff;--text:#16301f;--muted:#4f6f5a;--line:#cde6d4;--accent:#238b4c;--accent-soft:#dcf3e2;--code:#e6f3ea}
:root[data-theme="sepia"]{--bg:#f4ecd8;--card:#fbf6e9;--text:#3b2e1a;--muted:#77664a;--line:#e0d3b4;--accent:#9a5b0f;--accent-soft:#f3e2c1;--code:#efe4c9}
:root[data-theme="purple"]{--bg:#f5f1ff;--card:#ffffff;--text:#231a3d;--muted:#66588a;--line:#ded3f7;--accent:#6b3fd4;--accent-soft:#e8defc;--code:#eee8fb}
/* ---- fonts ---- */
html[data-font="serif"] body{--sans:"Times New Roman",Times,"Noto Serif","Liberation Serif",serif}
html[data-font="montserrat"] body{--sans:"Montserrat",var(--sysfont)}
html[data-font="bevietnam"] body{--sans:"Be Vietnam Pro",var(--sysfont)}
html[data-font="lora"] body{--sans:"Lora",Georgia,"Times New Roman",serif}
html[data-font="mono"] body{--sans:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
:root{--sysfont:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
html[data-size="sm"]{font-size:90%}
html[data-size="lg"]{font-size:112%}
html[data-size="xl"]{font-size:125%}
/* ---- appearance menu ---- */
details.menu{position:relative}
details.menu>summary{list-style:none;cursor:pointer}
details.menu>summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,92vw);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:40}
.menu-h{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:8px 0 4px}
.menu-h:first-child{margin-top:0}
.menu-row{display:flex;flex-wrap:wrap;gap:6px}
.menu-row button{font:inherit;font-size:.82rem;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.menu-row button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:700}
.menu-row .sw{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:inline-block}
/* ---- banner, accordion, modal ---- */
.banner{margin:14px 0}
details.acc{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:8px 0;box-shadow:var(--shadow)}
details.acc>summary{cursor:pointer;padding:12px 16px;font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap;list-style:none}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"▸";color:var(--accent);transition:transform .15s}
details.acc[open]>summary::before{transform:rotate(90deg)}
.acc-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-size:.85rem}
.acc-body{padding:2px 18px 14px}
.acc-body h4{margin:14px 0 4px;font-size:1rem}
.faq{border-left:3px solid var(--line);padding:2px 0 2px 12px;margin:8px 0}
.faq b{display:block}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.fab{position:fixed;right:16px;bottom:16px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:1.3rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:30}
.fab:hover{border-color:var(--accent)}
[hidden]{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal-card{background:var(--card);color:var(--text);border-radius:14px;max-width:660px;width:100%;max-height:88vh;overflow:auto;padding:18px 22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal-card h3{margin:14px 0 4px}
.modal-x{position:absolute;right:10px;top:8px;font-size:1.4rem;background:none;border:0;color:var(--muted);cursor:pointer}
.status{font-size:.75rem;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--good-bg);color:var(--good)}