:root { --ink:#16233f; --muted:#71809d; --blue:#3155d8; --paper:#fff; --line:#e8ecf4; --bg:#f4f6fc; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; } button { font:inherit; cursor:pointer; }
.shell { max-width:1050px; margin:auto; padding:30px 24px 58px; }.hero { min-height:315px; padding:28px 38px; border-radius:26px; color:#fff; background:radial-gradient(circle at 86% 8%, #6d8dff, transparent 29%), linear-gradient(130deg,#243dae,#3159dd 64%,#2749ba); position:relative; overflow:hidden; }.hero::after { content:""; position:absolute; height:400px; width:400px; right:-130px; bottom:-245px; border:1px solid #a9b9ff63; border-radius:50%; box-shadow:0 0 0 45px #a9b9ff16,0 0 0 90px #a9b9ff0c; }.brand { display:flex; align-items:center; gap:9px; font-weight:800; }.logo { display:grid; place-items:center; height:29px; width:29px; border-radius:9px; background:#fff; color:var(--blue); }.brand em { font-size:12px; font-style:normal; font-weight:600; color:#cbd5ff; padding-left:5px; border-left:1px solid #a8b8fd80; }.hero-copy { margin-top:50px; }.eyebrow { margin:0 0 9px; color:#8b9ab6; letter-spacing:.08em; font-size:12px; font-weight:800; }.hero .eyebrow { color:#b9c7ff; }.hero h1 { margin:0; font-size:38px; letter-spacing:-.04em; }.hero-copy > p:last-child { margin:14px 0; color:#e0e5ff; }.progress-card { position:absolute; z-index:1; right:36px; bottom:34px; width:245px; padding:17px; border:1px solid #ffffff34; border-radius:17px; background:#1d36a476; backdrop-filter:blur(8px); }.progress-card span,.progress-card small { display:block; color:#d3dbff; font-size:12px; }.progress-card strong { display:block; margin:5px 0 10px; font-size:21px; }.meter { height:6px; border-radius:8px; background:#98a9ef66; overflow:hidden; }.meter i { display:block; width:43%; height:100%; border-radius:inherit; background:#8ae1d0; }.progress-card small { margin-top:10px; color:#bac6fa; }.content { margin-top:30px; padding:30px; border:1px solid var(--line); border-radius:25px; background:var(--paper); }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; }.section-heading h2 { margin:0; font-size:25px; letter-spacing:-.03em; }.ghost { border:0; background:none; color:var(--blue); font-weight:700; }.filters { display:flex; gap:9px; margin:25px 0 20px; }.filters button { padding:8px 16px; border:1px solid var(--line); border-radius:20px; color:#667691; background:#fff; font-size:14px; }.filters .active { border-color:#dce2ff; background:#eef1ff; color:var(--blue); font-weight:800; }.library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.library-card { display:flex; width:100%; gap:14px; padding:17px; border:1px solid var(--line); border-radius:16px; text-align:left; background:#fff; transition:transform .18s,box-shadow .18s,border-color .18s; }.library-card:hover { transform:translateY(-2px); border-color:#bdc9f4; box-shadow:0 9px 18px #24469f12; }.subject { flex:none; display:grid; place-items:center; width:42px; height:42px; border-radius:13px; font-size:17px; font-weight:900; }.primary { color:#2c6dca; background:#e9f3ff; }.middle { color:#9b5abd; background:#faefff; }.high { color:#d96d38; background:#fff1e7; }.card-text { min-width:0; }.card-text strong,.card-text small,.card-text b { display:block; }.card-text strong { font-size:15px; }.card-text small { margin-top:6px; min-height:31px; color:var(--muted); line-height:1.4; font-size:12px; }.card-text b { margin-top:7px; color:var(--blue); font-size:12px; }.card-text i { font-style:normal; font-size:16px; } dialog { width:min(440px,calc(100% - 32px)); padding:32px; border:0; border-radius:23px; color:var(--ink); box-shadow:0 25px 70px #0c1d484c; } dialog::backdrop { background:#1722467d; backdrop-filter:blur(3px); } dialog h2 { margin:0; font-size:25px; } dialog p:not(.eyebrow) { color:var(--muted); line-height:1.7; }.close { position:absolute; top:14px; right:17px; border:0; background:none; color:#6b7890; font-size:25px; }.quiz-meta { display:flex; flex-wrap:wrap; gap:8px; margin:19px 0; }.quiz-meta span { padding:6px 9px; border-radius:8px; background:#f0f3f9; color:#60708c; font-size:12px; }.primary { width:100%; padding:13px; border:0; border-radius:11px; color:#fff; background:var(--blue); font-weight:800; }.library .subject.primary { color:#2c6dca; background:#e9f3ff; }.library .subject.middle { color:#9b5abd; background:#faefff; }.library .subject.high { color:#d96d38; background:#fff1e7; } #toast { position:fixed; left:50%; bottom:27px; z-index:3; transform:translate(-50%,80px); padding:12px 18px; border-radius:12px; color:#fff; background:#172343; box-shadow:0 8px 25px #17234338; opacity:0; transition:.24s; font-size:14px; } #toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:720px) { .shell { padding:15px 14px 35px; }.hero { min-height:365px; padding:24px; }.hero-copy { margin-top:47px; }.hero h1 { font-size:32px; }.progress-card { right:24px; bottom:25px; width:calc(100% - 48px); }.content { margin-top:16px; padding:23px 17px; }.library { grid-template-columns:1fr; }.section-heading h2 { font-size:22px; } }