:root { color-scheme: dark; --ink:#11110f; --ink-raised:#181816; --paper:#efede6; --muted:#aaa79e; --line:rgba(239,237,230,.14); --acid:#d8ff3e; --violet:#9c8cff; --orange:#ff7648; --max:1560px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 78% 0%,rgba(156,140,255,.1),transparent 27rem),var(--ink); color:var(--paper); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; } button { color:inherit; } a { color:inherit; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--acid); outline-offset:3px; }
.hidden { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { min-height:100vh; }
.topbar { position:sticky; top:0; z-index:20; height:74px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(20px,4vw,68px); border-bottom:1px solid var(--line); background:rgba(17,17,15,.82); backdrop-filter:blur(18px); }
.brand { width:max-content; display:inline-flex; align-items:center; gap:12px; text-decoration:none; text-transform:uppercase; font-size:13px; font-weight:760; letter-spacing:.13em; }
.brand-mark { position:relative; width:28px; height:28px; display:block; }
.brand-mark i { position:absolute; inset:0; border:1px solid var(--paper); transform:rotate(45deg); }
.brand-mark i:nth-child(2) { inset:6px; border-color:var(--acid); }
.brand-mark i:nth-child(3) { inset:11px; background:var(--paper); border:0; }
.privacy-note { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; }
.privacy-dot { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 14px rgba(216,255,62,.8); }
.topbar-actions { justify-self:end; display:flex; align-items:center; gap:18px; }
.install-short { display:none; }
.quiet-button { justify-self:end; border:0; border-bottom:1px solid var(--muted); padding:4px 0; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }
.quiet-button:hover { color:var(--paper); border-color:var(--paper); }
.quiet-link { justify-self:end; color:var(--muted); font-size:12px; text-decoration:none; border-bottom:1px solid var(--muted); }
.quiet-link:hover { color:var(--paper); border-color:var(--paper); }

.welcome { width:min(var(--max),100%); min-height:calc(100vh - 74px); margin:0 auto; padding:clamp(72px,10vh,130px) clamp(20px,5vw,80px) 44px; display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); grid-template-rows:1fr auto; gap:70px 5vw; overflow:hidden; }
.welcome-copy { position:relative; z-index:2; align-self:center; }
.eyebrow { margin:0 0 24px; color:var(--acid); font-size:11px; font-weight:760; letter-spacing:.2em; }
.welcome h1,.library-heading h1 { margin:0; max-width:760px; font-size:clamp(58px,7.7vw,124px); font-weight:630; letter-spacing:-.07em; line-height:.85; }
.welcome h1 em,.library-heading h1 em { color:var(--muted); font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.lede { max-width:590px; margin:38px 0 0; color:#c5c2b9; font-size:clamp(17px,1.5vw,22px); line-height:1.55; letter-spacing:-.02em; }
.welcome-actions { margin-top:45px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.welcome-guide-button { width:auto; min-width:180px; }
.folder-hint { margin:15px 0 0; color:#858278; font-size:12px; } .folder-hint strong { color:var(--paper); font-weight:600; }
.privacy-reassurance { max-width:650px; margin:28px 0 0; display:flex; align-items:flex-start; gap:10px; color:#b9b6ad; font-size:11px; line-height:1.6; }
.privacy-reassurance .privacy-dot { flex:0 0 auto; margin-top:5px; }
.pwa-info { max-width:650px; margin:22px 0 0; border-left:2px solid var(--acid); padding:3px 0 3px 15px; }
.pwa-info strong { font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.pwa-info p { margin:7px 0 0; color:#918e85; font-size:10px; line-height:1.6; }
.offline-info { border-left-color:var(--violet); }
.primary-button { display:inline-flex; justify-content:space-between; align-items:center; gap:28px; min-width:220px; border:1px solid var(--acid); padding:17px 18px; background:var(--acid); color:var(--ink); text-decoration:none; font-size:13px; font-weight:760; cursor:pointer; transition:transform 160ms ease,box-shadow 160ms ease; }
.primary-button:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(216,255,62,.12); }
.welcome-art { position:relative; min-height:520px; align-self:center; }
.art-card { position:absolute; width:min(34vw,420px); aspect-ratio:.78; overflow:hidden; border:1px solid rgba(255,255,255,.17); background:#252421; box-shadow:0 35px 80px rgba(0,0,0,.38); }
.art-card>span { position:absolute; left:18px; bottom:16px; font-size:10px; letter-spacing:.16em; }
.art-card-one { top:5%; left:0; transform:rotate(-8deg); background:linear-gradient(145deg,#0a1020 20%,#482b4f 64%,#fd7a4d); }
.art-card-two { top:0; left:25%; z-index:2; transform:rotate(3deg); background:linear-gradient(170deg,#251a4b,#0b0d19 55%,#1c514b); }
.art-card-three { top:14%; left:50%; transform:rotate(10deg); background:linear-gradient(145deg,#5448a9,#f2a24a); }
.art-glow { position:absolute; width:120%; height:70%; left:-30%; top:36%; border-radius:50%; background:#ff7d51; filter:blur(28px); opacity:.74; }
.art-moon { position:absolute; width:56%; aspect-ratio:1; top:13%; left:22%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#b8c4df 14%,#48597c 45%,#151828 72%); box-shadow:0 0 75px rgba(185,203,255,.42); }
.art-grid { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px); background-size:38px 38px; transform:perspective(300px) rotateX(45deg) scale(1.5); }
.art-caption { position:absolute; z-index:5; right:1%; bottom:2%; color:rgba(239,237,230,.7); font-family:Georgia,serif; font-style:italic; font-size:14px; line-height:1.5; }
.welcome-footnotes { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.welcome-footnotes div { display:flex; gap:24px; padding:24px 24px 0 0; border-right:1px solid var(--line); }
.welcome-footnotes div+div { padding-left:24px; } .welcome-footnotes div:last-child { border-right:0; }
.welcome-footnotes span { color:var(--acid); font-size:10px; } .welcome-footnotes p { margin:0; max-width:250px; color:var(--muted); font-size:12px; line-height:1.5; }

.loading-view,.error-view { min-height:calc(100vh - 74px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; text-align:center; }
.loading-view h2,.error-view h2 { margin:0; font-size:clamp(34px,5vw,68px); letter-spacing:-.05em; }
.loading-view #loadingMessage,.error-view>p:not(.eyebrow) { max-width:520px; color:var(--muted); line-height:1.6; }
.error-actions { margin-top:24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
.error-actions .secondary-button { width:auto; min-width:220px; }
.loading-cancel { margin-top:22px; }
.loading-orbit { position:relative; width:90px; height:90px; margin-bottom:40px; border:1px solid var(--line); border-radius:50%; }
.loading-orbit::before,.loading-orbit::after { content:""; position:absolute; inset:12px; border:1px solid rgba(216,255,62,.2); border-radius:50%; }
.loading-orbit::after { inset:26px; }
.loading-orbit span { position:absolute; width:9px; height:9px; top:-4px; left:calc(50% - 4px); border-radius:50%; background:var(--acid); box-shadow:0 0 18px var(--acid); transform-origin:4px 49px; animation:orbit 1.5s linear infinite; }
@keyframes orbit { to { transform:rotate(360deg); } }

.library { width:min(var(--max),100%); margin:0 auto; padding:70px clamp(20px,4vw,68px) 100px; }
.library-heading { display:flex; justify-content:space-between; align-items:end; gap:36px; }
.library-heading h1 { font-size:clamp(50px,6vw,92px); }
.archive-summary { display:flex; flex-direction:column; align-items:flex-end; gap:8px; padding-bottom:6px; }
.archive-summary span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; } .archive-summary strong { font-size:14px; font-weight:550; }
.stats-row { margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-card { min-width:0; padding:24px 24px 22px 0; border-right:1px solid var(--line); }
.stat-card+.stat-card { padding-left:24px; } .stat-card:last-child { border-right:0; }
.stat-card>span { color:var(--muted); font-size:9px; letter-spacing:.13em; text-transform:uppercase; }
.stat-card strong { display:block; margin-top:16px; font-size:clamp(29px,3.5vw,48px); font-weight:570; letter-spacing:-.04em; }
.stat-card p { margin:7px 0 0; color:#77746c; font-size:11px; }
.toolbar { position:sticky; top:74px; z-index:15; margin-top:42px; padding:15px 0; display:grid; grid-template-columns:minmax(240px,1fr) auto auto auto; gap:12px; align-items:center; background:rgba(17,17,15,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.search-box { min-width:0; height:44px; display:flex; align-items:center; gap:12px; padding:0 14px; border:1px solid var(--line); background:#151513; }
.search-box>span { color:var(--acid); font-size:22px; transform:rotate(-10deg); }
.search-box input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--paper); font-size:13px; }
.search-box input::placeholder { color:#65635d; } .search-box:focus-within { border-color:rgba(216,255,62,.65); }
kbd { border:1px solid var(--line); border-radius:3px; padding:4px 7px; color:#77746d; font-size:9px; font-family:inherit; }
.filter-group { height:44px; display:flex; padding:3px; border:1px solid var(--line); }
.filter-button { border:0; padding:0 15px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; }
.filter-button:hover { color:var(--paper); } .filter-button.active { background:var(--paper); color:var(--ink); }
.sort-select { height:44px; display:flex; align-items:center; gap:10px; padding:0 12px; border:1px solid var(--line); color:#77746d; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.sort-select select { border:0; outline:0; background:var(--ink); color:var(--paper); font-size:11px; text-transform:none; letter-spacing:0; }
.album-select { max-width:190px; }
.album-select.has-value { border-color:rgba(216,255,62,.55); }
.results-line { height:64px; display:flex; justify-content:space-between; align-items:center; }
.results-line p { margin:0; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.view-control { display:flex; gap:2px; } .view-control button { width:30px; height:30px; border:1px solid transparent; background:transparent; color:#66645e; cursor:pointer; }
.view-control button.active { border-color:var(--line); color:var(--paper); }

.gallery { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:34px 14px; }
.gallery.roomy { grid-template-columns:repeat(3,minmax(0,1fr)); gap:46px 20px; }
.media-card { min-width:0; } .card-open { width:100%; display:block; border:0; padding:0; background:transparent; cursor:zoom-in; text-align:left; }
.media-frame { position:relative; aspect-ratio:.79; overflow:hidden; background:#201f1c; }
.media-frame img { width:100%; height:100%; display:block; object-fit:cover; transition:transform 500ms cubic-bezier(.2,.8,.2,1),filter 300ms ease; }
.video-card-preview { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; background:#11110f; transition:opacity 220ms ease; }
.video-card-preview.ready { opacity:1; }
.video-card-preview.failed { display:none; }
.media-card:hover .media-frame img { transform:scale(1.035); } .media-card:hover .card-shade { opacity:1; }
.media-frame::after { content:""; position:absolute; inset:0; border:1px solid rgba(255,255,255,.1); pointer-events:none; }
.card-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.42)); opacity:.55; transition:opacity 200ms ease; }
.card-number { position:absolute; z-index:2; left:11px; top:11px; color:rgba(255,255,255,.7); font-size:9px; letter-spacing:.12em; }
.media-badge { position:absolute; z-index:2; right:10px; top:9px; padding:5px 7px; background:rgba(15,15,13,.75); backdrop-filter:blur(10px); color:#dedbd2; font-size:8px; letter-spacing:.13em; text-transform:uppercase; }
.media-badge.video { background:var(--acid); color:var(--ink); font-weight:750; }
.play-mark { position:absolute; z-index:3; left:50%; top:50%; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.6); border-radius:50%; background:rgba(10,10,10,.28); backdrop-filter:blur(8px); transform:translate(-50%,-50%); font-size:14px; text-indent:2px; }
.missing-art { position:absolute; inset:0; overflow:hidden; background:linear-gradient(145deg,#282722,#171715); }
.missing-art::before { content:""; position:absolute; width:100%; height:1px; top:50%; left:0; background:var(--line); transform:rotate(-38deg) scale(1.4); }
.missing-art i { position:absolute; width:65%; aspect-ratio:1; border:1px solid rgba(156,140,255,.35); border-radius:50%; left:17%; top:17%; }
.missing-art i:nth-child(2) { width:36%; left:32%; top:31%; border-color:rgba(216,255,62,.38); }
.missing-art span { position:absolute; left:50%; bottom:20%; transform:translateX(-50%); color:#66645e; font-size:9px; letter-spacing:.24em; }
.card-body { padding:13px 2px 0; } .card-meta { display:flex; justify-content:space-between; gap:8px; color:#77746d; font-size:8px; text-transform:uppercase; letter-spacing:.11em; }
.card-body>p { height:2.9em; margin:10px 0 13px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#d4d1c8; font-family:Georgia,"Times New Roman",serif; font-size:13px; line-height:1.45; }
.card-actions { min-height:25px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:9px; }
.card-actions a,.card-actions>span { color:#8d8a82; text-decoration:none; font-size:9px; text-transform:uppercase; letter-spacing:.11em; }
.card-actions a:hover { color:var(--acid); } .favorite-button { width:28px; height:24px; border:0; padding:0; background:transparent; color:#77746d; cursor:pointer; font-size:18px; }
.favorite-button.active { color:var(--orange); }
.card-organization { min-height:26px; margin:-4px 0 9px; display:flex; align-items:center; justify-content:space-between; gap:8px; overflow:hidden; }
.card-organization>div { min-width:0; display:flex; gap:5px; overflow:hidden; }
.card-organization>div span { flex:0 0 auto; max-width:95px; overflow:hidden; text-overflow:ellipsis; padding:3px 6px; border:1px solid var(--line); color:#a9a69c; font-size:8px; white-space:nowrap; }
.card-rating { flex:0 0 auto; color:var(--acid); font-size:9px; letter-spacing:1px; }
.pagination { width:min(480px,100%); margin:64px auto 0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.pagination button { border:1px solid var(--line); padding:12px 15px; background:transparent; color:var(--paper); cursor:pointer; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.pagination button:last-child { justify-self:end; }
.pagination button:disabled { opacity:.3; cursor:default; }
.pagination span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.empty-state { padding:100px 20px; text-align:center; border:1px solid var(--line); } .empty-state>span { color:var(--acid); font-size:38px; }
.empty-state h2 { margin:18px 0 5px; font-size:30px; } .empty-state p { margin:0; color:var(--muted); }

.lightbox { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; border:0; padding:0; background:#0b0b0a; color:var(--paper); }
.lightbox::backdrop { background:rgba(0,0,0,.9); } .lightbox[open] { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,410px); }
.lightbox-stage { position:relative; min-width:0; display:flex; align-items:center; justify-content:center; padding:36px 70px; background:#080807; overflow:hidden; }
.lightbox-stage img { max-width:100%; max-height:calc(100vh - 72px); object-fit:contain; box-shadow:0 40px 100px rgba(0,0,0,.5); }
.lightbox-details { display:flex; flex-direction:column; border-left:1px solid var(--line); padding:90px 32px 34px; overflow:auto; }
.detail-kicker { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.14em; }
.detail-kicker span:first-child { color:var(--acid); } .lightbox-details h2 { margin:35px 0 18px; font-size:36px; letter-spacing:-.04em; }
.detail-prompt { margin:0; color:#d7d4cb; font-family:Georgia,serif; font-size:18px; line-height:1.6; }
.organize-panel { margin-top:34px; padding:18px; border:1px solid var(--line); background:#11110f; }
.organize-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.organize-heading h3 { margin:0; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.organize-heading span { color:#77746d; font-size:9px; }
.rating-row { margin:18px 0 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.rating-row>span,.organize-panel label { color:#77746d; font-size:9px; text-transform:uppercase; letter-spacing:.11em; }
.rating-buttons { display:flex; align-items:center; }
.rating-buttons button { width:27px; height:27px; border:0; padding:0; background:transparent; color:#4f4d47; cursor:pointer; font-size:17px; }
.rating-buttons button.active { color:var(--acid); }
.rating-buttons .rating-clear { margin-left:3px; color:#77746d; font-size:18px; }
.organize-panel label { display:block; margin-top:12px; }
.organize-panel input,.organize-panel textarea { width:100%; margin-top:7px; border:1px solid var(--line); border-radius:0; padding:10px 11px; background:#0b0b0a; color:var(--paper); font-size:11px; text-transform:none; letter-spacing:0; outline:0; }
.organize-panel input:focus,.organize-panel textarea:focus { border-color:rgba(216,255,62,.65); }
.organize-panel textarea { min-height:74px; resize:vertical; line-height:1.5; }
.lightbox-details dl { margin:38px 0; border-top:1px solid var(--line); } .lightbox-details dl div { padding:15px 0; border-bottom:1px solid var(--line); }
.lightbox-details dt { color:#6f6d66; font-size:9px; text-transform:uppercase; letter-spacing:.12em; } .lightbox-details dd { margin:7px 0 0; color:#b9b6ad; font-size:11px; word-break:break-all; }
.detail-actions { margin-top:auto; display:grid; gap:9px; } .detail-actions .primary-button { width:100%; }
.secondary-button,.copy-button { width:100%; border:1px solid var(--line); padding:14px 16px; background:transparent; color:var(--paper); cursor:pointer; font-size:11px; }
.secondary-button:hover,.copy-button:hover { border-color:#59574f; }
.lightbox-close { position:fixed; z-index:6; right:24px; top:20px; width:42px; height:42px; border:1px solid var(--line); background:rgba(10,10,9,.65); cursor:pointer; font-size:27px; font-weight:250; }
.lightbox-nav { position:fixed; z-index:5; top:50%; width:44px; height:44px; border:1px solid var(--line); background:rgba(10,10,9,.7); cursor:pointer; }
.lightbox-nav:disabled { opacity:.2; cursor:default; } .lightbox-prev { left:16px; } .lightbox-next { right:426px; }
.video-player-shell { position:relative; width:100%; height:100%; overflow:hidden; background:#000; }
.native-video { width:100%; height:100%; display:block; object-fit:contain; background:#000; opacity:.78; transition:opacity 180ms ease; }
.native-video.ready { opacity:1; }
.video-load-status { position:absolute; z-index:5; left:50%; top:24px; display:flex; align-items:center; gap:10px; padding:9px 13px; background:rgba(10,10,9,.72); backdrop-filter:blur(10px); transform:translateX(-50%); color:#cac7be; font-size:9px; text-transform:uppercase; letter-spacing:.12em; white-space:nowrap; }
.video-load-status span { width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 12px var(--acid); animation:video-pulse 1s ease-in-out infinite alternate; }
@keyframes video-pulse { to { opacity:.28; transform:scale(.72); } }
.video-center-play { position:absolute; z-index:4; left:50%; top:50%; width:68px; height:68px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.65); border-radius:50%; background:rgba(10,10,9,.55); backdrop-filter:blur(12px); transform:translate(-50%,-50%); cursor:pointer; font-size:21px; text-indent:3px; opacity:1; transition:opacity 160ms ease,transform 160ms ease; }
.video-player-shell.playing .video-center-play { opacity:0; pointer-events:none; transform:translate(-50%,-50%) scale(.9); }
.video-volume-panel { min-width:128px; min-height:32px; display:flex; align-items:center; gap:7px; padding:0 2px; transition:color 160ms ease; }
.video-volume-panel.audible { color:var(--acid); }
.video-volume-panel.muted { color:#ff5d5d; }
.video-audio-button { width:30px; height:28px; border:0; padding:0; display:grid; place-items:center; background:transparent; color:inherit; cursor:pointer; }
.speaker-icon { position:relative; width:22px; height:18px; display:block; color:inherit; }
.speaker-box { position:absolute; left:1px; top:6px; width:5px; height:7px; background:currentColor; }
.speaker-cone { position:absolute; left:5px; top:3px; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:8px solid currentColor; }
.speaker-wave { position:absolute; right:1px; top:3px; width:7px; height:12px; border-right:2px solid currentColor; border-radius:50%; }
.speaker-strike { position:absolute; left:0; top:8px; width:24px; height:2px; background:#ff5d5d; box-shadow:0 0 4px rgba(255,93,93,.55); transform:rotate(-42deg); opacity:0; }
.video-volume-panel.muted .speaker-wave { opacity:.25; }
.video-volume-panel.muted .speaker-strike { opacity:1; }
.video-volume-panel input[type="range"] { width:92px; accent-color:var(--acid); cursor:pointer; }
.video-volume-panel.muted input[type="range"] { accent-color:#ff5d5d; }
.video-controls { position:absolute; z-index:5; left:50%; bottom:20px; width:min(900px,calc(100% - 48px)); min-height:48px; display:grid; grid-template-columns:46px minmax(100px,1fr) auto minmax(128px,150px) 52px; align-items:center; gap:10px; padding:7px 9px; border:1px solid rgba(255,255,255,.18); background:rgba(10,10,9,.78); backdrop-filter:blur(16px); transform:translateX(-50%); opacity:.4; pointer-events:none; transition:opacity 180ms ease; }
.video-player-shell.ready .video-controls { opacity:1; pointer-events:auto; }
.video-controls button { height:32px; border:0; background:transparent; color:#e2dfd6; cursor:pointer; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.video-controls button:hover { color:var(--acid); }
.video-controls [data-video-action="toggle"] { width:42px; height:38px; padding:0; font-size:20px; font-weight:700; line-height:1; letter-spacing:0; }
.video-controls input[type="range"] { width:100%; accent-color:var(--acid); cursor:pointer; }
.video-controls [data-video-time] { color:#aaa79e; font-variant-numeric:tabular-nums; font-size:10px; white-space:nowrap; }
.video-fallback { position:absolute; left:50%; top:50%; width:min(520px,86%); min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); padding:36px; background:radial-gradient(circle,#292824,#11110f 68%); transform:translate(-50%,-50%); text-align:center; }
.video-fallback strong { font-size:25px; letter-spacing:-.035em; }
.video-fallback p { max-width:330px; margin:13px 0 24px; color:var(--muted); line-height:1.55; }
.video-fallback a { border-bottom:1px solid var(--acid); padding-bottom:4px; color:var(--acid); text-decoration:none; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.lightbox-missing { width:min(520px,80%); aspect-ratio:1; display:grid; place-content:center; justify-items:center; gap:20px; border:1px solid var(--line); background:radial-gradient(circle,#292824,#11110f 65%); text-align:center; }
.lightbox-missing span { color:var(--acid); font-size:52px; } .lightbox-missing p { max-width:250px; color:var(--muted); line-height:1.6; }
.toast { position:fixed; z-index:100; left:50%; bottom:24px; padding:11px 18px; background:var(--paper); color:var(--ink); transform:translate(-50%,20px); opacity:0; pointer-events:none; font-size:11px; transition:180ms ease; }
.toast.visible { transform:translate(-50%,0); opacity:1; }
.pwa-update { position:fixed; z-index:90; left:50%; bottom:22px; width:min(540px,calc(100vw - 28px)); display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid var(--line); padding:11px 12px 11px 16px; background:#1d1d1a; box-shadow:0 18px 50px rgba(0,0,0,.38); transform:translateX(-50%); }
.pwa-update span { color:#c8c5bc; font-size:11px; line-height:1.4; }
.pwa-update button { flex:0 0 auto; border:1px solid var(--acid); padding:9px 11px; background:transparent; color:var(--acid); cursor:pointer; font-size:10px; }
.pwa-update button:disabled { opacity:.55; cursor:default; }

.data-dialog { width:min(620px,calc(100vw - 32px)); max-height:min(780px,calc(100vh - 32px)); border:1px solid var(--line); padding:44px; background:#151513; color:var(--paper); overflow:auto; }
.data-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(5px); }
.data-dialog h2 { margin:0; font-size:clamp(38px,6vw,62px); letter-spacing:-.055em; }
.data-dialog>p:not(.eyebrow) { color:var(--muted); line-height:1.6; }
.dialog-close { position:absolute; z-index:3; right:16px; top:14px; width:38px; height:38px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:24px; }
.data-summary { margin:28px 0; padding:18px 0; display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.data-summary strong { font-size:18px; }
.data-summary span { color:#77746d; font-size:10px; }
.data-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.data-actions .primary-button,.data-actions .secondary-button { width:100%; min-width:0; }
.import-report { margin-top:34px; }
.import-report h3 { margin:0 0 13px; font-size:11px; text-transform:uppercase; letter-spacing:.13em; }
.import-report dl { margin:0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.import-report dl div { padding:13px 0; display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.import-report dl div:nth-child(odd) { padding-right:16px; border-right:1px solid var(--line); }
.import-report dl div:nth-child(even) { padding-left:16px; }
.import-report dt { color:#77746d; font-size:9px; }
.import-report dd { margin:0; font-size:11px; }
.data-fineprint { margin:28px 0 0; font-size:10px; }
.data-fineprint a { color:var(--acid); }

.onboarding-dialog { width:min(1040px,calc(100vw - 32px)); max-height:min(820px,calc(100vh - 32px)); border:1px solid var(--line); padding:0; background:#151513; color:var(--paper); overflow:auto; scroll-padding-bottom:96px; }
.onboarding-dialog::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(6px); }
.guide-layout { display:grid; grid-template-columns:250px minmax(0,1fr); }
.guide-header { position:relative; grid-column:1/-1; padding:42px 68px 34px; border-bottom:1px solid var(--line); background:radial-gradient(circle at 86% 0%,rgba(156,140,255,.14),transparent 24rem); }
.guide-header .eyebrow { margin-bottom:10px; }
.guide-header h2 { margin:0; font-size:clamp(36px,5vw,62px); letter-spacing:-.055em; }
.guide-step-status { position:absolute; right:68px; top:42px; margin:0; color:#77746d; font-size:10px; text-transform:uppercase; letter-spacing:.14em; }
.guide-header .privacy-reassurance { margin-top:22px; }
.guide-progress { border-right:1px solid var(--line); padding:36px 26px; }
.guide-progress ol { position:sticky; top:0; margin:0; padding:0; display:grid; gap:7px; list-style:none; }
.guide-progress button { width:100%; border:1px solid transparent; padding:13px 12px; display:flex; align-items:center; gap:14px; background:transparent; color:#858278; cursor:pointer; text-align:left; font-size:11px; }
.guide-progress button span { color:#5f5c55; font-size:9px; letter-spacing:.12em; }
.guide-progress button:hover { color:var(--paper); }
.guide-progress button[aria-current="step"] { border-color:var(--line); background:#1d1d1a; color:var(--paper); }
.guide-progress button[aria-current="step"] span { color:var(--acid); }
.guide-panels { min-height:470px; padding:44px 64px 34px; }
.guide-panel { max-width:660px; }
.guide-kicker { margin:0 0 17px; color:var(--acid); font-size:9px; font-weight:700; letter-spacing:.17em; }
.guide-panel h3 { margin:0; font-size:clamp(31px,4vw,48px); letter-spacing:-.045em; outline:0; }
.guide-panel>p:not(.guide-kicker,.guide-fineprint) { margin:20px 0 0; color:#c1beb5; font-family:Georgia,"Times New Roman",serif; font-size:17px; line-height:1.6; }
.instruction-list { margin:25px 0; padding:0; list-style:none; counter-reset:guide-item; }
.instruction-list li { position:relative; min-height:35px; padding:8px 0 14px 46px; color:#aaa79e; font-size:13px; line-height:1.6; counter-increment:guide-item; }
.instruction-list li+li { border-top:1px solid var(--line); padding-top:15px; }
.instruction-list li::before { content:counter(guide-item,decimal-leading-zero); position:absolute; left:0; top:10px; color:var(--acid); font-size:9px; letter-spacing:.1em; }
.instruction-list li+li::before { top:17px; }
.instruction-list strong { color:var(--paper); }
.official-link { width:max-content; max-width:100%; display:inline-flex; gap:14px; border-bottom:1px solid var(--acid); padding-bottom:5px; color:var(--acid); text-decoration:none; font-size:11px; }
.guide-note { margin-top:28px; border-left:2px solid var(--violet); padding:4px 0 4px 16px; display:grid; gap:7px; }
.guide-note strong { font-size:12px; }
.guide-note span { color:#8f8c84; font-size:11px; line-height:1.6; }
.platform-cards { margin-top:30px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.platform-cards article { border:1px solid var(--line); padding:22px; background:#11110f; }
.platform-cards article>span { color:var(--acid); font-size:9px; text-transform:uppercase; letter-spacing:.15em; }
.platform-cards h4 { margin:19px 0 8px; font-size:17px; }
.platform-cards p { margin:0; color:#96938b; font-size:12px; line-height:1.55; }
.guide-fineprint { margin:20px 0 0; color:#77746d; font-size:10px; line-height:1.6; }
.platform-switch { margin-top:28px; display:inline-flex; border:1px solid var(--line); padding:3px; }
.platform-switch button { min-width:110px; border:0; padding:10px 15px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; }
.platform-switch button[aria-pressed="true"] { background:var(--paper); color:var(--ink); }
.platform-instructions .instruction-list { margin-bottom:0; }
.guide-choose-button { margin-top:30px; }
.guide-navigation { position:sticky; z-index:2; bottom:0; grid-column:2; padding:20px 64px 28px; display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); background:#151513; }
.guide-navigation .primary-button,.guide-navigation .secondary-button { width:auto; min-width:150px; }
.guide-navigation button:disabled { opacity:.32; cursor:default; transform:none; box-shadow:none; }

.site-footer { min-height:82px; padding:26px clamp(20px,4vw,68px); display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); color:#77746d; font-size:10px; }
.site-footer nav { display:flex; gap:20px; }
.site-footer a { color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; }
.site-footer a:hover { color:var(--paper); border-color:var(--paper); }

.document-page { min-height:100vh; }
.document-page .topbar { grid-template-columns:1fr auto; }
.document-content { width:min(860px,100%); margin:0 auto; padding:clamp(72px,10vw,130px) 24px 110px; }
.document-content h1 { margin:0; font-size:clamp(52px,9vw,100px); line-height:.9; letter-spacing:-.065em; }
.document-lede { margin:40px 0 70px; color:#c9c6bd; font-family:Georgia,serif; font-size:clamp(20px,3vw,28px); line-height:1.55; }
.document-content section { padding:30px 0; display:grid; grid-template-columns:minmax(180px,.35fr) minmax(0,1fr); gap:34px; border-top:1px solid var(--line); }
.document-content section h2 { margin:0; font-size:15px; }
.document-content section p { margin:0; color:var(--muted); line-height:1.75; }

@media (max-width:1100px) {
  .welcome { grid-template-columns:1fr; } .welcome-art { min-height:470px; } .art-card { width:min(46vw,360px); }
  .gallery { grid-template-columns:repeat(4,minmax(0,1fr)); } .toolbar { grid-template-columns:1fr auto auto; } .toolbar>.sort-select:last-child { display:none; }
  .lightbox[open] { grid-template-columns:minmax(0,1fr) 340px; } .lightbox-next { right:356px; }
}
@media (min-width:1101px) and (max-height:950px) {
  .welcome { padding-top:50px; row-gap:44px; }
  .welcome h1 { font-size:clamp(58px,6.2vw,96px); }
  .lede { margin-top:26px; }
  .welcome-actions { margin-top:30px; }
  .privacy-reassurance { margin-top:20px; }
  .welcome-art { min-height:460px; }
}
@media (max-width:780px) {
  .topbar { grid-template-columns:1fr auto; padding:0 18px; } .privacy-note { display:none; } .topbar-actions { gap:12px; }
  .install-wide { display:none; } .install-short { display:inline; }
  .welcome { padding-top:62px; gap:54px; } .welcome h1 { font-size:clamp(54px,16vw,88px); } .welcome-art { min-height:390px; margin-left:-4vw; } .art-card { width:54vw; }
  .welcome-footnotes { grid-template-columns:1fr; } .welcome-footnotes div,.welcome-footnotes div+div { border-right:0; border-bottom:1px solid var(--line); padding:17px 0; }
  .library { padding-top:48px; } .library-heading { display:block; } .library-heading h1 { font-size:clamp(47px,13vw,74px); } .archive-summary { align-items:flex-start; margin-top:28px; }
  .stats-row { grid-template-columns:1fr 1fr; } .stat-card:nth-child(2) { border-right:0; } .stat-card:nth-child(n+3) { border-top:1px solid var(--line); } .stat-card:nth-child(3) { padding-left:0; }
  .toolbar { top:74px; grid-template-columns:1fr; padding-bottom:12px; } .filter-group { overflow-x:auto; } .filter-button { flex:1; min-width:max-content; } .album-select { max-width:none; } .toolbar>.sort-select:last-child { display:none; }
  .gallery,.gallery.roomy { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 10px; } .card-body>p { font-size:12px; }
  .lightbox[open] { display:block; overflow:auto; } .lightbox-stage { min-height:62vh; padding:58px 18px 30px; } .lightbox-details { min-height:38vh; border-left:0; border-top:1px solid var(--line); padding:34px 22px; }
  .lightbox-next { right:14px; } .lightbox-prev { left:14px; } .lightbox-nav { top:31vh; }
  .video-player-shell { height:calc(62vh - 88px); min-height:330px; }
  .video-controls { bottom:12px; width:calc(100% - 20px); grid-template-columns:40px minmax(58px,1fr) minmax(96px,112px) 42px; gap:4px; padding-left:5px; padding-right:5px; }
  .video-controls [data-video-time] { display:none; }
  .video-volume-panel { min-width:96px; gap:4px; }
  .video-volume-panel input[type="range"] { min-width:0; width:100%; }
  .data-dialog { padding:36px 22px; } .data-actions { grid-template-columns:1fr; }
  .onboarding-dialog { width:calc(100vw - 20px); max-height:calc(100vh - 20px); }
  .guide-layout { grid-template-columns:1fr; }
  .guide-header { padding:34px 24px 26px; }
  .guide-step-status { position:static; margin-bottom:9px; }
  .guide-header .eyebrow { display:none; }
  .guide-progress { border-right:0; border-bottom:1px solid var(--line); padding:12px 16px; overflow-x:auto; }
  .guide-progress ol { display:flex; gap:5px; }
  .guide-progress li { flex:1 0 auto; }
  .guide-progress button { justify-content:center; padding:10px; }
  .guide-progress button span { display:none; }
  .guide-panels { min-height:0; padding:34px 24px 28px; }
  .guide-navigation { grid-column:1; padding:18px 24px 24px; }
  .document-content section { grid-template-columns:1fr; gap:12px; }
  .site-footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width:480px) {
  .brand { font-size:11px; } .brand-mark { width:24px; height:24px; } .topbar-actions .quiet-button { font-size:10px; } .welcome { padding-left:18px; padding-right:18px; } .welcome h1 { font-size:52px; }
  .welcome-actions { display:grid; } .welcome-actions .primary-button,.welcome-actions .secondary-button { width:100%; } .welcome-art { min-height:320px; } .art-card { width:58vw; }
  .error-actions { display:grid; width:100%; } .error-actions .primary-button,.error-actions .secondary-button { width:100%; }
  .platform-cards { grid-template-columns:1fr; }
  .guide-navigation .primary-button,.guide-navigation .secondary-button { min-width:0; width:50%; }
  .library { padding-left:14px; padding-right:14px; } .stat-card { padding:18px 12px 18px 0; } .stat-card+.stat-card { padding-left:12px; } .stat-card:nth-child(3) { padding-left:0; } .stat-card strong { font-size:27px; }
  .gallery,.gallery.roomy { grid-template-columns:1fr 1fr; gap:25px 7px; } .card-meta span:last-child { display:none; }
  .pagination { grid-template-columns:1fr 1fr; } .pagination span { grid-column:1/-1; grid-row:1; justify-self:center; } .pagination button { grid-row:2; }
  .import-report dl { grid-template-columns:1fr; } .import-report dl div:nth-child(odd),.import-report dl div:nth-child(even) { padding-left:0; padding-right:0; border-right:0; }
  .pwa-update { align-items:flex-start; flex-direction:column; gap:10px; } .pwa-update button { width:100%; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }