@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

/* Brighter Neon Arcade; the base stylesheet owns layout and interaction. */
:root {
  color-scheme:light;
  --paper:#e3caff; --paper-deep:#ead9ff; --surface:#fff7ff;
  --ink:#291343; --body:#514165; --muted:#664e7b;
  --line:#bc8ad5; --line-soft:#dfc1ee;
  --green:#7131a8; --green-dark:#51207c; --green-light:#f0dfff;
  --orange:#b51b85; --orange-soft:#ffe8f6;
  --hot-pink:#ff5ac7; --aqua:#78fff1; --aqua-soft:#e3ffff; --peach-soft:#fff5da;
  --serif:"Segoe UI",Arial,sans-serif; --sans:"Segoe UI",Arial,sans-serif;
  --display:"Archivo Black","Arial Black",Arial,sans-serif;
  --mono:"Space Mono",Consolas,"Courier New",monospace;
}
body { background:linear-gradient(135deg,#ffd3ed 0%,#ddc3ff 51%,#a8f4f2 100%); background-attachment:fixed; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--green-dark); outline-offset:4px; }
.site-header { height:85px; background:linear-gradient(100deg,#75fff2,#c8fcff 55%,#ffb6e5); border-bottom:3px solid #f82cb4; }
.header-inner { min-height:82px; }
.brand { gap:11px; }
.brand-mark { color:#5c197e; background:#e6fffc; border:1px solid #9e55c0; border-radius:3px; box-shadow:3px 3px 0 var(--hot-pink); }
.brand-name { color:#4e147b; font:italic 23px/1.05 var(--display); letter-spacing:.2px; text-transform:uppercase; text-shadow:2px 2px #ff71ce,-1px -1px #fff; }
.brand-subtitle { color:#3e205c; font:700 10px/1.2 var(--mono); letter-spacing:2.2px; text-shadow:none; }
.header-note { color:#682077; font:700 11px/1.6 var(--mono); text-align:right; text-transform:uppercase; letter-spacing:.8px; }
.mobile-topics { color:var(--green-dark); border:1px solid var(--green); border-radius:3px; background:#fff4ff; box-shadow:2px 2px 0 var(--hot-pink); }
.sidebar { background:linear-gradient(180deg,#f7bcf2,#d6baff 62%,#a9f4ed); border-right:2px solid #c16bdb; scrollbar-color:#a270c1 #ead6fa; }
.eyebrow,.category-nav > h3,.category-group-label,.category-heading,.nav-group-title { color:#60236f; font-family:var(--mono); }
.eyebrow { font-size:11px; letter-spacing:1.3px; }
.sidebar-heading h2 { color:#512071; font:19px/1.3 var(--display); letter-spacing:-.4px; }
.category-btn,.topic-group summary { border-radius:2px; }
.category-btn:hover,.topic-group summary:hover { background:#f9e1ff; }
.category-btn.active { background:var(--hot-pink); color:#32103f; border-color:#792296; box-shadow:3px 3px 0 var(--aqua); }
.category-btn.active .count,.category-btn.active .category-count,.category-btn.active > span:last-child:not(:first-child) { color:#4e1a63; }
.category-btn .count,.category-count,.category-btn > span:last-child:not(:first-child) { color:#5f3b76; font-size:11px; }
.topic-group.selected > summary { color:#512071; background:#ffd7f4; border-left:3px solid #bd2a99; }
.topic-children { border-left-color:#a567c4; }
.topic-children .category-btn { font-size:12px; }
.sidebar-note p { color:#513264; font:15px/1.6 var(--sans); }
.note-rule { width:35px; height:3px; background:linear-gradient(90deg,var(--hot-pink),#168b8d); }
.small-note { color:#5f3b76; }
.sidebar-backdrop { background:rgba(55,20,86,.4); }

.intro { position:relative; isolation:isolate; min-height:320px; padding-top:7px; padding-bottom:34px; }
.intro > :not(.arcade-sky) { position:relative; z-index:1; }
.arcade-sky { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.arcade-sun { position:absolute; top:5px; right:6px; width:164px; height:164px; border-radius:50%; background:linear-gradient(#ffe973,#ff963e 35%,#ff48c4 70%,#cc40ff); -webkit-mask:repeating-linear-gradient(to bottom,#000 0 15px,transparent 15px 20px); mask:repeating-linear-gradient(to bottom,#000 0 15px,transparent 15px 20px); }
.arcade-grid { position:absolute; bottom:4px; left:0; right:0; height:94px; background:repeating-linear-gradient(90deg,transparent 0 39px,#9e3fd0 40px 41px),repeating-linear-gradient(0deg,transparent 0 19px,#9e3fd0 20px 21px); -webkit-mask:linear-gradient(transparent,#000); mask:linear-gradient(transparent,#000); transform:perspective(170px) rotateX(43deg); transform-origin:center bottom; opacity:.4; }
.intro-eyebrow { color:#612477; max-width:calc(100% - 178px); font:700 10px/1.6 var(--mono); }
.intro-eyebrow > span { background:#b51b85; }
.intro h1 { color:#612388; font:italic clamp(42px,4.4vw,62px)/1.03 var(--display); text-transform:uppercase; text-shadow:3px 3px 0 #ff82d9,-2px -2px #fff; letter-spacing:-1.7px; max-width:calc(100% - 175px); margin-bottom:19px; }
.title-period { color:#8a218f; }
.intro-description { max-width:600px; color:#4c345f; }
.collection-stats { color:#54316d; font:11px/1.8 var(--mono); gap:5px 16px; }
.collection-stats strong { color:#351349; }
.collection-stats > span + span::before { background:#b981cf; margin-right:16px; }
.is-filtered .intro { min-height:98px; padding-top:3px; padding-bottom:20px; }
.is-filtered .intro h1 { font-size:30px; max-width:calc(100% - 94px); text-shadow:2px 2px 0 #ff82d9,-1px -1px #fff; }
.is-filtered .arcade-sun { width:70px; height:70px; top:0; }
.is-filtered .arcade-grid { height:42px; bottom:8px; opacity:.22; }
.search-box { background:#fff; border:2px solid var(--green); border-radius:2px; box-shadow:4px 4px 0 #ff62cf,7px 7px 0 #7effee; }
.search-box:focus-within { border-color:#4f167a; box-shadow:0 0 0 3px #d4aeef,4px 4px 0 #ff62cf,7px 7px 0 #7effee; }
.search-box input::placeholder { color:#705c80; }
.search-clear,.search-shortcut { color:#593578; background:#f3e6ff; border-radius:2px; }
.scope-tabs { gap:5px; margin-top:18px; }
.scope-tab { color:#55336b; background:#f7eaff; border:1px solid #bd92d4; border-radius:2px; }
.scope-tab:hover { color:var(--ink); background:#ffe2f6; }
.scope-tab.active { color:#fff; background:var(--green); border-color:var(--green); box-shadow:2px 2px 0 #ff76d6; }
.kind-filter,.subtopic-chip,.filter-chip { border-radius:2px; }
.subtopic-chip { border-color:#b886d0; box-shadow:2px 2px 0 #d7b4eb; }
.subtopic-chip:hover,.load-more { border-color:#8d4ab5; }
.subtopic-chip.active,.subtopic-chip.active span { color:#fff; }
.filter-chip { background:#f8ddf7; border-color:#bd80d0; }
.results-header h2,.section-header h2,.learning-hub h2,.starter-section-heading h3,.research-heading h2 { color:#572275; font-family:var(--display); font-weight:400; letter-spacing:-.5px; }
.results-header h2,.learning-hub h2,.research-heading h2 { font-size:25px; }
.section-header h2 { font-size:22px; }
.section-kicker { color:#644276; font-family:var(--mono); font-size:10px; }

.entry-card,.domain-card { border:1px solid #af78c7; border-left:4px solid #f73cb5; border-radius:3px; background:var(--surface); box-shadow:3px 3px 0 #cba5ed; }
.entry-card:hover,.domain-card:hover { background:#fff5fd; border-color:#8b4bad; box-shadow:4px 4px 0 #b98cdb; }
.results-grid > .entry-card:nth-child(even),.domain-card:nth-child(even) { border-left-color:#009b9c; background:var(--aqua-soft); }
.entry-card.entry-prompt,.entry-card.entry-project,.results-grid > .entry-card.entry-prompt,.results-grid > .entry-card.entry-project { background:linear-gradient(110deg,#fff5da,#ffe6f8 80%); }
.featured-grid .entry-card { background:#fff1fb; border-color:#b687cd; border-left-color:#de32a8; }
.featured-grid .entry-card:hover { background:#ffe2f8; }
.entry-path { background:#e7f7ff; }
.entry-title { color:#35134f; font-family:var(--sans); font-weight:700; font-size:23px; line-height:1.25; letter-spacing:-.35px; }
.entry-kind,.entry-kind.kind-path { color:#6d2a93; font-family:var(--mono); font-size:10px; letter-spacing:.7px; }
.entry-kind.kind-project,.entry-kind.kind-prompt,.entry-card[data-kind=prompt] .entry-kind,.entry-card.kind-prompt .entry-kind { color:#8d2867; }
.entry-category,.entry-meta { color:#654e77; font-size:11px; }
.entry-summary { color:#514165; font-size:13px; }
.entry-meta .read-link,.entry-meta .open-label { font-size:11px; }
.domain-card strong { font-family:var(--sans); font-weight:700; }
.domain-card-top,.domain-topics { font-size:11px; }
.copy-btn { color:#fff; background:var(--green); border-color:var(--green); border-radius:2px; box-shadow:2px 2px 0 #ff67cb; }
.copy-btn:hover { color:#fff; background:#582081; border-color:#582081; }
.copy-btn.copied,.copy-btn[data-copied=true] { background:#92eee0; color:#27334b; border-color:#2d777d; }
mark { background:#ffed8d; color:#341743; }
.empty-state { border-color:#aa72c4; border-radius:3px; background:#fff1fb; }
.empty-state h3 { font-family:var(--sans); font-weight:700; }
.site-footer { color:#5b3a70; font-size:11px; }
.footer-brand { color:#512071; font-family:var(--mono); font-size:12px; }

.learning-path-callout { background:linear-gradient(120deg,#dcfffa,#f1d9ff 85%); border:1px solid #ad7ac7; border-left:4px solid #04898a; border-radius:3px; box-shadow:4px 4px 0 #d4b4ed; }
.learning-path-callout h3 { color:#472066; font-family:var(--sans); font-weight:700; font-size:28px; }
.learn-action,.video-watch { border-radius:2px; color:#fff; background:var(--green); border-color:var(--green); box-shadow:3px 3px 0 #ff78d5; }
.learn-action:hover,.video-watch:hover { color:#fff; background:var(--green-dark); }
.learn-secondary { color:#51207c; background:#fff7ff; border-color:#a773c3; border-radius:2px; }
.learn-secondary:hover { background:#ffe1f7; }
.research-hub { border-color:#b581ce; border-left-color:#c82c99; border-radius:3px; background:linear-gradient(110deg,#fff5da,#ffe6f8 78%); box-shadow:3px 3px 0 #d3b0e7; }
.research-topics .learn-secondary { background:#fff8ff; }
.step-number { border-radius:3px; background:#fff8ff; border:1px solid #bc8ad5; color:#53217c; }
.learning-step,.video-card { border-color:#b991ce; border-radius:3px; background:#fbf3ff; }
.learning-step h3 { font-family:var(--sans); font-weight:700; }
.completion-check,.project-level,.project-milestones .milestone-check { background:#dcfaf6; color:#315361; border-radius:2px; }
.completion-check strong { color:#455071; }
.completion-check p { color:#354359; }
.path-project-links button { background:#f5e9ff; border-radius:3px; }
.path-project-links button:hover { border-color:#9b62bb; background:#e1fffb; }
.video-card { border-left:4px solid #038789; background:#e8fffb; }
.video-card h4 { color:#432164; font-family:var(--sans); font-weight:700; }
.video-practice { border-color:#bf9ad2; border-radius:2px; background:#fff8ff; }

.article-dialog { border:2px solid #a267c1; border-top:6px solid #ef41b6; border-radius:5px; background:#fff8ff; box-shadow:7px 7px 0 #c99ae6,0 22px 80px rgba(47,12,79,.32); scrollbar-color:#ac78c7 #f3e7fc; }
.article-dialog::backdrop { background:rgba(52,20,79,.48); backdrop-filter:blur(3px); }
.dialog-close { border-color:#aa78c2; background:#e1fffa; color:#50206f; border-radius:3px; }
.dialog-close:hover { background:#fbd3f2; }
.article-title { color:#4f2172; font-family:var(--sans); font-weight:750; letter-spacing:-.9px; }
.article-eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.7px; }
.article-section h2,.article-content > h2 { color:#4f2172; font-family:var(--sans); font-weight:700; }
.article-section h3,.article-content > h3 { color:#532270; }
.article-pitfall { border-left-color:#b12688; background:#ffe9f8; border-radius:2px; }
.article-section th { background:#ead9ff; }
.article-section td { background:#fffaff; }
.article-section blockquote { background:#e3f9f6; border-left-color:#147d7b; }
.article-content code:not(.prompt-block code) { color:#51206e; background:#f1e1ff; }
.prompt-block,.article-section pre { color:#351747; background:#eee0fc; border:1px solid #b891d6; border-left:4px solid #07888a; border-radius:3px; box-shadow:3px 3px 0 #f0b3e6; font-family:var(--mono); }
.related-list button,.related-list a { border-color:#b58acc; border-radius:2px; background:#f7ebff; }
.related-list button:hover,.related-list a:hover { border-color:#8e55ae; background:#e3fffa; }
.copy-toast { color:#fff; background:#51207c; border:1px solid #c599e8; border-radius:3px; box-shadow:3px 3px 0 #ff78d5,0 6px 24px rgba(62,20,85,.2); }

.review-page { position:relative; max-width:1000px; margin:32px auto; padding:36px; color:var(--body); background:#fff7ff; border:1px solid #a977c2; border-top:6px solid #f344b7; box-shadow:6px 6px 0 #d19ee8; }
.review-page h1 { color:#612388; font-family:var(--display); font-style:italic; font-size:clamp(36px,5vw,56px); text-shadow:2px 2px 0 #ffa1e2; text-transform:uppercase; }
.review-page h2 { font-family:var(--sans); font-weight:750; color:#4f2172; }
.review-rows details { padding:16px 13px; }
.review-rows details:nth-child(even) { background:#f6eaff; }
.review-rows details[open] { background:#e9fffb; }
.review-status { color:#693d82; font-family:var(--mono); font-size:11px; }
.review-rows summary { color:#45225f; }

@media(min-width:1500px) { .arcade-sun { width:180px; height:180px; } }
@media(max-width:1150px) {
  .intro { min-height:320px; }
  .intro-eyebrow { max-width:calc(100% - 130px); }
  .arcade-sun { width:130px; height:130px; }
  .intro h1 { font-size:49px; max-width:calc(100% - 125px); }
}
@media(max-width:850px) {
  .site-header { height:74px; }
  .header-inner { min-height:71px; }
  .sidebar { background:linear-gradient(180deg,#f7bcf2,#d6baff 62%,#a9f4ed); box-shadow:12px 0 34px rgba(74,32,106,.2); }
  .intro { min-height:300px; }
  .intro h1 { font-size:52px; max-width:calc(100% - 155px); }
  .arcade-sun { width:150px; height:150px; }
}
@media(max-width:600px) {
  .site-header { height:70px; }
  .header-inner { min-height:67px; padding:0 15px; gap:10px; }
  .brand-name { font-size:17px; }
  .brand-subtitle { font-size:9px; letter-spacing:1.3px; }
  .brand-mark { width:31px; height:33px; }
  .brand-mark svg { width:22px; height:22px; }
  .brand { gap:8px; }
  .mobile-topics { min-height:44px; }
  .intro { min-height:305px; padding-top:0; padding-bottom:29px; }
  .intro-eyebrow { max-width:calc(100% - 70px); font-size:9px; letter-spacing:.8px; }
  .intro h1 { max-width:calc(100% - 64px); font-size:clamp(33px,8vw,46px); line-height:1.07; letter-spacing:-1px; }
  .arcade-sun { top:15px; right:-12px; width:100px; height:100px; opacity:.45; }
  .arcade-grid { height:87px; }
  .intro-description { font-size:13px; }
  .collection-stats { font-size:10px; gap:4px 9px; }
  .collection-stats > span + span::before { margin-right:9px; }
  .is-filtered .intro { min-height:90px; padding-bottom:15px; }
  .is-filtered .intro h1 { font-size:25px; max-width:calc(100% - 55px); }
  .is-filtered .arcade-sun { width:55px; height:55px; top:0; right:0; opacity:.65; }
  .search-box input { font-size:16px; }
  .scope-tab { font-size:11px; padding:8px 9px; min-height:38px; }
  .results-header h2 { font-size:22px; }
  .results-header { flex-wrap:wrap; }
  .results-count { padding-top:0; }
  .entry-title,.starter-grid .entry-title { font-size:24px; }
  .article-title { font-size:30px; }
  .article-eyebrow { font-size:10px; }
  .learning-path-callout h3 { font-size:26px; }
  .learning-hub h2,.research-heading h2 { font-size:23px; }
  .featured-grid { scrollbar-color:#a270c1 transparent; }
  .featured-grid .entry-card { border-radius:3px; }
  .review-page { margin:15px 12px; padding:24px 18px; box-shadow:4px 4px 0 #d19ee8; }
  .review-page h1 { font-size:clamp(30px,8vw,42px); overflow-wrap:anywhere; }
}
@media(max-width:400px) { .brand-mark { display:none; } }

/* Sound stays opt-in, with a mute control available inside the modal reader. */
.header-actions { display:flex; align-items:center; gap:20px; }
.sound-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; min-width:44px; min-height:44px; padding:8px 11px; color:#51207c; background:#fff7ff; border:1px solid #a773c3; border-radius:3px; box-shadow:2px 2px 0 #ff78d5; font:700 11px/1.3 var(--mono); }
.sound-toggle[aria-pressed=true] { color:#27334b; background:#b3f9ed; border-color:#448f8b; box-shadow:2px 2px 0 #da87d0; }
.sound-toggle:hover { border-color:#7131a8; }
.sound-toggle:disabled { opacity:.65; }
.sound-toggle .sound-on,.sound-toggle[aria-pressed=true] .sound-off { display:none; }
.sound-toggle[aria-pressed=true] .sound-on { display:block; }
.dialog-tools { position:sticky; top:0; z-index:5; display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:10px 16px; background:#fff8ff; border-bottom:1px solid #dfc1ee; }
.dialog-tools .dialog-close { position:static; float:none; margin:0; width:44px; height:44px; }
@media(max-width:850px) { .header-actions { gap:12px; } }
@media(max-width:600px) {
  .header-actions { gap:8px; }
  .header-actions .sound-toggle { width:44px; padding:9px; }
  .header-actions .sound-toggle [data-sound-label] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .dialog-tools { padding:8px 12px; }
}

/* Arcade feedback stays brief and interaction-driven. No looping motion. */
:is(.copy-btn,.learn-action,.learn-secondary,.video-watch,.scope-tab,.subtopic-chip,.filter-chip,.kind-filter,.load-more,.dialog-close,.mobile-topics,.search-clear,.related-list button,.related-list a,.path-project-links button,.empty-state button) {
  transition:transform 160ms cubic-bezier(.2,.8,.2,1),box-shadow 160ms ease,background-color 160ms ease,border-color 160ms ease,color 160ms ease;
}
:is(.entry-card,.domain-card) {
  transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms ease,border-color 180ms ease;
}
.entry-card:hover { transform:none; }
:is(.entry-card,.domain-card):focus-within {
  border-color:var(--green);
  box-shadow:4px 4px 0 #f794da,6px 6px 0 #9af6ed,inset 0 0 0 1px #e0c0f3;
}
.category-btn,.topic-group summary {
  transition:transform 150ms ease,background-color 150ms ease,color 150ms ease;
}
.topic-group summary::before { transition:transform 150ms steps(3,end); }
.domain-card-arrow,.card-arrow,.learn-action > span[aria-hidden=true] {
  transition:transform 160ms ease;
}

@media (prefers-reduced-motion:no-preference) {
  :is(.copy-btn,.learn-action,.learn-secondary,.video-watch,.scope-tab,.subtopic-chip,.filter-chip,.kind-filter,.load-more,.dialog-close,.mobile-topics,.search-clear,.related-list button,.related-list a,.path-project-links button,.empty-state button):not(:disabled):active {
    transform:translate(1px,1px);
    box-shadow:1px 1px 0 #e483ce;
    transition-duration:70ms;
  }
  .domain-card:active { transform:translateY(1px); }
  .copy-btn.copied,.copy-btn[data-copied=true] { animation:arcade-copy-confirm 380ms ease-out 1; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  :is(.copy-btn,.learn-action,.learn-secondary,.video-watch,.scope-tab,.subtopic-chip,.filter-chip,.kind-filter,.load-more,.dialog-close,.mobile-topics,.search-clear,.related-list button,.related-list a,.path-project-links button,.empty-state button):not(:disabled):hover:not(:active) {
    transform:translate(-1px,-2px);
    box-shadow:3px 3px 0 #ff8ddb,5px 5px 0 #9af6ed;
  }
  :is(.entry-card,.domain-card):hover:not(:active) {
    transform:translateY(-3px);
    border-color:#9b55b8;
    box-shadow:4px 5px 0 #ef9edc,6px 7px 0 #a3f5ee,inset 0 0 0 1px #e3c5f4;
  }
  .category-btn:hover,.topic-group summary:hover { transform:translateX(2px); }
  .domain-card:hover .domain-card-arrow,.entry-card:hover .card-arrow,.learn-action:hover > span[aria-hidden=true] { transform:translateX(2px); }
}
@keyframes arcade-copy-confirm {
  0%,100% { box-shadow:2px 2px 0 #ff67cb; }
  50% { box-shadow:3px 3px 0 #78fff1,0 0 0 2px #b6f8ed; }
}
@media (prefers-reduced-motion:reduce) {
  /* Keep state colors and focus rings while removing spatial feedback. */
  :is(.entry-card,.domain-card,.copy-btn,.learn-action,.learn-secondary,.video-watch,.scope-tab,.subtopic-chip,.filter-chip,.kind-filter,.load-more,.dialog-close,.mobile-topics,.search-clear,.category-btn,.topic-group summary,.related-list button,.related-list a,.path-project-links button,.empty-state button),
  .domain-card-arrow,.card-arrow,.learn-action > span[aria-hidden=true] {
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
  .topic-group summary::before { transition:none !important; }
}