@view-transition{navigation:auto}@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}:root{color-scheme:light dark;--background: light-dark(#f6f6f8, #141418);--surface: light-dark(#ffffff, #1e1e24);--text: light-dark(#1c1c21, #ececf1);--muted: light-dark(#6b6b76, #9d9da8);--border: light-dark(#e2e2e8, #33333c);--accent: light-dark(#4f46e5, #818cf8);--on-accent: light-dark(#ffffff, #141418);--danger: light-dark(#dc2626, #f87171);--success: light-dark(#16a34a, #4ade80);--radius: .5rem;font-family:system-ui,sans-serif;line-height:1.5;accent-color:var(--accent)}body{max-width:48rem;margin:0 auto;padding:1rem;background:var(--background);color:var(--text)}a{color:var(--accent)}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:1rem;border-bottom:1px solid var(--border)}.logo{font-weight:700;color:var(--text);text-decoration:none}header nav,.filter{display:flex;flex-wrap:wrap;gap:.25rem}header nav a,.filter a{padding:.25rem .75rem;border-radius:999px;color:var(--muted);text-decoration:none}header nav a:hover,.filter a:hover{background:var(--surface);color:var(--text)}header nav a[aria-current=page],.filter a[aria-current=page]{background:var(--accent);color:var(--on-accent)}.books{display:grid;gap:.5rem;padding:0;list-style:none}.books li{padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.books li:has(form){display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.books li:target{border-color:var(--success);box-shadow:0 0 0 3px color-mix(in srgb,var(--success) 25%,transparent)}.books li a{display:inline-block;font-weight:600;text-decoration:none}.books li a:hover{text-decoration:underline}.books .title{flex:1 1 12rem}.books :is(.actions,form){display:flex;align-items:center;gap:.25rem}.books :is(select,button){padding-block:.25rem;font-size:.85rem}.badge{display:inline-block;padding:0 .6rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted);font-size:.75rem;font-weight:600;vertical-align:middle}.badge.reading{background:light-dark(#fef3c7,#422006);color:light-dark(#92400e,#fcd34d)}.badge.finished{background:light-dark(#dcfce7,#052e16);color:light-dark(#166534,#86efac)}.saved{color:var(--success);font-size:.85rem;font-weight:600}.book{display:flex;flex-wrap:wrap;gap:2rem;margin-top:1.5rem}.book>div{flex:1 1 16rem}.book h1{margin-top:0}.book img{height:auto;border-radius:var(--radius);box-shadow:0 .5rem 1.5rem #0003}.cover{--bar: color-mix(in srgb, var(--surface) 55%, transparent);aspect-ratio:auto 2 / 3;align-self:flex-start;background:linear-gradient(110deg,transparent 40%,rgb(255 255 255 / .35) 50%,transparent 60%) 100% 0 / 250% 100% no-repeat,linear-gradient(var(--bar),var(--bar)) 50% 32% / 70% 6% no-repeat,linear-gradient(var(--bar),var(--bar)) 50% 41% / 50% 6% no-repeat,linear-gradient(var(--bar),var(--bar)) 50% 83% / 40% 4% no-repeat,linear-gradient(90deg,rgb(0 0 0 / .18) 0 6%,rgb(255 255 255 / .12) 6% 7%,transparent 7%),linear-gradient(160deg,color-mix(in srgb,var(--accent) 35%,var(--surface)),color-mix(in srgb,var(--accent) 12%,var(--surface)));animation:cover-shine 1.6s ease-in-out infinite,cover-float 3s ease-in-out infinite}.cover.loaded{background:none;animation:cover-reveal .5s ease-out}@keyframes cover-shine{to{background-position:0 0,50% 32%,50% 41%,50% 83%,0 0,0 0}}@keyframes cover-float{50%{transform:translateY(-4px) rotate(-1deg)}}@keyframes cover-reveal{0%{opacity:.3;filter:blur(8px);transform:scale(.96)}}@media(prefers-reduced-motion:reduce){.cover,.cover.loaded{animation:none}}.card{display:grid;gap:1rem;max-width:24rem;padding:1.5rem;border:1px solid var(--border);border-radius:calc(var(--radius) * 2);background:var(--surface)}.card label{display:grid;gap:.25rem;color:var(--muted);font-size:.85rem;font-weight:600}.card :is(input,select){color:var(--text);font-size:1rem;font-weight:400}input,select,button{padding:.5rem .75rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font:inherit;transition:border-color .15s,box-shadow .15s,background-color .15s}select{appearance:none;padding-right:2rem;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right .5rem center / 1rem}:is(input,select,button):hover{border-color:var(--muted)}:is(input,select,button):focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}button{cursor:pointer;font-weight:600}button.primary{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}button.primary:hover{background:color-mix(in srgb,var(--accent) 85%,var(--text))}button.danger{color:var(--danger)}button.danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,var(--surface))}.error{padding:.75rem 1rem;border-radius:var(--radius);background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger)}.logout{display:flex;align-items:center;gap:.75rem}.logout button{padding-block:.25rem;font-size:.85rem}