.template-page { --demo-accent: var(--accent); }
body > a.skip-link { position:absolute; z-index:20; top:-100px; left:16px; padding:8px 12px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); }
body > a.skip-link:focus { top:12px; }
.template-page[data-family="apps"] { --demo-accent: var(--accent); }
.template-page[data-family="apps"] .directory-page { width:min(1184px,calc(100% - 48px)); padding-top:48px; }
.template-page[data-family="apps"] .directory-site-header { display:flex; min-height:84px; align-items:center; justify-content:space-between; gap:24px; padding:0 max(24px,calc((100% - 1184px)/2)); border-bottom:1px solid var(--line); font:11px var(--font-mono); }
.directory-site-header a { color:var(--muted); text-decoration:none; }
.directory-site-header a:hover,.directory-site-header a:focus-visible { color:var(--ink); }
.directory-brand { display:flex; align-items:center; gap:12px; color:var(--ink)!important; font-size:13px; }
.directory-brand img { width:38px; height:38px; object-fit:contain; }
.directory-site-header nav { display:flex; flex-wrap:wrap; gap:24px; }
.template-page[data-family="apps"] .directory-heading h1,.template-page[data-family="apps"] .directory-section-heading h2 { font-family:var(--font-heading); font-size:clamp(42px,5vw,64px); font-weight:600; letter-spacing:-.04em; line-height:1.05; }
.template-page[data-family="apps"] h1 em { color:var(--demo-accent); }
.directory-heading { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:center; gap:36px; padding:32px 0 50px; border-bottom:1px solid var(--line); }
.directory-heading .template-kicker { margin-bottom:16px; }
.directory-heading .template-title { max-width:780px; }
.directory-heading .directory-note { max-width:500px; margin:18px 0 0; color:var(--muted); font:10px/1.8 var(--font-mono); }
.directory-mascot { width:100%; max-height:260px; object-fit:contain; }
.directory-section { padding-top:62px; }
.directory-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.directory-section-heading h2 { margin:0 0 10px; font:600 clamp(30px,4vw,48px)/1 var(--font-heading); }
.directory-section-heading p { margin:0; color:var(--muted); }
.directory-section-heading .template-kicker { margin-bottom:10px; color:var(--demo-accent); font:10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.directory-count { color:var(--ink)!important; font:600 17px var(--font-heading)!important; white-space:nowrap; }
.directory-tools { display:grid; grid-template-columns:minmax(190px,1fr) auto; align-items:end; gap:16px; margin-bottom:18px; }
.directory-tools form { display:flex; align-items:end; gap:8px; }
.directory-tools label { display:grid; flex:1; gap:6px; color:var(--muted); font:10px var(--font-mono); text-transform:uppercase; }
.directory-tools input { min-width:0; min-height:38px; padding:7px 10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font:12px var(--font-body); }
.directory-tools kbd { padding:7px 9px; border:1px solid var(--line); color:var(--muted); font:10px var(--font-mono); }
.directory-filters { display:flex; flex-wrap:wrap; gap:4px; }
.directory-filters button { display:flex; align-items:center; gap:7px; min-height:36px; padding:6px 10px; border:1px solid transparent; border-radius:var(--radius); background:transparent; color:var(--muted); cursor:pointer; font:10px var(--font-mono); }
.directory-filters button:hover,.directory-filters button[aria-pressed="true"] { border-color:var(--line); background:var(--panel); color:var(--accent); }
.directory-filters span { opacity:.68; }
.directory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.directory-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); transition:border-color .16s,transform .16s; }
.directory-card:hover { border-color:var(--demo-accent); transform:translateY(-2px); }
.directory-card[hidden],.directory-empty[hidden] { display:none!important; }
.directory-card-main { display:grid; grid-template-columns:90px minmax(0,1fr); align-items:start; gap:12px; min-height:132px; padding:14px 12px 8px; color:var(--ink); text-decoration:none; }
.directory-image { display:block; width:90px; aspect-ratio:1; object-fit:cover; border-radius:calc(var(--radius) * .7); background:var(--panel-2); }
.directory-placeholder { display:grid; place-items:center; color:var(--demo-accent); font:600 16px var(--font-heading); }
.directory-card-copy { min-width:0; }
.directory-card-copy .eyebrow { overflow:hidden; margin:0 0 5px; color:var(--muted); font:8px var(--font-mono); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.directory-card-copy h2 { margin:0 0 6px; font:600 17px/1.08 var(--font-heading); letter-spacing:-.03em; }
.directory-card-main:hover h2 { color:var(--demo-accent); }
.directory-card-copy > p:last-child { display:-webkit-box; overflow:hidden; margin:0; color:var(--muted); font-size:11px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.directory-featured { display:inline-block; margin-left:3px; padding:2px 4px; border:1px solid var(--demo-accent); color:var(--demo-accent); font:7px var(--font-mono); letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }
.directory-card-meta { display:flex; justify-content:space-between; gap:8px; padding:8px 12px 11px 114px; color:var(--muted); font:8px var(--font-mono); }
.directory-card-meta a { color:var(--muted); text-decoration:none; }
.directory-card-meta a:hover { color:var(--demo-accent); }
.directory-empty { padding:22px; border:1px dashed var(--line); color:var(--muted); text-align:center; }
.template-header { display:flex; align-items:center; gap:24px; min-height:68px; padding:0 max(24px,calc((100% - 1120px)/2)); border-bottom:1px solid var(--line); font:11px var(--font-mono); }
.template-header a { color:var(--muted); text-decoration:none; }
.template-header a:hover,.template-header a:focus-visible { color:var(--ink); }
.template-brand { color:var(--ink)!important; font-weight:700; }
.template-brand span { margin-right:8px; color:var(--accent); }
.template-nav { display:flex; flex-wrap:wrap; gap:15px; margin-left:auto; }
.template-main { width:min(1060px,calc(100% - 40px)); min-height:calc(100vh - 150px); margin:auto; padding:clamp(44px,8vw,92px) 0 80px; }
.template-kicker { margin:0 0 13px; color:var(--demo-accent); font:10px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.template-title { max-width:850px; margin:0; font:600 clamp(42px,7vw,76px)/.98 var(--font-heading); letter-spacing:-.055em; }
.template-title em { color:var(--demo-accent); }
.template-lede { max-width:650px; margin:20px 0 36px; color:var(--muted); font-size:17px; }
.template-family { display:inline-flex; align-items:center; gap:8px; margin:0 0 18px; padding:6px 9px; border:1px solid var(--line); color:var(--muted); font:9px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.template-article { max-width:740px; }
.utility-copy { max-width:740px; }
.template-family::before { width:7px; height:7px; border-radius:50%; background:var(--demo-accent); content:""; }
.template-section { margin-top:42px; padding-top:24px; border-top:1px solid var(--line); }
.template-section > h2 { margin:0 0 20px; font:600 25px/1.1 var(--font-heading); }
.template-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.template-card { min-width:0; padding:20px; border:1px solid var(--line); background:var(--panel); }
.template-card h2,.template-card h3 { margin:0 0 8px; font:600 20px/1.15 var(--font-heading); }
.template-card h2 a,.template-card h3 a { color:var(--ink); text-decoration:none; }
.template-card h2 a:hover,.template-card h3 a:hover { color:var(--demo-accent); }
.template-card p { margin:8px 0; color:var(--muted); }
.template-meta { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font:10px var(--font-mono); }
.template-tag { display:inline-block; padding:4px 7px; border:1px solid var(--line); color:var(--demo-accent); font:9px var(--font-mono); text-transform:uppercase; }
.template-list { display:grid; gap:0; padding:0; list-style:none; }
.template-list li { padding:19px 0; border-bottom:1px solid var(--line); }
.template-list h2 { margin:0 0 6px; font:600 23px/1.15 var(--font-heading); }
.template-list h2 a { color:var(--ink); text-decoration:none; }
.template-list p { max-width:700px; margin:7px 0; color:var(--muted); }
.template-callout { margin:26px 0; padding:17px 20px; border-left:3px solid var(--demo-accent); background:var(--panel); }
.template-callout p { margin:0; }
.template-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.template-button { display:inline-flex; align-items:center; min-height:40px; padding:9px 13px; border:1px solid var(--demo-accent); background:var(--demo-accent); color:var(--accent-ink); font:600 11px var(--font-mono); text-decoration:none; }
.template-button.secondary { background:transparent; color:var(--ink); }
.template-button:focus-visible,.template-header a:focus-visible,.template-card a:focus-visible,.template-list a:focus-visible { outline:2px solid var(--demo-accent); outline-offset:3px; }
.template-footer { display:flex; justify-content:space-between; gap:20px; padding:22px max(24px,calc((100% - 1120px)/2)); border-top:1px solid var(--line); color:var(--muted); font:9px var(--font-mono); text-transform:uppercase; }
.media-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.media-card { overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.media-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--panel-2); }
.media-card video { display:block; width:100%; aspect-ratio:9/14; object-fit:cover; background:var(--bg); }
.media-card figcaption,.media-caption { padding:12px 14px; color:var(--muted); font-size:12px; }
.media-caption strong { display:block; margin-bottom:4px; color:var(--ink); font:600 14px var(--font-heading); }
.video-poster { display:grid; aspect-ratio:9/14; place-items:center; background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--accent) 28%,var(--panel)) 0,var(--panel) 42%,var(--bg) 84%); color:var(--accent); }
.video-poster span { display:grid; width:54px; height:54px; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:22px; }
.app-mark { display:grid; width:50px; height:50px; margin-bottom:24px; place-items:center; border:1px solid var(--demo-accent); color:var(--demo-accent); font:16px var(--font-mono); }
.tool-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; }
.tool-panel { padding:22px; border:1px solid var(--line); background:var(--panel); }
.tool-panel h2 { margin:0 0 18px; font:600 22px var(--font-heading); }
.tool-panel fieldset { min-width:0; margin:0; padding:0; border:0; }
.tool-panel fieldset:disabled { opacity:.8; }
.tool-sample-preview { color:var(--demo-accent)!important; font:600 28px var(--font-heading)!important; text-align:center; }
.tool-field { display:grid; gap:7px; margin:0 0 18px; }
.tool-field label { color:var(--muted); font:10px var(--font-mono); text-transform:uppercase; }
.tool-field input,.tool-field select,.tool-field textarea { width:100%; min-height:40px; padding:9px 10px; border:1px solid var(--line); border-radius:0; background:var(--bg); color:var(--ink); font:13px var(--font-body); }
.tool-field textarea { min-height:100px; resize:vertical; }
.tool-field input:focus-visible,.tool-field select:focus-visible,.tool-field textarea:focus-visible { outline:2px solid var(--demo-accent); outline-offset:2px; }
.status-line { padding:11px 13px; border:1px solid var(--line); color:var(--demo-accent); font:10px var(--font-mono); }
.gallery-index { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--line); background:var(--line); }
.gallery-index a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 16px; padding:18px; background:var(--bg); color:var(--ink); text-decoration:none; }
.gallery-index a:hover { background:var(--panel); }
.gallery-index strong { font:600 17px var(--font-heading); }
.gallery-index span { color:var(--muted); font-size:12px; }
.gallery-index small { grid-row:span 2; color:var(--accent); font:9px var(--font-mono); }
.recipe-card img,.catalog-card img,.hero-image,.audio-artwork { display:block; width:100%; max-height:420px; margin-bottom:18px; object-fit:cover; background:var(--panel-2); }
.recipe-card img,.catalog-card img { aspect-ratio:16/10; }
.recipe-facts,.catalog-meta { display:flex; flex-wrap:wrap; gap:8px 16px; color:var(--muted); font:10px var(--font-mono); }
.recipe-detail,.catalog-detail,.audio-detail,.upload-panel { max-width:760px; padding:24px; border:1px solid var(--line); background:var(--panel); }
.recipe-detail section { margin-top:30px; padding-top:18px; border-top:1px solid var(--line); }
.recipe-detail li { padding-block:5px; }
.audio-list { display:grid; gap:12px; padding:0; list-style:none; }
.audio-row { display:grid; grid-template-columns:78px minmax(0,1fr) minmax(180px,260px); align-items:center; gap:16px; padding:16px; border:1px solid var(--line); background:var(--panel); }
.audio-row img { width:78px; aspect-ratio:1; object-fit:cover; }
.audio-row h2,.audio-detail h2 { margin:3px 0 8px; font:600 22px/1.1 var(--font-heading); }
.audio-row p { margin:5px 0; }
.audio-row audio,.audio-detail audio { width:100%; accent-color:var(--demo-accent); }
.audio-detail { max-width:560px; }
.audio-artwork { aspect-ratio:1; max-height:none; }
.catalog-actions { display:flex; justify-content:flex-end; margin-bottom:18px; }
.upload-panel { display:grid; gap:16px; }
.upload-dropzone { display:grid; gap:8px; padding:28px; border:1px dashed var(--demo-accent); background:var(--bg); color:var(--muted); }
.upload-dropzone strong { color:var(--ink); font:600 20px var(--font-heading); }
.upload-panel input[type="file"] { max-width:100%; color:var(--muted); }
.upload-panel input:focus-visible,.upload-panel button:focus-visible { outline:2px solid var(--demo-accent); outline-offset:3px; }
.status-error { border-color:#f7768e; color:#f7768e; }
.editorial-feature { margin:36px 0 48px; padding:22px 26px 26px; border:1px solid var(--line); border-left:4px solid var(--demo-accent); background:var(--panel); }
.editorial-feature h2 { max-width:760px; margin:12px 0; font:600 clamp(28px,4vw,42px)/1.08 var(--font-heading); }
.editorial-feature h2 a { color:var(--ink); text-decoration:none; }
.editorial-feature > p:not(.template-kicker):not(.template-tags) { max-width:700px; color:var(--muted); }
.editorial-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:20px; }
.editorial-section-heading h2 { margin:0; font:600 26px/1.1 var(--font-heading); }
.editorial-section-heading a,.editorial-article > p:last-child a { color:var(--demo-accent); font:11px var(--font-mono); }
.editorial-card { padding:14px; }
.editorial-card-image { display:block; width:100%; aspect-ratio:16/10; margin-bottom:14px; object-fit:cover; background:var(--background); }
.editorial-card .template-meta { margin:0 0 10px; }
.editorial-intro { display:grid; grid-template-columns:minmax(0,1fr) 176px; align-items:center; gap:clamp(28px,7vw,90px); padding:10px 0 20px; }
.editorial-intro .template-kicker { margin-bottom:17px; }
.editorial-intro .template-lede { margin:20px 0 23px; }
.editorial-avatar { display:block; width:176px; height:176px; border:1px solid var(--line); border-radius:50%; background:var(--panel); box-shadow:var(--shadow); object-fit:cover; }
.editorial-home-links { display:flex; flex-wrap:wrap; gap:8px; }
.editorial-home-links a { display:inline-flex; align-items:center; gap:12px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); color:var(--ink); font:10px var(--font-mono); text-decoration:none; }
.editorial-home-links a:hover,.editorial-home-links a:focus-visible { border-color:var(--accent); color:var(--accent); }
.editorial-home-links span { color:var(--accent); }
.editorial-shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.editorial-shot { position:relative; display:block; overflow:hidden; aspect-ratio:1.35; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2); color:var(--ink); box-shadow:var(--shadow); text-decoration:none; }
.editorial-shot::after { position:absolute; inset:30% 0 0; background:linear-gradient(transparent,color-mix(in srgb,var(--bg) 94%,transparent)); content:""; }
.editorial-shot img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.editorial-shot:hover img { transform:scale(1.035); }
.editorial-shot > span { position:absolute; z-index:1; right:16px; bottom:14px; left:16px; display:grid; gap:3px; }
.editorial-shot strong { font:600 16px/1.1 var(--font-heading); }
.editorial-shot small { overflow:hidden; color:var(--muted); font:9px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.editorial-card h2 { margin:0 0 8px; }
.template-tags { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 0; }
.template-tags .template-tag { text-transform:none; letter-spacing:0; }
.editorial-archive-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.editorial-source-note { margin-top:24px; color:var(--muted); font:10px var(--font-mono); }
.editorial-article { max-width:760px; margin-inline:auto; }
.editorial-article .template-title { margin-bottom:18px; }
.editorial-body { margin-top:30px; line-height:1.8; }
.editorial-body > :first-child { margin-top:0; }
.editorial-body h2 { margin-top:2em; font:600 26px/1.15 var(--font-heading); }
.editorial-body figure { margin:26px 0; }
.editorial-body video,.editorial-body img { display:block; max-width:100%; height:auto; margin-inline:auto; }
.editorial-body blockquote { margin:24px 0; padding:4px 0 4px 20px; border-left:3px solid var(--demo-accent); color:var(--muted); }
.editorial-body a { color:var(--demo-accent); }
.editorial-body a:focus-visible,.editorial-feature a:focus-visible,.editorial-section-heading a:focus-visible { outline:2px solid var(--demo-accent); outline-offset:3px; }
.editorial-archive-list .editorial-card { display:flex; flex-direction:column; }
.editorial-archive-list .editorial-card > p:not(.template-tags) { flex:1; }
.editorial-archive-list .editorial-card .editorial-card-image { border-radius:calc(var(--radius) * .7); }
.editorial-photo figcaption { padding:14px; }
.editorial-photo figcaption > strong { display:block; margin-bottom:6px; color:var(--ink); font:600 16px/1.2 var(--font-heading); }
.editorial-photo figcaption > strong a,.editorial-recipe h2 a { color:inherit; text-decoration:none; }
.editorial-photo figcaption p { margin:0 0 10px; }
.editorial-photo figcaption .template-meta { font-size:9px; }
.editorial-recipe { align-self:start; }
.editorial-recipe .recipe-facts { margin-top:12px; }
.recipe-image-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:calc(-20px * var(--space)) calc(-20px * var(--space)) 14px; }
.recipe-image-strip a,.recipe-image-strip img { display:block; width:100%; min-width:0; aspect-ratio:1.15; }
.recipe-image-strip img { object-fit:cover; }
@media(max-width:900px) { .directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .directory-heading { grid-template-columns:minmax(0,1fr) 220px; } .directory-tools { grid-template-columns:1fr; } }
@media(max-width:700px) { .template-header { align-items:flex-start; flex-direction:column; gap:11px; padding-block:15px; } .template-nav { margin-left:0; } .template-main,.template-page[data-family="apps"] .directory-page { width:calc(100% - 32px); } .template-grid,.media-grid,.tool-layout { grid-template-columns:1fr; } .media-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .audio-row { grid-template-columns:56px minmax(0,1fr); } .audio-row img { width:56px; } .audio-row audio { grid-column:1/-1; } .directory-site-header { align-items:flex-start!important; flex-direction:column; padding-block:14px!important; } .directory-site-header nav { gap:14px; } .directory-heading { grid-template-columns:minmax(0,1fr) 150px; gap:16px; padding-block:40px; } .directory-section-heading { align-items:flex-start; flex-direction:column; } .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .directory-card-main { grid-template-columns:64px minmax(0,1fr); gap:9px; } .directory-image { width:64px; } .directory-card-meta { padding-left:85px; } .template-footer { flex-direction:column; padding-inline:16px; } }
@media(max-width:700px) { .editorial-intro { grid-template-columns:minmax(0,1fr) 112px; gap:20px; } .editorial-avatar { width:112px; height:112px; } .editorial-shots { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .editorial-archive-list { grid-template-columns:1fr; } .editorial-section-heading { align-items:flex-start; flex-direction:column; } .editorial-feature { padding:18px; } }
@media(max-width:440px) { .editorial-intro { grid-template-columns:minmax(0,1fr); } .editorial-avatar { grid-row:1; width:84px; height:84px; } .editorial-shots { gap:7px; } .editorial-shot > span { right:8px; bottom:8px; left:8px; } .editorial-shot strong { font-size:12px; } .editorial-shot small { display:none; } }
@media(max-width:460px) { .directory-heading { grid-template-columns:1fr; } .directory-mascot { grid-row:1; width:110px; justify-self:end; } .directory-grid { grid-template-columns:1fr; } }
@media(max-width:440px) { .media-grid,.gallery-index { grid-template-columns:1fr; } }

/* Examples keep each app's layout while inheriting the live Theme Lab tokens. */
.template-page,
.template-page[data-family] { --demo-accent:var(--accent); color:var(--ink); font-family:var(--font-body); background:var(--bg); }
.template-page h1,.template-page h2,.template-page h3,.template-page .template-brand,.template-page .directory-card-copy h2,.template-page .media-caption strong { font-family:var(--font-heading); }
.template-page .template-header,.template-page .directory-site-header,.template-page .template-footer,.template-page .template-meta,.template-page .template-kicker,.template-page .eyebrow,.template-page .template-tag,.template-page .directory-card-meta { font-family:var(--font-mono); }
.template-main { padding-block:calc(clamp(44px,8vw,92px) * var(--space)) calc(80px * var(--space)); }
.template-section { margin-top:calc(42px * var(--space)); padding-top:calc(24px * var(--space)); }
.template-card,.directory-card,.media-card,.tool-panel,.editorial-feature,.recipe-detail,.audio-row,.template-callout,.code-panel { border-radius:var(--radius); box-shadow:var(--shadow); }
.template-card,.tool-panel,.recipe-detail,.audio-row { padding:calc(20px * var(--space)); }
.template-button,.directory-filters button,.tool-field input,.tool-field select,.tool-field textarea { border-radius:var(--radius); }
.directory-card { overflow:hidden; }
.template-page[data-family="apps"] .directory-heading h1,.template-page[data-family="apps"] .directory-section-heading h2 { font-family:var(--font-heading)!important; }
html[data-aesthetic="balanced"] { --radius:12px; --shadow:0 18px 55px rgb(7 7 13 / .24); --space:1; }
html[data-aesthetic="brutal"] { --radius:0; --shadow:6px 6px 0 var(--line); --space:1.25; }
html[data-aesthetic="precision"] { --radius:4px; --shadow:0 2px 7px rgb(0 0 0 / .1); --space:1; }
html[data-aesthetic="elevated"] { --radius:22px; --shadow:0 24px 60px rgb(0 0 0 / .24); --space:1.15; }
html[data-aesthetic="minimal"] { --radius:4px; --shadow:none; --space:.9; }

/* The gallery index gives each family a quick, visual preview before opening it. */
.gallery-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; border:0; background:none; }
.gallery-card { display:block; min-width:0; height:auto; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); color:var(--ink); text-decoration:none; transition:transform .16s,border-color .16s; }
.gallery-card:hover,.gallery-card:focus-visible { transform:translateY(-2px); border-color:var(--accent); }
.gallery-card:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.gallery-preview { min-height:142px; overflow:hidden; padding:11px 12px 0; background:var(--panel-2); }
.preview-browser { display:flex; align-items:center; gap:4px; height:19px; padding:0 7px; border:1px solid var(--line); border-bottom:0; border-radius:calc(var(--radius) * .55) calc(var(--radius) * .55) 0 0; background:var(--bg); }
.preview-browser > span { width:4px; height:4px; border-radius:50%; background:var(--muted); opacity:.6; }
.preview-browser small { overflow:hidden; margin-left:5px; color:var(--muted); font:7px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.preview-canvas { position:relative; display:grid; grid-template-columns:1fr 34%; gap:8px; min-height:95px; padding:13px; border:1px solid var(--line); background:var(--bg); }
.preview-copy { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; }
.preview-copy > i,.preview-copy > b,.preview-copy > em,.preview-foot span { display:block; border-radius:2px; background:var(--muted); opacity:.3; }
.preview-copy > i { width:26%; height:3px; background:var(--accent); opacity:.85; }
.preview-copy > b { width:82%; height:10px; background:var(--ink); opacity:.8; }
.preview-copy > em { width:93%; height:3px; }
.preview-copy > em:last-of-type { width:68%; }
.preview-tags { display:flex; gap:3px; margin-top:auto; }
.preview-tags span { width:19px; height:5px; border:1px solid var(--accent); border-radius:2px; opacity:.65; }
.preview-art { display:grid; min-width:0; place-items:center; overflow:hidden; border-radius:calc(var(--radius) * .6); background:var(--panel-2); }
.preview-art img { display:block; width:100%; height:100%; max-height:75px; object-fit:cover; }
.preview-foot { display:flex; gap:5px; padding:7px 2px; }
.preview-foot span { height:3px; width:26%; }
.preview-widget { display:grid; grid-template-columns:1fr 1fr; gap:5px; width:85%; }
.preview-widget i,.preview-widget b { height:11px; border:1px solid var(--line); border-radius:3px; background:var(--bg); }
.preview-widget b { grid-column:1/-1; height:30px; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 20%,var(--panel)); }
.preview-short-video-feed .preview-canvas,.preview-image-gallery .preview-canvas,.preview-recipe-library .preview-canvas,.preview-audio-library .preview-canvas { grid-template-columns:1fr 1fr; }
.preview-short-video-feed .preview-art { grid-row:span 2; }
.preview-image-gallery .preview-art { grid-column:2; grid-row:1; }
.preview-app-directory .preview-canvas { grid-template-columns:1fr; padding:8px; }
.preview-app-directory .preview-copy { display:none; }
.preview-app-directory .preview-art { height:67px; background:color-mix(in srgb,var(--accent) 12%,var(--panel)); }
.preview-app-directory .preview-art img { width:48px; height:52px; object-fit:contain; }
.preview-tool-shell .preview-canvas,.preview-upload-workflow .preview-canvas,.preview-utility-page .preview-canvas { grid-template-columns:1fr 1fr; }
.preview-tool-shell .preview-widget,.preview-upload-workflow .preview-widget,.preview-utility-page .preview-widget { grid-column:2; grid-row:1; }
.preview-tool-shell .preview-copy,.preview-upload-workflow .preview-copy,.preview-utility-page .preview-copy { grid-column:1; grid-row:1; }
.preview-audio-library .preview-art { grid-row:span 2; }
.gallery-card-copy { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px 14px 15px; }
.gallery-card-copy > div { display:grid; gap:5px; }
.gallery-card-copy strong { font:600 16px/1.1 var(--font-heading); }
.gallery-card-copy span { color:var(--muted); font-size:11px; line-height:1.45; }
.gallery-card-copy > small { flex:none; color:var(--accent); font:8px var(--font-mono); white-space:nowrap; }
.directory-template-link { flex-basis:100%; color:var(--demo-accent)!important; }
.directory-card-meta { flex-wrap:wrap; row-gap:5px; }
.editorial-feature .template-tags + .template-button { margin-top:14px; }
@media(max-width:900px) { .gallery-index { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:440px) { .gallery-index { grid-template-columns:1fr; } }
.gallery-index a.gallery-card { display:block; height:auto; padding:0; background:var(--panel); }