:root{--navy:#0B1F44;--navy2:#16336B;--gold:#B8902F;--goldbg:#F6EBCB;--bg:#FAF8F3;--card:#fff;--ink:#17202E;--mut:#5B6577;--line:#E4E0D6;--ok:#1E7B4E;--warn:#9A5B00;--warnbg:#FFF3DC;--bad:#B3261E;--shadow:0 1px 3px rgba(11,31,68,.08),0 4px 14px rgba(11,31,68,.06);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--navy:#8FB0F0;--navy2:#A9C2F5;--gold:#E0B957;--goldbg:#33290F;--bg:#0D1422;--card:#152036;--ink:#E8ECF5;--mut:#9AA6BD;--line:#26334F;--ok:#5FD39A;--warn:#F2B552;--warnbg:#2F2410;--bad:#FF8A80;--shadow:none}}
:root[data-theme="dark"]{--navy:#8FB0F0;--navy2:#A9C2F5;--gold:#E0B957;--goldbg:#33290F;--bg:#0D1422;--card:#152036;--ink:#E8ECF5;--mut:#9AA6BD;--line:#26334F;--ok:#5FD39A;--warn:#F2B552;--warnbg:#2F2410;--bad:#FF8A80;--shadow:none}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--navy);line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.6rem}h2{font-size:1.25rem}h3{font-size:1.05rem}
a{color:var(--navy2)}
p{margin:.5rem 0}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem}
.logo{font-family:Georgia,serif;font-weight:700;color:var(--navy);font-size:1.1rem;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.logo i{width:28px;height:28px;border-radius:7px;background:var(--navy);color:var(--bg);display:grid;place-items:center;font-style:normal;font-size:.9rem;border-bottom:3px solid var(--gold)}
.top .sp{flex:1}
.dnav{display:none;gap:.25rem}
.dnav a,.tabs a{padding:.5rem .8rem;border-radius:8px;text-decoration:none;color:var(--mut);font-weight:600;font-size:.92rem}
.dnav a.on{background:var(--goldbg);color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.55rem 1.1rem;border-radius:10px;border:1px solid var(--navy);background:var(--navy);color:var(--bg);font:600 .95rem inherit;font-family:inherit;cursor:pointer;text-decoration:none}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.sm{min-height:36px;padding:.3rem .8rem;font-size:.85rem}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
main{max-width:920px;margin:0 auto;padding:1rem 1rem 6rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--shadow);margin-bottom:1rem}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom,0px))}
.tabs a{display:flex;flex-direction:column;align-items:center;gap:0;font-size:.72rem;min-width:56px;min-height:48px;justify-content:center}
.tabs a b{font-size:1.15rem;font-weight:400}
.tabs a.on{color:var(--navy);background:var(--goldbg)}
@media(min-width:760px){.tabs{display:none}.dnav{display:flex}main{padding-bottom:3rem}h1{font-size:2rem}}
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:99px;transition:width .4s}
.mut{color:var(--mut);font-size:.9rem}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.15rem .5rem;border-radius:99px;background:var(--goldbg);color:var(--navy)}
.tag.sup{background:#E3ECFB;color:#16336B}.tag.flag{background:var(--warnbg);color:var(--warn)}.tag.pend{background:var(--line);color:var(--mut)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tag.sup{background:#1E2F55;color:#BFD3FA}}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.mod{display:flex;gap:.7rem;align-items:center;padding:.7rem .2rem;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:48px}
.mod:first-of-type{border-top:0}
.dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:.8rem;color:#fff}
.dot.d{background:var(--ok);border-color:var(--ok)}
.dot.p{border-style:dashed}
.lesson h3{margin-top:1.4rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-family:system-ui,sans-serif}
.lesson ul,.lesson ol{padding-left:1.25rem;margin:.4rem 0}
.lesson li{margin:.25rem 0}
.box{border-left:4px solid var(--gold);background:var(--goldbg);padding:.7rem .9rem;border-radius:0 10px 10px 0;margin:.8rem 0}
.box.warn{border-color:var(--warn);background:var(--warnbg)}
.chk{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;min-height:44px;cursor:pointer}
.chk input{width:22px;height:22px;margin-top:.15rem;flex:none;accent-color:var(--navy)}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{border:1px solid var(--line);padding:.45rem .55rem;text-align:left;vertical-align:top}
th{background:var(--goldbg)}
.scroll{overflow-x:auto;max-width:100%}
label{display:block;font-weight:600;font-size:.9rem;margin:.7rem 0 .25rem}
input,select,textarea{width:100%;min-height:44px;padding:.5rem .7rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}
textarea{min-height:90px;resize:vertical}
.err{color:var(--bad);font-size:.85rem;margin-top:.2rem}
.pre{white-space:pre-wrap;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:.8rem;font-size:.92rem}
.skill{border-top:1px solid var(--line);padding:.8rem 0}
.skill h3{font-size:1rem;margin:0 0 .3rem}
.q button.opt{display:block;width:100%;text-align:left;margin:.4rem 0;min-height:44px;padding:.5rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.q button.opt.right{border-color:var(--ok);background:rgba(30,123,78,.12)}
.q button.opt.wrong{border-color:var(--bad);background:rgba(179,38,30,.1)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));background:var(--navy);color:var(--bg);padding:.6rem 1rem;border-radius:10px;z-index:50;font-size:.9rem}
@media(min-width:760px){.toast{bottom:1.5rem}}
.hero{background:var(--navy);color:#fff;border-radius:16px;padding:1.2rem;margin-bottom:1rem;border-bottom:4px solid var(--gold)}
.hero h1{color:#fff}.hero .mut{color:#C7D3EC}
.hero .bar{background:rgba(255,255,255,.2)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero{background:#16336B}}
:root[data-theme="dark"] .hero{background:#16336B}