/* Catalogue UI: neutral, so the demos speak for themselves. System fonts only. */
:root{--ink:#18181b;--muted:#52525b;--line:#e4e4e7;--bg:#f6f6f4;--card:#fff;--focus:#18181b}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px #fff}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:10}
.skip:focus{top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.top{background:var(--card);border-bottom:1px solid var(--line)}
.top-inner{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:center;justify-content:space-between;padding:.5rem 1rem;max-width:110rem;margin:0 auto}
.crumb{margin:0;font-weight:700}
.top nav ul{display:flex;flex-wrap:wrap;gap:.25rem;list-style:none;margin:0;padding:0}
.top nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .8rem;border-radius:999px;text-decoration:none;font-weight:600}
.top nav a[aria-current]{background:var(--ink);color:#fff}
h1{font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.15;margin:0 0 .4rem}
h2{font-size:1.05rem;margin:0 0 .5rem}
.intro{color:var(--muted);margin:0 0 1rem}

/* niche page: controls + preview */
.layout{display:grid;gap:1rem;max-width:110rem;margin:0 auto;padding:1rem}
@media (min-width: 1000px){.layout{grid-template-columns:minmax(20rem,26rem) 1fr;align-items:start}.panel{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem}
fieldset{border:0;padding:0;margin:0 0 1rem;min-width:0}
legend{font-weight:750;margin-bottom:.4rem}
.palettes{display:grid;gap:.4rem}
.pal{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:center;padding:.55rem .7rem;border:2px solid var(--line);border-radius:10px;cursor:pointer;position:relative}
.pal:has(input:checked){border-color:var(--ink);background:#fafafa}
.pal input,.opt input{position:absolute;opacity:0;width:1px;height:1px}
.pal:has(input:focus-visible),.opt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.pal-swatch{display:flex}
.pal-swatch i{width:1.4rem;height:1.9rem;border:1px solid rgb(0 0 0 / .15)}
.pal-swatch i:first-child{border-radius:6px 0 0 6px}.pal-swatch i:last-child{border-radius:0 6px 6px 0}
.pal-text{font-size:.9rem;line-height:1.3}
.pal-text span{display:block;color:var(--muted);font-size:.82rem}
.opts{display:flex;flex-wrap:wrap;gap:.4rem}
.opts legend{width:100%}
.opt{position:relative;display:inline-flex;align-items:center;min-height:2.75rem;padding:0 .9rem;border:2px solid var(--line);border-radius:999px;cursor:pointer;font-size:.92rem;font-weight:600}
.opt:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
.snippet{border-top:1px solid var(--line);padding-top:1rem}
pre{margin:0 0 .6rem;background:#18181b;color:#f4f4f5;border-radius:10px;padding:.9rem 1rem;overflow:auto;font-size:.85rem;line-height:1.45}
.snippet-actions{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:0}
button{font:inherit;font-weight:700;min-height:2.75rem;padding:0 1.1rem;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer}
.status{min-height:1.5em;margin:.4rem 0;font-weight:600}
.hint{color:var(--muted);font-size:.85rem;margin:0}
.stage{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:.75rem;overflow-x:auto}
#preview{display:block;margin:0 auto;width:100%;height:min(80vh,64rem);min-height:32rem;border:1px solid var(--line);border-radius:8px;background:#fff;transition:width .2s ease}
.stage[data-device="375"] #preview{width:375px;max-width:none}
.stage[data-device="768"] #preview{width:768px;max-width:none}
.stage-note{color:var(--muted);font-size:.85rem;text-align:center;margin:.5rem 0 0}
@media (max-width: 999px){.stage[data-device="full"] #preview{height:75vh}}

/* catalogue home */
.home{max-width:70rem;margin:0 auto;padding:2rem 1rem}
.niches{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.niche{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem}
.niche h2{font-size:1.25rem}
.niche p{color:var(--muted);margin:0 0 .8rem}
.swatches{display:flex;gap:.4rem;list-style:none;margin:0;padding:0}
.dot{display:block;width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid rgb(0 0 0 / .2)}

.pal-mood{display:none;margin:.2rem 0 0;color:var(--muted);font-size:.85rem}
@media (max-width: 999px){
  .top nav{width:100%;overflow-x:auto}
  .top nav ul{flex-wrap:nowrap}
  .top nav a{white-space:nowrap}
  .palettes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pal{grid-template-columns:1fr;gap:.35rem;padding:.5rem}
  .pal-text span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .pal-mood{display:block;grid-column:1/-1}
  .panel{padding:.9rem}
}