:root { --paper:#f4f0e8; --ink:#1d2522; --muted:#66706b; --line:#d7d2c7; --surface:#faf8f2; --accent:#ec6b4f; --shadow:0 18px 55px rgba(34,41,37,.1); color-scheme:light; }
:root[data-theme="dark"] { --paper:#171b19; --ink:#eff0e8; --muted:#9fa9a3; --line:#343b37; --surface:#202622; --shadow:0 18px 55px rgba(0,0,0,.25); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; min-height:100vh; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
.topbar { height:78px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc((100vw - 1200px)/2)); position:relative; z-index:20; }
.brand { color:var(--ink); text-decoration:none; font-weight:700; display:flex; align-items:center; gap:12px; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; background:var(--ink); color:var(--paper); font:500 12px DM Mono; border-radius:50%; }
.header-actions { display:flex; align-items:center; gap:12px; }
.icon-button,.github-link { border:1px solid var(--line); color:var(--ink); background:transparent; padding:10px 14px; border-radius:99px; text-decoration:none; font:600 12px Manrope; cursor:pointer; }
.hero { max-width:1200px; margin:auto; padding:96px 24px 80px; position:relative; }
.hero:after { content:"01"; position:absolute; top:74px; right:32px; font:500 110px DM Mono; color:var(--line); z-index:-1; }
.eyebrow { font:500 11px DM Mono; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; }
.eyebrow span { display:inline-block; width:38px; border-top:1px solid var(--muted); vertical-align:middle; margin:0 8px; }
.hero h1 { font-size:clamp(54px,8vw,104px); max-width:920px; line-height:.91; letter-spacing:-.065em; margin:28px 0 30px; font-weight:600; }
.hero h1 em { color:var(--accent); font-family:Georgia,serif; font-weight:400; }
.hero-copy { font-size:18px; line-height:1.65; color:var(--muted); max-width:620px; }
.search-box { max-width:760px; height:66px; border:1px solid var(--ink); display:flex; align-items:center; gap:14px; padding:0 20px; margin-top:45px; background:var(--surface); box-shadow:7px 7px 0 var(--ink); }
.search-box input { flex:1; border:0; outline:0; background:transparent; color:var(--ink); font:500 15px Manrope; }
kbd { border:1px solid var(--line); padding:3px 8px; border-radius:4px; font:12px DM Mono; color:var(--muted); }
.stats { display:flex; gap:38px; margin-top:48px; }
.stats div { display:flex; gap:9px; align-items:baseline; }
.stats strong { font:500 22px DM Mono; }.stats span { font-size:12px; color:var(--muted); }
.library-wrap { border-top:1px solid var(--line); max-width:1200px; margin:auto; padding:60px 24px 100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; }.section-heading h2 { font-size:35px; letter-spacing:-.04em; margin:8px 0; }.section-heading>p { color:var(--muted); font-size:13px; }
.filter-row { display:flex; gap:8px; margin:28px 0; overflow:auto; padding-bottom:4px; }.filter { white-space:nowrap; border:1px solid var(--line); color:var(--muted); background:transparent; padding:9px 15px; border-radius:99px; cursor:pointer; text-transform:capitalize; }.filter.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.note-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.note-card { min-height:270px; padding:24px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; display:flex; flex-direction:column; transition:.2s ease; position:relative; overflow:hidden; }.note-card:before { content:""; position:absolute; width:8px; inset:0 auto 0 0; background:var(--card-accent); }.note-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.coral{--card-accent:#ec6b4f}.blue{--card-accent:#6191a6}.sage{--card-accent:#7e9c72}.gold{--card-accent:#d7a947}.plum{--card-accent:#9b7796}
.card-top,.card-foot { display:flex; justify-content:space-between; align-items:center; }.file-type { font:500 10px DM Mono; text-transform:uppercase; border:1px solid var(--line); border-radius:99px; padding:5px 9px; }.arrow { font-size:21px; }.card-category { color:var(--muted); text-transform:uppercase; font:10px DM Mono; letter-spacing:.12em; margin-top:42px; }.note-card h3 { font-size:22px; letter-spacing:-.03em; line-height:1.25; margin:8px 0; }.card-foot { margin-top:auto; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.empty,.error,.loading { text-align:center; padding:100px 24px; color:var(--muted); }.empty span { font-size:40px; }.loading span { display:inline-block; width:25px; height:25px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }@keyframes spin{to{transform:rotate(360deg)}}
.reader-shell { max-width:1200px; margin:auto; display:grid; grid-template-columns:230px 1fr; gap:60px; padding:52px 24px 100px; }.reader-sidebar { position:sticky; top:30px; align-self:start; max-height:90vh; overflow:auto; }.back-link { color:var(--ink); text-decoration:none; font-weight:600; display:block; margin-bottom:55px; }.reader-sidebar nav { display:flex; flex-direction:column; gap:5px; margin-top:18px; }.reader-sidebar nav a,.reader-sidebar nav span { color:var(--muted); text-decoration:none; font-size:12px; padding:8px 10px; border-left:1px solid var(--line); }.reader-sidebar nav a:hover { color:var(--accent); border-color:var(--accent); }
.reader { min-width:0; }.reader-head { padding-bottom:38px; border-bottom:1px solid var(--line); }.reader-head h1 { font-size:clamp(40px,6vw,74px); line-height:1; letter-spacing:-.055em; margin:18px 0; }.reader-head>p:last-child { color:var(--muted); font:12px DM Mono; word-break:break-all; }.reader-tools { display:flex; gap:12px; justify-content:space-between; margin:26px 0 40px; }.reader-tools label { display:flex; flex:1; max-width:500px; border:1px solid var(--line); background:var(--surface); padding:12px 15px; gap:10px; }.reader-tools input { border:0; outline:0; flex:1; background:transparent; color:var(--ink); }.reader-tools a { color:var(--ink); border:1px solid var(--line); padding:12px 16px; text-decoration:none; font-size:12px; }
.note-section { font:500 12px DM Mono; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:55px 0 16px; }.qa-card { background:var(--surface); border:1px solid var(--line); margin-bottom:10px; }.qa-card summary { list-style:none; display:grid; grid-template-columns:50px 1fr 20px; gap:12px; align-items:start; padding:20px; cursor:pointer; }.qa-card summary::-webkit-details-marker{display:none}.qa-card summary span { font:500 11px DM Mono; color:var(--accent); padding-top:4px; }.qa-card summary h3 { font-size:16px; line-height:1.5; margin:0; }.qa-card summary i { font-style:normal; transition:.2s; }.qa-card[open] summary i { transform:rotate(180deg); }.answer { border-top:1px solid var(--line); color:var(--muted); padding:20px 20px 24px 82px; line-height:1.75; font-size:14px; }.answer p { margin:0; }.prose { color:var(--muted); line-height:1.75; white-space:normal; }.pdf-viewer { width:100%; height:78vh; border:1px solid var(--line); background:white; }
@media(max-width:850px){.note-grid{grid-template-columns:repeat(2,1fr)}.reader-shell{grid-template-columns:1fr}.reader-sidebar{position:static;display:flex;justify-content:space-between}.reader-sidebar .eyebrow,.reader-sidebar nav{display:none}.back-link{margin:0}.hero:after{display:none}}
@media(max-width:560px){.github-link{display:none}.hero{padding-top:65px}.hero h1{font-size:53px}.stats{gap:16px;flex-wrap:wrap}.note-grid{grid-template-columns:1fr}.section-heading{align-items:start}.reader-shell{padding-top:30px}.reader-head h1{font-size:42px}.reader-tools{flex-wrap:wrap}.reader-tools label{min-width:100%}.answer{padding-left:20px}.qa-card summary{grid-template-columns:42px 1fr 15px}}