/* Intro uses the existing star canvas without changing saved library colors. */
body[data-view="landing"] { background:var(--bg); color:var(--text); }
body[data-view="landing"] > .rail, body[data-view="landing"] > .app { display:none; }
body:not([data-view="landing"]) .landing-page { display:none; }
body[data-view="landing"] #starfield { z-index:0; opacity:1; }
.landing-page { position:relative; z-index:1; max-width:1200px; margin:auto; padding:0 40px; color:var(--text); }
.landing-page a { color:inherit; text-decoration:none; }
.landing-page a:focus-visible { outline:3px solid var(--accent-text); outline-offset:6px; }
.landing-header { height:108px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.landing-header img { display:block; width:144px; height:auto; }
.landing-library-link { font-size:13px; font-weight:600; }
.landing-library-link span { margin-left:12px; color:var(--accent-text); }
.landing-hero { text-align:center; max-width:820px; margin:65px auto 48px; }
.landing-kicker { text-transform:uppercase; letter-spacing:0; font-size:11px; font-weight:700; color:var(--accent-text); margin:0 0 18px; }
.landing-hero h1 { font-size:68px; line-height:1.08; font-weight:650; letter-spacing:0; margin:0 0 24px; }
.landing-hero h1 em { font-style:normal; color:var(--accent-text); }
.landing-description { max-width:650px; margin:0 auto 28px; color:var(--muted); font-size:17px; line-height:1.8; }
.landing-page .landing-cta { display:inline-flex; align-items:center; justify-content:center; gap:30px; background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent-text); border-radius:8px; padding:16px 28px; box-shadow:0 7px 22px #007b9c20; font-size:13px; font-weight:750; letter-spacing:0; }
.landing-page .landing-cta:hover { background:var(--hover); transform:translateY(-1px); }
.landing-access { font-size:12px; color:var(--muted); margin:15px 0 0; }
.landing-window { background:var(--panel); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 20px 65px #153c6810; }
.landing-window-label { display:flex; align-items:center; gap:10px; padding:17px 24px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); }
.landing-live-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; }
.landing-window-note { margin-left:auto; color:var(--muted); }
.landing-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.landing-preview { min-width:0; }
.landing-preview + .landing-preview { border-left:1px solid var(--border); }
.landing-preview img { display:block; width:100%; height:190px; object-fit:cover; background:var(--preview-bg,#0b1218); }
.landing-preview > div { padding:23px 24px 27px; }
.landing-topic { color:var(--accent-text); font-size:10px; text-transform:uppercase; letter-spacing:0; font-weight:700; }
.landing-preview:nth-child(2) .landing-topic { color:var(--accent-text); }
.landing-preview:nth-child(3) .landing-topic { color:var(--accent-text); }
.landing-preview h2 { font-size:19px; line-height:1.3; letter-spacing:0; margin:10px 0; }
.landing-preview p { font-size:13px; line-height:1.7; color:var(--muted); margin:0; }
.landing-preview:hover h2 { color:var(--accent-text); }
.landing-subjects { padding:65px 0; display:grid; grid-template-columns:1fr 1fr; gap:0 70px; }
.landing-page h2 { font-weight:650; }
.landing-subjects h2,.landing-method h2 { font-size:32px; line-height:1.2; letter-spacing:0; margin:0; }
.landing-subjects > p,.landing-method-intro > p:last-child { color:var(--muted); line-height:1.85; font-size:15px; margin:0; }
.landing-tags { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.landing-tags span { border:1px solid var(--border); background:var(--panel); padding:7px 17px; border-radius:30px; font-size:12px; color:var(--muted); }
.landing-method { border-top:1px solid var(--border); padding:56px 0; display:grid; grid-template-columns:1fr 1fr; gap:85px; }
.landing-method-intro > p:last-child { margin-top:21px; }
.landing-method ol { margin:0; padding:0; list-style:none; }
.landing-method li { display:flex; gap:20px; margin:0 0 24px; }
.landing-method li > span { color:var(--accent-text); font-size:12px; font-family:monospace; padding-top:4px; }
.landing-method h3 { margin:0 0 6px; font-size:18px; }
.landing-method li p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.landing-footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--border); padding:24px 0 32px; color:var(--muted); font-size:12px; }
@media(max-width:700px) { .landing-page { padding:0 22px; } .landing-header { height:87px; } .landing-header img { width:118px; } .landing-library-link { font-size:11px; } .landing-hero { margin:46px auto 34px; } .landing-description { font-size:15px; } .landing-preview-grid,.landing-subjects,.landing-method { grid-template-columns:1fr; } .landing-preview + .landing-preview { border-left:0; border-top:1px solid var(--border); } .landing-preview img { height:200px; } .landing-window-note { display:none; } .landing-subjects,.landing-method { padding:38px 0; gap:22px; } .landing-tags { margin-top:0; } .landing-footer { flex-direction:column; gap:10px; } }
.landing-header { position:relative; z-index:5; }
.landing-menu { position:relative; }
.landing-page .landing-menu-toggle { display:grid; place-items:center; width:48px; height:48px; padding:0; background:transparent; border:1px solid transparent; border-radius:8px; color:var(--text); cursor:pointer; }
.landing-page .landing-menu-toggle:hover,.landing-page .landing-menu-toggle[aria-expanded="true"] { background:var(--hover); border-color:var(--border); }
.landing-navigation { position:absolute; right:0; top:calc(100% + 18px); width:420px; max-width:calc(100vw - 44px); max-height:calc(100dvh - 125px); overflow-y:auto; overscroll-behavior:contain; background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 55px #163c6826; padding:8px 22px; }
.landing-navigation[hidden] { display:none; }
.landing-navigation details { border-bottom:1px solid var(--border); }
.landing-navigation summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:23px 0; cursor:pointer; list-style:none; text-transform:uppercase; letter-spacing:0; font-size:17px; font-weight:500; }
.landing-navigation summary::-webkit-details-marker { display:none; }
.landing-navigation summary::after { content:'+'; color:var(--accent-text); font-size:28px; font-weight:300; line-height:1; }
.landing-navigation details[open] summary::after { content:'−'; }
.landing-menu-links { padding:0 0 18px; }
.landing-menu-links a { display:block; padding:9px 10px; border-radius:5px; font-size:14px; color:var(--muted); }
.landing-menu-links a:hover { background:var(--hover); color:var(--accent-text); }
.landing-menu-links p { margin:0 10px 12px; font-size:14px; line-height:1.7; color:var(--muted); }
.landing-menu-help { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:14px; }
.landing-navigation :is(a,summary):focus-visible { outline:2px solid var(--accent-text); outline-offset:2px; }
@media(max-width:700px) { .landing-navigation { width:calc(100vw - 44px); top:calc(100% + 12px); } }
.landing-header { gap:24px; }
.landing-menu { margin-left:auto; }
.landing-header-actions { display:flex; align-items:center; gap:10px; }
.landing-page .landing-icon-button { width:42px; height:44px; display:grid; place-items:center; padding:9px; background:transparent; color:var(--text); border:0; border-radius:7px; cursor:pointer; }
.landing-icon-button svg { width:25px; height:25px; }
.landing-page .landing-icon-button:hover { background:var(--hover); }
.landing-dialog { color-scheme:inherit; width:min(620px,calc(100vw - 32px)); max-height:80dvh; border:1px solid var(--border); border-radius:14px; background:var(--bg); color:var(--text); padding:28px; box-shadow:0 24px 80px #102f5940; }
.landing-dialog::backdrop { background:#10243b66; backdrop-filter:blur(4px); }
.landing-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.landing-dialog-heading h2 { margin:0; font-size:24px; }
.landing-dialog-heading button { color:var(--text); background:transparent; border:0; font-size:28px; padding:2px 12px; cursor:pointer; }
.landing-dialog label { display:block; color:var(--muted); font-size:13px; margin-bottom:10px; }
.landing-dialog input { width:100%; padding:14px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:7px; font:inherit; }
#landingSearchStatus { font-size:13px; color:var(--muted); }
.landing-search-results a { display:block; padding:14px 10px; border-top:1px solid var(--border); }
.landing-search-results a:hover { background:var(--hover); }
.landing-search-results small { display:block; color:var(--muted); margin-top:4px; }
.landing-dialog p { color:var(--muted); line-height:1.8; }
.landing-dialog .landing-account-label { color:var(--accent-text); font-weight:650; }
.landing-page .landing-account-link { display:block; color:var(--accent-text); margin-top:16px; }
@media(min-width:901px) {
  .landing-page .landing-menu-toggle { display:none; }
  .landing-navigation { position:static; display:flex; align-items:center; gap:26px; width:auto; max-width:none; max-height:none; overflow:visible; background:transparent; border:0; box-shadow:none; padding:0; }
  .landing-navigation details { position:relative; border:0; }
  .landing-navigation summary { font-size:12px; padding:18px 0; white-space:nowrap; }
  .landing-navigation summary::after { display:none; }
  .landing-navigation details[open] summary { color:var(--accent-text); }
  .landing-menu-links { position:absolute; top:100%; right:0; width:290px; max-height:70dvh; overflow-y:auto; background:var(--bg); border:1px solid var(--border); border-radius:10px; box-shadow:0 18px 55px #163c6826; padding:14px; }
  .landing-menu-help { display:none; }
}
@media(max-width:900px) {
  .landing-header { gap:12px; }
  .landing-header-actions { order:1; margin-left:auto; gap:2px; }
  .landing-menu { order:2; margin-left:0; }
  .landing-navigation { width:min(420px,calc(100vw - 44px)); }
}
@media(max-width:450px) { .landing-header { gap:6px; } .landing-header img { width:106px; } .landing-page .landing-icon-button { width:36px; } .landing-dialog { padding:20px; } }

@media(max-width:700px) { .landing-hero h1 { font-size:40px; } }