/* Lockedmind Models website — shared by the home page and the models page. */
@font-face{font-family:'Geist';src:url('fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bg:#ffffff;--panel:#f6f6f8;--card:#ffffff;--line:#eeeef1;--line2:#e3e3e9;
  --text:#1d1d1b;--muted:#6b6b66;--faint:#8f8f89;--chip:#f2f2f5;--hover:#ebebef;
  --ink:#17171a;--ink-text:#ffffff;
  --accent:oklch(0.55 0.15 282);--accent-soft:oklch(0.955 0.025 282);--accent-text:oklch(0.47 0.15 282);
  --good:oklch(0.58 0.13 150);--warn:oklch(0.66 0.13 70);--off:#a3a39d;
  --glow1:oklch(0.9 0.07 290 / .55);--glow2:oklch(0.92 0.06 230 / .5);
  --tile:#ffffff;
  --shadow-sm:0 1px 2px rgba(20,20,26,.04),0 4px 12px rgba(20,20,26,.05);
  --shadow:0 1px 2px rgba(20,20,26,.04),0 10px 30px rgba(20,20,26,.07);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#141416;--panel:#1b1b1e;--card:#1c1c1f;--line:#2a2a2f;--line2:#34343a;
  --text:#ececea;--muted:#a3a39c;--faint:#7d7d77;--chip:#26262a;--hover:#2d2d32;
  --ink:#f1f1ef;--ink-text:#141416;
  --accent:oklch(0.72 0.14 282);--accent-soft:oklch(0.3 0.06 282);--accent-text:oklch(0.8 0.11 282);
  --good:oklch(0.72 0.14 150);--warn:oklch(0.78 0.13 75);--off:#6f6f69;
  --glow1:oklch(0.4 0.12 290 / .45);--glow2:oklch(0.42 0.1 230 / .35);--tile:#232327;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#141416;--panel:#1b1b1e;--card:#1c1c1f;--line:#2a2a2f;--line2:#34343a;
  --text:#ececea;--muted:#a3a39c;--faint:#7d7d77;--chip:#26262a;--hover:#2d2d32;
  --ink:#f1f1ef;--ink-text:#141416;
  --accent:oklch(0.72 0.14 282);--accent-soft:oklch(0.3 0.06 282);--accent-text:oklch(0.8 0.11 282);
  --good:oklch(0.72 0.14 150);--warn:oklch(0.78 0.13 75);--off:#6f6f69;
  --glow1:oklch(0.4 0.12 290 / .45);--glow2:oklch(0.42 0.1 230 / .35);--tile:#232327;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:'Geist',system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-text)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
img{display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* ------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);
  background:var(--card);cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;color:var(--text);white-space:nowrap}
.btn:hover{background:var(--hover)}
.btn-brand{background:var(--ink);color:var(--ink-text);border-color:var(--ink)}
.btn-brand:hover{background:var(--ink);opacity:.9}
.btn-white{background:var(--card)}
.btn-soft{background:var(--chip);border-color:transparent}
.btn-soft:hover{background:var(--ink);color:var(--ink-text)}
.btn-sm{height:32px;padding:0 12px;border-radius:10px;font-size:13px}
.btn-lg{height:46px;padding:0 20px;font-size:15px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ------------------------------------------------------------ header */
.nav-wrap{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.pill-nav{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand b{font-size:19px;font-weight:600;letter-spacing:-.035em}
.brand b span{color:var(--faint);font-weight:500}
.orb{width:28px;height:28px;border-radius:999px;flex-shrink:0;position:relative;background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2064%2064%27%3E%3Cdefs%3E%3ClinearGradient%20id=%27o%27%20x1=%279%27%20y1=%276%27%20x2=%2755%27%20y2=%2760%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23d6c4ff%27/%3E%3Cstop%20offset=%27.3%27%20stop-color=%27%23ac77fa%27/%3E%3Cstop%20offset=%27.64%27%20stop-color=%27%237d8cff%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%2300aee9%27/%3E%3C/linearGradient%3E%3CradialGradient%20id=%27l%27%20cx=%2719%27%20cy=%2715%27%20r=%2734%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23fff%27%20stop-opacity=%27.5%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23fff%27%20stop-opacity=%270%27/%3E%3C/radialGradient%3E%3CradialGradient%20id=%27s%27%20cx=%2723%27%20cy=%2719%27%20r=%2748%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%27.62%27%20stop-color=%27%23000%27%20stop-opacity=%270%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23000%27%20stop-opacity=%27.22%27/%3E%3C/radialGradient%3E%3ClinearGradient%20id=%27k%27%20x1=%270%27%20y1=%2719.5%27%20x2=%270%27%20y2=%2746.4%27%20gradientUnits=%27userSpaceOnUse%27%3E%3Cstop%20offset=%270%27%20stop-color=%27%23fff%27/%3E%3Cstop%20offset=%27.6%27%20stop-color=%27%23eee4ff%27/%3E%3Cstop%20offset=%271%27%20stop-color=%27%23cdb4ff%27/%3E%3C/linearGradient%3E%3Cfilter%20id=%27g%27%20x=%27-1%27%20y=%27-1%27%20width=%273%27%20height=%273%27%3E%3CfeGaussianBlur%20stdDeviation=%272.4%27/%3E%3C/filter%3E%3C/defs%3E%3Ccircle%20cx=%2732%27%20cy=%2732%27%20r=%2732%27%20fill=%27url%28%23o%29%27/%3E%3Ccircle%20cx=%2732%27%20cy=%2732%27%20r=%2732%27%20fill=%27url%28%23l%29%27/%3E%3Ccircle%20cx=%2732%27%20cy=%2732%27%20r=%2732%27%20fill=%27url%28%23s%29%27/%3E%3Ccircle%20cx=%2732%27%20cy=%2732%27%20r=%2731.3%27%20fill=%27none%27%20stroke=%27%23fff%27%20stroke-opacity=%27.42%27%20stroke-width=%271.3%27/%3E%3Cg%20fill=%27%23e4d6ff%27%20filter=%27url%28%23g%29%27%3E%3Ccircle%20cx=%2732%27%20cy=%2727.2%27%20r=%277.7%27/%3E%3Cpath%20d=%27M28.2%2030.6h7.6l2.3%2014q0%201.8-1.8%201.8H27.7q-1.8%200-1.8-1.8z%27/%3E%3C/g%3E%3Cg%20fill=%27url%28%23k%29%27%3E%3Ccircle%20cx=%2732%27%20cy=%2727.2%27%20r=%277.7%27/%3E%3Cpath%20d=%27M28.2%2030.6h7.6l2.3%2014q0%201.8-1.8%201.8H27.7q-1.8%200-1.8-1.8z%27/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;box-shadow:0 2px 10px rgba(124,88,230,.32)}
.nav-links{display:flex;gap:2px;margin-left:8px}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;font-size:14px}
.nav-links a:hover,.nav-links a[aria-current=page]{background:var(--hover);color:var(--text)}
.nav-spacer{flex:1}
.nav-menu{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);background:var(--card);cursor:pointer;align-items:center;justify-content:center}
.nav-drop{display:none}
@media (max-width:720px){
  .nav-links,.nav-hide{display:none}.nav-menu{display:inline-flex}
  .nav-drop.open{display:flex;flex-direction:column;gap:2px;padding:8px 16px 14px;border-top:1px solid var(--line)}
  .nav-drop a{padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text)}
  .nav-drop a:hover{background:var(--hover)}
}

/* ------------------------------------------------------------ home hero */
.hero{position:relative;overflow:hidden;padding:96px 0 104px;min-height:640px;display:flex;align-items:center}
.hero .glow{position:absolute;left:50%;top:-20px;width:1000px;max-width:150%;height:520px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 35% 45%,var(--glow1),transparent 60%),radial-gradient(ellipse at 68% 55%,var(--glow2),transparent 62%);filter:blur(10px);pointer-events:none}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:780px;margin:0 auto;padding:0 20px}
.hero h1{font-size:clamp(36px,5.6vw,64px);line-height:1.04;letter-spacing:-.045em;margin:0 0 18px;font-weight:600;overflow-wrap:break-word}
@media (max-width:520px){.hero h1 br{display:none}}
.lede{font-size:18px;color:var(--muted);margin:0 auto 26px;max-width:620px;line-height:1.55}
.lede b{color:var(--text);font-weight:600}
.hero-search{display:flex;gap:8px;align-items:center;max-width:560px;margin:0 auto 18px;background:var(--card);border-radius:14px;padding:6px 6px 6px 14px;border:1px solid var(--line2);box-shadow:var(--shadow)}
.hero-search:focus-within{border-color:var(--accent)}
.hero-search svg{flex-shrink:0;color:var(--faint)}
.hero-search input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;height:40px;outline:none}
.hero-search input::placeholder{color:var(--faint)}
.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.promise{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:22px;color:var(--muted);font-size:13px}
.promise span{display:inline-flex;align-items:center;gap:6px}
.promise svg{color:var(--good)}

/* ------------------------------------------------------------ floating logos */
/* The AI makers' logos floating around the whole page, like the book covers on
   Deepstash: big and sharp up front, smaller and softer further back, always
   behind the text. site.js places them and moves them as you scroll; each one
   also bobs gently on its own. */
.floaters{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
main > :not(.hero),footer{position:relative;z-index:2}
.fl{position:absolute;left:0;top:0;width:var(--s);height:var(--s);visibility:hidden;will-change:transform}
.fl > span{display:block;width:100%;height:100%;border-radius:24%;background:var(--tile);padding:15%;
  box-shadow:0 0 0 1px var(--line),0 24px 48px -18px rgba(24,24,44,.28),0 4px 12px rgba(24,24,44,.06);
  animation:bob var(--d,11s) ease-in-out var(--delay,0s) infinite}
.fl img{width:100%;height:100%;object-fit:contain;border-radius:12%}
.fl.near{z-index:3}.fl.mid{z-index:2}.fl.far{z-index:1}
.fl.mid > span{filter:blur(1.2px);opacity:.9;box-shadow:0 0 0 1px var(--line),0 16px 32px -14px rgba(24,24,44,.22)}
.fl.far > span{filter:blur(3.5px);opacity:.62;box-shadow:0 0 0 1px var(--line),0 10px 24px -10px rgba(24,24,44,.2)}
.fl.dark > span{background:#0b0b0c}
.fl.dark img{filter:invert(1)}
@keyframes bob{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(7px,-11px) rotate(1.6deg)}
  50%{transform:translate(0,-20px) rotate(0deg)}
  75%{transform:translate(-7px,-9px) rotate(-1.6deg)}}
@media (prefers-reduced-motion:reduce){.fl > span{animation:none}}
@media (max-width:860px){.hero{padding:40px 0 64px;min-height:0}}

/* ------------------------------------------------------------ sections */
section.block{padding:56px 0}
.kicker{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.h2{font-size:clamp(26px,3.4vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:600;margin:0 0 10px}
.sub{font-size:16px;color:var(--muted);margin:0;max-width:640px}
.center{text-align:center}.center .sub{margin:0 auto}

.makers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.maker-chip{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 16px 6px 6px;font-size:14px;font-weight:500;text-decoration:none;color:var(--text)}
.maker-chip img{width:30px;height:30px;border-radius:999px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line)}
.maker-chip:hover{border-color:var(--line2);background:var(--panel)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border-radius:18px;padding:22px}
.step .num{width:28px;height:28px;border-radius:999px;background:var(--ink);color:var(--ink-text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;margin-bottom:12px}
.step h3{margin:0 0 6px;font-size:16px;letter-spacing:-.02em;font-weight:600}
.step p{margin:0;color:var(--muted);font-size:14px}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
@media (max-width:980px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.features{grid-template-columns:1fr}}
.feature{border-radius:18px;padding:22px;background:var(--card);border:1px solid var(--line)}
.feature .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--accent-soft);color:var(--accent-text)}
.feature .ic svg{width:20px;height:20px}
.feature h3{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.feature p{margin:0;color:var(--muted);font-size:14px}

.cta-box{margin:8px auto 0;border:1px solid var(--line);border-radius:22px;padding:40px 28px;text-align:center;background:var(--panel)}
.cta-box h2{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.035em;margin:0 0 8px}
.cta-box p{color:var(--muted);margin:0 auto 20px;max-width:560px}

.faq{margin-top:18px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:14px 2px}
.faq summary{cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--faint);font-size:18px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:var(--muted);font-size:14px;max-width:760px}

footer{padding:36px 0 48px;color:var(--faint);font-size:13px;border-top:1px solid var(--line);margin-top:48px}
footer .foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer p{margin:0 0 6px;max-width:720px}

/* ------------------------------------------------------------ models page */
.hero-sm{min-height:0;padding:64px 0 56px}
.hero-sm h1{font-size:clamp(34px,4.8vw,52px);margin:0 0 12px}
.hero-sm .lede{margin-bottom:24px}
.searchbar{display:flex;gap:8px;align-items:center;max-width:580px;margin:0 auto;background:var(--card);border-radius:14px;padding:6px 6px 6px 14px;border:1px solid var(--line2);box-shadow:var(--shadow)}
.searchbar:focus-within{border-color:var(--accent)}
.searchbar svg{flex-shrink:0;color:var(--faint)}
.searchbar input{flex:1;min-width:0;border:0;background:transparent;font-size:15px;height:40px;outline:none}
.searchbar input::placeholder{color:var(--faint)}
.searchbar .x{border:0;background:var(--chip);width:28px;height:28px;border-radius:999px;cursor:pointer;color:var(--muted);flex-shrink:0;font-size:12px}

/* your device — one slim strip */
.device-strip{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 18px;box-shadow:var(--shadow-sm)}
.ds-status{display:flex;align-items:center;gap:10px;font-size:14px}
.ds-status .dot{width:9px;height:9px;border-radius:999px;background:var(--off);flex-shrink:0}
.ds-status.ok .dot{background:var(--good);box-shadow:0 0 0 4px color-mix(in oklab,var(--good) 18%,transparent)}
.ds-status.no .dot{background:var(--warn)}
.ds-status b{font-weight:500}
.ds-status small{display:block;color:var(--muted);font-size:12.5px}
.ds-mem{display:flex;align-items:center;gap:12px;flex:1;min-width:280px}
.ds-label{font-size:13px;color:var(--muted);white-space:nowrap}
.ds-mem .seg{flex:1;max-width:440px}
.ds-stored{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.ds-hint{flex-basis:100%;margin:-4px 0 0;font-size:12px;color:var(--faint)}
.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px}
.seg button{flex:1;min-width:0;border:0;background:transparent;border-radius:8px;padding:6px 8px;font-size:13px;cursor:pointer;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--card);color:var(--text);font-weight:500;box-shadow:0 1px 3px rgba(20,20,26,.1)}
@media (max-width:420px){.seg button{font-size:12px;padding:6px 2px}.ds-mem{min-width:0}.ds-label{display:none}}

/* what it's good for: plain tabs */
.tabs-bar{border-bottom:1px solid var(--line);margin:30px 0 14px}
.utabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.utabs::-webkit-scrollbar{display:none}
.utab{border:0;background:none;padding:10px 10px;font-size:14px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:8px;align-items:center}
.utab svg{width:16px;height:16px}
.utab:hover{color:var(--text)}
.utab[aria-selected=true]{color:var(--text);border-bottom-color:var(--ink);font-weight:500}

.filter-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:34px;font-size:13.5px}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;color:var(--text)}
.switch input{appearance:none;width:32px;height:19px;border-radius:999px;background:var(--line2);position:relative;cursor:pointer;flex-shrink:0;transition:background .15s;margin:0}
.switch input::after{content:"";position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked{background:var(--ink)}
.switch input:checked::after{transform:translateX(13px)}
.clear{border:0;background:none;color:var(--accent-text);cursor:pointer;padding:0;font-size:13.5px}
.sel{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.sel select{height:34px;border-radius:10px;border:1px solid var(--line2);background:var(--card);padding:0 8px;font-size:13px;color:var(--text);cursor:pointer}
@media (max-width:640px){.filter-row .nav-spacer{display:none}.filter-row{gap:14px 18px}}

/* start here */
.row-title{font-size:18px;font-weight:600;letter-spacing:-.025em;margin:0 0 14px}
.picks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:48px}
@media (max-width:1060px){.picks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.picks{grid-template-columns:1fr}}
.pick{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;padding:16px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px;color:var(--text);
  background:linear-gradient(140deg,color-mix(in oklab,var(--c1) 13%,var(--card)),var(--card) 62%);transition:box-shadow .15s,border-color .15s}
.pick:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.pick .logo{width:36px;height:36px;border-radius:10px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line);margin-bottom:12px}
.pick .why{font-size:11px;font-weight:600;color:var(--accent-text);text-transform:uppercase;letter-spacing:.05em}
.pick .nm{font-size:17px;font-weight:600;letter-spacing:-.025em}
.pick .sz{font-size:12.5px;color:var(--muted)}
.pick .wm{position:absolute;right:-18px;top:-14px;width:96px;height:96px;object-fit:contain;opacity:.09;pointer-events:none;
  -webkit-mask-image:linear-gradient(200deg,#000 20%,transparent 85%);mask-image:linear-gradient(200deg,#000 20%,transparent 85%)}

/* faded logos: blend away any square background a logo image carries */
.pick .wm,.banner .wm{mix-blend-mode:multiply}

/* a maker's section: a banner in its own colours fading out, with its logo */
.maker-sec{margin-bottom:44px}
.banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;border-radius:20px;padding:20px 22px;margin-bottom:12px;
  background:linear-gradient(100deg,color-mix(in oklab,var(--c1) 22%,var(--bg)) 0%,color-mix(in oklab,var(--c2) 10%,var(--bg)) 42%,var(--bg) 82%)}
.banner .logo{width:52px;height:52px;border-radius:15px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line),var(--shadow-sm);flex-shrink:0;position:relative;z-index:1}
.banner .ico{width:52px;height:52px;border-radius:15px;background:var(--card);color:var(--accent-text);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 1px var(--line);position:relative;z-index:1}
.banner .ico svg{width:24px;height:24px}
.banner h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.035em;line-height:1.15;position:relative;z-index:1}
.banner h2 span{color:var(--muted);font-weight:500}
.banner p{margin:3px 0 0;color:var(--muted);font-size:14px;max-width:560px;position:relative;z-index:1}
.banner .wm{position:absolute;right:4%;top:50%;width:200px;height:200px;transform:translateY(-50%) rotate(-10deg);object-fit:contain;opacity:.13;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 60% 50%,#000 30%,transparent 72%);mask-image:radial-gradient(circle at 60% 50%,#000 30%,transparent 72%)}
@media (max-width:640px){.banner{padding:16px;gap:12px}.banner .logo,.banner .ico{width:44px;height:44px}.banner h2{font-size:19px}.banner .wm{width:130px;height:130px;right:-20px}}

/* models: tidy rows, like an app store */
.rows{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:900px){.rows{grid-template-columns:1fr}}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;min-width:0;transition:border-color .15s,box-shadow .15s}
.row:hover{border-color:var(--line2);box-shadow:var(--shadow-sm)}
.av{border-radius:24%;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line);flex-shrink:0;display:block}
.lav{display:flex;align-items:center;justify-content:center;background:hsl(var(--h) 70% 94%);color:hsl(var(--h) 45% 32%);font-weight:650;letter-spacing:-.02em;text-transform:uppercase;box-shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .lav{background:hsl(var(--h) 28% 24%);color:hsl(var(--h) 70% 82%)}}
:root[data-theme=dark] .lav{background:hsl(var(--h) 28% 24%);color:hsl(var(--h) 70% 82%)}
.row > .av{width:44px;height:44px}
.row-main{flex:1;min-width:0}
.row-name{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.02em}
.row-desc{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.row-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--faint);margin-top:6px}
.row-meta .sep{width:3px;height:3px;border-radius:9px;background:var(--line2)}
.row .btn{flex-shrink:0}
.params{font-size:11.5px;font-weight:500;padding:1px 7px;border-radius:999px;background:var(--chip);color:var(--muted);white-space:nowrap}
.where{font-weight:500;color:var(--accent-text)}
.where.dl{color:var(--muted);font-weight:400}
.where.have{color:color-mix(in oklab,var(--good) 80%,var(--text))}
.fit{display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.fit i{width:7px;height:7px;border-radius:999px;background:var(--off);display:inline-block;flex-shrink:0}
.fit.yes i{background:var(--good)}.fit.tight i{background:var(--warn)}
.pill{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--chip);color:var(--muted);white-space:nowrap}
.pill.browser{background:var(--accent-soft);color:var(--accent-text);font-weight:500}
.pill.have,.pill.tested{background:color-mix(in oklab,var(--good) 16%,transparent);color:color-mix(in oklab,var(--good) 75%,var(--text));font-weight:500}
.pill.personal{background:color-mix(in oklab,var(--warn) 18%,transparent);color:color-mix(in oklab,var(--warn) 70%,var(--text))}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.empty{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:18px}

/* on a phone the title's logos float in a band above it */
@media (max-width:860px){.hero,.hero.hero-sm{padding-top:136px}}

/* ------------------------------------------------------------ sheet */
dialog{border:0;padding:0;background:transparent;max-width:720px;width:calc(100% - 32px);max-height:calc(100% - 48px);color:var(--text)}
dialog::backdrop{background:rgba(10,10,14,.45);backdrop-filter:blur(3px)}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:auto;max-height:calc(100vh - 48px)}
.sheet-head{padding:22px 24px 16px;display:flex;gap:14px;align-items:flex-start;position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);z-index:1}
.sheet-head img{width:48px;height:48px;border-radius:13px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line)}
.sheet-head h2{margin:0;font-size:24px;letter-spacing:-.03em;font-weight:600;line-height:1.2}
.sheet-head .by{color:var(--muted);font-size:13.5px}
.x-btn{margin-left:auto;width:34px;height:34px;border-radius:10px;border:0;background:transparent;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.x-btn:hover{background:var(--hover)}
.sheet-body{padding:18px 24px 24px;display:flex;flex-direction:column;gap:20px}
.sheet-body > p.about{margin:0;font-size:16px}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:620px){.specs{grid-template-columns:repeat(2,1fr)}}
.spec{background:var(--panel);border-radius:14px;padding:10px 12px}
.spec small{display:block;color:var(--faint);font-size:11.5px}
.spec b{display:block;font-size:14.5px;font-weight:600;margin-top:1px}
.spec span{font-size:12px;color:var(--muted)}
.spec .fit{font-size:12px}
.tested-line{display:flex;gap:10px;align-items:center;background:color-mix(in oklab,var(--good) 12%,transparent);color:color-mix(in oklab,var(--good) 75%,var(--text));border-radius:12px;padding:10px 14px;font-size:14px}
.prompts{display:flex;flex-direction:column;gap:6px}
.prompt{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 14px;cursor:pointer;font-size:14px;color:var(--text)}
.prompt:hover{background:var(--panel);border-color:var(--line2)}
.prompt svg{color:var(--faint);flex-shrink:0}
.way{border:1px solid var(--line);border-radius:18px;padding:18px}
.way.primary{background:var(--panel);border-color:transparent}
.way h3{margin:0 0 4px;font-size:17px;letter-spacing:-.02em;font-weight:600}
.way > p{margin:0 0 14px;color:var(--muted);font-size:14px}
.way > p b{color:var(--text);font-weight:600}
.tabs{display:flex;gap:4px;margin-bottom:14px;background:var(--panel);border-radius:12px;padding:3px;width:fit-content;max-width:100%;overflow-x:auto}
.way.primary .tabs{background:var(--card)}
.tabs button{border:0;background:transparent;border-radius:9px;padding:6px 14px;cursor:pointer;font-size:13px;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected=true]{background:var(--card);color:var(--text);font-weight:500;box-shadow:0 1px 3px rgba(20,20,26,.1)}
ol.howto{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:14px}
ol.howto li::marker{color:var(--faint)}
.cmd{display:flex;align-items:center;gap:8px;background:#17171a;color:#e8e8e6;border-radius:12px;padding:10px 10px 10px 14px;font-family:'Geist Mono',ui-monospace,monospace;font-size:13px;margin-top:8px}
.cmd code{flex:1;overflow-x:auto;white-space:nowrap}
.cmd button{border:0;background:#2b2b31;color:#e8e8e6;border-radius:8px;padding:5px 10px;font-size:12px;cursor:pointer;font-family:'Geist',system-ui,sans-serif}
.cmd button:hover{background:#3a3a41}
.note{font-size:13px;color:var(--muted);margin:10px 0 0}
.warnbox{font-size:13px;padding:10px 12px;border-radius:12px;background:color-mix(in oklab,var(--warn) 14%,transparent);margin-top:12px}
.lic{font-size:13px;color:var(--muted);margin:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--ink-text);padding:10px 16px;border-radius:12px;font-size:14px;box-shadow:var(--shadow);z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.mylist{display:flex;flex-direction:column;gap:8px}
.myrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;font-size:14px}
.myrow img{width:32px;height:32px;border-radius:9px;object-fit:contain;background:#fff;box-shadow:0 0 0 1px var(--line)}
.myrow .grow{flex:1;min-width:0}

/* ------------------------------------------------------------ the big catalog */
.row-name .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.row-meta .kind{color:var(--accent-text);font-weight:500}
.bdg{font-size:11px;font-weight:500;padding:1px 7px;border-radius:999px;background:var(--chip);color:var(--muted);white-space:nowrap;flex-shrink:0}
.bdg.new{background:color-mix(in oklab,var(--good) 16%,transparent);color:color-mix(in oklab,var(--good) 75%,var(--text))}
.act{display:flex;gap:6px;flex-shrink:0;align-items:center}
.act .btn svg{flex-shrink:0}
@media (max-width:560px){.row{flex-wrap:wrap}.row-main{flex-basis:calc(100% - 58px)}.act{width:100%;justify-content:flex-end}.hide-sm{display:none}}
.shelf{margin-bottom:40px}
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.shelf-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.03em}
.see{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--accent-text);font-weight:500;font-size:14px;cursor:pointer;padding:4px 2px}
.see svg{width:14px;height:14px}
.see:hover{text-decoration:underline}
.more-wrap{display:flex;justify-content:center;margin:22px 0 8px}
.banner .logo.av{width:52px;height:52px;border-radius:15px}
.pick .logo.av{width:36px;height:36px;border-radius:10px;margin-bottom:12px}
.sheet-head .av{width:48px;height:48px;border-radius:13px}
.linkish{border:0;background:none;padding:0;font:inherit;color:var(--accent-text);cursor:pointer}
.linkish:hover{text-decoration:underline}
.get h3{margin:0 0 10px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.ways{display:flex;flex-direction:column;gap:8px}
.way-item{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:var(--card)}
.way-item.oriel{background:var(--panel);border-color:transparent}
.way-item.warn{background:color-mix(in oklab,var(--warn) 10%,var(--card))}
.wi-ic{width:36px;height:36px;border-radius:10px;background:var(--chip);color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wi-ic svg{width:19px;height:19px}
.way-item.oriel .wi-ic{background:transparent}
.way-item.oriel .wi-ic svg{width:30px;height:30px}
.wi-main{flex:1;min-width:0}
.wi-main b{display:block;font-size:14.5px;font-weight:600}
.wi-main small{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.wi-main small b{display:inline;font-size:inherit;color:var(--text)}
.wi-main .cmd{margin-top:8px}
.way-item > .btn{flex-shrink:0}
@media (max-width:560px){.way-item{flex-wrap:wrap}.way-item > .btn{margin-left:50px}}

/* breadcrumbs and links between pages (written by web/_build/seo.py) */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;font-size:14px;color:var(--faint);justify-content:center}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--faint)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:14px}
.foot-links a{color:inherit;text-decoration:none}
.foot-links a:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.prerendered ul{padding-left:20px;line-height:1.55}
.prerendered li{margin:6px 0}
.prerendered span{color:var(--faint)}