.archive-screen{--base-unit:2;--unit:var(--base-unit);color:#aaa;background:#080808;min-height:100svh;font:12px/1.5 system-ui,sans-serif}.archive-screen #ambient{z-index:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none;position:fixed;inset:0}.archive-screen #study{z-index:1;max-width:1280px;margin:0 auto;padding:28px 20px 24px;position:relative}.archive-screen #layout{grid-template-columns:calc(130px * var(--unit)) minmax(0, 1fr);gap:calc(5px * var(--unit));align-items:start;display:grid}.archive-screen #showcase{gap:calc(3px * var(--unit));padding:calc(5px * var(--unit));flex-direction:column;min-width:0;display:flex;position:sticky;top:8px}.archive-screen #selection-info,.archive-screen #board-column{min-width:0}.archive-screen #loading{text-align:center;margin:60px auto}.archive-screen .ff-window{background-color:#5d5f59;background-image:var(--window-grain), var(--window-texture);background-size:calc(2px * var(--unit)) calc(2px * var(--unit)), 100% 100%;border:calc(1px * var(--unit)) solid #181916;box-shadow:inset calc(1px * var(--unit)) calc(1px * var(--unit)) #9a9a90, inset calc(-1px * var(--unit)) calc(-1px * var(--unit)) #333431, inset calc(2px * var(--unit)) calc(2px * var(--unit)) #81817a, inset calc(-2px * var(--unit)) calc(-2px * var(--unit)) #4d4e48;background-repeat:repeat,no-repeat;position:relative}.archive-screen #title-band{margin-bottom:calc(5px * var(--unit))}.archive-screen .title-row{position:relative}.archive-screen #bgm{align-items:center;gap:calc(3px * var(--unit));height:calc(20px * var(--unit));padding:0 calc(5px * var(--unit));margin-bottom:calc(5px * var(--unit));color:#eeeee7;font:calc(7px * var(--unit))/1 var(--font-galmuri), monospace;display:flex}.archive-screen #bgm .bgm-frame{opacity:0;pointer-events:none;width:1px;height:1px;position:fixed;bottom:0;right:0;overflow:hidden}.archive-screen #bgm .bgm-note{color:#8c8e84}.archive-screen #bgm .bgm-note.is-playing{color:#eee5b0}.archive-screen #bgm .bgm-title{white-space:nowrap;text-shadow:1px 1px #22221f;flex:1;min-width:0;overflow:hidden}.archive-screen #bgm .bgm-marquee{width:100%;display:flex}.archive-screen #bgm .bgm-marquee>span{padding-right:calc(24px * var(--unit));flex:none}.archive-screen #bgm .bgm-marquee>span:last-child{display:none}.archive-screen #bgm .bgm-marquee:not(.is-running)>span:first-child,.archive-screen:not([data-motion=on]) #bgm .bgm-marquee>span:first-child{text-overflow:ellipsis;flex:1;min-width:0;padding-right:0;overflow:hidden}.archive-screen[data-motion=on] #bgm .bgm-marquee.is-running{width:max-content;animation:bgm-marquee var(--marquee-duration) steps(var(--marquee-steps)) infinite}.archive-screen[data-motion=on] #bgm .bgm-marquee.is-running>span:last-child{display:block}@keyframes bgm-marquee{0%{transform:translate(0)}to{transform:translate(-50%)}}.archive-screen #bgm button{width:calc(14px * var(--unit));height:calc(14px * var(--unit));cursor:pointer;background:0 0;border:0;flex:none;place-items:center;padding:0;display:grid}.archive-screen #bgm button svg{width:calc(8px * var(--unit));height:calc(7px * var(--unit));fill:#eeeee7;shape-rendering:crispedges;filter:drop-shadow(1px 1px #22221f)}.archive-screen #bgm button:hover svg,.archive-screen #bgm button[aria-pressed=true] svg{fill:#eee5b0}.archive-screen #bgm button:focus-visible{outline-offset:1px;outline:2px solid #e8dfa1}@media (max-width:959px){.archive-screen #bgm{gap:2px;height:44px;padding:0 4px 0 12px;font-size:14px}.archive-screen #bgm button{width:44px;height:44px}.archive-screen #bgm button svg{width:16px;height:14px}}@media (min-width:960px){.archive-screen #bgm{top:calc(10px * var(--unit));right:calc(8px * var(--unit));width:calc(170px * var(--unit));box-shadow:none;padding:0 0 0 calc(8px * var(--unit));border:0;border-left:calc(1px * var(--unit)) solid #33342f;background:0 0;margin:0;position:absolute}}.archive-screen .menu-bar{grid-template-columns:minmax(0, 1fr) calc(76px * var(--unit));margin-bottom:calc(5px * var(--unit));display:grid}.archive-screen .menu-bar>#collection-count{border-left:calc(1px * var(--unit)) solid #33342f;box-shadow:inset calc(1px * var(--unit)) 0 #7a7b74}.archive-screen #categories{padding:calc(3px * var(--unit));display:flex}.archive-screen .category-button{min-width:0;height:calc(29px * var(--unit));cursor:pointer;background:0 0;border:0;flex:1;padding:0;position:relative}.archive-screen #collection-count{min-width:0}.archive-screen .raster{image-rendering:auto;display:block}.archive-screen #junction{align-items:center;gap:calc(3px * var(--unit));padding:calc(5px * var(--unit)) calc(6px * var(--unit));border-bottom:calc(1px * var(--unit)) solid #33342f;box-shadow:0 calc(1px * var(--unit)) #7a7b74;flex-wrap:wrap;display:flex}.archive-screen #board-search{flex:1 1 calc(90px * var(--unit));min-width:calc(70px * var(--unit));height:calc(17px * var(--unit));box-sizing:border-box;color:#eeeee7;border:calc(1px * var(--unit)) solid #353930;font:calc(7px * var(--unit))/1 var(--font-galmuri), monospace;background:#1a1b18;outline:none;padding:0 8px}.archive-screen #board-search:focus-visible{border-color:#e8dfa1}.archive-screen #board-search::placeholder{color:#8c8e84}.archive-screen #junction{flex-wrap:nowrap;position:relative}.archive-screen .view-switch{border-left:calc(1px * var(--unit)) solid #33342f;box-shadow:inset calc(1px * var(--unit)) 0 #7a7b74;padding-left:calc(3px * var(--unit));flex:none;display:flex}.archive-screen .view-option,.archive-screen .filter-button,.archive-screen .filter-clear,.archive-screen .filter-row,.archive-screen .filter-close{height:calc(17px * var(--unit));cursor:pointer;background:0 0;border:0;padding:0}.archive-screen .view-option{width:calc(40px * var(--unit))}.archive-screen .filter-button{width:calc(62px * var(--unit));flex:none}.archive-screen .filter-clear{width:calc(17px * var(--unit));flex:none}.archive-screen .filter-panel{z-index:6;top:calc(100% + 2px * var(--unit));right:calc(4px * var(--unit));width:calc(118px * var(--unit));padding:calc(5px * var(--unit));gap:calc(3px * var(--unit));display:grid;position:absolute;box-shadow:0 6px 18px #000b}.archive-screen .filter-group{display:grid}.archive-screen .filter-group+.filter-group,.archive-screen .filter-close{border-top:calc(1px * var(--unit)) solid #33342f;box-shadow:inset 0 calc(1px * var(--unit)) #7a7b74;padding-top:calc(3px * var(--unit))}.archive-screen .filter-row,.archive-screen .filter-close{width:100%;height:calc(19px * var(--unit))}.archive-screen .filter-close{height:calc(22px * var(--unit))}.archive-screen .view-option:focus-visible,.archive-screen .filter-button:focus-visible,.archive-screen .filter-clear:focus-visible,.archive-screen .filter-row:focus-visible,.archive-screen .filter-close:focus-visible{outline-offset:1px;outline:2px solid #e8dfa1}.archive-screen .timeline-axis{height:calc(14px * var(--unit))}.archive-screen .tier-items.timeline{min-height:calc(24px * var(--unit));padding:0;display:block;position:relative}.archive-screen .work-slot.mini{width:calc(14px * var(--unit));height:calc(17px * var(--unit));position:absolute}.archive-screen .tick{pointer-events:none;border-left:1px solid #3d4038;position:absolute;top:0;bottom:0}.archive-screen .work-card.is-dim{opacity:.22;filter:grayscale()}.archive-screen #tier-board{flex-direction:column;display:flex}.archive-screen .tier-row+.tier-row{border-top:calc(1px * var(--unit)) solid #33342f;box-shadow:inset 0 calc(1px * var(--unit)) #7a7b74}.archive-screen #tier-board.is-switching{overflow:hidden}.archive-screen .tier-row{grid-template-columns:calc(43px * var(--unit)) minmax(0, 1fr);min-height:calc(34px * var(--unit));display:grid}.archive-screen .rank-cell{border-right:calc(1px * var(--unit)) solid #3d4038;margin:calc(3px * var(--unit)) 0;position:relative}.archive-screen .rank-art{width:100%;position:sticky;top:8px}.archive-screen .tier-row.want{background-color:#0000001a}.archive-screen .tier-items{align-content:start;gap:calc(3px * var(--unit));padding:calc(6px * var(--unit)) calc(8px * var(--unit));flex-wrap:wrap;min-width:0;margin:0;list-style:none;display:flex}.archive-screen .work-slot{width:calc(24px * var(--unit));height:calc(29px * var(--unit));flex:none}.archive-screen .work-card{cursor:pointer;transform-origin:50% 100%;background:0 0;border:0;width:100%;height:100%;padding:0;scroll-margin-top:90px;scroll-margin-bottom:150px;transition:transform .12s ease-out;display:block;position:relative}.archive-screen .work-card.is-near{z-index:1;transform:scale(1.25)}.archive-screen .work-card.is-selected{z-index:2;width:160%;box-shadow:0 0 0 calc(1px * var(--unit)) #eee8b4, 0 4px 10px #000b;transform-origin:50% 100%;animation:.12s ease-out card-pop;position:absolute;bottom:0;left:-30%}@keyframes card-pop{0%{transform:scale(.625)}to{transform:scale(1)}}.archive-screen .work-slot{position:relative}.archive-screen[data-motion=off] .work-card{transition:none;animation:none}@media (prefers-reduced-motion:reduce){.archive-screen .work-card{transition:none;animation:none}}.archive-screen .selection-motion{pointer-events:none;image-rendering:auto;width:100%;height:100%;position:absolute;inset:0}.archive-screen .work-card:focus-visible{outline-offset:1px;outline:1px dotted #f2e9b1}.archive-screen .work-card.is-lifted{outline-offset:2px;outline:2px dashed #f2e9b1}.archive-screen #tier-board.is-owner .work-card{touch-action:pan-y;cursor:grab}.archive-screen #tier-board.is-owner .work-card.is-lifted{cursor:grabbing;opacity:.55}.archive-screen .drag-ghost{z-index:7;width:calc(24px * var(--unit));pointer-events:none;opacity:.92;filter:drop-shadow(0 6px 10px #000c);position:fixed;top:0;left:0}.archive-screen .empty-art{width:calc(24px * var(--unit));height:calc(12px * var(--unit))}.archive-screen #open-selected{width:100%;height:calc(24px * var(--unit));cursor:pointer;background:#5b5e58;border:0;padding:0}.archive-screen #open-selected:focus-visible{outline-offset:2px;outline:2px solid #e8dfa1}.archive-screen #open-selected:disabled{cursor:default;opacity:.6}.archive-screen .caption{text-align:center;color:#888;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;margin:12px 0;font-size:11px;display:flex}.archive-screen .caption button{font:inherit;color:#c8c8c8;cursor:pointer;background:#222;border:1px solid #555;padding:3px 8px}.archive-screen .caption button[aria-pressed=true]{color:#151515;background:#c6c6bf}.archive-screen .caption a{color:#bbb;text-underline-offset:3px}.archive-screen .caption button:focus-visible,.archive-screen .caption a:focus-visible,.archive-screen .category-button:focus-visible{outline-offset:3px;outline:2px solid #e8dfa1}.archive-screen .sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#detail-dialog{touch-action:pan-y;color:#eee;width:min(840px,100vw - 32px);max-height:calc(100dvh - 32px);padding:calc(7px * var(--unit,2));border-radius:0;margin:auto;position:fixed;inset:0;overflow:hidden}#detail-dialog #detail-scroll{touch-action:pan-y;max-height:calc(100dvh - 32px - 16px * var(--unit,2));overflow:auto}#detail-dialog::backdrop{background:#000c}#detail-dialog #detail-header{border-bottom:calc(1px * var(--unit,2)) solid #353930;min-width:0;padding-bottom:calc(5px * var(--unit,2))}#detail-dialog #detail-body{padding:calc(8px * var(--unit,2)) calc(5px * var(--unit,2))}#detail-dialog .raster-block{width:100%}#detail-dialog #detail-actions{gap:calc(4px * var(--unit,2));padding:calc(4px * var(--unit,2)) 0;display:flex}#detail-dialog #detail-actions button,#detail-dialog .editor-actions button{height:calc(27px * var(--unit,2));cursor:pointer;background:#5b5e58;border:0;padding:0}#detail-dialog #detail-move,#detail-dialog #detail-share,#detail-dialog .editor-actions button{width:calc(60px * var(--unit,2))}#detail-dialog #detail-edit{width:calc(80px * var(--unit,2))}#detail-dialog #detail-drop{width:calc(104px * var(--unit,2))}#detail-dialog button:focus-visible{outline-offset:2px;outline:2px solid #e8dfa1}#detail-dialog .comment-editor{box-sizing:border-box;color:#eeeee7;border:calc(1px * var(--unit,2)) solid #353930;width:100%;font:16px/1.5 var(--font-dgm), var(--font-galmuri), monospace;resize:vertical;background:#1a1b18;padding:8px;display:block}#detail-dialog .editor-actions{gap:8px;margin-top:8px;display:flex}#detail-dialog .editor-error{color:#e8b0a0;margin:6px 0 0;font:12px/1.4 system-ui,sans-serif}#detail-dialog #detail-foot{align-items:center;gap:calc(4px * var(--unit,2));display:flex;position:sticky;bottom:0}#detail-dialog #detail-prev,#detail-dialog #detail-next{width:calc(32px * var(--unit,2));height:calc(27px * var(--unit,2));cursor:pointer;background:#5b5e58;border:0;padding:0}#detail-dialog #detail-close{width:calc(101px * var(--unit,2));height:calc(27px * var(--unit,2));cursor:pointer;background:#5b5e58;border:0;margin-left:auto;padding:0;display:block}@media (max-width:1000px){.archive-screen{--base-unit:1.75}.archive-screen #layout{grid-template-columns:1fr}.archive-screen #study{padding-bottom:calc(60px * var(--unit) + env(safe-area-inset-bottom,0px))}.archive-screen #showcase{z-index:5;top:auto;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:calc(3px * var(--unit));max-width:1264px;box-shadow:0 0 0 calc(1px * var(--unit)) #000, 0 -6px 18px #000a;flex-direction:row;align-items:stretch;margin:0 auto;position:fixed}.archive-screen #selection-info{flex:1}.archive-screen .filter-panel{width:auto;top:auto;left:8px;right:8px;bottom:calc(8px + 44px * var(--unit) + env(safe-area-inset-bottom,0px));z-index:7;position:fixed}.archive-screen #open-selected{flex:0 0 calc(34px * var(--unit));border-left:calc(1px * var(--unit)) solid #33342f;height:auto;box-shadow:inset calc(1px * var(--unit)) 0 #7a7b74;background:0 0}}@media (max-width:650px){.archive-screen{--base-unit:1.25}.archive-screen #study{padding:18px 8px 20px}.archive-screen .menu-bar{grid-template-columns:minmax(0,1fr)}.archive-screen .menu-bar>#collection-count{display:none}.archive-screen .tier-items{gap:calc(3px * var(--unit));padding-inline:calc(3px * var(--unit))}.archive-screen .caption{padding:0 8px;font-size:10px}#detail-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:calc(6px * var(--unit))}#detail-dialog #detail-scroll{max-height:calc(100dvh - 16px - 14px * var(--unit))}}