:root {
  --bg: #080a10;
  --surface: #10131c;
  --surface-2: #151925;
  --line: rgba(255, 255, 255, 0.09);
  --text: #f5f6fb;
  --muted: #989eaf;
  --purple: #8d62ff;
  --purple-2: #b29bff;
  --cyan: #46d9e8;
  --orange: #ff9d5c;
  --header-h: 74px;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.sidebar-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.noise {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.site-header {
  height: var(--header-h); padding: 0 clamp(24px, 5vw, 80px); position: fixed; inset: 0 0 auto; z-index: 15;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(8, 10, 16, .76); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 800; width: max-content; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px; width: 34px; height: 34px; color: white; font: 800 16px var(--mono);
  background: linear-gradient(145deg, #a37aff, #6640d9); border-radius: 9px; box-shadow: 0 8px 26px rgba(132, 83, 255, .35);
}
.brand-mark span { position: static; color: #d5c9ff; font-size: 11px; line-height: 1; }
.main-nav { display: flex; gap: 6px; align-items: stretch; height: 100%; }
.nav-link { position: relative; display: grid; place-items: center; padding: 0 19px; color: #a4a9b7; font-size: 14px; transition: .25s ease; }
.nav-link::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--purple); transition: .25s ease; transform: translateX(-50%); }
.nav-link:hover, .nav-link.active { color: white; }
.nav-link.active::after { width: 22px; }
.header-cta { justify-self: end; display: flex; align-items: center; gap: 8px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; font-size: 13px; transition: .25s; }
.header-cta:hover { background: white; color: #11131b; border-color: white; }
.header-cta svg { width: 15px; height: 15px; }
.menu-toggle { display: none; justify-self: end; background: transparent; border: 0; width: 40px; height: 40px; padding: 9px; }
.menu-toggle span { display: block; width: 22px; height: 1px; background: white; margin: 6px 0; transition: .25s; }

main { min-height: 100vh; }
.page { display: none; padding-top: var(--header-h); min-height: 100vh; animation: pageIn .45s ease both; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } }

.hero { min-height: calc(100vh - var(--header-h)); padding: 80px clamp(24px, 7vw, 110px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 7vw, 110px); position: relative; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, black, transparent 78%); }
.hero-grid::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 50%, transparent, var(--bg) 75%); }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.orb-one { width: 380px; height: 380px; right: 8%; top: 19%; background: rgba(111, 75, 226, .14); box-shadow: 0 0 150px rgba(121, 76, 244, .25); }
.orb-two { width: 160px; height: 160px; right: 40%; bottom: 4%; background: rgba(63, 211, 225, .07); box-shadow: 0 0 90px rgba(70, 217, 232, .12); }
.hero-copy, .code-card { position: relative; z-index: 1; }
.eyebrow { font: 500 11px var(--mono); letter-spacing: .16em; color: #aeb3c0; display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.eyebrow span { width: 28px; height: 1px; background: var(--purple); box-shadow: 0 0 8px var(--purple); }
.hero h1 { font-size: clamp(47px, 5.5vw, 82px); line-height: 1.12; letter-spacing: -.055em; margin: 26px 0 27px; font-weight: 900; }
.gradient-text { color: transparent; background: linear-gradient(98deg, #fff 4%, #b5a2ff 46%, #7561de 100%); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 625px; color: #aaafbd; line-height: 1.9; font-size: 16px; margin: 0; }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 23px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: .25s ease; border: 1px solid transparent; }
.button svg { width: 18px; height: 18px; transition: transform .25s; }
.button:hover svg { transform: translateX(4px); }
.button-primary { background: linear-gradient(120deg, #8157ed, #6845d7); box-shadow: 0 12px 34px rgba(116, 72, 225, .28); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 42px rgba(116,72,225,.4); }
.button-ghost { border-color: var(--line); color: #bdc1cd; background: rgba(255,255,255,.025); }
.button-ghost:hover { border-color: rgba(255,255,255,.25); color: white; background: rgba(255,255,255,.05); }
.hero-meta { margin-top: 27px; color: #73798a; display: flex; gap: 25px; font-size: 11px; font-family: var(--mono); }
.hero-meta span { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #69e1a4; box-shadow: 0 0 10px #69e1a4; }

.code-card { border-radius: 14px; background: #0c0f17; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(109,76,195,.08); overflow: hidden; transform: perspective(1000px) rotateY(-3deg) rotateX(1deg); }
.code-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: linear-gradient(135deg, rgba(157,120,255,.3), transparent 40%); border-radius: 14px; }
.code-card-top { height: 49px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 17px; font: 10px var(--mono); color: #747b8d; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #444957; }
.window-dots i:first-child { background: #ff6b74; }.window-dots i:nth-child(2) { background: #edbf54; }.window-dots i:last-child { background: #61d88c; }
.code-status { justify-self: end; color: #67d995; }
.code-body { display: grid; grid-template-columns: 40px 1fr; padding: 28px 15px 28px 0; font: 12px/2 var(--mono); min-height: 310px; }
.line-numbers { color: #3f4555; text-align: right; padding-right: 14px; user-select: none; border-right: 1px solid rgba(255,255,255,.05); }
pre { margin: 0; overflow-x: auto; }
.code-body pre { padding-left: 20px; color: #c7ccd8; }
.c-pink { color: #dc83d3; }.c-green { color: #8fd59a; }.c-blue { color: #74bce9; }.c-orange { color: #e7a967; }.c-purple { color: #b69afa; }.c-muted { color: #676e80; }
.code-card-bottom { height: 47px; display: flex; justify-content: flex-end; align-items: center; gap: 25px; border-top: 1px solid var(--line); padding: 0 18px; color: #616879; font: 9px var(--mono); }
.code-card-bottom b { color: #9ba2b2; font-weight: 400; margin-left: 4px; }

.section { padding: 110px clamp(24px, 7vw, 110px); }
.intro-section { background: #0b0d14; border-top: 1px solid var(--line); }
.section-heading { max-width: 720px; }
.section-index { color: var(--purple-2); font: 11px var(--mono); letter-spacing: .15em; }
.section-heading h2, .section-heading h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.22; letter-spacing: -.04em; margin: 20px 0; }
.section-heading p { color: var(--muted); line-height: 1.8; max-width: 580px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 65px; }
.feature-card { position: relative; min-height: 310px; padding: 30px; background: rgba(255,255,255,.018); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: .35s ease; }
.feature-card::after { content: ""; position: absolute; inset: auto -30% -70% 10%; height: 250px; background: radial-gradient(ellipse, rgba(124,84,228,.13), transparent 65%); opacity: 0; transition: .35s; }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(159,126,255,.3); background: rgba(255,255,255,.03); }
.feature-card:hover::after { opacity: 1; }
.feature-icon { width: 48px; height: 48px; border: 1px solid; border-radius: 10px; display: grid; place-items: center; }
.feature-icon svg { width: 22px; height: 22px; }
.feature-icon.purple { color: #aa8cff; background: rgba(139,94,255,.1); border-color: rgba(139,94,255,.25); }
.feature-icon.cyan { color: var(--cyan); background: rgba(70,217,232,.08); border-color: rgba(70,217,232,.2); }
.feature-icon.orange { color: var(--orange); background: rgba(255,157,92,.08); border-color: rgba(255,157,92,.2); }
.feature-no { position: absolute; right: 28px; top: 32px; color: #434956; font: 11px var(--mono); }
.feature-card h3 { margin: 29px 0 12px; font-size: 20px; }
.feature-card p { min-height: 70px; color: #888e9e; line-height: 1.75; font-size: 14px; }
.feature-card a { position: relative; z-index: 1; color: #b7a2fa; font-size: 12px; display: flex; justify-content: space-between; margin-top: 25px; }
.feature-card a span { transition: transform .25s; }.feature-card:hover a span { transform: translate(3px,-3px); }
.quote-strip { padding: 55px clamp(24px, 7vw, 110px); border-block: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(circle at 50% 100%, rgba(121,87,218,.09), transparent 45%); }
.quote-mark { font: 60px Georgia; color: var(--purple); line-height: .7; }.quote-strip p { font: 16px var(--mono); color: #ccd0da; }.quote-author { color: #656b7b; font: 10px var(--mono); }

.docs-hero { padding: 70px clamp(24px, 7vw, 110px) 55px; min-height: 315px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 72% 0%, rgba(125,82,240,.13), transparent 32%); }
.docs-hero h1 { font-size: clamp(40px, 5vw, 66px); letter-spacing: -.05em; margin: 17px 0 12px; }.docs-hero p { color: var(--muted); margin: 0; }
.progress-card { width: 270px; border: 1px solid var(--line); border-radius: 11px; padding: 18px; background: rgba(255,255,255,.025); }
.progress-card > div:first-child { display: flex; justify-content: space-between; font-size: 12px; color: #a3a8b5; }.progress-card b { font: 11px var(--mono); color: #d4c9ff; }
.progress-track, .side-progress { margin: 13px 0 9px; height: 3px; background: #242833; border-radius: 99px; overflow: hidden; }
.progress-track i, .side-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); transition: width .4s; }
.progress-card small { color: #686f80; font-size: 10px; }
.docs-layout { max-width: 1370px; margin: auto; display: grid; grid-template-columns: 255px minmax(0, 820px); justify-content: center; gap: 70px; padding: 55px 35px 120px; align-items: start; }
.docs-sidebar { position: sticky; top: 105px; }
.sidebar-title { display: flex; justify-content: space-between; color: #e1e3ea; font-weight: 700; font-size: 13px; margin-bottom: 15px; }.sidebar-close { display: none; }
.side-progress { margin-bottom: 20px; }
.docs-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.doc-link { position: relative; display: grid; grid-template-columns: 29px 1fr 4px; align-items: center; gap: 8px; min-height: 43px; padding: 0 13px; color: #747b8b; border-radius: 7px; outline: 0; font-size: 13px; transition: color .1s linear, background-color .1s linear; overflow: hidden; }
.doc-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(131,88,238,.10), transparent); opacity: 0; transition: opacity .1s linear; }
.doc-link b { position: relative; color: #4d5361; font: 9px var(--mono); transition: .22s; }.doc-link span { position: relative; }.doc-link i { width: 4px; height: 4px; border-radius: 50%; transition: .22s; }
.doc-link:hover { color: #d0d3dc; transform:none; }.doc-link:hover::before, .doc-link.active::before { opacity: 1; }
.doc-link.active { color: white; }.doc-link.active b { color: #a589ff; }.doc-link.active i { background: var(--purple); box-shadow: 0 0 9px var(--purple); }
.doc-link:focus-visible { box-shadow: inset 0 0 0 2px rgba(128,93,221,.34); }
.sidebar-tip { border: 1px solid var(--line); border-radius: 8px; margin-top: 27px; padding: 15px; }.sidebar-tip span { color: #9c7ef3; font: 9px var(--mono); }.sidebar-tip p { color: #6f7585; font-size: 11px; line-height: 1.65; margin: 8px 0 0; }
.catalog-trigger { display: none; }
.lesson { padding: 25px 0 90px; border-bottom: 1px solid var(--line); margin-bottom: 65px; }
.lesson:last-child { border: 0; margin: 0; }.lesson-label { color: #826be0; font: 10px var(--mono); letter-spacing: .12em; }
.lesson h2 { font-size: clamp(35px, 4vw, 50px); letter-spacing: -.045em; margin: 12px 0 15px; }.lesson-lead { color: #a6abb8; font-size: 16px; line-height: 1.8; margin: 0 0 38px; }.lesson h3 { margin-top: 36px; font-size: 20px; }.lesson > p:not(.lesson-lead) { color: #9298a7; line-height: 1.8; font-size: 14px; }
.info-callout, .warning-callout { display: flex; gap: 16px; padding: 19px 20px; background: rgba(128,89,235,.07); border: 1px solid rgba(141,98,255,.2); border-left: 3px solid var(--purple); border-radius: 8px; margin: 28px 0; }
.callout-icon { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--purple); font: 12px Georgia; }.info-callout b, .warning-callout b { font-size: 13px; }.info-callout p, .warning-callout p { color: #8e94a5; line-height: 1.7; font-size: 12px; margin: 5px 0 0; }.info-callout strong { color: #c9bbf7; font-weight: 500; }
.warning-callout { display: block; border-color: rgba(255,157,92,.2); border-left-color: var(--orange); background: rgba(255,157,92,.05); }.warning-callout b { color: #ffb98a; }.warning-callout code { color: #e8c4ab; }
.lesson-code { margin: 20px 0 28px; background: #0c0f16; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.lesson-code-head { height: 42px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); color: #686f7e; font: 9px var(--mono); }.copy-button { background: transparent; color: #777e8e; border: 0; font: 10px var(--mono); cursor: pointer; }.copy-button:hover { color: #c5b5ff; }
.lesson-code pre { padding: 24px; color: #c8cdd8; font: 12px/1.9 var(--mono); }
.key-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.key-points > div { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }.key-points > div > span { color: #765ad7; font: 9px var(--mono); padding-top: 3px; }.key-points p { margin: 0; }.key-points b { display: block; font-size: 12px; margin-bottom: 7px; }.key-points small { display: block; color: #777d8d; line-height: 1.6; font-size: 10px; }.key-points code { color: #b3a2ed; }
.type-table { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 27px 0; }.table-row { display: grid; grid-template-columns: .7fr 1fr 1.4fr; min-height: 50px; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--line); color: #949aaa; font-size: 12px; }.table-row:last-child { border: 0; }.table-row code { color: #beaaff; }.table-head { color: #666d7e; font: 9px var(--mono); background: rgba(255,255,255,.02); }
.complete-button { margin-top: 28px; padding: 11px 17px; color: #7d8494; border: 1px solid var(--line); border-radius: 7px; background: transparent; font-size: 11px; cursor: pointer; transition: .22s; }.complete-button span { margin-right: 6px; }.complete-button:hover { color: white; border-color: rgba(147,107,255,.4); }.complete-button.completed { color: #7fe0aa; background: rgba(91,207,141,.07); border-color: rgba(91,207,141,.25); }
.chapter-finish { text-align: center; padding: 35px; border: 1px solid rgba(141,98,255,.18); background: radial-gradient(circle, rgba(141,98,255,.09), transparent 70%); border-radius: 10px; }.chapter-finish > span { color: var(--purple-2); font-size: 25px; }.chapter-finish h3 { margin: 10px 0 7px; }.chapter-finish p { margin: 0; color: #7d8392; font-size: 12px; }

/* Beginner course components */
.cpp-only-header .main-nav { height: 100%; }
.beginner-hero { min-height: 355px; }
.beginner-hero > div:first-child { max-width: 790px; }
.beginner-hero p { max-width: 720px; line-height: 1.8; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.hero-badges span { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; color: #7f8595; font: 9px var(--mono); background: rgba(255,255,255,.02); }
.cpp-sidebar-course { margin-bottom:17px;padding:17px 15px 15px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.33); }
.cpp-sidebar-course>span { color:#7258bb;font:8px var(--mono);letter-spacing:.09em; }
.cpp-sidebar-course h2 { margin:8px 0 15px;color:#273149;font-size:17px;line-height:1.35;letter-spacing:-.025em; }
.cpp-sidebar-course>div:not(.side-progress) { display:flex;align-items:center;justify-content:space-between;color:#647086;font-size:9px; }
.cpp-sidebar-course>div b { color:#684fb4;font:10px var(--mono); }
.cpp-sidebar-course .side-progress { margin:9px 0 10px;background:#d2d8e2; }
.cpp-sidebar-course p { margin:0;color:#778296;font-size:8px;line-height:1.65; }
.cpp-overview-badges { display:flex;flex-wrap:wrap;gap:8px;margin:0 0 35px; }
.cpp-overview-badges span { padding:7px 11px;border:1px solid rgba(102,79,181,.15);border-radius:99px;color:#6953b1;background:#e5e0f1;font:9px var(--mono); }
.cpp-overview-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
.cpp-overview-grid article { min-height:205px;padding:25px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#f5f7fa; }
.cpp-overview-grid article>b { color:#765cc1;font:11px var(--mono); }
.cpp-overview-grid h3 { margin:33px 0 10px;font-size:18px; }
.cpp-overview-grid p { margin:0;color:#5b687d;font-size:11px;line-height:1.8; }
.cpp-overview-start { display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:25px;padding:27px 29px;border-radius:14px;background:linear-gradient(115deg,#e5e0f1,#e3ebf3); }
.cpp-overview-start>div>span { color:#6f57b9;font:8px var(--mono);letter-spacing:.12em; }
.cpp-overview-start h3 { margin:8px 0 5px;font-size:20px; }
.cpp-overview-start p { margin:0;color:#5b687d;font-size:10px;line-height:1.7; }
.cpp-overview-start>a { flex:0 0 auto;display:inline-flex;align-items:center;gap:24px;padding:13px 16px;border-radius:8px;color:white;background:#6d52bd;font-size:10px;font-weight:700;box-shadow:0 10px 23px rgba(91,69,171,.18);transition:.22s; }
.cpp-overview-start>a:hover { transform:translateY(-2px);background:#6045b0; }
.docs-content code { font-family: var(--mono); }
.lesson p strong { color: #d9dce5; font-weight: 600; }
.lesson > p code, .syntax-note code, .setup-card code, .compare-box code, .warning-callout code, .info-callout code { color: #c4b2ff; background: rgba(141,98,255,.08); padding: 2px 5px; border-radius: 4px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0; }
.setup-card { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.setup-card.recommended { border-color: rgba(141,98,255,.3); background: linear-gradient(145deg, rgba(141,98,255,.08), rgba(255,255,255,.015)); }
.setup-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.setup-title h3 { margin: 0; font-size: 19px; }
.setup-title span { order: 2; color: #ad96f8; font: 8px var(--mono); padding: 5px 8px; border: 1px solid rgba(141,98,255,.22); border-radius: 99px; }
.setup-card > p { color: #898f9f; font-size: 12px; line-height: 1.75; min-height: 62px; }
.setup-card ol { margin: 20px 0 0; padding-left: 23px; color: #a5aab8; font-size: 11px; line-height: 1.8; }
.setup-card li { padding: 4px 0 4px 5px; }
.setup-link { display: inline-flex; margin-top: 16px; color: #ad96f8; font-size: 10px; transition: .2s; }
.setup-link:hover { color: white; transform: translateX(3px); }
kbd { padding: 2px 6px; border: 1px solid #343947; border-bottom-width: 2px; border-radius: 4px; color: #c4c8d2; background: #171b25; font: 9px var(--mono); }
.code-demo { display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: stretch; gap: 10px; margin: 20px 0 28px; }
.code-demo .lesson-code { margin: 0; }
.output-panel, .input-panel { border: 1px solid var(--line); border-radius: 9px; background: #0a0d13; overflow: hidden; }
.output-panel > div, .input-panel > span { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); color: #6e7585; font: 9px var(--mono); }
.output-panel i { width: 6px; height: 6px; border-radius: 50%; background: #67d995; box-shadow: 0 0 8px rgba(103,217,149,.6); }
.output-panel pre, .input-panel pre { padding: 22px 16px; color: #dce0e9; font: 11px/1.9 var(--mono); white-space: pre-wrap; }
.input-panel > span::before { content: ">"; color: var(--purple-2); }
.annotated-code .code-line { display: grid; grid-template-columns: 28px 1fr; }
.annotated-code .code-line > b { color: #3f4555; font-weight: 400; user-select: none; }
.explain-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0 28px; }
.explain-list > div { display: flex; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.012); }
.explain-list > div > b { color: #8166e5; font: 9px var(--mono); padding-top: 3px; }
.explain-list p { margin: 0; }
.explain-list strong, .explain-list span { display: block; }
.explain-list strong { font-size: 12px; margin-bottom: 7px; }
.explain-list span { color: #777e8e; font-size: 10px; line-height: 1.65; }
.explain-list.compact { grid-template-columns: repeat(3, 1fr); }
.syntax-note { display: flex; gap: 18px; align-items: flex-start; padding: 17px 19px; border: 1px solid var(--line); border-radius: 8px; margin: 25px 0; }
.syntax-note b { flex: 0 0 auto; font-size: 12px; }
.syntax-note span { color: #838999; font-size: 11px; line-height: 1.75; }
.compare-box { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 25px 0; }
.compare-box > div { padding: 18px; border-right: 1px solid var(--line); }
.compare-box > div:last-child { border: 0; }
.compare-box code, .compare-box span { display: block; }
.compare-box code { width: max-content; margin-bottom: 10px; }
.compare-box span { color: #7d8393; font-size: 10px; line-height: 1.65; }
.practice-box { position: relative; padding: 22px 24px; margin: 30px 0; border: 1px dashed rgba(70,217,232,.28); border-radius: 9px; background: rgba(70,217,232,.035); }
.practice-box > span { color: var(--cyan); font: 8px var(--mono); letter-spacing: .15em; }
.practice-box h3 { margin: 8px 0 6px; font-size: 15px; }
.practice-box p { margin: 0; color: #818798; font-size: 11px; line-height: 1.75; }
.io-example { display: grid; grid-template-columns: minmax(0, 1fr) 205px; gap: 10px; align-items: stretch; margin: 22px 0 28px; }
.io-example > .lesson-code { margin: 0; }
.io-panels { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.io-panels pre { padding: 11px 15px; }
.flow-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 25px 0; padding: 17px; border: 1px solid var(--line); border-radius: 9px; color: #9298a7; font: 9px var(--mono); }
.flow-row span { padding: 7px 9px; background: rgba(255,255,255,.025); border-radius: 5px; }
.flow-row i { color: #6954bf; font-style: normal; }
.operator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 28px 0; }
.operator-grid > div { padding: 18px; border: 1px solid var(--line); border-radius: 8px; }
.operator-grid code, .operator-grid b, .operator-grid span { display: block; }
.operator-grid code { color: #bca8fd; margin-bottom: 12px; }
.operator-grid b { font-size: 12px; margin-bottom: 6px; }
.operator-grid span { color: #777e8e; font-size: 10px; line-height: 1.6; }
.decision-demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 22px 0; }
.decision-demo > div { padding: 17px; border: 1px solid var(--line); border-radius: 8px; }
.decision-demo span, .decision-demo i, .decision-demo b { display: block; }
.decision-demo span { color: #bdaafa; font: 10px var(--mono); }
.decision-demo i { color: #6f7686; font-size: 9px; line-height: 1.6; margin: 9px 0; font-style: normal; }
.decision-demo b { font-size: 11px; }
.for-anatomy, .function-anatomy { padding: 25px; margin: 25px 0; border: 1px solid rgba(141,98,255,.22); border-radius: 10px; background: rgba(141,98,255,.045); overflow-x: auto; }
.for-anatomy > code, .function-anatomy > code { display: block; color: #d7dbe4; font-size: 15px; white-space: nowrap; text-align: center; }
.for-anatomy mark, .function-anatomy mark { color: inherit; background: rgba(141,98,255,.13); padding: 5px 7px; border-radius: 5px; }
.for-anatomy > div, .function-anatomy > div { display: flex; justify-content: center; gap: 32px; margin-top: 23px; color: #777e8e; font-size: 9px; }
.for-anatomy i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 6px; color: white; background: #6f4ed0; border-radius: 50%; font-style: normal; }
.trace-table { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin: 20px 0 28px; }
.trace-table > div { display: grid; grid-template-columns: .6fr .8fr 1fr 1.6fr; min-height: 42px; padding: 0 17px; align-items: center; border-bottom: 1px solid var(--line); color: #878d9c; font-size: 10px; }
.trace-table > div:last-child { border: 0; }
.trace-table .trace-head { color: #606777; background: rgba(255,255,255,.02); font: 8px var(--mono); }
.array-visual { margin: 27px 0; overflow-x: auto; }
.array-visual > div { min-width: 520px; display: grid; grid-template-columns: 70px repeat(5, 1fr); text-align: center; }
.array-visual span, .array-visual b, .array-visual i { padding: 13px; border: 1px solid var(--line); font-style: normal; }
.array-visual span { color: #626979; font: 9px var(--mono); border-color: transparent; }
.array-visual b { color: #6e7585; font: 9px var(--mono); background: rgba(255,255,255,.02); }
.array-visual i { color: #ccbfff; background: rgba(141,98,255,.055); }
.function-anatomy > .function-anatomy-grid { width: max-content; margin: 0 auto; display: grid; grid-template-columns: auto auto auto; align-items: start; gap: 8px; color: #777e8e; text-align: center; }
.function-anatomy-grid > div { display: grid; grid-template-rows: auto auto; justify-items: center; }
.function-anatomy-grid code { color: #d7dbe4; font-size: 15px; line-height: 30px; white-space: nowrap; }
.function-anatomy-grid code b { color: #f0f1f5; }
.function-anatomy-grid > div > span { margin-top: 17px; font-size: 9px; white-space: nowrap; }
.cpp-footer { margin-top: 0; }

.placeholder-page { background: radial-gradient(circle at 50% 40%, rgba(120,78,232,.14), transparent 30%); }.placeholder-copy { min-height: calc(100vh - var(--header-h)); max-width: 850px; margin: auto; padding: 100px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.placeholder-symbol { width: 90px; height: 90px; border-radius: 24px; display: grid; place-items: center; margin: 40px 0 25px; color: #bba8ff; font: 45px Georgia; border: 1px solid rgba(154,120,255,.25); background: rgba(143,97,255,.08); box-shadow: 0 0 55px rgba(121,78,229,.18); }.placeholder-copy h1 { font-size: clamp(42px, 6vw, 74px); line-height: 1.15; letter-spacing: -.055em; margin: 0 0 22px; }.placeholder-copy > p { color: #969cad; }.placeholder-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 25px 0 36px; }.placeholder-tags span { padding: 7px 12px; border: 1px solid var(--line); color: #767c8c; border-radius: 99px; font: 10px var(--mono); }
.roadmap-page { background: radial-gradient(circle at 10% 20%, rgba(65,202,216,.06), transparent 25%); }.roadmap-wrap { max-width: 1180px; margin: auto; padding: 105px 35px 130px; }.roadmap-wrap .section-heading h1 { font-size: clamp(43px,6vw,72px); }.timeline { margin-top: 75px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }.timeline article { position: relative; padding: 42px 28px 25px 0; }.timeline article::before { content:""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #3e4350; top: -5px; left: 0; border: 3px solid var(--bg); }.timeline article.current::before { background: var(--purple); box-shadow: 0 0 15px var(--purple); }.timeline article > span { color: #414754; font: 31px var(--mono); }.timeline small { display: block; margin-top: 24px; color: #7861d0; font: 9px var(--mono); }.timeline h3 { margin: 9px 0; font-size: 17px; }.timeline p { color: #747a89; line-height: 1.7; font-size: 12px; max-width: 210px; }

footer { min-height: 145px; padding: 30px clamp(24px,7vw,110px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; border-top: 1px solid var(--line); color: #626878; font-size: 11px; } footer > span { justify-self: end; font-family: var(--mono); } footer p { text-align: center; }
.site-footer-copy{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}.site-icp{color:inherit;text-decoration:none;font-family:var(--mono);transition:color .2s ease}.site-icp:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; transform: translate(-50%, 25px); opacity: 0; padding: 11px 18px; color: #11151a; background: #f1f3f8; border-radius: 8px; font-size: 12px; transition: .25s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%,0); }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }.delay-1 { transition-delay: .12s; }.delay-2 { transition-delay: .24s; }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; padding-top: 80px; }.hero-copy { max-width: 750px; }.code-card { max-width: 650px; width: 100%; transform: none; }.feature-grid { grid-template-columns: 1fr 1fr; }.feature-card:last-child { grid-column: 1 / -1; }
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 38px; }.key-points { grid-template-columns: 1fr; }.timeline { grid-template-columns: 1fr 1fr; }.timeline article:nth-child(3) { border-top: 1px solid var(--line); }.timeline article:nth-child(4) { border-top: 1px solid var(--line); }
  .choice-grid { grid-template-columns: 1fr; }.setup-card > p { min-height: auto; }
  .code-demo, .io-example { grid-template-columns: 1fr; }.io-panels { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .explain-list.compact { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --header-h: 64px; }.site-header { padding: 0 19px; grid-template-columns: 1fr auto; }.header-cta { display: none; }.menu-toggle { display: block; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto; height: auto; padding: 18px; flex-direction: column; background: rgba(8,10,16,.97); border-bottom: 1px solid var(--line); transform: translateY(-120%); opacity: 0; transition: .3s; }.main-nav.open { transform: none; opacity: 1; }.nav-link { min-height: 48px; border-radius: 8px; justify-content: start; padding: 0 15px; }.nav-link.active { background: rgba(255,255,255,.04); }.nav-link::after { display: none; }
  .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { padding: 67px 21px; min-height: auto; }.hero h1 { font-size: 46px; }.hero-lead { font-size: 14px; }.hero-actions { align-items: stretch; flex-direction: column; }.hero-meta { flex-direction: column; gap: 8px; }.code-card { margin-top: 12px; }.code-body { font-size: 10px; min-height: auto; }.code-card-bottom { gap: 10px; justify-content: space-between; }
  .section { padding: 80px 21px; }.feature-grid { grid-template-columns: 1fr; margin-top: 42px; }.feature-card:last-child { grid-column: auto; }.quote-strip { flex-wrap: wrap; padding: 40px 20px; gap: 10px; }.quote-strip p { width: 100%; text-align: center; font-size: 13px; }.quote-mark { display: none; }
  .docs-hero { padding: 55px 21px 38px; display: block; }.docs-hero p { line-height: 1.7; }.progress-card { width: 100%; margin-top: 30px; }.docs-layout { display: block; padding: 25px 20px 90px; }.docs-sidebar { position: fixed; z-index: 31; inset: var(--header-h) auto 0 0; width: min(320px, 88vw); padding: 20px 18px 24px; background: #0d1017; transform: translateX(-105%); transition: .3s; box-shadow: 20px 0 60px rgba(0,0,0,.5); overflow-y: auto; }.sidebar-open .docs-sidebar { transform: none; }.sidebar-open .docs-layout::after { content:""; position: fixed; z-index: 30; inset: var(--header-h) 0 0; background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }.sidebar-close { display: block; color: #888e9d; background: transparent; border: 0; font-size: 25px; }.catalog-trigger { position: static; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; background: rgba(20,24,35,.92); border: 1px solid var(--line); border-radius: 7px; backdrop-filter: blur(12px); }.catalog-trigger svg { width: 15px; }.lesson { padding-top: 55px; }.lesson-code pre { font-size: 10px; padding: 18px; }.type-table { overflow-x: auto; }.table-row { min-width: 550px; }.info-callout { align-items: flex-start; }
  .roadmap-wrap { padding: 80px 21px; }.timeline { grid-template-columns: 1fr; margin-left: 8px; border-top: 0; border-left: 1px solid var(--line); }.timeline article { padding: 5px 20px 45px 35px; }.timeline article::before { top: 5px; left: -7px; }.timeline article:nth-child(3), .timeline article:nth-child(4) { border-top: 0; }.timeline small { margin-top: 12px; }
  footer { grid-template-columns: 1fr; text-align: center; padding: 45px 20px; } footer .brand, footer > span { justify-self: center; } footer p { margin: 0; }
  .beginner-hero { min-height: auto; }.hero-badges { margin-bottom: 4px; }
  .choice-grid, .explain-list, .operator-grid, .decision-demo, .compare-box { grid-template-columns: 1fr; }
  .compare-box > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .compare-box > div:last-child { border-bottom: 0; }
  .io-panels { grid-template-columns: 1fr; }
  .syntax-note { flex-direction: column; gap: 9px; }
  .for-anatomy > div { min-width: 530px; justify-content: flex-start; }.function-anatomy { padding-inline: 15px; }
  .flow-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }

/* Fresh light learning theme */
.light-theme {
  --bg: #f7f9fd;
  --surface: #ffffff;
  --surface-2: #f0f3fa;
  --line: rgba(34, 48, 78, .10);
  --text: #172039;
  --muted: #68738c;
  background: var(--bg);
  color: var(--text);
}
.light-theme .noise { opacity: .018; }
.light-theme .site-header { background: rgba(255,255,255,.84); border-bottom-color: rgba(32,47,77,.09); box-shadow: 0 5px 25px rgba(52,69,103,.035); }
.light-theme .brand { color: #19223b; }
.light-theme .nav-link { color: #6c768c; }
.light-theme .nav-link:hover, .light-theme .nav-link.active { color: #172039; }
.light-theme .header-cta { color: #4e3aa4; background: #f7f4ff; border-color: rgba(112,78,211,.18); }
.light-theme .header-cta:hover { color: white; background: #7151d7; border-color: #7151d7; }
.light-theme .menu-toggle span { background: #202942; }
.light-theme footer { color: #7f899e; background: white; }
.light-theme .button-primary { color: white; background: linear-gradient(120deg, #7555d9, #5f7de5); box-shadow: 0 12px 30px rgba(101,86,208,.22); }
.light-theme .button-ghost { color: #58637c; background: white; border-color: rgba(37,51,80,.12); box-shadow: 0 8px 20px rgba(42,55,85,.04); }
.light-theme .button-ghost:hover { color: #513baf; border-color: rgba(112,78,211,.25); background: #faf9ff; }
.light-theme .eyebrow { color: #7e88a0; }

/* Home */
.home-page { background: linear-gradient(180deg, #fbfcff 0%, #f5f8ff 52%, #ffffff 100%); }
.fresh-hero { position: relative; min-height: calc(100vh - var(--header-h)); padding: 75px clamp(24px,7vw,110px); display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(50px,8vw,120px); overflow: hidden; }
.fresh-hero::before { content:""; position:absolute; width:650px; height:650px; right:-130px; top:-180px; border-radius:50%; background: radial-gradient(circle, rgba(129,111,235,.13), rgba(95,174,234,.04) 47%, transparent 70%); }
.fresh-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(rgba(101,116,151,.14) .7px, transparent .7px); background-size: 22px 22px; mask-image: linear-gradient(to right, transparent 2%, black 42%, transparent 95%); opacity:.28; }
.fresh-hero-copy, .learning-visual { position:relative; z-index:1; }
.fresh-hero h1 { max-width: 760px; margin: 25px 0 24px; font-size: clamp(48px,5.7vw,82px); line-height:1.13; letter-spacing:-.06em; color:#172039; }
.fresh-hero h1 span { color: transparent; background: linear-gradient(100deg,#7352d4,#507fdc); background-clip:text; -webkit-background-clip:text; }
.fresh-hero-copy > p { max-width: 650px; color:#68738a; line-height:1.95; font-size:15px; }
.fresh-stats { display:flex; gap:0; margin-top:38px; }
.fresh-stats > div { min-width:112px; padding-right:28px; margin-right:28px; border-right:1px solid var(--line); }
.fresh-stats > div:last-child { border:0; }
.fresh-stats b,.fresh-stats span { display:block; }
.fresh-stats b { color:#28324d; font:500 22px var(--mono); }
.fresh-stats span { color:#8b94a7; margin-top:5px; font-size:10px; }
.learning-visual { min-height: 470px; display:grid; place-items:center; }
.visual-glow { position:absolute; width:390px; height:390px; border-radius:50%; background:linear-gradient(140deg,rgba(117,83,217,.19),rgba(72,168,220,.10)); filter:blur(1px); }
.visual-glow::before,.visual-glow::after { content:""; position:absolute; inset:32px; border:1px solid rgba(111,94,199,.14); border-radius:50%; }.visual-glow::after { inset:78px; border-style:dashed; animation:spin 24s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.visual-card { position:relative; width:min(440px,90%); border:1px solid rgba(33,46,73,.11); border-radius:16px; background:rgba(255,255,255,.94); box-shadow:0 32px 75px rgba(54,68,106,.17); overflow:hidden; transform:rotate(-1.5deg); }
.mini-top { height:48px; display:flex; align-items:center; gap:6px; padding:0 17px; border-bottom:1px solid rgba(32,47,77,.08); }
.mini-top > span { width:7px; height:7px; border-radius:50%; background:#ff7e82; }.mini-top > span:nth-child(2){background:#f0c35b}.mini-top > span:nth-child(3){background:#62d59a}.mini-top b{margin-left:auto;color:#9199aa;font:9px var(--mono);font-weight:400}
.visual-card pre { padding:35px; color:#38425c; background:#fbfcff; font:12px/2 var(--mono); }.visual-card pre i{color:#8d59b5;font-style:normal}.visual-card pre em{color:#2b9a6b;font-style:normal}
.accepted-line { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; border-top:1px solid rgba(32,47,77,.08); font:9px var(--mono); }.accepted-line span{color:#28a86e}.accepted-line b{color:#8d96a9;font-weight:400}
.float-chip { position:absolute; display:flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid rgba(41,55,85,.10); border-radius:10px; background:rgba(255,255,255,.94); color:#59637b; box-shadow:0 14px 34px rgba(51,66,102,.12); font-size:10px; animation:floaty 4s ease-in-out infinite; }
.float-chip span { display:grid; place-items:center; width:21px; height:21px; border-radius:6px; color:white; background:#8060da; font:8px var(--mono); }.float-chip b{color:#5f49bd}.chip-one{left:0;top:82px}.chip-two{right:-10px;bottom:93px;animation-delay:-1.4s}.chip-two span{background:#4c9ccf}.chip-three{left:40px;bottom:40px;animation-delay:-2.7s}
@keyframes floaty { 50% { transform:translateY(-9px); } }
.home-section { padding:110px clamp(24px,7vw,110px); background:white; border-top:1px solid var(--line); }
.home-section-title { max-width:750px; }
.home-section-title > span { color:#7459ca; font:10px var(--mono); letter-spacing:.15em; text-transform:uppercase; }
.home-section-title h2,.home-section-title h1 { margin:17px 0; color:#19223b; font-size:clamp(36px,4vw,56px); line-height:1.25; letter-spacing:-.045em; }
.home-section-title p { color:#7a849a; line-height:1.8; }
.fresh-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:58px; }
.fresh-feature-grid article { min-height:330px; padding:30px; border:1px solid rgba(36,51,81,.09); border-radius:15px; background:#fff; box-shadow:0 16px 40px rgba(44,60,94,.05); transition:.3s; }
.fresh-feature-grid article:hover { transform:translateY(-6px); border-color:rgba(109,82,202,.23); box-shadow:0 22px 48px rgba(57,70,107,.10); }
.fresh-icon { width:50px;height:50px;display:grid;place-items:center;border-radius:12px;margin-bottom:27px; }.fresh-icon svg{width:22px}.fresh-icon.violet{color:#7657cf;background:#f1edff}.fresh-icon.blue{color:#438bbd;background:#e9f6ff}.fresh-icon.green{color:#35966c;background:#e9f8f1}
.fresh-feature-grid small { color:#a0a8b8; font:8px var(--mono); letter-spacing:.12em; }.fresh-feature-grid h3{color:#202943;font-size:19px;margin:10px 0}.fresh-feature-grid p{min-height:72px;color:#7a8498;font-size:12px;line-height:1.8}.fresh-feature-grid a{display:flex;justify-content:space-between;margin-top:27px;color:#6650bd;font-size:11px}.fresh-feature-grid a span{transition:.25s}.fresh-feature-grid article:hover a span{transform:translateX(4px)}
.quote-carousel { position:relative; min-height:410px; padding:80px clamp(24px,9vw,145px); display:grid; grid-template-columns:130px 1fr 100px; align-items:center; gap:25px; overflow:hidden; color:white; background:linear-gradient(120deg,#5c50a8 0%,#6878c9 52%,#4d92bb 100%); }
.quote-carousel::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 82% 15%,rgba(255,255,255,.18),transparent 25%),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:auto,54px 54px; }
.quote-decoration,.quote-stage,.quote-counter{position:relative;z-index:1}.quote-decoration{align-self:start;color:rgba(255,255,255,.17);font:190px/1 Georgia}.quote-label{font:9px var(--mono);letter-spacing:.18em;color:rgba(255,255,255,.62)}
.quote-stage blockquote{max-width:800px;min-height:105px;margin:25px 0 20px;font-size:clamp(24px,3vw,40px);line-height:1.5;font-weight:700;letter-spacing:-.025em;transition:.22s}.quote-stage cite{color:rgba(255,255,255,.7);font:11px var(--mono);font-style:normal;transition:.22s}.quote-stage .changing{opacity:0;transform:translateY(6px)}
.quote-dots{display:flex;gap:7px;margin-top:35px}.quote-dots button{width:19px;height:3px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.25);cursor:pointer;transition:.25s}.quote-dots button.active{width:38px;background:white}.quote-counter{display:flex;align-items:baseline;gap:7px;align-self:end;justify-self:end;font-family:var(--mono)}.quote-counter b{font-size:25px}.quote-counter span,.quote-counter em{color:rgba(255,255,255,.45);font-size:10px;font-style:normal}

/* Light docs */
.light-theme .cpp-page { background:#f8f9fd; }
.light-theme .docs-hero { background:linear-gradient(135deg,#f7f4ff,#f1f7ff); border-bottom-color:var(--line); }
.light-theme .docs-hero h1,.light-theme .lesson h2,.light-theme .lesson h3,.light-theme .sidebar-title { color:#19223b; }
.light-theme .docs-hero p,.light-theme .lesson-lead { color:#6e7890; }
.light-theme .progress-card { background:rgba(255,255,255,.75); box-shadow:0 12px 30px rgba(60,73,108,.06); }
.light-theme .progress-card > div:first-child { color:#727c91; }.light-theme .progress-card small{color:#929aad}
.light-theme .docs-layout { max-width:1420px; grid-template-columns:255px minmax(0,850px); }
.light-theme .docs-sidebar { background:#f8f9fd; }
.light-theme .doc-link { color:#737d91; }.light-theme .doc-link b{color:#a6adbb}.light-theme .doc-link:hover{color:#3f4961}.light-theme .doc-link.active{color:#513aa7}.light-theme .doc-link::before{background:linear-gradient(90deg,rgba(119,84,218,.11),transparent)}
.light-theme .sidebar-tip,.light-theme .setup-card,.light-theme .explain-list>div,.light-theme .operator-grid>div,.light-theme .decision-demo>div { background:white; box-shadow:0 8px 22px rgba(51,65,98,.035); }
.light-theme .sidebar-tip p,.light-theme .setup-card>p,.light-theme .explain-list span,.light-theme .operator-grid span,.light-theme .decision-demo i { color:#7d879b; }
.light-theme .lesson { border-bottom-color:rgba(34,48,78,.09); }
.light-theme .lesson > p:not(.lesson-lead) { color:#68738a; }
.light-theme .info-callout { background:#f5f1ff; }.light-theme .info-callout p,.light-theme .warning-callout p{color:#6f7990}.light-theme .warning-callout{background:#fff8f1}
.light-theme .key-points>div,.light-theme .syntax-note,.light-theme .compare-box,.light-theme .trace-table,.light-theme .type-table { background:white; }
.light-theme .key-points small,.light-theme .syntax-note span,.light-theme .compare-box span,.light-theme .table-row,.light-theme .trace-table>div { color:#737e93; }
.light-theme .table-head,.light-theme .trace-table .trace-head { color:#8b94a6;background:#f5f7fb; }
.light-theme .complete-button { color:#6d778c;background:white; }.light-theme .complete-button:hover{color:#573fb2;background:#faf8ff}.light-theme .complete-button.completed{color:#24865b;background:#edf9f3}
.light-theme .practice-box{background:#f1fbfc}.light-theme .practice-box p{color:#69778b}
.light-theme .flow-row{background:white;color:#6d778b}.light-theme .flow-row span{background:#f5f7fb}
.light-theme .for-anatomy,.light-theme .function-anatomy{background:#f6f3ff}.light-theme .for-anatomy>code,.light-theme .function-anatomy>code,.light-theme .function-anatomy-grid code{color:#313a54}.light-theme .function-anatomy-grid code b{color:#27314a}.light-theme .for-anatomy>div,.light-theme .function-anatomy>div{color:#69748a}
.light-theme .array-visual b{background:#f2f4f9;color:#747e91}.light-theme .array-visual i{background:#f3efff;color:#654db8}
.light-theme .chapter-finish{background:linear-gradient(135deg,#f5f1ff,#f1f7ff)}.light-theme .chapter-finish p{color:#707b91}
.light-theme .setup-title h3,.light-theme .explain-list strong,.light-theme .operator-grid b,.light-theme .decision-demo b,.light-theme .practice-box h3{color:#27314a}
.light-theme .output-panel,.light-theme .input-panel,.light-theme .lesson-code{box-shadow:0 12px 30px rgba(24,33,55,.10)}

/* Future sections */
.future-page,.methods-page { background:linear-gradient(145deg,#fbfcff,#f3f6fc); }
.future-wrap { min-height:calc(100vh - var(--header-h)); max-width:1200px; margin:auto; padding:105px 35px; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.future-copy{position:relative}.future-index{position:absolute;right:0;top:-55px;color:#e7eaf2;font:100px var(--mono);font-weight:500}.future-copy h1{font-size:clamp(52px,6vw,78px);letter-spacing:-.055em;margin:22px 0 18px;color:#1b243d}.future-copy>p{max-width:560px;color:#707b92;line-height:1.9}.future-chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}.future-chips span{padding:7px 11px;background:white;border:1px solid var(--line);border-radius:99px;color:#737e93;font-size:10px}.coming-badge{display:flex;align-items:center;gap:9px;color:#6e7990;font-size:11px}.coming-badge i{width:7px;height:7px;border-radius:50%;background:#52bf89;box-shadow:0 0 0 5px rgba(82,191,137,.12)}
.future-list{display:flex;flex-direction:column;gap:12px}.future-list article{display:grid;grid-template-columns:45px 1fr auto;gap:15px;align-items:center;padding:24px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.82);box-shadow:0 12px 30px rgba(51,65,98,.05)}.future-list article>b{color:#b4bbca;font:12px var(--mono)}.future-list small{color:#8a74d5;font:8px var(--mono)}.future-list h3{margin:5px 0;color:#263049;font-size:16px}.future-list p{margin:0;color:#8790a3;font-size:10px}.future-list article>span{color:#9aa2b2;font-size:9px;padding:5px 8px;background:#f4f5f8;border-radius:99px}.future-list article.ready{border-color:rgba(116,86,210,.2)}
.methods-wrap{max-width:1200px;margin:auto;padding:105px 35px 130px}.methods-wrap .home-section-title{max-width:850px}.methods-wrap .home-section-title h1{font-size:clamp(44px,5vw,68px)}.method-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:65px}.method-steps article{position:relative;min-height:330px;padding:27px;border:1px solid var(--line);border-radius:14px;background:white;box-shadow:0 14px 35px rgba(52,65,96,.05)}.method-steps article>b{position:absolute;right:25px;color:#d2d6df;font:10px var(--mono)}.method-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;color:#684dbd;background:#f0ecff;font-weight:700}.method-steps h3{font-size:17px;margin:27px 0 12px}.method-steps p{min-height:100px;color:#7b8599;font-size:11px;line-height:1.8}.method-steps span{display:block;padding-top:16px;border-top:1px solid var(--line);color:#8e78d0;font-size:9px}.method-callout{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:60px;padding:38px 42px;border-radius:16px;background:linear-gradient(110deg,#eee9ff,#edf5ff)}.method-callout span{color:#7463b1;font-size:10px}.method-callout h2{margin:7px 0 0;font-size:28px}

@media (max-width:1000px){
  .fresh-hero{grid-template-columns:1fr;padding-top:95px}.learning-visual{max-width:650px;width:100%;margin:auto}.fresh-feature-grid{grid-template-columns:1fr 1fr}.fresh-feature-grid article:last-child{grid-column:1/-1}.future-wrap{grid-template-columns:1fr;gap:55px}.method-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .light-theme .main-nav{background:rgba(255,255,255,.98)}.fresh-hero{padding:65px 21px}.fresh-hero h1{font-size:46px}.fresh-stats>div{min-width:auto;padding-right:16px;margin-right:16px}.learning-visual{min-height:390px}.visual-card{width:92%}.visual-card pre{padding:28px 20px;font-size:10px}.chip-one{left:-3px;top:58px}.chip-two{right:-3px;bottom:70px}.chip-three{left:10px;bottom:20px}.home-section{padding:80px 21px}.fresh-feature-grid{grid-template-columns:1fr}.fresh-feature-grid article:last-child{grid-column:auto}.quote-carousel{min-height:450px;padding:65px 25px;grid-template-columns:1fr}.quote-decoration{position:absolute;top:25px;right:25px;font-size:130px}.quote-counter{position:absolute;right:25px;bottom:28px}.quote-stage blockquote{min-height:150px;font-size:25px}.light-theme .docs-sidebar{background:#fff}.future-wrap,.methods-wrap{padding:80px 21px}.future-index{font-size:75px}.future-list article{padding:19px}.method-steps{grid-template-columns:1fr}.method-steps article{min-height:auto}.method-steps p{min-height:auto;margin-bottom:25px}.method-callout{align-items:flex-start;flex-direction:column;padding:30px 25px}
}

/* Softer background and stronger reading contrast */
.light-theme { --bg:#edf1f6; --surface:#f8fafc; --surface-2:#e8edf4; --text:#121b31; --muted:#4f5c73; background:#edf1f6; }
.light-theme .site-header { background:rgba(247,249,252,.92); }
.light-theme .nav-link { color:#4f5b70; font-weight:500; }
.light-theme .home-page { background:linear-gradient(180deg,#f2f5f9 0%,#eaf0f7 54%,#f2f5f9 100%); }
.light-theme .fresh-hero-copy>p,.light-theme .home-section-title p,.light-theme .future-copy>p { color:#536179; }
.light-theme .home-section { background:#e9eef4; }
.light-theme .fresh-feature-grid article,.light-theme .setup-card,.light-theme .sidebar-tip,.light-theme .explain-list>div,.light-theme .operator-grid>div,.light-theme .decision-demo>div { background:#f8fafc; }
.light-theme .fresh-feature-grid p,.light-theme .setup-card>p,.light-theme .explain-list span,.light-theme .operator-grid span,.light-theme .decision-demo i { color:#59667c; }
.light-theme .fresh-stats span,.light-theme .hero-badges span { color:#657187; }
.light-theme .cpp-page { background:#edf1f6; }
.light-theme .docs-hero { background:linear-gradient(135deg,#ebe9f6,#e7eef7); }
.light-theme .docs-hero p,.light-theme .lesson-lead,.light-theme .lesson>p:not(.lesson-lead) { color:#526078; }
.light-theme .docs-sidebar { background:#edf1f6; }
.light-theme .doc-link { color:#566278; }.light-theme .doc-link b{color:#778297}
.light-theme .info-callout p,.light-theme .warning-callout p,.light-theme .key-points small,.light-theme .syntax-note span,.light-theme .compare-box span,.light-theme .table-row,.light-theme .trace-table>div { color:#556278; }
.light-theme .future-page,.light-theme .contests-page { background:linear-gradient(145deg,#f0f3f7,#e8edf4); }

/* Contest guide */
.contests-page { color:#172039; }
.contests-hero { min-height:430px; padding:75px clamp(24px,7vw,110px) 65px; display:grid; grid-template-columns:1.15fr .85fr; gap:75px; align-items:end; background:linear-gradient(130deg,#e6e5f3 0%,#e5edf6 60%,#e3eff1 100%); border-bottom:1px solid rgba(34,48,78,.10); }
.contest-kicker { display:inline-block;margin-top:25px;color:#6653a8;font-size:11px;font-weight:600; }
.contests-hero h1 { margin:10px 0 17px;font-size:clamp(46px,5vw,70px);letter-spacing:-.055em; }
.contests-hero>div:first-child>p { max-width:700px;margin:0;color:#4f5d74;font-size:14px;line-height:1.9; }
.contest-hero-note { padding:25px;border:1px solid rgba(37,51,80,.11);border-radius:14px;background:rgba(248,250,252,.72);box-shadow:0 16px 35px rgba(54,67,96,.07); }
.contest-hero-note>b { color:#283249;font-size:13px; }.contest-hero-note>p{color:#56637a;font-size:11px;line-height:1.7;margin:7px 0 20px}.contest-hero-note>div{display:flex;align-items:center;flex-wrap:wrap;gap:7px;color:#5e6a7f;font:8px var(--mono)}.contest-hero-note i{color:#7559cb;font-style:normal}.contest-hero-note span{padding:6px 8px;border-radius:5px;background:#edf0f6}
.contest-content { max-width:1240px;margin:auto;padding:100px 35px 130px; }
.contest-section-title { max-width:760px; }.contest-section-title>span{color:#6751b7;font:9px var(--mono);letter-spacing:.13em;text-transform:uppercase}.contest-section-title h2{margin:14px 0 10px;font-size:clamp(32px,4vw,48px);letter-spacing:-.04em}.contest-section-title p{color:#56637a;line-height:1.8;font-size:12px}
.contest-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px; }
.contest-card { display:flex;flex-direction:column;min-height:410px;padding:27px;border:1px solid rgba(36,51,81,.11);border-radius:15px;background:#f8fafc;box-shadow:0 14px 34px rgba(48,62,94,.055);transition:.3s; }
.contest-card:hover{transform:translateY(-4px);border-color:rgba(107,79,198,.25);box-shadow:0 20px 42px rgba(48,62,94,.10)}.contest-card.featured{background:linear-gradient(145deg,#f5f1ff,#f5f8fc);border-color:rgba(107,79,198,.22)}.contest-card.wide{grid-column:1/-1;min-height:350px}
.contest-card-top{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:15px}.contest-logo{display:grid;place-items:center;width:60px;height:60px;border-radius:14px;color:white;font:700 12px var(--mono);box-shadow:0 9px 20px rgba(50,59,91,.13)}.contest-logo.icpc{background:linear-gradient(135deg,#7259c6,#5477c4)}.contest-logo.ccpc{background:linear-gradient(135deg,#d45e66,#e0925b)}.contest-logo.gplt{background:linear-gradient(135deg,#3c91a6,#4db48a)}.contest-logo.lanqiao{font-family:inherit;background:linear-gradient(135deg,#3580bf,#4ba9d0)}.contest-logo.baidu{background:linear-gradient(135deg,#4369d9,#765ad0)}
.contest-card-top small{color:#7d879a;font:7px var(--mono);letter-spacing:.1em}.contest-card-top h3{margin:5px 0 0;color:#202a43;font-size:16px}.contest-card-top>b{align-self:start;padding:5px 8px;border-radius:99px;color:#6650b4;background:#eeeafa;font-size:8px;font-weight:600}.contest-card>p{min-height:65px;margin:24px 0 18px;color:#526078;font-size:11px;line-height:1.8}
.contest-facts{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid rgba(34,48,78,.09);padding:15px 0}.contest-facts span{color:#707b8f;font-size:9px;text-align:center;border-right:1px solid rgba(34,48,78,.09)}.contest-facts span:last-child{border:0}.contest-facts b{display:block;color:#303a52;font-size:12px;margin-bottom:4px}
.contest-suitable{display:grid;grid-template-columns:55px 1fr;gap:10px;margin:18px 0;color:#56637a;font-size:10px;line-height:1.7}.contest-suitable b{color:#6650b4}.contest-card>a{margin-top:auto;color:#5942aa;font-size:10px;font-weight:600}.contest-card>a:hover{text-decoration:underline}
.contest-compare{margin-top:100px}.contest-table{margin-top:35px;border:1px solid rgba(34,48,78,.11);border-radius:13px;overflow:hidden;background:#f8fafc;box-shadow:0 12px 30px rgba(50,63,94,.045)}.contest-table>div{display:grid;grid-template-columns:1fr 1.2fr 1fr 2fr;min-height:58px;align-items:center;padding:0 22px;border-bottom:1px solid rgba(34,48,78,.09);color:#566379;font-size:11px}.contest-table>div:last-child{border:0}.contest-table .contest-table-head{min-height:46px;color:#707b90;background:#e7ebf1;font:8px var(--mono)}.contest-table b{color:#2b354d}
.contest-next{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:65px;padding:37px 40px;border:1px solid rgba(104,81,185,.13);border-radius:16px;background:linear-gradient(110deg,#e9e5f7,#e4edf6)}.contest-next span{color:#6854ad;font-size:10px}.contest-next h2{max-width:740px;margin:8px 0 0;font-size:24px;line-height:1.45}.contest-next .button{flex:0 0 auto}

@media(max-width:900px){.contests-hero{grid-template-columns:1fr;gap:40px}.contest-grid{grid-template-columns:1fr}.contest-card.wide{grid-column:auto}.contest-card>p{min-height:auto}}
@media(max-width:760px){.light-theme .home-section{background:#e9eef4}.light-theme .docs-sidebar{background:#f5f7fa}.contests-hero{padding:65px 21px 45px}.contest-content{padding:75px 21px 95px}.contest-card{padding:21px}.contest-card-top{grid-template-columns:55px 1fr}.contest-card-top>b{display:none}.contest-logo{width:52px;height:52px}.contest-facts{grid-template-columns:1fr;gap:0;padding:0}.contest-facts span{padding:11px;border-right:0;border-bottom:1px solid rgba(34,48,78,.09)}.contest-facts span:last-child{border:0}.contest-table{overflow-x:auto}.contest-table>div{min-width:700px}.contest-next{align-items:flex-start;flex-direction:column;padding:28px 24px}.contest-next h2{font-size:21px}}

/* Wider C++ reading layout */
.light-theme .docs-hero { padding-left:clamp(24px,4vw,64px);padding-right:clamp(24px,4vw,64px); }
.light-theme .beginner-hero>div:first-child { max-width:1050px; }
.light-theme .docs-layout { max-width:none;width:100%;grid-template-columns:245px minmax(0,1fr);justify-content:stretch;gap:38px;padding:55px clamp(24px,4vw,64px) 120px; }
.light-theme .docs-content { width:100%;max-width:none; }
.light-theme .lesson { width:100%; }
.light-theme .lesson-lead,.light-theme .lesson>p:not(.lesson-lead) { max-width:1050px; }
.light-theme .lesson-code pre { font-size:13px; }

/* Detailed contest sections */
.contest-deep-dive { margin-top:110px; }
.deep-contest { margin-top:38px;padding:34px;border:1px solid rgba(34,48,78,.11);border-radius:18px;background:#f8fafc;box-shadow:0 18px 45px rgba(47,60,91,.06); }
.deep-contest+.deep-contest { margin-top:24px; }
.deep-contest-heading { display:grid;grid-template-columns:72px 1fr auto;gap:18px;align-items:center;padding-bottom:27px;border-bottom:1px solid rgba(34,48,78,.09); }
.deep-contest-heading .contest-logo { width:68px;height:68px;font-size:14px; }
.deep-contest-heading small { color:#68748a;font:8px var(--mono);letter-spacing:.11em; }
.deep-contest-heading h3 { margin:6px 0 5px;font-size:24px;letter-spacing:-.025em; }
.deep-contest-heading p { margin:0;color:#536178;font-size:11px;line-height:1.7; }
.deep-contest-heading>a { align-self:start;color:#5842a4;font-size:10px;font-weight:600; }
.deep-overview { display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0;border:1px solid rgba(34,48,78,.09);border-radius:12px;background:#edf1f6;overflow:hidden; }
.deep-overview>div { padding:19px;text-align:center;border-right:1px solid rgba(34,48,78,.09); }.deep-overview>div:last-child{border:0}
.deep-overview b,.deep-overview span,.deep-overview small{display:block}.deep-overview b{color:#5e46af;font:600 22px var(--mono)}.deep-overview span{margin:5px 0;color:#2e3850;font-size:11px;font-weight:600}.deep-overview small{color:#69758a;font-size:8px}
.deep-columns { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.deep-columns>section { padding:23px;border:1px solid rgba(34,48,78,.09);border-radius:12px;background:#f2f5f8; }
.deep-columns section>span { color:#6650b3;font:8px var(--mono);letter-spacing:.08em; }
.deep-columns h4 { margin:10px 0 12px;color:#273149;font-size:16px; }
.deep-columns p { color:#536178;font-size:10px;line-height:1.85; }
.deep-columns ul { margin:15px 0 0;padding-left:18px;color:#536178;font-size:9px;line-height:1.9; }
.score-example { margin-top:17px;padding:15px;border-radius:9px;background:#e6eaf1; }
.score-example small,.score-example p,.score-example b,.score-example em{display:block}.score-example small{color:#745cc5;font:8px var(--mono)}.score-example p{margin:7px 0}.score-example b{color:#29334b;font:14px var(--mono)}.score-example em{margin-top:8px;color:#747f92;font-size:8px;font-style:normal}
.ccpc-deep { background:linear-gradient(145deg,#faf8f7,#f8fafc); }
.ccpc-route { display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:11px;margin:28px 0; }
.ccpc-route>div { padding:16px;border:1px solid rgba(34,48,78,.09);border-radius:10px;background:#f0f3f7; }
.ccpc-route b,.ccpc-route span,.ccpc-route small{display:block}.ccpc-route b{color:#bc6168;font:8px var(--mono)}.ccpc-route span{margin:6px 0;color:#303a51;font-size:11px;font-weight:600}.ccpc-route small{color:#707b8e;font-size:8px}.ccpc-route>i{color:#a0a8b7;font-style:normal}
.ranking-order { margin-top:15px;border:1px solid rgba(34,48,78,.09);border-radius:9px;overflow:hidden; }.ranking-order>div{display:grid;grid-template-columns:80px 1fr;padding:11px;border-bottom:1px solid rgba(34,48,78,.09);font-size:9px}.ranking-order>div:last-child{border:0}.ranking-order b{color:#bc6168}.ranking-order span{color:#59667b}
.other-contest-details { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px; }
.other-contest-details article { display:grid;grid-template-columns:58px 1fr;gap:16px;padding:24px;border:1px solid rgba(34,48,78,.10);border-radius:14px;background:#f8fafc; }
.other-contest-details .contest-logo { width:56px;height:56px; }
.other-contest-details small { color:#6b55b8;font:8px var(--mono); }.other-contest-details h3{margin:7px 0 10px;color:#283249;font-size:14px}.other-contest-details p{margin:0;color:#536178;font-size:9px;line-height:1.85}.other-contest-details b{display:block;margin-top:15px;color:#59667c;font-size:8px}

@media(max-width:1100px){.light-theme .docs-layout{grid-template-columns:235px minmax(0,1fr);gap:35px}.deep-columns,.other-contest-details{grid-template-columns:1fr}.deep-overview{grid-template-columns:1fr 1fr}.deep-overview>div:nth-child(2){border-right:0}.deep-overview>div:nth-child(-n+2){border-bottom:1px solid rgba(34,48,78,.09)}}
@media(max-width:760px){.light-theme .docs-layout{display:block;padding:25px 20px 90px}.light-theme .lesson-code pre{font-size:10px}.deep-contest{padding:22px}.deep-contest-heading{grid-template-columns:58px 1fr}.deep-contest-heading .contest-logo{width:56px;height:56px}.deep-contest-heading>a{grid-column:1/-1}.deep-overview{grid-template-columns:1fr 1fr}.ccpc-route{grid-template-columns:1fr}.ccpc-route>i{transform:rotate(90deg);text-align:center}.other-contest-details article{grid-template-columns:52px 1fr}}

/* More visible section colors */
.light-theme { --bg:#dfe5ee; --surface:#edf1f6; --surface-2:#d6dee9; background:#dfe5ee; }
.light-theme .site-header { background:rgba(238,242,247,.94); }
.light-theme .home-page { background:linear-gradient(145deg,#e7e4f2 0%,#dce7f1 48%,#e2e9f0 100%); }
.light-theme .fresh-hero::before { background:radial-gradient(circle,rgba(114,88,210,.22),rgba(66,148,204,.10) 48%,transparent 70%); }
.light-theme .visual-card { background:#e8edf4; }.light-theme .visual-card pre{background:#e3e9f1}.light-theme .float-chip{background:#e9edf4}
.light-theme .home-section { background:#d8e1eb; }
.light-theme .fresh-feature-grid article:nth-child(1) { background:#e4eadf; }
.light-theme .fresh-feature-grid article:nth-child(2) { background:#e8e2f3; }
.light-theme .fresh-feature-grid article:nth-child(3) { background:#dce8f2; }
.light-theme footer { background:#d4dde8; }
.light-theme .cpp-page { background:#dfe5ed; }.light-theme .docs-sidebar{background:#dfe5ed}.light-theme .docs-hero{background:linear-gradient(135deg,#ddd9eb,#d8e4ef)}
.light-theme .setup-card,.light-theme .sidebar-tip,.light-theme .explain-list>div,.light-theme .operator-grid>div,.light-theme .decision-demo>div,.light-theme .key-points>div,.light-theme .syntax-note,.light-theme .compare-box,.light-theme .trace-table,.light-theme .type-table { background:#edf1f6; }
.light-theme .future-page,.light-theme .contests-page { background:linear-gradient(145deg,#e3e7ee,#d9e1eb); }.contest-content{background:transparent}.contest-card,.deep-contest,.other-contest-details article,.contest-table{background:#edf1f6}.contest-card.featured{background:linear-gradient(145deg,#e7e1f2,#e8edf3)}

/* Practice platform section */
.platform-section { padding:105px clamp(24px,7vw,110px);background:linear-gradient(135deg,#cfd9e6,#d8d5e8);border-top:1px solid rgba(34,48,78,.10); }
.platform-heading { display:grid;grid-template-columns:1fr 330px;gap:70px;align-items:end; }
.platform-heading>div:first-child>span { color:#5d48aa;font:9px var(--mono);letter-spacing:.16em; }
.platform-heading h2 { margin:15px 0 12px;color:#172039;font-size:clamp(34px,4vw,52px);letter-spacing:-.045em; }
.platform-heading>div:first-child>p { max-width:720px;margin:0;color:#4d5c74;font-size:12px;line-height:1.8; }
.platform-tip { padding:20px;border:1px solid rgba(34,48,78,.11);border-radius:12px;background:rgba(232,237,244,.72); }
.platform-tip b{color:#29344d;font-size:11px}.platform-tip p{margin:7px 0 0;color:#536178;font-size:9px;line-height:1.7}
.platform-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:50px; }
.platform-card { position:relative;display:grid;grid-template-columns:52px 1fr auto;align-items:center;min-height:315px;padding:25px;border:1px solid rgba(34,48,78,.12);border-radius:15px;color:#1d2740;box-shadow:0 14px 32px rgba(47,60,91,.07);transition:.3s;overflow:hidden; }
.platform-card::after{content:"";position:absolute;width:180px;height:180px;right:-90px;bottom:-100px;border-radius:50%;background:rgba(255,255,255,.20)}.platform-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(47,60,91,.13)}
.platform-card.luogu{background:#e2e7ef}.platform-card.nowcoder{background:#dcece7}.platform-card.codeforces{background:#e6e2f0}.platform-card.atcoder{background:#e8e5df}
.platform-logo { display:grid;place-items:center;width:46px;height:46px;border-radius:12px;color:white;font:700 12px var(--mono);box-shadow:0 8px 20px rgba(42,53,82,.15) }.luogu .platform-logo{background:linear-gradient(135deg,#4f83bc,#62a3d1)}.nowcoder .platform-logo{background:linear-gradient(135deg,#35a77a,#5bbe92)}.codeforces .platform-logo{background:linear-gradient(135deg,#596fc8,#8a5db8)}.atcoder .platform-logo{background:linear-gradient(135deg,#4f5564,#777e8c)}
.platform-card-title small{color:#68748a;font:7px var(--mono);letter-spacing:.12em}.platform-card-title h3{margin:4px 0 0;font-size:18px}.platform-arrow{color:#5c4aa5;font-size:17px}.platform-card>p{grid-column:1/-1;align-self:start;min-height:82px;margin:25px 0 15px;color:#4f5d74;font-size:10px;line-height:1.8}.platform-card>div:nth-of-type(3){grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}.platform-card>div:nth-of-type(3) span{padding:5px 7px;border:1px solid rgba(34,48,78,.10);border-radius:99px;color:#5d697e;background:rgba(238,242,247,.55);font-size:8px}.platform-card>b{grid-column:1/-1;align-self:end;margin-top:20px;padding-top:15px;border-top:1px solid rgba(34,48,78,.10);color:#5e4ca5;font-size:8px;font-weight:600}
.platform-advice { display:grid;grid-template-columns:85px 1fr;gap:18px;margin-top:25px;padding:20px 23px;border-radius:12px;background:rgba(232,237,244,.68);border:1px solid rgba(34,48,78,.10); }.platform-advice span{color:#5f4bab;font-size:10px;font-weight:700}.platform-advice p{margin:0;color:#4d5b72;font-size:10px;line-height:1.8}
@media(max-width:1100px){.platform-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.light-theme .docs-sidebar{background:#e7ebf1}.platform-section{padding:75px 21px}.platform-heading{grid-template-columns:1fr;gap:28px}.platform-grid{grid-template-columns:1fr}.platform-card{min-height:290px}.platform-advice{grid-template-columns:1fr}}

/* Email login and registration */
.header-cta { cursor:pointer; }
body.auth-open { overflow:hidden; }
.auth-modal { position:fixed;z-index:80;inset:0;display:grid;place-items:center;padding:22px;visibility:hidden;opacity:0;transition:.25s; }
.auth-modal.open { visibility:visible;opacity:1; }
.auth-backdrop { position:absolute;inset:0;background:rgba(25,32,52,.48);backdrop-filter:blur(8px); }
.auth-card { position:relative;width:min(440px,100%);max-height:calc(100vh - 44px);padding:30px;border:1px solid rgba(38,50,79,.13);border-radius:19px;background:#edf1f6;box-shadow:0 32px 90px rgba(28,36,58,.28);overflow-y:auto;transform:translateY(12px) scale(.98);transition:.25s; }
.auth-modal.open .auth-card { transform:none; }
.auth-close { position:absolute;right:17px;top:15px;width:34px;height:34px;border:0;border-radius:9px;background:#dfe5ed;color:#566176;font-size:23px;line-height:1;cursor:pointer;transition:.2s; }.auth-close:hover{color:#2b344b;background:#d5dde8}
.auth-brand { display:flex;align-items:center;gap:12px;padding-right:40px; }.auth-brand>div b,.auth-brand>div small{display:block}.auth-brand>div b{color:#1f2942;font-size:14px}.auth-brand>div small{margin-top:3px;color:#6c778c;font-size:9px}
.auth-tabs { display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:26px 0 24px;padding:4px;border-radius:10px;background:#dce3ec; }
.auth-tabs button { min-height:38px;border:0;border-radius:7px;color:#667187;background:transparent;font-size:11px;font-weight:600;cursor:pointer;transition:.2s; }.auth-tabs button.active{color:#4f38a3;background:#f5f7fa;box-shadow:0 5px 14px rgba(47,60,91,.08)}
.auth-heading h2 { margin:0;color:#1d263f;font-size:25px;letter-spacing:-.025em; }.auth-heading p{margin:7px 0 21px;color:#667187;font-size:10px}
.auth-form { display:flex;flex-direction:column;gap:15px; }
.auth-form>label { display:flex;flex-direction:column;gap:7px; }.auth-form>label>span{color:#3e4960;font-size:10px;font-weight:600}
.auth-form input[type="email"],.auth-form input[type="password"],.auth-form input[type="text"] { width:100%;height:45px;padding:0 13px;border:1px solid rgba(38,50,79,.14);border-radius:9px;outline:0;color:#1e2840;background:#e4e9f0;font:11px var(--mono);transition:.2s; }
.auth-form input::placeholder{color:#8a94a7}.auth-form input:focus{border-color:#7558cd;background:#eef1f6;box-shadow:0 0 0 3px rgba(117,88,205,.11)}.auth-form input.invalid{border-color:#ca606b;box-shadow:0 0 0 3px rgba(202,96,107,.10)}
.verification-input{display:grid;grid-template-columns:minmax(0,1fr) 105px;gap:8px}.verification-input .send-code-button{border:1px solid rgba(112,78,211,.18);border-radius:9px;color:#6049ad;background:#e8e3f3;font-size:9px;font-weight:600;cursor:pointer}.verification-input .send-code-button:hover:not(:disabled){background:#ddd5ed}.verification-input .send-code-button:disabled{opacity:.58;cursor:wait}
.register-only { display:none !important; }.auth-modal.register-mode .register-only{display:flex !important}.auth-modal.register-mode .auth-options{display:none}
.auth-options { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:-2px; }.auth-options>label{display:flex;align-items:center;gap:7px;color:#69758a;font-size:9px;cursor:pointer}.auth-options input{accent-color:#7151c8}.forgot-password{padding:0;border:0;color:#624bb3;background:transparent;font-size:9px;cursor:pointer}
.auth-submit { min-height:46px;margin-top:2px;border:0;border-radius:9px;color:white;background:linear-gradient(120deg,#7355d0,#5d7ed8);box-shadow:0 10px 24px rgba(96,78,190,.22);font-size:11px;font-weight:700;cursor:pointer;transition:.2s; }.auth-submit:hover{transform:translateY(-1px);box-shadow:0 13px 28px rgba(96,78,190,.30)}
.auth-submit:disabled{opacity:.65;cursor:wait;transform:none}.auth-logout-hint{padding-left:7px;border-left:1px solid currentColor;opacity:.65;font-size:9px}
.auth-status { display:none;padding:11px 13px;border:1px solid rgba(53,151,105,.20);border-radius:8px;color:#317756;background:#deeee6;font-size:9px;line-height:1.6; }.auth-status.show{display:block}.auth-status.error{color:#9c4852;border-color:rgba(190,78,91,.20);background:#f0dfe2}
.auth-notice { display:flex;align-items:flex-start;gap:8px;margin:20px 0 0;padding-top:17px;border-top:1px solid rgba(38,50,79,.10);color:#6d788c;font-size:8px;line-height:1.65; }.auth-notice>span{flex:0 0 auto;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;color:white;background:#7c68bc;font:9px Georgia}
@media(max-width:760px){.auth-card{padding:25px 20px}.auth-modal{padding:12px}}

/* Split login: association members and external-school users */
.auth-card{width:min(570px,100%)}
.auth-main-heading{margin-top:25px}.auth-main-heading p{margin-bottom:16px}
.auth-audience-tabs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:23px}
.auth-audience-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:70px;padding:14px 16px;border:1px solid rgba(38,50,79,.11);border-radius:11px;color:#68748a;background:#e2e7ee;text-align:left;cursor:pointer;transition:.2s}
.auth-audience-tabs button:hover{transform:translateY(-1px);border-color:rgba(112,78,211,.25)}
.auth-audience-tabs button.active{color:#4f38a3;border-color:rgba(112,78,211,.28);background:linear-gradient(135deg,#eeeafa,#e6edf5);box-shadow:0 8px 20px rgba(60,49,113,.08)}
.auth-audience-tabs b{font-size:11px}.auth-audience-tabs span{font-size:8px;opacity:.76}
.auth-panel{display:none}.auth-panel.active{display:block}.auth-panel[hidden]{display:none!important}
.auth-section-copy{margin-bottom:17px}.auth-section-copy>span{color:#7057bf;font:700 7px var(--mono);letter-spacing:.15em}.auth-section-copy h3{margin:6px 0 4px;color:#202a42;font-size:18px}.auth-section-copy p{margin:0;color:#738095;font-size:9px}
.auth-method-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:18px;padding:4px;border-radius:9px;background:#dce3ec}
.auth-method-tabs button{min-height:35px;border:0;border-radius:7px;color:#68748a;background:transparent;font-size:9px;font-weight:600;cursor:pointer}.auth-method-tabs button.active{color:#513aa4;background:#f5f7fa;box-shadow:0 4px 12px rgba(47,60,91,.08)}
.local-register-only{display:none!important}.local-auth-form.register-mode .local-register-only{display:flex!important}
.association-send-code,.local-send-code{border:1px solid rgba(112,78,211,.18);border-radius:9px;color:#6049ad;background:#e8e3f3;font-size:9px;font-weight:600;cursor:pointer}.association-send-code:hover:not(:disabled),.local-send-code:hover:not(:disabled){background:#ddd5ed}.association-send-code:disabled,.local-send-code:disabled{opacity:.58;cursor:wait}
.association-send-code{display:none}.association-auth-form.code-mode .association-credential-row{grid-template-columns:minmax(0,1fr) 105px}.association-auth-form.code-mode .association-send-code{display:block}.association-auth-form:not(.code-mode) .association-credential-row{grid-template-columns:1fr}
.auth-options a{color:#624bb3;font-size:9px}.auth-options>span{color:#7a8496;font-size:8px}
.auth-panel .auth-notice{margin-top:18px}
@media(max-width:520px){.auth-audience-tabs{grid-template-columns:1fr}.auth-audience-tabs button{min-height:58px}.auth-main-heading h2{font-size:22px}}

/* Practice center */
.fresh-icon.orange { color:#a85f32;background:#f5e5d8; }
.light-theme .fresh-feature-grid { grid-template-columns:repeat(2,1fr); }
.light-theme .fresh-feature-grid article:last-child { background:#eee2d9; }
.practice-page { color:#172039;background:linear-gradient(145deg,#e6e2f0 0%,#dce7f0 45%,#e2e8ef 100%); }
.practice-hero { min-height:430px;padding:76px clamp(24px,6vw,90px) 62px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:75px;align-items:end;border-bottom:1px solid rgba(34,48,78,.10); }
.practice-hero h1 { margin:13px 0 16px;font-size:clamp(48px,5.5vw,76px);letter-spacing:-.06em; }
.practice-hero>div:first-child>p { max-width:760px;margin:0;color:#4f5d74;font-size:14px;line-height:1.9; }
.practice-hero-meta { display:flex;flex-wrap:wrap;gap:9px;margin-top:30px; }
.practice-hero-meta span { padding:8px 11px;border:1px solid rgba(42,55,84,.10);border-radius:7px;color:#69748a;background:rgba(248,250,252,.55);font-size:9px; }
.practice-hero-meta b { color:#6148b2;font:600 11px var(--mono); }
.practice-progress-card { padding:25px;border:1px solid rgba(42,55,84,.11);border-radius:15px;background:rgba(248,250,252,.74);box-shadow:0 18px 38px rgba(50,64,96,.07); }
.practice-progress-top { display:flex;justify-content:space-between;align-items:center;color:#59667b;font-size:11px; }
.practice-progress-top b { color:#624ab3;font:600 13px var(--mono); }
.practice-progress-track { height:6px;margin:17px 0 13px;border-radius:99px;background:#dce1e9;overflow:hidden; }
.practice-progress-track i { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7456cc,#4d92c3);transition:width .35s ease; }
.practice-progress-card p { margin:0;color:#768195;font-size:9px;line-height:1.6; }
.practice-tabs { max-width:1180px;margin:34px auto 0;padding:0 35px;display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.practice-tabs button { display:grid;grid-template-columns:43px 1fr;grid-template-rows:auto auto;column-gap:14px;text-align:left;padding:19px 22px;border:1px solid rgba(38,52,81,.11);border-radius:13px;color:#707b90;background:rgba(237,241,246,.7);cursor:pointer;transition:.25s; }
.practice-tabs button>span { grid-row:1/3;align-self:center;color:#9ba4b5;font:13px var(--mono); }
.practice-tabs button>b { color:#374157;font-size:14px; }.practice-tabs button>small{margin-top:3px;font-size:9px}
.practice-tabs button:hover,.practice-tabs button.active { transform:translateY(-2px);border-color:rgba(103,78,192,.25);background:#f3f1fa;box-shadow:0 12px 28px rgba(52,65,98,.07); }
.practice-tabs button.active>span,.practice-tabs button.active>b { color:#654db8; }
.practice-panel { animation:pageIn .35s ease both; }.practice-panel[hidden]{display:none}
.practice-layout { width:100%;max-width:none;margin:0;padding:45px clamp(20px,2.3vw,38px) 120px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;align-items:start; }
.practice-sidebar { position:sticky;top:calc(var(--header-h) + 28px);padding:25px 22px;border:1px solid rgba(36,50,78,.10);border-radius:14px;background:rgba(237,241,246,.76); }
.practice-sidebar-kicker { color:#6b54b8;font:8px var(--mono);letter-spacing:.12em; }
.practice-sidebar h2 { margin:9px 0 10px;font-size:21px; }.practice-sidebar>p{margin:0 0 20px;color:#59667b;font-size:11px;line-height:1.75}
.practice-sidebar nav { display:flex;flex-direction:column;gap:5px; }
.practice-sidebar nav button { display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;width:100%;padding:11px 10px;border:0;border-radius:8px;outline:0;color:#59667a;background:transparent;text-align:left;cursor:pointer;transition:.22s; }
.practice-sidebar nav button:hover,.practice-sidebar nav button.active { color:#523b9f;background:#e4e0f1;transform:none; }
.practice-sidebar nav button:focus-visible { box-shadow:0 0 0 3px rgba(104,80,192,.18); }
.practice-sidebar nav button b { color:#8a94a7;font:10px var(--mono); }.practice-sidebar nav button span{font-size:12px}.practice-sidebar nav button i{font:normal 9px var(--mono)}
.practice-review-link { display:block;margin-top:20px;padding-top:18px;border-top:1px solid rgba(40,53,80,.09);color:#5e46ad;font-size:10px;line-height:1.6; }
.practice-content { min-width:0; }
.practice-guide { display:flex;align-items:center;justify-content:space-between;gap:30px;padding:26px 30px;border:1px solid rgba(41,54,83,.10);border-radius:15px;background:linear-gradient(110deg,#e9e4f5,#e5edf5); }
.practice-guide span { color:#6750b4;font:9px var(--mono);letter-spacing:.1em; }.practice-guide h2{margin:7px 0 0;font-size:24px}
.practice-guide ol { display:flex;gap:24px;margin:0;padding:0;list-style:none; }.practice-guide li{color:#637086;font-size:11px;white-space:nowrap}.practice-guide li b{display:block;margin-bottom:5px;color:#7560bd;font:10px var(--mono)}
.problem-group { padding-top:60px;scroll-margin-top:calc(var(--header-h) + 20px); }.problem-group.filtered-out{display:none}
.problem-group-heading { display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:19px; }
.problem-group-heading span { color:#6953b6;font:9px var(--mono);letter-spacing:.08em; }.problem-group-heading h2{margin:8px 0 6px;font-size:29px}.problem-group-heading p{margin:0;color:#59667b;font-size:12px}.problem-group-heading>b{flex:0 0 auto;padding:8px 12px;border-radius:99px;color:#6650b2;background:#ded9ed;font-size:10px}
.problem-list { display:flex;flex-direction:column;gap:8px; }
.problem-card { display:grid;grid-template-columns:48px minmax(0,1fr) 75px 112px;gap:13px;align-items:center;min-height:116px;padding:19px 21px;border:1px solid rgba(37,51,80,.10);border-radius:12px;background:#edf1f6;box-shadow:0 8px 22px rgba(49,63,94,.035);transition:.25s; }
.problem-card:hover { transform:translateY(-2px);border-color:rgba(104,80,192,.23);box-shadow:0 14px 30px rgba(49,63,94,.08); }
.problem-card.completed { border-color:rgba(55,143,112,.23);background:#e7f0eb; }
.problem-index { display:grid;place-items:center;width:42px;height:42px;border-radius:11px;color:#7a64c2;background:#e2ddf0;font:11px var(--mono); }
.problem-card.completed .problem-index { color:#277c60;background:#d4e8de; }
.problem-meta { display:flex;align-items:center;gap:8px;margin-bottom:6px; }.problem-meta span{color:#735dbd;font:9px var(--mono)}.problem-meta i{padding:4px 7px;border-radius:4px;color:#667287;background:#e0e5ec;font:normal 8px var(--mono)}
.problem-card h3 { margin:0;color:#273149;font-size:17px; }.problem-card p{margin:6px 0 0;color:#647086;font-size:11px;line-height:1.6}
.problem-card>a { color:#5d46aa;font-size:11px;font-weight:600;text-align:center; }.problem-card>a:hover{text-decoration:underline}
.problem-card>button { display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 10px;border:1px solid rgba(99,77,180,.2);border-radius:8px;color:#6049ad;background:#e1dced;font-size:9px;font-weight:700;cursor:pointer;transition:.2s; }
.problem-card>button:hover { border-color:rgba(99,77,180,.38);background:#d9d1ea; }
.problem-card>button.completed { color:#257456;border-color:rgba(38,128,91,.22);background:#cfe4da; }
.problem-card>button:disabled { opacity:.6;cursor:wait; }
.practice-source-note { display:grid;grid-template-columns:1fr auto;gap:7px 25px;margin-top:65px;padding:27px 30px;border:1px solid rgba(39,53,81,.10);border-radius:14px;background:#e5e9ef; }.practice-source-note span{color:#6650b1;font-size:10px;font-weight:700}.practice-source-note p{grid-column:1;margin:0;color:#59667a;font-size:10px;line-height:1.75}.practice-source-note a{grid-column:2;grid-row:1/3;align-self:center;color:#5d46aa;font-size:9px}
.algorithm-practice-empty { max-width:850px;min-height:590px;margin:0 auto;padding:105px 25px 130px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; }
.algorithm-empty-symbol { display:flex;align-items:end;gap:7px;width:82px;height:76px;padding:17px;margin-bottom:26px;border:1px solid rgba(103,78,190,.17);border-radius:21px;background:#e6e1f1;box-shadow:0 18px 42px rgba(76,58,139,.10); }.algorithm-empty-symbol span{flex:1;border-radius:4px;background:linear-gradient(#7358c6,#5596bd)}.algorithm-empty-symbol span:nth-child(1){height:32%}.algorithm-empty-symbol span:nth-child(2){height:62%}.algorithm-empty-symbol span:nth-child(3){height:100%}
.algorithm-practice-empty small { color:#6c55b8;font:8px var(--mono);letter-spacing:.13em; }.algorithm-practice-empty h2{margin:14px 0 12px;font-size:34px}.algorithm-practice-empty p{max-width:630px;margin:0;color:#56637a;font-size:12px;line-height:1.85}.algorithm-practice-empty>div:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:26px}.algorithm-practice-empty>div:last-child span{padding:7px 10px;border-radius:99px;color:#687388;background:#e1e6ed;font-size:8px}
.hydro-practice-shell { max-width:1120px;margin:0 auto;padding:54px 30px 120px; }
.hydro-practice-header { display:flex;align-items:end;justify-content:space-between;gap:30px;padding:35px;border:1px solid rgba(52,66,96,.11);border-radius:18px;background:linear-gradient(135deg,#e9e5f4,#e0ebf1); }
.hydro-practice-header small,.hydro-account-card small { color:#6b54b8;font:8px var(--mono);letter-spacing:.13em; }.hydro-practice-header h2{margin:9px 0 9px;font-size:34px}.hydro-practice-header p{max-width:650px;margin:0;color:#59667b;font-size:11px;line-height:1.75}
.hydro-connection { flex:none;padding:9px 12px;border-radius:99px;color:#85691f;background:#f2e7c5;font-size:9px;font-weight:700; }.hydro-connection.connected{color:#28785d;background:#d7eadd}.hydro-connection.demo{color:#6650b1;background:#e2dcf0}
.hydro-account-card { margin:18px 0 32px;padding:24px 27px;display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center;border:1px solid rgba(52,66,96,.10);border-radius:14px;background:#e7ebf0; }.hydro-account-card h3{margin:6px 0;font-size:17px}.hydro-account-card p{margin:0;color:#687388;font-size:10px}.hydro-account-card form{display:flex;gap:8px}.hydro-account-card input{width:210px;padding:11px 12px;border:1px solid rgba(52,66,96,.16);border-radius:8px;color:#273149;background:#f5f7f9;outline:none}.hydro-account-card input:focus{border-color:#7358c6}.hydro-account-card button,.hydro-problem-action{padding:11px 15px;border:0;border-radius:8px;color:#fff;background:#6750b7;font-size:10px;font-weight:700;cursor:pointer}.hydro-account-card button:disabled,.hydro-problem-action:disabled{opacity:.55;cursor:not-allowed}
.hydro-account-card p a{margin-left:4px;color:#6049ad;font-weight:700}
.practice-hydro-account{max-width:1110px;margin:18px auto 0}.hydro-account-side{display:flex;align-items:center;gap:12px}.hydro-track-section{margin-top:55px;padding:30px;border:1px solid rgba(52,66,96,.10);border-radius:17px;background:rgba(229,234,240,.72)}.hydro-track-heading{margin-bottom:22px}.hydro-track-heading small{color:#6b54b8;font:8px var(--mono);letter-spacing:.13em}.hydro-track-heading h2{margin:8px 0 7px;font-size:27px}.hydro-track-heading p{margin:0;color:#657086;font-size:11px}.algorithm-hydro-track{max-width:1060px;margin:0 auto 110px}.algorithm-hydro-track+.hydro-track-section{margin-top:0}
.hydro-problem-list{display:flex;flex-direction:column;gap:10px}.hydro-loading{padding:55px;text-align:center;color:#758095;font-size:11px}.hydro-problem-card{display:grid;grid-template-columns:62px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:20px 23px;border:1px solid rgba(43,57,85,.10);border-radius:13px;background:#e8ecf1;transition:.2s}.hydro-problem-card.accepted{border-color:rgba(38,128,91,.22);background:#e1eee8}.hydro-problem-id{color:#6a53b6;font:10px var(--mono)}.hydro-problem-copy small{color:#758095;font:8px var(--mono)}.hydro-problem-copy h3{margin:5px 0 0;font-size:16px}.hydro-problem-points{padding:7px 10px;border-radius:6px;color:#745717;background:#eee2bf;font:700 9px var(--mono)}.hydro-problem-card.accepted .hydro-problem-points{color:#237454;background:#cde4d9}.hydro-problem-actions{display:flex;gap:7px;align-items:center}.hydro-problem-actions a{padding:10px 13px;color:#6049ad;font-size:10px;font-weight:700}.hydro-problem-actions a.disabled{color:#929aaa;pointer-events:none}.hydro-problem-action.demo-action{color:#6049ad;border:1px solid rgba(99,77,180,.17);background:#ddd7ed}.hydro-accepted-badge{color:#287b60;font-size:10px;font-weight:700}
.hydro-flow-note{margin-top:32px;padding:20px 25px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;border:1px dashed rgba(92,71,167,.25);border-radius:12px;color:#687388;font-size:9px}.hydro-flow-note b{color:#6049ad}.hydro-flow-note i{color:#9a8acb;font-style:normal}
.hydro-submit-dialog{width:min(900px,calc(100vw - 32px));padding:0;border:0;border-radius:18px;background:#eef1f5;box-shadow:0 30px 90px rgba(35,43,68,.28)}.hydro-submit-dialog::backdrop{background:rgba(24,29,45,.55);backdrop-filter:blur(4px)}.hydro-submit-card{padding:28px}.hydro-submit-card>header{display:flex;justify-content:space-between;gap:24px;align-items:start}.hydro-submit-card header small{color:#6b54b8;font:8px var(--mono);letter-spacing:.13em}.hydro-submit-card h2{margin:7px 0 3px;font-size:26px}.hydro-submit-card header p{margin:0;color:#737e91;font:10px var(--mono)}.hydro-submit-close{width:34px;height:34px;border:0;border-radius:50%;background:#dde2e9;color:#687388;font-size:22px;cursor:pointer}.hydro-submit-card>label{display:block;margin-top:18px}.hydro-submit-card>label>span{display:block;margin-bottom:7px;color:#4f5b70;font-size:10px;font-weight:700}.hydro-submit-card select,.hydro-submit-card textarea{width:100%;box-sizing:border-box;border:1px solid rgba(52,66,96,.16);border-radius:10px;background:#fafbfc;color:#202b40;outline:none}.hydro-submit-card select{padding:11px}.hydro-submit-card textarea{min-height:360px;padding:17px;resize:vertical;font:13px/1.65 var(--mono);tab-size:4}.hydro-submit-card select:focus,.hydro-submit-card textarea:focus{border-color:#7358c6;box-shadow:0 0 0 3px rgba(115,88,198,.09)}.hydro-submit-result{min-height:18px;margin-top:13px;color:#687388;font-size:10px}.hydro-submit-result.judging{color:#6a53b6}.hydro-submit-result.accepted{color:#247656;font-weight:700}.hydro-submit-result.failed{color:#a34242;font-weight:700}.hydro-submit-card>footer{flex:none;min-height:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;background:transparent}.hydro-submit-card>footer a{color:#6049ad;font-size:10px;font-weight:700}.hydro-submit-card>footer button{padding:12px 20px;border:0;border-radius:9px;background:#6750b7;color:#fff;font-weight:700;cursor:pointer}.hydro-submit-card>footer button:disabled{opacity:.55;cursor:not-allowed}

.hydro-stage-section{margin-top:16px;padding:18px;border:1px solid rgba(97,73,176,.15);border-radius:13px;background:linear-gradient(135deg,rgba(231,226,244,.82),rgba(230,237,242,.82))}.hydro-stage-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:13px}.hydro-stage-heading small{color:#6b54b8;font:8px var(--mono);letter-spacing:.1em}.hydro-stage-heading h3{margin:6px 0 3px;font-size:16px}.hydro-stage-heading p{margin:0;color:#687489;font-size:9px}.hydro-stage-heading>b{padding:6px 9px;border-radius:99px;color:#6049ad;background:#ddd6ed;font:9px var(--mono)}.hydro-stage-section .hydro-problem-card{padding:15px 17px;background:rgba(246,248,250,.72)}
.algorithm-track-tabs{grid-template-columns:repeat(4,1fr);padding-top:30px}.algorithm-track-tabs button{min-height:86px}.algorithm-practice-layout{padding-top:38px}.algorithm-practice-content{scroll-margin-top:calc(var(--header-h) + 20px)}.algorithm-problem-group{padding-top:54px}.algorithm-topic-empty{border:1px dashed rgba(73,88,118,.16);border-radius:12px;background:rgba(233,237,242,.55)}.algorithm-practice-sidebar nav button[hidden]{display:none}

.hydro-submit-dialog{width:min(1380px,calc(100vw - 28px));max-width:none;height:min(850px,calc(100vh - 28px));max-height:none;overflow:hidden}.hydro-workspace{height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(460px,.98fr);grid-template-rows:minmax(0,1fr)}.hydro-statement-pane,.hydro-submit-card{min-width:0;min-height:0;height:100%;overflow:hidden;box-sizing:border-box}.hydro-statement-pane{display:flex;flex-direction:column;padding:30px 32px;background:#f4f6f8;border-right:1px solid rgba(45,58,86,.11)}.hydro-statement-pane>header{display:flex;align-items:start;justify-content:space-between;gap:22px;padding-bottom:18px;border-bottom:1px solid rgba(44,57,84,.10)}.hydro-statement-pane header small,.hydro-submit-card header small{color:#6b54b8;font:8px var(--mono);letter-spacing:.13em}.hydro-statement-pane header p{margin:7px 0 3px;color:#725bbd;font:10px var(--mono)}.hydro-statement-pane h2{margin:0;font-size:30px}.hydro-statement-tags{display:flex;flex-wrap:wrap;gap:7px;min-height:24px;padding:15px 0 0}.hydro-statement-tags span{padding:6px 9px;border-radius:99px;color:#6650ae;background:#e4def2;font-size:8px}.hydro-statement-content{flex:1;min-height:0;overflow-y:scroll;overflow-x:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:8px 16px 25px 0;color:#344057;scrollbar-color:#a99fc6 #e8ebf0;scrollbar-width:thin}.hydro-statement-content::-webkit-scrollbar{width:10px;height:10px}.hydro-statement-content::-webkit-scrollbar-track{border-radius:99px;background:#e8ebf0}.hydro-statement-content::-webkit-scrollbar-thumb{border:2px solid #e8ebf0;border-radius:99px;background:#a99fc6}.hydro-statement-content::-webkit-scrollbar-thumb:hover{background:#8f82b5}.hydro-statement-content h2,.hydro-statement-content h3,.hydro-statement-content h4{margin:29px 0 12px;color:#263149}.hydro-statement-content h2{font-size:22px}.hydro-statement-content h3{font-size:18px}.hydro-statement-content h4{font-size:15px}.hydro-statement-content p,.hydro-statement-content li,.hydro-statement-content blockquote{font-size:13px;line-height:1.9}.hydro-statement-content ul,.hydro-statement-content ol{padding-left:24px}.hydro-statement-content code{padding:2px 5px;border-radius:4px;background:#e3e6ec;font:12px var(--mono)}.hydro-statement-content pre{overflow:auto;padding:16px;border-radius:10px;background:#252a3d;color:#eff1f7}.hydro-statement-content pre code{padding:0;background:none;color:inherit}.hydro-statement-content blockquote{margin:18px 0;padding:12px 15px;border-left:3px solid #765dc2;background:#e9e5f2}.statement-math{padding:2px 5px;border-radius:4px;color:#583fa4;background:#e6e0f2;font:12px var(--mono)}.hydro-statement-loading,.hydro-statement-error{margin-top:22px;padding:45px 22px;border:1px dashed rgba(78,93,122,.18);border-radius:12px;color:#778196;text-align:center;font-size:11px}.hydro-statement-error b{color:#98434c}.hydro-statement-error p{margin:8px 0 0}.hydro-statement-pane>footer{flex:none;min-height:0;padding:15px 0 0;display:block;border-top:1px solid rgba(44,57,84,.10);background:transparent}.hydro-statement-pane>footer a{color:#6049ad;font-size:10px;font-weight:700}
.hydro-submit-card{display:flex;flex-direction:column;padding:30px;background:#e8edf2}.hydro-submit-card>header{align-items:center;padding-bottom:17px;border-bottom:1px solid rgba(44,57,84,.10)}.hydro-submit-card>header h3{margin:7px 0 4px;font-size:22px}.hydro-submit-card>header p{margin:0;color:#727e91;font-size:9px}.hydro-submit-card>header>span{padding:7px 9px;border-radius:6px;color:#7160aa;background:#ddd9e9;font:8px var(--mono)}.hydro-submit-card>label{margin-top:15px}.hydro-submit-card .hydro-code-field{display:flex;flex:1;min-height:0;flex-direction:column}.hydro-submit-card .hydro-code-field textarea{flex:1;min-height:260px;resize:none}.hydro-submit-card>footer>span{color:#737e91;font-size:9px;line-height:1.6}

@media(max-width:1000px){.practice-hero{grid-template-columns:1fr;gap:40px}.practice-progress-card{max-width:520px}.algorithm-track-tabs{grid-template-columns:1fr 1fr}.practice-layout{grid-template-columns:210px minmax(0,1fr);gap:25px}.practice-guide{align-items:flex-start;flex-direction:column}.problem-card{grid-template-columns:38px minmax(0,1fr) 70px}.problem-card>button{grid-column:2/4}.practice-source-note{display:block}.practice-source-note p{margin:8px 0 14px}}
@media(max-width:760px){.light-theme .fresh-feature-grid{grid-template-columns:1fr}.practice-hero{padding:65px 21px 45px}.practice-tabs{padding:0 21px;grid-template-columns:1fr}.practice-hydro-account{margin:18px 21px 0}.hydro-account-side{align-items:stretch;flex-direction:column}.practice-layout{display:block;padding:30px 21px 90px}.practice-sidebar{position:static;margin-bottom:26px}.practice-sidebar nav{display:grid;grid-template-columns:1fr 1fr}.practice-guide{padding:23px}.practice-guide ol{flex-direction:column;gap:10px}.problem-group{padding-top:47px}.problem-group-heading{align-items:flex-start}.problem-card{grid-template-columns:35px minmax(0,1fr)}.problem-card>a{grid-column:2;text-align:left}.problem-card>button{grid-column:2;justify-self:start}.algorithm-practice-empty{padding:80px 21px 70px}.hydro-track-section{margin:35px 0 0;padding:23px}.algorithm-hydro-track{margin:0 21px 90px}.hydro-account-card{grid-template-columns:1fr}.hydro-account-card form{flex-direction:column}.hydro-account-card input{width:100%}.hydro-problem-card{grid-template-columns:1fr}.hydro-problem-id{order:-1}.hydro-problem-actions{justify-content:flex-start}.hydro-flow-note{justify-content:flex-start}.hydro-submit-card{padding:20px}.hydro-submit-card textarea{min-height:300px}.hydro-submit-card>footer{align-items:stretch;flex-direction:column}.hydro-submit-card>footer button{width:100%}}
@media(max-width:900px){.hydro-submit-dialog{height:calc(100vh - 18px);width:calc(100vw - 18px);overflow:auto}.hydro-workspace{height:auto;display:block}.hydro-statement-pane,.hydro-submit-card{height:auto;overflow:visible}.hydro-statement-pane{min-height:72vh;border-right:0;border-bottom:1px solid rgba(45,58,86,.11)}.hydro-statement-content{overflow:visible;scrollbar-gutter:auto}.hydro-submit-card{min-height:72vh}.hydro-stage-heading{align-items:flex-start;flex-direction:column}.hydro-stage-heading>b{align-self:flex-start}}
@media(max-width:600px){.hydro-statement-pane{padding:22px 20px}.hydro-statement-pane h2{font-size:24px}.hydro-statement-content{padding-right:2px}.hydro-statement-content p,.hydro-statement-content li{font-size:12px}.hydro-submit-card>header{align-items:flex-start;flex-direction:column}.hydro-submit-card>header>span{display:none}.hydro-stage-section{padding:14px}.hydro-stage-section .hydro-problem-card{padding:14px}.hydro-problem-actions{flex-wrap:wrap}}

/* Admin */
.admin-page{min-height:100vh;background:#e4e9ef;color:#253149}.admin-shell{max-width:1240px;margin:0 auto;padding:72px 30px 120px}.admin-hero{display:flex;align-items:end;justify-content:space-between;gap:35px;padding:36px;border-radius:20px;background:linear-gradient(135deg,#28253c,#41356b 58%,#31536a);color:#fff;box-shadow:0 25px 70px rgba(39,42,67,.16)}.admin-hero span,.admin-card-heading span{font:8px var(--mono);letter-spacing:.14em}.admin-hero span{color:#c3b4ef}.admin-hero h1{margin:10px 0 8px;font-size:38px}.admin-hero p{max-width:720px;margin:0;color:#d1d4df;font-size:11px;line-height:1.75}.admin-connection{flex:none;padding:10px 13px;border-radius:99px;background:#66547e;color:#eee9fa;font-size:9px;font-weight:700}.admin-connection.connected{background:#d4eadf;color:#267055}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:18px 0}.admin-stats article{padding:21px 23px;border:1px solid rgba(49,62,90,.1);border-radius:13px;background:#f0f3f6}.admin-stats span{display:block;color:#758096;font-size:9px}.admin-stats b{display:block;margin-top:8px;font:700 24px var(--mono);color:#332b54}.admin-grid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:18px}.admin-card{border:1px solid rgba(49,62,90,.1);border-radius:16px;background:#f0f3f6;box-shadow:0 15px 40px rgba(47,60,86,.06)}.admin-problem-editor,.admin-problem-manager,.admin-submissions-card{padding:26px}.admin-card-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.admin-card-heading span{color:#6951b5}.admin-card-heading h2{margin:7px 0 0;font-size:21px}.admin-card-heading button{padding:8px 11px;border:0;border-radius:7px;background:#e0e4eb;color:#5e697d;font-size:9px;cursor:pointer}.admin-card-heading small{color:#7a8598;font-size:9px}.admin-problem-editor form>label,.admin-form-row label{display:block;margin-top:13px}.admin-problem-editor label>span{display:block;margin-bottom:6px;color:#59657a;font-size:9px;font-weight:700}.admin-problem-editor input,.admin-problem-editor select{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid rgba(51,63,89,.15);border-radius:8px;background:#fafbfd;color:#253149;outline:none}.admin-problem-editor input:focus,.admin-problem-editor select:focus{border-color:#7056c2}.admin-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-form-checks{margin:17px 0;display:grid;gap:9px}.admin-form-checks label{display:flex;align-items:center;gap:8px;color:#606c80;font-size:9px}.admin-form-checks input{width:auto}.admin-primary-button{width:100%;padding:12px;border:0;border-radius:9px;background:#6750b7;color:#fff;font-weight:700;cursor:pointer}.admin-primary-button:disabled{opacity:.55}.admin-form-status{min-height:30px;margin:10px 0 0;color:#737e91;font-size:9px;line-height:1.6}.admin-form-status.success{color:#267557}.admin-form-status.error{color:#a23f4b}.admin-problem-list{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow:auto}.admin-problem-row{display:grid;grid-template-columns:65px minmax(0,1fr) auto;gap:13px;align-items:center;padding:14px;border:1px solid rgba(47,60,87,.09);border-radius:10px;background:#f9fafb}.admin-problem-row.inactive{opacity:.62}.admin-problem-row>code{color:#6650b1;font:10px var(--mono)}.admin-problem-row h3{margin:0;font-size:13px}.admin-problem-row p{margin:5px 0 0;color:#768195;font-size:8px}.admin-problem-actions{display:flex;gap:5px}.admin-problem-actions button{padding:7px 9px;border:0;border-radius:6px;color:#5d687b;background:#e4e8ee;font-size:8px;cursor:pointer}.admin-problem-actions button.status-active{color:#8c3f47;background:#f0dfe1}.admin-problem-actions button.status-inactive{color:#267557;background:#dcebe3}.admin-submissions-card{margin-top:18px}.admin-submission-head,.admin-submission-row{display:grid;grid-template-columns:1.3fr 1.5fr .7fr .7fr 1fr 1fr;gap:13px;align-items:center}.admin-submission-head{padding:0 13px 9px;color:#7b8699;font-size:8px}.admin-submission-row{padding:13px;border-top:1px solid rgba(48,61,88,.08);font-size:9px}.admin-submission-row b,.admin-submission-row strong{display:block}.admin-submission-row small{display:block;margin-top:3px;color:#7a8598}.admin-verdict{justify-self:start;padding:6px 8px;border-radius:6px;background:#e3e6eb;color:#596579;font:700 8px var(--mono)}.admin-verdict.ac{background:#d8eade;color:#277458}.admin-verdict.fail{background:#f0dfe1;color:#97404b}.admin-empty{padding:45px;text-align:center;color:#7b8698;font-size:10px}
.admin-heading-actions{display:flex;gap:7px;align-items:center}.admin-card-heading button:disabled{opacity:.55;cursor:not-allowed}.admin-card-heading .admin-pack-button{color:#fff;background:#6750b7}
@media(max-width:900px){.admin-hero{align-items:flex-start;flex-direction:column}.admin-stats{grid-template-columns:1fr 1fr}.admin-grid{grid-template-columns:1fr}.admin-submission-head{display:none}.admin-submission-row{grid-template-columns:1fr 1fr 1fr}.admin-submission-row span:last-child{grid-column:3}}
@media(max-width:600px){.admin-shell{padding:55px 18px 90px}.admin-hero{padding:27px}.admin-hero h1{font-size:30px}.admin-stats{grid-template-columns:1fr 1fr}.admin-stats article{padding:17px}.admin-problem-editor,.admin-problem-manager,.admin-submissions-card{padding:19px}.admin-form-row{grid-template-columns:1fr}.admin-problem-row{grid-template-columns:1fr}.admin-submission-row{grid-template-columns:1fr 1fr}.admin-submission-row span:last-child{grid-column:auto}}

/* Algorithm learning */
.algorithms-page { color:#172039;background:#dfe6ee; }
.algorithm-hero { min-height:430px;padding:76px clamp(24px,5vw,76px) 62px;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:75px;align-items:end;background:linear-gradient(135deg,#e6e1f1,#dde8f1 62%,#deeaec);border-bottom:1px solid rgba(34,48,78,.10); }
.algorithm-hero h1 { margin:13px 0 16px;font-size:clamp(48px,5.5vw,76px);letter-spacing:-.06em; }
.algorithm-hero>div:first-child>p { max-width:800px;margin:0;color:#4e5d74;font-size:14px;line-height:1.9; }
.algorithm-hero-badges { display:flex;flex-wrap:wrap;gap:8px;margin-top:27px; }.algorithm-hero-badges span{padding:7px 10px;border:1px solid rgba(41,54,82,.10);border-radius:6px;color:#657086;background:rgba(248,250,252,.48);font-size:9px}
.algorithm-hero-card { padding:25px;border:1px solid rgba(39,53,82,.12);border-radius:15px;background:rgba(240,244,248,.75);box-shadow:0 18px 40px rgba(48,62,94,.07); }
.algorithm-hero-card>small { display:block;margin-bottom:15px;color:#6953b5;font:8px var(--mono);letter-spacing:.1em; }.algorithm-hero-card>div{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid rgba(37,51,79,.09)}.algorithm-hero-card span{color:#68748a;font-size:9px}.algorithm-hero-card b{color:#29334b;font:11px var(--mono)}.algorithm-hero-card .accepted-text{color:#318069}
.algorithm-tabs { width:100%;padding:30px clamp(20px,2.3vw,38px) 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.algorithm-tabs button { display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:12px;min-height:76px;padding:16px 18px;border:1px solid rgba(38,52,81,.11);border-radius:12px;outline:0;text-align:left;color:#707b90;background:#e7ebf1;cursor:pointer;transition:.25s; }
.algorithm-tabs button>span { grid-row:1/3;align-self:center;color:#9aa4b5;font:11px var(--mono); }.algorithm-tabs button>b{color:#354057;font-size:13px}.algorithm-tabs button>small{margin-top:3px;font-size:8px}.algorithm-tabs button:hover,.algorithm-tabs button.active{transform:translateY(-2px);border-color:rgba(101,76,190,.24);background:#eeeaf7;box-shadow:0 12px 28px rgba(53,66,98,.06)}.algorithm-tabs button.active>span,.algorithm-tabs button.active>b{color:#6149ad}.algorithm-tabs button:focus-visible{box-shadow:0 0 0 3px rgba(104,80,192,.17)}
.algorithm-panel { animation:pageIn .35s ease both; }.algorithm-panel[hidden]{display:none}
.algorithm-layout { width:100%;display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;align-items:start;padding:45px clamp(20px,2.3vw,38px) 125px;scroll-margin-top:var(--header-h); }
.algorithm-sidebar { position:sticky;top:calc(var(--header-h) + 25px);padding:25px 20px;border:1px solid rgba(37,51,80,.10);border-radius:14px;background:#e9edf3; }
.algorithm-sidebar-title>span { color:#6952b5;font:8px var(--mono);letter-spacing:.12em; }.algorithm-sidebar-title h2{margin:8px 0 9px;font-size:22px}.algorithm-sidebar>p{margin:0 0 20px;color:#59667b;font-size:11px;line-height:1.7}
.algorithm-sidebar nav { display:flex;flex-direction:column;gap:5px; }.algorithm-doc-link{display:grid;grid-template-columns:30px 1fr 7px;gap:8px;align-items:center;padding:12px 10px;border-radius:8px;outline:0;color:#59667b;transition:color .1s linear,background-color .1s linear}.algorithm-doc-link b{color:#8993a5;font:10px var(--mono)}.algorithm-doc-link span{font-size:12px}.algorithm-doc-link i{width:5px;height:5px;border-radius:50%;background:#a7afbd;transition:background-color .1s linear}.algorithm-doc-link:hover,.algorithm-doc-link.active{color:#513a9b;background:#ded9ec;transform:none}.algorithm-doc-link.active i{background:#7155c5;box-shadow:0 0 0 4px rgba(113,85,197,.11)}.algorithm-doc-link:focus-visible{box-shadow:0 0 0 3px rgba(104,80,192,.17)}
.algorithm-sidebar-tip { margin-top:20px;padding:17px;border-radius:10px;background:#dde4ec; }.algorithm-sidebar-tip b{color:#5d48a7;font-size:10px}.algorithm-sidebar-tip p{margin:7px 0 0;color:#59667b;font-size:9px;line-height:1.7}
.algorithm-content { min-width:0; }.algorithm-lesson{display:none;padding:0 0 20px;animation:algorithmLessonIn .32s ease both}.algorithm-lesson.active{display:block}.algorithm-lesson>.lesson-label{color:#7058bb}.algorithm-lesson>h2{margin:10px 0 17px;font-size:clamp(35px,4vw,50px);letter-spacing:-.045em}.algorithm-lesson>h3{margin:35px 0 15px;font-size:21px}.algorithm-lesson>p{max-width:1050px;color:#526078;font-size:13px;line-height:1.9}.algorithm-lead{max-width:1050px!important;margin-bottom:28px!important;font-size:14px!important}
@keyframes algorithmLessonIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.algorithm-lesson-pager { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:55px;padding-top:28px;border-top:1px solid rgba(38,51,79,.11); }
.algorithm-lesson-pager button { display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:15px 18px;border:1px solid rgba(38,51,80,.11);border-radius:11px;outline:0;color:#58657a;background:#e8edf3;text-align:left;cursor:pointer;transition:.23s; }.algorithm-lesson-pager button:last-child{text-align:right}.algorithm-lesson-pager button:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(103,78,190,.25);background:#eeeaf7}.algorithm-lesson-pager button:focus-visible{box-shadow:0 0 0 3px rgba(104,80,192,.17)}.algorithm-lesson-pager button:disabled{opacity:.42;cursor:not-allowed}.algorithm-lesson-pager small,.algorithm-lesson-pager b{display:block}.algorithm-lesson-pager small{margin-bottom:5px;color:#7b6ab8;font:8px var(--mono)}.algorithm-lesson-pager b{color:#303a51;font-size:12px}.algorithm-lesson-pager>button>span{color:#7159bc;font-size:17px}
.algorithm-concept-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:27px 0; }.algorithm-concept-grid article{min-height:210px;padding:21px;border:1px solid rgba(39,52,81,.10);border-radius:12px;background:#edf1f6}.algorithm-concept-grid article>b{color:#735cc0;font:10px var(--mono)}.algorithm-concept-grid h3{margin:22px 0 10px;font-size:16px}.algorithm-concept-grid p{margin:0;color:#59667c;font-size:10px;line-height:1.8}
.statement-demo { display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#e9edf3;overflow:hidden; }.statement-demo>div{padding:19px 21px;border-right:1px solid rgba(38,51,80,.09);border-bottom:1px solid rgba(38,51,80,.09)}.statement-demo>div:nth-child(2n){border-right:0}.statement-demo>div:nth-last-child(-n+2){border-bottom:0}.statement-demo span{color:#6952b5;font-size:10px;font-weight:700}.statement-demo p{margin:8px 0 0;color:#526078;font-size:11px;line-height:1.7}
.algorithm-checklist { display:grid;grid-template-columns:145px 1fr 1fr;gap:0;margin-top:25px;border:1px solid rgba(38,51,80,.10);border-radius:12px;background:#e7ebf1;overflow:hidden}.algorithm-checklist>span{grid-row:1/3;display:grid;place-items:center;padding:18px;color:#614aad;background:#ded9ec;font-size:11px;font-weight:700}.algorithm-checklist>div{padding:14px 17px;border-left:1px solid rgba(38,51,80,.09);border-bottom:1px solid rgba(38,51,80,.09);color:#566379;font-size:10px}.algorithm-checklist>div:nth-last-child(-n+2){border-bottom:0}.algorithm-checklist b{margin-right:6px;color:#735cc0}
.complexity-scale { display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin:28px 0;padding:20px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#e8edf3}.complexity-scale>div{padding:17px 8px;border-radius:9px;text-align:center;background:#f0f3f7}.complexity-scale b,.complexity-scale span,.complexity-scale small{display:block}.complexity-scale b{font:600 15px var(--mono)}.complexity-scale span{margin:6px 0;color:#3f4a61;font-size:10px;font-weight:600}.complexity-scale small{color:#747f92;font-size:8px}.complexity-scale i{color:#9da6b5;font-style:normal}.complexity-scale .excellent b{color:#2c8a68}.complexity-scale .good b{color:#3d78ae}.complexity-scale .warn b{color:#a87931}.complexity-scale .danger b{color:#b55461}
.complexity-examples { display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.complexity-examples article{border:1px solid rgba(38,51,80,.10);border-radius:11px;background:#edf1f6;overflow:hidden}.complexity-examples article>div{padding:14px 17px}.complexity-examples b{color:#674fb3;font:12px var(--mono)}.complexity-examples span{display:block;margin-top:4px;color:#69758a;font-size:8px}.complexity-examples pre{min-height:105px;margin:0;padding:18px;color:#d8dce7;background:#242936;font:10px/1.8 var(--mono);overflow:auto}
.limit-table { border:1px solid rgba(38,51,80,.11);border-radius:12px;background:#edf1f6;overflow:hidden}.limit-table>div{display:grid;grid-template-columns:1fr 1.3fr 1.7fr;min-height:55px;align-items:center;padding:0 20px;border-bottom:1px solid rgba(38,51,80,.09);color:#566379;font-size:11px}.limit-table>div:last-child{border:0}.limit-table .limit-head{min-height:44px;color:#737e91;background:#dfe5ec;font:8px var(--mono)}.limit-table code{color:#5e47aa}
.memory-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin:26px 0}.memory-cards article{padding:23px;border:1px solid rgba(38,51,80,.10);border-radius:12px;background:#edf1f6}.memory-cards span{color:#6a55b5;font-size:9px}.memory-cards b{display:block;margin:9px 0;color:#273149;font:22px var(--mono)}.memory-cards p{min-height:48px;color:#58657a;font-size:10px;line-height:1.7}.memory-cards code{display:block;padding:10px;border-radius:7px;color:#725abd;background:#dfe5ec;font-size:9px}
.formula-card { padding:24px 27px;border:1px solid rgba(98,76,183,.16);border-radius:13px;background:linear-gradient(110deg,#e5e0f1,#e3ebf3)}.formula-card span{color:#6b54b6;font-size:9px}.formula-card b{display:block;margin:10px 0;color:#2c354d;font:18px var(--mono)}.formula-card p{margin:0;color:#566379;font-size:11px}.memory-example{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.memory-example>div{padding:21px;border:1px solid rgba(38,51,80,.10);border-radius:11px;background:#ebeff4}.memory-example span,.memory-example b,.memory-example small{display:block}.memory-example span{color:#6b778b;font-size:9px}.memory-example b{margin:8px 0;color:#614aae;font:17px var(--mono)}.memory-example small{color:#717c90;font-size:8px}
.binary-principle { display:grid;grid-template-columns:1fr 1.4fr;gap:18px;align-items:center;padding:24px 27px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#e9edf3}.binary-principle span{color:#6952b4;font-size:9px}.binary-principle h3{margin:7px 0 8px;font-size:20px}.binary-principle p{margin:0;color:#566379;font-size:10px;line-height:1.7}.binary-pattern{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;align-items:end}.binary-pattern>*{display:grid!important;place-items:center;height:44px;border-radius:6px;font:8px var(--mono)!important}.binary-pattern span{color:#68758a;background:#dbe1e9}.binary-pattern i{color:#287b62;background:#d3e6de;font-style:normal}.binary-pattern b{height:59px;color:white;background:#7257c6;font-weight:500}
.binary-trace { padding:23px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#e9edf3}.array-row{display:grid;grid-template-columns:70px repeat(7,1fr);gap:5px;align-items:center;margin-bottom:5px}.array-row span{color:#68748a;font-size:9px}.array-row b{display:grid;place-items:center;min-height:30px;border-radius:6px;color:#69758a;background:#dce2e9;font:9px var(--mono)}.array-row.values b{min-height:48px;color:#344058;background:#edf1f6;font-size:12px}.array-row.values b.mid{color:white;background:#7358c6;box-shadow:0 7px 16px rgba(86,62,171,.22)}.trace-steps{display:flex;justify-content:space-between;gap:20px;margin-top:16px;padding-top:15px;border-top:1px solid rgba(38,51,80,.09)}.trace-steps p{margin:0;color:#566379;font-size:10px}
.prefix-visual { margin:24px 0;padding:25px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#e9edf3}.prefix-visual>div{display:grid;grid-template-columns:100px repeat(6,1fr);gap:6px;align-items:center}.prefix-visual>div:first-child{grid-template-columns:100px repeat(5,1fr)}.prefix-visual span{color:#5e6a7f;font-size:10px}.prefix-visual b{display:grid;place-items:center;min-height:42px;border-radius:7px;color:#344058;background:#edf1f6;font:12px var(--mono)}.prefix-visual>i{display:block;margin:11px 0 11px 105px;color:#7259bd;font:normal 8px var(--mono)}.prefix-visual .prefix-row b{color:#6249ae;background:#dfd9ed}
.prefix-formulas { display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:19px 0}.prefix-formulas article{padding:23px;border:1px solid rgba(38,51,80,.10);border-radius:12px;background:#edf1f6}.prefix-formulas span{color:#6a54b5;font-size:9px}.prefix-formulas b{display:block;margin:11px 0;color:#29334b;font:15px var(--mono)}.prefix-formulas p{margin:0;color:#59667b;font-size:10px}.range-explanation{padding:22px 25px;border:1px solid rgba(38,51,80,.10);border-radius:12px;background:#e8edf3}.range-explanation p{margin:0 0 13px;color:#566379;font-size:10px}.range-explanation>div{display:flex;align-items:center;gap:9px;font:14px var(--mono)}.range-explanation .kept{padding:9px;color:#2c6f9b;background:#d8e7f0;border-radius:7px}.range-explanation .minus{padding:9px;color:#a34f5a;background:#eedde1;border-radius:7px}.range-explanation b{color:#2d7b62}.range-explanation small{display:block;margin-top:12px;color:#657187}.algorithm-analysis{display:grid;grid-template-columns:repeat(4,1fr);margin:18px 0;border:1px solid rgba(38,51,80,.10);border-radius:11px;background:#e9edf3;overflow:hidden}.algorithm-analysis>div{padding:18px;text-align:center;border-right:1px solid rgba(38,51,80,.09)}.algorithm-analysis>div:last-child{border:0}.algorithm-analysis span,.algorithm-analysis b{display:block}.algorithm-analysis span{color:#68748a;font-size:8px}.algorithm-analysis b{margin-top:7px;color:#624aaf;font:15px var(--mono)}
.algorithm-coming { min-height:570px;padding:100px 25px 130px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.algorithm-coming>span{color:#6b54b7;font:9px var(--mono);letter-spacing:.13em}.algorithm-coming h2{margin:15px 0 12px;font-size:36px}.algorithm-coming p{max-width:650px;margin:0;color:#566379;font-size:12px;line-height:1.8}.algorithm-coming>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:25px}.algorithm-coming i{padding:7px 11px;border-radius:99px;color:#647086;background:#d9e0e8;font:normal 8px var(--mono)}
.algorithm-topic-intro{min-height:500px}.algorithm-topic-intro h2{max-width:760px}.algorithm-topic-intro i{color:#5e47a9;background:#e2dcef}

@media(max-width:1100px){.algorithm-hero{grid-template-columns:1fr;gap:40px}.algorithm-hero-card{max-width:520px}.algorithm-tabs{grid-template-columns:1fr 1fr}.algorithm-layout{grid-template-columns:225px minmax(0,1fr);gap:25px}.algorithm-concept-grid{grid-template-columns:1fr 1fr}.complexity-scale{grid-template-columns:1fr 1fr 1fr 1fr 1fr}.complexity-scale>i{display:none}.complexity-examples{grid-template-columns:1fr}.practice-guide ol{flex-wrap:wrap}}
@media(max-width:760px){.algorithm-hero{padding:65px 21px 45px}.algorithm-tabs{grid-template-columns:1fr;padding:24px 21px 0}.algorithm-layout{display:block;padding:30px 21px 95px}.algorithm-sidebar{position:static;margin-bottom:30px}.algorithm-sidebar nav{display:grid;grid-template-columns:1fr 1fr}.algorithm-concept-grid,.memory-cards,.memory-example,.prefix-formulas{grid-template-columns:1fr}.statement-demo{grid-template-columns:1fr}.statement-demo>div{border-right:0}.statement-demo>div:nth-last-child(-n+2){border-bottom:1px solid rgba(38,51,80,.09)}.statement-demo>div:last-child{border-bottom:0}.algorithm-checklist{grid-template-columns:1fr}.algorithm-checklist>span{grid-row:auto}.algorithm-checklist>div{border-left:0}.complexity-scale{grid-template-columns:1fr 1fr}.limit-table{overflow-x:auto}.limit-table>div{min-width:650px}.binary-principle{grid-template-columns:1fr}.binary-pattern>*{font-size:6px!important}.prefix-visual{overflow-x:auto}.prefix-visual>div{min-width:600px}.algorithm-analysis{grid-template-columns:1fr 1fr}.algorithm-analysis>div:nth-child(2){border-right:0}.algorithm-analysis>div:nth-child(-n+2){border-bottom:1px solid rgba(38,51,80,.09)}.range-explanation>div{align-items:flex-start;flex-direction:column}.trace-steps{flex-direction:column}.algorithm-lesson-pager{grid-template-columns:1fr}.algorithm-coming{padding:80px 21px 100px}}

/* Fixed two-level algorithm learning workspace */
.algorithm-sidebar-progress{margin:17px 0;padding:15px;border:1px solid rgba(38,51,80,.09);border-radius:10px;background:rgba(248,250,252,.52)}
.algorithm-sidebar-progress>div:first-child{display:flex;align-items:center;justify-content:space-between;color:#657187;font-size:9px}.algorithm-sidebar-progress b{color:#654caf;font:10px var(--mono)}.algorithm-sidebar-progress>div:nth-child(2){height:3px;margin:10px 0;background:#d3dae4;border-radius:99px;overflow:hidden}.algorithm-sidebar-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7358c5,#5c91d0);transition:width .35s}.algorithm-sidebar-progress p{margin:0!important;color:#778296!important;font-size:8px!important;line-height:1.6!important}
.algorithm-overview-link,.algorithm-planned-link{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:42px;padding:9px 10px;border-radius:8px;outline:0;color:#59667b}.algorithm-overview-link{margin-bottom:12px;background:#e2e6ed}.algorithm-overview-link b,.algorithm-planned-link b{color:#8993a5;font:10px var(--mono)}.algorithm-overview-link span,.algorithm-planned-link>span{font-size:11px}.algorithm-overview-link i{width:5px;height:5px;border-radius:50%;background:#a7afbd}.algorithm-overview-link:hover,.algorithm-overview-link.active{color:#513a9b;background:#ded9ec}.algorithm-overview-link.active i{background:#7155c5;box-shadow:0 0 0 4px rgba(113,85,197,.11)}.algorithm-overview-link:focus-visible{box-shadow:0 0 0 3px rgba(104,80,192,.17)}
.algorithm-sidebar .algorithm-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 15px;padding:0}.algorithm-sidebar .algorithm-tabs button{display:grid;grid-template-columns:23px 1fr;grid-template-rows:auto auto;column-gap:7px;min-height:58px;padding:10px;border-radius:9px}.algorithm-sidebar .algorithm-tabs button>span{font-size:9px}.algorithm-sidebar .algorithm-tabs button>b{font-size:10px}.algorithm-sidebar .algorithm-tabs button>small{font-size:7px}.algorithm-sidebar .algorithm-tabs button:hover,.algorithm-sidebar .algorithm-tabs button.active{transform:none;box-shadow:none}
.algorithm-sidebar nav[hidden]{display:none}.algorithm-planned-link{opacity:.58}.algorithm-planned-link i{color:#8c94a3;font:7px var(--mono);font-style:normal}.algorithm-sidebar nav{margin-top:0}
.algorithm-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}.algorithm-overview-grid article{min-height:190px;padding:24px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#f5f7fa}.algorithm-overview-grid article>b{color:#745abe;font:11px var(--mono)}.algorithm-overview-grid h3{margin:28px 0 9px;font-size:19px}.algorithm-overview-grid p{min-height:44px;margin:0;color:#5a677c;font-size:10px;line-height:1.75}.algorithm-overview-grid article>span{display:inline-flex;margin-top:18px;padding:5px 8px;border-radius:99px;color:#6b56b3;background:#e4dfee;font-size:8px}
.algorithm-overview-start{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:27px 29px;border-radius:14px;background:linear-gradient(115deg,#e5e0f1,#e3ebf3)}.algorithm-overview-start>div>span{color:#6e56b8;font:8px var(--mono);letter-spacing:.11em}.algorithm-overview-start h3{margin:8px 0 5px;font-size:20px}.algorithm-overview-start p{margin:0;color:#5a677c;font-size:10px}.algorithm-overview-start>a,.algorithm-overview-start>button{flex:0 0 auto;display:inline-flex;align-items:center;gap:22px;padding:13px 16px;border:0;border-radius:8px;color:white;background:#6d52bd;font-size:10px;font-weight:700;cursor:pointer;box-shadow:0 10px 23px rgba(91,69,171,.18);transition:.22s}.algorithm-overview-start>a:hover,.algorithm-overview-start>button:hover{transform:translateY(-2px);background:#6045b0}
.algorithm-roadmap-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin:30px 0;padding:24px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:#e9edf3}.algorithm-roadmap-steps span{display:grid;place-items:center;min-height:68px;padding:10px;border-radius:9px;color:#4f5c73;background:#f5f7fa;font-size:10px;font-weight:700}.algorithm-roadmap-steps i{color:#8069c4;font-style:normal}
.algorithm-reading-footer{display:none}
@media(min-width:761px){body.algorithm-reading-active{overflow:hidden}body.algorithm-reading-active>footer{display:none}.algorithms-page.reading-mode{height:100vh;min-height:0;overflow:hidden;animation:none}.algorithms-page.reading-mode>.algorithm-panel{height:calc(100vh - var(--header-h));min-height:0;overflow:hidden;animation:none}.algorithms-page.reading-mode .algorithm-layout{width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:24px 35px 24px 0;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:stretch;overflow:hidden}.algorithms-page.reading-mode .algorithm-sidebar{position:relative;top:auto;height:100%;min-height:0;margin:0;padding:20px 20px 20px 35px;border-left:0;border-radius:0 14px 14px 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#aab3c2 transparent}.algorithms-page.reading-mode .algorithm-content{height:100%;min-height:0;padding:4px 12px 0 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#aab3c2 transparent}.algorithms-page.reading-mode .algorithm-reading-footer{min-height:145px;margin-top:70px;padding:30px 0 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px;border-top:1px solid var(--line);color:#7f899e;background:transparent;font-size:11px}.algorithms-page.reading-mode .algorithm-reading-footer>span{justify-self:end;font-family:var(--mono)}.algorithms-page.reading-mode .algorithm-reading-footer p{text-align:center}}
@media(max-width:760px){.algorithm-sidebar .algorithm-tabs{grid-template-columns:1fr 1fr;padding:0}.algorithm-overview-grid{grid-template-columns:1fr}.algorithm-overview-start{align-items:flex-start;flex-direction:column}.algorithm-roadmap-steps{grid-template-columns:1fr}.algorithm-roadmap-steps i{transform:rotate(90deg);text-align:center}.algorithm-reading-footer{display:none}}

/* Single-chapter C++ reading */
.cpp-page .docs-layout { scroll-margin-top:var(--header-h); }
.cpp-page .docs-sidebar { height:auto;max-height:none;overflow:visible;scrollbar-width:thin;scrollbar-color:#aab3c2 transparent; }
.cpp-page .lesson { display:none;padding:0 0 20px;border:0;margin:0;animation:algorithmLessonIn .32s ease both; }
.cpp-page .lesson.active { display:block; }
.cpp-reading-footer { display:none; }
@media(min-width:761px){
  body.cpp-reading-active{overflow:hidden}
  body.cpp-reading-active>footer{display:none}
  .cpp-page.reading-mode{height:100vh;min-height:0;overflow:hidden;animation:none}
  .cpp-page.reading-mode .docs-hero{display:none}
  .cpp-page.reading-mode .docs-layout{height:calc(100vh - var(--header-h));min-height:0;margin:0 auto;padding:24px 35px;align-items:stretch;overflow:hidden}
  .cpp-page.reading-mode .docs-sidebar{position:relative;top:auto;height:100%;min-height:0;max-height:none;padding-right:10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  .cpp-page.reading-mode .docs-content{height:100%;min-height:0;padding-right:12px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#aab3c2 transparent}
  .cpp-page.reading-mode .cpp-reading-footer{min-height:145px;margin-top:70px;padding:30px 0 12px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px;border-top:1px solid var(--line);color:#7f899e;background:transparent;font-size:11px}
  .cpp-page.reading-mode .cpp-reading-footer>span{justify-self:end;font-family:var(--mono)}
  .cpp-page.reading-mode .cpp-reading-footer p{text-align:center}
}
@media(max-width:760px){.cpp-lesson-pager{grid-template-columns:1fr}.cpp-reading-footer{display:none}.cpp-overview-grid{grid-template-columns:1fr}.cpp-overview-grid article{min-height:auto}.cpp-overview-start{align-items:flex-start;flex-direction:column}.cpp-sidebar-course{background:rgba(255,255,255,.55)}}

/* Two-dimensional prefix sum */
.algorithm-subchapter-label { margin-top:70px;padding-top:38px;border-top:1px solid rgba(38,51,79,.11);color:#7359bd;font:9px var(--mono);letter-spacing:.12em; }
.algorithm-subchapter-title { margin-top:12px!important;font-size:30px!important; }
.prefix-2d-overview { display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:center;margin:25px 0;padding:25px 27px;border:1px solid rgba(38,51,80,.10);border-radius:13px;background:linear-gradient(115deg,#e8e3f2,#e4ebf2); }
.prefix-2d-overview>div:first-child>span { color:#6b54b6;font:9px var(--mono); }.prefix-2d-overview h4{margin:9px 0 10px;color:#2b354c;font-size:18px}.prefix-2d-overview p{margin:0;color:#58657a;font-size:10px;line-height:1.75}
.matrix-demo { display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:12px;border-radius:10px;background:rgba(238,242,247,.60); }.matrix-demo b{display:grid;place-items:center;min-height:38px;border-radius:6px;color:#526078;background:#dce3eb;font:10px var(--mono)}.matrix-demo b.selected{color:white;background:#765bc7;box-shadow:0 5px 12px rgba(93,70,177,.18)}
.prefix-2d-formula,.prefix-2d-query { padding:23px 26px;border:1px solid rgba(98,76,183,.15);border-radius:12px;background:#e8e3f2;overflow-x:auto; }.prefix-2d-formula>span,.prefix-2d-query>span{display:block;color:#6b54b6;font-size:9px;font-weight:700}.prefix-2d-formula>b,.prefix-2d-query>b{display:block;min-width:680px;margin:12px 0;color:#303a51;font:13px/1.7 var(--mono)}.prefix-2d-formula>p{margin:0;color:#58657a;font-size:10px;line-height:1.75}
.prefix-2d-steps { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 25px; }.prefix-2d-steps>div{padding:16px;border:1px solid rgba(38,51,80,.09);border-radius:9px;background:#e9edf3}.prefix-2d-steps b,.prefix-2d-steps span,.prefix-2d-steps code{display:block}.prefix-2d-steps b{color:#745abe;font:10px var(--mono)}.prefix-2d-steps span{margin:8px 0;color:#58657a;font-size:9px}.prefix-2d-steps code{color:#5e48a9;font-size:8px}
.prefix-2d-query { margin:18px 0 25px;background:linear-gradient(110deg,#e4e0f0,#e2ebf2); }.prefix-2d-query>div{display:flex;flex-wrap:wrap;gap:6px}.prefix-2d-query i{padding:5px 8px;border-radius:5px;color:#5e4aa8;background:rgba(248,250,252,.55);font:normal 8px var(--mono)}
@media(max-width:760px){.prefix-2d-overview{grid-template-columns:1fr;padding:20px}.prefix-2d-steps{grid-template-columns:1fr 1fr}.prefix-2d-formula>b,.prefix-2d-query>b{min-width:620px;font-size:11px}}

/* Personal learning dashboard */
.profile-page{color:#172039;background:linear-gradient(145deg,#e5e1ef 0%,#dce7f0 48%,#e4e9ef 100%)}
.profile-shell{width:min(1320px,100%);margin:0 auto;padding:55px clamp(22px,4vw,58px) 110px}
.profile-welcome{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:60px;align-items:center;min-height:335px;padding:50px 55px;border:1px solid rgba(41,53,82,.11);border-radius:22px;background:linear-gradient(120deg,rgba(247,245,252,.86),rgba(235,242,248,.78));box-shadow:0 24px 55px rgba(48,61,94,.08);overflow:hidden}
.profile-welcome::after{content:"";position:absolute;width:330px;height:330px;right:-95px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(117,83,205,.18),transparent 68%)}
.profile-welcome-copy{position:relative;z-index:1}.profile-eyebrow{color:#6951b4;font:9px var(--mono);letter-spacing:.16em}.profile-welcome h1{margin:12px 0 14px;font-size:clamp(42px,5vw,67px);letter-spacing:-.055em}.profile-welcome h1 span{color:#6d50bf}.profile-welcome-copy>p{max-width:650px;margin:0;color:#59667b;font-size:13px;line-height:1.85}
.profile-welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:27px}.profile-welcome-actions a{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:43px;padding:0 17px;border-radius:8px;font-size:10px;font-weight:700;transition:.22s}.profile-primary-action{color:white;background:#6e52c3;box-shadow:0 10px 22px rgba(91,68,171,.20)}.profile-primary-action:hover{transform:translateY(-2px);background:#6044b6}.profile-secondary-action{color:#5e4aa6;border:1px solid rgba(100,76,181,.17);background:rgba(248,250,252,.62)}.profile-secondary-action:hover{background:white}
.profile-overall-card{position:relative;z-index:1;display:grid;grid-template-columns:138px 1fr;gap:24px;align-items:center;padding:25px;border:1px solid rgba(52,66,95,.10);border-radius:17px;background:rgba(248,250,252,.62)}.profile-ring{--profile-progress:0deg;display:grid;place-content:center;width:138px;height:138px;border-radius:50%;text-align:center;background:radial-gradient(circle at center,#eef1f6 59%,transparent 60%),conic-gradient(#7153c5 var(--profile-progress),#d7dce5 0)}.profile-ring strong,.profile-ring span{display:block}.profile-ring strong{font:700 25px var(--mono);color:#5f47ad}.profile-ring span{margin-top:4px;color:#7a8495;font-size:8px}.profile-overall-card small{color:#7a8496;font-size:8px}.profile-overall-card b{display:block;margin:8px 0 7px;font-size:16px}.profile-overall-card p{margin:0;color:#6b7689;font-size:9px;line-height:1.6}
.profile-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin-top:28px}.profile-main-column,.profile-side-column{min-width:0}.profile-section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:6px 0 17px}.profile-section-heading span{color:#6951b4;font:8px var(--mono);letter-spacing:.13em}.profile-section-heading h2{margin:6px 0 0;font-size:24px}.profile-section-heading>small{color:#818a9a;font-size:9px}
.profile-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.profile-stat-card{position:relative;display:grid;grid-template-columns:48px 1fr;gap:13px;min-height:145px;padding:21px;border:1px solid rgba(39,52,80,.10);border-radius:14px;background:#edf1f6;overflow:hidden}.profile-stat-card::after{content:"";position:absolute;inset:auto -30px -45px auto;width:100px;height:100px;border-radius:50%;opacity:.22}.profile-stat-card.violet::after{background:#8a6bd6}.profile-stat-card.blue::after{background:#5e9fc4}.profile-stat-card.green::after{background:#5ca984}.profile-stat-card.orange::after{background:#d79965}.profile-stat-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;color:#664db4;background:#ded8ee;font:700 10px var(--mono)}.profile-stat-card.blue .profile-stat-icon{color:#397da5;background:#d9e8f0}.profile-stat-card.green .profile-stat-icon{color:#397e61;background:#d8e9e0}.profile-stat-card.orange .profile-stat-icon{color:#a36233;background:#f0dfd1}.profile-stat-card small{display:block;margin-bottom:7px;color:#778294;font-size:8px}.profile-stat-card strong{color:#2a344b;font:700 26px var(--mono)}.profile-stat-card div>span{margin-left:4px;color:#798395;font-size:8px}.profile-stat-card>p{grid-column:1/-1;margin:4px 0 0;color:#6e798c;font-size:8px}.profile-mini-track{grid-column:1/-1;height:5px;border-radius:99px;background:#d9dee6;overflow:hidden}.profile-mini-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7356c7,#5795c0);transition:width .45s}
.profile-next-card{display:grid;grid-template-columns:68px minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:22px;padding:25px 27px;border:1px solid rgba(98,76,183,.15);border-radius:15px;background:linear-gradient(110deg,#e9e4f5,#e5edf5)}.profile-next-number{display:grid;place-items:center;width:62px;height:62px;border-radius:15px;color:#6c52bb;background:rgba(248,250,252,.58);font:600 18px var(--mono)}.profile-next-card>div:nth-child(2)>span{color:#6c55b8;font-size:8px}.profile-next-card h3{margin:7px 0 6px;font-size:18px}.profile-next-card p{margin:0;color:#68758a;font-size:9px}.profile-next-card>a{display:flex;align-items:center;gap:18px;padding:11px 14px;border-radius:8px;color:white;background:#6d51bf;font-size:9px;font-weight:700}.profile-next-card>a:hover{transform:translateY(-2px)}
.profile-path-card{margin-top:25px;padding:27px;border:1px solid rgba(39,52,80,.10);border-radius:15px;background:#edf1f6}.profile-roadmap{display:grid;grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr;align-items:center}.profile-roadmap article{display:flex;align-items:center;gap:11px;padding:13px;border-radius:10px;background:#e3e8ef}.profile-roadmap article.active{background:#e3dff0}.profile-roadmap article>b{display:grid;place-items:center;width:31px;height:31px;border-radius:8px;color:#8690a1;background:#f0f3f7;font:9px var(--mono)}.profile-roadmap article.active>b{color:white;background:#7154c3}.profile-roadmap span,.profile-roadmap small{display:block}.profile-roadmap span{color:#384258;font-size:10px;font-weight:700}.profile-roadmap small{margin-top:4px;color:#838c9c;font-size:7px}.profile-roadmap>i{height:1px;background:#cbd1da}
.profile-side-column{display:flex;flex-direction:column;gap:14px}.profile-identity-card,.profile-motto-card{padding:25px;border:1px solid rgba(39,52,80,.10);border-radius:15px;background:#edf1f6}.profile-identity-card{text-align:center}.profile-avatar{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 13px;border-radius:24px;color:white;background:linear-gradient(145deg,#7757cb,#548bb9);box-shadow:0 13px 25px rgba(92,69,173,.22);font:700 28px var(--mono)}.profile-identity-card h2{margin:0;font-size:20px}.profile-identity-card>p{margin:7px 0 12px;color:#778294;font:8px var(--mono);word-break:break-all}.profile-member-badge{display:inline-block;padding:6px 9px;border-radius:99px;color:#624aad;background:#e1dced;font-size:7px;font-weight:700}.profile-identity-card dl{margin:22px 0 0;padding-top:8px;border-top:1px solid rgba(41,53,81,.09);text-align:left}.profile-identity-card dl>div{display:grid;grid-template-columns:68px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid rgba(41,53,81,.07)}.profile-identity-card dl>div:last-child{border:0}.profile-identity-card dt{color:#8a93a2;font-size:8px}.profile-identity-card dd{margin:0;color:#414c62;font-size:9px;text-align:right;word-break:break-word}.profile-motto-card>span{color:#6d55ba;font:8px var(--mono);letter-spacing:.12em}.profile-motto-card blockquote{margin:15px 0;color:#47536a;font-size:12px;line-height:1.8}.profile-motto-card small{color:#8a93a2;font-size:8px}.profile-logout-button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 17px;border:1px solid rgba(178,78,91,.13);border-radius:11px;color:#a64e59;background:#eddee2;font-size:9px;cursor:pointer;transition:.2s}.profile-logout-button:hover{transform:translateY(-2px);background:#e8d5da}.profile-logout-button b{font-size:14px}
.header-cta.logged-in{padding:6px 9px 6px 7px;border-radius:99px}.header-avatar-mini{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;color:white;background:linear-gradient(145deg,#7858cc,#538fbd);font:700 10px var(--mono)}.header-user-copy{display:flex;align-items:center;gap:8px}.header-user-copy>b{font-size:10px}.header-profile-arrow{font-size:14px;opacity:.55}.auth-logout-hint{display:none}
@media(max-width:1050px){.profile-welcome{grid-template-columns:1fr;gap:32px}.profile-overall-card{max-width:430px}.profile-dashboard{grid-template-columns:1fr}.profile-side-column{display:grid;grid-template-columns:1fr 1fr}.profile-logout-button{grid-column:1/-1}.profile-roadmap{grid-template-columns:1fr 1fr}.profile-roadmap>i{display:none}.profile-roadmap article{margin:4px}}
@media(max-width:760px){.header-cta.logged-in{display:flex;position:absolute;right:61px;max-width:145px}.header-user-copy>b{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-shell{padding:28px 18px 80px}.profile-welcome{padding:31px 23px;border-radius:16px}.profile-welcome h1{font-size:41px}.profile-overall-card{grid-template-columns:105px 1fr;padding:18px}.profile-ring{width:105px;height:105px}.profile-dashboard{margin-top:20px}.profile-stat-grid{grid-template-columns:1fr}.profile-next-card{grid-template-columns:54px 1fr;padding:21px}.profile-next-number{width:50px;height:50px}.profile-next-card>a{grid-column:1/-1;justify-content:center}.profile-side-column{grid-template-columns:1fr}.profile-roadmap{grid-template-columns:1fr}.profile-roadmap article{margin:4px 0}}

/* Score leaderboard */
.leaderboard-page{color:#172039;background:linear-gradient(145deg,#e6e2f0,#dce7f0 48%,#e3e9ef)}.leaderboard-shell{width:min(1180px,100%);margin:0 auto;padding:65px 30px 120px}.leaderboard-hero{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:60px;align-items:end;padding:44px 48px;border:1px solid rgba(41,53,82,.11);border-radius:20px;background:linear-gradient(120deg,rgba(247,245,252,.85),rgba(234,242,248,.78));box-shadow:0 22px 50px rgba(48,61,94,.07)}.leaderboard-hero>div:first-child>span{color:#6a52b6;font:9px var(--mono);letter-spacing:.15em}.leaderboard-hero h1{margin:12px 0 13px;font-size:clamp(45px,6vw,68px);letter-spacing:-.055em}.leaderboard-hero p{max-width:650px;margin:0;color:#59667b;font-size:12px;line-height:1.85}.leaderboard-rule{display:flex;flex-direction:column;gap:8px;padding:19px 21px;border-radius:13px;background:rgba(248,250,252,.58)}.leaderboard-rule b{margin-bottom:3px;color:#5f48ab;font-size:10px}.leaderboard-rule span{color:#68758a;font-size:8px}
.leaderboard-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:end;max-width:850px;margin:42px auto}.leaderboard-podium-card{position:relative;min-height:210px;padding:26px;text-align:center;border:1px solid rgba(40,53,81,.10);border-radius:16px;background:#edf1f6}.leaderboard-podium-card.rank-1{min-height:240px;padding-top:34px;background:linear-gradient(145deg,#e6def4,#edf1f6);box-shadow:0 18px 40px rgba(77,59,144,.10)}.leaderboard-podium-rank{display:inline-block;padding:5px 9px;border-radius:99px;color:#7259bb;background:#dfdaed;font-size:7px}.leaderboard-podium-card.rank-1 .leaderboard-podium-rank{color:#8a621f;background:#eee0bd}.leaderboard-podium-avatar{display:grid;place-items:center;width:58px;height:58px;margin:14px auto 10px;border-radius:18px;color:white;background:linear-gradient(145deg,#7658c7,#5591bc);font:700 20px var(--mono)}.leaderboard-podium-card h3{margin:0;font-size:16px}.leaderboard-podium-card p{margin:5px 0 12px;color:#758093;font-size:8px}.leaderboard-podium-card strong{display:block;color:#6048ad;font:700 18px var(--mono)}.leaderboard-podium-card small{display:block;margin-top:5px;color:#8a93a2;font-size:7px}
.leaderboard-podium[data-count="2"]{grid-template-columns:repeat(2,1fr);max-width:600px}.leaderboard-podium[data-count="1"]{grid-template-columns:1fr;max-width:300px}
.leaderboard-table-card{border:1px solid rgba(40,53,81,.10);border-radius:17px;background:#edf1f6;overflow:hidden}.leaderboard-table-heading{display:flex;align-items:end;justify-content:space-between;padding:27px 30px}.leaderboard-table-heading span{color:#6a52b5;font:8px var(--mono);letter-spacing:.13em}.leaderboard-table-heading h2{margin:6px 0 0;font-size:25px}.leaderboard-table-heading button{padding:9px 13px;border:1px solid rgba(101,77,184,.16);border-radius:7px;color:#614aad;background:#e4dff0;font-size:8px;cursor:pointer}.leaderboard-table-head,.leaderboard-row{display:grid;grid-template-columns:65px minmax(160px,1.35fr) minmax(90px,.7fr) minmax(150px,1fr) 90px 75px;gap:15px;align-items:center}.leaderboard-table-head{min-height:43px;padding:0 27px;color:#858f9f;background:#dfe5ec;font:8px var(--mono)}.leaderboard-row{min-height:72px;padding:10px 27px;border-top:1px solid rgba(40,53,81,.07);color:#58657a;font-size:9px}.leaderboard-row:hover{background:#e9e5f3}.leaderboard-row.is-current-user{background:#e5e0f1}.leaderboard-row-rank{color:#7b8596;font:600 12px var(--mono)}.leaderboard-row:nth-child(-n+3) .leaderboard-row-rank{color:#6b51b6}.leaderboard-identity{display:flex;align-items:center;gap:11px;min-width:0}.leaderboard-identity>span{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;border-radius:10px;color:white;background:linear-gradient(145deg,#7859c8,#5891b9);font:700 11px var(--mono)}.leaderboard-identity b,.leaderboard-identity small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard-identity b{color:#303a51;font-size:10px}.leaderboard-identity small{max-width:160px;margin-top:3px;color:#8a93a2;font-size:7px}.leaderboard-row>strong{text-align:right;color:#6048ad;font:700 14px var(--mono)}.leaderboard-loading{padding:50px;text-align:center;color:#7b8596;font-size:10px}.leaderboard-notice{margin:15px 5px 0;color:#7a8597;font-size:8px;text-align:center}
@media(max-width:900px){.leaderboard-hero{grid-template-columns:1fr;gap:25px}.leaderboard-rule{max-width:400px}.leaderboard-podium{gap:8px}.leaderboard-table-card{overflow-x:auto}.leaderboard-table-heading,.leaderboard-table-head,.leaderboard-list{min-width:780px}}
@media(max-width:760px){.leaderboard-shell{padding:30px 18px 90px}.leaderboard-hero{padding:30px 23px}.leaderboard-podium{grid-template-columns:1fr;align-items:stretch}.leaderboard-podium-card,.leaderboard-podium-card.rank-1{min-height:0;padding:22px}.leaderboard-podium-card.rank-1{order:-1}.leaderboard-podium-avatar{width:50px;height:50px}.leaderboard-table-card{border-radius:13px}}

/* Admin access gate */
.admin-nav-link[hidden]{display:none!important}
.admin-access-state{min-height:calc(100vh - 150px);padding:90px 30px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.admin-access-state[hidden],.admin-shell[hidden]{display:none}
.admin-access-icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:22px;border-radius:50%;background:#eee5f7;color:#684db3;font:700 30px var(--mono)}
.admin-access-state>span{color:#7356bd;font:700 9px var(--mono);letter-spacing:.16em}
.admin-access-state h1{margin:12px 0 10px;font-size:34px}
.admin-access-state p{max-width:520px;margin:0 0 25px;color:#6e788b;font-size:11px;line-height:1.8}