/* Pinned material: warm optical glass over the dawn forest.
 * Navigation resolves from mist into focus, with no translation or scaling.
 * Only page changes replay the 520ms reveal; answering/typing stays immediate.
 */
:root {
  --glass-panel: linear-gradient(130deg, #fffdf6a8, #fbfbf36b 56%, #e8f0ed82);
  --glass-edge: #ffffffe0;
  --glass-depth: inset 0 1px 0 #ffffffed, inset 1px 0 0 #ffffff66,
    inset 0 -1px 0 #738d9524, 0 14px 34px #334b4921;
}
#app .sidebar {
  background: linear-gradient(100deg, #fffaf0a6, #edf0ec82) !important;
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
  box-shadow: 0 5px 24px #243e4710, inset 0 -1px 0 #ffffff66;
}
#app .brand { gap: 9px; color: #173d59; font-weight: 700; }
#app .brand-mark { display: grid; place-items: center; width: 58px; height: 60px; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 3px #4c5d633b); }
#app .brand small { color: #476073; font-weight: 500; }

:is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn) {
  --ice-fill: linear-gradient(155deg, #ffffff9c, #fffdf342 48%, #d9e8e449 65%, #fffffb7a);
  --ice-edge: #ffffffe0;
  --ice-ink: #183f55;
  --ice-shadow: inset 0 1px 1px #ffffffed, inset 1px 0 0 #ffffff80,
    inset 0 -1px 1px #6a879936, 0 4px 10px #29475321;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
  text-shadow: none;
}
:is(#app, #modal-root) :is(.primary-btn, .nav-item.active, .atlas-mode button.selected) {
  --ice-fill: linear-gradient(145deg, #eefbffad, #bddce15e 48%, #a8cbd473 68%, #f8ffff99);
  --ice-ink: #143c51;
  --ice-edge: #f5ffffeb;
}
:is(#app, #modal-root) :is(.answer-option.chosen, .share-topic.selected, .account-option.chosen) {
  --ice-fill: linear-gradient(145deg, #effaffe8, #accdddba);
  --ice-edge: #427b98;
}
:is(#app, #modal-root) .answer-option.correct { --ice-fill: linear-gradient(145deg, #edf9f0ed, #c8e6d5d9); --ice-edge: #408260; --ice-ink: #20583c; }
:is(#app, #modal-root) .answer-option.incorrect { --ice-fill: linear-gradient(145deg, #fff7f1ed, #ecd2c9e0); --ice-edge: #a35e51; --ice-ink: #813b30; }
:is(#app, #modal-root) .answer-option:disabled { opacity: 1; }
:is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn)::before { height: 32%; background: linear-gradient(#ffffff50, transparent); }

/* Large surfaces: enough frost to read, enough transmission to see the forest. */
#app :is(.atlas-summary, .identity-strip, .basket-group, .practice-summary,
  .source-card, .evidence-list, .practice-card, .sharing-card, .peer-card, .learning-pulse,
  .theme-guide-card, .atlas-growth-note, .social-banner, .article-lab),
#modal-root .modal {
  background: var(--glass-panel) !important;
  border: 1px solid var(--glass-edge) !important;
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
  box-shadow: var(--glass-depth) !important;
}
#app .atlas-summary { background: linear-gradient(115deg, #fffdf5a8, #fffdf57a 62%, #e9f0ec85) !important; }
#app .atlas-review-icon { color: #204c65; background: linear-gradient(140deg, #fffdfdb3, #c1dbe378); box-shadow: inset 0 1px 1px #fff, 0 3px 7px #33536717; }
#app .theme-tree-copy { background: linear-gradient(145deg, #fffdf7aa, #e9eee675) !important; backdrop-filter: blur(18px) saturate(135%); border-color: #ffffffd9; }
#app .atlas-mode { background: #e5eae64d; backdrop-filter: blur(12px); }
#app .atlas-explore-heading { background: linear-gradient(#fffdf498, #fffdf432, transparent); }
#app .atlas-growth-note .growth-mini { background: #fffff54a; }
.article-lab { margin: 0 0 30px; padding: 32px; border-radius: 24px; }
.article-lab-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.article-lab h2 { font: 600 30px/1.4 'Songti SC', serif; color: #173346; margin: 10px 0; }
.article-lab p { color: #3c5363; line-height: 1.8; }
.model-status { display: inline-flex; flex-shrink: 0; padding: 8px 12px; border-radius: 20px; background: #fff5d0b5; color: #644d20; font-size: 12px; }
.model-status.ready { background: #daeee7cc; color: #255848; }
.article-composer { max-width: 920px; }
.article-field { display: grid; gap: 9px; font-size: 15px; color: #1b3c50; font-weight: 600; }
.article-field span { font-size: 12px; line-height: 1.8; color: #435b69; font-weight: 400; }
.article-field select, #quiz-body {
  font: inherit; color: #193b51; background: #fffdf5a8; border: 1px solid #83999c8c;
  padding: 14px 16px; border-radius: 12px; width: 100%; min-width: 0; box-shadow: inset 0 1px 3px #314c5310;
}
.article-field select { text-overflow: ellipsis; font-size: 14px; }
#quiz-body { display: block; min-height: 180px; resize: vertical; margin-top: 12px; font-size: 14px; line-height: 1.8; }
#quiz-body::placeholder { color: #536775; }
.article-field select:focus-visible, #quiz-body:focus-visible { outline: 2px solid #326e90; outline-offset: 3px; }
.article-source-line, .article-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0 24px; font-size: 12px; color: #425c6b; }
.article-composer-footer { margin-bottom: 6px; }
.article-source-line a, .article-explanation a { color: #205b80; text-decoration: underline; text-underline-offset: 3px; }
.article-feedback p { margin: 12px 0; font-size: 13px; }
.article-feedback .ai-error { color: #863f30; }
.model-setup { margin-top: 16px; padding: 14px 0; border-top: 1px solid #8a9c9b45; font-size: 13px; }
.model-setup summary, .article-explanation summary { color: #234c63; cursor: pointer; font-weight: 600; }
.model-setup code { display: block; padding: 14px; background: #fffdf6a1; color: #294454; border-radius: 10px; line-height: 2; overflow-wrap: anywhere; }
.article-await { padding: 30px 0 10px; border-top: 1px solid #889c9840; margin-top: 20px; }
.article-await > span { font: 500 22px/1.5 'Songti SC', serif; color: #294b5d; }
.article-await p { font-size: 13px; }
.article-question { margin-top: 30px; padding-top: 30px; border-top: 1px solid #81959555; max-width: 920px; }
.article-question-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #345b6b; }
.article-question h3 { font-size: 22px; line-height: 1.7; margin: 18px 0 24px; color: #1b3548; }
.article-question .answer-options { display: grid; gap: 12px; }
.article-question .answer-option { width: 100%; text-align: left; display: flex; gap: 16px; align-items: center; padding: 16px 18px; white-space: normal; line-height: 1.7; }
.article-question .option-letter { flex-shrink: 0; font-weight: 700; }
.article-question-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.article-question-actions > :first-child { margin-right: auto; }
.article-explanation { margin-top: 22px; padding: 22px; background: #fcfcf3a3; border-radius: 14px; color: #244758; }
.article-explanation p, .article-explanation dd { font-size: 14px; }
.article-explanation dl > div { display: flex; gap: 16px; margin: 12px 0; line-height: 1.7; }
.article-explanation dt { font-weight: 700; }
.article-explanation dd { margin: 0; }
.article-explanation blockquote { margin: 16px 0; padding: 14px; background: #ebeee77a; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.article-explanation > small { display: block; margin-top: 14px; line-height: 1.7; }
.article-complete { margin-top: 26px; color: #255744; }
.article-complete p { font-size: 13px; }
.legacy-practice { margin: 30px 0; }
.article-stale { font-size: 13px; color: #754f24 !important; }
.article-history { margin-top: 26px; color: #2c4e60; line-height: 1.8; }
.article-history summary { cursor: pointer; font-size: 14px; }
.article-history article { padding: 18px 0; border-bottom: 1px solid #81959540; font-size: 14px; }
.article-history article > p { font-size: 12px; }
.article-history blockquote { margin: 12px 0; }
.legacy-practice > summary { cursor: pointer; color: #3e5a6b; padding: 20px 0; font-size: 14px; }
#app .basket-list article > div:last-child { flex-wrap: wrap; }
#main-content.optical-reveal { animation: opticalReveal .52s cubic-bezier(.16,1,.3,1); }
@keyframes opticalReveal { from { opacity: .55; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@media (max-width: 1180px) { #app .brand { margin-right: 0; font-size: 19px; } #app .brand-mark { width: 44px; height: 50px; } }
@media (max-width: 760px) {
  #app .brand { font-size: 18px; gap: 6px; }
  #app .brand-mark { width: 38px; height: 38px; }
  .article-lab { padding: 22px 18px; border-radius: 20px; }
  .article-lab-heading { display: grid; gap: 10px; }
  .article-lab h2 { font-size: 25px; }
  .model-status { width: fit-content; }
  .article-field select { font-size: 12px; padding: 12px 8px; }
  .article-composer-footer > button { width: 100%; justify-content: center; white-space: normal; }
  .article-question h3 { font-size: 19px; }
  .article-question-actions { flex-wrap: wrap; }
  .article-explanation { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { #main-content.optical-reveal { animation: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  #app :is(.sidebar, .atlas-summary, .identity-strip, .basket-group, .practice-summary, .source-card, .evidence-list, .practice-card, .sharing-card, .peer-card, .learning-pulse, .theme-guide-card, .atlas-growth-note, .social-banner, .article-lab), #modal-root .modal {
    background: #f7f5eb !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: #5b7381 !important;
  }
  :is(#app, #modal-root) :is(button:not(.theme-tree):not(.toggle), a.primary-btn, a.secondary-btn, a.text-btn), #app .theme-tree-copy { backdrop-filter: none; -webkit-backdrop-filter: none; }
}