:root{--red:#b42318;--red2:#d92d20;--ink:#171412;--muted:#6d6661;--cream:#f7f4ef;--card:#fffdf9;--line:#e7dfd7;--green:#067647;--amber:#b54708;--shadow:0 12px 30px rgba(61,43,31,.08)}
*{box-sizing:border-box}html{background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}body{margin:0;min-height:100vh}.topbar{height:68px;padding:0 max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;background:rgba(247,244,239,.92);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:850;text-decoration:none;letter-spacing:-.02em}.mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--red);color:#fff;font-size:14px}.hidden{display:none!important}button,.button{border:0;border-radius:14px;padding:13px 18px;font:inherit;font-weight:750;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:8px}.primary{background:var(--red);color:white;box-shadow:0 8px 18px rgba(180,35,24,.2)}.secondary{background:#fce7e4;color:#912018}.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}main{max-width:820px;margin:auto;padding:24px 18px 110px}.hero{background:linear-gradient(145deg,#30120f,#8f1d15 65%,#c94731);color:white;border-radius:28px;padding:28px;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:220px;height:220px;border:35px solid rgba(255,255,255,.06);border-radius:50%;right:-100px;top:-100px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;opacity:.72}.hero h1{font-size:clamp(30px,9vw,54px);line-height:1;letter-spacing:-.05em;max-width:620px;margin:12px 0}.hero p{max-width:520px;color:#fae9e5;line-height:1.55}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.hero .secondary{background:white;color:var(--red)}.section-head{display:flex;justify-content:space-between;align-items:end;margin:28px 2px 14px}.section-head h2,h1{margin:0;letter-spacing:-.035em}.section-head a{color:var(--red);font-weight:750;text-decoration:none}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}.category{cursor:pointer;text-decoration:none;color:inherit;display:block;transition:.2s}.category:hover{transform:translateY(-2px);border-color:#d4bbb4}.cat-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fce7e4;color:var(--red);font-weight:900;margin-bottom:18px}.category h3{margin:0 0 6px}.meta{color:var(--muted);font-size:14px}.progress{height:7px;background:#eee7df;border-radius:99px;overflow:hidden;margin-top:14px}.progress span{display:block;height:100%;background:var(--red);border-radius:99px}.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat strong{font-size:26px;display:block}.notice{border-left:4px solid var(--amber);background:#fff6e9;padding:16px;border-radius:12px;color:#743b0a;line-height:1.5}.quiz-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.question{font-size:clamp(22px,6vw,32px);line-height:1.25;margin:16px 0 24px;letter-spacing:-.025em}.answers{display:grid;gap:12px}.answer{width:100%;text-align:left;background:var(--card);border:2px solid var(--line);color:var(--ink);justify-content:flex-start;padding:16px}.answer .letter{flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#eee9e3;display:grid;place-items:center}.answer.correct{border-color:var(--green);background:#ecfdf3}.answer.correct .letter{background:var(--green);color:white}.answer.wrong{border-color:var(--red2);background:#fff1f0}.answer.wrong .letter{background:var(--red2);color:white}.feedback{margin-top:18px;padding:16px;border-radius:14px;background:#f2eee9;line-height:1.5}.quiz-actions{display:flex;gap:10px;margin-top:20px}.quiz-actions>*{flex:1}.donut{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;margin:10px auto;background:conic-gradient(var(--green) var(--score),#e9e3dc 0);position:relative}.donut:after{content:"";position:absolute;inset:17px;background:var(--card);border-radius:50%}.donut strong{z-index:1;font-size:28px}.data-box{display:grid;gap:14px}textarea{width:100%;min-height:140px;border:1px solid var(--line);border-radius:14px;padding:14px;font:13px ui-monospace,monospace;background:#fff}input[type=file]{width:100%;padding:14px;border:1px dashed #c9bbb1;border-radius:14px;background:#fff}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:78px;padding-bottom:env(safe-area-inset-bottom);background:rgba(255,253,249,.96);border-top:1px solid var(--line);display:flex;justify-content:center;z-index:9;backdrop-filter:blur(12px)}.bottom-nav a{width:min(25%,150px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);text-decoration:none;font-size:12px;font-weight:700}.bottom-nav a span{font-size:20px}.bottom-nav a.active{color:var(--red)}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:#211d1a;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}@media(min-width:660px){main{padding-top:34px}.grid{grid-template-columns:repeat(4,1fr)}.hero{padding:42px}.category{min-height:190px}}