.notebook-page { --hand-font:"Noteworthy","Hannotate SC","Kaiti SC","STKaiti","KaiTi","Marker Felt","Segoe Print","Comic Sans MS",cursive; overflow:auto; background:#f7f0e3; background-image:repeating-linear-gradient(18deg,#76582303 0 1px,transparent 1px 6px),repeating-linear-gradient(110deg,#ffffff25 0 1px,transparent 1px 4px); font-family:var(--hand-font); }
.notebook-bar { max-width:1160px; padding:26px 32px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.home-link { font-family:var(--hand-font); color:#15384a; text-decoration:none; font-size:23px; }
.notebook-bar nav { display:flex; flex-wrap:wrap; gap:24px; }
.notebook-bar nav a { font-size:13px; text-decoration:none; color:#6d665a; padding:6px 0; }
.notebook-bar nav a[aria-current],.notebook-bar nav a:hover { color:#096c9e; border-bottom:2px solid #ec2995; }
.notebook-main { display:block; place-items:normal; height:auto; width:min(1020px,calc(100% - 48px)); margin:6px auto 64px; }
.notebook-hero { display:flex; gap:30px; align-items:center; min-height:168px; padding-bottom:12px; }
.section-illustration { width:150px; height:140px; object-fit:contain; }
.eyebrow { font-size:12px; letter-spacing:.15em; color:#8d7760; margin:0 0 8px; }
.notebook-hero h1 { font-family:var(--hand-font); font-size:62px; color:#144c69; font-weight:400; line-height:1.1; margin:0 0 18px; transform:rotate(-2deg); }
.section-description { color:#726a60; font-size:14px; line-height:1.8; margin:0; }
.notebook-toolbar { display:flex; justify-content:flex-start; gap:16px; padding:8px 0 2px; }
.search-label { flex:0 1 420px; width:100%; }
.search-label input { width:100%; border:0; background:transparent; font-family:var(--hand-font); font-size:14px; padding:8px 4px; border-radius:0; color:#293e45; }
.module-tabs { display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 8px; }
.module-tabs button { border:1px solid #c5b69c; background:#fffaf055; padding:6px 12px; font-family:var(--hand-font); font-size:12px; }
.module-tabs button[aria-pressed="true"] { background:#ffe77b99; border-color:#c7ad4c; color:#2b454f; }
.entries { display:block; }
.empty-notebook { grid-column:1/-1; text-align:center; padding:65px 24px; border:1px dashed #c7b797; border-radius:6px; color:#8e7c67; }
.empty-notebook>span { color:#d5a316; font-size:40px; }
.empty-notebook h2 { font-size:17px; font-weight:400; color:#4b514c; }
.empty-notebook p { font-size:13px; line-height:1.8; }
.entry-row { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(120px,.75fr) minmax(76px,.45fr) minmax(250px,1.2fr); gap:20px; align-items:center; min-width:0; padding:13px 4px; }
.entry-title,.entry-person-author { font-family:var(--hand-font); font-size:16px; line-height:1.35; font-weight:500; margin:0; color:#233b46; }
.entry-title { min-width:0; max-width:100%; white-space:nowrap; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab; }
.entry-title::-webkit-scrollbar { display:none; }
.entry-title:active { cursor:grabbing; }
.entry-author { font-family:var(--hand-font); font-size:13px; color:#315667; overflow-wrap:anywhere; }
.entry-person-author { grid-column:1/3; }
.entry-platform { font-family:var(--hand-font); font-size:12px; color:#887763; }
.entry-links { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:nowrap; }
.entry-link { color:#086c9f; font-family:var(--hand-font); font-size:11px; line-height:1.45; text-decoration:none; overflow-wrap:anywhere; white-space:nowrap; }
.entry-link:hover { color:#d51f88; }
.entry-note-link { color:#b32778; white-space:nowrap; }
.invalid-link { color:#a27670; font-size:12px; }
.storage-note { font-size:11px; color:#9d917e; margin-top:28px; line-height:1.8; }
@media(max-width:760px) { .entry-row { grid-template-columns:1fr; gap:3px; padding:11px 2px; } .entry-person-author { grid-column:auto; } .entry-title,.entry-person-author { font-size:15px; } .entry-author { font-size:12px; } .entry-platform { font-size:11px; } .entry-link { font-size:11px; } .entry-links { gap:10px; } }
@media(max-width:640px) { .notebook-bar { padding:22px 20px; align-items:flex-start; } .home-link { font-size:18px; } .notebook-bar nav { gap:12px; } .notebook-bar nav a { font-size:11px; } .notebook-main { width:calc(100% - 36px); margin-top:0; } .notebook-hero { gap:18px; min-height:142px; padding-bottom:8px; } .section-illustration { width:82px; height:92px; } .notebook-hero h1 { font-size:40px; margin-bottom:10px; } .section-description { font-size:12px; } }