.immersive-detail{height:100svh;overflow:hidden;background:#11120f}
.immersive-detail main{height:100%;position:relative;isolation:isolate}
.detail-art,.detail-entering{position:absolute;inset:0;overflow:hidden;background:#11120f}
.detail-art{touch-action:none;cursor:grab;outline-offset:-4px}
.detail-art:active{cursor:grabbing}
.detail-art img,.detail-entering img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;user-select:none;pointer-events:none;transform-origin:center}
.detail-entering{pointer-events:none;z-index:2}
.detail-dock{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:max-content;max-width:calc(100vw - 32px)}
.detail-dock-row{display:flex;align-items:center;gap:8px}
.detail-dock-main{display:flex;align-items:center;gap:6px;min-height:64px;padding:8px;background:rgb(0 0 0 / 80%);border:1px solid #ffffff12;border-radius:999px}
.immersive-detail button,.dock-close{font:inherit;color:#fff;border:0;box-shadow:none;background:transparent;cursor:pointer;text-decoration:none;min-height:44px;flex-shrink:0}
.immersive-detail button:focus-visible,.dock-close:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.immersive-detail button:disabled{opacity:.3;cursor:default}
.dock-project{display:flex;gap:12px;max-width:260px;padding:0 10px 0 2px}
.dock-project img{width:40px;height:40px;object-fit:cover;border-radius:var(--button-radius)}
.dock-project>span{min-width:0;max-width:180px;display:flex;flex-direction:column;gap:2px}
.dock-project small{font-size:.75rem;color:#a7a7a7;font-weight:400}
.dock-project strong{font-size:.9375rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-arrow,.dock-zoom-toggle,.dock-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:var(--button-radius)}
.detail-dock .dock-arrow,.detail-dock .dock-zoom-toggle{background:#ffffff09}
.detail-dock .dock-close{background:rgb(0 0 0 / 80%);width:56px;height:56px}
.detail-dock button:hover:not(:disabled),.detail-dock .dock-close:hover{background:#ffffff20}
.detail-dock .dock-close:hover{background:#333c}
.detail-dock .dock-arrow{width:0;min-width:0;opacity:0;overflow:hidden;transition:width .22s ease,opacity .22s;pointer-events:none}
.detail-dock:hover .dock-arrow,.detail-dock:focus-within .dock-arrow{width:44px;opacity:1;pointer-events:auto}
.detail-dock.zoom-open .dock-arrow,.detail-dock.zoom-open .dock-zoom-toggle{display:none}
.detail-dock.zoom-open .dock-project>span{display:none}
.dock-zoom{display:flex;align-items:center;gap:14px;width:220px;padding-right:10px}
#detail-zoom{appearance:none;width:100%;min-width:0;height:44px;background:transparent;cursor:ew-resize;--fill:0%}
#detail-zoom::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,#fff var(--fill),#ffffff40 var(--fill));border-radius:1px}
#detail-zoom::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-7px;border:0}
#detail-zoom::-moz-range-track{height:2px;background:#ffffff40}
#detail-zoom::-moz-range-progress{height:2px;background:#fff}
#detail-zoom::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0}
#detail-zoom-output{font-size:.8125rem;min-width:4ch;font-variant-numeric:tabular-nums}
.detail-collection{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));max-height:calc(50svh - 60px);overflow:auto;overscroll-behavior:contain;background:rgb(0 0 0 / 80%);border:1px solid #ffffff20;border-radius:var(--button-radius);padding:20px;scrollbar-width:thin}
.detail-project-info h1{font-size:1.125rem;font-weight:700;line-height:1.4;margin:0}
.detail-project-info p{font-size:.875rem;line-height:1.6;white-space:pre-wrap;color:#cecec9;margin:10px 0 0}
.detail-project-info p:empty{display:none}
.detail-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}
.detail-thumb{display:flex;flex-direction:column;gap:6px;min-width:0;padding:4px!important;border:1px solid transparent!important}
.detail-thumb img{width:100%;height:70px;object-fit:cover;border-radius:var(--button-radius)}
.detail-thumb span{font-size:.75rem;line-height:1.35;max-width:100%;overflow-wrap:anywhere}
.detail-thumb[aria-pressed=true]{border-color:var(--orange)!important}
.detail-view-foot{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));inset-inline:24px;display:flex;justify-content:space-between;gap:20px;pointer-events:none;color:#fff;font-size:.75rem;z-index:3}
.detail-view-foot span{padding:6px 10px;background:#0008;border-radius:var(--button-radius)}
.detail-view-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.detail-view-error{position:fixed;top:24px;left:50%;transform:translateX(-50%);background:#000c;padding:16px 24px;max-width:calc(100vw - 32px);border-radius:var(--button-radius);z-index:20}
.detail-view-error button{margin-top:8px;color:var(--orange)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(hover:none){.detail-dock .dock-arrow{width:44px;opacity:1;pointer-events:auto}}
@media(max-width:600px){.detail-dock{top:auto;bottom:max(76px,calc(env(safe-area-inset-bottom) + 60px));transform:translateX(-50%)}.detail-dock-main{gap:2px;padding:5px;min-height:56px}.dock-project{gap:6px;padding-right:4px}.dock-project>span{max-width:50px}.dock-project strong{font-size:.8125rem}.dock-project img{width:28px;height:28px}.detail-dock .dock-close{width:44px;height:44px}.dock-zoom{width:180px}.detail-collection{max-height:calc(100svh - 210px)}.detail-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-view-foot{inset-inline:16px;font-size:.6875rem}.detail-dock-row{gap:4px}}
@media(prefers-reduced-motion:reduce){.detail-dock .dock-arrow{transition:none}}
/* The artwork always fills the viewport; dock movement never affects layout. */
.immersive-detail{height:100dvh;width:100%;margin:0;padding:0}
.detail-hidden-header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 84px 18px var(--pad);background:rgb(0 0 0 / 80%);transform:translateY(-105%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.detail-hidden-header.is-visible,.detail-hidden-header:focus-within{transform:translateY(0)}
.detail-hidden-header .brand{width:105px;flex-shrink:0}
.detail-hidden-header nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:24px;font-size:.875rem}
.detail-hidden-header [aria-current]{color:var(--orange)}
.immersive-detail .detail-header-toggle{position:fixed;top:18px;right:24px;z-index:51;width:44px;height:44px;background:#000c;display:grid;place-items:center;padding:0;border-radius:var(--button-radius)}
@media(max-width:600px){.detail-hidden-header{align-items:flex-start;padding:24px 76px 24px 20px;gap:20px}.detail-hidden-header nav{gap:16px;flex-direction:column;align-items:flex-start}.immersive-detail .detail-header-toggle{right:16px}.detail-hidden-header .brand{width:72px}}
@media(prefers-reduced-motion:reduce){.detail-hidden-header{transition:none}}
.immersive-detail main{position:fixed;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0}
.detail-dock{top:50%;bottom:auto;transform:translate(-50%,-50%);touch-action:auto}
.detail-dock-main{width:min(480px,calc(100vw - 92px));border-radius:var(--button-radius);gap:4px}
.detail-dock .dock-arrow,.detail-dock:hover .dock-arrow,.detail-dock:focus-within .dock-arrow{width:44px;opacity:1;pointer-events:auto;transition:background-color .2s}
.dock-project{flex:1;min-width:0;max-width:none;overflow:hidden}
.dock-project>span{flex:1;min-width:0;max-width:none}
.dock-project strong{display:block;width:100%}
.dock-project img{flex-shrink:0}
.dock-drag,.dock-fullscreen{display:grid;place-items:center;padding:0;width:32px;height:44px;border-radius:var(--button-radius)}
.dock-drag{cursor:grab!important;touch-action:none;color:#b4b4ae!important}
.detail-dock.is-dragging .dock-drag{cursor:grabbing!important;color:var(--cream)!important}
.detail-dock.is-dragging{user-select:none}
.dock-zoom{flex:1;min-width:0;width:auto}
.zoom-open .dock-project{flex:0 0 48px;padding:0}
.detail-collection{transform:translateX(calc(-50% + var(--panel-shift,0px)));max-height:var(--panel-height,calc(50dvh - 60px))}
.detail-dock.collection-below .detail-collection{top:calc(100% + 12px);bottom:auto}
@media(max-width:600px){.detail-dock{top:50%;bottom:auto;transform:translate(-50%,-50%)}.detail-dock-main{width:calc(100vw - 76px);padding:6px;gap:2px}.detail-dock .dock-arrow{display:none}.dock-project>span{max-width:none}.dock-fullscreen{width:32px}.dock-zoom{width:auto}.zoom-open .dock-project{flex-basis:32px}.dock-project img{width:28px;height:28px}.detail-collection{max-height:var(--panel-height,calc(50dvh - 60px))}}
@media(max-width:600px){.detail-dock-main{width:calc(100vw - 72px);max-width:calc(100vw - 72px)}.detail-dock .dock-arrow{display:grid;width:36px;min-width:36px;height:44px}.detail-dock .dock-drag,.detail-dock .dock-fullscreen{display:none}.dock-project img{display:none}.dock-project{min-width:36px}.dock-project strong{font-size:.875rem}.detail-thumbnails{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-collection{width:min(480px,calc(100vw - 24px))}.detail-view-foot{font-size:.75rem;bottom:max(12px,env(safe-area-inset-bottom))}.detail-dock-main>button{flex-shrink:0}}
@media(max-height:480px){.detail-collection{max-height:min(var(--panel-height,180px),60dvh);overflow:auto}.detail-hidden-header nav{flex-direction:row;flex-wrap:wrap}.detail-hidden-header{max-height:100dvh;overflow:auto}}