/* ============================================
   Variables
   ============================================ */
:root { --bar: 56px; --aside: 220px; --max: 780px; --r: 8px; --t: .15s ease; }

[data-theme="dark"] {
    --bg: #0c0d12; --bg1: #13141c; --bg2: #1a1c28; --bg3: #242736;
    --border: #232637; --border2: #2e3148;
    --tx: #cdd6f4; --tx2: #8890b0; --tx3: #555d80;
    --hd: #e8ecf8;
    --accent: #7aa2f7; --accent2: #9d7cd8;
    --green: #9ece6a; --yellow: #e0af68; --yellow-deep: #c49030; --red: #f7768e; --orange: #ff9e64;
    --code-bg: #0f1019; --code-border: #1e2030;
    --il-bg: #1e2030; --il-color: #ff9e64;
    --bq-bg: #151825; --bq-border: #7aa2f7;
}

[data-theme="light"] {
    --bg: #fafbfe; --bg1: #ffffff; --bg2: #f0f2f8; --bg3: #e2e5ef;
    --border: #dfe2ec; --border2: #c8ccd9;
    --tx: #2e3440; --tx2: #5c6370; --tx3: #9ca0af;
    --hd: #1a1f2e;
    --accent: #3b6fd4; --accent2: #7c3aed;
    --green: #2b8a3e; --yellow: #b5890a; --yellow-deep: #c49030; --red: #e03131; --orange: #d9480f;
    --code-bg: #f4f5fa; --code-border: #dfe2ec;
    --il-bg: #edf0f7; --il-color: #c75000;
    --bq-bg: #eef3ff; --bq-border: #3b6fd4;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 20px); }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--tx); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .logo, .hero h1, .hero-sub, .section-title, .guide-title { font-family: 'Architects Daughter', cursive; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ============================================
   Header
   ============================================ */
header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--bar); background: var(--bg1);
    border-bottom: 1px solid var(--border); z-index: 100;
}
.header-inner {
    max-width: 1200px; margin: 0 auto; height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px;
}
.logo {
    font-weight: 400; font-size: 22px; color: var(--hd);
    text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.logo-img { height: 36px; width: auto; display: block; }
.logo-tld { color: var(--yellow-deep); }
.theme-btn {
    background: none; border: none; color: var(--tx2);
    cursor: pointer; padding: 8px; border-radius: 6px;
    display: flex; align-items: center; transition: all var(--t);
}
.theme-btn:hover { background: var(--bg2); color: var(--tx); }
[data-theme="dark"] .sun { display: block; } [data-theme="dark"] .moon { display: none; }
[data-theme="light"] .sun { display: none; } [data-theme="light"] .moon { display: block; }

/* ============================================
   Layout
   ============================================ */
.page { display: flex; margin-top: var(--bar); min-height: calc(100vh - var(--bar)); }
main { flex: 1; min-width: 0; max-width: var(--max); margin: 0 auto; padding: 40px 32px 100px; }
.guide .page { padding-right: var(--aside); }

/* ============================================
   Home
   ============================================ */
.hero { padding: 16px 0 8px; }
.hero h1 {
    font-size: 56px; font-weight: 400; letter-spacing: -0.01em;
    color: var(--hd); margin-bottom: 12px; line-height: 1.1;
}
.hero-sub { font-size: 20px; color: var(--tx2); font-weight: 400; margin-bottom: 6px; line-height: 1.4; }
.hero-desc { font-size: 15px; color: var(--tx2); line-height: 1.7; max-width: 600px; }

.sections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 56px; align-items: start; }
.section { margin-top: 0; }
.section-title { font-size: 28px; font-weight: 400; color: var(--hd); margin-bottom: 6px; border: none; padding: 0; }
.section-desc { font-size: 15px; color: var(--tx2); margin-bottom: 20px; max-width: 560px; line-height: 1.6; }

/* Home accordion */
.home-accordion { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.acc-section { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: border-color var(--t); }
.acc-section:hover { border-color: var(--border2); }
.acc-section.open { border-color: var(--accent); }
.acc-header {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; background: none; border: none; cursor: pointer;
    color: var(--hd); text-align: left; gap: 12px;
}
.acc-header:hover { background: var(--bg2); }
.acc-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.acc-title { font-size: 16px; font-weight: 600; color: var(--hd); }
.acc-count { font-size: 12px; color: var(--tx2); background: var(--bg2); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.acc-chevron { flex-shrink: 0; color: var(--tx2); transition: transform 0.2s; }
.acc-section.open .acc-chevron { transform: rotate(90deg); }
.acc-body { display: none; padding: 0 20px 20px; }
.acc-section.open .acc-body { display: block; }
.acc-desc { font-size: 14px; color: var(--tx2); line-height: 1.5; margin: 0; padding: 0 20px 10px; }
.acc-quicklinks { font-size: 13px; color: var(--tx2); margin: 0; padding: 0 20px 16px; }
.acc-quicklinks a { color: var(--accent); text-decoration: none; }
.acc-quicklinks a:hover { text-decoration: underline; }
.coming-soon-note { font-size: 14px; color: var(--tx2); opacity: 0.6; font-style: italic; margin-top: 8px; }

.guide-list { display: flex; flex-direction: column; gap: 2px; }
.guide-row {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: var(--r);
    text-decoration: none; color: inherit; transition: background var(--t);
}
.guide-row:hover { background: var(--bg2); }
.guide-title { flex: 1; font-weight: 600; color: var(--hd); font-size: 16px; }
.guide-meta { font-size: 13px; color: var(--tx3); font-family: 'Inter', sans-serif; }
.arrow { color: var(--tx3); }

/* ============================================
   Sidebar TOC
   ============================================ */
aside {
    position: fixed; top: var(--bar); right: 0; bottom: 0;
    width: var(--aside); padding: 28px 16px; overflow-y: auto;
    border-left: 1px solid var(--border); background: var(--bg);
}
.toc-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--tx3); margin-bottom: 14px; padding-left: 10px;
}
.toc-link {
    display: block; padding: 3px 10px; font-size: 13px; color: var(--tx3);
    text-decoration: none; border-left: 2px solid transparent;
    transition: all var(--t); line-height: 1.35; margin-bottom: 2px;
}
.toc-link:hover { color: var(--tx); }
.toc-link.active { color: var(--accent); border-left-color: var(--accent); }
.toc-link.toc-problem { font-size: 12px; padding-left: 18px; color: var(--tx3); }

/* Problems index */
.problems-index { margin: 40px 0 8px; }
.problems-index h2 { margin-top: 0; }
.index-table { width: auto !important; min-width: 320px; }
.index-table td:first-child { width: 40px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--tx3); }
.index-table td a { color: var(--tx); text-decoration: none; font-weight: 500; }
.index-table td a:hover { color: var(--accent); }

/* Side logo — fixed in left margin on guide pages */
.side-logo {
    position: fixed;
    top: var(--bar); bottom: 0; left: 0;
    width: calc((100vw - var(--aside) - var(--max)) / 2);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 32px;
    pointer-events: none; overflow: hidden;
}
.side-logo img { max-width: 100%; max-height: 180px; object-fit: contain; opacity: 0.35; }

/* Breadcrumb */
.crumb {
    font-size: 13px; color: var(--tx3); margin-bottom: 20px;
    position: sticky; top: var(--bar); z-index: 50;
    background: var(--bg); padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
}

/* ============================================
   Article typography
   ============================================ */
article h1 {
    font-size: 36px; font-weight: 400; color: var(--hd);
    margin-bottom: 4px; padding-bottom: 16px;
    border-bottom: 2px solid var(--border); line-height: 1.2;
}
article h2 {
    font-size: 24px; font-weight: 400; color: var(--hd);
    margin-top: 52px; margin-bottom: 14px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border); line-height: 1.3;
}
article h3 { font-size: 19px; font-weight: 400; color: var(--hd); margin-top: 28px; margin-bottom: 10px; }
article h4 { font-size: 17px; font-weight: 600; color: var(--hd); margin-top: 16px; margin-bottom: 6px; }
article p { margin-bottom: 14px; }
article strong { color: var(--hd); font-weight: 600; }
article a { color: var(--accent); text-decoration: none; }
article a:hover { text-decoration: underline; }
article hr { border: none; border-top: 1px solid var(--border); margin: 36px 0; }
article ul, article ol { padding-left: 22px; margin-bottom: 14px; }
article li { margin-bottom: 3px; }
article li::marker { color: var(--tx3); }

/* Blockquote */
article blockquote {
    border-left: 3px solid var(--bq-border); background: var(--bq-bg);
    padding: 12px 16px; margin: 16px 0; border-radius: 0 var(--r) var(--r) 0;
}
article blockquote p { margin: 0; color: var(--tx2); }

/* Tables */
article table {
    width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px;
    border: 1px solid var(--border); border-radius: var(--r); overflow: hidden;
}
article thead th {
    background: var(--bg2); color: var(--hd); font-weight: 600;
    text-align: left; padding: 8px 12px; font-size: 14px;
    border-bottom: 1px solid var(--border);
}
article tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
article tbody tr:last-child td { border-bottom: none; }
article tbody tr:nth-child(even) { background: var(--bg1); }

/* Inline code */
article code:not([class*="language-"]) {
    background: var(--il-bg); color: var(--il-color);
    padding: 1px 6px; border-radius: 4px; font-size: 13px;
    font-family: 'JetBrains Mono', monospace; font-weight: 500;
}

/* Code blocks */
article pre {
    position: relative; background: var(--code-bg) !important;
    border: 1px solid var(--code-border); border-radius: var(--r);
    margin: 16px 0; overflow: hidden;
}
article pre code {
    display: block; padding: 18px 20px; overflow-x: auto;
    font-size: 13px; line-height: 1.6;
    font-family: 'JetBrains Mono', monospace;
    font-variant-ligatures: none;
    background: none !important; color: inherit; border-radius: 0;
}
article pre[data-lang]::after {
    content: attr(data-lang); position: absolute; top: 6px; right: 56px;
    font-size: 10px; font-weight: 600; color: var(--tx3);
    text-transform: uppercase; letter-spacing: 0.05em; pointer-events: none;
}
.cp {
    position: absolute; top: 6px; right: 6px;
    background: var(--bg2); border: 1px solid var(--border); color: var(--tx3);
    cursor: pointer; padding: 3px 10px; border-radius: 4px; font-size: 11px;
    font-family: 'Inter', sans-serif; opacity: 0; transition: opacity var(--t);
}
article pre:hover .cp { opacity: 1; }
.cp:hover { color: var(--tx); background: var(--bg3); }
.cp.copied { color: var(--green); }

/* ============================================
   Prev / Next
   ============================================ */
.pn { display: flex; gap: 12px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.pn-link {
    flex: 1; padding: 14px 18px; background: var(--bg1); border: 1px solid var(--border);
    border-radius: var(--r); text-decoration: none; transition: all var(--t);
    color: var(--accent); font-weight: 600; font-size: 15px;
}
.pn-link:hover { border-color: var(--accent); background: var(--bg2); }
.pn-link.next { text-align: right; }
.pn-link small { display: block; font-size: 11px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }

/* ============================================
   Static pages (About, Privacy, Resources, Support)
   ============================================ */
.static-page { max-width: 680px; margin: 48px auto 80px; padding: 0 24px; }
.static-page h1 { font-size: 36px; margin-bottom: 16px; color: var(--hd); }
.static-page h2 { font-size: 22px; margin: 36px 0 10px; color: var(--hd); border: none; padding: 0; }
.static-page p { margin-bottom: 14px; color: var(--tx); line-height: 1.75; }
.static-page ul { margin: 0 0 14px 20px; }
.static-page li { margin-bottom: 6px; color: var(--tx); line-height: 1.75; }
.static-page a:not(.resource-btn) { color: var(--accent); text-decoration: none; }
.static-page a:not(.resource-btn):hover { text-decoration: underline; }
.static-page code { background: var(--il-bg); color: var(--il-color); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

/* Resource cards */
.resource-grid { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.resource-card {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--bg1); border: 1px solid var(--border);
    border-radius: var(--r); padding: 20px;
    transition: border-color var(--t);
}
.resource-card:hover { border-color: var(--accent); }
.resource-num {
    flex-shrink: 0; width: 32px; height: 32px;
    background: var(--bg2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--tx2);
}
.resource-body { flex: 1; min-width: 0; }
.resource-title { font-weight: 700; font-size: 16px; color: var(--hd); margin-bottom: 2px; }
.resource-author { font-size: 13px; color: var(--tx2); margin-bottom: 8px; }
.resource-desc { font-size: 14px; color: var(--tx); line-height: 1.6; margin-bottom: 8px; }
.resource-note { font-size: 13px; color: var(--tx2); line-height: 1.6; margin-bottom: 12px; font-style: italic; }
.resource-btn {
    display: inline-block; padding: 6px 14px;
    background: var(--yellow-deep); color: #fff;
    border-radius: 6px; font-size: 13px; font-weight: 600;
    text-decoration: none; transition: opacity var(--t);
}
.resource-btn:hover { opacity: 0.85; text-decoration: none; }
.resource-img { flex-shrink: 0; width: 80px; }
.resource-img img { width: 80px; height: 100px; object-fit: cover; border-radius: 4px; display: block; }

/* Recommendation breadcrumb */
.rec-breadcrumb { font-size: 13px; color: var(--tx2); margin-bottom: 20px; }
.rec-breadcrumb a { color: var(--tx2); text-decoration: none; }
.rec-breadcrumb a:hover { color: var(--accent); }
.rec-breadcrumb span { margin: 0 6px; }

/* Support placeholder */
.support-placeholder {
    margin-top: 40px; padding: 48px 24px; text-align: center;
    background: var(--bg1); border: 1px dashed var(--border2);
    border-radius: var(--r); color: var(--tx2);
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    text-align: center; padding: 28px 24px;
    margin-top: 48px; border-top: 1px solid var(--border);
    font-size: 12px; color: var(--tx3); line-height: 1.6;
}
.site-footer a { color: var(--tx2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ============================================
   Prism tokens
   ============================================ */
[data-theme="dark"] .token.comment, [data-theme="dark"] .token.prolog { color: #565f89; font-style: italic; }
[data-theme="dark"] .token.keyword { color: #bb9af7; }
[data-theme="dark"] .token.function { color: #7aa2f7; }
[data-theme="dark"] .token.string { color: #9ece6a; }
[data-theme="dark"] .token.number { color: #ff9e64; }
[data-theme="dark"] .token.operator { color: #89ddff; }
[data-theme="dark"] .token.class-name { color: #e0af68; }
[data-theme="dark"] .token.punctuation { color: #a9b1d6; }
[data-theme="dark"] .token.boolean { color: #ff9e64; }
[data-theme="dark"] .token.annotation { color: #e0af68; }

[data-theme="light"] .token.comment, [data-theme="light"] .token.prolog { color: #6a737d; font-style: italic; }
[data-theme="light"] .token.keyword { color: #d73a49; }
[data-theme="light"] .token.function { color: #6f42c1; }
[data-theme="light"] .token.string { color: #22863a; }
[data-theme="light"] .token.number { color: #005cc5; }
[data-theme="light"] .token.operator { color: #d73a49; }
[data-theme="light"] .token.class-name { color: #6f42c1; }
[data-theme="light"] .token.punctuation { color: #24292e; }

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1200px) {
    .side-logo { display: none; }
}
@media (max-width: 1000px) {
    .guide .page { padding-right: 0; }

    /* Sidebar becomes a slide-up bottom drawer on mobile */
    aside {
        display: block;
        position: fixed;
        top: auto; right: 0; bottom: 0; left: 0;
        width: 100%; max-height: 65vh;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        padding: 8px 20px 32px;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 200;
    }
    aside::before {
        content: '';
        display: block;
        width: 36px; height: 4px;
        background: var(--border2);
        border-radius: 2px;
        margin: 8px auto 16px;
    }
    aside.mobile-open { transform: translateY(0); }
}

/* Backdrop — shared, hidden by default */
.toc-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 199;
}
.toc-backdrop.active { display: block; }

/* Mobile FAB — hidden on desktop, shown on mobile */
.toc-fab {
    display: none;
    position: fixed;
    bottom: 24px; right: 20px;
    z-index: 150;
    align-items: center; gap: 6px;
    padding: 10px 16px;
    background: var(--accent); color: #fff;
    border: none; border-radius: 20px;
    font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: transform var(--t), opacity var(--t);
}
.toc-fab:hover { opacity: 0.9; }
@media (max-width: 1000px) {
    .toc-fab { display: flex; }
}

@media (max-width: 640px) {
    main { padding: 24px 16px 60px; }
    .hero { padding: 12px 0 6px; }
    .hero h1 { font-size: 36px; }
    .hero-sub { font-size: 18px; }
    .section-title { font-size: 22px; }
    .pn { flex-direction: column; }
    article h1 { font-size: 28px; }
    article h2 { font-size: 20px; margin-top: 36px; }
}

/* ============================================
   Section Cards (intro / guide pages)
   ============================================ */
.sd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 32px 0;
}
.sd-card {
    background: var(--bg1);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 22px;
    text-decoration: none;
    display: block;
    transition: border-color var(--t), background var(--t);
}
.sd-card:hover { border-color: var(--accent); background: var(--bg2); }
.sd-card-num {
    font-size: 11px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px;
}
.sd-card-title { font-size: 15px; font-weight: 700; color: var(--hd); margin-bottom: 8px; }
.sd-card-desc { font-size: 13px; color: var(--tx2); line-height: 1.55; margin-bottom: 12px; }
.sd-card-when {
    font-size: 12px; color: var(--tx3); line-height: 1.5;
    border-top: 1px solid var(--border); padding-top: 10px;
}
.sd-card-when strong { color: var(--tx2); }
@media (max-width: 640px) {
    .sd-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Practice Mode Toggle Button
   ============================================ */
.crumb {
    display: flex; align-items: center; justify-content: space-between;
}
.crumb-path { font-size: 13px; color: var(--tx3); }
.crumb-path a { color: var(--tx2); text-decoration: none; }
.crumb-path a:hover { color: var(--accent); }
.crumb-path span { margin: 0 6px; }

.practice-toggle {
    padding: 4px 12px; background: transparent;
    border: 1px solid var(--yellow-deep); border-radius: 20px;
    color: var(--yellow-deep); font-size: 12px; font-family: 'Inter', sans-serif;
    cursor: pointer; transition: all var(--t); flex-shrink: 0;
}
.practice-toggle:hover { opacity: 0.8; }
.practice-toggle.active {
    background: var(--yellow-deep); color: var(--bg); border-color: var(--yellow-deep);
}

/* ============================================
   Practice Mode — Study Sections
   ============================================ */

/* STUDY MODE (default): wrappers are transparent — page looks exactly the same */
.study-section { margin: 0; }
.study-toggle { display: none; }
.study-section .study-body { display: block; padding: 0; }
.study-body > h2:first-child { margin-top: 52px; } /* restore normal article h2 margin */

/* PRACTICE MODE: sections become collapsible boxes */
body.practice-mode .study-section {
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
body.practice-mode .study-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; cursor: pointer;
    background: var(--bg1); user-select: none;
    transition: background var(--t);
}
body.practice-mode .study-toggle:hover { background: var(--bg2); }
body.practice-mode .study-section.open .study-toggle { border-bottom: 1px solid var(--border); }
.study-icon { font-size: 10px; color: var(--tx3); width: 10px; flex-shrink: 0; }
.study-label { font-size: 14px; color: var(--tx2); font-family: 'Architects Daughter', cursive; }
body.practice-mode .study-section .study-body { display: none; padding: 0 16px 16px; }
body.practice-mode .study-section.open .study-body { display: block; }
body.practice-mode .study-body > h2:first-child { margin-top: 20px; }

/* ============================================
   Practice Mode — Reveal Blocks
   ============================================ */

/* STUDY MODE: reveal wrappers are transparent */
.reveal-wrap { margin: 0; }
.reveal-btn { display: none; }
.reveal-wrap .reveal-body { display: block; }

/* PRACTICE MODE: reveal buttons appear, content hides */
body.practice-mode .reveal-wrap { margin: 16px 0; }
body.practice-mode .reveal-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; width: 100%; text-align: left;
    background: var(--bg1); border: 1px solid var(--border);
    border-radius: var(--r); color: var(--tx2); font-size: 13px;
    font-family: 'Inter', sans-serif; cursor: pointer;
    transition: all var(--t);
}
body.practice-mode .reveal-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg2); }
.reveal-icon { font-size: 10px; color: var(--tx3); }
body.practice-mode .reveal-wrap .reveal-body { display: none; }
body.practice-mode .reveal-wrap.open .reveal-body { display: block; }