/* Ranker's Masterbook — editorial theme (warm cream · serif display · orange→gold highlights · dark panels) */ :root{ --bg:#F7F1E3; --bg2:#F2E9D6; --card:#FFFDF8; --card2:#FBF5E9; --dark:#1B1610; --dark2:#241C13; --ink:#1A1611; --ink2:#4B4436; --ink3:#7C7462; --ink4:#A79E8A; --line:#E7DDC7; --line2:#D9CCB0; --line3:#C6B892; --orange:#C2410C; --orange2:#D9770E; --gold:#C79318; --gold2:#E0B33F; --sage:#5A6A44; --sage-soft:#E6EAD7; --cream:#F0E7D4; --cream2:#CBBF9F; --dark-gold:#E6B24B; --shadow:0 1px 2px rgba(60,45,20,.05),0 10px 30px rgba(60,45,20,.07); --shadow-lg:0 4px 12px rgba(60,45,20,.08),0 26px 60px rgba(60,45,20,.13); --r:16px; --r-lg:22px; --r-sm:11px; --serif:'Fraunces',Georgia,serif; --read:'Newsreader',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --maxw:1180px; } [data-theme="dark"]{ --bg:#100E08; --bg2:#161209; --card:#221C12; --card2:#2A2216; --ink:#F4ECD9; --ink2:#CCC2AA; --ink3:#948A72; --ink4:#6E6551; --line:#332B1B; --line2:#443A25; --line3:#52462C; --cream:#F4ECD9; --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px rgba(0,0,0,.5); --shadow-lg:0 6px 16px rgba(0,0,0,.6),0 30px 66px rgba(0,0,0,.6); } [data-theme="dark"] .btn.pri{background:linear-gradient(120deg,var(--orange),var(--gold2));color:#fff} [data-theme="dark"] .prow,[data-theme="dark"] .tcard,[data-theme="dark"] .feat,[data-theme="dark"] .gcard{background:linear-gradient(180deg,var(--card),var(--bg2))} /* ---- alternate palettes: ACCENT tokens only, so light/dark neutrals stay owned by the theme (a palette on is closer than [data-theme] on , so if a palette set neutrals it would override dark mode — hence accent-only here). ---- */ body[data-palette="saffron"]{--orange:#B23A17;--orange2:#D06A11;--gold:#C08A16;--gold2:#E4B23A;--sage:#4E6146;--sage-soft:#E4EAD8;--cream:#F1E8D6;--cream2:#CDC1A2;--dark-gold:#EBB74C} body[data-palette="oxblood"]{--orange:#9B2C24;--orange2:#C15421;--gold:#B07E1E;--gold2:#D9A63C;--sage:#4C5F3F;--sage-soft:#E5E9D6;--cream:#F2E7D6;--cream2:#CDBFA0;--dark-gold:#E0AF4C} body[data-palette="pine"]{--orange:#1F6B4E;--orange2:#3E8C5F;--gold:#B58318;--gold2:#DDA93A;--sage:#3C5A3A;--sage-soft:#E0E9D6;--cream:#EFEAD8;--cream2:#C3C4A2;--dark-gold:#E6B84E} body[data-palette="indigo"]{--orange:#4338CA;--orange2:#6D5CE0;--gold:#B08512;--gold2:#DDAF3C;--sage:#3F5647;--sage-soft:#E3E9DE;--cream:#EFEBDD;--cream2:#C6C0AF;--dark-gold:#E7BE5C} /* dark mode: lift accents so the dark-green/indigo hues stay legible on the near-black bg */ html[data-theme="dark"] body[data-palette="pine"]{--orange:#3E9B72;--orange2:#57B487;--sage:#7FA083} html[data-theme="dark"] body[data-palette="indigo"]{--orange:#7D74F0;--orange2:#948BFF;--sage:#8A86B8} html[data-theme="dark"] body[data-palette="oxblood"]{--orange:#D4574C;--orange2:#E06B5A} html[data-theme="dark"] body[data-palette="saffron"]{--orange:#D9613C;--orange2:#E8823F} *{box-sizing:border-box} html,body{margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{background:radial-gradient(1200px 760px at 88% -12%,color-mix(in srgb,var(--gold2) 20%,var(--bg)),transparent 58%),var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* ---- scroll-reveal motion ---- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---- sequences-themed hero animation ---- */ .seqviz{display:flex;align-items:flex-end;gap:8px;height:120px;margin:6px 0 4px} .seqviz .bar{width:22px;border-radius:8px 8px 3px 3px;background:linear-gradient(var(--gold2),var(--orange));opacity:.9;transform-origin:bottom;animation:seqrise .9s cubic-bezier(.2,.8,.2,1) both} .seqviz .bar span{display:block;text-align:center;font-family:var(--serif);font-size:12px;font-weight:700;color:var(--ink3);margin-top:6px;transform:translateY(4px)} @keyframes seqrise{from{transform:scaleY(.05);opacity:0}to{transform:scaleY(1);opacity:.92}} .seqcap{font-family:var(--read);font-style:italic;color:var(--ink3);font-size:14px} .seqcap b{font-family:var(--serif);font-style:normal;color:var(--orange);font-weight:800} /* ---- palette switcher ---- */ .pal-switch{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:8px 12px;box-shadow:var(--shadow-lg)} .pal-switch .pl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-family:var(--sans);margin-right:2px} .pal-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s} .pal-dot:hover{transform:scale(1.12)} .pal-dot.on{border-color:var(--ink)} @media (max-width:560px){.pal-switch{display:none}} a{color:inherit;text-decoration:none} :focus-visible{outline:2.5px solid var(--orange);outline-offset:2px;border-radius:5px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} h1,h2,h3{font-family:var(--serif)} /* signature highlight */ .hl{font-family:var(--serif);font-style:italic;font-weight:800; background:linear-gradient(92deg,var(--orange) 8%,var(--orange2) 45%,var(--gold2) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--orange); text-decoration:underline;text-decoration-color:var(--gold2);text-decoration-thickness:2.5px;text-underline-offset:6px} .eyebrow{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-family:var(--sans)} .eyebrow .sep{color:var(--ink4);margin:0 8px} .eyebrow .muted{color:var(--ink3)} /* ---------- navbar ---------- */ .nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 26px;display:flex;align-items:center;gap:22px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:-.01em;flex-shrink:0} .brand .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--gold2));display:grid;place-items:center;color:#fff;font-family:var(--serif);font-weight:900;font-size:17px;box-shadow:0 2px 7px rgba(194,65,12,.32)} .brand .os{color:var(--ink3);font-weight:600;font-family:var(--sans);font-size:13px;letter-spacing:.06em} .nav-links{display:flex;gap:2px;align-items:center} .nav-links a{padding:8px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink2);transition:background .15s,color .15s} .nav-links a:hover{background:var(--card);color:var(--ink)} .nav-links a.on{color:var(--ink);background:var(--card);box-shadow:var(--shadow)} .nav-sp{flex:1} .nav-search{position:relative;display:flex;align-items:center} .nav-search input{width:190px;background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:8px 14px 8px 34px;font:inherit;font-size:13.5px;color:var(--ink);outline:none;transition:width .18s,border-color .15s,box-shadow .15s} .nav-search input:focus{width:240px;border-color:var(--orange);box-shadow:0 0 0 4px rgba(194,65,12,.12)} .nav-search .si{position:absolute;left:12px;color:var(--ink3);font-size:15px;pointer-events:none} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:14.5px;border:0;border-radius:11px;padding:11px 18px;cursor:pointer;transition:transform .12s,filter .15s,box-shadow .15s,background .15s;white-space:nowrap} .btn:hover{transform:translateY(-1px)} .btn.pri{background:var(--ink);color:var(--bg);box-shadow:0 2px 9px rgba(26,22,17,.25)} .btn.pri:hover{filter:brightness(1.12)} .btn.orange{background:linear-gradient(120deg,var(--orange),var(--orange2));color:#fff;box-shadow:0 2px 9px rgba(194,65,12,.3)} .btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line2)} .btn.ghost:hover{border-color:var(--line3)} .btn.sm{padding:8px 14px;font-size:13.5px;border-radius:9px} .btn.lg{padding:14px 24px;font-size:16px;border-radius:13px} .icon-btn{background:var(--card);border:1px solid var(--line2);border-radius:10px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;font-size:16px;color:var(--ink2)} .mobo{display:none} .mobile-menu{display:none;max-width:var(--maxw);margin:0 auto;padding:0 26px 14px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} .mobile-menu a{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:13px;font-weight:700;color:var(--ink2);text-align:center} .mobile-menu a.on{border-color:var(--orange);color:var(--orange)} /* ---------- hero ---------- */ .hero{padding:72px 0 0} .hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding-bottom:44px} .pill{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line2);color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:26px;font-family:var(--sans)} .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--orange)} h1.hero-h{font-family:var(--serif);font-size:clamp(42px,6vw,74px);line-height:1.0;letter-spacing:-.02em;font-weight:900;margin:0 0 24px;color:var(--ink)} .hero-sub{font-family:var(--read);font-size:clamp(17px,1.7vw,21px);color:var(--ink2);line-height:1.55;max-width:500px;margin:0 0 32px} .hero-kicker{font-family:var(--serif);font-size:24px;font-weight:800;line-height:1.25;color:var(--ink);max-width:520px;margin:-10px 0 18px} .hero-cta{display:flex;gap:12px;flex-wrap:wrap} /* one confident hero visual: mastery curve + a real problem */ .hpanel{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden} .hpanel-viz{padding:22px 24px 16px;background:linear-gradient(180deg,var(--card2),var(--card))} .hpanel-prob{padding:20px 24px 22px;border-top:1px solid var(--line)} .hpanel-prob .hp-lbl{font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.12em;text-transform:uppercase;font-family:var(--sans);margin-bottom:8px} .hpanel-prob .hp-title{font-family:var(--serif);font-weight:800;font-size:21px;line-height:1.18;color:var(--ink);margin-bottom:12px} .hpanel-prob .hp-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px} .hpanel-prob .hp-meta .tm{font-family:var(--sans);font-size:13px;color:var(--ink3);font-weight:600} /* designed proof strip */ .proof{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)} .proof .pcell{padding:22px 8px;text-align:center;border-right:1px solid var(--line)} .proof .pcell:last-child{border-right:0} .proof .pcell b{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:900;letter-spacing:-.01em;color:var(--ink);line-height:1} .proof .pcell span{display:block;margin-top:8px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)} /* editorial stat row */ .statrow{display:flex;gap:44px;flex-wrap:wrap;border-top:1px solid var(--line2);padding-top:22px;margin-top:30px} .statrow .st .l{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-family:var(--sans)} .statrow .st b{display:block;font-family:var(--serif);font-size:38px;font-weight:900;line-height:1.05;letter-spacing:-.01em;margin-top:6px} .statrow .st .s{font-size:13px;color:var(--ink3);margin-top:2px} /* product preview card */ .pcard{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden} .pcard-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)} .pcard-top .lbl{font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.12em;text-transform:uppercase;font-family:var(--sans)} .pcard-top .badge{background:var(--bg2);color:var(--orange);font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px} .pcard-body{padding:20px} .pcard-body .ptitle{font-family:var(--serif);font-weight:800;font-size:20px;margin:0 0 8px;line-height:1.2} .pcard-body .pmath{font-family:var(--read);color:var(--ink);font-size:15.5px;background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:11px;padding:13px 15px;margin:8px 0 16px;line-height:1.5} .pfeat{display:grid;grid-template-columns:1fr 1fr;gap:9px} .pfeat .pf{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink)} .pfeat .pf i{color:var(--sage);font-style:normal;font-weight:900} .pcard-foot{display:flex;gap:8px;padding:0 20px 20px} /* ---------- section ---------- */ .sec{padding:46px 0} .sec-h{font-family:var(--serif);font-size:clamp(26px,3vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:12px 0 8px;color:var(--ink)} .sec-lead{font-family:var(--read);color:var(--ink2);font-size:18px;max-width:640px;margin:0 0 28px} /* stats strip (editorial) */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:28px 4px} .stats .st{text-align:left} .stats .st .l{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-family:var(--sans)} .stats .st b{display:block;font-family:var(--serif);font-size:40px;font-weight:900;letter-spacing:-.01em;margin-top:6px;color:var(--ink)} .stats .st .s{font-size:13px;color:var(--ink3);margin-top:2px} /* feature cards */ .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)} .feat .fi{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:21px;margin-bottom:14px;background:var(--bg2);border:1px solid var(--line)} .feat h3{font-family:var(--serif);font-size:19px;font-weight:800;margin:0 0 7px} .feat p{color:var(--ink2);font-size:14.5px;margin:0;line-height:1.55} /* topic cards */ .topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px} .tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden} .tcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--orange),var(--gold2));opacity:.85} .tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line2)} .tcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .tcard h3{font-family:var(--serif);font-size:20px;font-weight:800;margin:0;line-height:1.2} .tbadge{flex-shrink:0;font-family:var(--serif);font-size:15px;font-weight:800;color:var(--orange);background:var(--bg2);border-radius:9px;padding:5px 10px;min-width:36px;text-align:center} .tcard p{font-family:var(--read);color:var(--ink2);font-size:15px;margin:10px 0 16px;line-height:1.5;flex:1} .tmeta{display:flex;gap:14px;font-size:12.5px;color:var(--ink3);font-weight:600;margin-bottom:14px;flex-wrap:wrap;font-family:var(--sans);letter-spacing:.02em} .pips{display:inline-flex;gap:3px;align-items:center} .pip{width:6px;height:6px;border-radius:50%;background:var(--line2)} .pip.on{background:var(--orange)} .prog{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:7px} .prog i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--gold2));border-radius:99px;transition:width .5s} .prog-l{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink3);font-weight:600;margin-bottom:16px;font-family:var(--sans)} .prog-l b{color:var(--orange)} .tcard .btn{width:100%} /* dark editorial panel (DPP + insight) */ .panel{background:linear-gradient(160deg,var(--dark),var(--dark2));border-radius:var(--r-lg);padding:40px;color:var(--cream);position:relative;overflow:hidden} .panel::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(224,179,63,.16),transparent 70%)} .panel .eyebrow{color:var(--dark-gold)} .panel .eyebrow .muted{color:var(--cream2)} .panel h2{font-family:var(--serif);font-size:clamp(26px,3vw,34px);font-weight:900;margin:12px 0 12px;letter-spacing:-.02em;color:var(--cream)} .panel h2 .hl{-webkit-text-fill-color:transparent;text-decoration-color:var(--dark-gold)} .panel p{font-family:var(--read);color:var(--cream2);font-size:16px;margin:0 0 22px;max-width:440px} .panel .chip-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(224,179,63,.14);border:1px solid rgba(224,179,63,.22);color:var(--dark-gold);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;font-family:var(--sans);letter-spacing:.04em} .dpp-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center} .dpp-opts{display:flex;flex-direction:column;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(240,231,212,.1);border-radius:var(--r);padding:22px} .dpp-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .dpp-row .rl{font-size:13px;font-weight:600;color:var(--cream);font-family:var(--sans)} .chips{display:flex;gap:7px;flex-wrap:wrap} .chip{background:rgba(240,231,212,.07);border:1px solid rgba(240,231,212,.14);color:var(--cream);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;transition:.15s;font-family:var(--sans)} .chip.on{background:linear-gradient(120deg,var(--orange),var(--gold2));border-color:transparent;color:#fff} .toggle{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--cream2);cursor:pointer;font-family:var(--sans)} .sw{width:38px;height:22px;border-radius:99px;background:rgba(240,231,212,.16);position:relative;transition:.15s;flex-shrink:0} .sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s} .toggle.on .sw{background:var(--gold2)} .toggle.on .sw::after{transform:translateX(16px)} /* ---------- DPP / Worksheet builder ---------- */ .dppgrid{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:22px;align-items:start;margin-top:24px} .dpp-panel{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px 24px 26px} .dpp-h{font-family:var(--serif);font-size:21px;font-weight:800;margin:0 0 18px;color:var(--ink)} .dfield{margin-bottom:18px} .dlabel{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px} .dlabel .dhint{text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink4);margin-left:6px} /* light-mode chips (base .chip is styled for the dark teacher panel) */ .dpp-panel .chip{background:var(--card2);border:1px solid var(--line2);color:var(--ink2)} .dpp-panel .chip:hover{border-color:var(--line3);color:var(--ink)} .dpp-panel .chip.on{background:linear-gradient(120deg,var(--orange),var(--orange2));border-color:transparent;color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.12)} /* difficulty-balance segmented control — one clear slider so teachers don't have to think about the mix */ .dbal{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:4px} .dbal-opt{text-align:center;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink2);padding:9px 6px;border-radius:9px;cursor:pointer;transition:.15s;user-select:none;border:1px solid transparent} .dbal-opt:hover{background:var(--card)} .dbal-opt.on{background:linear-gradient(120deg,var(--orange),var(--orange2));color:#fff;box-shadow:0 1px 6px rgba(0,0,0,.14)} .dbal-desc{margin-top:8px;font-family:var(--read);font-style:italic;font-size:13px;color:var(--ink3);line-height:1.45} .dpp-panel .toggle{display:flex;color:var(--ink2);margin-bottom:12px} .dpp-panel .sw{background:var(--line2)} .dpp-panel .toggle.on .sw{background:var(--orange)} .dpp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .dpp-note{margin-top:14px;font-size:13px;color:var(--ink3);font-family:var(--sans);line-height:1.5} .dpp-preview{background:var(--card2);border:1px solid var(--line2);border-radius:var(--r-lg);min-height:440px;overflow:hidden} .dpp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:74px 30px;color:var(--ink3);min-height:440px} .dpp-empty-ico{font-size:40px;margin-bottom:14px;opacity:.75} .dpp-empty h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0 0 8px;font-weight:800} .dpp-empty p{max-width:330px;font-size:14.5px;line-height:1.55;margin:0} .dpp-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:var(--card);border-bottom:1px solid var(--line2);font-family:var(--sans);font-size:13.5px;color:var(--ink2)} /* the printable sheet — official JEE (Advanced) paper register: paper-white, Times-family serif, dense sectioned layout with marking-scheme blocks. Clean in any app theme. */ .worksheet{--exam:'STIX Two Text',Cambria,Georgia,'Times New Roman',serif;background:#fff;color:#111;padding:40px 48px;margin:16px;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.06);font-family:var(--exam)} .ws-head{text-align:center;border-bottom:2.5px solid #111;padding-bottom:12px;margin-bottom:6px} .ws-brand{font-size:11px;font-weight:700;letter-spacing:.22em;color:#111} .ws-title{font-family:var(--exam);font-size:21px;font-weight:800;margin:6px 0 4px;color:#111;line-height:1.2} .ws-sub{font-size:13px;color:#222} .ws-fields{display:flex;justify-content:center;flex-wrap:wrap;gap:28px;margin-top:10px;font-size:12.5px;color:#222} .ws-fields u{display:inline-block;min-width:92px;border-bottom:1px solid #888;text-decoration:none} /* sections: official header bar + rules block */ .ws-sec{margin-top:18px} .ws-sec-h{text-align:center;font-weight:800;font-size:14.5px;letter-spacing:.04em;border:1.5px solid #111;padding:5px 8px;background:#f2f2f2;color:#111} .ws-sec-rules{margin:8px 0 4px;padding-left:18px;font-size:12px;line-height:1.5;color:#222} .ws-sec-rules li{margin:2px 0} /* questions: hanging Q.n, statement, (A)–(D) option rows */ .wq{padding:10px 0 12px;border-bottom:1px solid #eee} .wq:last-child{border-bottom:0} .wq-row{display:flex;gap:10px;align-items:baseline} .wq-n{font-weight:800;font-size:14.5px;color:#111;min-width:38px;flex-shrink:0} .wq-main{flex:1;min-width:0} .wq-body{font-family:var(--exam);font-size:14.5px;line-height:1.55;color:#111} .wq-body .katex{color:#111} .wq-opts{margin-top:8px;display:grid;grid-template-columns:1fr;gap:5px} .wq-opt{display:flex;gap:8px;align-items:baseline;font-size:14px;line-height:1.5;color:#111} .wq-ol{font-weight:700;min-width:30px;flex-shrink:0} .wq-ot{min-width:0;overflow-wrap:anywhere;overflow-x:auto} .wq-ot .katex{color:#111;white-space:normal} .wq-body{overflow-wrap:anywhere} .ws-sign{margin-top:22px;text-align:right;font-style:italic;font-size:13px;color:#333} /* answer key — official compact grid */ .wkey{margin-top:26px;padding-top:12px;border-top:2.5px solid #111} .wkey-h{text-align:center;font-weight:800;font-size:15px;letter-spacing:.06em;margin-bottom:10px;color:#111} .wkey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 18px} .wkey-cell{display:flex;gap:8px;align-items:baseline;font-size:13.5px;border-bottom:1px dotted #bbb;padding:3px 0;break-inside:avoid;color:#111} .wkey-n{font-weight:700;min-width:34px;flex-shrink:0} .wkey-a{overflow-x:auto} .wkey-a .katex{color:#111} /* solutions — same register as the paper */ .wsol{margin-top:26px;padding-top:12px;border-top:2.5px solid #111} .wsol-q{padding:10px 0;border-bottom:1px solid #eee} .wsol-q:last-child{border-bottom:0} .wsol-qn{font-weight:800;font-size:14.5px;color:#111;margin-bottom:6px} .wsol-ans{font-weight:700;font-size:13.5px;color:#111;margin-left:8px} .wsol-m{margin:6px 0 8px} .wsol-mn{font-weight:700;font-size:13px;color:#111;margin:6px 0 2px} .wsol-steps{margin:4px 0 0;padding-left:20px} .wsol-steps li{font-family:var(--exam);font-size:13.5px;line-height:1.55;color:#111;margin:3px 0} .wsol-steps li .katex{color:#111} @media (max-width:640px){.worksheet{padding:22px 16px}.wkey-grid{grid-template-columns:repeat(2,1fr)}} /* print: only the worksheet; questions / answer key / solutions each on fresh pages */ @media print{ body *{visibility:hidden !important} #worksheet, #worksheet *{visibility:visible !important} #worksheet{position:absolute;left:0;top:0;width:100%;margin:0;border:0;box-shadow:none;padding:0} .wkey{page-break-before:always} .wsol{page-break-before:always} .wq, .wsol-q{page-break-inside:avoid} .ws-sec-h{background:#eee !important;-webkit-print-color-adjust:exact;print-color-adjust:exact} @page{margin:15mm} } /* ---------- timed test mode ---------- */ .testgrid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:22px;align-items:start;margin-top:24px} .test-preview{background:linear-gradient(155deg,var(--dark),var(--dark2));border-radius:var(--r-lg);padding:24px;color:var(--cream);min-height:420px;display:flex;align-items:stretch} .test-card{width:100%;border:1px solid rgba(240,231,212,.12);border-radius:18px;padding:28px;background:rgba(255,255,255,.045);display:flex;flex-direction:column;justify-content:center} .test-kicker{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-gold)} .test-big{font-family:var(--serif);font-size:62px;font-weight:900;line-height:1;color:var(--cream);margin:12px 0 6px} .test-muted{font-size:14px;color:var(--cream2);font-family:var(--sans)} .test-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px} .test-metrics div{background:rgba(255,255,255,.06);border:1px solid rgba(240,231,212,.1);border-radius:13px;padding:14px 12px} .test-metrics b{display:block;font-family:var(--serif);font-size:28px;line-height:1;color:var(--cream)} .test-metrics span{display:block;font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--cream2);margin-top:6px} .test-run-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap} .test-timer{min-width:122px;text-align:center;font-family:var(--serif);font-size:25px;font-weight:900;color:#fff;background:linear-gradient(120deg,var(--orange),var(--orange2));border-radius:15px;padding:12px 18px;box-shadow:0 8px 22px -13px var(--orange)} .test-timer.urgent{background:linear-gradient(120deg,#b42318,#e85d04);animation:tpulse 1s ease-in-out infinite} .test-progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden;margin:10px 0 24px} .test-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--gold2));border-radius:999px;transition:width .25s} .test-ws .tm{font-family:var(--sans);font-size:12.5px;color:var(--ink3);font-weight:700} .test-answrap{margin-top:18px} .test-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .test-result-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:28px 30px;margin-bottom:26px} .ring.big{width:96px;height:96px} .ring.big::before{width:72px;height:72px;font-size:22px} .test-result-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start} .test-review-list{display:flex;flex-direction:column;gap:12px} .test-review{background:var(--card);border:1px solid var(--line2);border-left:4px solid var(--line3);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px} .test-review.ok{border-left-color:#2e7d55} .test-review.no{border-left-color:#c0392b} .test-review-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .test-review-top b{font-family:var(--serif);font-size:16.5px;line-height:1.25;color:var(--ink)} .test-review-top span{display:block;font-family:var(--sans);font-size:12px;color:var(--ink3);margin-top:4px} .test-review-top strong{font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);white-space:nowrap} .test-review.ok .test-review-top strong{color:#2e7d55} .test-review.no .test-review-top strong{color:#c0392b} .test-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0} .test-review-grid div{background:var(--card2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;min-width:0} .test-review-grid em{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:5px} .test-review-grid p{margin:0;font-family:var(--read);font-size:14.5px;color:var(--ink);overflow-x:auto} .test-opt-key{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bg2);border:1px solid var(--line2);font-family:var(--serif);font-weight:800;font-size:12px;margin-right:4px} .test-weak{position:sticky;top:78px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:20px} .test-weak h3{font-family:var(--serif);font-size:20px;margin:0 0 14px} .test-weak-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:12px 0} .test-weak-row:first-of-type{border-top:0} .test-weak-row b{display:block;font-family:var(--serif);font-size:15px;color:var(--ink)} .test-weak-row span{display:block;font-family:var(--sans);font-size:12px;color:var(--ink3)} .test-weak-row strong{font-family:var(--sans);font-size:12px;color:var(--orange);white-space:nowrap} .test-weak .btn{width:100%;margin-top:16px} @media (max-width:920px){.testgrid,.test-result-grid{grid-template-columns:1fr}.test-weak{position:static}.test-metrics{grid-template-columns:1fr 1fr 1fr}} @media (max-width:560px){.test-result-hero{align-items:flex-start;flex-direction:column}.test-review-grid,.test-metrics{grid-template-columns:1fr}.test-timer{width:100%}} /* ---------- access gate ---------- */ .gate{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(120% 90% at 50% -10%, var(--bg2), var(--bg))} .gate-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:40px 38px 30px;text-align:center} .gate-mark{width:52px;height:52px;margin:0 auto 18px;border-radius:14px;display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--orange),var(--gold2));box-shadow:0 6px 18px rgba(0,0,0,.18)} .gate-eyebrow{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)} .gate-h{font-family:var(--serif);font-size:30px;font-weight:900;letter-spacing:-.01em;margin:8px 0 10px;color:var(--ink)} .gate-sub{font-family:var(--read);font-size:15.5px;line-height:1.55;color:var(--ink2);margin:0 0 22px} .gate-form{display:flex;gap:10px;flex-wrap:wrap} #gateCode{flex:1;min-width:180px;padding:13px 16px;border:1px solid var(--line2);border-radius:12px;font:inherit;font-size:16px;background:var(--card2);color:var(--ink);text-align:center;letter-spacing:.02em} #gateCode:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(0,0,0,.06)} #gateCode.shake{animation:ansShake .4s;border-color:#c0392b} .gate-err{min-height:20px;margin-top:12px;font-family:var(--sans);font-size:13.5px;color:#c0392b;font-weight:600} .gate-foot{margin-top:16px;font-family:var(--sans);font-size:12.5px;color:var(--ink3)} /* ---------- unified library (all books) ---------- */ .home-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:22px 0 8px} .subject-chips{display:flex;gap:8px;flex-wrap:wrap} /* founding-beta starting path */ .beta-sprint{background:color-mix(in srgb,var(--card) 62%,transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .sprint-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end;margin-bottom:22px} .sprint-head .sec-lead{margin-bottom:0;max-width:760px} .sprint-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .sprint-step{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:14px 16px;transition:border-color .16s,transform .16s,box-shadow .16s} .sprint-step:hover{border-color:var(--orange);transform:translateY(-1px);box-shadow:var(--shadow)} .sprint-num{font-family:var(--serif);font-size:18px;font-weight:900;color:var(--orange)} .sprint-copy{display:flex;flex-direction:column;min-width:0} .sprint-copy b{font-family:var(--serif);font-size:16px;line-height:1.22;color:var(--ink)} .sprint-copy small{font-family:var(--sans);font-size:12px;color:var(--ink3);margin-top:3px} .sprint-go{font-size:18px;font-weight:800;color:var(--orange);text-align:right} .subject-chip{font:inherit;font-family:var(--sans);font-size:13.5px;font-weight:800;color:var(--ink2);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .12s} .subject-chip:hover{transform:translateY(-1px);border-color:var(--line3);color:var(--ink)} .subject-chip.on{color:#fff;background:linear-gradient(120deg,var(--orange),var(--orange2));border-color:transparent;box-shadow:0 2px 9px rgba(194,65,12,.24)} .empty-state{background:var(--card);border:1px dashed var(--line2);border-radius:var(--r);padding:28px;color:var(--ink3);font-family:var(--sans);font-weight:700;text-align:center} .area-block{margin-top:30px} .area-h{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px;display:flex;align-items:center;gap:12px} .area-h span{font-weight:600;color:var(--ink4);letter-spacing:0;text-transform:none;font-size:12.5px} .area-h::after{content:"";flex:1;height:1px;background:var(--line2)} .book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;perspective:1200px} /* premium 3-D card: pointer tilt + cursor spotlight + per-subject accent */ .bcard{position:relative;display:block;text-decoration:none;background:var(--card);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;isolation:isolate;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .16s ease,box-shadow .3s ease,border-color .3s ease;will-change:transform} .bcard:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--line2));box-shadow:0 22px 48px -16px color-mix(in srgb, var(--accent) 42%, transparent), 0 8px 20px rgba(20,16,10,.10)} .bcard-spot{position:absolute;inset:0;border-radius:inherit;z-index:0;opacity:0;transition:opacity .3s ease;pointer-events:none;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 24%, transparent), transparent 62%)} .bcard:hover .bcard-spot{opacity:1} .bcard-edge{position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s ease;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 55%, transparent), transparent 42%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px} .bcard:hover .bcard-edge{opacity:1} .bcard-in{position:relative;z-index:1;padding:20px;transform:translateZ(34px)} .bcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .bcard-labels{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0} .depth-tag{display:inline-flex;align-items:center;width:max-content;max-width:100%;border:1px solid var(--line2);border-radius:999px;padding:3px 7px;font-family:var(--sans);font-size:9.5px;font-weight:800;line-height:1.1;color:var(--ink3);background:var(--card2);white-space:nowrap} .depth-tag.deep{color:#1f6b4e;border-color:color-mix(in srgb,#1f6b4e 28%,var(--line2));background:color-mix(in srgb,#1f6b4e 8%,var(--card))} .depth-tag.growing{color:#865b08;border-color:color-mix(in srgb,#b7831e 30%,var(--line2));background:color-mix(in srgb,#d8a432 9%,var(--card))} .depth-tag.early,.depth-tag.preview{color:#9b3e24;border-color:color-mix(in srgb,#b95435 28%,var(--line2));background:color-mix(in srgb,#b95435 8%,var(--card))} .book-depth{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--ink3)} .bglyph{font-family:var(--serif);font-weight:800;font-size:21px;color:var(--accent,#6366F1);min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--accent) 13%, var(--card));border:1px solid color-mix(in srgb, var(--accent) 32%, var(--line2));border-radius:12px;padding:0 9px;box-shadow:0 4px 12px -4px color-mix(in srgb, var(--accent) 40%, transparent)} .barea{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb, var(--accent) 65%, var(--ink4))} .bname{font-family:var(--serif);font-size:19px;font-weight:800;color:var(--ink);margin:0 0 4px;line-height:1.2} .btag{font-family:var(--read);font-size:13.5px;color:var(--ink2);margin:0 0 14px;line-height:1.45} .bcard .prog i{background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--gold2)))} .bcard-go{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--accent);opacity:0;transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease} .bcard:hover .bcard-go{opacity:1;transform:translateX(0)} /* ---------- learning path (gamified, mastery-gated) ---------- */ .lpath{display:flex;flex-direction:column;max-width:640px;margin-top:10px} .tnode{display:flex;gap:16px;padding:0 0 20px;position:relative;cursor:pointer} .tnode:last-child{padding-bottom:0} .tnode-rail{position:relative;flex-shrink:0;width:52px;display:flex;justify-content:center} .tnode::after{content:"";position:absolute;left:24px;top:54px;bottom:-2px;width:3px;background:var(--line2);border-radius:2px} .tnode:last-child::after{display:none} .tnode.done::after{background:color-mix(in srgb, var(--accent) 55%, var(--line2))} .tnode-dot{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:18px;background:var(--card);border:2px solid var(--line2);color:var(--ink3);z-index:1;transition:.2s} .tnode.done .tnode-dot{background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--gold2)));border-color:transparent;color:#fff;box-shadow:0 5px 16px -5px color-mix(in srgb, var(--accent) 60%, transparent)} .tnode.current .tnode-dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);animation:pulseNode 2.2s infinite} @keyframes pulseNode{0%,100%{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb, var(--accent) 7%, transparent)}} .tnode.locked{cursor:default} .tnode.locked .tnode-dot{background:var(--bg2);color:var(--ink4);font-size:16px} .tnode-card{flex:1;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:14px 17px;box-shadow:var(--shadow);transition:transform .18s,border-color .2s,box-shadow .2s} .tnode:not(.locked) .tnode-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--accent) 42%, var(--line2));box-shadow:var(--shadow-lg)} .tnode.locked .tnode-card{opacity:.62;box-shadow:none} .tnode-t{font-family:var(--serif);font-weight:800;font-size:18px;color:var(--ink);line-height:1.2} .tnode-meta{font-family:var(--sans);font-size:12.5px;color:var(--ink3);margin-top:3px} .tnode-cta{font-family:var(--sans);font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--accent);margin-top:9px} .tnode.locked .tnode-cta{color:var(--ink4)} /* problem path within a topic — numbered nodes, no titles revealed */ .qpath{display:flex;flex-direction:column;gap:10px;max-width:620px;margin-top:6px} .pnode{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line2);border-radius:13px;padding:12px 15px;box-shadow:var(--shadow);cursor:pointer;transition:transform .16s,border-color .2s,box-shadow .2s} .pnode.current{border-color:color-mix(in srgb, var(--accent) 45%, var(--line2));box-shadow:0 8px 20px -10px color-mix(in srgb, var(--accent) 45%, transparent)} .pnode:not(.locked):hover{transform:translateX(3px);border-color:color-mix(in srgb, var(--accent) 45%, var(--line2))} .pnode.locked{opacity:.55;cursor:default} .pnode-dot{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:15px;background:var(--bg2);border:1px solid var(--line2);color:var(--ink3)} .pnode.done .pnode-dot{background:var(--accent);border-color:transparent;color:#fff} .pnode.current .pnode-dot{border:2px solid var(--accent);color:var(--accent);background:var(--card)} .pnode-body{flex:1} .pnode-t{font-family:var(--serif);font-weight:800;font-size:15.5px;color:var(--ink)} .pnode-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px} .pnode-cta{font-family:var(--sans);font-size:12.5px;font-weight:800;color:var(--accent);white-space:nowrap} /* clean problem-workspace title */ .p-eyebrow{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px} h2.sec-h.p-title{font-size:clamp(24px,3.2vw,34px);line-height:1.16} /* match-the-following: Column I / Column II side by side */ .mt-intro{margin-bottom:14px;line-height:1.6} .match2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px} .match2 .mcol{border:1px solid var(--line2);border-radius:12px;background:var(--card2);overflow:hidden} .match2 .mch{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);background:var(--bg2);padding:9px 14px;border-bottom:1px solid var(--line2)} .match2 .mitem{padding:11px 14px;font-size:14.5px;line-height:1.5;border-bottom:1px solid var(--line)} .match2 .mitem:last-child{border-bottom:0} .match2 .mitem .katex{font-size:1em} @media (max-width:640px){ .match2{grid-template-columns:1fr} } /* print: keep the two columns side by side, avoid breaking a row */ @media print{ .match2{grid-template-columns:1fr 1fr!important} .match2 .mitem{page-break-inside:avoid} } /* ---------- question-formats live demo ---------- */ .qw-list{display:flex;flex-direction:column;gap:18px;margin-top:20px} .qw{background:var(--card);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);padding:22px 24px} .qw-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .qw-badge{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:linear-gradient(120deg,var(--orange),var(--orange2));padding:4px 11px;border-radius:999px} .qw-marks{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink3)} .qw-hint{font-family:var(--sans);font-size:12.5px;color:var(--ink3);margin:8px 0 2px} .qw-stmt{font-family:var(--read);font-size:16.5px;line-height:1.55;color:var(--ink);margin:10px 0 16px} .qw-opts{display:grid;gap:9px} .qw-opt{display:flex;align-items:center;gap:12px;text-align:left;background:var(--card2);border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink);transition:.15s} .qw-opt:hover{border-color:var(--line3)} .qw-opt .qw-ol{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:8px;background:var(--bg2);border:1px solid var(--line2);font-family:var(--serif);font-weight:800;font-size:13px} .qw-opt.sel{border-color:var(--orange);background:var(--orange-wash,rgba(99,102,241,.06))} .qw-opt.sel .qw-ol{background:var(--orange);border-color:transparent;color:#fff} .qw-opt.right{border-color:#2e7d55;background:rgba(46,125,85,.08)} .qw-opt.right .qw-ol{background:#2e7d55;border-color:transparent;color:#fff} .qw-opt.wrong{border-color:#c0392b;background:rgba(192,57,43,.07)} .qw-opt.wrong .qw-ol{background:#c0392b;border-color:transparent;color:#fff} .qw-num{margin-top:2px} .qw-input{width:100%;max-width:320px;padding:12px 15px;border:1.5px solid var(--line2);border-radius:11px;font:inherit;font-size:16px;background:var(--card2);color:var(--ink)} .qw-input:focus{outline:none;border-color:var(--orange)} .qw-match{margin-top:4px} .qw-mrow{display:flex;align-items:center;justify-content:space-between;gap:10px} .qw-sel{font:inherit;font-size:14px;padding:5px 8px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink)} .qw-foot{display:flex;align-items:center;gap:14px;margin-top:16px} .qw-res{font-family:var(--sans);font-size:14px;font-weight:700} .qw-res.ok{color:#2e7d55}.qw-res.no{color:#c0392b}.qw-res.hint{color:var(--ink3);font-weight:600} .qw-sol{margin-top:14px;padding:14px 16px;background:var(--sage-soft);border:1px solid var(--line2);border-radius:12px;font-family:var(--read);font-size:14.5px;line-height:1.6;color:var(--ink)} .qw-sol-h{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-bottom:6px} .book-hero{display:flex;gap:22px;align-items:flex-start;margin:8px 0 26px} .bh-glyph{font-family:var(--serif);font-weight:900;font-size:38px;color:#fff;min-width:76px;height:76px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange),var(--gold2));border-radius:18px;box-shadow:var(--shadow-lg);padding:0 10px;flex-shrink:0} .sec-sub-h{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:8px 0 14px} .hp-stats{display:flex;gap:22px;margin:6px 0 16px} .hp-stats div{display:flex;flex-direction:column} .hp-stats b{font-family:var(--serif);font-size:25px;font-weight:900;line-height:1;color:var(--ink)} .hp-stats span{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--ink3);margin-top:4px} .chips-scroll{max-height:172px;overflow-y:auto;padding:2px 4px 2px 0} .wq-src{font-family:var(--sans);font-size:10px;font-weight:700;color:#93824f;background:#f6efdd;border-radius:6px;padding:1px 6px;margin-right:5px} .spin{width:34px;height:34px;border:3px solid var(--line2);border-top-color:var(--orange);border-radius:50%;margin:0 auto;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (max-width:560px){ .book-hero{flex-direction:column;gap:14px} .bh-glyph{width:60px;height:60px;font-size:30px} } /* recommendation / insight card (like the reference) */ .rec{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:18px 20px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--shadow)} .rec .num{font-family:var(--serif);font-weight:800;font-size:16px;color:var(--ink2);background:var(--bg2);border-radius:9px;width:34px;height:34px;display:grid;place-items:center;flex-shrink:0} .rec .rc{flex:1} .rec .rtags{display:flex;gap:10px;align-items:center;margin-bottom:5px;flex-wrap:wrap} .rchip{background:var(--sage-soft);color:var(--sage);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:8px;font-family:var(--sans)} .rmeta{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-family:var(--sans)} .rec h4{font-family:var(--serif);font-size:18px;font-weight:800;margin:0 0 5px} .rec p{color:var(--ink2);font-size:14.5px;margin:0 0 12px;line-height:1.5} .rec .arrow{color:var(--ink4);font-size:18px;cursor:pointer;align-self:flex-start} /* growth (editorial stat cards) */ .growth{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)} .gcard .gl{font-size:11px;color:var(--ink3);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-family:var(--sans)} .gcard .gv{font-family:var(--serif);font-size:34px;font-weight:900;letter-spacing:-.01em;line-height:1} .gcard .gs{font-size:12.5px;color:var(--ink3);margin-top:5px} .gcard.wide{grid-column:span 2;display:flex;align-items:center;justify-content:space-between} .ring{--p:72;width:66px;height:66px;border-radius:50%;background:conic-gradient(var(--orange) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;flex-shrink:0} .ring::before{content:attr(data-p);width:50px;height:50px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-family:var(--serif);font-size:15px;font-weight:800} /* growth analytics: pure SVG, local-only */ .analytics-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:22px} .analytics-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;min-width:0} .analytics-card .gl{font-size:11px;color:var(--ink3);font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-family:var(--sans)} .analytics-card h3{font-family:var(--serif);font-size:20px;line-height:1.18;margin:0;color:var(--ink)} .an-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px} .guide-pill{font-family:var(--sans);font-size:11px;font-weight:800;color:var(--orange);background:color-mix(in srgb,var(--orange) 10%,var(--card));border:1px solid color-mix(in srgb,var(--orange) 24%,var(--line2));border-radius:999px;padding:5px 10px;white-space:nowrap} .an-note,.an-copy{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink3);margin:10px 0 0} .an-copy{font-family:var(--read);font-size:15px;color:var(--ink2)} .spark-svg,.subject-svg,.peer-svg{width:100%;height:auto;display:block;overflow:visible} .spark-svg line,.subject-svg line{stroke:var(--line2);stroke-width:1} .spark-svg polyline{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .spark-svg circle{fill:var(--card);stroke:var(--orange);stroke-width:3} .spark-svg text,.subject-svg text,.peer-svg text{font-family:var(--sans);font-size:12px;font-weight:700;fill:var(--ink3)} .subject-svg .bar-bg{fill:var(--bg2)} .subject-svg .bar-fill{fill:var(--bar);filter:drop-shadow(0 5px 10px color-mix(in srgb,var(--bar) 25%,transparent))} .subject-svg .acc-dot{fill:var(--card);stroke:var(--ink);stroke-width:2.5} .subject-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .subject-legend span{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink3);background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 9px} .subject-legend i{width:9px;height:9px;border-radius:50%;display:inline-block} .peer-card,.weak-card{grid-column:span 1} .peer-svg .guide,.peer-svg .you{fill:none;stroke-width:4;stroke-linecap:round} .peer-svg .guide{stroke:var(--line3);stroke-dasharray:7 8} .peer-svg .you{stroke:var(--orange)} .peer-svg .guide-dot{fill:var(--line3)} .peer-svg .you-dot{fill:var(--orange);stroke:var(--card);stroke-width:3} .next-step{margin-top:14px;background:var(--sage-soft);border:1px solid color-mix(in srgb,var(--sage) 28%,var(--line2));border-radius:13px;padding:12px 14px;color:var(--ink2);font-family:var(--sans);font-size:14px;line-height:1.45} .next-step b{color:var(--sage)}.next-step span{font-weight:800;color:var(--ink)} .weak-list{display:flex;flex-direction:column;gap:10px;margin-top:14px} .weak-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--line);border-radius:13px;padding:13px 14px} .weak-item b{display:block;font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.2} .weak-item span{display:block;font-family:var(--sans);font-size:12px;color:var(--ink3);margin-top:3px} .weak-item strong{font-family:var(--serif);font-size:17px;color:var(--orange);white-space:nowrap} /* credibility */ .cred{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);padding:40px;box-shadow:var(--shadow);text-align:center} .cred .founder{display:inline-flex;align-items:center;gap:13px;margin-top:20px;text-align:left} .cred .av{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--gold2));color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:800;font-size:19px} .cred .fn{font-family:var(--serif);font-weight:800;font-size:16px} .cred .fr{font-size:13.5px;color:var(--ink3)} .tnote{margin-top:20px;font-size:13px;color:var(--ink4);border-top:1px dashed var(--line2);padding-top:16px} /* founder, standards and beta limits */ .about-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:56px;align-items:end;padding:24px 0 54px} .about-title{font-family:var(--serif);font-size:clamp(40px,5.5vw,68px);line-height:1.02;margin:8px 0 18px;color:var(--ink)} .about-lead{font-family:var(--read);font-size:21px;line-height:1.55;color:var(--ink2);max-width:720px;margin:0} .founder-note{display:flex;gap:16px;align-items:flex-start;border-left:3px solid var(--orange);padding:8px 0 8px 20px} .founder-note .av{width:48px;height:48px;flex:0 0 48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),var(--gold2));color:#fff;font-family:var(--serif);font-weight:900} .founder-note b{font-family:var(--serif);font-size:19px;color:var(--ink)} .founder-note p{font-family:var(--read);font-size:15.5px;line-height:1.5;color:var(--ink2);margin:4px 0 0} .about-band{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:54px;border-top:1px solid var(--line2);padding:42px 0} .about-band h2{font-family:var(--serif);font-size:28px;line-height:1.15;color:var(--ink);margin:8px 0 0} .about-band p{font-family:var(--read);font-size:17px;line-height:1.62;color:var(--ink2);margin:10px 0 0} .standard-list{display:flex;flex-direction:column} .standard-row{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line)} .standard-row:first-child{padding-top:0}.standard-row:last-child{border-bottom:0;padding-bottom:0} .standard-row b{font-family:var(--serif);font-size:18px;line-height:1.3;color:var(--ink)} .standard-row span{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink2)} .about-band.two-col{grid-template-columns:1fr 1fr} .correction-band{align-items:end}.about-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap} .tool-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)} .tool-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:13px 8px;border-bottom:1px solid var(--line)} .tool-row:nth-child(odd){border-right:1px solid var(--line);padding-right:20px}.tool-row:nth-child(even){padding-left:20px} .tool-row span{font-family:var(--serif);font-size:13px;font-weight:900;color:var(--orange)} .tool-row b{font-family:var(--sans);font-size:13.5px;line-height:1.35;color:var(--ink)} /* ---------- daily mission ---------- */ .today-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center;padding:18px 0 30px;border-bottom:1px solid var(--line2)} .today-title{font-family:var(--serif);font-size:clamp(36px,5vw,60px);line-height:1.04;margin:8px 0 14px;color:var(--ink)} .today-hero p{max-width:720px;margin:0;font-family:var(--read);font-size:19px;line-height:1.58;color:var(--ink2)} .today-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .share-status{font-size:12px;font-weight:700;color:var(--sage);min-height:18px;margin-top:7px} .today-score{min-width:174px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:22px;box-shadow:var(--shadow)} .today-score b{font-family:var(--serif);font-size:18px;margin-top:12px}.today-score span{font-size:11.5px;font-weight:700;color:var(--ink3);margin-top:2px} .today-metrics{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line2);margin-bottom:32px} .today-metrics div{padding:20px 12px;border-right:1px solid var(--line);text-align:center}.today-metrics div:last-child{border-right:0} .today-metrics span{display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)} .today-metrics b{display:block;font-family:var(--serif);font-size:24px;line-height:1.15;margin-top:5px;color:var(--ink)} .today-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start} .daily-list{display:flex;flex-direction:column;gap:9px} .daily-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto 112px 20px;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line2);border-left:4px solid var(--line2);border-radius:8px;padding:13px 14px;transition:transform .14s,border-color .14s,box-shadow .14s} .daily-row:hover{transform:translateY(-1px);border-color:var(--orange);box-shadow:var(--shadow)} .daily-row.right{border-left-color:var(--sage)}.daily-row.tried{border-left-color:var(--orange)}.daily-row.known{border-left-color:var(--gold)} .daily-num{font-family:var(--serif);font-weight:900;color:var(--ink3)} .daily-main{min-width:0}.daily-main b{display:block;font-family:var(--serif);font-size:16px;line-height:1.25;color:var(--ink)} .daily-main small{display:block;font-family:var(--sans);font-size:11.5px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .daily-status{font-size:11.5px;font-weight:800;color:var(--ink3);text-align:right}.daily-row.right .daily-status{color:var(--sage)}.daily-row.tried .daily-status{color:var(--orange)} .daily-go{font-size:17px;font-weight:900;color:var(--orange)} .today-aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:82px} .week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:18px 0 8px} .week-day{min-width:0;height:66px;display:grid;place-items:center;align-content:center;background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--ink3)} .week-day span{font-size:9px;font-weight:800}.week-day b{font-family:var(--serif);font-size:16px;line-height:1.1}.week-day i{font-size:9px;font-style:normal;height:12px;color:var(--sage)} .week-day.active{background:var(--sage-soft);border-color:color-mix(in srgb,var(--sage) 35%,var(--line))}.week-day.today{box-shadow:inset 0 0 0 2px var(--orange)} /* ---------- data, privacy and terms ---------- */ .narrow{max-width:900px} .policy-title{font-family:var(--serif);font-size:clamp(38px,5vw,60px);line-height:1.04;margin:8px 0 16px;color:var(--ink)} .policy-lead{font-family:var(--read);font-size:20px;line-height:1.58;color:var(--ink2);max-width:760px;margin:0 0 34px} .data-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--card);margin-bottom:28px} .data-summary div{padding:19px 16px;border-right:1px solid var(--line);text-align:center}.data-summary div:last-child{border-right:0} .data-summary span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)} .data-summary b{display:block;font-family:var(--serif);font-size:25px;margin-top:4px;color:var(--ink)} .policy-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;border-top:1px solid var(--line2);padding:30px 0} .policy-band h2,.policy-copy h2{font-family:var(--serif);font-size:22px;line-height:1.2;margin:0 0 7px;color:var(--ink)} .policy-band p,.policy-copy p{font-family:var(--read);font-size:16.5px;line-height:1.6;margin:0;color:var(--ink2)} .policy-meta{font-family:var(--sans)!important;font-size:12px!important;color:var(--ink3)!important;margin-top:8px!important} .data-actions{display:flex;min-width:190px;flex-direction:column;gap:9px}.data-actions .btn{width:100%} .data-status{font-size:12px;font-weight:700;color:var(--sage);line-height:1.4;max-width:240px;min-height:16px} .btn.danger{background:#a52a22;color:#fff}.danger-band{border-top-color:color-mix(in srgb,#a52a22 35%,var(--line2))} .policy-links{display:flex;gap:9px;flex-wrap:wrap}.policy-links a{font-size:13px;font-weight:800;color:var(--orange);border-bottom:1px solid currentColor} .policy-copy{border-top:1px solid var(--line2)} .policy-copy h2{margin-top:30px}.policy-copy p a{color:var(--orange);font-weight:700} .progress-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;flex-wrap:wrap}.progress-head .sec-lead{margin-bottom:0}.progress-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:4px} /* optional account + server-authorized administration */ .account-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:48px;align-items:start} .account-panel{background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:24px;box-shadow:var(--shadow)} .account-panel form{display:flex;flex-direction:column;gap:12px}.account-panel form>label:first-child{font-size:12px;font-weight:800;color:var(--ink2)} .account-input{width:100%;min-height:46px;border:1.5px solid var(--line2);border-radius:8px;background:var(--card2);color:var(--ink);padding:10px 13px;font:inherit;font-size:16px} .account-input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 14%,transparent)} .code-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:23px;letter-spacing:.18em;text-align:center} .consent-row{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:12.5px;line-height:1.45;color:var(--ink2);margin:3px 0} .consent-row input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--orange)}.consent-row a{color:var(--orange);font-weight:800;text-decoration:underline} .text-button{border:0;background:none;color:var(--orange);font:inherit;font-size:13px;font-weight:800;cursor:pointer;padding:5px} .account-fine,.dev-note{font-size:12px;line-height:1.5;color:var(--ink3);margin:14px 0 0}.dev-note{color:var(--sage);font-weight:700} .cloud-status{min-height:19px;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--sage);font-weight:700}.cloud-status.error{color:#a52a22} .account-summary{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);margin:26px 0 32px} .account-summary div{padding:18px 12px;border-right:1px solid var(--line);min-width:0}.account-summary div:last-child{border-right:0} .account-summary span{display:block;font-size:10.5px;text-transform:uppercase;font-weight:800;color:var(--ink3)}.account-summary b{display:block;font-family:var(--serif);font-size:20px;margin-top:5px;overflow-wrap:anywhere}.account-summary .small-value{font-family:var(--sans);font-size:12px;line-height:1.35} .admin-entry{border-top-color:color-mix(in srgb,var(--sage) 35%,var(--line2))}.admin-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.admin-head .policy-lead{margin-bottom:0} .loading-line{padding:44px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);color:var(--ink3);font-weight:700} .admin-summary{margin:28px 0}.admin-table-wrap{width:100%;overflow:auto;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)} .admin-summary-six{grid-template-columns:repeat(6,minmax(0,1fr))} .admin-table{width:100%;min-width:900px;border-collapse:collapse;text-align:left;font-size:13px}.admin-table th{padding:12px 10px;color:var(--ink3);font-size:10.5px;text-transform:uppercase;border-bottom:1px solid var(--line2)} .admin-table td{padding:14px 10px;border-bottom:1px solid var(--line);vertical-align:middle}.admin-table tbody tr:last-child td{border-bottom:0}.admin-table td b{display:block}.admin-table td small{display:block;color:var(--ink3);margin-top:2px} .admin-plan{min-height:36px;border:1px solid var(--line2);border-radius:7px;background:var(--card);color:var(--ink);padding:6px 9px;font:inherit}.admin-actions{display:flex;align-items:center;gap:7px;min-width:230px} .admin-more{display:flex;justify-content:center;padding:18px 0;border-bottom:1px solid var(--line2)} .admin-actions .icon-btn{width:34px;height:34px;border-radius:7px}.status-dot{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800}.status-dot.active{background:var(--sage-soft);color:var(--sage)}.status-dot.suspended{background:rgba(165,42,34,.1);color:#a52a22}.protected-label{color:var(--ink3);font-size:11px;font-weight:800;text-transform:uppercase} /* visible provenance and correction loop */ .source-chip{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;padding:3px 9px;font-family:var(--sans);font-size:11px;font-weight:800;line-height:1.35} .source-chip.traced{color:var(--sage);background:var(--sage-soft)} .source-chip.review{color:var(--orange);background:color-mix(in srgb,var(--orange) 9%,var(--card))} .source-chip.original{color:var(--ink3);background:var(--card2)} .source-chip.challenge{color:#7a3d00;background:#fff1c9;border-color:#e7bd63} .source-detail b{display:block;font-family:var(--serif);font-size:15px;line-height:1.35;color:var(--ink)} .source-detail span{display:block;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--ink3);margin-top:5px} .report-copy{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--ink3);margin:0 0 12px} .report-status{font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--sage);font-weight:700;margin-top:9px;min-height:17px} /* final CTA */ .finalcta{background:linear-gradient(150deg,var(--dark),var(--dark2));border-radius:var(--r-lg);padding:52px;text-align:center;color:var(--cream);position:relative;overflow:hidden} .finalcta::after{content:"";position:absolute;left:-60px;bottom:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(224,179,63,.14),transparent 70%)} .finalcta h2{font-family:var(--serif);font-size:clamp(28px,3.4vw,42px);font-weight:900;margin:0 0 12px;letter-spacing:-.02em;position:relative;color:var(--cream)} .finalcta p{font-family:var(--read);color:var(--cream2);font-size:17px;margin:0 0 24px;position:relative} .finalcta .btn{position:relative} .finalcta .btn.orange{background:linear-gradient(120deg,var(--orange),var(--gold2))} footer{border-top:1px solid var(--line);margin-top:20px;padding:30px 0;color:var(--ink3);font-size:13.5px} .foot-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} .foot-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.foot-links a{color:var(--orange);font-weight:700} /* ---------- problems list + workspace ---------- */ .page{padding:36px 0 96px} .crumbs{font-size:13.5px;color:var(--ink3);margin-bottom:18px;font-family:var(--sans)} .crumbs a{color:var(--orange);font-weight:600} .plist{display:flex;flex-direction:column;gap:12px} .prow{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px 16px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:15px;cursor:pointer;position:relative;overflow:hidden;transition:border-color .18s,transform .14s,box-shadow .18s} .prow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(var(--orange),var(--gold2));transition:width .18s} .prow:hover{border-color:var(--line3);transform:translateY(-2px);box-shadow:var(--shadow-lg)} .prow:hover::before{width:4px} .prow:hover .go{opacity:1;transform:none} .prow .pn{font-family:var(--serif);font-weight:800;color:var(--ink4);min-width:40px;font-size:15px} .prow .pt{flex:1;min-width:0} .prow .pt .ptt{font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink)} .prow .meta2{display:flex;gap:12px;align-items:center;margin-top:5px;flex-wrap:wrap} .prow .dchip{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.03em;padding:2px 9px;border-radius:999px} .dchip.easy{background:var(--sage-soft);color:var(--sage)} .dchip.mod{background:var(--bg2);color:var(--orange)} .dchip.hard{background:color-mix(in srgb,var(--orange) 15%,transparent);color:var(--orange)} .prow .tm{font-family:var(--sans);font-size:12px;color:var(--ink3);font-weight:600;display:inline-flex;align-items:center;gap:4px} .prow .st-lbl{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--sage)} .prow .go{color:var(--orange);font-size:20px;font-weight:700;opacity:0;transform:translateX(-4px);transition:.18s;flex-shrink:0} .prow.locked{opacity:.55;cursor:not-allowed} .prow.locked:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line2)} .prow.locked:hover::before{width:0} .prow.locked .go{display:none} .chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--line3);flex-shrink:0;display:grid;place-items:center;font-size:11px} .chk.done{background:var(--sage);border-color:var(--sage);color:#fff;font-weight:900} .chk.lock{border-style:solid;border-color:var(--line2);color:var(--ink4)} /* two-column workspace + right rail */ .ws-grid{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start} .ws-grid>*{min-width:0} .rail{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px} .rail .rcard{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)} .rail .rt{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-family:var(--sans);margin-bottom:10px} .rail .rrow{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14px} .rail .rrow+.rrow{border-top:1px solid var(--line)} .rail .rrow .k{color:var(--ink2);font-weight:500} .rail .rrow .v{font-family:var(--serif);font-weight:800;color:var(--ink)} .rail .warn{background:color-mix(in srgb,var(--orange) 9%,var(--card));border:1px solid color-mix(in srgb,var(--orange) 25%,var(--line2));color:var(--orange);border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;line-height:1.4} .rail .good{background:var(--sage-soft);border:1px solid color-mix(in srgb,var(--sage) 30%,transparent);color:var(--sage);border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600} .timer{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink2);background:var(--card2);border:1px solid var(--line2);border-radius:999px;padding:6px 13px} .timer .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);animation:tpulse 1.6s ease-in-out infinite} @keyframes tpulse{0%,100%{opacity:.4}50%{opacity:1}} .gatebar{background:color-mix(in srgb,var(--orange) 8%,var(--card));border:1px solid color-mix(in srgb,var(--orange) 22%,var(--line2));border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:14px;color:var(--ink2)} .gatebar b{color:var(--orange);font-family:var(--serif)} @media (max-width:900px){.ws-grid{grid-template-columns:1fr}.rail{position:static;flex-direction:row;flex-wrap:wrap}.rail .rcard{flex:1;min-width:220px}} /* the question is the stage: elevated 3-D card, subject accent, quiet elegance */ .stmt{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(168deg, var(--card) 0%, var(--card2) 100%);border:1px solid var(--line2);border-radius:20px;padding:26px 30px 28px;font-family:var(--read);font-size:19.5px;line-height:1.66;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 5px rgba(20,16,10,.05), 0 26px 50px -24px color-mix(in srgb, var(--accent,#6366F1) 32%, transparent)} .stmt::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg, var(--accent,#6366F1), color-mix(in srgb, var(--accent,#6366F1) 45%, var(--gold2)));z-index:2} .stmt::after{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--accent,#6366F1) 13%, transparent), transparent 70%);pointer-events:none;z-index:0} .stmt .qtag{position:relative;z-index:1;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:color-mix(in srgb, var(--accent,#6366F1) 78%, var(--ink3));display:flex;align-items:center;gap:8px;margin-bottom:14px} .stmt .qtag-dot{width:7px;height:7px;border-radius:50%;background:var(--accent,#6366F1);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent,#6366F1) 16%, transparent)} .stmt .qbody{position:relative;z-index:1} .stmt .qbody,.ws-panel,.answrap,.wq-body,.wsol-m{min-width:0} .stmt .qbody .katex-display,.ws-panel .katex-display,.answrap .katex-display,.wq-body .katex-display,.wsol-m .katex-display{max-width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:4px} .stmt .parbreak{display:block;height:11px} .problem-figure{position:relative;z-index:1;margin:22px auto 4px;padding:14px;border:1px solid var(--line2);border-radius:8px;background:var(--card);overflow:hidden} .problem-figure svg{display:block;width:100%;height:auto;max-height:440px;margin:auto;color:var(--ink)} [data-theme="dark"] .stmt{box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 26px 50px -24px color-mix(in srgb, var(--accent,#6366F1) 40%, transparent)} .ws-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:22px 0 0;border-bottom:1px solid var(--line2)} .ws-tab{padding:11px 16px;border:0;background:none;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink3);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px} .ws-tab.on{color:var(--orange);border-color:var(--orange)} .ws-panel{padding:22px 2px 6px;font-size:16.5px;line-height:1.64} /* premium solution walkthrough */ .soln{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);padding:6px 26px 22px;margin-bottom:14px;box-shadow:var(--shadow)} .soln .sname{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:800;font-size:18.5px;color:var(--ink);padding:18px 0 6px;border-bottom:1px solid var(--line);margin-bottom:6px} .soln .sname .sn-badge{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--orange),var(--gold2));display:grid;place-items:center;color:#fff;font-size:14px;flex-shrink:0;box-shadow:0 2px 7px rgba(194,65,12,.3)} .steps{list-style:none;margin:0;padding:0;counter-reset:st;position:relative} .steps::before{content:"";position:absolute;left:15px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--gold2),var(--line2));opacity:.5} .steps li{counter-increment:st;position:relative;padding:14px 0 14px 46px;font-family:var(--read);font-size:17px;line-height:1.6;color:var(--ink)} .steps li+li{border-top:1px dashed var(--line)} .steps li::before{content:counter(st);position:absolute;left:0;top:12px;width:32px;height:32px;border-radius:50%;background:var(--card);border:2px solid var(--gold2);color:var(--orange);font-family:var(--serif);font-weight:800;font-size:14px;display:grid;place-items:center;z-index:1} /* callouts (trap / insight) */ .callout{border-radius:var(--r-lg);padding:22px 26px;margin-bottom:14px;position:relative;overflow:hidden} .callout .co-h{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;font-size:19px;margin-bottom:10px} .callout .co-b{font-family:var(--read);font-size:17px;line-height:1.62} .callout.trap{background:linear-gradient(135deg,color-mix(in srgb,var(--orange) 10%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--orange) 28%,var(--line2))} .callout.trap .co-h{color:var(--orange)} .callout.insight{background:linear-gradient(135deg,color-mix(in srgb,var(--gold2) 16%,var(--card)),var(--card));border:1px solid color-mix(in srgb,var(--gold2) 34%,var(--line2))} .callout.insight .co-h{color:var(--gold)} .callout.insight .co-b{font-style:italic} /* hints */ .hintbox{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);text-align:center} .hintbox .hprog{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-family:var(--sans);margin-bottom:14px} .hintbox .hlead{font-family:var(--read);font-style:italic;color:var(--ink2);font-size:16px;margin-bottom:18px} .hint-card{text-align:left;background:var(--card2);border:1px solid var(--line2);border-left:4px solid var(--gold2);border-radius:var(--r);padding:16px 20px;margin-bottom:12px;animation:hslide .4s cubic-bezier(.2,.8,.2,1) both} @keyframes hslide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .hint-card .hh{font-family:var(--serif);font-weight:800;font-size:15px;color:var(--orange);margin-bottom:5px} .hint-card .hb{font-family:var(--read);font-size:16.5px;line-height:1.55} .reveal{text-align:center;padding:8px} .tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .tg{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink3);background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:4px 11px} a.tgl{text-decoration:none;cursor:pointer;transition:all .15s ease;text-transform:capitalize} a.tgl:hover{color:var(--orange);border-color:var(--orange);background:var(--orange-wash,rgba(214,122,42,.08));transform:translateY(-1px)} a.tgl.on{color:#fff;background:linear-gradient(120deg,var(--orange),var(--gold2));border-color:transparent} /* concept-jump hero */ .tag-hero{padding:20px 22px;border-radius:16px;background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--line2);margin-bottom:4px} /* answer check */ .answrap{margin-top:18px;padding:16px 18px;border-radius:15px;background:var(--card2);border:1px solid var(--line2)} .self-check-copy{max-width:720px;margin:0 0 13px;color:var(--ink2);font-family:var(--read);line-height:1.55} .ans-lbl{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px} #ans.ok{border-color:var(--good,#2e7d55)!important;box-shadow:0 0 0 3px rgba(46,125,85,.14)} #ans.no{border-color:#c0392b!important;box-shadow:0 0 0 3px rgba(192,57,43,.14);animation:ansShake .3s} @keyframes ansShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .ansres{margin-top:12px;padding:11px 14px;border-radius:11px;font-family:var(--sans);font-size:14px;line-height:1.5} .ansres.ok{background:rgba(46,125,85,.1);border:1px solid rgba(46,125,85,.35);color:var(--ink)} .ansres.no{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.32);color:var(--ink)} .ansres.hint{background:var(--card);border:1px dashed var(--line3);color:var(--ink2)} .ansres b{font-family:var(--serif)} .katex{font-size:1.04em} .katex-display{margin:.4em 0!important;overflow-x:auto;overflow-y:hidden} /* ---------- responsive ---------- */ @media (max-width:920px){ .hero-grid{grid-template-columns:1fr;gap:34px} .dpp-in{grid-template-columns:1fr;gap:26px} .growth{grid-template-columns:1fr 1fr} .feats{grid-template-columns:1fr} .analytics-grid{grid-template-columns:1fr} .stats{grid-template-columns:1fr 1fr;gap:24px} .proof{grid-template-columns:1fr 1fr} .dppgrid{grid-template-columns:1fr} .proof .pcell:nth-child(2){border-right:0} .proof .pcell:nth-child(1),.proof .pcell:nth-child(2){border-bottom:1px solid var(--line)} .nav-links,.nav-search{display:none} .mobo{display:grid}.mobile-menu.open{display:grid} .about-hero,.about-band{grid-template-columns:1fr;gap:26px}.about-band.two-col{grid-template-columns:1fr 1fr}.about-actions{justify-content:flex-start} .today-grid{grid-template-columns:1fr}.today-aside{position:static;display:grid;grid-template-columns:1fr 1fr}.today-metrics{grid-template-columns:repeat(3,1fr)}.today-metrics div:nth-child(3){border-right:0}.today-metrics div:nth-child(-n+3){border-bottom:1px solid var(--line)} .account-layout{grid-template-columns:1fr;gap:26px}.account-summary{grid-template-columns:1fr 1fr}.account-summary div:nth-child(2){border-right:0}.account-summary div:nth-child(-n+2){border-bottom:1px solid var(--line)}.admin-summary-six{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-summary-six div:nth-child(3n){border-right:0}.admin-summary-six div:nth-child(-n+3){border-bottom:1px solid var(--line)} } @media (max-width:560px){ .wrap,.nav-in{padding-left:18px;padding-right:18px} .growth{grid-template-columns:1fr} .gcard.wide{grid-column:span 1} .analytics-card{padding:18px}.weak-item{grid-template-columns:1fr}.weak-item .btn{width:100%} .statrow{gap:26px} .hero{padding:38px 0 20px} .hero-kicker{font-size:20px}.sprint-head{grid-template-columns:1fr;gap:18px}.sprint-head .btn{width:100%}.sprint-grid{grid-template-columns:1fr}.about-band.two-col,.standard-row{grid-template-columns:1fr}.about-hero{padding-top:8px}.about-lead{font-size:18px} .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line2);padding:10px 16px;display:flex;gap:10px} .mobile-cta .btn{flex:1} body{padding-bottom:66px} .data-link{display:none}.mobile-menu{padding-left:18px;padding-right:18px;grid-template-columns:1fr 1fr}.mobile-menu a{padding:9px 8px} .today-hero{grid-template-columns:1fr;gap:22px}.today-score{width:100%;min-width:0;flex-direction:row;justify-content:center;gap:18px;text-align:left}.today-score b{margin:0}.today-score span{margin:0}.today-metrics{grid-template-columns:1fr 1fr}.today-metrics div,.today-metrics div:nth-child(3){border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.today-metrics div:nth-child(even){border-right:0}.today-metrics div:last-child{grid-column:1/-1;border-right:0} .daily-row{grid-template-columns:34px minmax(0,1fr) 18px}.daily-row .dchip,.daily-status{grid-row:2}.daily-row .dchip{grid-column:2}.daily-status{grid-column:2;text-align:left;margin-left:78px}.daily-go{grid-column:3;grid-row:1/3}.today-aside{grid-template-columns:1fr} .data-summary{grid-template-columns:1fr 1fr}.data-summary div{border-bottom:1px solid var(--line)}.data-summary div:nth-child(even){border-right:0}.data-summary div:nth-last-child(-n+2){border-bottom:0}.admin-summary-six{grid-template-columns:1fr 1fr}.admin-summary-six div:nth-child(3n){border-right:1px solid var(--line)}.admin-summary-six div:nth-child(even){border-right:0}.admin-summary-six div:nth-last-child(-n+2){border-bottom:0}.policy-band{grid-template-columns:1fr;gap:18px;align-items:start}.data-actions{width:100%}.tool-list{grid-template-columns:1fr}.tool-row:nth-child(odd){border-right:0;padding-right:8px}.tool-row:nth-child(even){padding-left:8px} .account-panel{padding:18px}.account-summary{grid-template-columns:1fr}.account-summary div,.account-summary div:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}.account-summary div:last-child{border-bottom:0}.admin-head{flex-direction:column}.admin-head .btn{width:100%} } @media (max-width:720px){ .admin-table-wrap{overflow:visible;border:0}.admin-table{display:block;min-width:0}.admin-table thead{display:none}.admin-table tbody{display:grid;gap:12px}.admin-table tr{display:block;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:8px 14px;box-shadow:none} .admin-table td{display:grid;grid-template-columns:94px minmax(0,1fr);gap:12px;align-items:center;min-width:0;padding:9px 0;border-bottom:1px solid var(--line)}.admin-table td>*{min-width:0}.admin-table td b{overflow-wrap:anywhere}.admin-table td:last-child{border-bottom:0}.admin-table td::before{content:attr(data-label);font-size:10px;text-transform:uppercase;color:var(--ink3);font-weight:800} .admin-actions{min-width:0;flex-wrap:wrap}.admin-plan{width:100%;max-width:210px} } @media (max-width:380px){.account-link{display:none}} @media (min-width:561px){.mobile-cta{display:none}} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}