:root{color-scheme:light dark;--bg:light-dark(#f7f4ef,#15130f);--surface:light-dark(#fffdf9,#1d1b16);--surface-raised:light-dark(#fff,#262219);--text:light-dark(#1e1b17,#ece6dc);--muted:light-dark(#6b6157,#a89c8c);--line:light-dark(#ddd5c9,#38332a);--accent:light-dark(#9a4a24,#e39b6f);--accent-soft:light-dark(#9a4a2419,#e39b6f26);--on-accent:light-dark(#fffdf9,#1d1b16);--danger:light-dark(#a32218,#f08d7f);--danger-soft:light-dark(#a3221819,#f08d7f26);--r-sm:4px;--r-md:8px;--r-lg:14px;--t-xs:.75rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.375rem;--t-xl:2rem;--serif:ui-serif, Georgia, serif;--shadow:0 1px 2px light-dark(#1e1b170f,#0000004d);--shadow-lg:0 .75rem 2rem light-dark(#1e1b1726,#00000073);--scrim:light-dark(#1e1b1759,#0000008c);font-family:system-ui,sans-serif;line-height:1.5}html{scrollbar-gutter:stable}body{background:var(--bg);color:var(--text);margin:0}main{box-sizing:border-box;max-width:90rem;min-height:100dvh;margin-inline:auto;padding:1.5rem}.gate{flex-direction:column;align-items:start;gap:1rem;max-width:32rem;display:flex}.auth-form{gap:.5rem;display:flex}.auth-form input{padding:.5rem}.auth-error{color:var(--danger);font-size:var(--t-sm)}.save-error{border-radius:var(--r-md);background:var(--danger-soft);color:var(--danger);font-size:var(--t-sm);padding:.5rem .75rem}h1{font-family:var(--serif);font-size:var(--t-lg);margin:0;font-weight:600}h2{font-size:var(--t-sm);margin:0;font-weight:600}p{margin:0}:where(button,input,dialog,.page,.slot,.album-card,.album-actions,.view-nav,.page-grip){transition:background-color .12s,border-color .12s,color .12s,box-shadow .12s,opacity .12s}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}button{font:inherit;border-radius:var(--r-md);border:1px solid var(--line);color:inherit;cursor:pointer;background:0 0;padding:.5rem 1rem}button:hover:not(:disabled),.page-grip:hover{border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.4;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.btn-primary:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 85%, var(--text));border-color:color-mix(in srgb, var(--accent) 85%, var(--text));color:var(--on-accent)}.btn-primary.danger{background:var(--danger);border-color:var(--danger)}.btn-primary.danger:hover:not(:disabled){background:color-mix(in srgb, var(--danger) 85%, var(--text));border-color:color-mix(in srgb, var(--danger) 85%, var(--text))}.btn-quiet{color:var(--muted);border-color:#0000}.btn-quiet:hover:not(:disabled){color:var(--danger);border-color:#0000}:where(button,input,[draggable=true]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}input{font:inherit;color:inherit;border:1px solid var(--line);border-radius:var(--r-sm);background:0 0}input:hover,input:focus{border-color:var(--accent)}dialog{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-width:20rem;max-width:28rem;color:var(--text);box-shadow:var(--shadow-lg);margin:auto;padding:1.5rem}dialog::backdrop{background:var(--scrim)}dialog form{gap:1rem;display:grid}.dialog-title{font-family:var(--serif);font-size:var(--t-lg)}dialog input{box-sizing:border-box;width:100%;padding:.5rem}.dialog-actions{justify-content:end;gap:.5rem;display:flex}.muted{color:var(--muted);font-size:var(--t-sm)}.empty{color:var(--muted);flex-direction:column;align-items:start;gap:1rem;padding:2rem 0;display:flex}.topbar{align-items:center;gap:1rem;min-height:2.5rem;display:flex}.album-list{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.5rem;margin:1rem 0 0;padding:0;list-style:none;display:grid}.album-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);gap:.75rem;padding:.75rem;display:grid}.album-card:hover{border-color:var(--accent)}.album-open{text-align:left;border:none;gap:.25rem;padding:0;display:grid}.album-open:hover:not(:disabled){color:inherit}.album-cover{aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);background:var(--surface-raised);width:100%;display:block}.album-cover.missing-photo{aspect-ratio:3/2}.album-cover-empty{font-family:var(--serif);font-size:var(--t-xl);color:var(--muted);place-items:center;display:grid}.album-name{font-family:var(--serif);font-size:var(--t-lg)}.album-actions{opacity:0;gap:.25rem;display:flex}.album-card:hover .album-actions,.album-card:focus-within .album-actions{opacity:1}.thumb,.missing-photo{aspect-ratio:1;border-radius:var(--r-sm)}.thumb{object-fit:cover;cursor:grab;width:100%;display:block}.thumb:hover{outline:2px solid var(--accent);outline-offset:-2px}.photo-loading{background:linear-gradient(100deg, var(--surface-raised) 35%, var(--line) 50%, var(--surface-raised) 65%) 0 0 / 300% 100%;animation:1.4s ease-in-out infinite paper-shimmer}@keyframes paper-shimmer{0%{background-position:100% 0}to{background-position:0 0}}.photo{animation:.2s both photo-fade}@keyframes photo-fade{0%{opacity:0}}.missing-photo{font-size:var(--t-xs);word-break:break-all;text-align:center;border:1px dashed var(--line);color:var(--muted);place-items:center;padding:.5rem;display:grid}.build .topbar{z-index:2;background:var(--bg);border-bottom:1px solid var(--line);margin:-1.5rem -1.5rem 0;padding:.75rem 1.5rem;position:sticky;top:0}.build-panes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:1.5rem;margin-top:1rem;display:grid}.build-library,.build-pages{align-content:start;gap:1rem;display:grid}.build-library{max-height:calc(100dvh - 6rem);position:sticky;top:4.5rem;overflow-y:auto}.library-head{justify-items:start;gap:.5rem;display:grid}.library-head input{font-size:var(--t-sm);border:none;max-width:100%;padding:0}.upload-status{font-size:var(--t-sm);color:var(--muted)}.library-grid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.5rem;display:grid}.library-item{position:relative}.library-delete{font-size:var(--t-xs);background:var(--surface);opacity:0;padding:.125rem .375rem;position:absolute;top:.25rem;right:.25rem}.library-item:hover .library-delete,.library-item:focus-within .library-delete{opacity:1}.build-library.drag-over{outline:2px dashed var(--accent);outline-offset:-2px;border-radius:var(--r-sm);background:var(--accent-soft)}.page{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-raised);box-shadow:var(--shadow);padding:1rem}.page-header{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.page-header .muted{margin-right:auto}.page-grip{cursor:grab;user-select:none;color:var(--muted);border-radius:var(--r-sm);padding:0 .25rem;line-height:1}.page-grip:active{cursor:grabbing}.page.drop-above{border-top:3px solid var(--accent)}.page.drop-below{border-bottom:3px solid var(--accent)}.page-grid{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.slot{aspect-ratio:1;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--surface)}.slot.filled{aspect-ratio:auto;background:0 0;border-style:solid;border-color:#0000;gap:.25rem;display:grid}.slot.drag-over{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}.slot-photo{aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);cursor:grab;width:100%;display:block}.caption{font-size:var(--t-sm);box-sizing:border-box;border-color:#0000;border-bottom-color:var(--line);border-radius:0;width:100%;padding:.25rem 0}.caption:hover,.caption:focus{border-color:#0000;border-bottom-color:var(--accent)}.banner{border-left:3px solid var(--danger);border-radius:var(--r-md);background:var(--danger-soft);font-size:var(--t-sm);word-break:break-word;margin-top:1rem;padding:.75rem 1rem}.slot-missing{aspect-ratio:1;border:1px dashed var(--danger);border-radius:var(--r-sm);place-content:center;justify-items:center;gap:.5rem;padding:.5rem;display:grid}.missing-name{font-size:var(--t-xs);word-break:break-all;text-align:center;color:var(--muted)}.slot-missing button{font-size:var(--t-xs);padding:.25rem .5rem}main:has(.view){max-width:none;padding:0}.view{box-sizing:border-box;color-scheme:dark;background:var(--bg);height:100dvh;color:var(--text);flex-direction:column;gap:1.5rem;padding:1.5rem;display:flex;position:relative}.view-grid{flex:1;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:2rem;min-height:0;padding-bottom:3rem;display:grid}.view .empty{text-align:center;flex:1;justify-content:center;align-items:center}.view-photo{grid-template-rows:minmax(0,1fr) auto;justify-items:center;gap:.5rem;min-height:0;margin:0;display:grid}.view-img,.view-photo .photo-loading{object-fit:contain;border-radius:var(--r-sm);max-width:100%;max-height:100%}.view-photo .photo-loading{aspect-ratio:auto;width:100%}.view-photo:not(:has(img,.photo-loading)){display:none}.view-photo figcaption{font-family:var(--serif);font-style:italic;font-size:var(--t-sm);text-align:center;color:var(--muted)}.view-nav{border:1px solid var(--line);border-radius:var(--r-lg);background:color-mix(in srgb, var(--surface-raised) 75%, transparent);backdrop-filter:blur(8px);box-shadow:var(--shadow-lg);align-items:center;gap:1rem;padding:.5rem 1rem;display:flex;position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%)}.view-nav.idle{opacity:.35}