:root{--bg:#fff;--text:#111;--muted:#8a8a8a;--line:#e4e4e4;--accent:#e0301e;--row-h:24px;--gutter:24px;--header-h:48px;--col-gap:16px;--font:Arial, Helvetica, sans-serif}*,:before,:after{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:12px;line-height:var(--row-h);margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.site-header{z-index:30;height:var(--header-h);padding:0 var(--gutter);background:var(--bg);border-bottom:1px solid var(--text);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.brand{align-items:center;gap:3px;font-size:13px;font-weight:600;display:inline-flex}.grid-toggle{color:var(--muted);font-size:9px;font-weight:400;line-height:1;position:relative;top:-5px}.grid-toggle[aria-pressed=true]{color:var(--accent)}.nav{gap:16px;display:flex}.nav-link{color:var(--muted)}.nav>a.nav-link{text-align:left;width:40px}.nav-link:hover,.nav-link:focus-visible{color:var(--text)}.list{padding:0 var(--gutter);margin:0;list-style:none}.list>li{height:var(--row-h);border-bottom:1px solid var(--line)}.row{width:100%;height:100%;padding-top:calc(var(--row-h) - 16px);text-align:left;white-space:nowrap;grid-template-columns:48px minmax(0,.569fr) minmax(0,1fr) 72px;line-height:15px;display:grid}.row>img{object-fit:contain;place-self:center;width:28px;height:20px}.row>span{text-overflow:ellipsis;overflow:hidden}.row .num,.row .date{color:var(--muted)}.row .date{text-overflow:clip;overflow:visible}.row[data-active=true],.row[data-active=true]>span{color:var(--accent)}.row:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}.placeholder{padding:var(--gutter);color:var(--muted)}@media (hover:none){:root{--row-h:36px}}@media (width<=640px){:root{--gutter:16px;--col-gap:8px}.row{grid-template-columns:36px minmax(0,1fr) minmax(0,1fr)}.row .date{display:none}}.cursor-preview{z-index:20;pointer-events:none;visibility:hidden;will-change:transform;background:#f2f2f2;position:fixed;top:0;left:0;box-shadow:0 2px 14px #0000002e}.cursor-preview img{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .12s;display:block}.cursor-preview img[data-loaded=true]{opacity:1}@media (hover:none),(pointer:coarse){.cursor-preview{display:none}}.lightbox{z-index:50;touch-action:pan-y;background:#fffffff0;justify-content:center;align-items:center;padding:56px 80px 64px;animation:.15s lightbox-in;display:flex;position:fixed;inset:0}@keyframes lightbox-in{0%{opacity:0}to{opacity:1}}.lightbox-figure{margin:0;display:flex}.lightbox-figure img{opacity:0;user-select:none;background:#f2f2f2;width:auto;max-width:calc(100vw - 160px);height:auto;max-height:calc(100dvh - 120px);transition:opacity .15s;display:block}.lightbox-figure img[data-loaded=true]{opacity:1}.lightbox-btn{width:44px;height:44px;color:var(--text);place-items:center;display:grid;position:absolute}.lightbox-btn:hover{color:var(--accent)}.lightbox-btn:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}.lightbox-close{top:8px;right:12px}.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%)}.lightbox-prev{left:16px}.lightbox-next{right:16px}.lightbox-info{flex-wrap:wrap;gap:0 12px;max-width:calc(100% - 48px);display:flex;position:absolute;bottom:20px;left:24px}.lightbox-info .date{color:var(--muted)}@media (width<=640px){.lightbox{padding:56px 16px 72px}.lightbox-figure img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 128px)}.lightbox-prev,.lightbox-next{top:auto;bottom:8px;transform:none}.lightbox-prev{left:auto;right:60px}.lightbox-next{right:12px}.lightbox-info{max-width:calc(100% - 128px);bottom:16px;left:16px}}@media (prefers-reduced-motion:reduce){.lightbox,.lightbox-figure img{transition:none;animation:none}}.grid-overlay{z-index:40;pointer-events:none;column-gap:var(--col-gap);padding:0 var(--gutter);background-image:linear-gradient(to bottom, transparent calc(var(--row-h) - 1px), #e0301e38 calc(var(--row-h) - 1px));background-size:100% var(--row-h);background-position:0 var(--header-h);grid-template-columns:repeat(12,minmax(0,1fr));display:grid;position:fixed;inset:0}.grid-overlay span{background:#e0301e0f;border-inline:1px solid #e0301e73}.stage,.mode-toggle{display:none}@media (width>=768px){.mode-toggle{display:inline}.gallery[data-mode=stage]{column-gap:var(--col-gap);padding:0 var(--gutter);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;display:grid}.gallery[data-mode=stage] .list{grid-column:1/span 5;padding:0}.gallery[data-mode=stage] .row{grid-template-columns:48px minmax(0,1.24fr) minmax(0,1fr) 96px}.gallery[data-mode=stage] .stage{top:var(--header-h);height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));padding-top:calc(var(--row-h) * 3);grid-column:6/span 7;display:block;position:sticky}}.stage-box{column-gap:var(--col-gap);grid-template-columns:repeat(7,minmax(0,1fr));align-content:center;display:grid}.stage-figure{margin:0;position:relative}.stage-figure img{opacity:0;background:#f2f2f2;width:100%;height:auto;transition:opacity .15s;display:block}.stage-figure img[data-loaded=true]{opacity:1}.stage-caption{white-space:nowrap;gap:12px;margin-top:16px;display:flex;position:absolute;top:100%;left:0}.stage-caption .num{color:var(--accent)}.stage-caption .date{color:var(--muted)}@media (prefers-reduced-motion:reduce){.stage-figure img{transition:none}}.canvas-viewport{height:calc(100vh - var(--header-h));height:calc(100dvh - var(--header-h));cursor:grab;touch-action:none;user-select:none;position:relative;overflow:hidden}.canvas-viewport:not([data-ready]){visibility:hidden}.canvas-viewport[data-dragging=true]{cursor:grabbing}.canvas-world{transform-origin:0 0;--inv:1;width:0;height:0;position:absolute;top:0;left:0}.canvas-item{cursor:pointer;background:#f2f2f2;padding:0;display:block;position:absolute}.canvas-item img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.canvas-item[data-active=true],.canvas-item:focus-visible{z-index:2;outline:calc(2px * var(--inv)) solid var(--accent);outline-offset:calc(2px * var(--inv))}.canvas-caption{left:var(--gutter);pointer-events:none;flex-wrap:wrap;gap:0 12px;max-width:calc(100% - 160px);display:flex;position:absolute;bottom:20px}.canvas-caption .num{color:var(--accent)}.canvas-caption .date{color:var(--muted)}.canvas-controls{right:var(--gutter);gap:4px;display:flex;position:absolute;bottom:14px}.canvas-controls button{min-width:32px;height:32px;color:var(--muted);padding:0 8px}.canvas-controls button:hover,.canvas-controls button:focus-visible{color:var(--text)}.placeholder a{color:var(--text);text-decoration:underline}
