/* =========================================================
   AERONITI PLATFORM — CLEAN MASTER STYLESHEET
   Rebuilt from current index.html + chapter-study.html
   One source of truth. No legacy override stacks.
========================================================= */

:root {
    --ink: #172033;
    --ink-soft: #334155;
    --muted: #64748b;
    --paper: #f7f8fc;
    --paper-strong: #ffffff;
    --line: rgba(37, 99, 235, 0.14);
    --line-strong: rgba(37, 99, 235, 0.24);
    --blue: #2563eb;
    --violet: #7c3aed;
    --orange: #f97316;
    --shadow-sm: 0 10px 30px rgba(37, 99, 235, 0.08);
    --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.13);
    --radius: 22px;
    --mono: "DM Mono", monospace;
    --sans: "Manrope", sans-serif;
    --serif: "Playfair Display", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    font-family: var(--sans);
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 20%, rgba(37,99,235,.12), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(124,58,237,.10), transparent 30%),
        radial-gradient(circle at 75% 80%, rgba(249,115,22,.08), transparent 28%),
        var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.background-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(37,99,235,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,.035) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 88%);
}

/* =========================================================
   LANDING PAGE — NAVIGATION
========================================================= */
.navbar {
    width: min(1440px, calc(100% - 48px));
    min-height: 86px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    color: white; font-weight: 800;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    box-shadow: 0 10px 24px rgba(79,70,229,.25);
}
.brand-text { display: grid; line-height: 1.05; }
.brand-text strong { font-size: 16px; letter-spacing: -.03em; }
.brand-text small, .eyebrow, .meta-item, .technical-note, .coordinate,
.library-kicker, .method-kicker, .library-code, .library-status,
.method-index, .method-tag, .study-navbar, .study-block-label,
.study-sidebar-heading, .study-topic-header > span, .atmosphere-kicker,
.atmosphere-note, .study-chapter-meta > div > span {
    font-family: var(--mono);
    letter-spacing: .12em;
}
.brand-text small { margin-top: 4px; font-size: 8px; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 13px; color: var(--ink-soft); }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: var(--blue); }
.nav-button, .primary-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: 999px; transition: transform .2s ease, box-shadow .2s ease;
}
.nav-button {
    padding: 11px 18px; color: white; font-size: 12px; font-weight: 700;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    box-shadow: 0 12px 28px rgba(79,70,229,.22);
}
.nav-button:hover, .primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(79,70,229,.28); }


/* Landing page support elements */
.hero-left { position: relative; z-index: 2; }
.meta-item { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; }
.meta-number { color: var(--orange); font-weight: 800; }
.meta-item strong { color: var(--ink); }
.study-card-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.status { display: inline-flex; align-items: center; gap: 7px; color: #16a34a; font: 500 8px var(--mono); letter-spacing: .1em; }
.status-dot, .library-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.09); }
.study-card-body h2 { margin: 10px 0; font-size: 31px; line-height: 1.02; letter-spacing: -.05em; }
.study-card-body h2 span { color: var(--violet); }
.study-card-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.chapter-progress { display: grid; gap: 8px; color: var(--muted); font: 500 8px var(--mono); letter-spacing: .1em; }
.progress-bar { width: 170px; height: 2px; background: rgba(37,99,235,.12); overflow: hidden; }
.progress-bar span { display: block; width: 72%; height: 100%; background: linear-gradient(90deg,var(--blue),var(--violet),var(--orange)); }
.open-icon { color: var(--blue); font-size: 22px; line-height: 1; }
.library-top { position: relative; }

/* =========================================================
   LANDING PAGE — HERO
========================================================= */
.hero {
    width: min(1440px, calc(100% - 48px));
    min-height: 760px;
    margin: 0 auto;
    padding: 72px 0 92px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
    gap: 80px;
    align-items: center;
}
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--blue); font-weight: 600; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 6px rgba(249,115,22,.09); }
.hero h1 {
    max-width: 820px; margin: 24px 0;
    font-size: clamp(60px, 6.8vw, 112px); line-height: .92; letter-spacing: -.07em;
}
.hero h1 span, .method-header h2 span, .library-heading-row h2 span { color: var(--violet); }
.hero-description { max-width: 660px; color: var(--muted); font-size: 18px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.primary-button { padding: 15px 22px; color: white; background: linear-gradient(135deg, var(--blue), var(--violet)); font-size: 13px; font-weight: 800; }
.text-button { padding: 15px 8px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 54px; color: var(--muted); }
.meta-item { font-size: 9px; }
.meta-line { width: 38px; height: 1px; background: var(--line-strong); }

.hero-right { position: relative; min-height: 530px; }
.navigation-ring { position: absolute; border: 1px solid rgba(37,99,235,.16); border-radius: 50%; }
.ring-one { width: 440px; height: 440px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.ring-two { width: 300px; height: 300px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.navigation-line { position: absolute; background: rgba(37,99,235,.13); }
.vertical-line { width: 1px; height: 100%; left: 50%; }
.horizontal-line { width: 100%; height: 1px; top: 50%; }
.coordinate { position: absolute; font-size: 9px; color: var(--muted); }
.coordinate-top { left: 50%; top: 12px; transform: translateX(-50%); }
.coordinate-right { right: 8px; top: 50%; transform: rotate(90deg); }
.study-card {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
    width: min(390px, 78%); padding: 26px;
    border: 1px solid rgba(37,99,235,.18); border-radius: 26px;
    background: rgba(255,255,255,.72); backdrop-filter: blur(18px);
    box-shadow: var(--shadow-lg);
}
.study-card-top { color: var(--blue); font: 500 9px var(--mono); letter-spacing: .14em; }
.study-card-body { margin-top: 26px; }
.study-label { color: var(--orange); font: 500 9px var(--mono); letter-spacing: .12em; }
.subject-code { display: block; margin-top: 10px; color: var(--muted); font: 500 10px var(--mono); }
.study-card-body h3 { margin: 8px 0 0; font-size: 31px; line-height: 1.02; letter-spacing: -.05em; }
.study-card-bottom { margin-top: 28px; display: flex; justify-content: space-between; color: var(--muted); font: 500 9px var(--mono); letter-spacing: .1em; }
.technical-note { position: absolute; color: var(--muted); font-size: 8px; line-height: 1.7; }
.technical-note span { color: var(--orange); }
.note-one { left: 4%; bottom: 12%; }
.note-two { right: 4%; top: 18%; }
.compass-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; gap: 10px; justify-items: center; color: var(--blue); font: 9px var(--mono); }
.compass-point { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(249,115,22,.08); }

/* =========================================================
   LANDING PAGE — METHOD + LIBRARY
========================================================= */
.method-section, .library-section { width: min(1440px, calc(100% - 48px)); margin: 0 auto; padding: 110px 0; }
.method-header { max-width: 920px; }
.method-kicker, .library-kicker { display: flex; gap: 14px; align-items: center; color: var(--blue); font-size: 10px; }
.method-number, .library-number { color: var(--orange); }
.method-header h2, .library-heading-row h2 { margin: 22px 0; font-size: clamp(48px, 5vw, 82px); line-height: .98; letter-spacing: -.065em; }
.method-header p, .library-heading-row p { max-width: 660px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.method-flow { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 60px; }
.method-line { position: absolute; left: 6%; right: 6%; top: 0; height: 1px; background: linear-gradient(90deg, var(--blue), var(--violet), var(--orange)); opacity: .25; }
.method-card, .library-card {
    position: relative; border: 1px solid var(--line); border-radius: var(--radius);
    background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm);
}
.method-card { padding: 24px; min-height: 290px; }
.method-card-top, .library-card-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; color: var(--muted); font-size: 9px; }
.method-index { color: var(--blue); }
.method-tag { color: var(--orange); }
.method-card h3 { margin: 42px 0 16px; font-size: 28px; line-height: 1.05; letter-spacing: -.05em; }
.method-card p { color: var(--muted); font-size: 13px; line-height: 1.7; }
.method-arrow { position: absolute; right: 22px; bottom: 20px; color: var(--violet); font-size: 18px; }
.method-footer { margin-top: 44px; display: flex; gap: 18px; align-items: center; color: var(--muted); }
.method-footer-line { flex: 1; height: 1px; background: var(--line-strong); }
.method-footer p { max-width: 680px; line-height: 1.7; }
.method-footer span { color: var(--orange); }
.method-footer strong { color: var(--blue); }
.library-section { padding-top: 40px; }
.library-heading-row { display: grid; grid-template-columns: 1fr .8fr; gap: 50px; align-items: end; }
.library-grid { display: grid; grid-template-columns: 1.15fr 1fr .8fr; gap: 18px; margin-top: 54px; }
.library-card { padding: 26px; min-height: 360px; display: flex; flex-direction: column; }
.library-card-main { background: linear-gradient(135deg, rgba(239,246,255,.92), rgba(250,245,255,.92)); }
.library-card-locked { opacity: .76; }
.library-status { color: var(--blue); }
.library-status.muted, .muted { color: var(--muted); }
.library-card-content { margin-top: 54px; }
.library-subject-label { color: var(--orange); font: 500 9px var(--mono); letter-spacing: .13em; }
.library-card h3 { margin: 12px 0; font-size: 34px; line-height: 1.02; letter-spacing: -.05em; }
.library-card p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.library-card-bottom { margin-top: auto; display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.library-details { display: flex; gap: 18px; color: var(--muted); font: 9px var(--mono); letter-spacing: .1em; }
.library-details span { display: grid; gap: 5px; }
.library-details strong { color: var(--ink); font-size: 17px; }
.library-enter { color: var(--blue); font-size: 11px; font-weight: 800; }
.library-coming { color: var(--muted); font: 9px var(--mono); }
.library-note-card { min-height: 360px; padding: 26px; border-radius: var(--radius); background: var(--ink); color: white; display: flex; flex-direction: column; }
.library-note-number { color: rgba(255,255,255,.42); font: 9px var(--mono); letter-spacing: .13em; }
.library-note-card p { margin: auto 0; font-size: 20px; line-height: 1.55; }
.library-note-card strong { color: #c4b5fd; }
.library-note-arrow { align-self: flex-end; color: #fb923c; font-size: 28px; }
.library-footer { margin-top: 52px; display: flex; align-items: center; gap: 18px; color: var(--muted); font: 9px var(--mono); letter-spacing: .11em; }
.library-footer-line { flex: 1; height: 1px; background: var(--line-strong); }

/* =========================================================
   STUDY PAGE — NAV + HERO
========================================================= */
.study-navbar {
    position: sticky; top: 0; z-index: 50;
    min-height: 78px; padding: 0 clamp(28px,5vw,70px);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    border-bottom: 1px solid var(--line); background: rgba(255,255,255,.78); backdrop-filter: blur(18px);
    color: var(--muted); font-size: 10px;
}
.study-back { justify-self: start; }
.study-navbar-center { display: flex; gap: 10px; color: var(--blue); font-weight: 700; }
.study-navbar-center span { color: var(--violet); }
.study-chapter-indicator { justify-self: end; }
.study-page { width: min(1680px, calc(100% - 90px)); margin: 0 auto; padding: 122px 0 44px; }
.study-chapter-intro { padding-bottom: 54px; }
.study-chapter-meta { display: flex; align-items: center; gap: 22px; }
.study-chapter-number {
    width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
    color: white; background: linear-gradient(135deg,var(--blue),var(--violet));
    box-shadow: 0 12px 30px rgba(79,70,229,.25); font: 500 13px var(--mono);
}
.study-chapter-meta > div { display: grid; gap: 8px; }
.study-chapter-meta > div > span { color: var(--muted); font-size: 11px; }
.study-chapter-meta p { margin: 0; color: var(--orange); font: 700 10px var(--mono); letter-spacing: .12em; }
.study-chapter-intro h1 {
    max-width: 1100px; margin: 58px 0 22px;
    font-size: clamp(62px, 6.4vw, 112px); line-height: .9; letter-spacing: -.075em;
}
.study-chapter-intro h1 em { display: block; margin-top: 8px; font-style: normal; color: var(--ink); }
.study-chapter-description { max-width: 900px; color: var(--muted); font-size: 18px; line-height: 1.75; }
.study-chapter-progress { display: grid; grid-template-columns: auto minmax(180px,430px) auto; align-items: center; gap: 22px; margin-top: 58px; color: var(--muted); font: 10px var(--mono); letter-spacing: .12em; }
.study-progress-line { height: 2px; background: rgba(37,99,235,.12); overflow: hidden; }
.study-progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg,var(--blue),var(--violet),var(--orange)); transition: width .3s ease; }

/* =========================================================
   STUDY PAGE — CONTENT
========================================================= */
.study-layout { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 74px; align-items: start; }
.study-sidebar {
    position: sticky; top: 112px; align-self: start; padding: 24px;
    background: rgba(255,255,255,.86); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm);
}
.study-sidebar-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.study-topic { width: 100%; display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 13px 10px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink-soft); text-align: left; border-radius: 12px; transition: background .2s ease, transform .2s ease; }
.study-topic:hover { background: rgba(37,99,235,.05); }
.study-topic span:first-child { color: var(--orange); font: 700 10px var(--mono); padding-top: 3px; }
.study-topic span:last-child { font-size: 14px; line-height: 1.55; font-weight: 700; }
.study-topic.active { background: linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.07)); color: var(--blue); border-left-color: var(--violet); }
.study-content { min-width: 0; }
.study-topic-header { padding: 18px 0 28px; }
.study-topic-header > span { color: var(--violet); font-size: 10px; font-weight: 700; }
.study-topic-header h2 { margin: 28px 0 0; font-size: clamp(42px,5vw,78px); line-height: .95; letter-spacing: -.065em; }
.study-block { margin-top: 36px; }
.study-block-label { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--blue); font-size: 10px; font-weight: 700; }
.study-block-label::after { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg,var(--violet),transparent); }
.study-block-content, .question-card, .practice-card, .trap-card, .study-trap {
    border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm);
}
.study-block-content { padding: 30px; color: var(--ink-soft); line-height: 1.85; }
.study-concept .study-block-content { border-left: 4px solid var(--blue); }
.question-card { padding: 30px; }
.question-card-top { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 10px var(--mono); }
.question-card-top span:first-child { color: var(--violet); }
.study-question { margin: 22px 0 0; font-size: 21px; line-height: 1.55; color: var(--ink); }
.study-question strong { color: var(--blue); }
.study-question-box, .answer-card, .recall-card {
    padding: 20px; border-radius: 16px; background: rgba(37,99,235,.045); border: 1px solid rgba(37,99,235,.11);
}
.study-practice { display: grid; gap: 14px; }
.practice-card { padding: 24px; }
.practice-question-number { color: var(--orange); font: 700 10px var(--mono); letter-spacing: .1em; }
.practice-card p { color: var(--ink); line-height: 1.7; }
.practice-answer { width: 100%; margin-top: 10px; padding: 13px 14px; display: flex; gap: 12px; text-align: left; border: 1px solid rgba(37,99,235,.12); border-radius: 12px; background: white; color: var(--ink-soft); transition: border .2s, background .2s, transform .2s; }
.practice-answer:hover { transform: translateX(2px); border-color: rgba(124,58,237,.35); }
.practice-answer.correct { border-color: #16a34a; background: rgba(22,163,74,.06); }
.practice-answer.wrong { border-color: #dc2626; background: rgba(220,38,38,.05); }
.practice-results { display: none; padding: 28px; border-radius: 18px; background: rgba(37,99,235,.06); border: 1px solid var(--line); }
.practice-results.show-results { display: block; }
.retry-practice { margin-top: 16px; padding: 11px 16px; border: 0; border-radius: 999px; color: white; background: var(--blue); }
.study-trap, .trap-card { padding: 28px; border-left: 5px solid var(--orange); background: linear-gradient(135deg,rgba(255,247,237,.95),rgba(255,255,255,.92)); }
.study-trap ul, .trap-card ul { padding-left: 20px; color: var(--ink-soft); line-height: 1.8; }
.study-bottom-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 50px; padding: 18px 0 28px; }
.study-nav-button { min-width: 165px; padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(255,255,255,.9); color: var(--ink-soft); font-weight: 800; }
.study-nav-button.next { color: white; border-color: transparent; background: linear-gradient(135deg,var(--blue),var(--violet)); box-shadow: 0 12px 28px rgba(79,70,229,.22); }
.study-nav-button.disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================
   ATMOSPHERE — RIGHT SIDE CONTROL
========================================================= */
.weather-effects { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.study-navbar, .study-page { position: relative; z-index: 5; }
.atmosphere-toggle {
    position: fixed; right: 26px; top: 50%; z-index: 100;
    transform: translateY(-50%); min-width: 148px; min-height: 48px; padding: 0 17px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid rgba(37,99,235,.18); border-radius: 999px;
    color: var(--ink); background: rgba(255,255,255,.88); backdrop-filter: blur(18px);
    box-shadow: 0 14px 34px rgba(15,23,42,.12); font: 700 10px var(--mono); letter-spacing: .1em;
}
.atmosphere-toggle:hover { transform: translateY(calc(-50% - 2px)); }
.atmosphere-toggle-icon { font-size: 15px; }
.atmosphere-panel {
    position: fixed; right: 26px; top: 50%; z-index: 101;
    width: min(330px, calc(100vw - 32px)); padding: 22px;
    border: 1px solid rgba(37,99,235,.16); border-radius: 24px;
    background: rgba(255,255,255,.92); backdrop-filter: blur(24px);
    box-shadow: 0 30px 80px rgba(15,23,42,.18);
    opacity: 0; pointer-events: none;
    transform: translate(24px,-50%) scale(.97); transition: opacity .25s ease, transform .25s ease;
}
.atmosphere-panel.open { opacity: 1; pointer-events: auto; transform: translate(0,-50%) scale(1); }
.atmosphere-panel-top { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.atmosphere-kicker { color: var(--blue); font-size: 9px; font-weight: 700; }
.atmosphere-panel h3 { margin: 8px 0 0; font-size: 31px; line-height: 1; letter-spacing: -.045em; }
.atmosphere-close { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(37,99,235,.04); color: var(--ink-soft); font-size: 22px; }
.atmosphere-description { margin: 16px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.atmosphere-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.atmosphere-option { min-height: 78px; padding: 12px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; border: 1px solid rgba(37,99,235,.1); border-radius: 15px; background: rgba(248,250,252,.86); color: var(--ink-soft); text-align: left; }
.atmosphere-option:hover, .atmosphere-option.active { border-color: rgba(124,58,237,.32); background: linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.07)); }
.atmosphere-option-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 11px; background: rgba(37,99,235,.07); }
.atmosphere-option strong { display: block; font-size: 12px; }
.atmosphere-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.atmosphere-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; line-height: 1.6; }
.atmosphere-backdrop { position: fixed; inset: 0; z-index: 99; opacity: 0; pointer-events: none; background: rgba(15,23,42,.08); transition: opacity .25s ease; }
.atmosphere-backdrop.show { opacity: 1; pointer-events: auto; }

/* =========================================================
   ATMOSPHERE — EFFECTS
========================================================= */
.aero-sparkle { position: absolute; border-radius: 50%; background: white; box-shadow: 0 0 7px rgba(255,255,255,.95), 0 0 18px rgba(124,58,237,.55); animation: aeroSparkle var(--sparkle-duration,3s) ease-in-out infinite var(--sparkle-delay,0s); }
@keyframes aeroSparkle { 0%,100% { opacity: .1; transform: scale(.45); } 50% { opacity: .95; transform: scale(1.25); } }
.aero-raindrop { position: absolute; top: -14vh; width: 1.4px; border-radius: 999px; background: linear-gradient(to bottom, transparent, rgba(191,219,254,.4) 30%, rgba(96,165,250,.95)); box-shadow: 0 0 3px rgba(147,197,253,.45); animation: aeroNaturalRain var(--rain-duration,2s) linear infinite; }
@keyframes aeroNaturalRain { from { transform: translate3d(0,-12vh,0) rotate(var(--rain-angle,8deg)); } to { transform: translate3d(var(--rain-drift,-4vw),112vh,0) rotate(var(--rain-angle,8deg)); } }
.aero-snowflake { position: absolute; top: -20px; border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 0 8px rgba(255,255,255,.6); animation: aeroSnow linear infinite; }
@keyframes aeroSnow { from { transform: translate3d(0,-20px,0); } 50% { transform: translate3d(35px,50vh,0); } to { transform: translate3d(-25px,110vh,0); } }
.aero-night-star { position: absolute; border-radius: 50%; background: white; box-shadow: 0 0 8px rgba(255,255,255,.9); animation: aeroStarTwinkle 3s ease-in-out infinite; }
@keyframes aeroStarTwinkle { 0%,100% { opacity: .18; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.45); } }
.aero-storm-cloud {
    position: fixed; z-index: 1; pointer-events: none; border-radius: 50%; transform: translateX(-50%);
    background:
        radial-gradient(ellipse at 18% 78%, rgba(2,6,23,.82), transparent 54%),
        radial-gradient(ellipse at 40% 44%, rgba(30,41,59,.78), transparent 61%),
        radial-gradient(ellipse at 70% 56%, rgba(15,23,42,.82), transparent 64%),
        radial-gradient(ellipse at 90% 40%, rgba(51,65,85,.58), transparent 58%);
    filter: blur(18px); animation: aeroStormCloudDrift var(--cloud-speed,20s) ease-in-out infinite alternate;
}
.aero-storm-cloud::after { content:""; position:absolute; left:10%; right:10%; bottom:-18%; height:55%; border-radius:50%; background: radial-gradient(ellipse,rgba(2,6,23,.62),transparent 72%); filter: blur(22px); }
@keyframes aeroStormCloudDrift { from { transform: translateX(calc(-50% - 24px)) translateY(0); } to { transform: translateX(calc(-50% + 24px)) translateY(8px); } }
.aero-lightning-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: transparent; }
.aero-lightning-bolt { position: fixed; z-index: 3; width: 58px; height: 180px; pointer-events: none; opacity: 0; background: linear-gradient(to bottom,#fff,#dbeafe); clip-path: polygon(48% 0,100% 0,64% 38%,100% 38%,18% 100%,43% 58%,0 58%); transform-origin: top center; filter: drop-shadow(0 0 8px white) drop-shadow(0 0 24px rgba(147,197,253,.95)); }
.aero-lightning-bolt.strike { animation: aeroCloudBolt .6s ease-out forwards; }
@keyframes aeroCloudBolt { 0% { opacity:0; transform:scaleY(.2); } 8% { opacity:1; transform:scaleY(1); } 18% { opacity:.18; } 28% { opacity:1; } 48% { opacity:.12; } 65%,100% { opacity:0; } }
.weather-storm::before, .weather-stars::before, .weather-snow::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; transition: background .4s ease; }
.weather-storm::before { background: linear-gradient(180deg,rgba(15,23,42,.55),rgba(30,41,59,.12) 52%,rgba(15,23,42,.02)); }
.weather-stars::before { background: linear-gradient(180deg,#101827 0%,#172033 60%,#1e293b 100%); }
.weather-snow::before { background: linear-gradient(180deg,#0f172a 0%,#172033 55%,#1e293b 100%); }
.weather-stars .study-navbar, .weather-stars .study-page, .weather-snow .study-navbar, .weather-snow .study-page { color: #e5edf8; }
.weather-stars .study-navbar, .weather-snow .study-navbar { background: rgba(15,23,42,.78); border-bottom-color: rgba(255,255,255,.1); }
.weather-stars .study-chapter-intro h1, .weather-snow .study-chapter-intro h1, .weather-stars .study-topic-header h2, .weather-snow .study-topic-header h2 { color:#f8fafc; }
.weather-stars .study-chapter-description, .weather-snow .study-chapter-description { color:#cbd5e1; }
.weather-stars .study-sidebar, .weather-snow .study-sidebar, .weather-stars .study-block-content, .weather-snow .study-block-content, .weather-stars .question-card, .weather-snow .question-card, .weather-stars .practice-card, .weather-snow .practice-card { background: rgba(15,23,42,.78); border-color: rgba(255,255,255,.1); color:#e2e8f0; }
.weather-stars .study-topic, .weather-snow .study-topic { color:#dbeafe; }
.weather-stars .study-question, .weather-snow .study-question, .weather-stars .practice-card p, .weather-snow .practice-card p { color:#f1f5f9; }
.weather-stars .study-block-content, .weather-snow .study-block-content { color:#cbd5e1; }

/* =========================================================
   REVEAL ANIMATION
========================================================= */
.scroll-reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.scroll-reveal.reveal-left { transform: translateX(-28px); }
.scroll-reveal.reveal-right { transform: translateX(28px); }
.scroll-reveal.is-visible { opacity: 1; transform: translate(0); }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1120px) {
    .hero { grid-template-columns: 1fr; }
    .hero-right { max-width: 760px; width: 100%; margin: 0 auto; }
    .method-flow { grid-template-columns: repeat(2,1fr); }
    .library-grid { grid-template-columns: 1fr 1fr; }
    .library-note-card { min-height: 260px; }
    .study-layout { grid-template-columns: 290px minmax(0,1fr); gap: 40px; }
}
@media (max-width: 900px) {
    .navbar { width: calc(100% - 32px); }
    .nav-links { display:none; }
    .hero, .method-section, .library-section { width: calc(100% - 32px); }
    .library-heading-row { grid-template-columns: 1fr; gap: 10px; }
    .study-page { width: calc(100% - 40px); padding-top: 70px; }
    .study-layout { grid-template-columns: 1fr; }
    .study-sidebar { position: relative; top: auto; }
    .study-navbar { grid-template-columns: 1fr; gap: 8px; padding: 14px 20px; text-align:center; }
    .study-back, .study-chapter-indicator { justify-self: center; }
    .atmosphere-toggle { top:auto; bottom:20px; transform:none; }
    .atmosphere-toggle:hover { transform:translateY(-2px); }
    .atmosphere-panel { top:auto; bottom:20px; transform:translateX(24px) scale(.97); }
    .atmosphere-panel.open { transform:translateX(0) scale(1); }
}
@media (max-width: 620px) {
    .navbar { min-height:72px; }
    .brand-text small { display:none; }
    .nav-button { padding:10px 14px; font-size:10px; }
    .hero { padding-top:58px; min-height:auto; }
    .hero h1 { font-size:clamp(48px,15vw,74px); }
    .hero-right { min-height:430px; }
    .ring-one { width:360px; height:360px; }
    .ring-two { width:230px; height:230px; }
    .study-card { width:86%; }
    .method-flow, .library-grid { grid-template-columns:1fr; }
    .method-footer, .library-footer { flex-wrap:wrap; }
    .method-footer-line, .library-footer-line { min-width:100%; order:2; }
    .study-page { width:calc(100% - 28px); }
    .study-chapter-intro h1 { font-size:clamp(48px,15vw,72px); }
    .study-chapter-progress { grid-template-columns:1fr auto; }
    .study-progress-line { grid-column:1 / -1; grid-row:2; }
    .study-bottom-nav { flex-direction:column; }
    .study-nav-button { width:100%; }
    .atmosphere-toggle { min-width:50px; width:50px; height:50px; padding:0; right:14px; bottom:14px; }
    .atmosphere-toggle-text { display:none; }
    .atmosphere-panel { right:14px; bottom:14px; width:calc(100vw - 28px); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
/* =========================================================
   PRACTICE QUESTIONS — OPTION BUTTONS
========================================================= */

.practice-card > button {
    display: block;

    width: 100%;

    margin-top: 10px;

    padding: 15px 18px;

    border:
        1px solid
        rgba(37, 99, 235, 0.14);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.9);

    color:
        var(--ink-soft);

    text-align: left;

    font-family:
        var(--sans);

    font-size:
        16px;

    line-height:
        1.45;

    cursor:
        pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.practice-card > button:hover {
    transform:
        translateX(4px);

    border-color:
        rgba(124, 58, 237, 0.45);

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.05),
            rgba(124, 58, 237, 0.05)
        );

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, 0.08);
}


.practice-card > button:focus-visible {
    outline:
        2px solid
        rgba(124, 58, 237, 0.6);

    outline-offset:
        3px;
}


/* =========================================================
   EXAM TRAPS — ONE CARD ONLY
========================================================= */

.study-trap {
    padding: 0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


.study-trap .study-block-label {
    margin-bottom:
        14px;
}


.trap-card {
    position: relative;

    padding:
        34px 38px !important;

    border:
        1px solid
        var(--line) !important;

    border-left:
        5px solid
        var(--orange) !important;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 247, 237, 0.96),
            rgba(255, 255, 255, 0.94)
        ) !important;

    box-shadow:
        var(--shadow-sm);
}
/* =========================================================
   1. PRACTICE QUIZ — CORRECT / WRONG ANSWERS
========================================================= */

.practice-card > button.correct-answer {
    background:
        linear-gradient(
            135deg,
            rgba(22, 163, 74, 0.16),
            rgba(74, 222, 128, 0.08)
        ) !important;

    border-color:
        rgba(22, 163, 74, 0.85) !important;

    color:
        #166534 !important;

    box-shadow:
        0 8px 24px
        rgba(22, 163, 74, 0.12);

    transform:
        translateX(4px);
}


.practice-card > button.wrong-answer {
    background:
        linear-gradient(
            135deg,
            rgba(220, 38, 38, 0.14),
            rgba(248, 113, 113, 0.07)
        ) !important;

    border-color:
        rgba(220, 38, 38, 0.85) !important;

    color:
        #991b1b !important;

    box-shadow:
        0 8px 24px
        rgba(220, 38, 38, 0.10);
}


.practice-card > button.correct-answer::before,
.practice-card > button.wrong-answer::before {
    display: inline-grid;

    place-items: center;

    width: 23px;
    height: 23px;

    margin-right: 10px;

    border-radius: 50%;

    font-size: 12px;
    font-weight: 900;
}


.practice-card > button.correct-answer::before {
    content: "✓";

    color: white;

    background:
        #16a34a;
}


.practice-card > button.wrong-answer::before {
    content: "✕";

    color: white;

    background:
        #dc2626;
}


.practice-card > button:disabled {
    cursor:
        default;

    opacity:
        1 !important;
}


/* =========================================================
   2. STARS MODE — FIX DARK TEXT
========================================================= */

.weather-stars .study-chapter-intro h1 em {
    color:
        #dbeafe !important;

    text-shadow:
        0 0 28px
        rgba(147, 197, 253, 0.16);
}


.weather-stars .study-chapter-description {
    color:
        #cbd5e1 !important;
}


.weather-stars .study-chapter-meta > div > span {
    color:
        #94a3b8 !important;
}


/* Make all important headings readable in Stars mode */

.weather-stars .study-topic-header h2,
.weather-stars .study-block h3,
.weather-stars .question-card h3,
.weather-stars .trap-card h3 {
    color:
        #f8fafc !important;
}


/* =========================================================
   3. COLOURFUL GLITTER
========================================================= */

.aero-sparkle {
    background:
        var(
            --sparkle-colour,
            #ffffff
        ) !important;

    box-shadow:
        0 0 7px
        var(
            --sparkle-colour,
            #ffffff
        ),

        0 0 20px
        var(
            --sparkle-glow,
            rgba(255,255,255,.5)
        ) !important;
}


/* Pink */

.aero-sparkle:nth-child(5n + 1) {
    --sparkle-colour:
        #f9a8d4;

    --sparkle-glow:
        rgba(244, 114, 182, 0.65);
}


/* Violet */

.aero-sparkle:nth-child(5n + 2) {
    --sparkle-colour:
        #c4b5fd;

    --sparkle-glow:
        rgba(139, 92, 246, 0.65);
}


/* Sky blue */

.aero-sparkle:nth-child(5n + 3) {
    --sparkle-colour:
        #7dd3fc;

    --sparkle-glow:
        rgba(56, 189, 248, 0.65);
}


/* Gold */

.aero-sparkle:nth-child(5n + 4) {
    --sparkle-colour:
        #fcd34d;

    --sparkle-glow:
        rgba(245, 158, 11, 0.65);
}


/* White / pearl */

.aero-sparkle:nth-child(5n) {
    --sparkle-colour:
        #ffffff;

    --sparkle-glow:
        rgba(255, 255, 255, 0.65);
}


/* =========================================================
   4. ENHANCED CHAPTER HERO TEXT DESIGN
========================================================= */

.study-chapter-intro {
    position:
        relative;
}


.study-chapter-intro h1 {
    position:
        relative;

    max-width:
        1180px;

    text-wrap:
        balance;
}


.study-chapter-intro h1 em {
    position:
        relative;

    display:
        inline-block;

    padding:
        0 12px 8px 0;
}


/* Decorative gradient accent under the second line */

.study-chapter-intro h1 em::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        min(
            210px,
            45%
        );

    height:
        4px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--violet),
            transparent
        );

    opacity:
        0.8;
}


/* Make description look more intentional */

.study-chapter-description {
    position:
        relative;

    padding-left:
        22px;

    max-width:
        980px;
}


.study-chapter-description::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        8px;

    bottom:
        8px;

    width:
        3px;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            var(--blue),
            var(--violet),
            transparent
        );
}


/* =========================================================
   5. STAR MODE HERO — MORE PREMIUM
========================================================= */

.weather-stars .study-chapter-intro h1 {
    text-shadow:
        0 8px 40px
        rgba(2, 6, 23, 0.38);
}


.weather-stars .study-chapter-description::before {
    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #a78bfa,
            transparent
        );
}/* =====================================================
   ACCOUNT ACCESS — LANDING PAGE
===================================================== */

.nav-account {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav-login {
    font-family: var(--font-mono, "DM Mono", monospace);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-main, #243247);
    transition: opacity 0.2s ease;
}

.nav-login:hover {
    opacity: 0.55;
}


/* Mobile */

@media (max-width: 700px) {

    .nav-account {
        gap: 12px;
    }

    .nav-login {
        font-size: 0.65rem;
    }

}