/* A fluid shelf of translucent glass covers, using the original HD bitmaps. */
.catalog{padding-bottom:75px}
.catalog .section-title{margin-bottom:38px}
.catalog .section-title h2{font-size:clamp(38px,4vw,62px)}
.catalog .result{margin-bottom:0}
.coverflow{position:relative}
.flow-viewport{position:relative;margin:0;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#73c6dd14,transparent 66%)}
.flow-stage{--cover-size:18vw;--flow-perspective:125vw;position:relative;perspective:var(--flow-perspective);perspective-origin:50% 40%;height:calc(var(--cover-size) * 1.78);touch-action:pan-y;user-select:none;cursor:grab;isolation:isolate}
.flow-stage:focus-visible{outline-offset:-6px}
.flow-stage.is-dragging{cursor:grabbing}
.tool-cover{position:absolute;top:calc(var(--cover-size) * .12);left:50%;width:var(--cover-size);height:var(--cover-size);padding:0;border:0;background:transparent;color:var(--ink);transform-style:preserve-3d;transition:transform .62s cubic-bezier(.2,.75,.2,1),opacity .55s;will-change:transform;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.tool-cover:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.flow-stage.is-dragging .tool-cover{transition:opacity .3s}
.cover-face{position:relative;width:100%;height:100%;border-radius:22%;overflow:hidden;background:linear-gradient(145deg,#d6f4ff12,#93cbd006 45%,#d8eaff0c);border:1px solid #d6efff38;box-shadow:inset 0 1px 1px #ffffff70,inset 0 -1px 2px #b9e7ff28,0 10px 26px #00000026;backface-visibility:hidden;isolation:isolate}
/* Keep glass highlights on the rounded face; backdrop blur produces rectangular seams in 3D stacks. */
.cover-face::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,#e4f6ff20,transparent 30%,transparent 64%,#dbf8ff0a 76%,#ffffff20);box-shadow:inset 1px 0 0 #ffffff3d,inset -1px 0 0 #ffffff12}
.cover-icon{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:var(--cover-alpha,.96);mix-blend-mode:normal;filter:saturate(1.08) contrast(1.08) brightness(var(--cover-luminance,.78));transition:opacity .55s,filter .55s}
.is-current>.cover-face{border-color:#d7f3ff55;box-shadow:inset 0 1px 2px #ffffff60,inset 0 -1px 2px #cef3ff3d,0 12px 34px #00000030,0 0 28px #8fdded12}
.cover-reflection{position:absolute;top:calc(100% + var(--cover-size) * .03);left:0;width:100%;height:100%;opacity:var(--cover-reflection,.2);pointer-events:none;mask-image:linear-gradient(to bottom,#000,transparent 60%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 60%)}
.cover-reflection .cover-face{transform:scaleY(-1);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.flow-caption{position:relative;text-align:center;max-width:650px;margin:0 auto;min-height:104px;padding:0 15px}
.flow-category{font-size:8px;letter-spacing:1.4px;color:var(--muted);margin-bottom:12px}
.flow-caption h3{font-size:clamp(21px,2.2vw,30px);line-height:1.25;letter-spacing:-.65px;font-weight:450}
.flow-caption>p:last-child{font-size:12px;color:var(--muted);line-height:1.8;margin-top:10px;min-height:22px}
.flow-controls{display:flex;justify-content:center;align-items:center;gap:42px;margin-top:13px}
.flow-step{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--muted);font-size:18px;transition:color .2s,background .2s}
.flow-step:hover{background:var(--hover);color:var(--ink)}
.flow-step:disabled{opacity:.25;cursor:default}
#flow-open{background:none;border:0;padding:5px 0;color:var(--ink);font-size:11px;gap:16px}
#flow-open .link-arrow{border-color:var(--line)}
.flow-scrubber{display:flex;align-items:center;gap:15px;width:min(340px,80%);margin:24px auto 0;font-size:8px;color:var(--muted);font-variant-numeric:tabular-nums}
.flow-scrubber input{min-width:0;width:100%;height:20px;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize}
.flow-scrubber input::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:2px}
.flow-scrubber input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:8px;background:var(--muted);border-radius:6px;margin-top:-3px}
.flow-scrubber input::-moz-range-track{height:2px;background:var(--line)}
.flow-scrubber input::-moz-range-thumb{width:28px;height:8px;border:0;border-radius:6px;background:var(--muted)}
.flow-scrubber input:disabled{opacity:.3}
#flow-hint{text-align:center;margin:15px 0 0;font-size:8px;letter-spacing:.3px;color:var(--muted)}
.catalog-note{margin-top:28px;text-align:center}
.catalog #empty{text-align:center;padding:100px 0}
html[data-theme='light'] .flow-viewport{background:radial-gradient(ellipse at 50% 48%,#72aebb1c,transparent 66%)}
html[data-theme='light'] .cover-face{background:linear-gradient(145deg,#ffffff50,#d9f2f014 45%,#ffffff2b);border-color:#ffffff99;box-shadow:inset 0 1px 2px #ffffffd9,0 8px 24px #173c4312}
html[data-theme='light'] .cover-icon{opacity:var(--cover-light-alpha,.96);mix-blend-mode:normal;filter:saturate(1.02) contrast(1.04)}
html[data-theme='light'] .cover-reflection{opacity:var(--cover-reflection,.16)}
@media(max-width:700px){
 .catalog .section-title h2{font-size:39px}
 .catalog .section-title{margin-bottom:28px}
 .flow-caption{min-height:120px;padding:0}
 .flow-caption h3{font-size:23px}
 .flow-caption>p:last-child{font-size:11px;max-width:320px;margin:10px auto 0}
 .flow-controls{gap:26px;margin-top:10px}
 .flow-step{width:36px;height:36px}
 .flow-scrubber{margin-top:24px}
 #flow-hint{font-size:7px;max-width:300px;margin:15px auto 0;line-height:1.8}
 .catalog-note{font-size:7px;margin-top:24px}
}
@media(prefers-reduced-motion:reduce){html:not([data-motion='on']) .tool-cover,html:not([data-motion='on']) .cover-icon{transition:none}}
#flow-autoplay{width:28px;height:28px;flex:0 0 28px;font-size:12px;line-height:1}
#flow-autoplay span{pointer-events:none}