@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;450;500;600;700&display=swap";:root{--page:#f4f6f8;--surface:#fff;--surface-veiled:#ffffff60;--line:#d6dce3;--line-soft:#edf0f4;--line-field:#79838f;--line-dashed:#b9b0c9;--ink:#141b24;--ink-quiet:#4b5766;--ink-faint:#8b94a0;--ink-field:#677282;--on-accent:#fff;--accent:#6d28d9;--accent-strong:#5b21b6;--accent-deep:#4c1d95;--accent-lit:#a78bfa;--focus-ring:#8b5cf6;--accent-wash:#eae3f7;--accent-wash-warm:#ede6fa;--accent-wash-cool:#ede8f8;--cover-a-surface:#ede6fa;--cover-a-spine:#c7b5ed;--cover-a-ink:#6d28d9;--cover-b-surface:#e9edf2;--cover-b-spine:#b3bfcd;--cover-b-ink:#4b5766;--cover-c-surface:#ddd2f0;--cover-c-spine:#9d83c7;--cover-c-ink:#5b21b6;--warning-surface:#fff6e8;--warning-line:#d8b98d;--mascot-outline:#241541;--mascot-cover:#6d28d9;--mascot-page:#a78bfa;--mascot-paper:#f4f6f8;--mascot-rule:#d6c8f5;--mascot-eye:#e6ddfb;--shadow-card:0 3px 8px #141b2403;--shadow-button:0 3px 0 var(--accent-deep);--shadow-dialog:0 22px 90px #141b2430;--shadow-mascot:0 6px 0 #2415410d;--scrim:#141b2470;--font-display:"Bricolage Grotesque", system-ui, sans-serif;--font-text:"DM Sans", system-ui, sans-serif;--type-hero:clamp(40px, 4.5vw, 59px);--type-hero-md:46px;--type-hero-sm:43px;--type-heading:30px;--type-heading-sm:27px;--type-title:24px;--type-title-sm:22px;--type-wordmark:23px;--type-wordmark-sm:21px;--type-lede:15px;--type-body:14px;--type-ui:13px;--type-small:12px;--type-tiny:11px;--type-micro:10px;--type-nano:9px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-heavy:800;--tracking-hero:-1.6px;--tracking-heading:-1px;--tracking-title:-.7px;--tracking-eyebrow:1.8px;--leading-hero:1.06;--leading-tight:1.2;--leading-message:1.6;--leading-note:1.7;--leading-body:1.8;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--control-lg:44px;--control:40px;--control-sm:36px;--radius-sharp:3px;--radius-xs:7px;--radius-sm:8px;--radius-button:9px;--radius-card:14px;--radius-dialog:17px;--radius-round:50%;--measure-page:1080px;--measure-header:1160px;font-family:var(--font-text);color:var(--ink);background:var(--page);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}button{transition:background .15s,transform .15s}button:active{transform:translateY(1px)}.topbar{max-width:var(--measure-header);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin:auto;padding:27px 40px;display:flex}.brand{font-family:var(--font-display);font-size:var(--type-wordmark);font-weight:var(--weight-heavy);letter-spacing:var(--tracking-title);align-items:center;gap:10px;text-decoration:none;display:flex}.brand svg,.brand-dot,.accent{color:var(--accent)}.made-with{font-size:var(--type-small);align-items:center;gap:var(--space-2);color:var(--ink-quiet);text-decoration:none;display:flex}.made-with:hover{text-decoration:underline}main{max-width:var(--measure-page);padding:0 var(--space-8);margin:auto}.intro{align-items:center;gap:var(--space-9);grid-template-columns:1.4fr 1fr;padding:63px 0 59px;display:grid}.eyebrow{font-size:var(--type-micro);letter-spacing:var(--tracking-eyebrow);font-weight:var(--weight-bold);color:var(--accent-strong);margin:0 0 var(--space-4)}h1,h2,h3{font-family:var(--font-display);letter-spacing:var(--tracking-hero);margin:0}h1{font-size:var(--type-hero);line-height:var(--leading-hero);font-weight:var(--weight-heavy)}h2{font-size:var(--type-heading);letter-spacing:var(--tracking-heading)}h3{font-size:var(--type-title-sm);line-height:var(--leading-tight);letter-spacing:var(--tracking-title)}.lede{font-size:var(--type-lede);color:var(--ink-quiet);line-height:var(--leading-body);margin:21px 0 25px}.button{min-height:var(--control-lg);border-radius:var(--radius-button);font-size:var(--type-ui);font-weight:var(--weight-semibold);border:1px solid #0000;justify-content:center;align-items:center;gap:9px;padding:11px 18px;display:inline-flex}.primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-button)}.primary:hover{background:var(--accent-strong)}.secondary{background:var(--surface);border-color:var(--line);color:var(--ink)}.secondary:hover{background:var(--accent-wash-cool)}.text-button{color:var(--accent-strong);font-size:var(--type-ui);min-height:var(--control);background:0 0;border:0;align-items:center;gap:7px;padding:10px 4px;display:inline-flex}.text-button:hover{text-decoration:underline}.mascot-scene{text-align:center;align-self:center;padding:10px 0 0;position:relative}.orbit{border-radius:var(--radius-round);background:var(--accent-wash);z-index:-1;width:230px;height:230px;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.mascot-button{background:0 0;border:0;border-radius:40%;padding:0 23px;line-height:0}.mascot{width:185px;height:190px;filter:drop-shadow(var(--shadow-mascot));overflow:visible;transform:rotate(-6deg)}.mascot-celebrate{animation:.5s ease-in-out 2 hop}.mascot-scene p{font-size:var(--type-small);color:var(--ink-quiet);margin:17px 0 0}.library{border-top:1px solid var(--line);padding-top:31px;scroll-margin-top:20px}.library-heading{justify-content:space-between;align-items:end;gap:var(--space-5);display:flex}.library-heading .eyebrow{margin-bottom:var(--space-2)}.summary{color:var(--ink-quiet);font-size:var(--type-small);margin:0 0 var(--space-1)}.summary span{color:var(--ink-faint);padding:0 9px}.toolbar{justify-content:space-between;gap:var(--space-5);margin:var(--space-6) 0;align-items:center;display:flex}.filters{gap:var(--space-1);flex-wrap:wrap;display:flex}.filter{border-radius:var(--radius-xs);min-height:var(--control);color:var(--ink-quiet);font-size:var(--type-small);white-space:nowrap;background:0 0;border:1px solid #0000;padding:10px 13px}.filter.active{color:var(--accent-strong);background:var(--accent-wash);font-weight:var(--weight-bold)}.filter:hover{background:var(--accent-wash)}.search{align-items:center;gap:var(--space-2);color:var(--ink-field);border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-sm);padding:0 11px;display:flex}.search input{min-height:var(--control);width:175px;font-size:var(--type-small);color:var(--ink);background:0 0;border:0;min-width:0}.book-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;display:grid}.book-card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);min-width:0;box-shadow:var(--shadow-card);flex-direction:column;padding:22px;display:flex}.card-top{justify-content:space-between;align-items:center;gap:var(--space-2);margin-bottom:22px;display:flex}.book-cover{border-radius:var(--radius-sharp) var(--radius-xs) var(--radius-xs) var(--radius-sharp);background:var(--accent-wash-warm);width:45px;height:53px;color:var(--accent);border-left:4px solid var(--cover-a-spine);place-items:center;display:grid;transform:rotate(-5deg)}.cover-1{background:var(--cover-b-surface);border-color:var(--cover-b-spine);color:var(--ink-quiet)}.cover-2{background:var(--cover-c-surface);border-color:var(--cover-c-spine);color:var(--accent-strong)}.status{font-size:var(--type-micro);color:var(--ink-quiet);align-items:center;gap:3px;display:flex}.status-finished{color:var(--accent-strong)}.book-card h3{overflow-wrap:anywhere}.author{font-size:var(--type-small);color:var(--ink-quiet);margin:9px 0 0}.note{font-size:var(--type-small);line-height:var(--leading-note);color:var(--ink-quiet);overflow-wrap:anywhere;white-space:pre-wrap;flex:1;margin:21px 0 23px}.card-bottom{gap:var(--space-1);border-top:1px solid var(--line-soft);justify-content:space-between;align-items:center;padding-top:13px;display:flex}.card-bottom select{color:var(--ink-quiet);font-size:var(--type-tiny);max-width:115px;min-height:var(--control-sm);background:0 0;border:0;padding-right:0}.card-actions{gap:2px;display:flex}.icon-button{width:var(--control-sm);height:var(--control-sm);color:var(--ink-quiet);border-radius:var(--radius-xs);background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.icon-button:hover{background:var(--accent-wash-warm);color:var(--accent-strong)}.empty{text-align:center;border:1px dashed var(--line-dashed);border-radius:var(--radius-card);padding:var(--space-8) var(--space-5);background:var(--surface-veiled)}.empty>svg{color:var(--accent);margin-bottom:15px}.empty h3{font-size:var(--type-title)}.empty p{font-size:var(--type-body);color:var(--ink-quiet)}.empty-actions{flex-wrap:wrap;justify-content:center;gap:15px;margin-top:18px;display:flex}.feedback{justify-content:space-between;align-items:center;gap:var(--space-4);min-height:58px;font-size:var(--type-small);color:var(--ink-quiet);display:flex}.warning{background:var(--warning-surface);border:1px solid var(--warning-line);border-radius:var(--radius-sm);font-size:var(--type-body);line-height:var(--leading-message);padding:15px}footer{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:var(--space-5);font-size:var(--type-tiny);color:var(--ink-quiet);padding:24px 0 29px;display:flex}footer span{gap:var(--space-2);align-items:center;display:flex}footer p{margin:0}dialog{border:1px solid var(--line);border-radius:var(--radius-dialog);background:var(--page);width:min(490px,100% - 32px);max-height:calc(100dvh - 40px);color:var(--ink);box-shadow:var(--shadow-dialog);padding:28px;overflow:auto}dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-heading{justify-content:space-between;align-items:center;gap:15px;margin-bottom:26px;display:flex}.dialog-heading .eyebrow{font-size:var(--type-nano);margin-bottom:var(--space-2)}form>label{font-size:var(--type-ui);font-weight:var(--weight-semibold);margin:18px 0;display:block}.required{font-size:var(--type-tiny);color:var(--ink-quiet);font-weight:var(--weight-regular)}form input,form select,form textarea{width:100%;padding:var(--space-3);margin-top:var(--space-2);border:1px solid var(--line-field);border-radius:var(--radius-xs);background:var(--surface);color:var(--ink);font-size:var(--type-body);display:block}form textarea{resize:vertical}.form-actions{justify-content:space-between;align-items:center;gap:14px;margin-top:25px;display:flex}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:5;background:var(--surface);padding:var(--space-3);position:fixed;top:-60px;left:15px}.skip-link:focus{top:10px}@keyframes hop{0%,to{transform:rotate(-6deg)translateY(0)}50%{transform:rotate(4deg)translateY(-10px)}}@media (width<=900px){.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{flex-direction:column;align-items:flex-start}.search,.search input{width:100%}.intro{gap:var(--space-3)}h1{font-size:var(--type-hero-md)}.orbit{width:200px;height:200px}.mascot{width:160px;height:165px}}@media (width<=600px){.topbar{padding:22px}.brand{font-size:var(--type-wordmark-sm)}.made-with{gap:0;font-size:0}.made-with svg{width:20px;height:20px}main{padding:0 22px}.intro{gap:var(--space-6);grid-template-columns:1fr;padding:37px 0 30px}.intro h1{font-size:var(--type-hero-sm)}.lede{font-size:var(--type-body)}.mascot-scene{text-align:left;justify-content:center;align-items:center;gap:5px;padding:0;display:flex}.mascot{width:90px;height:93px}.mascot-button{padding:0 var(--space-3)}.orbit{display:none}.mascot-scene p{font-size:var(--type-small);max-width:125px;margin:0}.book-grid{grid-template-columns:1fr}.library-heading{gap:var(--space-2)}.summary{font-size:var(--type-tiny)}.filter{padding:9px 10px}.filters{gap:0}.book-card{padding:23px}.card-top{margin-bottom:18px}.book-card h3{font-size:var(--type-title)}.note{font-size:var(--type-ui)}.status{font-size:var(--type-tiny)}.card-bottom select{font-size:var(--type-small);max-width:140px}.icon-button{width:var(--control);height:var(--control)}footer{font-size:var(--type-tiny);flex-direction:column;align-items:flex-start;gap:13px}dialog{padding:22px}.dialog-heading h2{font-size:var(--type-heading-sm)}.empty h3{font-size:var(--type-title-sm)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}