:root { color-scheme: dark; --bg:#0b0e17; --panel:#111522; --line:#232a3d; --text:#e8ecf5; --muted:#8f9ab3; --accent:#45d6ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.55 system-ui,sans-serif; }
header, main, footer { max-width:1320px; margin:auto; padding:28px 36px; }
header { padding-top:64px; border-bottom:1px solid var(--line); }
h1 { font-size:clamp(2.6rem,6vw,4.8rem); letter-spacing:-.05em; line-height:1.05; margin:12px 0 20px; }
h2 { font-size:1.1rem; margin:8px 0; line-height:1.35; }
p { margin:8px 0; }
.eyebrow { color:var(--accent); font-size:.75rem; text-transform:uppercase; letter-spacing:.13em; }
.lede { font-size:clamp(1.1rem,2.5vw,1.5rem); }
.note, .status, #results, footer { color:var(--muted); }
a { color:var(--accent); text-underline-offset:4px; }
button, input, select, summary { font:inherit; }
button, input, select { min-height:44px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--text); padding:10px 12px; }
button, summary { cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.filters { display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; margin:24px 0 16px; }
label { display:grid; gap:8px; font-size:.85rem; color:var(--muted); min-width:0; }
input, select { width:100%; }
.collections { border:1px solid var(--line); border-radius:12px; padding:16px; }
.collections ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); padding:0; gap:8px; list-style:none; }
.collections button { width:100%; text-align:left; }
.collections span { display:block; font-size:.75rem; color:var(--muted); }
#gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px; margin-top:20px; }
article { overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.preview { display:flex; align-items:center; justify-content:center; height:360px; background:#080b12; padding:16px; }
.preview img { max-width:100%; height:100%; width:auto; object-fit:contain; border-radius:10px; }
.card-body { padding:18px; }
.status { font-size:.8rem; }
.links { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:.8rem; }
.links a { display:inline-flex; align-items:center; min-height:44px; }
[hidden] { display:none !important; }
#empty { border:1px dashed var(--line); border-radius:12px; padding:40px; text-align:center; }
footer { display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; border-top:1px solid var(--line); font-size:.85rem; }
dialog { max-width:96vw; width:1000px; max-height:95dvh; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--text); }
dialog::backdrop { background:rgb(0 0 0 / .85); }
.viewer-toolbar { display:flex; align-items:center; gap:12px; }
#viewer-title { flex:1; }
#viewer-image { display:block; max-width:100%; max-height:calc(95dvh - 170px); width:auto; margin:16px auto; }
#viewer-original { display:inline-block; min-height:44px; padding:8px 0; }
.skip { position:absolute; left:12px; top:-100px; background:var(--panel); padding:12px; z-index:2; }
.skip:focus { top:12px; }
.shack-feature{display:grid;grid-template-columns:minmax(0,1fr) 1fr;gap:30px;align-items:center;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:40px;background:#101925;text-decoration:none;color:var(--text)}
.shack-feature img{display:block;width:100%;height:auto}.shack-feature>span{display:flex;flex-direction:column;gap:14px;padding:24px 30px 24px 0}.shack-feature strong{font:700 clamp(1.35rem,2.6vw,2.2rem)/1.15 'Chakra Petch',sans-serif}.shack-feature>span>span:not(.eyebrow){font-size:.92rem;line-height:1.6;color:#a8bac9}.shack-feature b{font-size:.85rem;color:var(--accent)}
@media(max-width:700px){.shack-feature{grid-template-columns:1fr;gap:0}.shack-feature>span{padding:22px}}
@media(max-width:600px) {
  header, main, footer { padding:24px 18px; }
  header { padding-top:40px; }
  .filters { grid-template-columns:1fr 1fr; }
  .filters label:first-child { grid-column:1 / -1; }
  #gallery { grid-template-columns:1fr; }
  .preview { height:420px; }
  .viewer-toolbar { flex-wrap:wrap; gap:8px; }
  #viewer-title { min-width:100%; order:-1; font-size:.9rem; }
  #viewer-image { max-height:calc(95dvh - 230px); }
  #close { margin-left:auto; }
}
/* Direction C tokens shared with the product studies and marketing site. */
@font-face{font-family:Chakra Petch;src:url('fonts/chakra-petch-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:IBM Plex Sans;src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:IBM Plex Sans;src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--panel:#111a26;--line:#24364a;--amber:#ffc94a}
body{font-family:'IBM Plex Sans',sans-serif;background:linear-gradient(#0b0e1733,#0b0e17 850px),url('topo.svg') center top/1500px auto no-repeat,radial-gradient(ellipse at 60% 0%,#14263a,#0b0e17 65%)}
h1,h2,.collections summary,.collection-title{font-family:'Chakra Petch',sans-serif;font-weight:700}
h1{letter-spacing:-.035em}.eyebrow{font-weight:600}.note{max-width:840px;font-size:.9rem}.site-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;gap:15px}.site-nav a{text-decoration:none;font-family:'Chakra Petch',sans-serif;font-weight:700}.library-chip{color:var(--amber);font-size:.7rem;letter-spacing:.12em;border:1px solid var(--line);border-radius:4px;padding:6px 10px}header{padding-top:28px}.collections{background:#0b121c}.preview{background:#0b121c}article{box-shadow:inset 0 0 0 1px #45d6ff0f}.filters{border-bottom:1px solid var(--line);padding-bottom:24px}button:hover{border-color:var(--accent)}
.ui-feature{display:flex;flex-direction:column;gap:13px;padding:35px 40px;background:linear-gradient(115deg,#1d4050,#1d2937);border:1px solid #46727e;border-radius:14px;margin-bottom:28px;text-decoration:none;color:var(--text)}.ui-feature strong{font:700 clamp(1.4rem,3vw,2.2rem)/1.2 'Chakra Petch',sans-serif}.ui-feature>span:not(.eyebrow){max-width:720px;color:#bed0da}.ui-feature b{color:var(--accent);font-size:.85rem;margin-top:6px}@media(max-width:600px){.ui-feature{padding:25px}}