/* Prompt library styles: homepage, hubs, type pages, entries. Built on main.css tokens. */
/*
 * Prompt-library homepage, mockup layer.
 * Built only from the theme's own tokens (tokens.css) so light and dark mode
 * and the existing components carry over unchanged. Nothing here is final.
 */

.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.ih-mock {
	position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:var(--z-toast);
	background:var(--pill-bg); border:1px solid var(--pill-border); box-shadow:var(--pill-shadow);
	-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
	color:var(--color-muted); font-size:var(--size-micro); padding:8px 16px; border-radius:var(--r-pill);
	white-space:nowrap; max-width:calc(100vw - 32px); overflow:hidden; text-overflow:ellipsis;
}

/* ------------------------------------------------------------- hero */
.ih-hero { position:relative; isolation:isolate; padding:var(--head-clear) 0 clamp(3rem,7vw,6rem); overflow:hidden; }
.ih-hero__inner { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,4vw,4rem); align-items:center; }
.ih-hero__title { font-family:var(--font-heading); font-size:var(--size-display); line-height:var(--leading-tight); letter-spacing:-.035em; font-weight:var(--w-black); margin:.9rem 0 1.2rem; }
.ih-hero__title span { color:var(--color-accent); }
.ih-hero__lede { font-size:var(--size-body-lg); line-height:var(--leading-body); color:var(--color-muted); max-width:34rem; }

.ih-search { display:flex; align-items:center; gap:.6rem; margin-top:1.8rem; max-width:34rem;
	background:var(--color-glass); border:1px solid var(--color-glass-border); border-radius:var(--r-pill);
	padding:6px 6px 6px 18px; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--color-muted); }
.ih-search input { flex:1; min-width:0; background:none; border:0; color:var(--color-foreground); font:inherit; font-size:var(--size-small); height:40px; outline:none; }
.ih-search input::placeholder { color:var(--color-muted); }
.ih-search:focus-within { border-color:var(--color-ring); }

.ih-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.ih-chips a { font-size:var(--size-micro); color:var(--color-foreground); text-decoration:none; padding:.4rem .85rem; border-radius:var(--r-pill);
	border:1px solid var(--color-glass-border); background:var(--color-glass); transition:border-color var(--dur-fast), background var(--dur-fast); }
.ih-chips a:hover { border-color:var(--color-primary); }

/* ------------------------------------------------- live preview box */
.pv { border-radius:var(--r-xl); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-glass-border); box-shadow:var(--shadow-lift); }
.pv__bar { display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem; border-bottom:1px solid var(--color-divider); }
.pv__live { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:var(--w-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-success); }
.pv__live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 0 var(--color-success); animation:pv-pulse 2s infinite; }
@keyframes pv-pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--color-success) 60%, transparent); } 70%,100% { box-shadow:0 0 0 7px transparent; } }
.pv--card .pv__devices { margin-left:auto; }
/* A preview that has not started yet shows a quiet loading state, not a white box. */
.pv__stage iframe:not([srcdoc]) { background:transparent; }
@media (prefers-reduced-motion:reduce) { .pv__live::before { animation:none; } }
.pv__label { flex:1; min-width:0; font-size:var(--size-micro); color:var(--color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pv__devices { display:flex; gap:2px; background:var(--color-glass); border:1px solid var(--color-glass-border); border-radius:var(--r-pill); padding:3px; }
.pv__devices button { display:grid; place-items:center; width:34px; height:30px; border:0; border-radius:var(--r-pill); background:none; color:var(--color-muted); cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast); }
.pv__devices button[aria-pressed="true"] { background:var(--color-primary); color:var(--color-on-primary); }
.pv__devices button:focus-visible { outline:2px solid var(--color-ring); outline-offset:2px; }

.pv__stage { position:relative; height:clamp(320px,34vw,470px); overflow:hidden; background:var(--color-surface-alt);
	display:flex; justify-content:center; transition:background var(--dur-base); }
.pv__stage iframe { border:0; flex:none; transform-origin:top center; background:#fff; }
/* Animate only on a device switch, never on first fit, or the result visibly zooms on load. */
.pv__stage.is-ready iframe { transition:width var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.pv__stage.is-narrow iframe { border-radius:18px; box-shadow:0 0 0 6px var(--color-background), 0 0 0 7px var(--color-glass-border); margin-top:14px; }

.prompt { margin-top:1rem; background:var(--color-glass); border:1px solid var(--color-glass-border); border-radius:var(--r-lg); padding:1rem 1.15rem; }
.prompt__head { display:flex; align-items:center; gap:.7rem; margin-bottom:.55rem; }
.prompt__k { font-family:var(--font-heading); font-weight:var(--w-bold); font-size:var(--size-micro); text-transform:uppercase; letter-spacing:.14em; }
.prompt__tool { font-size:var(--size-micro); color:var(--color-muted); }
.prompt__copy, .entry__copy { margin-left:auto; font:inherit; font-size:var(--size-micro); font-weight:var(--w-semibold); color:var(--color-on-primary); background:var(--color-primary);
	border:0; border-radius:var(--r-pill); padding:.38rem .9rem; cursor:pointer; transition:background var(--dur-fast); }
.prompt__copy:hover, .entry__copy:hover { background:var(--color-primary-hover); }
.prompt__text { font-size:var(--size-small); line-height:1.6; color:var(--color-foreground); }

/* ------------------------------------------------------- sections */
.ih-sec { padding:clamp(3rem,6vw,5.5rem) 0; }
.ih-sec--alt { background:var(--color-surface); border-block:1px solid var(--color-divider); }
.ih-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.ih-head--center { justify-content:center; text-align:center; }
.ih-h2 { font-family:var(--font-heading); font-weight:var(--w-black); letter-spacing:-.03em; font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem); line-height:1.1; margin-top:.4rem; }

/* collections */
.ih-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.col { display:flex; flex-direction:column; text-decoration:none; color:var(--color-foreground); background:var(--color-surface); border:1px solid var(--color-glass-border);
	border-radius:var(--r-xl); overflow:hidden; transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.col:hover { transform:translateY(-4px); border-color:var(--c); }
.col__art { height:150px; position:relative; background:radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%), var(--color-surface-alt); padding:22px; display:flex; flex-direction:column; gap:8px; }
.col__art i { display:block; border-radius:8px; background:color-mix(in srgb, var(--c) 40%, transparent); border:1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.col__art--sections i { height:16px; } .col__art--sections i:nth-child(2) { height:36px; } .col__art--sections i:nth-child(3) { width:70%; }
.col__art--components { flex-direction:row; align-items:center; justify-content:center; gap:14px; }
.col__art--components i { width:64px; height:34px; border-radius:var(--r-pill); } .col__art--components i:nth-child(2) { width:34px; border-radius:50%; } .col__art--components i:nth-child(3) { width:56px; height:56px; border-radius:14px; }
.col__art--sites { flex-direction:row; } .col__art--sites i { flex:1; } .col__art--sites i:last-child { flex:.6; }
.col__body { padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.45rem; }
.col__body b { font-family:var(--font-heading); font-size:1.25rem; }
.col__body span { color:var(--color-muted); font-size:var(--size-small); line-height:1.55; }
.col__body em { font-style:normal; font-size:var(--size-micro); color:var(--c); margin-top:.3rem; }

/* entry cards */
.ih-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.entry { background:var(--color-surface); border:1px solid var(--color-glass-border); border-radius:var(--r-xl); overflow:hidden; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.entry:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
/* Every card carries its own live, interactive preview with a device switch. */
.pv--card { border:0; border-radius:0; box-shadow:none; background:var(--color-surface-alt); }
.pv--card .pv__bar { padding:.45rem .6rem; }
.pv--card .pv__devices button { width:30px; height:26px; }
.pv--card .pv__stage { height:clamp(230px,21vw,290px); }
.pv--card .pv__stage.is-narrow iframe { margin-top:10px; border-radius:14px; }
.entry__body { padding:1rem 1.15rem 1.15rem; }
.entry__type { font-size:var(--size-micro); color:var(--color-muted); }
.entry__title { font-family:var(--font-heading); font-size:1.08rem; line-height:1.3; margin:.3rem 0 .75rem; }
.entry__title a { color:inherit; text-decoration:none; }
.entry__meta { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; }
.entry__meta span { font-size:.8rem; padding:.2rem .55rem; border-radius:var(--r-pill); border:1px solid var(--color-glass-border); color:var(--color-muted); }
.entry__meta .tool { color:var(--color-foreground); border-color:var(--color-primary); }
.entry__copy { padding:.3rem .75rem; font-size:.8rem; flex:none; }
/* Keep every card the same shape: one line of meta (tool plus one tag) pinned to
   the bottom, so Copy prompt never wraps and rows line up. */
.entry { display:flex; flex-direction:column; }
.entry__body { flex:1; display:flex; flex-direction:column; }
.entry__meta { flex-wrap:nowrap; margin-top:auto; min-width:0; }
.entry__meta span:nth-of-type(n+3) { display:none; }

/* section types */
.ih-types { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; }
.ih-types a { display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:var(--color-foreground); padding:1rem 1.1rem;
	border-radius:var(--r-lg); background:var(--color-background); border:1px solid var(--color-glass-border); transition:border-color var(--dur-fast), transform var(--dur-fast); }
.ih-types a:hover { border-color:var(--color-primary); transform:translateY(-2px); }
.ih-types b { font-family:var(--font-heading); font-size:var(--size-small); }
.ih-types span { font-size:var(--size-micro); color:var(--color-muted); }

/* industries */
.ih-inds { display:flex; flex-wrap:wrap; gap:.6rem; }
.ih-inds a { text-decoration:none; color:var(--color-foreground); font-family:var(--font-heading); font-size:1.05rem; padding:.85rem 1.3rem; border-radius:var(--r-pill);
	border:1px solid var(--color-glass-border); background:var(--color-glass); transition:border-color var(--dur-fast), background var(--dur-fast); }
.ih-inds a:hover { border-color:var(--color-accent); }

/* steps */
.ih-steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; counter-reset:none; }
.ih-steps li { background:var(--color-surface); border:1px solid var(--color-glass-border); border-radius:var(--r-xl); padding:1.5rem; }
.ih-steps .num { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--color-primary); color:var(--color-on-primary); font-family:var(--font-heading); font-weight:var(--w-black); margin-bottom:1rem; }
.ih-steps b { font-family:var(--font-heading); font-size:1.15rem; display:block; margin-bottom:.4rem; }
.ih-steps p { color:var(--color-muted); font-size:var(--size-small); line-height:1.6; margin:0; }

/* submit */
.ih-submit { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; padding:clamp(1.8rem,4vw,3.2rem);
	border-radius:var(--r-xl); border:1px solid var(--color-glass-border);
	background:radial-gradient(90% 120% at 0% 0%, var(--glow-red), transparent 60%), radial-gradient(90% 120% at 100% 100%, var(--glow-blue), transparent 60%), var(--color-surface); }
.ih-submit__copy p:not(.kicker) { color:var(--color-muted); font-size:var(--size-body); line-height:var(--leading-body); margin:.8rem 0 1.4rem; max-width:30rem; }
.ih-submit__rules { list-style:none; padding:0; margin:0; display:grid; gap:.8rem; }
.ih-submit__rules li { background:var(--color-glass); border:1px solid var(--color-glass-border); border-radius:var(--r-lg); padding:1rem 1.1rem; color:var(--color-muted); font-size:var(--size-small); line-height:1.55; }
.ih-submit__rules b { color:var(--color-foreground); }

/* journal */
.ih-journal { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.jcard { display:flex; flex-direction:column; gap:.55rem; text-decoration:none; color:var(--color-foreground); }
.jcard__media { aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--color-surface-alt); }
.jcard__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.jcard:hover img { transform:scale(1.04); }
.jcard__tag { font-size:var(--size-micro); color:var(--color-muted); margin-top:.3rem; }
.jcard b { font-family:var(--font-heading); font-size:1.12rem; line-height:1.3; }

/* ------------------------------------------------------- responsive */
@media (max-width:1100px) { .ih-types { grid-template-columns:repeat(3,1fr); } }
/* The preview renders at a real device width (up to 1440px) and is scaled down
   with a transform, which does not shrink its layout box. A plain 1fr track
   would grow to fit that box and push the whole hero off a phone screen, so
   tracks are minmax(0,1fr) and the column itself may shrink below its content. */
.ih-hero__copy, .ih-feature { min-width:0; }
@media (max-width:960px) {
	.ih-hero__inner { grid-template-columns:minmax(0,1fr); }
	.ih-cols, .ih-grid, .ih-journal, .ih-steps { grid-template-columns:1fr 1fr; }
	.ih-submit { grid-template-columns:1fr; }
}
@media (max-width:640px) {
	.ih-cols, .ih-grid, .ih-journal, .ih-steps { grid-template-columns:1fr; }
	.ih-types { grid-template-columns:1fr 1fr; }
	.ih-search button { display:none; }
	.pv__label { display:none; }
}


/* =================================================== entry + category pages */
.ie-top { padding-top:var(--head-clear); }
.ie-crumbs { display:flex; flex-wrap:wrap; gap:.5rem; font-size:var(--size-micro); color:var(--color-muted); margin-bottom:1.4rem; }
.ie-crumbs a { color:var(--color-muted); text-decoration:none; }
.ie-crumbs a:hover { color:var(--color-foreground); }
.ie-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.ie-title { font-family:var(--font-heading); font-weight:var(--w-black); letter-spacing:-.035em; line-height:1.05; font-size:clamp(2rem,1.3rem + 2.6vw,3.4rem); margin:.4rem 0 .9rem; }
.ie-by { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; color:var(--color-muted); font-size:var(--size-small); }
.ie-by a { color:var(--color-foreground); }
.ie-by b { color:var(--color-foreground); font-weight:var(--w-semibold); }
.ie-avatar { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#7c5cff,#22d3ee); color:#fff; font-size:.72rem; font-weight:var(--w-bold); }
.ie-avatar--lg { width:52px; height:52px; font-size:1rem; }
.ie-actions { display:flex; gap:.6rem; }
.ie-save { border:1px solid var(--color-glass-border); background:var(--color-glass); }
.ie-save[aria-pressed="true"] { color:var(--color-accent); border-color:var(--color-accent); }

.pv--xl .pv__stage { height:clamp(420px,62vh,720px); }
.pv__fs { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--color-glass-border); border-radius:var(--r-pill); background:var(--color-glass); color:var(--color-muted); cursor:pointer; }
.pv__fs:hover { color:var(--color-foreground); }
.pv:fullscreen { border-radius:0; display:flex; flex-direction:column; }
.pv:fullscreen .pv__stage { height:auto; flex:1; }

.ie-body { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(1.5rem,3vw,3rem); padding-block:2rem clamp(2rem,5vw,4rem); }
.ie-main > * + * { margin-top:2rem; }
.prompt--xl { margin-top:0; padding:1.4rem 1.5rem; }
.prompt--xl .prompt__text { font-size:var(--size-body); line-height:1.65; }
.prompt__note { margin-top:.8rem; font-size:var(--size-micro); color:var(--color-muted); }
.ie-h2 { font-family:var(--font-heading); font-weight:var(--w-black); letter-spacing:-.02em; font-size:1.45rem; margin-bottom:.8rem; }
.ie-h3 { font-family:var(--font-heading); font-size:1.12rem; margin:1.4rem 0 .6rem; }
.ie-steps ol { margin:0; padding-left:1.3rem; display:grid; gap:.5rem; color:var(--color-muted); font-size:var(--size-body); }
.ie-steps b { color:var(--color-foreground); }
.ie-about p, .ie-about li { color:var(--color-muted); font-size:var(--size-body); line-height:var(--leading-body); }
.ie-about p + p { margin-top:.9rem; }
.ie-about ul { padding-left:1.2rem; display:grid; gap:.45rem; }
.ie-about b { color:var(--color-foreground); }
.ie-licence { font-size:var(--size-small); color:var(--color-muted); padding:1rem 1.1rem; border:1px dashed var(--color-glass-border); border-radius:var(--r-lg); }

.ie-side { display:flex; flex-direction:column; gap:1rem; align-self:start; position:sticky; top:calc(var(--head-clear) - 1rem); }
.ie-card { background:var(--color-surface); border:1px solid var(--color-glass-border); border-radius:var(--r-xl); padding:1.2rem 1.25rem; }
.ie-card__h { font-family:var(--font-heading); font-size:1rem; margin-bottom:.8rem; }
.ie-dl { display:grid; grid-template-columns:auto 1fr; gap:.6rem 1rem; margin:0; font-size:var(--size-small); }
.ie-dl dt { color:var(--color-muted); }
.ie-dl dd { margin:0; display:flex; flex-wrap:wrap; gap:.35rem; }
.ie-dl a { color:var(--color-foreground); }
.ie-tag { font-size:.78rem; padding:.15rem .5rem; border-radius:var(--r-pill); border:1px solid var(--color-glass-border); color:var(--color-muted); }
.ie-swatches i { width:22px; height:22px; border-radius:6px; background:var(--s); border:1px solid var(--color-glass-border); display:block; }
.ie-designer { display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; align-items:center; }
.ie-designer b { display:block; font-family:var(--font-heading); }
.ie-designer span { font-size:var(--size-micro); color:var(--color-muted); }
.ie-designer .btn { grid-column:1/-1; justify-content:center; }
.ie-site { grid-column:1/-1; font-size:var(--size-micro); color:var(--color-muted); text-align:center; }
.ie-report { font-size:var(--size-micro); color:var(--color-muted); text-align:center; }

/* category page */
.ic-tabs { display:inline-flex; gap:4px; padding:4px; border-radius:var(--r-pill); background:var(--color-glass); border:1px solid var(--color-glass-border); margin-bottom:1.6rem; flex-wrap:wrap; }
.ic-tabs a { text-decoration:none; color:var(--color-muted); font-size:var(--size-small); font-weight:var(--w-semibold); padding:.5rem 1rem; border-radius:var(--r-pill); }
.ic-tabs a.is-on { background:var(--color-primary); color:var(--color-on-primary); }
.ic-head { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; }
.ic-lede { color:var(--color-muted); font-size:var(--size-body-lg); line-height:var(--leading-body); max-width:44rem; }
.ic-count { color:var(--color-muted); font-size:var(--size-small); }
.ic-count b { color:var(--color-foreground); }
.ic-types { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.8rem 0 1rem; }
.ic-types button { font:inherit; font-size:var(--size-small); color:var(--color-foreground); background:var(--color-glass); border:1px solid var(--color-glass-border); border-radius:var(--r-pill); padding:.5rem 1rem; cursor:pointer; transition:background var(--dur-fast), border-color var(--dur-fast); }
.ic-types button:hover { border-color:var(--color-primary); }
.ic-types button[aria-pressed="true"] { background:var(--color-primary); color:var(--color-on-primary); border-color:var(--color-primary); }
.ic-filters { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; padding:1rem 0 1.6rem; border-bottom:1px solid var(--color-divider); }
.ic-select { display:flex; align-items:center; gap:.5rem; font-size:var(--size-micro); color:var(--color-muted); }
.ic-select select { font:inherit; font-size:var(--size-small); color:var(--color-foreground); background:var(--color-surface); border:1px solid var(--color-glass-border); border-radius:var(--r-md); padding:.45rem .7rem; }
.ic-sort { margin-left:auto; }
.ic-colours { display:flex; align-items:center; gap:.4rem; font-size:var(--size-micro); color:var(--color-muted); }
.ic-colours span { margin-right:.2rem; }
.ic-colours button { width:22px; height:22px; border-radius:50%; background:var(--s); border:1px solid var(--color-glass-border); cursor:pointer; }
.ic-colours button[aria-pressed="true"] { box-shadow:0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary); }
.ic-results { padding:2rem 0 clamp(3rem,6vw,5rem); }
.ic-empty { text-align:center; color:var(--color-muted); padding:3rem 0; }
.ic-empty button { font:inherit; color:var(--color-primary); background:none; border:0; text-decoration:underline; cursor:pointer; }
.ic-more { display:flex; justify-content:center; margin-top:2.2rem; }
.ic-guide { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.5rem,4vw,4rem); }
.ic-guide__body p, .ic-guide__body li { color:var(--color-muted); font-size:var(--size-body); line-height:var(--leading-body); }
.ic-guide__body ul { margin-top:1rem; padding-left:1.2rem; display:grid; gap:.5rem; }
.ic-guide__body b { color:var(--color-foreground); }
.entry[hidden] { display:none; }

@media (max-width:960px) {
	.ie-body { grid-template-columns:minmax(0,1fr); }
	.ie-side { position:static; }
	.ic-guide { grid-template-columns:1fr; }
}
@media (max-width:640px) {
	.pv--xl .pv__stage { height:68vh; }
	.ic-sort { margin-left:0; }
	.ie-actions { width:100%; }
	.ie-actions .btn { flex:1; justify-content:center; }
	.ie-save { border:1px solid var(--color-glass-border); background:var(--color-glass); }
	/* Tabs and type chips scroll sideways on a phone instead of wrapping into a lumpy pill. */
	.ic-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; }
	.ic-tabs a { white-space:nowrap; flex:none; }
	.ic-types { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding-inline:16px; }
	.ic-types button { flex:none; white-space:nowrap; }
}

/* ===================================================== hero swarm builder */
.sw { position:relative; background:var(--color-glass); border:1px solid var(--color-glass-border); border-radius:var(--r-lg); overflow:hidden;
	box-shadow:0 30px 80px -30px rgba(0,0,0,.55); }
.sw__bar { display:flex; align-items:center; gap:.8rem; padding:.6rem .85rem; border-bottom:1px solid var(--color-glass-border); }
.sw__dots { display:flex; gap:6px; }
.sw__dots i { width:10px; height:10px; border-radius:50%; background:var(--color-glass-border); }
.sw__dots i:nth-child(1) { background:#ff5f57; } .sw__dots i:nth-child(2) { background:#febc2e; } .sw__dots i:nth-child(3) { background:#28c840; }
.sw__url { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:var(--size-micro); color:var(--color-muted);
	background:rgba(127,127,127,.08); border-radius:var(--r-pill); padding:.3rem .8rem; max-width:18rem; margin:0 auto; white-space:nowrap; overflow:hidden; }
.sw__status { font-size:var(--size-micro); font-weight:var(--w-semibold); color:var(--color-muted); white-space:nowrap; display:flex; align-items:center; gap:.4rem; min-width:7.5rem; justify-content:flex-end; }
.sw__status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.6; }
.sw__status.is-busy { color:#a78bfa; } .sw__status.is-busy::before { animation:swBlink .8s steps(1) infinite; opacity:1; }
.sw__status.is-live { color:#2dd4bf; } .sw__status.is-live::before { opacity:1; }
.sw__stage { aspect-ratio:16/10; background:#0b0e16; }
.sw__stage canvas { display:block; width:100%; height:100%; }
.sw__prompt { display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 1rem; border-top:1px solid var(--color-glass-border); min-height:4.6rem; }
.sw__k { flex:none; font-family:var(--font-heading); font-weight:var(--w-bold); font-size:var(--size-micro); text-transform:uppercase; letter-spacing:.14em; color:var(--color-accent); padding-top:.15rem; }
.sw__text { font-size:var(--size-small); line-height:1.55; color:var(--color-foreground); margin:0; }
.sw__caret { display:inline-block; width:2px; height:1em; vertical-align:-2px; margin-left:2px; background:var(--color-accent); animation:swBlink 1s steps(1) infinite; }
@keyframes swBlink { 50% { opacity:0; } }
.sw__steps { display:flex; gap:.4rem; list-style:none; margin:0; padding:0 1rem .9rem; counter-reset:sw; }
.sw__steps li { flex:1; text-align:center; font-size:var(--size-micro); color:var(--color-muted); padding:.35rem .4rem; border-radius:var(--r-pill);
	border:1px solid var(--color-glass-border); transition:color .3s, background .3s, border-color .3s; }
.sw__steps li.is-done { color:var(--color-on-primary); background:var(--color-primary); border-color:var(--color-primary); }
@media (max-width:640px) { .sw__status { min-width:0; } .sw__url { display:none; } .sw__steps li { font-size:.68rem; padding:.3rem .2rem; } }

/* ============================================ website inspiration showcase */
.ws-lede { color:var(--color-muted); max-width:44rem; margin:-.6rem 0 1.6rem; font-size:var(--size-body); }
.ws-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.1rem; }
.ws { position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg); color:var(--fg);
	border:1px solid color-mix(in srgb, var(--fg) 12%, transparent); display:flex; flex-direction:column; min-width:0;
	transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ws:hover { transform:translateY(-4px); box-shadow:0 24px 50px -24px color-mix(in srgb, var(--ac) 60%, transparent); }
.ws__art { position:relative; height:132px; overflow:hidden; }
.ws__art i { position:absolute; display:block; }
/* default: soft glow and a floating product panel */
.ws__art i:nth-child(1) { width:70%; height:140%; left:15%; top:-60%; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--ac) 70%, transparent), transparent); filter:blur(10px); animation:wsDrift 7s ease-in-out infinite alternate; }
.ws__art i:nth-child(2) { left:12%; right:12%; top:38%; height:62%; border-radius:10px 10px 0 0; background:color-mix(in srgb, var(--fg) 6%, var(--bg)); border:1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.ws__art i:nth-child(3) { left:18%; top:50%; width:38%; height:8px; border-radius:4px; background:color-mix(in srgb, var(--fg) 30%, transparent); box-shadow:0 16px 0 -1px color-mix(in srgb, var(--fg) 14%, transparent), 0 30px 0 -1px color-mix(in srgb, var(--fg) 10%, transparent); }
.ws__art--mesh i:nth-child(1) { width:90%; left:-10%; top:-40%; background:radial-gradient(closest-side, #ff6ec4, transparent); }
.ws__art--mesh i:nth-child(2) { left:auto; right:-20%; top:-30%; width:80%; height:160%; border:0; border-radius:50%; background:radial-gradient(closest-side, #ffcb57, transparent); filter:blur(8px); animation:wsDrift 6s ease-in-out infinite alternate-reverse; }
.ws__art--mesh i:nth-child(3) { left:20%; top:20%; width:60%; height:120%; border-radius:50%; background:radial-gradient(closest-side, var(--ac), transparent); box-shadow:none; filter:blur(6px); animation:wsDrift 8s ease-in-out infinite alternate; }
.ws__art--grid { background-image:linear-gradient(color-mix(in srgb, var(--fg) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--fg) 12%, transparent) 1px, transparent 1px); background-size:26px 26px; }
.ws__art--grid i:nth-child(1) { width:0; height:0; left:50%; top:24%; transform:translateX(-50%); border-left:34px solid transparent; border-right:34px solid transparent; border-bottom:58px solid var(--fg); border-radius:0; background:none; filter:none; animation:wsBob 4s ease-in-out infinite; }
.ws__art--grid i:nth-child(2), .ws__art--grid i:nth-child(3) { display:none; }
.ws__art--scroll i:nth-child(1) { width:56px; height:96px; left:calc(50% - 28px); top:22px; border-radius:14px; background:linear-gradient(160deg, #d2d2d7, #8e8e93); filter:none; animation:wsTurn 5s ease-in-out infinite; }
.ws__art--scroll i:nth-child(2), .ws__art--scroll i:nth-child(3) { display:none; }
.ws__art--glass i:nth-child(1) { width:64px; height:64px; left:calc(50% - 74px); top:34px; border-radius:16px; background:linear-gradient(140deg, var(--ac), #ff9f43); filter:none; transform:rotate(-10deg); box-shadow:0 14px 30px -8px var(--ac); animation:wsBob 4s ease-in-out infinite; }
.ws__art--glass i:nth-child(2) { width:64px; height:64px; left:calc(50% + 10px); top:30px; right:auto; border-radius:16px; background:linear-gradient(140deg, rgba(255,255,255,.35), rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); transform:rotate(8deg); animation:wsBob 4s ease-in-out -2s infinite; }
.ws__art--glass i:nth-child(3) { display:none; }
.ws__art--play i:nth-child(1) { width:70px; height:70px; left:16%; top:26px; border-radius:50%; background:var(--ac); filter:none; animation:wsBob 3.6s ease-in-out infinite; }
.ws__art--play i:nth-child(2) { width:64px; height:64px; left:44%; top:44px; right:auto; border:0; border-radius:18px; background:#7b61ff; transform:rotate(12deg); animation:wsBob 3.6s ease-in-out -1.2s infinite; }
.ws__art--play i:nth-child(3) { width:54px; height:54px; left:70%; top:22px; border-radius:50% 50% 50% 0; background:#2ec4b6; box-shadow:none; animation:wsBob 3.6s ease-in-out -2.4s infinite; }
@keyframes wsDrift { to { transform:translate(12%, 8%) scale(1.1); } }
@keyframes wsBob { 50% { translate:0 -8px; } }
@keyframes wsTurn { 0%,100% { transform:perspective(300px) rotateY(-28deg); } 50% { transform:perspective(300px) rotateY(28deg); } }
.ws__body { padding:1rem 1.15rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.ws__dom { font-size:var(--size-micro); color:var(--mu); margin:0; letter-spacing:.02em; }
.ws__name { font-family:var(--font-heading); font-size:1.35rem; font-weight:var(--w-black); letter-spacing:-.02em; margin:0; color:var(--fg); }
.ws__why { font-size:var(--size-small); line-height:1.5; color:var(--mu); margin:0; }
.ws__tags { display:flex; flex-wrap:wrap; gap:.35rem; margin:.3rem 0 0; }
.ws__tags span { font-size:.72rem; padding:.2rem .6rem; border-radius:var(--r-pill); border:1px solid color-mix(in srgb, var(--fg) 18%, transparent); color:var(--fg); }
.ws__links { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.7rem; border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.ws__links a { font-size:var(--size-micro); font-weight:var(--w-semibold); color:var(--fg); text-decoration:none; }
.ws__links a:last-child { color:var(--bg); background:var(--fg); padding:.35rem .8rem; border-radius:var(--r-pill); }
.ws__links a:hover { text-decoration:underline; }
.ws-own { margin-top:1.4rem; color:var(--color-muted); font-size:var(--size-small); }
@media (max-width:900px) { .ws-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .ws-grid { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { .ws__art i { animation:none !important; } }

/* ===================================================== showcase bento grid */
.bento { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-auto-rows:200px; grid-auto-flow:dense; gap:14px; }
.bn { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; border-radius:var(--r-lg);
	background:#0b0e16; border:1px solid var(--color-glass-border); text-decoration:none; color:#fff; isolation:isolate;
	transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.bn:hover { transform:translateY(-3px); border-color:var(--color-primary); box-shadow:0 22px 48px -22px rgba(0,0,0,.6); }
.bn--xl { grid-column:span 2; grid-row:span 2; }
.bn--wide { grid-column:span 2; }
.bn--tall { grid-row:span 2; }
.bn__bar { flex:none; display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; background:rgba(20,22,30,.96); border-bottom:1px solid rgba(255,255,255,.08); }
.bn__bar i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); }
.bn__dom { margin-left:8px; font-size:.68rem; color:rgba(255,255,255,.6); letter-spacing:.01em; }
.bn__view { position:relative; flex:1; overflow:hidden; background:#fff; }
.bn__view video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; background:#0b0e16; }
.bn__info { position:absolute; left:0; right:0; bottom:0; padding:2.2rem .9rem .8rem; display:flex; flex-direction:column; gap:.25rem;
	background:linear-gradient(to top, rgba(8,10,16,.94) 0%, rgba(8,10,16,.78) 55%, rgba(8,10,16,0)); }
.bn__name { font-family:var(--font-heading); font-weight:var(--w-black); font-size:1.05rem; letter-spacing:-.01em; color:#fff; }
.bn__name em { font-style:normal; font-size:.8em; opacity:.6; }
.bn--xl .bn__name { font-size:1.45rem; }
.bn__why { font-size:.8rem; line-height:1.45; color:rgba(255,255,255,.78); }
.bn__tags { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.2rem; }
.bn__tags span { font-size:.66rem; padding:.12rem .5rem; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.85); }
/* Small tiles: name only until hover, so the site itself stays visible. */
.bn--sm .bn__why, .bn--sm .bn__tags { display:none; }
.bn--sm:hover .bn__why { display:block; }
@media (max-width:1000px) { .bento { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) {
	.bento { grid-template-columns:minmax(0,1fr); grid-auto-rows:240px; }
	.bn--xl, .bn--wide { grid-column:auto; }
	.bn--xl { grid-row:span 2; }
	.bn--tall { grid-row:auto; }
}

/* ===================================================== live-site additions */
/* Type chips are real links to type pages on the live site. */
.ic-types a { font-size:var(--size-small); color:var(--color-foreground); background:var(--color-glass); border:1px solid var(--color-glass-border);
	border-radius:var(--r-pill); padding:.5rem 1rem; text-decoration:none; white-space:nowrap; transition:border-color var(--dur-fast); }
.ic-types a:hover { border-color:var(--color-primary); }
.ic-types a.is-on { background:var(--color-primary); color:var(--color-on-primary); border-color:var(--color-primary); }
.ic-tabs a[aria-current] { pointer-events:none; }
.ic-lede p { margin:0 0 .6rem; }
.ie-about h2 { font-family:var(--font-heading); font-size:1.35rem; margin:1.6rem 0 .6rem; }
.ie-about h3 { font-family:var(--font-heading); font-size:1.05rem; margin:1.2rem 0 .4rem; }
.ie-about p, .ie-about li { color:var(--color-muted); line-height:1.7; }
.ie-about ul { padding-left:1.2rem; }
.ic-empty a { margin-left:.4rem; }
/* Library page search (the header search icon lands on /library/#q). */
.ic-search { margin:0 0 1rem; max-width:36rem; }

/* Corner bleed fix. Videos, preview iframes and the hero canvas are drawn on
   their own graphics layer, and overflow:hidden anti-aliases that layer's
   rounded corner slightly differently from the caption painted over it, so a
   1px arc of the bright content underneath showed on every curved corner.
   clip-path cuts the box and everything in it in one pass, so the edges match.
   Only boxes whose media reaches a rounded corner need it; cards and the hero
   frame keep their media in the middle, and keep their outer shadows. */
.bn { clip-path:inset(0 round var(--r-lg)); border-color:transparent; }
.bn:hover { box-shadow:none; border-color:transparent; }
/* The outline is drawn ON TOP of the video as an opaque ring, 2px deep, so the
   video's soft edge can never light up the border on the curves. */
.bn::after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 2.5px #0b0e16; transition:box-shadow var(--dur-base); }
.bn:hover::after, .bn:focus-visible::after { box-shadow:inset 0 0 0 1px var(--color-primary), inset 0 0 0 2.5px #0b0e16; }
.jcard__media { clip-path:inset(0 round var(--r-lg)); }
.pv--xl .pv__stage { clip-path:inset(0 round 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px)); }

/* Collection counts: the pastel accents fail contrast on a light background,
   so mix them toward the text colour (darker in light mode, lighter in dark). */
.col__body em.num { color:color-mix(in srgb, var(--c) 50%, var(--color-foreground)); }

/* Showcase page: the written list under the video tiles. */
.sc-list { list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); counter-reset:sc; }
.sc-list li { counter-increment:sc; padding:1.1rem 1.2rem; border-radius:var(--r-lg); background:var(--color-glass); border:1px solid var(--color-glass-border); }
.sc-list h3 { font-family:var(--font-heading); font-size:1.1rem; margin:0 0 .35rem; }
.sc-list h3::before { content:counter(sc, decimal-leading-zero) "  "; color:var(--color-muted); font-family:var(--font-body); font-weight:400; font-size:.85rem; }
.sc-list p { margin:0 0 .6rem; color:var(--color-muted); line-height:1.55; font-size:.95rem; }
.sc-list__meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:0 !important; }
.sc-list__meta span { font-size:.72rem; padding:.15rem .55rem; border-radius:var(--r-pill); border:1px solid var(--color-glass-border); color:var(--color-foreground); }
.sc-list__meta a { margin-left:auto; font-size:.85rem; color:var(--color-primary); text-decoration:none; }

/* Recorded entries (submitted designs): a screen recording, never a live frame. */
.pv__live--rec { color:var(--color-muted); }
.pv__live--rec::before { background:#e5484d; box-shadow:none; animation:none; }
.pv__stage--rec video { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; background:var(--color-surface-alt); }
.pv--rec .pv__devices { margin-left:auto; }
.pv--rec.is-phone .pv__stage--rec { display:grid; place-items:start center; padding-top:14px; }
.pv--rec.is-phone .pv__stage--rec video { width:auto; max-width:100%; height:calc(100% - 14px); aspect-ratio:390/844; object-fit:cover; border-radius:18px; box-shadow:0 0 0 6px var(--color-background), 0 0 0 7px var(--color-glass-border); }
.pv__visit { margin:.9rem 0 0; display:flex; justify-content:flex-end; }