.list-view .reader { width:100%; max-width:none; padding-inline:clamp(18px,2.2vw,48px); }
.list-view .reader-shell { min-width:0; }
@media (min-width:901px) { .list-view { grid-template-columns:var(--file-width) minmax(0,1fr) var(--toc-width); } }
.hero-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -70px -110px -80px -90px;
  background: radial-gradient(ellipse at 35% 45%, rgba(5,7,14,.92), rgba(5,7,14,.58) 50%, transparent 72%);
}

.markdown-body ruby {
  ruby-position: over;
  ruby-align: center;
  text-indent: 0;
}

.markdown-body ruby > rt {
  color: #9fb2d3;
  font-size: .56em;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1;
  user-select: text;
}

.markdown-body th ruby > rt {
  color: #b8c8e3;
}

.hero-copy {
  transition: opacity .35s ease, transform .35s ease;
}

.nebula-view.exploring .hero-copy {
  opacity: .08;
  transform: translateX(-18px);
}

/* 和风天文图谱：墨、藍、月白、金箔 */
:root {
  --bg: #05070c;
  --panel: #0a0f1a;
  --panel2: #101827;
  --line: rgba(181, 196, 211, .13);
  --text: #e8e5dc;
  --muted: #8994a4;
  --accent: #8bb4c5;
  --gold: #e8c66d;
  --purple: #879dca;
  --serif: "Microsoft YaHei", "PingFang SC", "Hiragino Sans", "Yu Gothic", SimHei, Arial, sans-serif;
  --sans: "Microsoft YaHei", "PingFang SC", "Hiragino Sans", "Yu Gothic", SimHei, Arial, sans-serif;
}

body {
  background: #05070c;
}

body,
body * {
  -webkit-user-select: none !important;
  user-select: none !important;
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(37,58,95,.28), transparent 36%),
    radial-gradient(circle at 14% 18%, rgba(232,198,109,.08), transparent 25%),
    #05070c;
}

.login-nebula {
  position: absolute;
  inset: -25%;
  opacity: .46;
  background-image:
    radial-gradient(circle, rgba(232,198,109,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(155,184,208,.48) 0 1px, transparent 1.5px);
  background-position: 0 0, 31px 23px;
  background-size: 89px 89px, 131px 131px;
  mask-image: radial-gradient(circle at center, #000, transparent 70%);
  animation: login-stars-drift 80s linear infinite;
}

@keyframes login-stars-drift { to { transform: rotate(1turn) scale(1.04); } }

.login-card {
  position: relative;
  width: min(430px, 100%);
  padding: 38px 42px 30px;
  border: 1px solid rgba(232,198,109,.25);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(16,25,40,.96), rgba(7,11,19,.98));
  box-shadow: 0 38px 120px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.035), 0 0 60px rgba(232,198,109,.06);
  text-align: center;
}

.login-emblem {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232,198,109,.5);
  border-radius: 50%;
  color: #efd17d;
  font: 500 24px/1 var(--serif);
  box-shadow: 0 0 28px rgba(232,198,109,.12), inset 0 0 22px rgba(232,198,109,.06);
}

.login-eyebrow { margin: 0 0 12px; color: #91abc1; font-size: 9px; letter-spacing: .3em; }
.login-card h1 { margin: 0; color: #f3ead3; font: 500 27px/1.4 var(--serif); }
.login-intro { margin: 9px 0 25px; color: #7f8da0; font-size: 12px; }
.login-card form { display: grid; gap: 13px; text-align: left; }
.login-card label span { display: block; margin: 0 0 7px 3px; color: #a6b2c1; font-size: 11px; letter-spacing: .08em; }
.login-card input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(164,184,208,.17);
  border-radius: 10px;
  outline: 0;
  color: #f3f0e8;
  background: rgba(4,8,15,.72);
  -webkit-user-select: text !important;
  user-select: text !important;
}
.login-card input:focus { border-color: rgba(232,198,109,.58); box-shadow: 0 0 0 3px rgba(232,198,109,.07); }
.login-error { min-height: 18px; margin: -2px 2px 0; color: #d99b8f; font-size: 11px; text-align: center; }
.login-card form button {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid rgba(232,198,109,.42);
  border-radius: 10px;
  color: #f3dc98;
  background: linear-gradient(135deg, rgba(232,198,109,.16), rgba(232,198,109,.06));
  cursor: pointer;
}
.login-card form button:hover { border-color: rgba(232,198,109,.72); background-color: rgba(232,198,109,.08); }
.login-card form button:disabled { opacity: .55; cursor: wait; }
.login-card form button i { font-style: normal; font-size: 19px; }
.login-notice { display: block; margin-top: 21px; color: #59677a; font-size: 9px; letter-spacing: .06em; }

body.auth-locked #app { pointer-events: none; filter: blur(5px); opacity: .22; }
body.auth-locked .security-watermark { display: none; }

.security-watermark {
  position: fixed;
  z-index: 89;
  inset: -14vh -12vw;
  display: grid;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  grid-auto-rows: 150px;
  align-items: center;
  justify-items: center;
  pointer-events: none;
  overflow: hidden;
  opacity: .105;
}

.security-watermark span {
  width: 330px;
  color: #d8c17f;
  font: 500 11px/1.4 var(--sans);
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-22deg);
  text-shadow: 0 0 12px rgba(0,0,0,.8);
}

.topbar {
  background: linear-gradient(90deg, rgba(5,7,12,.96), rgba(8,13,23,.9) 52%, rgba(5,7,12,.96));
  border-bottom-color: rgba(217, 196, 139, .14);
  box-shadow: 0 1px 0 rgba(255,255,255,.018), 0 12px 38px rgba(0,0,0,.22);
}

.brand-mark {
  color: #efd17d;
  border-color: rgba(232,198,109,.42);
  background: radial-gradient(circle, rgba(232,198,109,.12), transparent 68%);
  box-shadow: 0 0 24px rgba(232,198,109,.14), inset 0 0 12px rgba(232,198,109,.05);
}

.brand strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.brand small {
  font-size: 9px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.search-tools {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
}

.review-weak-button {
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(232,198,109,.22);
  border-radius: 20px;
  color: #d8e0eb;
  background: linear-gradient(180deg, rgba(30,40,59,.88), rgba(12,19,31,.94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 7px 24px rgba(0,0,0,.2);
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.review-weak-button:hover {
  color: #fff0bc;
  border-color: rgba(232,198,109,.58);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 9px 28px rgba(0,0,0,.3), 0 0 18px rgba(232,198,109,.08);
}

.weak-orbit {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1px solid rgba(232,198,109,.62);
  border-radius: 50%;
  transform: rotate(-24deg);
  box-shadow: inset 0 0 8px rgba(232,198,109,.08);
}

.weak-orbit::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e8c66d;
  box-shadow: 0 0 8px rgba(232,198,109,.8);
}

.weak-orbit::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9fb8cc;
  box-shadow: 0 0 7px rgba(159,184,204,.75);
}

.review-weak-label { font-size: 11px; letter-spacing: .04em; }
.review-weak-button b {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #0a101a;
  background: #d9b75e;
  font-size: 9px;
}

.search-wrap input {
  background: rgba(146, 168, 195, .045);
  border-color: rgba(180, 195, 216, .13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
}

.search-wrap input:focus {
  border-color: rgba(139,180,197,.48);
  box-shadow: 0 0 0 3px rgba(139,180,197,.07), 0 8px 28px rgba(0,0,0,.18);
}

#searchScope{display:none;position:absolute;right:7px;top:4px;width:112px;height:32px;padding:0 20px 0 8px;border:1px solid rgba(232,198,109,.26);border-radius:16px;color:#e8d391;background:#182335;font-size:11px;cursor:pointer;outline:none;white-space:nowrap;text-overflow:ellipsis}
body:has(#listView:not(.hidden)) #searchScope{display:block}
body:has(#listView:not(.hidden)) #searchInput{padding-right:125px}
#searchScope:focus-visible{outline:2px solid #e8c66d;outline-offset:2px}
body:has(#listView:not(.hidden)) .search-wrap kbd{display:none}
@media(max-width:700px){#searchScope{width:94px;font-size:10px}body:has(#listView:not(.hidden)) #searchInput{padding-right:106px}}
.search-results{position:fixed;top:var(--header);left:50%;right:auto;transform:translateX(-50%);width:min(720px,calc(100vw - 20px));max-height:calc(100dvh - var(--header) - 12px);z-index:95}
.search-result-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;color:#dce4f2;font-size:11px}
.search-result-heading strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.search-result-heading button{flex:none;border:0;background:transparent;color:#aab8ce;font-size:18px;cursor:pointer}
body:has(#searchResults:not(.hidden)) #aiOrb{visibility:hidden;pointer-events:none}

.topbar:focus-within {
  z-index: 90;
}

.mode-switch {
  background: rgba(140, 157, 181, .045);
  border-color: rgba(183, 196, 213, .12);
}

.mode-switch button.active {
  color: #f1e8cf;
  background: linear-gradient(180deg, rgba(100,122,160,.28), rgba(49,65,94,.36));
  box-shadow: inset 0 0 0 1px rgba(232,198,109,.12), 0 4px 18px rgba(0,0,0,.28);
}
.mobile-features-toggle,.mobile-features-menu,.mobile-features-backdrop { display:none; }

.nebula-view {
  background:
    radial-gradient(ellipse at 76% 22%, rgba(65,82,132,.18), transparent 42%),
    radial-gradient(ellipse at 52% 85%, rgba(65,102,116,.09), transparent 45%),
    linear-gradient(145deg, #05070c, #080d18 52%, #04060b);
}

.nebula-view::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 17% 28%, rgba(255,255,255,.32) 0 1px, transparent 1.4px),
    radial-gradient(circle at 63% 71%, rgba(201,220,232,.24) 0 1px, transparent 1.3px),
    radial-gradient(circle at 84% 38%, rgba(232,198,109,.2) 0 1px, transparent 1.2px);
  background-size: 173px 179px, 229px 223px, 311px 293px;
}

.hero-copy h1 {
  color: #ebe8df;
  font-weight: 700;
  letter-spacing: .035em;
  text-shadow: 0 8px 42px rgba(0,0,0,.72);
}

.hero-copy h1 em {
  font-weight: 700;
  color: #e7c46b;
  text-shadow: 0 0 30px rgba(232,198,109,.1);
}

.hero-copy > p.creator-credit {
  margin-top: 26px;
  color: #d8e3ef;
  font-size: clamp(20px, 1.5vw, 25px);
  font-weight: 500;
  letter-spacing: .06em;
  text-shadow: 0 0 22px rgba(139,180,197,.28);
}

.eyebrow {
  color: #90a4b9;
  letter-spacing: .42em;
}

.glass {
  background: rgba(8,13,23,.67);
  border-color: rgba(180,195,215,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.025);
}

.legend-panel {
  border-radius: 2px 14px 2px 14px;
}

.stats {
  gap: 4px;
  padding: 5px;
  overflow: hidden;
  border-color: rgba(232,198,109,.2);
  border-radius: 2px 14px 2px 14px;
  background: radial-gradient(circle at 12% 0,rgba(232,198,109,.09),transparent 38%),linear-gradient(135deg,rgba(17,29,46,.92),rgba(7,13,23,.9));
  box-shadow: 0 16px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035);
}

.stats button {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 8px 13px 8px 35px;
  border: 0;
  border-radius: 9px;
  color: #91a3b8;
  background: transparent;
  font-size: 10px;
  letter-spacing: .05em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.stats button::before {
  content: '✦';
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232,198,109,.42);
  border-radius: 50%;
  color: #e4c776;
  font-size: 7px;
  line-height: 1;
  transform: translateY(-50%);
  box-shadow: 0 0 11px rgba(232,198,109,.1),inset 0 0 6px rgba(232,198,109,.08);
}

.stats button:nth-child(2)::before { content: '◇'; color: #9fc5dc; border-color: rgba(159,197,220,.38); }
.stats button:nth-child(3)::before { content: '·'; color: #c7aef2; border-color: rgba(183,155,229,.4); box-shadow: 0 0 11px rgba(183,155,229,.12),inset 0 0 6px rgba(183,155,229,.08); }
.stats button b { color: #efd687; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.stats button:hover { color: #dce6ef; background: rgba(232,198,109,.07); box-shadow: inset 0 0 0 1px rgba(232,198,109,.12); transform: translateY(-1px); }
.stats button:active { transform: translateY(0); }
.stats button:focus-visible { outline: 2px solid rgba(232,198,109,.72); outline-offset: -2px; }

@media(max-width:600px) {
  .stats { left: 12px; bottom: 12px; gap: 2px; padding: 4px; }
  .stats button { min-height: 40px; padding: 6px 9px 6px 29px; font-size: 9px; }
  .stats button::before { left: 9px; }
  .stats button b { font-size: 13px; }
  .stats button:nth-child(2) { display: none; }
}

.canvas-tools {
  border-radius: 12px 2px 12px 2px;
}

.nebula-controls { display: contents; }
#nebulaControlsToggle { display: none; }
.site-record { position: absolute; left: 32px; bottom: 5px; z-index: 10; color: #91a3b8; font-size: 10px; font-weight: 400; line-height: 1.3; white-space: nowrap; text-decoration: none; }
.site-record:hover, .site-record:focus-visible { color: #dce7f4; text-decoration: underline; }
@media(max-width:700px) { .site-record { left: 12px; bottom: max(5px, env(safe-area-inset-bottom)); font-size: 9px; } }
#loginOverlay.form-open { justify-content: flex-start; padding-bottom: 12px; }
#loginOverlay.form-open .login-card { margin: auto auto 0; }
#loginOverlay.form-open > .site-record { position: static; align-self: flex-start; margin-top: auto; padding-top: 12px; }

.canvas-tools button,
.reader-head button {
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.canvas-tools button:hover,
.reader-head button:hover {
  color: #f2d98d;
  border-color: rgba(232,198,109,.28);
  background: rgba(232,198,109,.065);
}

.canvas-tools button:active,
.reader-head button:active {
  transform: translateY(1px);
}

.hover-card {
  background: rgba(8,13,23,.92);
  border-color: rgba(232,198,109,.22);
  border-radius: 2px 10px 2px 10px;
  box-shadow: 0 16px 44px rgba(0,0,0,.48), inset 3px 0 0 rgba(232,198,109,.35);
}

.constellation-panel {
  position: absolute;
  z-index: 8;
  top: 92px;
  right: 24px;
  bottom: 82px;
  width: min(350px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 3px 18px 3px 18px;
  background: linear-gradient(160deg, rgba(12,19,32,.94), rgba(7,11,20,.9));
  border-color: rgba(232,198,109,.2);
}

.constellation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid rgba(232,198,109,.12);
}

.constellation-head small { color: #e2c66f; font-size: 9px; letter-spacing: .2em; }
.constellation-head h2 { margin: 7px 0 5px; color: #f3efe4; font: 500 19px/1.35 var(--serif); }
.constellation-head p { margin: 0; color: var(--muted); font-size: 10px; }
.constellation-head > button {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #cdd7e4;
  background: rgba(255,255,255,.035);
  cursor: pointer;
}

.constellation-open {
  margin: 12px 16px 0;
  padding: 9px 12px;
  border: 1px solid rgba(232,198,109,.2);
  border-radius: 8px;
  color: #f1dda0;
  background: rgba(232,198,109,.065);
  cursor: pointer;
}

.constellation-list {
  min-height: 0;
  overflow: auto;
  padding: 10px 10px 18px;
  scrollbar-color: rgba(139,180,197,.28) transparent;
}

.constellation-list button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid rgba(181,196,211,.07);
  color: #c9d4e2;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.constellation-list button:hover { color: #fff; background: linear-gradient(90deg, rgba(139,180,197,.12), transparent); }
.constellation-list span { color: #6f8199; font: 10px/1.55 ui-monospace, monospace; }
.constellation-list b { min-width: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 500; line-height: 1.55; }

.flashcard-tree {
  margin: 6px 0 10px;
  color: #f0d888;
  background: linear-gradient(90deg, rgba(232,198,109,.12), rgba(139,180,197,.04));
  box-shadow: inset 2px 0 0 rgba(232,198,109,.55);
}

.flashcard-tree::before { content: '▣'; color: #e8c66d; }

.search-item .search-star-source {
  display: block;
  margin-bottom: 5px;
  color: #e8c66d;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-shadow: 0 0 14px rgba(232,198,109,.16);
}

.search-hit {
  padding: 0 .14em;
  border-radius: 4px;
  color: #09101a;
  background: #e8c66d;
  box-shadow: 0 0 0 2px rgba(232, 198, 109, .24), 0 0 20px rgba(232, 198, 109, .38);
}

.lesson-flashcard-entry {
  box-sizing: border-box;
  width: min(760px, 100%);
  margin: 24px 0 34px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid rgba(232,198,109,.18);
  border-radius: 3px 14px 3px 14px;
  background: linear-gradient(120deg, rgba(232,198,109,.075), rgba(139,180,197,.045));
  box-shadow: inset 3px 0 0 rgba(232,198,109,.42);
}

.note-audio-player {
  box-sizing: border-box;
  width: min(620px, 100%);
  margin: 14px 0 18px;
  padding: 12px 14px 13px;
  border: 1px solid rgba(139,180,197,.22);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(35,54,78,.78), rgba(10,18,31,.9));
  box-shadow: inset 2px 0 0 rgba(232,198,109,.42), 0 10px 28px rgba(0,0,0,.18);
}
.note-audio-heading { display:flex; align-items:center; gap:10px; margin:0 2px 9px; }
.note-audio-heading > span { display:grid; place-items:center; flex:0 0 31px; width:31px; height:31px; border:1px solid rgba(232,198,109,.34); border-radius:50%; color:#efd584; background:rgba(232,198,109,.07); }
.note-audio-heading div { min-width:0; display:grid; gap:1px; }
.note-audio-heading strong { color:#e8edf3; font:500 13px/1.35 var(--serif); }
.note-audio-heading small { color:#8193a8; font-size:9px; letter-spacing:.04em; }
.note-audio-player audio { display:block; width:100%; height:36px; color-scheme:dark; }

.lesson-flashcard-entry small { color: #d7bc6e; font-size: 9px; letter-spacing: .1em; }
.lesson-flashcard-entry h3 { margin: 5px 0 3px; color: #f1eee5; font-size: 19px; }
.lesson-flashcard-entry p { margin: 0; color: #7f8da0; font-size: 10px; }
.lesson-flashcard-entry > button {
  flex: none;
  min-width: 126px;
  padding: 10px 14px;
  border: 1px solid rgba(232,198,109,.24);
  border-radius: 8px;
  color: #f0d98e;
  background: rgba(232,198,109,.07);
  cursor: pointer;
}
.lesson-flashcard-entry > button:hover { color: #fff2c9; background: rgba(232,198,109,.12); }
.lesson-flashcard-entry > button span { margin-left: 8px; }

.subpage-modal { position: fixed; inset: var(--header) 0 0; z-index: 65; }
.subpage-backdrop { position: absolute; inset: 0; background: rgba(2,5,11,.72); backdrop-filter: blur(8px); }
.subpage-card {
  position: absolute;
  top: 3%;
  bottom: 3%;
  left: 50%;
  width: min(760px, calc(100% - 48px));
  padding: 30px 44px 70px;
  overflow: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(232,198,109,.28);
  border-radius: 3px 18px 3px 18px;
  background: linear-gradient(145deg, rgba(17,25,40,.99), rgba(8,13,23,.995));
  box-shadow: 0 36px 110px rgba(0,0,0,.78), 0 0 36px rgba(232,198,109,.055), inset 0 1px 0 rgba(255,255,255,.035);
}
.subpage-head { position: sticky; top: -30px; z-index: 3; margin: 0 -4px 26px; padding: 30px 4px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; border-bottom: 1px solid rgba(232,198,109,.13); background: linear-gradient(180deg, #111928 0%, #0e1624 82%, rgba(14,22,36,.96) 100%); }
.subpage-head small { display: block; margin-bottom: 8px; color: #d9b75e; font-size: 9px; letter-spacing: .16em; }
.subpage-head p { margin: 0 0 7px; color: #68798f; font-size: 10px; }
.subpage-head h1 { margin: 0; color: #f3efe4; font: 500 29px/1.3 var(--serif); }
.subpage-head button { position: sticky; top: 0; flex: none; min-height: 36px; padding: 0 13px; border: 1px solid rgba(232,198,109,.24); border-radius: 18px; color: #d8e1ec; background: rgba(15,23,37,.96); cursor: pointer; }
.subpage-head button:hover { color: #fff0bc; border-color: rgba(232,198,109,.58); }
.subpage-card .markdown-body h1,
.subpage-card .markdown-body h2,
.subpage-card .markdown-body h3,
.subpage-card .markdown-body h4 { scroll-margin-top: 128px; }

.flashcard-modal {
  position: fixed;
  z-index: 70;
  inset: var(--header) 0 0;
}

.flashcard-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2,4,10,.86);
  backdrop-filter: blur(12px);
}

.flashcard-shell {
  position: relative;
  width: min(980px, calc(100% - 40px));
  height: calc(100% - 36px);
  margin: 18px auto;
  padding: 17px 34px 14px;
  display: grid;
  grid-template-rows: auto auto 3px auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 1px solid rgba(232,198,109,.18);
  border-radius: 3px 22px 3px 22px;
  background: radial-gradient(circle at 50% 36%, rgba(44,61,91,.28), transparent 42%), #080d16;
  box-shadow: 0 36px 120px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.025);
}

.flashcard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.flashcard-header p { margin: 0 0 7px; color: #8fa2b9; font-size: 10px; letter-spacing: .12em; }
.flashcard-header h1 { margin: 0; color: #f3efe4; font: 500 25px/1.2 var(--serif); }
.flashcard-header > button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #dce5ef;
  background: rgba(255,255,255,.035);
  font-size: 20px;
  cursor: pointer;
}

.flashcard-toolbar {
  margin: 11px 0 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: flex-end;
}

.flashcard-toolbar label { display: grid; gap: 5px; color: #77879d; font-size: 9px; letter-spacing: .08em; }
.flashcard-toolbar select,
.flashcard-toolbar button {
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 11px;
  color: #cbd7e5;
  background: #101827;
  cursor: pointer;
}

.flashcard-motion-toggle {
  min-height: 35px;
  padding: 0 12px;
  display: inline-flex !important;
  grid-auto-flow: column;
  align-items: center;
  align-self: flex-end;
  gap: 8px !important;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #cbd7e5 !important;
  background: #101827;
  cursor: pointer;
}

.flashcard-motion-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #c6a454;
}

.flashcard-progress { height: 3px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.055); }
.flashcard-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7ea6ba, #e8c66d); transition: width .25s ease; }
.flashcard-status { display: flex; justify-content: space-between; margin: 6px 1px 8px; color: #77879d; font-size: 10px; }

.flashcard-stage {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(46px, 1fr) auto minmax(46px, 1fr);
  gap: clamp(10px, 2vw, 24px);
  place-items: center;
  overflow: hidden;
  perspective: 1200px;
}

.flashcard-nav {
  width: 54px;
  height: 76px;
  padding: 0;
  display: grid;
  place-content: center;
  gap: 2px;
  border: 1px solid rgba(217,183,94,.3);
  border-radius: 50% 50% 12px 12px;
  color: #d9b75e;
  background: rgba(8,15,25,.9);
  box-shadow: inset 0 0 18px rgba(217,183,94,.04), 0 12px 35px rgba(0,0,0,.32);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

.flashcard-nav span { font: 300 38px/30px var(--serif); }
.flashcard-nav small { color: #718198; font-size: 8px; letter-spacing: .08em; }
.flashcard-nav:hover:not(:disabled) { color: #fff0bd; border-color: rgba(217,183,94,.7); transform: translateY(-2px); }
.flashcard-nav:disabled { opacity: .2; cursor: default; }

.flashcard {
  width: auto;
  height: min(100%, 560px);
  min-height: 0;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 18px;
  color: #f3efe4;
  background: transparent;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), 0 0 42px rgba(202,164,82,.08);
  cursor: pointer;
  touch-action: pan-y;
  transform-style: preserve-3d;
}

.flashcard-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform .27s cubic-bezier(.2,.72,.2,1);
}

.flashcard.is-back .flashcard-inner { transform: rotateY(180deg); }
.flashcard.no-flip-motion .flashcard-inner { transition: none; }
.flashcard:hover { box-shadow: 0 28px 90px rgba(0,0,0,.64), 0 0 52px rgba(202,164,82,.14); }
.flashcard:active { transform: scale(.994); }
.flashcard.is-dragging { transform: translateX(var(--swipe-x, 0)); transition: none; cursor: grabbing; }
.flashcard.is-cut-left { animation: flashcard-cut-left .18s ease-in both; }
.flashcard.is-cut-right { animation: flashcard-cut-right .18s ease-in both; }
.flashcard.is-deal-right { animation: flashcard-deal-right .18s ease-out both; }
.flashcard.is-deal-left { animation: flashcard-deal-left .18s ease-out both; }
.flashcard.no-flip-motion.is-cut-left,
.flashcard.no-flip-motion.is-cut-right,
.flashcard.no-flip-motion.is-deal-right,
.flashcard.no-flip-motion.is-deal-left { animation: none; }

@keyframes flashcard-cut-left { to { opacity: 0; transform: translateX(-92px) rotate(-4deg) scale(.97); } }
@keyframes flashcard-cut-right { to { opacity: 0; transform: translateX(92px) rotate(4deg) scale(.97); } }
@keyframes flashcard-deal-right { from { opacity: 0; transform: translateX(92px) rotate(4deg) scale(.97); } }
@keyframes flashcard-deal-left { from { opacity: 0; transform: translateX(-92px) rotate(-4deg) scale(.97); } }

.flashcard-face {
  position: absolute;
  inset: 0;
  padding: 37% 12% 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: inherit;
  color: #f3efe4;
  background-color: #050c15;
  background-image: url('assets/celestial-flashcard-frame.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flashcard-back { transform: rotateY(180deg); }
.flashcard-kicker {
  position: absolute;
  top: 28%;
  left: 12%;
  right: 12%;
  color: #d9b75e;
  font: 600 13px/1.3 var(--serif);
  letter-spacing: .08em;
  text-align: center;
}

.flashcard-main {
  width: fit-content;
  max-width: 6em;
  color: #f5f0e5;
  font: 600 clamp(23px, 2.7vw, 34px)/1.48 var(--serif);
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,.74);
  overflow-wrap: anywhere;
  word-break: break-all;
}

.flashcard[data-card-type="word"] .flashcard-main {
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.32;
}

.flashcard[data-card-type="example"] .flashcard-main { font-size: clamp(20px, 2.35vw, 29px); }
.flashcard-reading {
  min-height: 27px;
  margin-top: 7px;
  color: #d9b75e;
  font: 500 clamp(17px, 2vw, 23px)/1.35 var(--serif);
  letter-spacing: .12em;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.flashcard-reading:empty { display: none; }

.flashcard-divider {
  width: 48%;
  margin: 19px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d9b75e;
  font-size: 9px;
}

.flashcard-divider::before,
.flashcard-divider::after { content: ''; height: 1px; flex: 1; background: rgba(217,183,94,.5); }
.flashcard-face small {
  position: absolute;
  bottom: 9%;
  left: 10%;
  right: 10%;
  color: #d7b866;
  font: 500 12px/1.45 var(--serif);
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 2px 10px #000;
}

.flashcard-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 10px; }
.flashcard-actions button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #b9c6d5;
  background: rgba(16,24,39,.8);
  cursor: pointer;
}
.flashcard-actions button:hover { color: #fff; border-color: rgba(139,180,197,.38); }
.flashcard-actions button:last-child { color: #ead58f; border-color: rgba(232,198,109,.22); }
.flashcard-actions button.is-selected { color: #fff4cb; border-color: rgba(232,198,109,.62); background: rgba(232,198,109,.1); box-shadow: inset 0 0 20px rgba(232,198,109,.05); }
.flashcard-actions b { margin-right: 7px; color: #71839a; font-size: 10px; }
.flashcard-shortcuts { margin: 10px 0 0; color: #5e6d81; font-size: 9px; text-align: center; }

.file-panel,
.toc-panel {
  background: #080d16;
}

.reader-shell {
  background:
    linear-gradient(90deg, rgba(6,9,15,.96), rgba(12,18,29,.98) 50%, rgba(6,9,15,.96)),
    #080c14;
}

.tree-note:hover,
.tree-note.active {
  background: linear-gradient(90deg, rgba(111,141,177,.14), rgba(111,141,177,.045));
}

.tree-note.active {
  box-shadow: inset 2px 0 0 #d9bb69;
}

.markdown-body h2 {
  border-bottom-color: rgba(232,198,109,.13);
}

.markdown-body a {
  color: #8fc2d2;
  border-bottom-color: rgba(143,194,210,.22);
}

button:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(232,198,109,.72);
  outline-offset: 3px;
}

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

@media (max-width: 720px) {
  .login-card { padding: 30px 22px 24px; }
  .login-card h1 { font-size: 23px; }
  .security-watermark { grid-template-columns: repeat(2, minmax(210px, 1fr)); grid-auto-rows: 125px; }
  .security-watermark span { width: 260px; font-size: 9px; }
  .subpage-card { top: 1.5%; bottom: 1.5%; width: calc(100% - 14px); padding: 22px 18px 55px; }
  .subpage-head { gap: 12px; }
  .subpage-head h1 { font-size: 23px; }
  .subpage-head button { width: 38px; padding: 0; overflow: hidden; font-size: 0; }
  .subpage-head button::before { content: '←'; font-size: 19px; }
  .search-tools { grid-template-columns: minmax(60px, 1fr) 40px 40px 40px; gap: 6px; }
  .review-weak-button { width: 40px; padding: 0; justify-content: center; }
  .review-weak-label,
  .review-weak-button b { display: none; }
  .constellation-panel {
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 72px;
    width: auto;
    max-height: 48vh;
  }
  .flashcard-shell { width: calc(100% - 12px); height: calc(100% - 12px); margin: 6px auto; padding: 12px 10px 9px; }
  .flashcard-header h1 { font-size: 21px; }
  .flashcard-header p { margin-bottom: 3px; }
  .flashcard-toolbar { margin: 8px 0 7px; gap: 6px; }
  .flashcard-toolbar label { flex: 1 1 130px; }
  .flashcard-toolbar select { width: 100%; }
  .flashcard-motion-toggle { flex: 0 0 auto !important; }
  .flashcard-status { margin: 4px 1px 5px; }
  .flashcard-stage { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 5px; }
  .flashcard-nav { width: 34px; height: 56px; border-radius: 20px; }
  .flashcard-nav span { font-size: 30px; line-height: 24px; }
  .flashcard-nav small { display: none; }
  .flashcard { width: auto; max-width: 100%; height: min(100%, 500px); min-height: 0; aspect-ratio: 3 / 4; }
  .flashcard-face { padding-top: 36%; }
  .flashcard-actions { gap: 6px; margin-top: 7px; }
  .flashcard-actions button { min-height: 41px; }
  .flashcard-shortcuts { margin-top: 6px; }
  .lesson-flashcard-entry { align-items: stretch; flex-direction: column; }
  .lesson-flashcard-entry > button { width: 100%; }
}

@media (max-height: 680px) {
  .flashcard-shell { height: calc(100% - 12px); margin: 6px auto; padding-top: 10px; padding-bottom: 8px; }
  .flashcard-header p { display: none; }
  .flashcard-header h1 { font-size: 20px; }
  .flashcard-header > button { width: 30px; height: 30px; }
  .flashcard-toolbar { margin: 6px 0; }
  .flashcard-toolbar select,
  .flashcard-toolbar button,
  .flashcard-motion-toggle { height: 31px; min-height: 31px; }
  .flashcard-status { margin: 3px 1px 4px; }
  .flashcard-actions { margin-top: 6px; }
  .flashcard-actions button { min-height: 38px; }
  .flashcard-shortcuts { margin-top: 4px; }
}

/* Japanese learning lab */
.study-tools-button { min-width: 76px; height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #d8e0eb; border: 1px solid rgba(232,198,109,.22); border-radius: 20px; background: linear-gradient(180deg,rgba(30,40,59,.88),rgba(12,19,31,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035),0 7px 24px rgba(0,0,0,.2); font: 500 11px/1 inherit; letter-spacing: .04em; white-space: nowrap; cursor: pointer; transition: color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.study-tools-button:hover { color: #fff0bc; border-color: rgba(232,198,109,.58); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 9px 28px rgba(0,0,0,.3),0 0 18px rgba(232,198,109,.08); }
.tools-orbit { position: relative; width: 20px; height: 20px; flex: none; border: 1px solid rgba(232,198,109,.62); border-radius: 50%; transform: rotate(-18deg); box-shadow: inset 0 0 8px rgba(232,198,109,.08); }
.tools-orbit::before,.tools-orbit::after { content: ''; position: absolute; border: 1px solid rgba(138,177,207,.5); border-radius: 50%; inset: 5px -4px; }
.tools-orbit::after { inset: -3px 8px; }
.tools-orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e8c66d; box-shadow: 0 0 7px currentColor; }
.tools-orbit i:nth-child(1) { left: 8px; top: 8px; }.tools-orbit i:nth-child(2) { right: -2px; top: 6px; }.tools-orbit i:nth-child(3) { left: 1px; bottom: 1px; }
.tools-orbit i:nth-child(4) { left:2px; top:-2px; background:#a7bfd7; color:#a7bfd7; }.tools-orbit i:nth-child(5) { right:1px; bottom:-2px; background:#c5d9e8; color:#c5d9e8; }.tools-orbit i:nth-child(6) { left:8px; top:-4px; background:#f2dea1; color:#f2dea1; }
.tool-modal { position: fixed; inset: 0; z-index: 120; padding: 20px; color: #dce8ee; }
.tool-backdrop { position: absolute; inset: 0; background: rgba(2,7,15,.86); backdrop-filter: blur(14px); }
.tool-shell { position: relative; width: min(1120px,100%); height: min(820px,calc(100vh - 40px)); margin: auto; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0,1fr); border: 1px solid rgba(232,198,109,.36); border-radius: 24px; background: radial-gradient(circle at 85% 10%,rgba(50,76,110,.24),transparent 34%),linear-gradient(145deg,#08111e,#0b1423 58%,#07101c); box-shadow: 0 28px 90px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,255,255,.025); }
.tool-shell::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: radial-gradient(circle at 15% 22%,#e8c66d 0 1px,transparent 1.6px),radial-gradient(circle at 73% 16%,#9fc5dc 0 1px,transparent 1.7px),radial-gradient(circle at 88% 76%,#e8c66d 0 1px,transparent 1.6px); background-size: 217px 197px,283px 241px,331px 277px; }
.tool-header { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 22px 26px 16px; border-bottom: 1px solid rgba(133,158,184,.14); }
.tool-header p { margin: 0 0 4px; color: #8fb9d0; font-size: 10px; letter-spacing: .34em; }.tool-header h1 { margin: 0; color: #f5ead0; font: 500 28px/1.2 serif; }.tool-header small { color: #d4b96d; font-size: 13px; }
.tool-header button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(232,198,109,.28); color: #e7d9b6; background: rgba(9,16,28,.7); font-size: 25px; cursor: pointer; }
.tool-tabs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 14px 24px; }
.tool-tabs button,.tool-tabs a { min-width: 0; min-height: 66px; display: grid; grid-template-columns: 42px minmax(0,auto); grid-template-rows: 1fr 1fr; align-items: end; column-gap: 10px; padding: 9px 12px; text-align: left; text-decoration: none; color: #8ea0b5; border: 1px solid rgba(134,158,183,.15); border-radius: 13px; background: rgba(13,23,39,.62); cursor: pointer; }
.tool-tabs button:hover,.tool-tabs a:hover { border-color: rgba(232,198,109,.38); background: rgba(28,42,61,.82); }
.tool-tabs button span,.tool-tabs a span { grid-row: 1/3; align-self: center; display: grid; place-items: center; width: 39px; height: 39px; color: #d5bb72; border: 1px solid rgba(232,198,109,.35); border-radius: 50%; font: 500 17px serif; }.tool-tabs button b,.tool-tabs a b { overflow: hidden; color: #dce8ee; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }.tool-tabs button small,.tool-tabs a small { overflow: hidden; font-size: 9px; letter-spacing: .05em; white-space: nowrap; text-overflow: ellipsis; }
.tool-tabs button.active { border-color: rgba(232,198,109,.5); background: linear-gradient(120deg,rgba(232,198,109,.12),rgba(43,67,94,.22)); box-shadow: inset 3px 0 #e8c66d; }
.tool-workspace { position: relative; z-index: 1; overflow: hidden; }.tool-panel { display: none; height: 100%; padding: 12px 26px 24px; overflow: auto; }.tool-panel.active { display: block; }
.tool-copy { display: flex; gap: 15px; align-items: flex-start; margin: 4px 0 18px; }.tool-copy em { color: rgba(232,198,109,.44); font: 400 32px/1 serif; }.tool-copy h2 { margin: 0 0 5px; color: #f1e7cf; font: 500 22px/1.25 serif; }.tool-copy p { margin: 0; color: #8295aa; font-size: 13px; }
.tool-dropzone { min-height: 118px; display: grid; place-items: center; align-content: center; gap: 5px; padding: 16px; text-align: center; border: 1px dashed rgba(147,185,223,.42); border-radius: 16px; background: rgba(12,22,38,.72); cursor: pointer; }.tool-dropzone.dragging { border-color: #e8c66d; background: rgba(232,198,109,.08); }.tool-dropzone input { position: absolute; opacity: 0; pointer-events: none; }.tool-drop-icon { display: grid; place-items: center; width: 38px; height: 38px; color: #e8c66d; border: 1px solid rgba(232,198,109,.45); border-radius: 50%; font: 500 15px serif; }.tool-dropzone strong { color: #dce8ee; font-size: 14px; }.tool-dropzone small { color: #73879d; }
.ruby-composer { position: relative; overflow: hidden; border: 1px solid rgba(147,185,223,.32); border-radius: 16px; background: rgba(5,12,22,.7); transition: border-color .16s,background .16s,box-shadow .16s; }.ruby-composer:focus-within { border-color: rgba(232,198,109,.58); box-shadow: 0 0 0 3px rgba(232,198,109,.06); }.ruby-composer.dragging { border-color: #e8c66d; background: rgba(232,198,109,.08); box-shadow: inset 0 0 0 1px rgba(232,198,109,.35); }.ruby-composer textarea { box-sizing: border-box; width: 100%; min-height: 218px; display: block; resize: vertical; padding: 20px 20px 14px; color: #e7edf2; border: 0; outline: 0; background: transparent; font: 17px/1.9 "Yu Mincho","Noto Serif JP",serif; }.ruby-composer textarea::placeholder { color: #66798e; }.ruby-attachment { margin: 0 16px 12px; display: grid; grid-template-columns: 38px minmax(0,1fr) 34px; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(232,198,109,.26); border-radius: 12px; background: rgba(232,198,109,.07); }.ruby-attachment strong,.ruby-attachment small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.ruby-attachment strong { color: #e6edf2; font-size: 13px; }.ruby-attachment small { margin-top: 3px; color: #879bae; font-size: 10px; }.ruby-attachment button { width: 32px; height: 32px; padding: 0; color: #9eb0c2; border: 1px solid rgba(147,185,223,.2); border-radius: 50%; background: rgba(8,16,28,.7); cursor: pointer; }.ruby-attachment button:hover { color: #fff; border-color: rgba(232,198,109,.5); }.ruby-composer-footer { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid rgba(127,154,181,.15); background: rgba(11,21,36,.82); }.ruby-upload-button { flex: none; min-height: 34px; display: inline-flex; align-items: center; padding: 0 13px; color: #e6cc80; border: 1px solid rgba(232,198,109,.32); border-radius: 18px; background: rgba(232,198,109,.06); font-size: 12px; cursor: pointer; }.ruby-upload-button:hover { border-color: rgba(232,198,109,.6); background: rgba(232,198,109,.11); }.ruby-upload-button input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.ruby-input-hint { min-width: 0; flex: 1; color: #73879d; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.ruby-composer-footer b { flex: none; color: #bba45f; font-size: 10px; font-weight: 400; }
.tool-actions { display: flex; gap: 10px; margin: 16px 0 10px; }.tool-actions button,.tool-download { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 22px; border-radius: 22px; text-decoration: none; font: 600 13px inherit; letter-spacing: .08em; }.tool-actions button { color: #09111e; border: 0; background: linear-gradient(100deg,#d7b85f,#f0d98f); cursor: pointer; }.tool-actions button:disabled { opacity: .35; cursor: not-allowed; }.tool-download { color: #d6c27e; border: 1px solid rgba(232,198,109,.3); background: rgba(10,17,29,.7); }.tool-download.disabled { opacity: .3; pointer-events: none; }
.tool-status { margin: 0 2px 10px; color: #8da2b8; font-size: 12px; }.tool-status.busy { color: #e8c66d; }.tool-status.error { color: #f09595; }.tool-warning { margin: 8px 0; padding: 10px 13px; color: #e7ca7e; border-left: 2px solid #d6b75d; background: rgba(232,198,109,.07); font-size: 12px; white-space: pre-line; }
.tool-preview { min-height: 220px; padding: 20px 22px; overflow: auto; color: #d7e1ea; border: 1px solid rgba(127,154,181,.17); border-radius: 15px; background: rgba(5,12,22,.66); line-height: 1.85; }.tool-preview ruby { ruby-position: over; }.tool-preview rt { color: #e7c96e; font-size: .58em; }.tool-placeholder { color: #63758a; text-align: center; padding-top: 55px; }
.ruby-preview ruby { margin-inline: .04em; }.ruby-preview rt[contenteditable="true"] { min-width: 1.2em; padding: 1px 3px; border-radius: 4px; cursor: text; outline: none; transition: color .15s,background .15s,box-shadow .15s; }.ruby-preview rt[contenteditable="true"]:focus { color: #fff2b5; background: rgba(232,198,109,.18); box-shadow: 0 0 0 1px rgba(232,198,109,.65); }.ruby-preview .ruby-attention { color: #f1cb55; background: rgba(232,198,109,.1); box-shadow: 0 2px rgba(232,198,109,.58); }.ruby-preview rt.saving { opacity: .55; }.ruby-preview rt.saved { color: #83d6a7; background: rgba(91,194,137,.14); }
.tool-textarea-label { display: block; }.tool-textarea-label > span { display: flex; justify-content: space-between; margin: 0 2px 8px; color: #a9bacb; font-size: 13px; }.tool-textarea-label b { color: #d3b968; font-weight: 400; }.tool-textarea-label textarea { box-sizing: border-box; width: 100%; min-height: 210px; resize: vertical; padding: 20px; color: #e7edf2; border: 1px solid rgba(147,185,223,.3); border-radius: 15px; outline: none; background: rgba(5,12,22,.7); font: 17px/1.9 "Yu Mincho","Noto Serif JP",serif; }.tool-textarea-label textarea:focus { border-color: rgba(232,198,109,.58); }
.tool-consent { margin: 11px 2px 0; display: flex; align-items: flex-start; gap: 9px; color: #8fa1b4; font-size: 11px; line-height: 1.55; cursor: pointer; }.tool-consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: #d9b75e; flex: none; }.tool-consent span { -webkit-user-select: none !important; user-select: none !important; }
.tool-audio { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 15px; border: 1px solid rgba(232,198,109,.22); border-radius: 15px; background: rgba(7,14,25,.72); }.tool-audio audio { width: 100%; }.audio-constellation { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid rgba(232,198,109,.5); border-radius: 50%; box-shadow: inset 0 0 14px rgba(232,198,109,.1); }
.layout-controls { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 14px; }.tool-select { display: grid; align-content: center; gap: 10px; padding: 18px; color: #9dafc1; border: 1px solid rgba(127,154,181,.17); border-radius: 15px; background: rgba(8,16,28,.65); font-size: 12px; }.tool-select select { min-height: 44px; padding: 0 12px; color: #e4edf3; border: 1px solid rgba(232,198,109,.3); border-radius: 8px; background: #101b2c; }
.auth-locked .study-tools-button,.auth-locked .tool-modal { display: none !important; }
.ruby-preview rt[contenteditable="true"],.tool-textarea-label textarea,.ruby-composer textarea { -webkit-user-select: text !important; user-select: text !important; }
@media (max-width: 760px) { .study-tools-button { width: 40px; min-width: 40px; padding: 0; }.study-tools-button > span:last-child { display:none; }.tool-modal { padding: 6px; }.tool-shell { height: calc(100vh - 12px); border-radius: 17px; }.tool-header { padding: 15px 15px 11px; }.tool-header h1 { font-size: 22px; }.tool-header p,.tool-header small { display:none; }.tool-tabs { padding: 9px; gap: 5px; }.tool-tabs button,.tool-tabs a { min-height: 58px; grid-template-columns: 34px minmax(0,auto); column-gap: 7px; padding: 7px; }.tool-tabs button span,.tool-tabs a span { width: 32px; height: 32px; }.tool-tabs button small,.tool-tabs a small { display:none; }.tool-panel { padding: 10px 13px 18px; }.layout-controls { grid-template-columns: 1fr; }.tool-copy em { font-size: 25px; }.tool-copy h2 { font-size: 19px; }.tool-copy p { font-size: 12px; }.tool-actions { position: sticky; bottom: -18px; z-index: 2; padding: 8px 0 max(8px,env(safe-area-inset-bottom)); background: linear-gradient(transparent,#091321 25%); }.tool-actions button,.tool-download { flex: 1; padding: 0 12px; }.tool-preview { min-height: 180px; padding: 15px; }.tool-textarea-label textarea { min-height: 180px; }.ruby-composer textarea { min-height: 190px; padding: 16px; font-size: 16px; }.ruby-composer-footer { flex-wrap: wrap; gap: 7px 10px; padding: 9px 11px; }.ruby-input-hint { order: 3; flex-basis: 100%; }.ruby-attachment { margin: 0 11px 10px; } }
@media (max-width: 420px) { .tool-tabs button,.tool-tabs a { display:flex; justify-content:center; }.tool-tabs button b,.tool-tabs a b { display:none; }.tool-tabs button span,.tool-tabs a span { flex:none; }.tool-copy p { max-width: 270px; }.tool-actions { gap: 6px; }.tool-actions button,.tool-download { font-size: 12px; letter-spacing: 0; } }

/* Adjustable list workspace and AI practice */
.list-view { --file-width:282px; --toc-width:220px; grid-template-columns:var(--file-width) minmax(320px,1fr) var(--toc-width); }
.column-resizer { position:absolute; z-index:8; top:0; bottom:0; width:14px; cursor:col-resize; touch-action:none; transform:translateX(-50%); }
.column-resizer::after { content:''; position:absolute; top:0; bottom:0; left:6px; width:2px; background:transparent; transition:background .18s,box-shadow .18s; }
.column-resizer:hover::after,.column-resizer.dragging::after,.column-resizer:focus-visible::after { background:#d9bb69; box-shadow:0 0 12px rgba(217,187,105,.42); }
.column-resizer-left { left:var(--file-width); }.column-resizer-right { left:calc(100% - var(--toc-width)); }
.tree-note-row { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:stretch; }
.tree-note-row .tree-note { width:100%; min-width:0; padding-left:2px; }
.tree-note-row .tree-note::before { content:none; display:none; }
.tree-select { position:relative; display:grid; place-items:center; cursor:pointer; }
.tree-select input { position:absolute; opacity:0; pointer-events:none; }
.tree-select span { width:10px; height:10px; transform:rotate(45deg); border:1px solid #5f708f; border-radius:0; background:transparent; transition:background .15s,border-color .15s,box-shadow .15s; }
.tree-select:hover span { border-color:#e8c66d; }
.tree-select input:checked + span { border-color:#e8c66d; background:#e8c66d; box-shadow:inset 0 0 0 2px #0a101b,0 0 9px rgba(232,198,109,.38); }
.tree-select input:indeterminate + span { border-color:#e8c66d; background:linear-gradient(135deg,#e8c66d 50%,transparent 50%); }
.tree-select:has(input:focus-visible) span { outline:2px solid rgba(232,198,109,.72); outline-offset:2px; }
.tree-folder>.tree-library-summary { display:flex; align-items:center; padding-top:0; padding-bottom:0; min-height:32px; }
.tree-library-summary::before { flex:0 0 15px; }
.tree-library-select { flex:0 0 28px; align-self:stretch; min-height:32px; }
.tree-library-summary>span { min-width:0; overflow-wrap:anywhere; }
.tree-folder:has(>.tree-library-summary)>.tree-children { padding-left:30px; }
.search-tools .review-weak-label,.search-tools .study-tools-button>span:last-child { font-family:inherit; font-size:11px; font-weight:400; line-height:1.4; letter-spacing:.04em; }
.mistake-orbit i:first-child { width:5px; height:5px; left:7.5px; top:7.5px; color:#e8c66d; }
.mistake-orbit i:nth-child(4) { left:3px; top:-2px; background:#a7bfd7; color:#a7bfd7; }
.mistake-modal { z-index:160; }
.mistake-body { position:relative; overflow:auto; min-height:0; overscroll-behavior:contain; padding:20px 26px max(24px,env(safe-area-inset-bottom)); }
#mistakeStatus { color:#9aacc0; line-height:1.7; font-size:13px; }
.mistake-card { padding:22px; margin:18px 0; border:1px solid rgba(232,198,109,.2); border-radius:16px; background:rgba(8,17,30,.72); overflow-wrap:anywhere; }
.mistake-meta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; color:#e8c66d; font-size:12px; }
.mistake-meta small { color:#b4a16f; }
.mistake-card h2 { font:500 clamp(19px,2vw,24px)/1.65 var(--serif); color:#f0eadc; white-space:pre-wrap; }
.mistake-options { padding-left:26px; color:#b9c8d9; line-height:1.8; }
.mistake-answer { white-space:pre-wrap; line-height:1.7; color:#e4a49a; }
.mistake-answer>span { display:block; color:#93a5b8; font-size:12px; }
.mistake-explanation { border-top:1px solid rgba(232,198,109,.16); }
.mistake-explanation summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:10px; color:#dec57d; font-size:14px; list-style:none; }
.mistake-explanation summary::before { content:'›'; font-size:22px; transition:transform .15s; }
.mistake-explanation[open] summary::before { transform:rotate(90deg); }
.mistake-explanation p { white-space:pre-wrap; line-height:1.8; font-size:15px; }
.mistake-explanation strong { display:block; color:#dac27e; font-size:12px; margin-bottom:5px; }
.mistake-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid #ffffff0d; padding-top:10px; }
.mistake-card time { color:#6f859b; font-size:11px; }
.mistake-body button { min-height:44px; padding:0 15px; border:1px solid #809bb433; border-radius:22px; color:#b8c8d8; background:#0e1929; cursor:pointer; }
.mistake-body button:hover { color:#f2dfa6; border-color:#e8c66d77; }
.mistake-body button[data-confirm="yes"] { color:#efaba0; border-color:#d9988166; }
.mistake-body button:disabled { opacity:.4; cursor:default; }
.mistake-pagination { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#99acc0; font-size:12px; }
.auth-locked .mistake-button { display:none!important; }
@media(max-width:620px) { .mistake-body { padding:12px 12px max(16px,env(safe-area-inset-bottom)); }.mistake-card { padding:15px; }.mistake-modal .exercise-shell { height:calc(100dvh - 12px); } }

/* Integrated Japanese writing assistant */
.topbar { grid-template-columns:240px minmax(420px,720px) 220px; }
.search-tools { grid-template-columns:minmax(120px,1fr) repeat(6,auto); }
.writing-assistant-button { min-width:92px; }
.writing-orbit i:first-child { width:5px; height:5px; left:7.5px; top:7.5px; color:#e8c66d; }
.writing-orbit i:nth-child(2) { right:-2px; top:6px; }
.writing-orbit i:nth-child(3) { left:1px; bottom:1px; }
.writing-orbit i:nth-child(4) { left:3px; top:-2px; background:#a7bfd7; color:#a7bfd7; }
.writing-orbit i:nth-child(5) { right:1px; bottom:-2px; background:#c5d9e8; color:#c5d9e8; }
.writing-assistant-modal { position:fixed; inset:0; z-index:190; padding:10px; color:#dce8ee; }
.writing-assistant-backdrop { position:absolute; inset:0; background:rgba(2,6,13,.96); }
.writing-assistant-shell { position:relative; width:min(1540px,100%); height:calc(100dvh - 20px); margin:auto; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid rgba(232,198,109,.36); border-radius:22px 4px 22px 4px; background:#07101c; box-shadow:0 34px 110px rgba(0,0,0,.68),inset 0 0 0 1px rgba(255,255,255,.025); }
.writing-assistant-header { position:relative; z-index:2; min-height:74px; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid rgba(148,171,199,.15); background:radial-gradient(circle at 82% 0,rgba(232,198,109,.08),transparent 32%),linear-gradient(90deg,#091422,#0b1828 55%,#08111e); }
.writing-assistant-header p { margin:0 0 4px; color:#8fb8d0; font-size:8px; letter-spacing:.28em; }
.writing-assistant-header h1 { margin:0; color:#f1ead7; font:500 22px/1.2 var(--serif); }
.writing-assistant-header small { display:block; margin-top:3px; color:#778ba0; font-size:9px; letter-spacing:.06em; }
.writing-assistant-header button { width:42px; height:42px; flex:none; border:1px solid rgba(232,198,109,.3); border-radius:50%; color:#eee2c2; background:rgba(6,13,23,.7); font-size:25px; cursor:pointer; transition:.18s; }
.writing-assistant-header button:hover { color:#fff0bc; border-color:rgba(232,198,109,.65); transform:rotate(6deg); }
#writingAssistantFrame { position:relative; z-index:1; display:block; width:100%; height:100%; border:0; background:#060b14; }
.writing-assistant-loading { position:absolute; z-index:3; inset:75px 0 0; display:grid; place-content:center; justify-items:center; gap:14px; color:#8ea3b6; background:#07101c; pointer-events:none; transition:opacity .25s ease; }
.writing-assistant-loading.loaded { opacity:0; }
.writing-assistant-loading span { width:42px; height:42px; border:1px solid rgba(232,198,109,.22); border-top-color:#e8c66d; border-radius:50%; box-shadow:0 0 24px rgba(232,198,109,.08); animation:writing-orbit-spin 1s linear infinite; }
.writing-assistant-loading p { margin:0; font-size:11px; letter-spacing:.1em; }
.auth-locked .writing-assistant-button,.auth-locked .writing-assistant-modal { display:none!important; }
@keyframes writing-orbit-spin { to { transform:rotate(360deg); } }

@media(max-width:1100px) {
  .topbar { grid-template-columns:190px minmax(380px,1fr) 110px; gap:10px; padding-inline:14px; }
  .brand strong { font-size:13px; }
  .writing-assistant-button { min-width:40px; width:40px; padding:0; }
  .writing-assistant-button>span:last-child { display:none; }
}
@media(max-width:700px) {
  :root { --header:118px; }
  .topbar { height:var(--header); grid-template-columns:auto auto; grid-template-rows:50px 52px; align-content:center; padding:env(safe-area-inset-top) 10px 6px; gap:2px 10px; }
  .topbar>.brand { grid-column:1; grid-row:1; }
  .topbar>.mode-switch { grid-column:2; grid-row:1; }
  .topbar>.search-tools { grid-column:1/-1; grid-row:2; display:block; width:100%; }
  .topbar>.search-tools>.search-wrap { width:100%; }
  .review-weak-button,.study-tools-button { width:40px; min-width:40px; padding:0; justify-content:center; }
  .review-weak-label,.review-weak-button b,.study-tools-button>span:last-child { display:none; }
  .mobile-features-toggle { display:block; }
  .mobile-features-backdrop { display:block; position:fixed; z-index:78; inset:var(--header) 0 0; width:auto; height:auto; padding:0; border:0; background:rgba(2,6,13,.42); backdrop-filter:blur(2px); }
  .mobile-features-menu { position:fixed; z-index:79; top:calc(var(--header) + 8px); right:10px; width:min(320px,calc(100vw - 20px)); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px; border:1px solid rgba(232,198,109,.34); border-radius:15px; background:linear-gradient(150deg,rgba(15,27,45,.98),rgba(6,13,23,.99)); box-shadow:0 20px 60px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.035); }
  .mobile-features-menu>button { width:100%; min-width:0; height:56px; padding:0 13px; justify-content:flex-start; border-radius:12px; }
  .mobile-features-menu>button:last-child { grid-column:1/-1; }
  .mobile-features-menu .review-weak-label,.mobile-features-menu .study-tools-button>span:last-child { display:inline; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .mobile-features-menu .review-weak-button b { display:grid; margin-left:auto; }
  .writing-assistant-modal { padding:4px; }
  .writing-assistant-shell { height:calc(100dvh - 8px); border-radius:14px 3px 14px 3px; }
  .writing-assistant-header { min-height:62px; padding:10px 12px; }
  .writing-assistant-header h1 { font-size:18px; }
  .writing-assistant-header p,.writing-assistant-header small { display:none; }
  .writing-assistant-header button { width:40px; height:40px; }
  .writing-assistant-loading { inset:63px 0 0; }
}
@media(prefers-reduced-motion:reduce) { .writing-assistant-loading span { animation:none; } }

/* Keep every desktop learning action on one row; search yields space first. */
@media(min-width:701px) {
  .topbar { grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(6px,.7vw,14px); padding-inline:clamp(10px,1.3vw,24px); }
  .topbar>.search-tools { display:flex; flex-wrap:nowrap; gap:clamp(4px,.45vw,10px); min-width:0; }
  .topbar>.search-tools>.search-wrap { flex:1 1 180px; min-width:80px; }
  .topbar>.search-tools>button { flex:0 0 auto; width:auto; min-width:0; height:40px; padding:0 clamp(5px,.6vw,10px); gap:clamp(4px,.4vw,7px); }
  .topbar>.search-tools>button>span:not(.tools-orbit) { display:inline; font-size:clamp(10px,.78vw,11px); }
  .topbar>.mode-switch { flex-wrap:nowrap; white-space:nowrap; }
}
@media(min-width:901px) {
  .topbar>.mode-switch button { font-size:clamp(10px,.78vw,12px); padding:8px clamp(6px,.6vw,12px); }
}
@media(min-width:701px) and (max-width:1200px) {
  .topbar .search-wrap kbd { display:none; }
  .topbar .search-wrap input { padding-right:12px; }
}
@media(min-width:701px) and (max-width:1100px) {
  .topbar>.search-tools>button .tools-orbit { display:none; }
  .topbar>.search-tools>button { padding-inline:5px; gap:4px; }
}

/* Account-synced favorite notes */
.favorite-notes-button{position:relative}.favorite-notes-button>span:nth-child(2){font-family:inherit;font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.04em}.favorite-notes-button b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:9px;color:#111827;background:#e8c66d;font-size:9px}.favorite-notes-button b:empty{display:none}
.reader-pane-actions [data-pane-favorite][aria-pressed="true"]{color:#f2d678;border-color:rgba(232,198,109,.48);background:rgba(232,198,109,.09)}
.favorite-notes-modal{position:fixed;inset:0;z-index:185;padding:12px;color:#dce8ee}.favorite-notes-backdrop{position:absolute;inset:0;background:rgba(2,6,13,.9);backdrop-filter:blur(15px)}
.favorite-notes-shell{position:relative;width:min(1500px,100%);height:calc(100dvh - 24px);margin:auto;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid rgba(232,198,109,.38);border-radius:22px;background:#07101c;box-shadow:0 34px 110px rgba(0,0,0,.7)}
.favorite-notes-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 18px 13px 24px;border-bottom:1px solid rgba(142,167,194,.15);background:radial-gradient(circle at 80% 0,rgba(232,198,109,.09),transparent 33%),linear-gradient(90deg,#091422,#0b1828 55%,#08111e)}
.favorite-notes-header p{margin:0 0 3px;color:#8fb8d0;font-size:8px;letter-spacing:.28em}.favorite-notes-header h1{margin:0;color:#f1ead7;font:500 23px/1.2 var(--serif)}.favorite-notes-header small{color:#74899f;font-size:10px}
.favorite-notes-actions{display:flex;align-items:center;gap:8px}.favorite-notes-actions button,.favorite-note-row button,.favorite-notes-reader .reader-head button{min-height:38px;padding:0 14px;border:1px solid rgba(232,198,109,.25);border-radius:10px;color:#dcc77f;background:#101c2b;cursor:pointer}.favorite-notes-actions #favoriteNotesClose{width:42px;height:42px;padding:0;border-radius:50%;font-size:24px}.favorite-notes-actions button:hover,.favorite-note-row button:hover,.favorite-notes-reader .reader-head button:hover{border-color:rgba(232,198,109,.58);color:#fff0bc}
.favorite-notes-workspace{min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr)}.favorite-notes-list{min-height:0;overflow:auto;border-right:1px solid rgba(139,164,190,.16);background:#091321}.favorite-list-heading{position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;border-bottom:1px solid rgba(139,164,190,.13);background:rgba(9,19,33,.96)}.favorite-list-heading strong{color:#e9dec3;font-size:13px}.favorite-list-heading span{color:#8398ad;font-size:10px}
.favorite-note-row{display:grid;grid-template-columns:34px minmax(0,1fr) 40px;align-items:stretch;border-bottom:1px solid rgba(130,155,181,.09)}.favorite-note-row.active{background:linear-gradient(90deg,rgba(232,198,109,.12),rgba(36,59,83,.16));box-shadow:inset 3px 0 #e8c66d}.favorite-note-row>[data-favorite-open]{min-width:0;height:auto;padding:11px 7px;text-align:left;border:0;border-radius:0;background:transparent}.favorite-note-row b,.favorite-note-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favorite-note-row b{color:#dfe8ef;font-size:13px}.favorite-note-row small{margin-top:4px;color:#71869b;font-size:9px}.favorite-note-row>[data-favorite-remove]{align-self:center;width:34px;min-height:34px;padding:0;border:0;background:transparent}.favorite-list-empty{padding:36px 20px;color:#71869a;text-align:center;line-height:1.8;font-size:12px}
.favorite-notes-reader{min-width:0;min-height:0;overflow:auto;background:linear-gradient(90deg,rgba(6,9,15,.96),rgba(12,18,29,.98) 50%,rgba(6,9,15,.96))}.favorite-notes-reader>#favoriteNoteArticle{padding:34px clamp(24px,4vw,70px) 100px}.favorite-notes-reader .reader-head{margin-bottom:25px}.favorite-note-empty{height:100%;display:grid;place-content:center;justify-items:center;color:#71869b}.favorite-note-empty span{font-size:42px;color:#d8bd72}.favorite-note-empty h2{margin:10px 0 5px;color:#e9e1ce;font:500 21px var(--serif)}.favorite-note-empty p{margin:0;font-size:12px}.auth-locked .favorite-notes-modal,.auth-locked .favorite-notes-button{display:none!important}
.favorite-notes-open #aiOrb{visibility:hidden;pointer-events:none}
@media(max-width:700px){.favorite-notes-modal{padding:4px}.favorite-notes-shell{height:calc(100dvh - 8px);border-radius:14px}.favorite-notes-header{min-height:112px;align-items:flex-start;padding:12px;flex-direction:column;gap:8px}.favorite-notes-header p,.favorite-notes-header small{display:none}.favorite-notes-actions{width:100%}.favorite-notes-actions button{flex:1}.favorite-notes-actions #favoriteNotesClose{flex:0 0 40px}.favorite-notes-workspace{grid-template-columns:1fr;grid-template-rows:minmax(160px,35dvh) minmax(0,1fr)}.favorite-notes-list{border-right:0;border-bottom:1px solid rgba(139,164,190,.16)}.favorite-notes-reader>#favoriteNoteArticle{padding:22px 16px 80px}.mobile-features-menu>button:last-child{grid-column:auto}.mobile-features-menu .favorite-notes-button b{display:grid;margin-left:auto}.mobile-features-menu .favorite-notes-button>span:nth-child(2){display:inline}}

/* Browser-like reader tabs, collapsible sidebars, and up to three reading panes */
.panel-title-actions{display:flex;align-items:center;gap:4px}.panel-title-actions button,.sidebar-hide{width:30px;height:30px;padding:0;border:1px solid transparent!important;border-radius:7px;background:transparent;color:#879bb2;cursor:pointer}.panel-title-actions button:hover,.sidebar-hide:hover{color:#efd58b;border-color:rgba(232,198,109,.24)!important;background:rgba(232,198,109,.06)}
.reader-shell{position:relative;min-width:0;overflow:hidden;display:grid;grid-template-rows:48px minmax(0,1fr);background:linear-gradient(90deg,rgba(6,9,15,.96),rgba(12,18,29,.98) 50%,rgba(6,9,15,.96)),#080c14}
.reader-tabbar{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid rgba(132,157,184,.16);background:linear-gradient(180deg,#0d1827,#09111d);box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:5}
.reader-history-buttons{display:flex;gap:4px}.reader-history-buttons button{width:34px;height:34px;padding:0;border:1px solid rgba(139,163,188,.2);border-radius:8px;background:#111e2f;color:#b8c7d6;cursor:pointer}.reader-history-buttons button:hover:not(:disabled){color:#f1d787;border-color:rgba(232,198,109,.45);background:#18283b}.reader-history-buttons button:disabled{opacity:.3;cursor:default}
.reader-tabs{min-width:0;height:36px;display:flex;align-items:stretch;gap:5px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#36465b transparent;-webkit-overflow-scrolling:touch}
.reader-tab{flex:0 0 auto;min-width:110px;max-width:230px;display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:stretch;border:1px solid rgba(132,158,184,.17);border-radius:9px 9px 4px 4px;background:#101c2b;color:#8497ac;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.reader-tab-open,.reader-tab-close{min-width:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.reader-tab-open{display:flex;align-items:center;padding:0 4px 0 13px;text-align:left}.reader-tab-open span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reader-tab-close{display:grid;place-items:center;width:30px;padding:0;border-radius:7px;font-size:17px;line-height:1;color:#75899f}.reader-tab-close:hover,.reader-tab-close:focus-visible{color:#f2dfaa;background:rgba(232,198,109,.1);outline:none}.reader-tab:hover{color:#dce6ef;border-color:rgba(159,187,212,.35);background:#16263a}.reader-tab.active{color:#f2dfaa;border-color:rgba(232,198,109,.48);background:linear-gradient(180deg,#223149,#162438);box-shadow:inset 0 -2px 0 #d8b962,0 0 14px rgba(232,198,109,.06)}
.reader-tab:active,.reader-tab.dragging{cursor:grabbing}.reader-tab.dragging{opacity:.65}
.reader-tab.in-pane{border-top-color:rgba(232,198,109,.45)}.reader-tab-divider{flex:0 0 auto;display:grid;place-items:center;align-self:center;padding:0 5px;color:#d4b96d;font-size:15px;font-weight:700;letter-spacing:1px;user-select:none}.reader-tab.reader-drop-before{box-shadow:inset 4px 0 0 #f0d58a}.reader-tab.reader-drop-after{box-shadow:inset -4px 0 0 #f0d58a}
#readerTabStatus{max-width:210px;margin:0;color:#d7bf7b;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reader-workspace{position:relative;min-width:0;min-height:0;display:grid;grid-template-columns:repeat(var(--reader-pane-count,1),minmax(0,1fr));overflow:hidden}.reader-workspace[data-panes="0"]{--reader-pane-count:1}.reader-workspace[data-panes="1"]{--reader-pane-count:1}.reader-workspace[data-panes="2"]{--reader-pane-count:2}.reader-workspace[data-panes="3"]{--reader-pane-count:3}
.reader-workspace>.reader-empty{grid-column:1/-1}.reader-pane{position:relative;min-width:0;width:100%!important;max-width:none!important;height:100%;margin:0!important;overflow:auto;overscroll-behavior:contain;padding:38px clamp(18px,2.2vw,48px) 110px;border-right:1px solid rgba(128,153,179,.13);outline:0;scroll-behavior:smooth}.reader-pane:last-of-type{border-right:0}.reader-pane.active{box-shadow:inset 0 3px 0 rgba(232,198,109,.5)}.reader-pane .reader-head{margin-bottom:24px}.reader-pane-actions{display:flex;align-items:center;gap:6px}.reader-pane-actions button{white-space:nowrap}.reader-pane-actions [data-close-pane]{width:34px;height:34px;padding:0;border-radius:50%;font-size:18px}
.reader-pane.reader-drop-before{box-shadow:inset 4px 0 0 #f0d58a}.reader-pane.reader-drop-after{box-shadow:inset -4px 0 0 #f0d58a}.reader-pane-actions [data-move-pane]{cursor:grab;touch-action:none}.reader-pane-actions [data-move-pane].dragging{cursor:grabbing}.reader-workspace[data-panes="0"] [data-move-pane],.reader-workspace[data-panes="1"] [data-move-pane]{display:none}
.reader-workspace[data-panes="2"] .reader-pane,.reader-workspace[data-panes="3"] .reader-pane{padding-inline:clamp(16px,1.5vw,30px)}.reader-workspace[data-panes="2"] .reader-head h1{font-size:28px}.reader-workspace[data-panes="3"] .reader-head{gap:10px;flex-wrap:wrap}.reader-workspace[data-panes="3"] .reader-head h1{font-size:23px}.reader-workspace[data-panes="3"] .markdown-body{font-size:14px}.reader-workspace[data-panes="3"] .reader-pane-actions{width:100%;justify-content:flex-end}
.reader-drop-hint{position:absolute;z-index:12;inset:18px;display:grid;place-content:center;justify-items:center;gap:7px;border:1px dashed rgba(232,198,109,.65);border-radius:14px;background:rgba(6,13,23,.9);color:#f0d58a;opacity:0;pointer-events:none;transition:opacity .15s}.reader-drop-hint small{color:#91a4b8}.reader-workspace.reader-dragging.reader-drop-ready .reader-drop-hint{opacity:1}
.sidebar-restore{position:absolute;z-index:8;top:58px;width:30px;height:46px;padding:0;border:1px solid rgba(232,198,109,.28);background:#101c2c;color:#dfc77f;cursor:pointer;display:none}.sidebar-restore-left{left:0;border-left:0;border-radius:0 10px 10px 0}.sidebar-restore-right{right:0;border-right:0;border-radius:10px 0 0 10px}
@media(min-width:901px){
 .list-view{--file-column:var(--file-width);--toc-column:var(--toc-width);grid-template-columns:var(--file-column) minmax(0,1fr) var(--toc-column)}
 .list-view>.file-panel{grid-column:1}.list-view>.reader-shell{grid-column:2}.list-view>.toc-panel{grid-column:3}
 .list-view.left-sidebar-hidden{--file-column:0px}.list-view.right-sidebar-hidden{--toc-column:0px}
 .list-view.left-sidebar-hidden>.file-panel,.list-view.left-sidebar-hidden>.column-resizer-left,.list-view.right-sidebar-hidden>.toc-panel,.list-view.right-sidebar-hidden>.column-resizer-right{display:none}
 .list-view.left-sidebar-hidden .sidebar-restore-left,.list-view.right-sidebar-hidden .sidebar-restore-right{display:block}
 .column-resizer-left{left:var(--file-column)}.column-resizer-right{left:calc(100% - var(--toc-column))}
}
.flashcard-settings-toggle{display:none}
@media(max-width:900px){
 .sidebar-hide,.sidebar-restore{display:none!important}.reader-shell{grid-template-rows:44px minmax(0,1fr)}.reader-tabbar{padding:4px 8px;gap:5px}.reader-history-buttons button{width:32px;height:34px}.reader-tabs{touch-action:pan-x}.reader-tab{min-width:112px;max-width:170px;touch-action:none;cursor:pointer}.reader-tab-open{padding-left:10px}.reader-tabbar #readerTabStatus{display:none}
 .reader-workspace{grid-template-columns:minmax(0,1fr)!important}.reader-workspace>.reader-pane:not(.active){display:none}.reader-pane{padding:28px 20px 100px}.reader-drop-hint,.reader-pane-actions [data-move-pane]{display:none}
}
.toc-panel { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.toc-panel nav { min-height:0; flex:1 1 auto; overflow:auto; padding:12px 16px 24px; }
.exercise-launcher { flex:none; margin:0 12px 14px; padding:14px; border:1px solid rgba(232,198,109,.22); border-radius:13px; background:radial-gradient(circle at 88% 8%,rgba(232,198,109,.09),transparent 36%),#0c1422; box-shadow:0 12px 30px rgba(0,0,0,.24); }
.exercise-launcher small { display:block; color:#7890a9; font-size:8px; letter-spacing:.18em; }.exercise-launcher strong { display:block; margin:5px 0 2px; color:#eee5ce; font:500 15px/1.3 var(--serif); }.exercise-launcher p { margin:0 0 11px; color:#708198; font-size:9px; line-height:1.45; }
.exercise-launcher button { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:9px; color:#f2dda0; border:1px solid rgba(232,198,109,.38); border-radius:22px; background:linear-gradient(120deg,rgba(232,198,109,.12),rgba(45,66,91,.25)); cursor:pointer; }
.exercise-launcher button:hover { color:#fff3ca; border-color:#e8c66d; }
.exercise-orbit { position:relative; width:18px; height:18px; border:1px solid #d9bb69; border-radius:50%; box-shadow:inset 0 0 8px rgba(232,198,109,.16); }.exercise-orbit::before { content:''; position:absolute; inset:6px; border-radius:50%; background:#e8c66d; box-shadow:0 0 7px #e8c66d; }.exercise-orbit::after { content:''; position:absolute; inset:3px -4px; border:1px solid rgba(135,176,205,.55); border-radius:50%; transform:rotate(-26deg); }
.exercise-modal { position:fixed; inset:0; z-index:130; padding:18px; color:#dce6ef; }.exercise-backdrop { position:absolute; inset:0; background:rgba(2,6,13,.88); backdrop-filter:blur(14px); }
.exercise-shell { position:relative; width:min(920px,100%); height:min(780px,calc(100vh - 36px)); margin:auto; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; border:1px solid rgba(232,198,109,.38); border-radius:22px; background:radial-gradient(circle at 84% 9%,rgba(64,92,123,.28),transparent 34%),radial-gradient(circle at 12% 90%,rgba(232,198,109,.06),transparent 31%),#091321; box-shadow:0 30px 100px rgba(0,0,0,.64),inset 0 0 0 1px rgba(255,255,255,.025); }
.exercise-shell::before { content:''; position:absolute; inset:0; opacity:.22; pointer-events:none; background-image:radial-gradient(circle at 12% 18%,#e8c66d 0 1px,transparent 1.5px),radial-gradient(circle at 72% 22%,#9fc5dc 0 1px,transparent 1.5px); background-size:231px 197px,317px 263px; }
.exercise-header { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:21px 25px 16px; border-bottom:1px solid rgba(133,158,184,.15); }.exercise-header p { margin:0 0 4px; color:#8fb9d0; font-size:9px; letter-spacing:.32em; }.exercise-header h1 { margin:0; color:#f5ead0; font:500 27px/1.2 var(--serif); }.exercise-header small { color:#bca968; font-size:11px; }.exercise-header button { width:44px; height:44px; border:1px solid rgba(232,198,109,.3); border-radius:50%; color:#e9dcc1; background:rgba(8,15,26,.75); font-size:25px; cursor:pointer; }
.exercise-setup,.exercise-quiz { position:relative; z-index:1; min-height:0; overflow:auto; padding:24px 28px max(28px,env(safe-area-inset-bottom)); }
.exercise-source-block > span,.exercise-types legend,.exercise-count > span { display:block; margin:0 0 9px; color:#8497ad; font-size:10px; letter-spacing:.12em; }.exercise-sources { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:23px; }.exercise-sources span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:7px 11px; color:#d9e4ee; border:1px solid rgba(133,169,199,.22); border-radius:15px; background:rgba(14,26,43,.76); font-size:11px; }
.exercise-types { margin:0 0 22px; padding:0; border:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }.exercise-types legend { grid-column:1/-1; }.exercise-types label { position:relative; cursor:pointer; }.exercise-types input { position:absolute; opacity:0; }.exercise-types label > span { min-height:70px; display:flex; flex-direction:column; justify-content:center; padding:11px 14px; color:#d5dfea; border:1px solid rgba(130,157,184,.18); border-radius:12px; background:rgba(10,20,34,.7); font-size:14px; }.exercise-types label small { margin-top:5px; color:#697f96; font-size:9px; }.exercise-types input:checked + span { color:#fff0bd; border-color:rgba(232,198,109,.58); background:linear-gradient(120deg,rgba(232,198,109,.12),rgba(42,65,92,.24)); box-shadow:inset 3px 0 #e8c66d; }
.exercise-count { width:180px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px; margin-bottom:18px; }.exercise-count > span { grid-column:1/-1; margin:0; }.exercise-count input { box-sizing:border-box; width:110px; min-height:44px; padding:0 12px; color:#f0e8d5; border:1px solid rgba(232,198,109,.3); border-radius:9px; background:#0b1727; font-size:16px; }.exercise-count small { color:#71839a; }
.exercise-status { min-height:20px; color:#e6c86f; font-size:12px; }.exercise-primary { min-height:46px; padding:0 24px; color:#09111e; border:0; border-radius:24px; background:linear-gradient(100deg,#d6b75d,#f1dc96); font-weight:700; letter-spacing:.08em; cursor:pointer; }.exercise-primary:disabled { opacity:.4; cursor:wait; }
.exercise-privacy { max-width:650px; margin:0 0 10px; color:#71869b; font-size:10px; line-height:1.55; }
.exercise-progress { display:grid; grid-template-columns:auto minmax(80px,1fr) auto; align-items:center; gap:13px; margin-bottom:22px; color:#8fa0b4; font-size:11px; }.exercise-progress i { height:3px; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.07); }.exercise-progress b { display:block; height:100%; background:linear-gradient(90deg,#7fa8bd,#e8c66d); transition:width .25s; }.exercise-progress button,.exercise-footer button { min-height:44px; padding:0 15px; color:#aebdcb; border:1px solid rgba(129,155,181,.2); border-radius:22px; background:rgba(11,21,35,.76); cursor:pointer; }.exercise-progress button:hover,.exercise-footer button:hover { color:#f5e6b6; border-color:rgba(232,198,109,.42); }
.exercise-generation-notice { margin:-8px 0 18px; padding:10px 14px; border-left:3px solid #e8c66d; border-radius:0 8px 8px 0; background:rgba(232,198,109,.08); color:#e9d291; font-size:13px; line-height:1.6; }
.exercise-question { max-width:720px; margin:0 auto; }.exercise-question-meta { display:flex; justify-content:space-between; gap:14px; align-items:center; }.exercise-question-meta span { padding:5px 10px; color:#e7cc7e; border:1px solid rgba(232,198,109,.3); border-radius:13px; font-size:10px; }.exercise-question-meta small { overflow:hidden; color:#6f8298; text-overflow:ellipsis; white-space:nowrap; }.exercise-question h2 { margin:22px 0 24px; color:#f1eee6; font:500 clamp(20px,3vw,29px)/1.55 var(--serif); white-space:pre-wrap; }
.exercise-answer-area { display:grid; gap:9px; margin-bottom:18px; }.exercise-option { cursor:pointer; }.exercise-option input { position:absolute; opacity:0; }.exercise-option span { min-height:48px; display:flex; align-items:center; gap:12px; padding:7px 14px; color:#cbd5df; border:1px solid rgba(130,157,184,.19); border-radius:11px; background:rgba(8,17,30,.66); }.exercise-option b { display:grid; place-items:center; width:28px; height:28px; flex:none; color:#829bb1; border:1px solid rgba(130,157,184,.25); border-radius:50%; }.exercise-option input:checked + span { color:#fff0c7; border-color:rgba(232,198,109,.6); background:rgba(232,198,109,.09); }.exercise-option input:checked + span b { color:#07111e; border-color:#e8c66d; background:#e8c66d; }
.exercise-answer-area textarea { box-sizing:border-box; width:100%; min-height:92px; resize:vertical; padding:15px 17px; color:#edf2f6; border:1px solid rgba(139,177,207,.3); border-radius:12px; outline:none; background:rgba(5,12,22,.72); font:16px/1.7 inherit; user-select:text!important; }.exercise-answer-area textarea:focus { border-color:rgba(232,198,109,.58); }
.exercise-feedback { margin-top:18px; padding:17px 19px; border:1px solid rgba(132,159,184,.17); border-radius:12px; background:rgba(15,26,41,.8); line-height:1.7; }.exercise-feedback strong { display:block; margin-bottom:7px; }.exercise-feedback strong.correct { color:#82d3a4; }.exercise-feedback strong.incorrect { color:#ef9b92; }.exercise-feedback p { margin:0;color:#c6d1dc; }.exercise-feedback div { margin-top:10px; padding-top:10px; color:#edf0e8; border-top:1px solid rgba(255,255,255,.07); }.exercise-feedback div span { margin-right:10px; color:#dabb67; font-size:10px; }.exercise-footer { max-width:720px; margin:19px auto 0; display:flex; justify-content:space-between; gap:12px; }.exercise-footer button:disabled { opacity:.28; cursor:not-allowed; }.exercise-complete { padding:24px; color:#9fb0c2; border:1px solid rgba(133,159,184,.16); border-radius:12px; text-align:center; }.auth-locked .exercise-modal { display:none!important; }
@media (max-width:900px) { .list-view { grid-template-columns:220px minmax(0,1fr); }.column-resizer,.toc-panel { display:none; } }
@media (max-width:900px) { .toc-panel { display:block; position:absolute; right:14px; bottom:max(14px,env(safe-area-inset-bottom)); z-index:9; width:126px; height:auto; overflow:visible; border:0; background:transparent; }.toc-panel > .panel-title,.toc-panel nav,.exercise-launcher small,.exercise-launcher strong,.exercise-launcher p { display:none; }.exercise-launcher { margin:0; padding:0; border:0; background:none; box-shadow:none; }.exercise-launcher button { background:#101b2b; box-shadow:0 8px 24px #0008; } }
.markdown-body .exam-backlinks { margin-top:32px; padding:14px 18px; border:1px solid rgba(232,198,109,.25); border-radius:12px; background:rgba(232,198,109,.04); }
.markdown-body .exam-backlinks summary { min-height:44px; display:flex; align-items:center; color:#e8c66d; cursor:pointer; font-size:15px; }
.markdown-body .exam-backlinks summary::before { content:'◇'; margin-right:10px; }
.markdown-body .exam-backlinks[open] ul { max-height:min(50vh,420px); overflow-y:auto; padding-right:12px; }
.markdown-body .exam-backlinks p { font-size:13px; color:#8fa1b6; }
.markdown-body u { text-underline-offset:.2em; text-decoration-thickness:1px; }
.markdown-body { container-type:inline-size; }
.exam-question-group { display:grid; grid-template-columns:minmax(0,1fr) 165px; gap:18px; align-items:start; margin:20px 0; }
.exam-question-content { min-width:0; }
.exam-question-content > :first-child { margin-top:0; }
.exam-question-content > :last-child { margin-bottom:0; }
.exam-question-notes { padding:10px 12px; border-left:1px solid rgba(232,198,109,.45); background:rgba(232,198,109,.045); border-radius:0 8px 8px 0; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.exam-question-notes > span { display:block; margin-bottom:6px; color:#e8c66d; font-size:11px; letter-spacing:.06em; }
.exam-question-notes a { display:block; padding:6px 0; color:#b9cfe1; border:0; }
@container (max-width:560px) { .exam-question-group { grid-template-columns:minmax(0,1fr); gap:10px; }.exam-question-notes { padding:8px 12px; }.exam-question-notes a { display:inline-block; min-height:36px; padding:7px 0; } }
.markdown-body .exam-backlinks { margin-top:32px; padding:14px 18px; border:1px solid rgba(232,198,109,.25); border-radius:12px; background:rgba(232,198,109,.04); }
.markdown-body .exam-backlinks summary { min-height:44px; display:flex; align-items:center; color:#e8c66d; cursor:pointer; font-size:15px; }
.markdown-body .exam-backlinks summary::before { content:'◇'; margin-right:10px; }
.markdown-body .exam-backlinks[open] ul { max-height:min(50vh,420px); overflow-y:auto; padding-right:12px; }
.markdown-body .exam-backlinks p { font-size:13px; color:#8fa1b6; }
.markdown-body u { text-underline-offset:.2em; text-decoration-thickness:1px; }
@media (max-width:600px) { .list-view { grid-template-columns:minmax(0,1fr); }.reader-shell { min-width:0; width:100%; } }
@media (max-width:620px) { .exercise-modal { padding:6px; }.exercise-shell { height:calc(100vh - 12px); border-radius:16px; }.exercise-header { padding:15px 16px 12px; }.exercise-header h1 { font-size:22px; }.exercise-header p,.exercise-header small { display:none; }.exercise-header button { width:40px; height:40px; }.exercise-setup,.exercise-quiz { padding:17px 15px max(18px,env(safe-area-inset-bottom)); }.exercise-types { grid-template-columns:repeat(2,minmax(0,1fr)); }.exercise-types label > span { min-height:58px; }.exercise-progress { gap:8px; }.exercise-question h2 { margin:17px 0 18px; font-size:20px; }.exercise-footer { position:sticky; bottom:0; padding:10px 0 max(4px,env(safe-area-inset-bottom)); background:linear-gradient(transparent,#091321 30%); } }

/* Three-dimensional galaxy surface; labels remain native accessible buttons. */
#galaxyCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline:none}
#galaxyCanvas:focus-visible{outline:1px solid #91d6ff;outline-offset:-3px}
.galaxy-3d #spaceCanvas{visibility:hidden;pointer-events:none}
.galaxy-3d.exploring .hero-copy{opacity:0}
.galaxy-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;touch-action:none}
.galaxy-label{position:absolute;left:0;top:0;pointer-events:auto;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:5px;padding:4px 7px;background:rgba(5,10,20,.65);color:#aec6e0;font-size:11px;text-align:left;cursor:pointer;text-shadow:0 1px 5px #000}
.galaxy-label.level-1{color:#d1edff;font-size:12px;font-weight:600}
.galaxy-label:hover,.galaxy-label:focus-visible{background:#1c2b43;color:#fff;outline:1px solid #d5b970}
.galaxy-label[hidden]{display:none}
.galaxy-guide{position:absolute;left:24px;bottom:85px;pointer-events:none;display:flex;flex-direction:column;gap:6px;color:#8298b6}
.galaxy-guide span{font-size:10px;letter-spacing:.2em;color:#d2b775}
.galaxy-guide small{font-size:10px}
.canvas-tools #galaxyMotion{width:auto;padding:0 12px;font-size:11px;color:#d8c38e}
@media(max-width:720px){.galaxy-guide{left:14px;bottom:104px}.galaxy-guide small{font-size:9px}.galaxy-label{max-width:142px;font-size:10px}.galaxy-label.level-1{font-size:11px}.canvas-tools #galaxyMotion{padding:0 8px;font-size:10px}}

.galaxy-notice{position:absolute;top:18px;left:18px;right:18px;max-width:570px;z-index:22;display:flex;align-items:center;gap:14px;padding:16px;background:#202135;border:1px solid #d2b775;border-radius:10px;font-size:13px}.galaxy-notice button{flex:none;min-height:40px;padding:0 12px;background:#d2b775;color:#141722;border:0;border-radius:6px;cursor:pointer}@media(max-width:600px){.galaxy-notice{flex-direction:column;align-items:flex-start}}

/* Match the legend and scene chrome to the luminous cool palette. */
.galaxy-guide span{color:#9bcee8}
.legend-panel .legend-star{background:#c7efff;box-shadow:0 0 14px #80d8ff}

.difficulty-scale{position:absolute;right:24px;top:92px;display:flex;gap:15px;padding:5px 10px;font-size:10px;pointer-events:none;color:#80cfff}.difficulty-scale span:nth-child(2){color:#79ded0}.difficulty-scale span:nth-child(3){color:#f0cd8b}.difficulty-scale span:nth-child(4){color:#f3a18c}.difficulty-scale span:before{content:"";display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
#galaxyEntry{position:fixed;inset:0;z-index:10000;background:#040a13;pointer-events:auto}#galaxyEntry canvas{display:block;width:100%;height:100%}@media(max-width:720px){.difficulty-scale{top:10px;right:14px;font-size:9px;gap:10px}}

.galaxy-arriving .topbar,.galaxy-arriving .hero-copy,.galaxy-arriving .legend-panel,.galaxy-arriving .difficulty-scale,.galaxy-arriving .galaxy-guide,.galaxy-arriving .stats,.galaxy-arriving .canvas-tools,.galaxy-arriving #nebulaControlsToggle,.galaxy-arriving .galaxy-labels{opacity:var(--arrival,0);pointer-events:none}
#galaxyBackdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}

/* Unified site typography; preserve component sizes, weights and colors. */
*,*::before,*::after{font-family:var(--sans) !important}

.flashcard-core{position:absolute;left:50%;top:50%;width:76%;transform:translate(-50%,-50%);text-align:center}.flashcard-core .flashcard-main{display:block;margin:0 auto}.flashcard-support{position:absolute;top:100%;left:0;width:100%;display:flex;flex-direction:column;align-items:center;padding-top:8px}

.flashcard-core{width:84%}.flashcard-core .flashcard-main{max-width:6.2em;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}

/* Preview vocabulary readability and lesson cards. */
.subpage-head small{font-size:14px;line-height:1.5}
.subpage-head p{font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.markdown-body .preview-vocabulary-table{table-layout:auto;width:100%}
.markdown-body .preview-vocabulary-table th:nth-child(-n+3),.markdown-body .preview-vocabulary-table td:nth-child(-n+3){white-space:nowrap;word-break:normal;overflow-wrap:normal;width:1%;min-width:4em}
.flashcard-meaning{display:block;font-size:clamp(16px,2vw,22px);line-height:1.55;letter-spacing:normal;color:#f3efe4;max-height:8em;overflow:auto;white-space:normal;overflow-wrap:anywhere;padding:4px 8px}
.flashcard-meaning:empty{display:none}
.flashcard.is-preview-card .flashcard-core{top:43%}
.flashcard.is-japanese-first .flashcard-back .flashcard-core{top:43%}
.flashcard.is-japanese-first .flashcard-back .flashcard-main{font-size:clamp(25px,3.1vw,38px)}
.flashcard.is-japanese-first .flashcard-back .flashcard-reading{font-size:clamp(14px,1.6vw,19px);letter-spacing:.05em}
.flashcard.is-japanese-first .flashcard-back .flashcard-meaning{max-height:5.2em;font-size:clamp(14px,1.7vw,19px)}

.flashcard-progress-row{display:flex;align-items:center;gap:16px}.flashcard-progress-row .flashcard-progress{flex:1}.flashcard-progress-row button{background:transparent;border:1px solid #bba36666;color:#dfc47e;border-radius:8px;padding:6px 12px;white-space:nowrap}.flashcard-directory{max-height:240px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;padding:12px;background:#0b1422}.flash-directory-word{text-align:left;padding:10px;color:#aab5c6;border:1px solid #ffffff18;border-radius:6px;background:#ffffff04;font:inherit}#flashcardDirectory .flash-directory-word[data-grade=unseen]{color:#ffffff}#flashcardDirectory .flash-directory-word[data-grade=again]{color:#ff7878}#flashcardDirectory .flash-directory-word[data-grade=hard]{color:#f5d365}#flashcardDirectory .flash-directory-word[data-grade=good]{color:#80d99b}.flash-directory-word[aria-current=true]{border-color:#e5c778}

.flashcard-shell{grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto}.flashcard-progress-row{position:relative}.flashcard-directory{position:absolute;top:100%;left:0;right:0;z-index:8;box-shadow:0 15px 35px #0009;border:1px solid #c2a36655;border-radius:8px}

/* Discrete display transitions preserve the existing modal lifecycle and focus handling. */
dialog,[role="dialog"]:not(#loginOverlay),#aiPanel,.ai-note-overlay{
 transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1),display .26s allow-discrete,overlay .26s allow-discrete;
 transition-behavior:allow-discrete;opacity:1;transform:translateY(0) scale(1)
}
dialog:not([open]),[role="dialog"].hidden,#aiPanel[hidden],.ai-note-overlay.is-closing{
 opacity:0;transform:translateY(10px) scale(.985);pointer-events:none
}
dialog::backdrop{transition:background-color .22s,display .26s allow-discrete,overlay .26s allow-discrete}
@starting-style{
 dialog[open],[role="dialog"]:not(.hidden):not(#loginOverlay),#aiPanel:not([hidden]),.ai-note-overlay{opacity:0;transform:translateY(10px) scale(.985)}
 dialog[open]::backdrop{background-color:transparent}
}
@media(prefers-reduced-motion:reduce){dialog,[role="dialog"],#aiPanel,.ai-note-overlay{transition-duration:.01ms!important}}

/* Responsive window contract: use the visible viewport, with scrollable content. */
:is(.modal-card,.subpage-card,.exercise-shell,.tool-shell,.writing-assistant-shell,.flashcard-shell){box-sizing:border-box;min-width:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain}
:is(.modal-card,.subpage-card,.exercise-shell){overflow:auto;overflow-wrap:anywhere}
:is(.exercise-header,.tool-header,.writing-assistant-header,.subpage-head,.reader-head){min-width:0;gap:12px}
:is(.exercise-header,.tool-header,.writing-assistant-header,.subpage-head,.reader-head)>div{min-width:0}
:is(.exercise-header,.tool-header,.writing-assistant-header,.subpage-head)>button{flex-shrink:0;min-width:40px;min-height:40px}
#flashcardModal .flashcard-shell{width:min(1280px,calc(100% - 24px));height:calc(100dvh - 24px);max-height:none;margin:12px auto;grid-template-rows:auto auto auto minmax(180px,1fr) auto;overflow:auto;gap:6px}
#flashcardModal #flashcardScope{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#flashcardModal #flashcardMastery{display:none}
#flashcardModal .flashcard-toolbar{margin:2px 0;align-items:center}
#flashcardModal #flashcardCounter{font-size:12px;color:#a8bfd6;white-space:nowrap;font-variant-numeric:tabular-nums}
#flashcardModal .flashcard-progress-row{flex-wrap:wrap;gap:8px;min-height:36px}
#flashcardModal .flashcard-directory{flex:1 0 100%;max-height:180px}
#flashcardModal .flashcard-stage{height:100%;min-height:180px;container-type:size;grid-template-columns:44px minmax(0,1fr) 44px}
#flashcardModal .flashcard{width:min(100%,960px,75cqh);height:auto;max-height:100%;aspect-ratio:3/4;container-type:inline-size}
#flashcardModal .flashcard-main{font-size:clamp(18px,10cqw,72px);line-height:1.4}
#flashcardModal .flashcard-kicker{font-size:clamp(10px,4cqw,18px)}
#flashcardModal .flashcard-toolbar label{min-width:0}#flashcardModal .flashcard-toolbar select{max-width:100%}
#flashcardModal .flashcard-status{gap:8px;flex-wrap:wrap}
#flashcardModal .flashcard-actions button{min-height:44px}
#toolModal .tool-shell,#writingAssistantModal .writing-assistant-shell{height:calc(100dvh - 24px);margin:auto}
#writingAssistantFrame{min-width:0;min-height:0;width:100%;height:100%}
#studyPlanDialog,#registration,#dailyFortune,.ai-note-overlay .ai-note-dialog{box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain}
:is([role=dialog],dialog) :is(input,select,textarea){box-sizing:border-box;max-width:100%;min-width:0}
:is(.markdown-body,.ai-answer){overflow-wrap:anywhere;min-width:0}
.markdown-body :is(table,pre){max-width:100%;overflow:auto}
@media(max-width:760px){
 :is(.modal-card,.subpage-card,.exercise-shell,.tool-shell,.writing-assistant-shell){width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);margin:8px auto;border-radius:14px}
 .modal-card,.subpage-card{inset:8px auto auto 50%;padding:20px 16px}
 #flashcardModal .flashcard-shell{width:calc(100vw - 12px);max-width:none;height:calc(100dvh - 12px);max-height:none;margin:6px auto;padding:12px;gap:4px}
 #flashcardModal .flashcard-settings-toggle{position:absolute;top:10px;right:60px;z-index:21;display:block;min-width:66px;min-height:36px;margin:0;border:1px solid rgba(217,183,94,.38);border-radius:9px;color:#e5cc82;background:#111c2c;font-size:13px}
 #flashcardModal .flashcard-toolbar{display:none;position:absolute;z-index:20;top:112px;left:10px;right:10px;max-height:min(62dvh,520px);overflow:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:12px;border:1px solid rgba(217,183,94,.42);border-radius:12px;background:#081321f7;box-shadow:0 18px 55px #000c}
 #flashcardModal .flashcard-shell.settings-open .flashcard-toolbar{display:grid}
 #flashcardModal .flashcard-toolbar label:first-child{grid-column:1/-1}
 #flashcardModal .flashcard-toolbar :is(button,select){width:100%;min-height:40px;padding:0 6px;font-size:12px}
 #flashcardModal .flashcard-motion-toggle{padding:0 6px;font-size:11px;min-height:40px}
 #flashcardModal .flashcard-header h1{font-size:19px;max-width:calc(100vw - 166px)}
 #flashcardModal .flashcard-shell{grid-template-rows:auto auto minmax(180px,1fr) auto}
 #flashcardModal .flashcard-toolbar{top:54px}
 #flashcardModal .flashcard-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:0}
 #flashcardModal .flashcard{width:min(calc(100% - 24px),75cqh)}
 #flashcardModal .flashcard-nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%)}
 #flashcardModal .flashcard-nav-prev{left:0}#flashcardModal .flashcard-nav-next{right:0}
 #flashcardModal .flashcard-core{width:84%;max-width:84%;overflow:visible}
 #flashcardModal .flashcard.is-japanese-first .flashcard-back .flashcard-core{top:52%}
 #flashcardModal .flashcard-main{width:100%;max-width:100%;font-size:clamp(16px,8cqw,32px);line-height:1.28;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
 #flashcardModal .flashcard[data-card-type="example"] .flashcard-main{font-size:clamp(14px,5.8cqw,23px)}
 #flashcardModal .flashcard-kicker{left:9%;right:9%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #flashcardModal .flashcard-face>small{max-width:82%;overflow-wrap:anywhere}
 #flashcardModal .flashcard-nav{width:32px;min-height:44px}
 #flashcardModal .flashcard-actions{gap:6px}#flashcardModal .flashcard-actions button{padding:8px 4px;font-size:14px}
 .exercise-types,.exercise-settings,.tool-workspace,.tool-grid{grid-template-columns:minmax(0,1fr)}
 .tool-tabs{overflow-x:auto;flex-wrap:nowrap;max-width:100%}.tool-tabs>*{flex-shrink:0}
 #studyPlanDialog{padding:18px 14px}#studyPlanDialog .plan-sequence-row{min-width:0}
 #aiPanel{max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
 #dailyFortune .derivation-content{grid-template-columns:minmax(0,1fr);padding:14px;gap:16px}
 :is([role=dialog],dialog) :is(input,textarea){font-size:16px}
}
@media(max-height:600px){
 #flashcardModal .flashcard-shell{grid-template-rows:auto auto auto minmax(170px,1fr) auto;overflow:auto}
 #flashcardModal .flashcard-header p,#flashcardModal .flashcard-shortcuts{display:none}
 #flashcardModal .flashcard-header h1{font-size:18px}
 #registration .registration-art{display:none}#registration[open]{grid-template-columns:minmax(0,1fr)}
}

/* Modal viewport excludes no implicit header offset. */
#flashcardModal,#exerciseModal,#mistakeModal,#toolModal,#writingAssistantModal,#noteModal,#subpageModal{position:fixed;inset:0;z-index:100;max-height:100dvh}
@media(max-width:760px){#noteModal .modal-card,#subpageModal .subpage-card{inset:8px;transform:none;width:auto;margin:0;max-height:calc(100dvh - 16px)}}

.ai-note-overlay .ai-note-dialog{min-width:0;overflow:hidden}.ai-note-overlay .ai-note-dialog header{min-width:0;gap:12px}.ai-note-overlay .ai-note-dialog h1{min-width:0;overflow-wrap:anywhere}.ai-note-overlay .ai-note-close{flex-shrink:0;min-width:44px;min-height:44px}

/* Above every reading surface, including the AI source modal; no pointer interception. */
.security-watermark{z-index:100000;opacity:.075}
#accessNotice{position:fixed;z-index:100001;bottom:20px;left:50%;transform:translateX(-50%);width:min(540px,calc(100vw - 32px));padding:14px 18px;border:1px solid #bda569;border-radius:12px;background:#132131;color:#f2d88d;font-size:14px;box-shadow:0 8px 30px #0008}
#accessNotice[hidden]{display:none}

.preview-flashcard-entry{flex-wrap:wrap}.preview-deck-actions{display:flex;flex-wrap:wrap;gap:10px}.preview-deck-actions button{min-height:44px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.preview-deck-actions{width:100%}.preview-deck-actions button{width:100%}}
.preview-deck-actions button{border:1px solid #c4a66366;border-radius:10px;background:linear-gradient(135deg,#233144,#101a29);color:#eed493;padding:12px 18px;font:inherit;font-size:14px;cursor:pointer}.preview-deck-actions button:hover{border-color:#e6c678;background:#29384b}.preview-deck-actions button:focus-visible{outline:2px solid #edce80;outline-offset:3px}
/* Option order is always A B C D; measured text selects 4, 2 or 1 columns. */
.adaptive-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 16px; }
.adaptive-options .option-copy { display:block; min-width:0; flex:1; font-style:normal; overflow-wrap:anywhere; }
.adaptive-options > * { min-width:0; }
.mistake-options.adaptive-options { padding-left:0; list-style:none; }
.mistake-options.adaptive-options li { display:flex; align-items:baseline; gap:6px; min-width:0; }
.mistake-options.adaptive-options li > b { flex:none; font-weight:500; }
.exercise-option:focus-within > span { outline:2px solid #e8c66d; outline-offset:2px; }
.sentence-play { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin:8px 0 8px 12px; padding:7px 12px; min-height:40px; font:500 14px/1.4 sans-serif; color:#ead18c; border:1px solid #746444; border-radius:20px; background:#101b2a; cursor:pointer; }
#magicCards{box-sizing:border-box;position:fixed;inset:0;margin:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:1px solid #746340;background:radial-gradient(ellipse at 50% 40%,#1b2a38,#07111c 75%);color:#e9d9ae;overflow:hidden}
#magicCards[open]{display:flex;flex-direction:column}#magicCards::backdrop{background:#040911e8}
#magicCards header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;flex:none;gap:15px}#magicCards h2{font:600 28px/1.4 "SimSun",serif;margin:0}#magicCards header p{font-size:13px;color:#9caec0;margin:6px 0 0}#magicCards button{color:#ead18c;border:1px solid #77653f;background:#0d1825;border-radius:24px;padding:9px 16px;cursor:pointer}#magicCards [data-close]{font-size:26px;line-height:1;width:44px;height:44px;padding:4px;flex:none}
.magic-viewport{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#82704a #0b1520}.magic-track{position:relative;min-height:100%;isolation:isolate}.magic-slot{position:absolute;display:flex;align-items:center;justify-content:center;perspective:1000px}
#magicCards .magic-card{width:var(--magic-card-width);height:100%;flex-shrink:0;position:relative;transform-style:preserve-3d;padding:0;border:0;border-radius:16px;background:transparent;color:#f5f0df}
.magic-face{position:absolute;inset:0;box-sizing:border-box;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:18% 12%;border-radius:16px;background:#030b12 url('assets/celestial-flashcard-frame.png') center/100% 100% no-repeat;box-shadow:0 12px 30px #0005;overflow:auto;overflow-wrap:anywhere;scrollbar-width:thin}.magic-back{transform:rotateY(180deg)}.magic-face strong{font-size:clamp(24px,3vw,44px);line-height:1.5;white-space:pre-wrap}.magic-face strong.magic-medium{font-size:24px}.magic-face strong.magic-long{font-size:16px}.magic-face small{color:#d4b454;font-size:12px;line-height:1.5}.magic-extra{font-size:16px;line-height:1.5;color:#d6dfeb}
#magicCards footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;padding:14px 24px max(14px,env(safe-area-inset-bottom));background:#09121ded;flex:none}#magicCards footer label{display:flex;align-items:center;gap:12px;font-size:13px;flex-wrap:wrap}#magicCards input[type=range]{width:clamp(140px,25vw,340px);accent-color:#e8c66d;min-height:36px}#magicCards output{min-width:100px;font-variant-numeric:tabular-nums}#magicCards [data-position]{font-size:13px;color:#a6b9cc}.magic-empty{text-align:center;padding:60px 25px;line-height:2}
@media(max-width:600px){#magicCards header{padding:12px 16px}#magicCards h2{font-size:23px}#magicCards footer{padding:9px 12px max(9px,env(safe-area-inset-bottom));gap:6px 12px}#magicCards footer label{order:2;justify-content:center;width:100%;gap:8px}#magicCards input[type=range]{flex:1;min-width:100px;width:120px}#magicCards output{min-width:90px}.magic-face{gap:12px}.magic-face strong{font-size:32px}.magic-face strong.magic-medium{font-size:22px}.magic-face strong.magic-long{font-size:15px}}

.magic-face{justify-content:safe center}

/* Login methods */
.login-action-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(104px,.85fr);gap:8px;margin:0 0 16px}.login-action-row .login-mode-tabs{margin:0}.login-mode-tabs{display:flex;gap:8px;margin:0 0 16px}.login-mode-tabs button{flex:1;padding:10px 8px;min-height:42px;border:1px solid #526073;border-radius:10px;color:#bcc9d8;background:#101a29;font:inherit;cursor:pointer}.login-mode-tabs [aria-pressed=true]{color:#f1d17c;border-color:#b5984d;background:#24272b}.login-register-now{min-height:42px;padding:10px 8px!important;border:1px solid #b5984d!important;border-radius:10px!important;color:#f1d17c!important;background:#171e2a!important;font:inherit!important;font-weight:500!important;letter-spacing:.03em!important;white-space:nowrap}.login-register-now:hover{background:#29271f!important}.login-code-row{display:flex;align-items:stretch;gap:8px}.login-code-row input{flex:1;min-width:0}.login-code-row button{flex:none;max-width:45%;padding:8px 10px;border-radius:10px;border:1px solid #85724a;background:#192536;color:#f1d17c;cursor:pointer}.login-sms-fields label{display:block;margin-bottom:14px}.login-sms-fields input{box-sizing:border-box;width:100%}.login-sms-fields[hidden],#loginForm label[hidden],#login label[hidden]{display:none!important}#loginForm .login-mode-tabs button{letter-spacing:normal}#loginOverlay{overflow:auto}.login-card{margin-block:auto}@media(max-width:390px){.login-action-row{grid-template-columns:minmax(0,1fr) 92px;gap:6px}.login-mode-tabs{gap:6px}.login-mode-tabs button,.login-register-now{padding-inline:5px!important;font-size:12px!important}}

.learning-home{position:absolute;left:24px;bottom:24px;z-index:3;width:min(660px,calc(100% - 48px));background:#0b1525e8;border:1px solid #c4a76244;border-radius:16px;padding:16px;backdrop-filter:blur(8px)}.learning-home[hidden]{display:none}.learning-home h2{font-size:17px;color:#e5cc89;margin:0 0 12px}.learning-home>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.learning-home button{text-align:left;min-width:0;min-height:66px;border:1px solid #899bae33;border-radius:10px;background:#132033;color:#e5eaf0;padding:10px}.learning-home small,.learning-home strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.learning-home small{font-size:11px;color:#a6b6c8;margin-bottom:8px}.learning-home strong{font-size:14px}.learning-home button:disabled{opacity:.6}.question-report{margin-top:20px;border-top:1px solid #9c8a5544;padding-top:12px}.question-report button{margin:4px;min-height:42px}.question-report form{display:grid;gap:12px}.question-report label{display:grid;gap:8px}.question-report textarea,.question-report select{max-width:100%;width:100%;padding:12px;background:#111e30;color:#e7edf6;border:1px solid #8194ab55;border-radius:8px;font-size:16px}.question-report p{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:600px){.learning-home{left:12px;bottom:12px;width:calc(100% - 24px);padding:12px}.learning-home>div{gap:6px}.learning-home button{padding:8px}.learning-home strong{font-size:12px}}

.learning-home{bottom:auto}@media(max-width:600px){.learning-home{bottom:auto}}

/* Daily tasks belong to the study plan, without a separate home panel. */
#studyPlanDialog .learning-home{position:static;width:100%;padding:0;margin:0 0 24px;border:0;border-radius:0;background:none;backdrop-filter:none}
#studyPlanDialog .learning-home>div{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:520px){#studyPlanDialog .learning-home>div{grid-template-columns:1fr}#studyPlanDialog .learning-home button{min-height:60px}}

/* Scale the selected artwork proportionally within the home identity group. */
#nebulaView .hero-copy{width:min(40vw,1000px)}
#nebulaView .hero-copy .home-slogan{width:100%;margin:15px 0;line-height:0;mix-blend-mode:screen;text-shadow:none}
#nebulaView .hero-copy .home-slogan .slogan-art{position:static;display:block;width:100%;height:auto;max-width:100%;object-fit:contain;mix-blend-mode:screen;transform:translateX(-6.2%)}
#nebulaView .hero-copy > p.creator-credit{margin:20px 0 0}
@media(max-width:900px){#nebulaView .hero-copy{width:min(70vw,600px)}}
@media(max-width:600px){#nebulaView .hero-copy{width:90vw}}

/* Home slogan size, preserved across landing stylesheet builds. */
#nebulaView .hero-copy .home-slogan{width:min(130%,86vw)}
@media(max-width:600px){#nebulaView .hero-copy .home-slogan{width:100%}}

/* Approved iPad artwork 20260919 */
#nebulaView .hero-copy .home-slogan,#nebulaView .hero-copy .home-slogan .slogan-art,#landingTitle{mix-blend-mode:normal}
.flashcard-face{background-image:url("assets/card-frame-without-emblems.svg");isolation:isolate}
.flashcard-face::before,.flashcard-face::after{content:"";position:absolute;left:50%;transform:translateX(-50%);aspect-ratio:1;height:auto;background:center/contain no-repeat;pointer-events:none;z-index:-1}
.flashcard-face::before{top:9%;width:19%;background-image:url("assets/card-constellation.svg")}
.flashcard-face::after{bottom:12%;width:26%;background-image:url("assets/card-orbit.svg")}

/* More room for reading while keeping the desktop navigation on one line. */
:root{--header:38px}
.topbar{gap:clamp(5px,.55vw,10px);padding-inline:clamp(8px,1vw,18px)}
.topbar .brand{gap:7px;min-width:0}.topbar .brand-mark{width:32px;height:32px;flex:0 0 32px}.topbar .brand strong{font-size:13px}.topbar .brand small{font-size:8px;margin-top:0}
.topbar>.search-tools{gap:clamp(3px,.35vw,7px)}.topbar>.search-tools>.search-wrap{flex-basis:150px}.topbar .search-wrap input{height:34px;padding-left:33px;font-size:12px}.topbar .search-icon{left:11px;top:5px;font-size:19px}.topbar #searchScope{top:3px;height:28px;font-size:10px}
.topbar>.search-tools>button{height:34px;padding-inline:clamp(4px,.45vw,8px);gap:4px;white-space:nowrap}.topbar>.search-tools>button>span:not(.tools-orbit){white-space:nowrap}.topbar>.search-tools>button .tools-orbit{width:18px;height:18px;flex:0 0 18px}.topbar>.search-tools>button b{min-width:16px;height:16px;padding-inline:3px;font-size:8px}
.topbar>.mode-switch{padding:2px}.topbar>.mode-switch button{padding:6px clamp(5px,.5vw,10px);white-space:nowrap}
.reader-shell{grid-template-rows:38px minmax(0,1fr)}.reader-tabbar{gap:5px;padding:3px 8px}.reader-history-buttons button{width:28px;height:28px}.reader-tabs{height:30px;gap:4px}.reader-tab{min-width:90px;max-width:200px;grid-template-columns:minmax(0,1fr) 26px}.reader-tab-open{padding-left:9px;font-size:12px}.reader-tab-close{width:26px;font-size:15px}.reader-tab-divider{font-size:12px}.reader-pane{padding-top:24px}.reader-tabbar #readerTabStatus{max-width:150px}
@media(max-width:700px){.topbar{grid-template-rows:48px 38px;gap:4px 8px;padding:env(safe-area-inset-top) 10px 0}.reader-shell{grid-template-rows:36px minmax(0,1fr)}.reader-tabbar{padding:2px 6px}.reader-history-buttons button{width:27px;height:27px}.reader-tabs{height:28px}.reader-tab{min-width:90px;max-width:150px}.reader-pane{padding-top:20px}}

/* Bundled login landing styles: generated by build-landing-css.cjs */

#loginOverlay{position:fixed;inset:0;min-height:100dvh;background:#0b0912;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;isolation:isolate;overflow:auto}
#loginOverlay.hidden{display:none}#loginGalaxy{position:absolute;inset:0;z-index:-2;overflow:hidden;background:radial-gradient(ellipse at 65% 40%,#18212455,transparent 65%),#0b0912}#loginGalaxy canvas{width:100%;height:100%;display:block}
#loginOverlay:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at center,#0b091230,transparent 65%),linear-gradient(0deg,#08081088,transparent 28%)}
.landing-brand{position:absolute;left:5vw;top:6vh;display:flex;gap:12px;align-items:center;font-size:28px;color:#f6eee0}.landing-brand span{font-size:18px;letter-spacing:.2em}
.landing-slogan{margin:0;text-align:center;color:#f8f4ec;font:500 clamp(32px,4.5vw,70px)/1.55 var(--serif,serif);letter-spacing:.08em;text-shadow:0 3px 32px #07090f;max-width:100%}.landing-slogan span{color:#eee7cf}
.landing-actions{position:relative;margin-top:32px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:100%;text-align:center}.landing-actions button,#previewBar button{border:1px solid #ffffff38;border-radius:12px;background:#f3eee4;color:#15131c;padding:17px 24px;font:500 16px var(--sans,sans-serif);cursor:pointer;min-height:52px}.landing-actions button span{margin-left:32px}.landing-actions #landingPreview{color:#f2ebdf;background:#24212b99;backdrop-filter:blur(12px)}.landing-actions button:hover{transform:translateY(-2px);border-color:#e6d3a0}.landing-actions button{transition:transform .2s ease-out}.landing-actions p:empty{display:none}.landing-actions p{flex-basis:100%;margin:0;color:#edbeaf;font-size:14px}
#loginOverlay .login-card{position:relative;max-width:440px;width:100%;background:#101420f2;border:1px solid #d9cfad40;border-radius:22px;box-shadow:0 24px 90px #0008;margin:40px auto;padding:28px}#loginOverlay .login-card[hidden]{display:none}#loginOverlay.form-open .landing-slogan,#loginOverlay.form-open .landing-actions{display:none}#loginOverlay.form-open .landing-brand{display:none}
#loginBack{border:0;background:none;color:#c8beab;padding:8px 0;display:block;margin-bottom:18px;cursor:pointer;font:inherit}#loginOverlay .login-emblem,#loginOverlay .login-eyebrow,#loginOverlay .login-notice{display:none}
#previewBar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:24px;border:1px solid #dec99560;border-radius:16px;background:#101521ed;padding:12px 18px;color:#dfd5bb;max-width:calc(100% - 24px);width:max-content;font-size:14px}#previewBar[hidden]{display:none}#previewBar button{white-space:nowrap;padding:10px 16px;min-height:44px}.preview-mode #aiOrb,.preview-mode #studyPlanWidget,.preview-mode .security-watermark{display:none!important}
#registration .agreement-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.7;margin:20px 0}#registration .agreement-check input{appearance:auto;width:18px;height:18px;min-width:18px;margin:3px 0 0;accent-color:#dcca8d}#registration .agreement-check a{color:#ecd699;text-decoration:underline;text-underline-offset:3px}
.agreement-page{margin:0;background:#0c1320;color:#dddccc;font:16px/1.9 system-ui,sans-serif}.agreement-page main{max-width:780px;margin:auto;padding:48px 24px 80px}.agreement-page h1,.agreement-page h2{color:#eddaa1;line-height:1.5}.agreement-page h2{font-size:20px;margin-top:32px}.agreement-page a{color:#ddce9f}
@media(max-width:600px){#loginOverlay{padding:20px}.landing-slogan{font-size:clamp(25px,6vw,36px);line-height:1.8;letter-spacing:.04em}.landing-brand{top:32px;left:24px}.landing-actions{margin-top:26px;gap:10px}.landing-actions button{padding:15px 18px}.landing-actions button span{margin-left:12px}#previewBar{gap:10px;padding:10px;font-size:12px}#loginOverlay .login-card{padding:24px 18px;margin:8px auto}}
@media(prefers-reduced-motion:reduce){.landing-actions button{transition:none;transform:none!important}}

.slogan-art{display:block;width:100%;height:auto;object-fit:contain}#landingTitle{width:min(960px,88vw);line-height:0;mix-blend-mode:screen;text-shadow:none}@media(max-width:600px){#landingTitle{width:100%}}

/* Entry keeps the landing star field alive while the prepared app fades in. */
#loginFlight{position:fixed;inset:0;z-index:20000;background:#0b0912;isolation:isolate;pointer-events:auto;overflow:hidden}
#loginFlight #loginGalaxy{z-index:0}
.login-travelling #app,.login-travelling #previewBar{opacity:var(--login-reveal,0);pointer-events:none!important}
.login-travelling #app{transform:scale(calc(.985 + var(--login-reveal,0)*.015));transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.login-travelling #app{transform:none}}

.preview-mode .tree-select,.preview-mode .learn-star,.preview-mode #openConstellationNote{display:none!important}
.preview-mode #app button:disabled,.preview-mode #searchInput:disabled{opacity:.5;cursor:not-allowed}

.feature-preview{width:min(1120px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #cbb67166;border-radius:24px;background:#0b1522;color:#eee7d6;overflow:auto}.feature-preview::backdrop{background:#02060cbb}.feature-preview-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:16px 22px;background:#101c2c;border-bottom:1px solid #ccb56b44}.feature-preview-bar span{margin-right:auto}.feature-preview button{border:1px solid #cbb67166;border-radius:12px;padding:10px 16px;background:#152236;color:#e3ce89}.feature-preview-content{position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;border:0!important;box-shadow:none!important;transform:none!important;padding:24px!important;box-sizing:border-box}.feature-preview-content button:disabled{opacity:.5;cursor:not-allowed}.preview-writing-form{display:grid;gap:20px}.preview-writing-form label{display:grid;gap:10px}.preview-writing-form input,.preview-writing-form textarea{width:100%;box-sizing:border-box;padding:16px;background:#07111f;border:1px solid #ffffff33;color:#b8c9db;border-radius:12px}.preview-writing-form textarea{min-height:220px}.preview-book{display:flex;min-height:360px;max-width:800px;margin:24px auto;background:#e9e4d7;color:#817044;border-radius:8px;box-shadow:0 20px 35px #0007}.preview-book>div{width:50%;text-align:center;padding:28px 12px;border:1px solid #b7a26b66;display:flex;flex-direction:column;justify-content:space-around}.preview-book strong{font-size:90px}.preview-book-actions{text-align:center}.feature-preview .flashcard{max-width:100%;}.feature-preview .flashcard-main{font-size:clamp(24px,4vw,42px)}@media(max-width:600px){.feature-preview-bar{padding:12px;gap:8px;font-size:12px}.feature-preview-bar button{padding:8px}.feature-preview-content{padding:16px!important}.preview-book{min-height:260px}.feature-preview .flashcard-toolbar{flex-wrap:wrap}.feature-preview .tool-tabs{display:flex;overflow:auto}.feature-preview .tool-tabs>*{min-width:110px}}

.feature-preview .flashcard-stage{display:flex;align-items:center;justify-content:center;gap:12px;min-height:340px}.feature-preview button.flashcard{position:relative;flex:0 1 300px;width:300px;height:400px;padding:0;opacity:1;background:radial-gradient(ellipse at 50% 40%,#162638,#050b12 75%);border:1px solid #b69749}.feature-preview .flashcard-inner,.feature-preview .flashcard-front{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.feature-preview .flashcard-back{display:none}.feature-preview .flashcard-nav{padding:6px;flex-shrink:0}.feature-preview .flashcard-main{text-align:center;font-size:28px}@media(max-width:600px){.feature-preview button.flashcard{width:210px;height:300px}.feature-preview .flashcard-main{font-size:24px}.feature-preview .flashcard-stage{gap:6px}}

/* Hidden selection controls must not leave a 28px grid column for the title. */
.preview-mode .tree-note-row{grid-template-columns:minmax(0,1fr)}
.preview-mode .tree-note-row .tree-note{width:100%;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.6;text-align:left;padding:8px 6px}

#loginForm .login-agreement{display:flex;align-items:flex-start;gap:10px;margin:18px 0;font-size:13px;line-height:1.75;color:#bac6d4}#loginForm .login-agreement input{appearance:auto;flex:0 0 18px;width:18px;height:18px;padding:0;margin:4px 0 0;accent-color:#d9be75}#loginForm .login-agreement span{display:block;min-width:0}#loginForm .login-agreement a{color:#e8ce8e;text-decoration:underline;text-underline-offset:3px}

.tool-tabs .tool-icon{background:radial-gradient(circle at 32% 24%,#e8c66d14,transparent 72%);box-shadow:inset 0 0 12px #e8c66d05}.tool-tabs .tool-icon svg{display:block;width:29px;height:29px;flex:none}.tool-tabs .active .tool-icon{color:#f1d88f;border-color:#e8c66d88;background:radial-gradient(circle at 32% 24%,#e8c66d25,transparent 75%)}@media(max-width:760px){.tool-tabs .tool-icon svg{width:25px;height:25px}}

#loginOverlay[hidden]{display:none!important}body.booting #app{visibility:hidden}