:root {
  --bg: #050407;
  --surface: #0c0a10;
  --surface-2: #141019;
  --line: rgba(201, 160, 91, .2);
  --gold: #c99c55;
  --gold-bright: #efc878;
  --ivory: #eee8dc;
  --muted: #a29aa6;
  --teal: #739e98;
  --danger: #d98e84;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --radius: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 78% 0%, #2c102b 0, transparent 32%), radial-gradient(circle at 15% 52%, #081820 0, transparent 28%), linear-gradient(135deg, rgba(89,47,84,.08) 1px, transparent 1px), var(--bg); background-size: auto, auto, 46px 46px, auto; color: var(--ivory); font-family: var(--sans); font-size: 16px; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 28px 22px; border-right: 1px solid var(--line); background: rgba(5, 4, 7, .96); display: flex; flex-direction: column; z-index: 10; }
.brand { display: flex; align-items: center; gap: 13px; border: 0; background: none; padding: 0 4px 28px; cursor: pointer; text-align: left; }
.brand-mark { width: 42px; height: 52px; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold-bright); font: 700 25px var(--serif); clip-path: polygon(50% 0, 100% 22%, 90% 100%, 10% 100%, 0 22%); background: linear-gradient(145deg, #241823, #09070b); }
.brand strong { display: block; font: 700 22px/1 var(--serif); letter-spacing: .15em; }
.brand small { color: var(--muted); font-size: 12px; }
.nav-list { display: grid; gap: 7px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-weight: 600; }
.nav-item span { color: var(--gold); font-size: 19px; width: 22px; text-align: center; }
.nav-item:hover, .nav-item.active { color: var(--ivory); background: rgba(217,182,111,.08); border-color: var(--line); }
.sidebar-progress { margin-top: auto; padding: 18px 4px; border-top: 1px solid var(--line); }
.eyebrow { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .13em; }
.progress-copy { display: flex; justify-content: space-between; align-items: end; margin: 10px 0 8px; }
.progress-copy strong { font: 600 28px var(--serif); }
.progress-copy span, .sidebar-progress p { color: var(--muted); font-size: 12px; }
.progress-track { height: 5px; background: #24313a; border-radius: 99px; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9b773a, var(--gold-bright)); transition: width .3s; }
.ethics-note { display: flex; gap: 11px; padding: 14px; background: rgba(108,182,173,.07); border: 1px solid rgba(108,182,173,.14); border-radius: 13px; }
.ethics-note span { color: var(--teal); }
.ethics-note p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ethics-note strong { display: block; color: #cddbd9; font-size: 12px; margin-bottom: 3px; }

main { min-width: 0; padding: 0 4vw 70px; }
.topbar { min-height: 104px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.topbar h1 { margin: 6px 0 0; font: 600 clamp(30px, 3vw, 43px)/1 var(--serif); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.sound-toggle { display: flex; align-items: center; gap: 10px; padding: 9px 13px; min-height: 52px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); cursor: pointer; text-align: left; }
.sound-toggle > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: rgba(217,182,111,.09); font-size: 18px; }
.sound-toggle strong, .sound-toggle small { display: block; }
.sound-toggle strong { font-size: 12px; }
.sound-toggle small { color: var(--muted); font-size: 10px; }
.sound-toggle[aria-pressed="true"] { border-color: rgba(217,182,111,.45); }
.streak { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 10px 15px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; cursor: default; }
.streak span { grid-row: 1/3; color: var(--gold); font-size: 23px; }
.streak strong { line-height: 1; }
.streak small { color: var(--muted); font-size: 10px; }
.view { display: none; animation: fade .22s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } }

.hero-card { position: relative; min-height: 315px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #0a1118; box-shadow: 0 26px 80px rgba(0,0,0,.25); }
.hero-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,10,16,.97) 0%, rgba(4,10,16,.8) 41%, rgba(4,10,16,.08) 74%); }
.hero-content { position: relative; z-index: 1; width: min(560px, 60%); padding: 42px 48px; }
.pill { display: inline-flex; padding: 7px 10px; border: 1px solid rgba(217,182,111,.32); border-radius: 999px; color: var(--gold-bright); background: rgba(7,16,25,.62); font-size: 11px; letter-spacing: .09em; font-weight: 700; }
.hero-content h2, .view-intro h2, .panel-heading h2, .lesson-main h2 { font-family: var(--serif); }
.hero-content h2 { margin: 16px 0 10px; font-size: clamp(36px, 4vw, 58px); line-height: .98; max-width: 520px; }
.hero-content p { color: #c6ced0; line-height: 1.65; margin: 0 0 24px; max-width: 460px; }
.start-here { display: grid; grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(150px, .6fr)); align-items: stretch; gap: 10px; margin-top: 13px; }
.start-copy, .quick-action { min-height: 70px; border: 1px solid var(--line); border-radius: 13px; background: rgba(13,24,34,.82); }
.start-copy { display: flex; align-items: center; gap: 12px; padding: 12px 15px; }
.start-copy strong, .start-copy small, .quick-action strong, .quick-action small { display: block; }
.start-copy small, .quick-action small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.step-dot { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: 600 18px var(--serif); }
.quick-action { display: flex; align-items: center; gap: 10px; padding: 11px 13px; color: var(--ivory); text-align: left; cursor: pointer; }
.quick-action > span { color: var(--gold); font-size: 18px; }
.quick-action:hover { border-color: var(--gold); background: rgba(217,182,111,.08); }
.primary-btn, .secondary-btn { border-radius: 10px; padding: 12px 17px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: transform .16s, background .16s; }
.primary-btn { background: var(--gold); color: #142029; }
.primary-btn:hover { background: var(--gold-bright); transform: translateY(-1px); }
.primary-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.secondary-btn { background: transparent; border-color: var(--line); color: var(--ivory); }
.secondary-btn:hover { background: rgba(217,182,111,.08); }
.text-btn, .back-btn { border: 0; background: none; padding: 0; color: var(--gold-bright); cursor: pointer; font-weight: 700; }
.full { width: 100%; }

.academy-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr); align-items: center; gap: 40px; min-height: 300px; padding: clamp(30px, 5vw, 58px); border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 79% 48%, rgba(201,156,85,.14), transparent 24%), linear-gradient(135deg, #17101a, #060509 72%); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.academy-hero::after { content: ""; position: absolute; width: 320px; height: 320px; right: -90px; top: -130px; border: 1px solid rgba(217,182,111,.14); border-radius: 50%; box-shadow: 0 0 0 46px rgba(217,182,111,.025), 0 0 0 92px rgba(217,182,111,.018); }
.academy-hero h2 { margin: 9px 0 12px; font: 600 clamp(43px, 5.8vw, 72px)/.91 var(--serif); letter-spacing: -.025em; }
.academy-hero p { max-width: 650px; margin: 0; color: #c2cbcd; line-height: 1.65; }
.hero-actions { display: flex; gap: 10px; margin-top: 24px; }
.share-btn { padding: 10px 8px; }
.install-btn { white-space: nowrap; }
.academy-compass { position: relative; z-index: 1; aspect-ratio: 1; max-width: 225px; justify-self: center; display: grid; place-items: center; border: 1px solid rgba(217,182,111,.33); border-radius: 50%; color: var(--gold); box-shadow: inset 0 0 0 17px rgba(217,182,111,.025), 0 18px 70px rgba(0,0,0,.3); }
.academy-compass::before, .academy-compass::after { content: ""; position: absolute; background: rgba(217,182,111,.22); }
.academy-compass::before { width: 1px; height: 72%; }
.academy-compass::after { width: 72%; height: 1px; }
.academy-compass > span { z-index: 1; font-size: 64px; text-shadow: 0 0 30px rgba(217,182,111,.38); }
.academy-compass small { position: absolute; bottom: 23%; z-index: 1; width: 70%; text-align: center; font-size: 8px; letter-spacing: .16em; }
.path-guide { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10,8,12,.86); overflow: hidden; }
.path-guide > div { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 15px 18px; border-right: 1px solid var(--line); }
.path-guide > div:last-child { border-right: 0; }
.path-guide span { grid-row: 1/3; align-self: center; color: var(--gold); font: 600 18px var(--serif); }
.path-guide strong { font-size: 14px; }
.path-guide small { color: var(--muted); font-size: 12px; }
.personal-path { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 14px; padding: 16px 18px; border: 1px solid rgba(201,156,85,.28); border-radius: 14px; background: linear-gradient(100deg, rgba(201,156,85,.1), rgba(12,10,16,.9) 48%); }
.personal-path > div { display: flex; align-items: center; gap: 13px; min-width: 0; }
.personal-path small, .personal-path strong { display: block; }
.personal-path small { color: var(--gold); font-size: 12px; letter-spacing: .08em; }
.personal-path strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; font: 600 21px/1.1 var(--serif); white-space: nowrap; }
.personal-symbol { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-bright); font: 600 22px var(--serif); }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin: 32px 0 17px; scroll-margin-top: 100px; }
.catalog-toolbar strong, .catalog-toolbar small { display: block; }
.catalog-toolbar strong { font: 600 24px var(--serif); }
.catalog-toolbar small { margin-top: 4px; color: var(--muted); }
.catalog-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.course-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.course-card { position: relative; min-height: 350px; display: flex; flex-direction: column; overflow: hidden; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--course-tone) 9%, #110d13), #070609 68%); transition: transform .2s, border-color .2s; }
.course-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -95px; top: 36px; border: 1px solid color-mix(in srgb, var(--course-tone) 38%, transparent); border-radius: 50%; }
.course-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--course-tone) 70%, #fff); }
.course-card-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 27px; }
.course-icon { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--course-tone) 60%, transparent); border-radius: 50%; color: var(--course-tone); background: rgba(4,10,16,.38); font: 600 33px var(--serif); }
.course-status { padding: 5px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: var(--muted); font-size: 12px; letter-spacing: .08em; }
.course-card h3 { margin: 7px 0 10px; font: 600 29px/1.02 var(--serif); }
.course-card > p { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.course-progress { height: 3px; overflow: hidden; margin: auto 0 15px; border-radius: 99px; background: rgba(255,255,255,.07); }
.course-progress span { display: block; height: 100%; border-radius: inherit; background: var(--course-tone); }
.course-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; margin-bottom: 19px; }
.course-tags span { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.035); color: #c8c0ca; font-size: 12px; }
.course-open { display: flex; justify-content: space-between; width: 100%; padding: 13px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.08); background: none; color: var(--course-tone); font-weight: 700; cursor: pointer; }
.coming-section { margin-top: 48px; }
.future-courses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.future-card { display: grid; grid-template-columns: 58px 1fr; gap: 15px; align-items: center; padding: 18px; border: 1px dashed rgba(217,182,111,.25); border-radius: 13px; background: rgba(255,255,255,.018); }
.future-card > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: rgba(217,182,111,.06); color: var(--gold); font-size: 25px; }
.future-card small { color: var(--gold); font-size: 12px; letter-spacing: .1em; }
.future-card h3 { margin: 4px 0; font: 600 21px var(--serif); }
.future-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

dialog.course-dialog { width: min(980px, calc(100% - 30px)); display: none; grid-template-columns: 1fr; overflow-y: auto; max-height: 90vh; }
dialog.course-dialog[open] { display: grid; }
.course-dialog-head { display: grid; grid-template-columns: 130px 1fr; gap: 27px; align-items: center; padding: 40px; background: radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--course-tone) 15%, transparent), transparent 35%), #0b080d; border-bottom: 1px solid var(--line); }
.course-dialog-head .course-glyph { width: 125px; height: 125px; display: grid; place-items: center; border: 1px solid var(--course-tone); border-radius: 50%; color: var(--course-tone); font: 600 49px var(--serif); }
.course-dialog-head h2 { margin: 6px 0 8px; font: 600 clamp(37px, 5vw, 58px)/.95 var(--serif); }
.course-dialog-head p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.6; }
.course-dialog-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; padding: 35px 40px 42px; }
.course-syllabus { display: grid; margin-top: 13px; }
.syllabus-row { width: 100%; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 13px 10px; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; transition: background .16s, padding .16s; }
.syllabus-row:hover, .syllabus-row.active { padding-left: 14px; background: color-mix(in srgb, var(--course-tone) 9%, transparent); }
.syllabus-row.active { box-shadow: inset 2px 0 var(--course-tone); }
.syllabus-row.done span { color: #8dc2b8; }
.syllabus-row span { color: var(--course-tone); font: 600 13px var(--serif); }
.syllabus-row strong { font-size: 14px; }
.course-dialog-body aside { align-self: start; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.course-dialog-body aside h3 { margin: 8px 0; font: 600 25px var(--serif); }
.course-dialog-body aside p { color: #bdb5c0; font-size: 14px; line-height: 1.7; }
.reader-meta { display: flex; justify-content: space-between; gap: 10px; }
.reader-meta > span:last-child { color: var(--muted); font-size: 12px; }
.lesson-prompt { margin: 18px 0; padding: 14px; border-left: 2px solid var(--course-tone); background: color-mix(in srgb, var(--course-tone) 7%, transparent); }
.lesson-prompt small { color: var(--course-tone); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.lesson-prompt p { margin: 6px 0 0; }
.reader-actions { display: grid; grid-template-columns: 44px 1fr 44px; gap: 8px; margin-top: 17px; }
.reader-actions .secondary-btn { padding-left: 0; padding-right: 0; }
.reader-actions button:disabled { opacity: .35; cursor: default; }
.study-depth { margin: 22px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.study-depth h3, .study-depth h4 { margin: 0 0 9px; color: var(--gold-bright); font: 600 23px var(--serif); }
.study-depth h4 { font-size: 21px; }
.study-depth p { margin: 0 0 10px; }
.study-depth ol { margin: 13px 0 0; padding-left: 21px; color: #cbc4cd; line-height: 1.75; }
.study-check, .study-caution { padding: 12px 14px; border-left: 2px solid var(--teal); background: rgba(115,158,152,.07); }
.study-caution strong { display: block; margin-bottom: 4px; color: #b9d0cc; }
.key-terms { display: grid; gap: 5px; margin: 14px 0 20px; }
.key-terms small { color: var(--gold); font-weight: 700; letter-spacing: .1em; }
.key-terms span { color: var(--muted); font-size: 13px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(275px, .65fr); gap: 22px; margin-top: 22px; }
.panel { background: linear-gradient(145deg, rgba(23,13,24,.97), rgba(7,6,10,.98)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px rgba(255,255,255,.018), 0 18px 50px rgba(0,0,0,.16); }
.course-panel, .quiz-panel { padding: 28px; }
.panel-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 20px; }
.panel-heading h2 { font-size: 29px; margin: 5px 0 0; }
.completion-badge { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.module-list { display: grid; gap: 12px; }
.module { border: 1px solid rgba(255,255,255,.06); border-radius: 13px; overflow: hidden; }
.module-head { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border: 0; background: rgba(255,255,255,.025); padding: 15px; text-align: left; cursor: pointer; }
.module-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); font: 600 18px var(--serif); }
.module-head strong { display: block; font-size: 15px; }
.module-head small { color: var(--muted); }
.module-arrow { color: var(--gold); transition: transform .2s; }
.module.open .module-arrow { transform: rotate(90deg); }
.lesson-list { display: none; padding: 0 15px 12px 68px; }
.module.open .lesson-list { display: grid; }
.lesson-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.06); cursor: pointer; }
.lesson-row span { font-size: 14px; }
.lesson-row small { color: var(--muted); }
.lesson-row.done span::before { content: "✓"; color: var(--teal); margin-right: 8px; }
.right-column { display: grid; gap: 22px; }
.daily-card, .ritual-card { padding: 25px; text-align: center; }
.mini-card { width: 126px; aspect-ratio: .62; margin: 20px auto 14px; border: 1px solid var(--gold); border-radius: 8px; display: grid; grid-template-rows: auto 1fr auto; padding: 8px; color: var(--gold); background: radial-gradient(circle, #241726, #070609); box-shadow: 0 14px 35px rgba(0,0,0,.42); }
.mini-card b { font-size: 43px; align-self: center; }
.mini-card span, .mini-card small { font: 600 11px var(--serif); }
.daily-card h3, .ritual-card h3 { font: 600 25px var(--serif); margin: 10px 0 8px; }
.daily-card p, .ritual-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.ritual-card { text-align: left; }

.view-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 10px 0 28px; }
.view-intro h2 { font-size: clamp(34px, 4vw, 52px); margin: 6px 0 0; }
.view-intro > p { color: var(--muted); max-width: 520px; line-height: 1.6; }
.filter-row { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 22px; }
.filter-row input { flex: 1 1 280px; min-width: 0; }
input, textarea, select { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: #09070b; color: var(--ivory); outline: none; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(217,182,111,.08); }
textarea { resize: vertical; line-height: 1.55; }
.chip { padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.chip.active, .chip:hover { color: var(--ivory); border-color: var(--gold); }
.arcana-grid { display: grid; grid-template-columns: repeat(5, minmax(135px, 1fr)); gap: 15px; }
.arcana-item { position: relative; aspect-ratio: .7; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; padding: 15px; background: radial-gradient(circle at 50% 35%, var(--card-color, #20384c), #09131c 72%); cursor: pointer; text-align: left; transition: transform .2s, border-color .2s; }
.arcana-item:hover { transform: translateY(-5px); border-color: var(--gold); }
.arcana-item .roman { color: var(--gold); font: 600 12px var(--serif); }
.arcana-symbol { position: absolute; inset: 25% 0 auto; text-align: center; font-size: clamp(40px, 4vw, 62px); color: var(--gold-bright); text-shadow: 0 0 25px rgba(217,182,111,.25); }
.arcana-name { position: absolute; bottom: 32px; left: 14px; right: 14px; font: 600 20px/1 var(--serif); }
.arcana-key { position: absolute; bottom: 12px; left: 14px; color: var(--muted); font-size: 10px; }

.practice-board { padding: 30px; }
.question-label, .journal-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.spread { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0; }
.draw-slot { min-height: 330px; border: 1px dashed rgba(217,182,111,.45); border-radius: 15px; background: rgba(217,182,111,.025); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: pointer; transition: border .2s, transform .2s; }
.draw-slot:hover { border-style: solid; transform: translateY(-3px); }
.draw-slot > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--gold); }
.draw-slot small { color: var(--muted); }
.draw-slot.drawn { background: radial-gradient(circle at 50% 35%, #243e51, #071019 70%); border-style: solid; }
.draw-slot.drawn .draw-symbol { font-size: 60px; color: var(--gold); }
.draw-slot.drawn strong { font: 600 27px var(--serif); }
.draw-slot.drawn em { color: var(--muted); font-size: 12px; font-style: normal; max-width: 190px; line-height: 1.5; }
.practice-actions { display: flex; justify-content: flex-end; gap: 10px; }
.quiz-panel { margin-top: 22px; }
.quiz-question { padding: 18px 0; border-top: 1px solid var(--line); }
.quiz-question p { margin-top: 0; font-weight: 600; }
.answer-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.answer-btn { padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; background: transparent; cursor: pointer; color: var(--muted); }
.answer-btn:hover { color: var(--ivory); }
.answer-btn.correct { color: #b8e1d9; border-color: var(--teal); background: rgba(108,182,173,.08); }
.answer-btn.wrong { color: #e8b5ae; border-color: var(--danger); }

.lesson-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 22px; }
.lesson-main, .lesson-aside { padding: clamp(24px, 4vw, 48px); }
.lesson-main h2 { font-size: clamp(38px, 5vw, 63px); line-height: .95; margin: 12px 0 18px; }
.lesson-kicker { color: var(--gold); letter-spacing: .12em; font-size: 12px; font-weight: 700; }
.lesson-lead { color: #c2cbcd; font-size: 19px; line-height: 1.65; }
.lesson-body { color: #cbd2d3; line-height: 1.75; }
.lesson-body h3 { color: var(--ivory); font: 600 28px var(--serif); margin-top: 30px; }
.lesson-body .concept { padding: 18px; border-left: 2px solid var(--gold); background: rgba(217,182,111,.05); }
.lesson-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 35px; }
.lesson-aside { align-self: start; position: sticky; top: 22px; }
.lesson-aside h3 { font: 600 27px var(--serif); }
.lesson-aside p { color: var(--muted); line-height: 1.65; }
.lesson-aside textarea { margin: 12px 0; }
.lesson-aside small { display: block; text-align: center; color: var(--muted); margin-top: 8px; }

.journal-layout { display: grid; grid-template-columns: 380px 1fr; gap: 22px; }
.journal-form { padding: 24px; display: grid; gap: 17px; align-self: start; }
.journal-entries { display: grid; gap: 12px; align-content: start; }
.journal-entry { padding: 21px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.entry-meta { display: flex; justify-content: space-between; color: var(--gold); font-size: 11px; letter-spacing: .08em; }
.journal-entry h3 { font: 600 25px var(--serif); margin: 10px 0 7px; }
.journal-entry p { color: var(--muted); white-space: pre-wrap; line-height: 1.6; }
.empty-state { padding: 45px; text-align: center; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); }

dialog { width: min(860px, calc(100% - 30px)); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: #0a080c; color: var(--ivory); grid-template-columns: 310px 1fr; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,.78); }
dialog[open] { display: grid; }
dialog::backdrop { background: rgba(0,5,10,.78); backdrop-filter: blur(8px); }
.dialog-close { position: absolute; right: 15px; top: 12px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #151019; cursor: pointer; font-size: 22px; z-index: 2; }
.dialog-card { min-height: 470px; display: grid; place-items: center; font-size: 95px; color: var(--gold); background: radial-gradient(circle, #281929, #070609 70%); }
.dialog-copy { padding: 50px 38px 35px; }
.dialog-copy h2 { font: 600 46px/1 var(--serif); margin: 10px 0 15px; }
.dialog-copy > p { color: var(--muted); line-height: 1.65; }
.meaning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 24px 0; }
.meaning-grid > div { padding: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; }
.meaning-grid small { color: var(--gold); }
.meaning-grid p { margin-bottom: 0; font-size: 13px; line-height: 1.55; }
blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--gold); font: 600 20px/1.35 var(--serif); }
#toast { position: fixed; right: 25px; bottom: 25px; padding: 13px 17px; border: 1px solid var(--line); background: #15232d; border-radius: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; z-index: 50; }
#toast.show { opacity: 1; transform: none; }
.mobile-nav { display: none; }
.sound-panel { position: fixed; right: 28px; top: 92px; z-index: 45; width: min(390px, calc(100vw - 32px)); padding: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(circle at 10% 10%, rgba(201,156,85,.1), transparent 35%), rgba(7,5,9,.985); box-shadow: 0 24px 80px rgba(0,0,0,.72), inset 0 0 45px rgba(84,48,82,.08); }
.sound-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(239,200,120,.035), transparent 65%); }
.sound-panel > div { display: flex; gap: 11px; align-items: center; margin-bottom: 13px; }
.sound-now > span:nth-child(2) { flex: 1; }
.sound-now button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.sound-panel strong, .sound-panel small { display: block; }
.sound-panel small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.sound-panel em { display: block; margin-top: 5px; color: var(--gold); font-size: 10px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.sound-panel label { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.sound-panel .track-picker { margin-bottom: 10px; }
.sound-panel select { padding: 9px 10px; }
.sound-panel input { padding: 0; accent-color: var(--gold); }
.sound-pulse { width: 12px; height: 12px; border-radius: 50%; background: #544c55; box-shadow: 0 0 0 6px rgba(217,182,111,.04); }
.sound-panel.is-playing .sound-pulse { background: var(--gold-bright); box-shadow: 0 0 0 6px rgba(217,182,111,.12); animation: soundPulse 1.35s infinite; }
@keyframes soundPulse { 50% { box-shadow: 0 0 0 10px rgba(217,182,111,0); } }

.community-loading { padding: 30px; text-align: center; color: var(--muted); }
.community-pulse { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; margin-bottom: 18px; padding: 18px 20px; border: 1px solid rgba(201,156,85,.26); border-radius: 15px; background: linear-gradient(100deg, rgba(201,156,85,.1), rgba(12,10,16,.88) 48%); }
.community-tabs { display: flex; gap: 8px; margin: 0 0 18px; }
.community-panel:not(.active) { display: none !important; }
.pulse-number { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: baseline; }
.pulse-number strong { color: var(--gold-bright); font: 600 35px var(--serif); }
.pulse-number span { color: var(--muted); font-size: 12px; }
.weekly-prompt p { margin: 5px 0 0; color: #d1cbd3; line-height: 1.5; }
.onboarding-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(25px, 6vw, 80px); padding: clamp(25px, 5vw, 54px); background: radial-gradient(circle at 5% 10%, rgba(217,182,111,.11), transparent 38%), var(--surface); }
.onboarding-copy h2 { font: 600 clamp(34px, 4vw, 49px)/1 var(--serif); margin: 10px 0 15px; }
.onboarding-copy > p { color: var(--muted); line-height: 1.65; }
.privacy-line { margin-top: 12px; color: #cbd3d3; font-size: 13px; }
.privacy-line span { color: var(--teal); margin-right: 8px; }
.profile-form { display: grid; gap: 15px; }
.profile-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; }
.community-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; }
.community-sidebar { display: grid; align-content: start; gap: 15px; }
.member-card, .community-rules, .post-composer { padding: 22px; }
.member-card { text-align: center; }
.member-avatar, .composer-avatar { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #3d5966, #172a35); color: var(--gold-bright); border: 1px solid var(--line); font: 600 23px var(--serif); }
.member-avatar { width: 68px; height: 68px; margin: 0 auto 12px; }
.member-card h3 { font: 600 25px var(--serif); margin: 0; }
.member-card p { color: var(--gold); font-size: 12px; }
.member-card small { display: block; color: var(--muted); line-height: 1.55; margin-bottom: 15px; }
.guest-signin { display: inline-flex; justify-content: center; margin-top: 4px; text-decoration: none; }
.community-rules ul { padding-left: 18px; margin: 15px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.community-feed { display: grid; gap: 15px; align-content: start; }
.feed-tools { display: grid; gap: 10px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.018); }
.community-topic-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.composer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.composer-avatar { width: 38px; height: 38px; font-size: 16px; }
.composer-actions { display: grid; grid-template-columns: minmax(130px, 200px) 1fr auto; align-items: center; gap: 10px; margin-top: 10px; }
.composer-actions span { color: var(--muted); font-size: 11px; }
.feed-filter { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; }
.community-posts { display: grid; gap: 12px; }
.community-post { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.post-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; }
.post-head .composer-avatar { grid-row: 1/3; }
.post-head strong { font-size: 14px; }
.post-head small { color: var(--muted); font-size: 11px; }
.post-topic { color: var(--gold); border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; font-size: 10px; }
.community-post > p { margin: 16px 0 0; color: #d1d7d7; line-height: 1.65; white-space: pre-wrap; }
.post-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.07); }
.appreciate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.appreciate-btn span { color: var(--gold); }
.appreciate-btn.active { border-color: rgba(201,156,85,.55); background: rgba(201,156,85,.1); color: var(--ivory); }
.appreciate-btn b { color: var(--gold-bright); font-size: 12px; }
.api-error { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 13px; }

.game-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.game-tab { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; gap: 2px 14px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(10,7,12,.9); text-align: left; cursor: pointer; }
.game-tab > span { grid-row: 1/3; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); font: 600 21px var(--serif); }
.game-tab strong { font: 600 21px var(--serif); }
.game-tab small { color: var(--muted); }
.game-tab.active { border-color: rgba(239,200,120,.55); background: linear-gradient(135deg, rgba(116,61,111,.22), rgba(10,7,12,.94)); }
.games-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) 330px; gap: 18px; }
.game-stage, .leaderboard { padding: 24px; }
.game-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.game-head h3, .leaderboard h3 { margin: 5px 0 10px; font: 600 31px var(--serif); }
.game-score { text-align: right; }
.game-score span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .1em; }
.game-score strong { color: var(--gold-bright); font: 600 34px var(--serif); }
.game-stage > p { color: var(--muted); }
.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0; }
.memory-card { position: relative; min-height: 128px; padding: 0; border: 1px solid rgba(201,156,85,.28); border-radius: 12px; overflow: hidden; background: linear-gradient(145deg, #1e1120, #08060a); cursor: pointer; transform-style: preserve-3d; }
.memory-card .card-back, .memory-card .card-face { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .25s, transform .25s; backface-visibility: hidden; }
.memory-card .card-back { color: var(--gold); font: 600 36px var(--serif); }
.memory-card .card-back::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(201,156,85,.23); border-radius: 8px; }
.memory-card .card-face { align-content: center; gap: 8px; opacity: 0; transform: rotateY(180deg); background: radial-gradient(circle, #35203a, #09070b 72%); }
.memory-card .card-face b { color: var(--gold-bright); font-size: 36px; }
.memory-card .card-face small { color: #d7ced8; }
.memory-card.revealed .card-back { opacity: 0; transform: rotateY(180deg); }
.memory-card.revealed .card-face { opacity: 1; transform: none; }
.memory-card.matched { border-color: var(--teal); box-shadow: 0 0 20px rgba(115,158,152,.15); }
.game-actions { display: flex; align-items: center; gap: 14px; }
.game-actions span { color: var(--muted); }
.game-seal, .quiz-symbol { min-height: 280px; display: grid; place-items: center; color: var(--gold); font: 600 90px var(--serif); border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(circle, rgba(94,48,92,.25), transparent 58%); }
.quiz-game > p { text-align: center; font: 600 22px var(--serif); }
.game-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.game-answers button { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; }
.game-answers button:hover { border-color: var(--gold); }
.game-result { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 14px; }
.game-result strong { color: var(--gold-bright); font: 600 64px var(--serif); }
.game-result span { color: var(--muted); }
.leaderboard-rows { display: grid; margin: 16px 0; }
.leaderboard-rows > div { display: grid; grid-template-columns: 26px 30px 1fr auto; gap: 8px; align-items: center; min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.07); }
.leaderboard-rows span, .leaderboard-rows em { color: var(--gold); font-style: normal; }
.leaderboard-rows b { color: var(--gold-bright); text-align: center; }
.leaderboard > small { color: var(--muted); line-height: 1.5; }

.chat-panel { padding: 0; overflow: hidden; }
.chat-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.chat-head > div { display: flex; align-items: center; gap: 11px; }
.chat-head strong, .chat-head small { display: block; }
.chat-head small { margin-top: 2px; color: var(--muted); }
.live-orb { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(115,158,152,.08); }
.chat-messages { height: min(55vh, 520px); overflow-y: auto; padding: 18px 20px; display: grid; align-content: start; gap: 13px; }
.chat-message { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
.chat-message header { display: flex; justify-content: space-between; gap: 10px; }
.chat-message header small { color: var(--muted); }
.chat-message p { display: inline-block; margin: 5px 0 0; padding: 10px 13px; border-radius: 4px 14px 14px 14px; background: rgba(133,84,131,.15); color: #e0d9e1; line-height: 1.5; }
.chat-composer { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 15px; border-top: 1px solid var(--line); background: rgba(5,4,7,.72); }
.chat-guest { padding: 16px; text-align: center; border-top: 1px solid var(--line); }

.social-profile { max-width: 900px; margin: 0 auto; }
.profile-cover { position: relative; height: 245px; border: 1px solid var(--line); border-radius: 20px 20px 0 0; background: radial-gradient(circle at 70% 35%, rgba(239,200,120,.24), transparent 18%), linear-gradient(135deg, #3b173d, #0b0710 66%); }
.profile-cover::after { content: "☾  ·  ✦  ·  𓂀  ·  ᚠ  ·  🜍"; position: absolute; right: 7%; top: 38%; color: rgba(239,200,120,.46); font: 600 26px var(--serif); letter-spacing: .28em; }
.profile-cover.cover-ember { background: radial-gradient(circle at 72% 38%, rgba(244,173,91,.28), transparent 20%), linear-gradient(135deg, #421c12, #0b0708 68%); }
.profile-cover.cover-midnight { background: radial-gradient(circle at 72% 38%, rgba(95,144,176,.23), transparent 20%), linear-gradient(135deg, #102d43, #07070d 68%); }
.profile-cover.cover-forest { background: radial-gradient(circle at 72% 38%, rgba(120,163,121,.2), transparent 20%), linear-gradient(135deg, #153127, #070a08 68%); }
.social-avatar { position: absolute; left: 36px; bottom: -54px; width: 108px; height: 108px; display: grid; place-items: center; border: 5px solid var(--bg); border-radius: 50%; background: #18101b; color: var(--gold-bright); font: 600 45px var(--serif); box-shadow: 0 10px 35px rgba(0,0,0,.5); z-index: 2; }
.profile-summary { border-radius: 0 0 20px 20px; padding: 65px 34px 28px; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; }
.profile-summary h2 { margin: 0; font: 600 38px var(--serif); }
.profile-summary > div > p { margin: 2px 0 0; color: var(--gold); }
.profile-summary > p, .interest-chips, .profile-stats { grid-column: 1/3; }
.profile-summary > p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.interest-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.interest-chips span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #d4c9d6; font-size: 12px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; border-top: 1px solid var(--line); }
.profile-stats > div { padding: 18px 10px 0; text-align: center; }
.profile-stats strong, .profile-stats span { display: block; }
.profile-stats strong { color: var(--gold-bright); font: 600 27px var(--serif); }
.profile-stats span { color: var(--muted); font-size: 12px; }
.profile-guest { padding: 38px; text-align: center; }
.profile-guest h3 { font: 600 30px var(--serif); }
.install-dialog { width: min(650px, calc(100% - 30px)); grid-template-columns: 130px 1fr; gap: 28px; align-items: center; padding: 38px; }
.install-dialog h2 { margin: 7px 0 15px; font: 600 38px/1 var(--serif); }
.install-dialog p, .install-dialog li { color: var(--muted); line-height: 1.65; }
.install-mark { width: 120px; height: 120px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 28px; background: radial-gradient(circle, #2a182b, #070609 75%); color: var(--gold-bright); font: 600 64px var(--serif); box-shadow: 0 18px 50px rgba(0,0,0,.42); }

@media (max-width: 1100px) {
  .course-catalog { grid-template-columns: repeat(2, 1fr); }
  .arcana-grid { grid-template-columns: repeat(4, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .right-column { grid-template-columns: 1fr 1fr; }
  .daily-card { display: grid; grid-template-columns: 110px 1fr; column-gap: 18px; text-align: left; }
  .daily-card .eyebrow, .daily-card .text-btn { grid-column: 1/3; }
  .mini-card { grid-row: 2/5; width: 100px; }
  .start-here { grid-template-columns: 1fr repeat(3, .65fr); }
  .start-copy small { display: none; }
  .games-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  main { padding: 0 14px 104px; }
  .topbar { position: sticky; top: 0; z-index: 24; min-height: 76px; margin: 0 -14px 14px; padding: 0 14px; background: rgba(5,4,7,.92); backdrop-filter: blur(16px); }
  .topbar h1 { font-size: 29px; }
  .topbar .eyebrow { display: none; }
  .sound-toggle > span:nth-child(2) { display: block; }
  .sound-toggle > span:nth-child(2) strong { display: none; }
  .sound-toggle { min-height: 45px; max-width: 132px; padding: 7px 9px; }
  .sound-toggle small { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .hero-card { min-height: 450px; }
  .academy-hero { grid-template-columns: 1fr; min-height: auto; padding: 28px 23px; }
  .academy-compass { display: none; }
  .catalog-toolbar { display: block; }
  .catalog-filters { justify-content: flex-start; margin-top: 15px; }
  .hero-card img { object-position: 63% center; }
  .hero-overlay { background: linear-gradient(0deg, rgba(4,10,16,.98) 0%, rgba(4,10,16,.75) 55%, rgba(4,10,16,.08)); }
  .hero-content { position: absolute; bottom: 0; width: 100%; padding: 28px 24px; }
  .hero-content h2 { font-size: 42px; }
  .right-column, .lesson-layout, .journal-layout { grid-template-columns: 1fr; }
  .start-here { grid-template-columns: 1fr 1fr 1fr; }
  .start-copy { grid-column: 1/4; }
  .quick-action { justify-content: center; }
  .quick-action small { display: none; }
  .community-layout { grid-template-columns: 1fr; }
  .community-sidebar { grid-template-columns: 1fr 1fr; }
  .onboarding-card { grid-template-columns: 1fr; }
  .community-pulse { grid-template-columns: 120px 1fr; }
  .community-pulse > button { grid-column: 1/3; }
  .lesson-aside { position: static; }
  .spread { grid-template-columns: 1fr; }
  .draw-slot { min-height: 230px; }
  .arcana-grid { grid-template-columns: repeat(3, 1fr); }
  .mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(6, 1fr); left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)); background: rgba(5,4,7,.97); border-top: 1px solid var(--line); backdrop-filter: blur(15px); }
  .mobile-nav button { display: grid; gap: 2px; justify-items: center; border: 0; background: none; color: var(--muted); font-size: 10px; }
  .mobile-nav button span { font-size: 20px; color: var(--gold); }
  .mobile-nav button.active { color: var(--ivory); }
  dialog[open] { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
  .dialog-card { min-height: 260px; }
  .course-dialog-body { grid-template-columns: 1fr; }
  .course-reader { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -18px 45px rgba(0,0,0,.38); }
}
@media (max-width: 560px) {
  .course-catalog, .future-courses { grid-template-columns: 1fr; }
  .course-card { min-height: 0; padding: 18px; }
  .course-card-head { margin-bottom: 18px; }
  .course-icon { width: 58px; height: 58px; font-size: 27px; }
  .course-card h3 { font-size: 26px; }
  .academy-hero { padding: 24px 19px; }
  .academy-hero h2 { font-size: 41px; }
  .academy-hero p { font-size: 14px; }
  .hero-actions { flex-direction: column; margin-top: 20px; }
  .share-btn { min-height: 42px; text-align: center; }
  .path-guide { grid-template-columns: 1fr; }
  .path-guide > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 11px 15px; }
  .path-guide > div:last-child { border-bottom: 0; }
  .personal-path { align-items: stretch; padding: 14px; }
  .personal-path > div { flex: 1; }
  .personal-path .primary-btn { width: auto; padding: 10px 13px; }
  .personal-symbol { width: 40px; height: 40px; }
  .personal-path strong { max-width: 155px; font-size: 18px; }
  .catalog-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
  .catalog-filters::-webkit-scrollbar { display: none; }
  .catalog-filters .chip { flex: 0 0 auto; }
  .course-dialog-head { grid-template-columns: 68px 1fr; gap: 15px; padding: 28px 20px; }
  .course-dialog-head .course-glyph { width: 65px; height: 65px; font-size: 27px; }
  .course-dialog-head h2 { font-size: 35px; }
  .course-dialog-body { grid-template-columns: 1fr; gap: 18px; padding: 20px 14px 24px; }
  .course-reader { position: static; padding: 18px !important; }
  .streak small { display: none; }
  .topbar h1 { font-size: 30px; }
  .view-intro { display: block; }
  .view-intro > p { margin-bottom: 0; }
  .right-column { grid-template-columns: 1fr; }
  .daily-card { display: block; text-align: center; }
  .arcana-grid { grid-template-columns: repeat(2, 1fr); }
  .panel-heading { display: block; }
  .completion-badge { display: inline-block; margin-top: 10px; }
  .course-panel, .practice-board, .quiz-panel { padding: 19px; }
  .module-head { grid-template-columns: 38px 1fr auto; padding: 12px; }
  .lesson-list { padding-left: 53px; }
  .practice-actions { flex-direction: column; }
  .community-sidebar { grid-template-columns: 1fr; }
  .community-pulse { grid-template-columns: 1fr; padding: 16px; }
  .community-pulse > button { grid-column: auto; }
  .pulse-number { justify-content: start; }
  .community-topic-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .community-topic-filters .chip { flex: 0 0 auto; }
  .community-tabs { overflow-x: auto; scrollbar-width: none; }
  .community-tabs .chip { flex: 0 0 auto; }
  .game-selector { grid-template-columns: 1fr; }
  .game-stage, .leaderboard { padding: 17px; }
  .memory-board { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .memory-card { min-height: 112px; }
  .game-answers { grid-template-columns: 1fr; }
  .game-seal, .quiz-symbol { min-height: 220px; }
  .profile-cover { height: 185px; }
  .profile-cover::after { right: 2%; font-size: 17px; }
  .social-avatar { left: 20px; width: 88px; height: 88px; bottom: -44px; }
  .profile-summary { grid-template-columns: 1fr; padding: 54px 20px 22px; }
  .profile-summary > p, .interest-chips, .profile-stats { grid-column: 1; }
  .profile-summary .secondary-btn { width: 100%; }
  .chat-messages { height: 50vh; padding: 15px; }
  .chat-composer { grid-template-columns: 1fr; }
  .mobile-nav button { font-size: 9px; }
  .mobile-nav button span { font-size: 18px; }
  .composer-actions { grid-template-columns: 1fr auto; }
  .composer-actions .primary-btn { grid-column: 1/3; }
  .start-here { grid-template-columns: 1fr; }
  .start-copy { grid-column: auto; }
  .quick-action { justify-content: flex-start; }
  .quick-action small { display: block; }
  .sound-panel { left: 10px; right: 10px; top: auto; bottom: 78px; width: auto; }
  .primary-btn, .secondary-btn { width: 100%; }
  .meaning-grid { grid-template-columns: 1fr; }
  .dialog-copy { padding: 34px 22px; }
  .install-dialog { grid-template-columns: 1fr; gap: 18px; padding: 30px 22px; }
  .install-mark { width: 82px; height: 82px; border-radius: 20px; font-size: 44px; }
}

@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
  main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
  .install-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Conservatorio Rituale — selected dark editorial direction */
:root {
  --bg: #030303;
  --surface: #090807;
  --surface-2: #100b0a;
  --line: rgba(190, 151, 87, .28);
  --gold: #b99254;
  --gold-bright: #e1bd78;
  --ivory: #eee8dc;
  --muted: #aaa29a;
  --radius: 10px;
}

body { background: #030303; }
.sidebar { background: rgba(2,2,2,.98); }
.brand-mark { background: #0b0807; clip-path: polygon(50% 0, 100% 22%, 90% 100%, 10% 100%, 0 22%); }
.nav-item, .primary-btn, .secondary-btn, .sound-toggle, .streak, .panel, .path-guide, .personal-path, .chip { border-radius: 7px; }
.nav-item.active { box-shadow: inset 2px 0 var(--gold-bright); background: #14100c; }
.topbar { min-height: 92px; }
.topbar h1 { letter-spacing: .01em; }

.sidebar-rank { display: grid; gap: 3px; width: 100%; margin: 0 0 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; background: #0c0908; text-align: left; cursor: pointer; }
.sidebar-rank:hover, .sidebar-rank:focus-visible { border-color: var(--gold-bright); }
.sidebar-rank .rank-kicker { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.sidebar-rank strong { color: var(--ivory); font: 600 23px/1.1 var(--serif); }
.sidebar-rank small { color: var(--muted); font-size: 10px; }

.academy-hero { display: block; min-height: 390px; padding: 0; border-radius: 9px; background: #080706; }
.academy-hero::after { display: none; }
.academy-hero-art, .academy-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.academy-hero-art { object-fit: cover; object-position: center; }
.academy-hero-shade { background: linear-gradient(90deg, rgba(3,3,3,.98) 0%, rgba(3,3,3,.92) 33%, rgba(3,3,3,.52) 61%, rgba(3,3,3,.14) 100%); }
.academy-hero-copy { position: relative; z-index: 2; max-width: 760px; padding: 48px 52px 44px; }
.academy-hero h2 { max-width: 720px; margin: 11px 0 12px; font-size: clamp(52px, 6vw, 82px); }
.academy-hero p { max-width: 620px; font-size: 15px; }
.hero-mantra { margin-top: 18px; color: var(--gold); font-family: var(--serif); font-size: 11px; letter-spacing: .18em; }
.hero-actions { margin-top: 22px; flex-wrap: wrap; }
.primary-btn { background: #c59b56; color: #130e08; }
.primary-btn:hover { background: #dfbd7a; }
.secondary-btn { background: rgba(4,4,4,.74); }

.path-guide { margin-top: 0; border-top: 0; }
.path-guide > div { border-radius: 0; }
.degree-section { margin-top: 42px; }
.degree-heading { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 18px; }
.degree-heading h2 { margin: 5px 0 0; font-size: clamp(32px, 4vw, 49px); }
.degree-heading > p { max-width: 580px; margin: 0; color: var(--muted); line-height: 1.7; }
.degree-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.degree-card { position: relative; display: flex; min-height: 350px; flex-direction: column; padding: 26px; overflow: hidden; border: 1px solid rgba(190,151,87,.18); border-radius: 7px; background: linear-gradient(155deg, #0e0b09, #050505 68%); }
.degree-card::before { content: "✦"; position: absolute; top: -36px; right: -12px; color: rgba(190,151,87,.07); font: 150px/1 var(--serif); }
.degree-card.active { border-color: var(--gold-bright); box-shadow: inset 0 0 0 1px rgba(225,189,120,.14); }
.degree-card h3 { position: relative; margin: 10px 0 8px; font-size: 33px; }
.degree-card p { position: relative; min-height: 48px; margin: 0; color: var(--muted); line-height: 1.55; }
.degree-card ul { position: relative; display: grid; gap: 0; margin: 24px 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.08); }
.degree-card li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #c9c0b6; font-size: 12px; }
.degree-card li b { color: var(--gold); font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.degree-credit { position: relative; display: grid; gap: 12px; margin-top: auto; }
.degree-credit > span { color: #8f867c; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.degree-credit button { width: 100%; }
.personal-path { margin-top: 10px; background: #0b0908; }
.catalog-toolbar { margin-top: 26px; }
.course-catalog { position: relative; display: grid; grid-template-columns: 1fr; gap: 5px; padding: 7px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #080706 url("assets/conservatorio-curriculum.png") center/cover no-repeat; }
.course-catalog::before { content: ""; position: absolute; inset: 0; background: rgba(2,2,2,.66); pointer-events: none; }
.course-card { position: relative; z-index: 1; min-height: 94px; display: grid; grid-template-columns: 56px minmax(0, 1fr) 130px 104px; gap: 18px; align-items: center; padding: 14px 17px; border-radius: 4px; background: rgba(6,5,5,.78); backdrop-filter: blur(2px); }
.course-card::after { display: none; }
.course-card:hover { transform: none; background: rgba(17,11,9,.92); }
.course-index { color: var(--gold); font: 600 19px var(--serif); text-align: center; }
.course-copy { min-width: 0; }
.course-card .eyebrow { font-size: 9px; }
.course-card h3 { margin: 2px 0 3px; font-size: 25px; }
.course-card p { max-width: 780px; margin: 0; overflow: hidden; color: #bab2aa; font-size: 12px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.course-tags { margin: 7px 0 0; }
.course-tags span { padding: 3px 7px; font-size: 9px; }
.course-state { display: grid; gap: 10px; }
.course-status { text-align: center; }
.course-progress { width: 100%; margin: 0; }
.course-open { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; }
.course-open b { color: var(--gold-bright); font-size: 18px; }

.profile-cover { background: #090705 url("assets/percorso-gradi.png") center 58%/cover no-repeat; }
.profile-cover::after { display: none; }
.rank-path { position: relative; grid-column: 1/3; overflow: hidden; margin-top: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: #070605; }
.rank-path > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .25; }
.rank-path::after { content: ""; position: absolute; inset: 0; background: rgba(3,3,3,.5); pointer-events: none; }
.rank-path > *:not(img) { position: relative; z-index: 1; }
.rank-path-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.rank-path-head h3 { margin: 5px 0 0; font: 600 28px var(--serif); }
.rank-path-head > strong { color: var(--gold-bright); font-size: 13px; }
.rank-meter { height: 4px; margin: 22px 0 15px; overflow: hidden; background: rgba(255,255,255,.12); }
.rank-meter span { display: block; width: 0; height: 100%; background: var(--gold-bright); transition: width .35s ease; }
.rank-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.rank-step { display: grid; grid-template-columns: 31px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; padding: 10px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.42); }
.rank-step > span { grid-row: 1/3; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #675c4b; border-radius: 50%; color: #938676; font: 600 13px var(--serif); }
.rank-step strong { color: #998f84; font: 600 17px var(--serif); }
.rank-step small { color: #77706a; font-size: 9px; }
.rank-step.done, .rank-step.active { border-color: rgba(225,189,120,.42); }
.rank-step.done > span, .rank-step.active > span { border-color: var(--gold-bright); color: var(--gold-bright); }
.rank-step.active strong { color: var(--ivory); }
.rank-requirement { margin: 14px 0 0 !important; color: #c7bfb6 !important; font-size: 12px; }
.profile-degree { display: block; margin-top: 5px; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.exam-access { width: 100%; display: grid; gap: 5px; margin-top: 18px; padding: 16px; border: 1px solid var(--gold); border-radius: 6px; background: #120d09; color: var(--ivory); text-align: left; cursor: pointer; }
.exam-access span { color: var(--gold); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.exam-access strong { font: 600 20px var(--serif); }
.exam-access small { color: var(--muted); }
.exam-access:disabled { border-color: rgba(255,255,255,.1); opacity: .55; cursor: not-allowed; }
.exam-dialog { width: min(720px, calc(100vw - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #080706; color: var(--ivory); }
.exam-copy { padding: 34px; }
.exam-copy h2 { margin: 7px 0 8px; font-size: 39px; }
.exam-copy > p { color: var(--muted); }
.exam-copy fieldset { display: grid; gap: 8px; margin: 22px 0; padding: 18px; border: 1px solid rgba(255,255,255,.1); }
.exam-copy legend { padding: 0 8px; color: var(--ivory); font: 600 19px var(--serif); }
.exam-copy fieldset label { display: flex; gap: 10px; align-items: start; padding: 10px; border: 1px solid transparent; background: rgba(255,255,255,.025); cursor: pointer; }
.exam-copy fieldset label:has(input:checked) { border-color: var(--gold); background: rgba(185,146,84,.1); }
.exam-result { margin-top: 22px; padding: 22px; border: 1px solid var(--gold); background: #120d09; }
.exam-result strong { color: var(--gold-bright); font: 600 27px var(--serif); }

.language-picker { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:5px; background:#090807; color:var(--gold); }
.language-picker select { border:0; background:transparent; color:var(--ivory); font-weight:800; cursor:pointer; }
.archive-section { margin-top:24px; padding:25px; }
.archive-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.archive-grid a { min-height:125px; display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:16px; border:1px solid var(--line); border-radius:6px; background:linear-gradient(145deg,#15100d,#080706); color:var(--ivory); text-decoration:none; }
.archive-grid a:hover { border-color:var(--gold); transform:translateY(-2px); }
.archive-grid a > span { margin-bottom:auto; color:var(--gold-bright); font:600 25px var(--serif); }
.archive-grid a small { color:var(--muted); }
.order-panel { display:grid; gap:14px; }
.order-hero { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; padding:25px; background:radial-gradient(circle at 8% 20%,rgba(185,146,84,.14),transparent 30%),#080706; }
.order-hero h2 { margin:3px 0; font-size:38px; }
.order-hero p { margin:0; color:var(--muted); }
.order-sigil { width:82px; height:82px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; color:var(--gold-bright); box-shadow:0 0 35px rgba(185,146,84,.16); font:600 42px var(--serif); }
#orderContent { display:grid; gap:14px; }
.order-section { padding:24px; }
.order-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.order-directory article,.order-list article { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); }
.order-list { display:grid; gap:7px; }
.order-list article p { margin:5px 0 0; color:var(--muted); }
.member-symbol { width:42px; height:42px; display:grid; place-items:center; border:1px solid #6f5b3c; border-radius:50%; color:var(--gold-bright); font:600 21px var(--serif); }
.order-directory strong,.order-list strong { display:block; font:600 19px var(--serif); }
.order-directory small,.order-list small { color:var(--muted); }
.role-seal { position:absolute; left:104px; bottom:18px; width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--gold-bright); border-radius:50%; background:#090706; color:var(--gold-bright); box-shadow:0 0 20px rgba(225,189,120,.25); font-size:18px; }
.canon-section { margin-top:34px; padding:28px; border:1px solid var(--line); border-radius:8px; background:radial-gradient(circle at 80% 0,rgba(116,72,126,.13),transparent 28%),#070605; }
.canon-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 12px; }
.canon-criteria { display:flex; align-items:center; gap:16px; margin-bottom:10px; padding:12px 14px; border-left:2px solid var(--gold); background:rgba(185,146,84,.06); }
.canon-criteria span { flex:0 0 auto; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.14em; }
.canon-criteria p { margin:0; color:#bcb3a9; font-size:13px; }
.canon-grid { display:grid; gap:5px; }
.canon-card { display:grid; grid-template-columns:72px minmax(0,1fr) 70px; align-items:center; gap:18px; min-height:112px; padding:16px 18px; border:1px solid rgba(255,255,255,.075); background:linear-gradient(90deg,rgba(20,15,13,.92),rgba(8,7,6,.84)); }
.canon-card:hover { border-color:rgba(225,189,120,.36); }
.canon-rank { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; color:#766d64; font:600 13px var(--sans); }
.canon-rank b { color:var(--gold-bright); font:600 30px var(--serif); }
.canon-card small { color:var(--gold); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.canon-card h3 { margin:3px 0; font-size:24px; }
.canon-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.canon-score { text-align:right; }
.canon-score strong { display:block; color:var(--gold-bright); font:600 30px var(--serif); }
.canon-score span { color:#7d746b; font-size:10px; }

@media (max-width: 1100px) {
  .course-catalog { grid-template-columns: 1fr; }
  .course-card { grid-template-columns: 48px minmax(0,1fr) 105px 90px; gap: 12px; }
}

@media (max-width: 820px) {
  .academy-hero { min-height: 520px; }
  .academy-hero-art { object-position: 66% center; }
  .academy-hero-shade { background: linear-gradient(0deg, rgba(3,3,3,.99) 0%, rgba(3,3,3,.9) 48%, rgba(3,3,3,.18) 100%); }
  .academy-hero-copy { position: absolute; inset: auto 0 0; max-width: none; padding: 30px 25px; }
  .course-card { grid-template-columns: 42px minmax(0,1fr) 84px; }
  .course-state { display: none; }
  .course-open { min-width: 80px; }
  .rank-path { grid-column: 1; }
  .degree-heading { display: block; }
  .degree-heading > p { margin-top: 10px; }
  .degree-grid { grid-template-columns: 1fr; }
  .degree-card { min-height: 0; }
  .archive-grid,.order-directory { grid-template-columns:1fr 1fr; }
}

@media (max-width: 560px) {
  .academy-hero { min-height: 590px; }
  .academy-hero h2 { font-size: 46px; }
  .hero-mantra { line-height: 1.7; }
  .course-card { min-height: 0; grid-template-columns: 35px minmax(0,1fr); gap: 11px; padding: 14px 12px; }
  .course-open { grid-column: 2; width: fit-content; min-width: 110px; margin-top: 4px; }
  .course-card p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .course-tags { display: none; }
  .rank-path { padding: 17px 13px; }
  .rank-path-head { display: block; }
  .rank-path-head > strong { display: block; margin-top: 8px; }
  .rank-steps { grid-template-columns: 1fr 1fr; }
  .archive-grid,.order-directory { grid-template-columns:1fr; }
  .order-hero { grid-template-columns:auto 1fr; }
  .order-hero > button { grid-column:1/3; }
  .order-sigil { width:62px; height:62px; font-size:31px; }
  .order-directory article,.order-list article { grid-template-columns:auto minmax(0,1fr); }
  .order-directory article button,.order-list article button { grid-column:2; width:100%; }
  .canon-section { padding:18px 12px; }
  .canon-criteria { display:block; }
  .canon-criteria p { margin-top:6px; }
  .canon-card { grid-template-columns:52px minmax(0,1fr); gap:10px; padding:14px 10px; }
  .canon-score { grid-column:2; display:flex; align-items:baseline; gap:4px; text-align:left; }
  .canon-score strong { font-size:22px; }
}