:root {
  --base:#11121d; --surface:#1e1e2e; --raised:#28283b; --hover:#303047;
  --border:#3b3d55; --text:#cdd6f4; --muted:#a6adc8; --blue:#89b4fa;
  --sky:#89dceb; --pink:#f38ba8; --lavender:#b4befe;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--base); color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
body { overflow:hidden; }
button,a { font:inherit; }
button { color:inherit; }
[hidden] { display:none!important; }
header {
  position:fixed; inset:0 0 auto; z-index:100; height:76px; display:flex; align-items:center;
  gap:.75rem; padding:0 clamp(1rem,4vw,2rem); background:rgba(30,30,46,.96);
  border-bottom:1px solid rgba(137,180,250,.12); backdrop-filter:blur(14px);
}
#brand { display:flex; flex-direction:column; min-width:0; color:var(--text); text-decoration:none; font-size:.98rem; }
#note-title { overflow:hidden; color:var(--muted); font-size:.78rem; font-weight:400; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
.header-link {
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 .9rem;
  border:1px solid var(--border); border-radius:10px; background:var(--raised); color:var(--text);
  text-decoration:none; font-size:.85rem; font-weight:700; transition:.18s ease;
}
.header-link:hover { background:var(--hover); border-color:var(--blue); color:var(--sky); }
.icon-button {
  flex:0 0 auto; width:42px; height:42px; border:1px solid transparent; border-radius:10px;
  background:var(--raised); cursor:pointer; font-size:1.25rem; transition:.18s ease;
}
.icon-button:hover { background:var(--hover); border-color:var(--border); }
.icon-button:active { transform:translateY(1px); }
#layout { position:fixed; inset:76px 0 0; display:flex; overflow:hidden; }
.page-view { width:100%; overflow-y:auto; padding:clamp(2rem,6vw,5.5rem) clamp(1rem,5vw,3rem); }
.page-view>* { width:min(1080px,100%); margin-inline:auto; }
.hero {
  position:relative; overflow:hidden; padding:clamp(2.25rem,7vw,5rem); border:1px solid var(--border);
  border-radius:24px; background:linear-gradient(135deg,rgba(137,180,250,.12),rgba(243,139,168,.07)),var(--surface);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.hero:after { position:absolute; right:-80px; bottom:-150px; width:280px; height:280px; border-radius:50%; background:var(--blue); content:""; filter:blur(90px); opacity:.14; pointer-events:none; }
.eyebrow { margin:0 0 .7rem; color:var(--pink); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero h1,.landing-section h2,.directory-heading h1 { margin:0; line-height:1.12; }
.hero h1 { max-width:760px; font-size:clamp(2.3rem,7vw,4.8rem); letter-spacing:-.055em; }
.hero-copy { max-width:620px; margin:1.25rem 0 1.8rem; color:var(--muted); font-size:clamp(1rem,2.5vw,1.15rem); line-height:1.7; }
.primary-button {
  display:inline-flex; align-items:center; gap:.75rem; min-height:48px; padding:.8rem 1.15rem;
  border:1px solid var(--blue); border-radius:11px; background:var(--blue); color:#11111b;
  cursor:pointer; font-weight:800; transition:.18s ease;
}
.primary-button:hover { filter:brightness(1.08); transform:translateY(-2px); }
.landing-section { margin-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:3rem; }
.landing-section h2,.directory-heading h1 { font-size:clamp(1.55rem,4vw,2.15rem); }
.landing-section h2 { margin-bottom:1.25rem; }
.directory-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin:1.75rem auto 1.25rem; }
#directory-count { margin:0 0 .25rem; color:var(--muted); font-size:.85rem; }
.entry-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr)); gap:.9rem; }
.entry-card {
  display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:1rem;
  width:100%; min-height:94px; padding:1rem; border:1px solid var(--border); border-radius:15px;
  background:var(--surface); text-align:left; cursor:pointer; transition:.18s ease;
}
.entry-card:hover { background:var(--raised); border-color:var(--blue); box-shadow:0 10px 30px rgba(0,0,0,.18); transform:translateY(-2px); }
.entry-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background:rgba(137,180,250,.12); color:var(--blue); }
.file-card .entry-icon { background:rgba(243,139,168,.1); color:var(--pink); }
.entry-icon svg { width:27px; height:27px; fill:currentColor; }
.entry-copy { min-width:0; }
.entry-copy strong,.entry-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry-copy strong { font-size:.96rem; }
.entry-copy span { margin-top:.35rem; color:var(--muted); font-size:.77rem; }
.entry-arrow { color:var(--muted); transition:.18s ease; }
.entry-card:hover .entry-arrow { color:var(--sky); transform:translateX(3px); }
#breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
#breadcrumbs button { padding:.25rem .4rem; border:0; border-radius:5px; background:transparent; color:var(--blue); cursor:pointer; font-size:.83rem; }
#breadcrumbs button:hover { background:rgba(137,180,250,.1); }
#breadcrumbs button[aria-current=page] { color:var(--muted); cursor:default; }
.breadcrumb-separator { color:#585b70; }
.empty-state { grid-column:1/-1; padding:4rem 1rem; border:1px dashed var(--border); border-radius:15px; color:var(--muted); text-align:center; }
.empty-state>span { color:var(--blue); font-size:2rem; }
.empty-state h2 { margin:.8rem 0 .4rem; color:var(--text); font-size:1.1rem; }
.empty-state p { margin:0; }
.status-view { display:grid; place-items:center; }
.status-card { max-width:540px; padding:2.5rem; border:1px solid var(--border); border-radius:18px; background:var(--surface); text-align:center; }
.status-card h1 { margin:1rem 0 .6rem; }
.status-card p { margin:0 0 1.5rem; color:var(--muted); line-height:1.6; }
.status-icon { display:grid; place-items:center; width:50px; height:50px; margin:auto; border-radius:50%; background:rgba(243,139,168,.12); color:var(--pink); font-size:1.5rem; font-weight:800; }
#toc-panel {
  flex:0 0 min(340px,30vw); overflow-y:auto; padding:1.5rem; border-right:1px solid var(--border);
  background:#2a2a3a; transition:flex-basis .25s ease,padding .25s ease,opacity .2s ease;
}
.toc-title { display:block; margin-bottom:1rem; }
#toc-list ul { margin:0; padding:0; list-style:none; }
#toc-list li { margin:.5rem 0; }
#toc-list a { color:var(--blue); text-decoration:none; font-size:.85rem; line-height:1.35; }
#toc-list a:hover { color:var(--sky); }
#toc-list .toc-level-1 a { color:var(--pink); }
#toc-list .toc-level-2 { padding-left:1rem; }
#note-container { flex:1 1 auto; min-width:0; height:100%; }
#note-frame { display:block; width:100%; height:100%; border:0; }
#layout.toc-closed #toc-panel { flex-basis:0; width:0; padding-inline:0; border:0; opacity:0; overflow:hidden; }
:focus-visible { outline:3px solid var(--lavender); outline-offset:3px; }
@media (max-width:700px) {
  header { height:68px; } #layout { inset-block-start:68px; } .page-view { padding-top:1.5rem; }
  .hero { padding:2rem 1.35rem; border-radius:18px; } .hero h1 { font-size:clamp(2.15rem,12vw,3.4rem); }
  .entry-grid { grid-template-columns:1fr; }
  #toc-panel { position:absolute; inset:0 auto 0 0; z-index:5; width:min(88vw,340px); flex-basis:auto; box-shadow:0 18px 45px rgba(0,0,0,.22); }
  #layout.toc-closed #toc-panel { width:min(88vw,340px); padding:1.5rem; transform:translateX(-100%); opacity:0; }
}
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }