:root{--color-primary: #1e2229;--color-primary-hover: #2a2d36;--color-surface: #eee;--color-border: #323642;--color-white: #fff;--color-text: var(--color-primary);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 2rem;--space-xl: 4rem;--radius-sm: .5rem;--radius-md: 1rem;--radius-lg: 2rem;--font-sm: .8rem;--font-md: 1rem;--font-lg: 1.5rem;--font-xl: 3rem;--shadow-sm: 0 3px 5px rgb(0 0 0 / .2);--shadow-lg: 0 8px 24px -4px rgb(0 0 0 / .4);--transition-fast: .2s;--transition-slow: 1s .3s;--content-inline-padding: 15vw}*,*:before,*:after{box-sizing:border-box;corner-shape:squircle;interpolate-size:allow-keywords;margin:0;padding:0}html{font-family:system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}body{min-height:100dvh}header,section{padding:var(--space-md)}header{display:grid;gap:var(--space-md);grid-template-columns:1fr 1fr}@media(min-width:728px){header{grid-template-columns:1fr 1fr 1fr;align-items:center}}[hidden][hidden]{display:none}.btn{background:var(--color-primary);color:var(--color-white);border:none;font:inherit;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--font-md)}.btn:hover{background:var(--color-primary-hover)}.btn-google{background:var(--color-primary)}.btn-google:hover{background:var(--color-primary-hover)}.fields{display:flex;flex-direction:column;gap:var(--space-sm)}.field-actions{display:flex;gap:var(--space-sm)}label{display:block;margin-bottom:var(--space-xs)}:where(input,select){background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);font:inherit;padding:var(--space-sm)}:where(input){width:100%}select{-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select}select::picker-icon{aspect-ratio:1;content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="black" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>');height:16px;width:16px;transition:rotate var(--transition-fast)}select:open::picker-icon{rotate:180deg}select::picker(select){-webkit-appearance:base-select;-moz-appearance:base-select;appearance:base-select;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-top:var(--space-xs);padding:var(--space-sm);transition:all var(--transition-fast)}@starting-style{select::picker(select){opacity:0;translate:0 -1rem}}option{border-radius:var(--radius-sm);padding:var(--space-sm)}option::checkmark{order:1;margin-left:auto}option:checked{background:#add8e6}option+option{margin-top:2px}#sign-in{display:grid;gap:var(--space-lg);place-content:center;min-height:100dvh}#detail{display:grid;grid-template-rows:min-content 1fr;min-height:100dvh}#filters{display:flex;gap:var(--space-sm)}@media(min-width:728px){#filters{justify-self:center;order:2}}#add-book-button{justify-self:end}@media(min-width:728px){#add-book-button{order:3}}.missing-book{aspect-ratio:2 / 3;background:var(--color-surface);display:grid;flex:1;place-content:center}.bookdetail{background:linear-gradient(#ffffff4d,#ffffff4d),var(--bg-url) 50% 50% no-repeat;background-size:cover;border:0;display:block;height:auto;min-height:-webkit-fill-available;min-height:stretch;position:relative;transition:all var(--transition-slow);width:100vw}@starting-style{.bookdetail{opacity:0}}.bookdetail-content{align-items:center;-webkit-backdrop-filter:blur(72px);backdrop-filter:blur(72px);display:flex;gap:var(--space-lg);min-height:-webkit-fill-available;min-height:stretch;padding-block:var(--space-xl);padding-inline:var(--content-inline-padding);position:relative}.bookdetail-close{aspect-ratio:1;background:transparent;display:grid;border:0;cursor:pointer;height:48px;opacity:.5;place-content:center;position:absolute;right:0;top:0;transition:opacity var(--transition-fast);width:48px}.bookdetail-close:hover{opacity:1}.bookdetail-cover{aspect-ratio:2 / 3;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex:1}.bookdetail-info{display:flex;flex-direction:column;gap:var(--space-md);flex:2}.bookdetail-title{font-size:var(--font-xl);line-height:1.1;text-wrap:balance}.bookdetail-author{font-size:var(--font-lg);text-wrap:balance}.bookdetail-meta{display:flex;flex-wrap:wrap;gap:var(--space-md)}.bookdetail-meta div{border:2px solid var(--color-text);border-radius:var(--radius-sm);padding:var(--space-sm)}.bookdetail-meta-title{font-size:var(--font-sm)}.bookdetail-meta-content{margin-block:.15rem 0;text-transform:capitalize}.bookform{background:var(--color-surface);background-size:cover;border:0;display:block;width:100vw;position:relative;transition:all var(--transition-slow)}@starting-style{.bookform{opacity:0}}.bookform-content{align-items:center;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);display:flex;gap:var(--space-lg);padding-block:var(--space-xl);padding-inline:var(--content-inline-padding);position:relative}.bookform-cover{aspect-ratio:2 / 3;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);flex:1}.bookform-info{display:flex;flex-direction:column;gap:var(--space-md);flex:2}.bookshelf{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}@media(min-width:600px){.bookshelf{grid-template-columns:repeat(4,1fr)}}@media(min-width:900px){.bookshelf{grid-template-columns:repeat(6,1fr)}}@media(min-width:1200px){.bookshelf{grid-template-columns:repeat(8,1fr)}}.bookshelf-book{background:transparent;border:0;cursor:pointer;display:flex;flex-direction:column;font:inherit;text-align:left;outline:0}.bookshelf-book:hover .bookshelf-cover,.bookshelf-book:focus-visible .bookshelf-cover{translate:0 -4px;scale:1.02;box-shadow:var(--shadow-sm)}.bookshelf-book:focus-visible .bookshelf-cover{outline:2px solid var(--color-primary-hover);outline-offset:2px}.bookshelf-cover{aspect-ratio:2 / 3;border-radius:var(--radius-md);min-width:100%;transition:all var(--transition-fast)}.bookshelf-title,.bookshelf-author{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:1;overflow:hidden}.bookshelf-title{font-weight:600;margin-top:var(--space-sm)}.bookshelf-author{font-size:var(--font-sm)}