@font-face{font-family:"Instrument Sans";src:url('assets/fonts/InstrumentSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url('assets/fonts/InstrumentSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Display";src:url('assets/fonts/InstrumentSans-Display.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}

/* Mirrors the loader's token table: one neutral ramp, one accent. */
:root{
  color-scheme:dark;
  --surface:#161618;--raised:#1E1E21;--overlay:#26262A;--line:#2B2B2F;--edge:#66676D;--muted:#A3A4A9;--text:#ECECEE;--inverse:#161618;
  --accent:#ECECEE;--gutter:32px;
  --success:#7EC79A;--warning:#E2B26A;--danger:#EF9D96;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;
  --radius-control:4px;--radius-panel:6px;
  --micro:12px;--small:13px;--body:14px;--lead:16px;--heading:clamp(24px,2.6vw,32px);--display:clamp(28px,4.4vw,48px);
  --fast:90ms;--base:150ms;--slow:240ms;--page:320ms;
  --ease:cubic-bezier(.2,0,0,1);--ease-in:cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.4,0,1,1);
  --row:60px;--hairline:1px;--press:1px;--focus:2px;--rise:6px;
  --nav-width:336px;--page-width:1200px;--measure:56ch;--thumb:56px;--plate:clamp(300px,52vh,520px);--ring-offset:2px;
  --sans:"Instrument Sans","Segoe UI",sans-serif;--display-face:"Instrument Display","Instrument Sans","Segoe UI",sans-serif;--mono:"IBM Plex Mono",Consolas,monospace;
}
*{box-sizing:border-box}
html{background:var(--surface)}
body{margin:0;background:var(--surface);color:var(--text);font:400 var(--body)/1.55 var(--sans)}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:var(--focus) solid var(--accent);outline-offset:var(--ring-offset)}
[hidden]{display:none!important}
.js-only{display:none}
.js .js-only{display:block}
.mono{font-family:var(--mono);font-size:var(--micro);letter-spacing:.02em}

.wrap{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;max-width:var(--page-width);width:100%;margin:0 auto;padding-top:44px}
.topbar{min-height:64px;padding:0 var(--gutter);border-bottom:var(--hairline) solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;font-weight:500}
.brand small{color:var(--muted);font-size:var(--micro);font-weight:400;margin-left:var(--space-1)}
.topbar-links{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.topbar-links .quiet-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-2) var(--space-4);font-size:var(--body);font-weight:500;color:var(--text);background:var(--raised);border-radius:var(--radius-control);text-decoration:none;border:0;transition:background-color var(--base) var(--ease)}
.topbar-links .quiet-link:hover{background:var(--overlay)}
.topbar-links .quiet-link[aria-current="page"]{background:var(--overlay)}
.quiet-link{color:var(--muted);font-size:var(--micro);text-underline-offset:4px;transition:color var(--fast) var(--ease)}
.quiet-link:hover{color:var(--text)}

.catalog{flex:1;min-height:0;display:grid;grid-template-columns:var(--nav-width) minmax(0,1fr);border-bottom:var(--hairline) solid var(--line)}
.nav{padding:var(--space-5) var(--space-4) var(--space-4) var(--gutter);border-right:var(--hairline) solid var(--line);min-width:0;display:flex;flex-direction:column;min-height:0}
.nav-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2);font-size:var(--micro);color:var(--muted)}
.nav-head p{margin:0}
#search{display:block;width:100%;height:36px;padding:0 var(--space-3);margin-bottom:var(--space-3);background:var(--raised);border:var(--hairline) solid var(--line);border-radius:var(--radius-control);transition:border-color var(--fast) var(--ease)}
#search:hover{border-color:var(--edge)}
#search:focus{outline:0;border-color:var(--accent)}
#search::placeholder{color:var(--muted)}
.list{position:relative;flex:1;min-height:calc(var(--row)*4);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.row{position:relative;display:flex;align-items:center;gap:var(--space-3);width:100%;height:var(--row);padding:0 var(--space-3);background:none;border:0;border-radius:var(--radius-control);text-align:left;cursor:pointer;transition:background-color var(--fast) var(--ease)}
.row:focus-visible{outline-offset:calc(var(--ring-offset)*-1)}
.row:hover{background:var(--raised)}
.row:active .row-text{transform:translateY(var(--press))}
.row[aria-pressed="true"]{background:var(--overlay)}
.list.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)}
.row img{width:var(--thumb);height:36px;object-fit:cover;flex:none;border-radius:2px;opacity:.55;transition:opacity var(--fast) var(--ease)}
.row:hover img,.row[aria-pressed="true"] img{opacity:1}
.row-text{min-width:0;line-height:1.35}
.row-name{display:block;font-size:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row[aria-pressed="true"] .row-name{font-weight:500}
.row-status{display:block;font-size:var(--micro);color:var(--muted)}
.row-status.available{color:var(--success)}
.row-status.development,.status.development{color:var(--warning)}
.empty{margin:var(--space-5) var(--space-3);color:var(--muted)}
.empty button{display:block;margin-top:var(--space-2);padding:0;background:none;border:0;color:var(--text);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

.detail{min-width:0;display:flex;flex-direction:column}
.plate{position:relative;background:var(--surface);overflow:hidden}
.plate::after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,var(--surface));pointer-events:none}
.plate img{display:block;width:100%;height:var(--plate);object-fit:cover;object-position:50% 34%;transition:opacity var(--base) var(--ease-in)}
.content{position:relative;flex:1;display:flex;flex-direction:column;margin-top:calc(var(--space-16)*-1);padding:0 var(--gutter) var(--space-8);transition:opacity var(--base) var(--ease-in),transform var(--base) var(--ease-in)}
.status{margin:0 0 var(--space-1);font-size:var(--micro);font-weight:500;color:var(--muted)}
.status.available{color:var(--success)}
h1{font:600 var(--display)/1.1 var(--display-face);letter-spacing:-.015em;margin:0 0 var(--space-2);text-wrap:balance}
.description{margin:0;max-width:var(--measure);color:var(--muted);font-size:var(--lead);line-height:1.5}
.specs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--space-2) var(--space-5);margin:var(--space-5) 0 0;font-size:var(--micro);color:var(--muted)}
.specs dt{margin:0}
.specs dd{margin:0;color:var(--text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.action{margin-top:0;padding-top:var(--space-6)}
.primary{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-6);background:var(--accent);color:var(--inverse);border-radius:var(--radius-control);font-weight:500;text-decoration:none;transition:background-color var(--fast) var(--ease)}
.primary svg{width:16px;height:16px}
.primary:hover{background:#fff}
.primary:active{transform:translateY(var(--press))}
.unavailable{margin:0;padding-top:var(--space-3);border-top:var(--hairline) solid var(--line);color:var(--muted);max-width:var(--measure)}
.detail[data-state="leaving"] .content,.detail[data-state="leaving"] .plate img{opacity:0;transition:opacity var(--fast) var(--ease-out)}
.detail[data-state="entering"] .content{opacity:0;transform:translateY(var(--rise));transition:none}
.detail[data-state="entering"] .plate img{opacity:0;transition:none}

.notes{border-top:var(--hairline) solid var(--line);margin-top:var(--space-6);padding-top:var(--space-5);scroll-margin-top:var(--space-6)}
.notes-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-2)}
.notes h2{margin:0;font-size:var(--lead);font-weight:500}
.notes-meta{color:var(--muted);font-size:var(--micro)}
.notes p{margin:0;max-width:80ch;color:var(--muted);font-size:var(--body);line-height:1.6}
footer{display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-5) var(--gutter) var(--space-6);border-top:var(--hairline) solid var(--line);font-size:var(--micro);color:var(--muted)}

@media(max-width:800px){
  :root{--nav-width:256px;--gutter:24px}
}
@media(max-width:600px){
  :root{--plate:216px;--gutter:16px}
  .topbar{min-height:56px;flex-wrap:wrap;padding-top:var(--space-3);padding-bottom:var(--space-3);gap:var(--space-3)}
  .catalog{display:block}
  .nav{padding:var(--space-4) var(--gutter) var(--space-2);border-right:0;border-bottom:0}
  .list{display:flex;gap:var(--space-1);min-height:0;overflow:auto hidden;padding-bottom:var(--space-2)}
  .list.more{-webkit-mask-image:none;mask-image:none}
  .topbar-links{width:100%;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-start}
  .topbar-links .quiet-link{padding:var(--space-2) var(--space-3)}
  .row img,.brand small{display:none}
  .row{flex:0 0 152px;height:52px;padding:0 var(--space-2)}
  .content{margin-top:calc(var(--space-8)*-1);padding:0 var(--gutter) var(--space-6)}
  .primary{width:100%}
  .specs{grid-template-columns:minmax(0,1fr);gap:0}
  .specs dd{margin-bottom:var(--space-2)}
  footer{flex-direction:column;gap:var(--space-1)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}