:root { --ink:#211b36; --navy:#24184f; --navy-soft:#3a286f; --cream:#f7f0dc; --paper:#fffdf7; --purple:#6747d8; --purple-soft:#eee9ff; --gold:#ffd166; --coral:#ff715b; --mint:#63d6b0; --muted:#696276; --line:#ddd4bd; --green:#176b51; --red:#963b33; --shadow:0 18px 50px rgba(36,24,79,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:#f2eee6; color:var(--ink); font-family:"Trebuchet MS",system-ui,sans-serif; font-size:1.05rem; line-height:1.55; }
button,input { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
.skip-link { position:fixed; z-index:100; top:.5rem; left:.5rem; transform:translateY(-160%); padding:.7rem 1rem; border-radius:.7rem; background:white; color:var(--ink); }
.skip-link:focus { transform:translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline:4px solid var(--gold); outline-offset:3px; }
.topbar { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem clamp(1rem,4vw,4rem); background:rgba(36,24,79,.97); color:white; box-shadow:0 8px 26px rgba(26,17,61,.25); backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:.65rem; min-height:2.8rem; border:0; background:transparent; color:white; font-weight:900; font-size:1.08rem; }
.brand-mark { display:grid; place-items:center; width:2.45rem; height:2.45rem; border:2px solid var(--gold); border-radius:.75rem; background:var(--navy-soft); color:var(--gold); font-family:Georgia,serif; font-size:1.35rem; }
.main-nav { display:flex; gap:.35rem; }
.nav-btn { min-height:2.7rem; padding:.5rem .85rem; border:1px solid transparent; border-radius:999px; background:transparent; color:#e9e5ff; font-weight:800; }
.nav-btn:hover,.nav-btn:focus-visible { background:#473580; }
.nav-btn.is-active { background:var(--gold); color:#3b2a00; }
.hero { min-height:31rem; display:grid; align-items:center; overflow:hidden; padding:clamp(2.4rem,7vw,5.5rem) clamp(1rem,7vw,6.5rem); color:white; background:radial-gradient(circle at 80% 30%,rgba(255,209,102,.22) 0 9%,transparent 9.5%),radial-gradient(circle at 88% 72%,rgba(99,214,176,.18) 0 14%,transparent 14.5%),linear-gradient(135deg,#211442,#4c329b 58%,#6845c8); }
.hero-card { max-width:42rem; }
.eyebrow { margin:0 0 .7rem; color:var(--gold); font-size:.93rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3 { margin-top:0; line-height:1.1; letter-spacing:-.025em; }
h1 { margin-bottom:1rem; font-size:clamp(2.55rem,7vw,5rem); }
h2 { font-size:clamp(1.8rem,4vw,2.7rem); }
h3 { font-size:1.28rem; }
.hero p:not(.eyebrow) { max-width:37rem; margin:0 0 1.6rem; color:#f0edff; font-size:1.18rem; }
.hero-actions,.result-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-stats { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.hero-stats span { padding:.65rem .9rem; border:1px solid rgba(255,255,255,.25); border-radius:.8rem; background:rgba(255,255,255,.1); }
.hero-stats strong { color:var(--gold); }
.primary-btn,.secondary-btn,.ghost-btn { min-height:3rem; border-radius:.85rem; padding:.7rem 1.15rem; font-weight:900; }
.primary-btn { border:0; background:var(--coral); color:white; box-shadow:0 7px 0 #bf4031; }
.primary-btn:hover { transform:translateY(-2px); }
.primary-btn:active { transform:translateY(3px); box-shadow:0 4px 0 #bf4031; }
.secondary-btn { border:2px solid var(--ink); background:white; color:var(--ink); }
.ghost-btn { border:2px solid rgba(255,255,255,.75); background:transparent; color:white; }
.section { width:min(1160px,calc(100% - 2rem)); margin:0 auto; padding:3.5rem 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }
.section-head p { max-width:35rem; margin:0; color:var(--muted); }
.chapter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.chapter-card { position:relative; min-height:13rem; overflow:hidden; padding:1.25rem; border:2px solid var(--line); border-radius:1rem; background:var(--paper); color:var(--ink); text-align:left; box-shadow:0 7px 0 #d7ceba; transition:160ms ease; }
.chapter-card:hover,.chapter-card:focus-visible { transform:translateY(-4px) rotate(-.25deg); border-color:var(--purple); box-shadow:0 11px 0 #bdb0e5; }
.chapter-number { display:inline-grid; place-items:center; width:2.45rem; height:2.45rem; margin-bottom:.9rem; border-radius:50%; background:var(--navy); color:var(--gold); font-family:Georgia,serif; font-weight:900; }
.chapter-card h3 { margin-bottom:.45rem; }
.chapter-card p { margin:0; color:var(--muted); }
.card-meta { position:absolute; bottom:1rem; left:1.25rem; color:var(--purple); font-size:.88rem; font-weight:900; }
.score-badge { position:absolute; top:1rem; right:1rem; padding:.3rem .55rem; border-radius:999px; background:#dff8ed; color:var(--green); font-weight:900; }
.page-shell { min-height:calc(100vh - 4rem); padding:clamp(1.5rem,5vw,4rem) 1rem; background:radial-gradient(circle at 93% 4%,rgba(255,209,102,.24),transparent 20%),var(--cream); }
.content-wrap { width:min(1000px,100%); margin:0 auto; }
.back-btn { margin-bottom:1.5rem; border:0; background:transparent; color:var(--purple); font-weight:900; }
.chapter-intro { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.75fr); gap:1.2rem; align-items:start; }
.chapter-copy,.theory-card,.memo-card { border:2px solid var(--line); border-radius:1.2rem; background:var(--paper); box-shadow:var(--shadow); }
.chapter-copy { padding:clamp(1.4rem,4vw,2.6rem); }
.chapter-copy h1 { font-size:clamp(2.2rem,6vw,4rem); }
.lead { color:var(--muted); font-size:1.16rem; }
.facts { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.2rem 0; }
.facts span { padding:.45rem .7rem; border-radius:.65rem; background:var(--purple-soft); color:var(--navy-soft); font-size:.9rem; font-weight:900; }
.theory-card { padding:1.3rem; }
.theory-card h2 { margin-bottom:.7rem; font-size:1.35rem; }
.theory-card p { margin:.45rem 0; color:var(--muted); }
.big-example { margin:1rem 0; padding:1rem; border-radius:.9rem; background:#fff4c9; color:var(--navy); font-family:Georgia,serif; font-size:clamp(1.35rem,4vw,2rem); font-weight:900; text-align:center; }
.tip { padding:.8rem .9rem; border-left:5px solid var(--mint); border-radius:0 .75rem .75rem 0; background:#e7f8f1; color:#245b4a; font-weight:800; }
.symbol-row { display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; }
.symbol-tile { padding:.7rem .2rem; border-radius:.75rem; background:var(--purple-soft); text-align:center; }
.symbol-tile b { display:block; color:var(--purple); font-family:Georgia,serif; font-size:1.65rem; }
.symbol-tile span { color:var(--muted); font-weight:900; }
.memo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.memo-card { padding:1.4rem; }
.memo-card.wide { grid-column:1/-1; }
.rule-list { display:grid; gap:.7rem; }
.rule { padding:.8rem; border-radius:.75rem; background:var(--purple-soft); }
.rule strong { color:var(--purple); }
.shortcut-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.shortcut { padding:1rem .4rem; border-radius:.8rem; background:#fff3c5; text-align:center; }
.shortcut b { display:block; font-family:Georgia,serif; font-size:1.4rem; }
.converter-box { display:grid; grid-template-columns:1fr auto; gap:.7rem; }
.converter-box input,.text-answer { width:100%; min-height:3.2rem; border:3px solid #d0c7b1; border-radius:.8rem; padding:.5rem .8rem; background:white; color:var(--ink); font-size:1.12rem; font-weight:900; }
.converter-result { min-height:2rem; margin-top:.7rem; color:var(--purple); font-family:Georgia,serif; font-size:1.35rem; font-weight:900; }
.quiz-shell { min-height:calc(100vh - 4rem); padding:1.1rem; color:white; background:linear-gradient(135deg,#211442,#5436a6); }
.quiz-wrap { width:min(830px,100%); margin:0 auto; }
.quiz-topline { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; font-weight:900; }
.quiz-topline .back-btn { margin:0; color:white; }
.quiz-progress { height:.8rem; overflow:hidden; margin-bottom:1.2rem; border-radius:999px; background:rgba(255,255,255,.2); }
.quiz-progress span { display:block; height:100%; border-radius:inherit; background:var(--gold); transition:width .3s ease; }
.quiz-card { min-height:31rem; display:grid; align-content:center; padding:clamp(1.4rem,5vw,3rem); border-radius:1.5rem; background:var(--paper); color:var(--ink); box-shadow:0 22px 60px rgba(14,7,40,.35); }
.question-meta { display:flex; justify-content:space-between; gap:1rem; margin-bottom:1.2rem; color:var(--purple); font-weight:900; }
.quiz-card h1 { margin-bottom:1.5rem; font-size:clamp(1.9rem,5vw,3.1rem); }
.choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.answer-btn { min-height:4rem; padding:.8rem; border:3px solid #d9d1c0; border-radius:.9rem; background:white; color:var(--ink); font-weight:900; text-align:left; }
.answer-btn:hover:not(:disabled) { border-color:var(--purple); background:var(--purple-soft); }
.answer-btn.correct { border-color:var(--mint); background:#dff8ed; }
.answer-btn.wrong { border-color:var(--coral); background:#ffe5df; }
.input-row { display:flex; gap:.7rem; }
.feedback { min-height:3.4rem; margin-top:1.2rem; padding:.8rem 1rem; border-radius:.8rem; font-weight:900; }
.feedback:empty { min-height:0; padding:0; }
.feedback.good { color:var(--green); background:#dff8ed; }
.feedback.bad { color:var(--red); background:#ffe5df; }
.quiz-next { display:flex; justify-content:flex-end; margin-top:1rem; }
.clock { width:min(260px,75vw); margin:0 auto 1.2rem; }
.clock svg { display:block; width:100%; filter:drop-shadow(0 10px 12px rgba(36,24,79,.13)); }
.result-card { min-height:32rem; display:grid; place-items:center; align-content:center; padding:2rem; border-radius:1.5rem; background:var(--paper); color:var(--ink); text-align:center; box-shadow:var(--shadow); }
.result-icon { font-size:4rem; }
.result-card h1 { margin:.5rem 0; }
.result-card p { max-width:34rem; color:var(--muted); font-size:1.15rem; }
.toast { position:fixed; z-index:60; right:1rem; bottom:1rem; max-width:22rem; transform:translateY(160%); padding:.85rem 1rem; border-radius:.9rem; background:var(--ink); color:white; box-shadow:var(--shadow); transition:transform .2s ease; }
.toast.is-visible { transform:translateY(0); }
@media (max-width:850px) { .chapter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .chapter-intro { grid-template-columns:1fr; } }
@media (max-width:620px) { body { font-size:1rem; } .topbar { align-items:flex-start; flex-direction:column; } .brand { width:100%; } .main-nav { width:100%; overflow-x:auto; } .nav-btn { flex:1 0 auto; } .hero { min-height:35rem; align-items:end; } .hero-card { padding:.5rem; } .chapter-grid,.memo-grid { grid-template-columns:1fr; } .memo-card.wide { grid-column:auto; } .section-head { align-items:flex-start; flex-direction:column; } .choices { grid-template-columns:1fr; } .input-row { flex-direction:column; } .converter-box { grid-template-columns:1fr; } .shortcut-grid { grid-template-columns:repeat(2,1fr); } .quiz-card { min-height:34rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }