.template-showcase{overflow:hidden;padding-top:12px!important}
.template-showcase-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.72fr);gap:clamp(30px,7vw,90px);align-items:end;margin-bottom:44px}
.template-showcase-heading h2{max-width:15ch;margin-top:13px}
.template-showcase-heading>p{color:var(--slate);font-size:.95rem;line-height:1.75}
.template-showcase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,30px)}
.template-showcase-card{min-width:0;overflow:hidden;border:1px solid rgba(9,11,18,.14);border-radius:26px;background:var(--public-surface);box-shadow:0 25px 70px -48px rgba(9,11,18,.55)}
.template-showcase-card:nth-child(3n+2){transform:translateY(34px)}
.template-showcase-frame-wrap{position:relative;overflow:hidden;height:360px;border-bottom:1px solid rgba(9,11,18,.14);background:var(--public-surface)}
.template-showcase-frame-wrap iframe{position:absolute;inset:0;width:1440px;height:900px;border:0;background:var(--public-surface);transform:scale(.425);transform-origin:top left;pointer-events:none}
.template-demo-label{position:absolute;top:14px;right:14px;z-index:2;padding:7px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(9,11,18,.88);color:var(--public-text);font:700 .56rem/1 var(--font-mono);letter-spacing:.12em;backdrop-filter:blur(10px)}
.template-showcase-copy{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:24px}
.template-index{color:var(--public-muted);font:700 .68rem/1 var(--font-mono)}
.template-showcase-copy .k{display:block;margin-bottom:8px;color:var(--public-link);font:700 .61rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.template-showcase-copy h3{font-size:clamp(1.25rem,2.3vw,1.65rem)}
.template-showcase-copy p{max-width:52ch;margin-top:8px;color:var(--slate);font-size:.86rem;line-height:1.65}
.template-card-actions{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:18px}
.template-card-actions a,.template-text-button{border:0;background:transparent;color:var(--public-link);font:800 .76rem/1.2 var(--font-display);text-underline-offset:4px;cursor:pointer}
.template-card-actions a{text-decoration:none}.template-card-actions a::after{content:"  ↗"}.template-card-actions a:hover,.template-text-button:hover{text-decoration:underline}
.template-text-button:active,.template-card-actions a:active{transform:scale(.98)}


.template-preview-dialog{width:min(96vw,1480px);max-width:none;height:min(94vh,980px);max-height:none;margin:auto;border:0;border-radius:26px;background:#10131a;color:var(--public-text);box-shadow:0 40px 120px rgba(0,0,0,.5)}
.template-preview-dialog::backdrop{background:rgba(5,7,12,.76);backdrop-filter:blur(8px)}
.template-preview-dialog-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%}
.template-preview-dialog header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:20px;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.template-preview-dialog h2{margin-top:7px;font-size:1.35rem;letter-spacing:-.03em}
.template-device-switcher{display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.07)}
.template-device-switcher button,.template-dialog-close{border:0;color:var(--public-muted);cursor:pointer}
.template-device-switcher button{min-height:36px;padding:0 13px;border-radius:999px;background:transparent;font-size:.72rem;font-weight:800}
.template-device-switcher button[aria-pressed="true"]{background:var(--public-surface);color:var(--public-text)}
.template-dialog-close{display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:transparent;font-size:1.5rem}
.template-device-switcher button:active,.template-dialog-close:active{transform:scale(.96)}
.template-dialog-stage{display:grid;overflow:auto;place-items:start center;padding:24px;background:radial-gradient(circle at 50% 0,rgba(101,88,255,.17),transparent 46%),#080a10}
.template-dialog-stage iframe{width:100%;min-height:100%;border:0;border-radius:12px;background:var(--public-surface);box-shadow:0 22px 80px rgba(0,0,0,.42);transition:width .2s ease}
.template-dialog-stage[data-template-dialog-stage="tablet"] iframe{width:min(100%,768px)}
.template-dialog-stage[data-template-dialog-stage="mobile"] iframe{width:min(100%,390px)}
.template-preview-dialog footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 20px;border-top:1px solid rgba(255,255,255,.12)}
.template-preview-dialog footer p{color:var(--public-muted);font-size:.75rem}
.template-preview-dialog footer .btn{min-height:42px;font-size:.78rem}
@media(max-width:960px){.template-showcase-frame-wrap{height:310px}.template-showcase-frame-wrap iframe{transform:scale(.36)}.template-showcase-heading{grid-template-columns:1fr}.template-preview-dialog{width:100vw;height:100dvh;border-radius:0}}
@media(max-width:760px){.template-showcase-grid{grid-template-columns:1fr}.template-showcase-card:nth-child(3n+2){transform:none}.template-showcase-frame-wrap{height:330px}.template-showcase-frame-wrap iframe{transform:scale(.42)}.template-preview-dialog header{grid-template-columns:1fr auto}.template-device-switcher{grid-column:1/-1;grid-row:2}.template-dialog-close{grid-column:2;grid-row:1}.template-preview-dialog footer{align-items:stretch;flex-direction:column}.template-preview-dialog footer .btn{width:100%}}
@media(max-width:430px){.template-showcase-frame-wrap{height:280px}.template-showcase-frame-wrap iframe{width:1100px;transform:scale(.32)}.template-showcase-copy{grid-template-columns:1fr}.template-index{display:none}.template-device-switcher button{flex:1;padding-inline:9px}.template-dialog-stage{padding:12px}}
@media(prefers-reduced-motion:reduce){.template-showcase-card:nth-child(3n+2){transform:none}.template-dialog-stage iframe{transition:none}}
.public-reference .template-showcase{padding-top:0!important}
.public-reference .template-filters{margin-bottom:24px}
.public-reference .template-categories{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.public-reference .template-categories button{border:1px solid transparent;background:var(--public-surface);color:var(--public-muted);font:12px/1.3 Arial,sans-serif;padding:9px 16px;border-radius:5px;min-height:36px;cursor:pointer}
.public-reference .template-categories button[aria-pressed=true]{background:var(--public-selected);color:var(--public-link);border-color:var(--public-link)}
.public-reference .template-search-row{display:flex;justify-content:space-between;gap:20px;align-items:end}
.public-reference .template-search-row label{display:grid;gap:6px;color:var(--public-muted);font-size:11px}
.public-reference .template-search-row input,.public-reference .template-search-row select{min-height:38px;border:1px solid var(--public-control-line);border-radius:6px;background:var(--public-surface);color:var(--public-text);padding:8px 12px;font-size:12px}
.public-reference .template-search-row input{width:280px;max-width:100%}
.public-reference .template-result-count{font-size:11px;color:var(--public-muted);margin-top:12px}
.public-reference .template-showcase-grid{gap:22px;grid-template-columns:repeat(3,minmax(0,1fr))}
.public-reference .template-showcase-card{border:1px solid var(--public-line);border-radius:8px;box-shadow:none;transform:none!important;background:var(--public-surface)}
.public-reference .template-showcase-card:first-child{grid-column:1/-1;max-width:100%}
.public-reference .template-showcase-frame-wrap{height:235px;background:var(--public-surface);border-color:var(--public-line)}
.public-reference .template-showcase-frame-wrap iframe{width:1280px;height:900px;transform:scale(var(--template-scale,.3))}
.public-reference .template-showcase-card:first-child .template-showcase-frame-wrap{height:460px}
.public-reference .template-showcase-copy{display:block;padding:18px}
.public-reference .template-index{display:none}
.public-reference .template-showcase-copy .k{font-size:10px;letter-spacing:0;text-transform:none;color:var(--public-link)}
.public-reference .template-showcase-copy h3{font-size:18px;color:var(--public-text)}
.public-reference .template-showcase-copy p{font-size:12px;line-height:1.6;color:var(--public-muted);max-width:100%}
.public-reference .template-card-actions{margin-top:16px;gap:16px}
.public-reference .template-card-actions a,.public-reference .template-text-button{font:700 11px/1.4 Arial,sans-serif;color:var(--public-link);min-height:28px;display:inline-flex;align-items:center}
.public-reference .template-demo-label{font:700 8px/1 Arial,sans-serif;border-radius:4px;background:#171b25e8;padding:6px 9px;letter-spacing:.04em;top:10px;right:10px}


.public-reference .template-empty{padding:50px 15px;text-align:center;font-size:14px;color:var(--public-muted)}
.public-reference .template-preview-dialog{background:var(--public-surface);color:var(--public-text);border-radius:10px}
.public-reference .template-preview-dialog header,.public-reference .template-preview-dialog footer{border-color:var(--public-line);background:var(--public-surface)}
.public-reference .template-preview-dialog h2{font-size:19px;color:var(--public-text)}
.public-reference .template-device-switcher{background:var(--public-selected);border-radius:6px}
.public-reference .template-device-switcher button{color:var(--public-muted);border-radius:4px}
.public-reference .template-device-switcher button[aria-pressed=true]{background:#7048cf;color:var(--public-text)}
.public-reference .template-dialog-close{border-color:var(--public-line);background:var(--public-surface);color:var(--public-muted)}
.public-reference .template-dialog-stage{background:var(--public-surface);padding:20px}
.public-reference .template-dialog-stage iframe{box-shadow:0 5px 25px #30283715;border-radius:6px}
.public-reference .template-preview-dialog footer p{color:var(--public-muted)}
@media(max-width:980px){.public-reference .template-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.public-reference .template-showcase-card:first-child .template-showcase-frame-wrap{height:360px}.public-reference .template-showcase-frame-wrap{height:225px}}
@media(max-width:560px){.public-reference .template-showcase-grid{grid-template-columns:1fr;gap:18px}.public-reference .template-showcase-frame-wrap,.public-reference .template-showcase-card:first-child .template-showcase-frame-wrap{height:240px}.public-reference .template-search-row{display:grid;grid-template-columns:1fr;gap:12px}.public-reference .template-search-row input{width:100%}.public-reference .template-categories{justify-content:flex-start;gap:6px}.public-reference .template-categories button{padding:8px 12px;font-size:11px}.public-reference .template-preview-dialog{border-radius:0}.public-reference .template-dialog-stage{padding:10px}.public-reference .template-preview-dialog header{padding:14px}.public-reference .template-preview-dialog footer{padding:14px}}

/* Gallery direction: an editorial collection of usable starting points, not a
   feature-card wall. The selectors deliberately retain the generator and JS
   contract while neutralising the historical full-width first preview. */
.public-reference.reference-templates .template-showcase{overflow:clip;padding-top:clamp(20px,3vw,40px)!important}
.public-reference.reference-templates .template-showcase-heading{grid-template-columns:minmax(0,1fr) minmax(250px,.56fr);gap:clamp(26px,6vw,76px);margin-bottom:30px}
.public-reference.reference-templates .template-showcase-heading h2{max-width:13ch;font-size:clamp(2rem,4vw,3.8rem);line-height:1.02}
.public-reference.reference-templates .template-showcase-heading>p{max-width:40ch;color:var(--public-muted);font-size:.98rem;line-height:1.72}
.public-reference.reference-templates .template-filters{display:grid;gap:14px;margin:0 0 30px;padding:18px 0;border-block:1px solid var(--public-line)}
.public-reference.reference-templates .template-categories{justify-content:flex-start;gap:8px;margin:0;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:thin}
.public-reference.reference-templates .template-categories button{
  flex:0 0 auto;min-height:44px;padding:9px 15px;border-color:var(--public-line);border-radius:999px;
  background:transparent;color:var(--public-muted);font-size:.76rem;font-weight:740;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.public-reference.reference-templates .template-categories button:hover{border-color:rgba(140,124,255,.7);color:var(--public-text)}
.public-reference.reference-templates .template-categories button[aria-pressed=true]{border-color:var(--public-accent);background:var(--public-accent);color:var(--public-on-accent)}
.public-reference.reference-templates .template-search-row{align-items:end;gap:14px}
.public-reference.reference-templates .template-search-row label{gap:8px;color:var(--public-muted);font-size:.76rem;font-weight:700}
.public-reference.reference-templates .template-search-row :is(input,select){min-height:46px;border-color:var(--public-line);border-radius:8px;background:var(--public-surface);color:var(--public-text);font-size:.88rem}
.public-reference.reference-templates .template-search-row input{width:min(100%,360px)}
.public-reference.reference-templates .template-result-count{margin:0;color:var(--public-muted);font-size:.78rem}
.public-reference.reference-templates .template-showcase-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.7vw,32px)}
.public-reference.reference-templates .template-showcase-card,.public-reference.reference-templates .template-showcase-card:first-child{
  grid-column:auto;max-width:none;overflow:hidden;border-color:var(--public-line);border-radius:14px;background:var(--public-surface);
  transform:none!important;transition:border-color .2s ease,background-color .2s ease;
}
.public-reference.reference-templates .template-showcase-card:hover{border-color:rgba(140,124,255,.66);background:var(--public-selected)}
.public-reference.reference-templates .template-showcase-card:focus-within{border-color:var(--public-accent);outline:2px solid color-mix(in srgb,var(--public-accent) 35%,transparent);outline-offset:3px}
.public-reference.reference-templates .template-showcase-frame-wrap,.public-reference.reference-templates .template-showcase-card:first-child .template-showcase-frame-wrap{height:clamp(250px,29vw,390px);border-color:var(--public-line);background:#0d1018}
.public-reference.reference-templates .template-showcase-frame-wrap iframe{width:1440px;height:900px;transform:scale(var(--template-scale,.43));transform-origin:top left}
.public-reference.reference-templates .template-demo-label{top:14px;right:14px;border-color:rgba(255,255,255,.2);border-radius:999px;background:rgba(9,11,18,.9);color:var(--public-text);font-size:.63rem;letter-spacing:.08em}
.public-reference.reference-templates .template-showcase-copy{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:22px 22px 24px}
.public-reference.reference-templates .template-index{display:block;color:var(--public-muted);font-size:.7rem}
.public-reference.reference-templates .template-showcase-copy .k{margin-bottom:8px;color:var(--public-link);font-size:.72rem;font-weight:730;letter-spacing:.01em;text-transform:none}
.public-reference.reference-templates .template-showcase-copy h3{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.08}
.public-reference.reference-templates .template-showcase-copy p{color:var(--public-muted);font-size:.9rem;line-height:1.65}
.public-reference.reference-templates .template-card-actions{gap:8px 16px;margin-top:20px}
.public-reference.reference-templates .template-card-actions :is(a,.template-text-button){min-height:44px;color:var(--public-text);font-size:.78rem;font-weight:760;text-decoration:none}
body.public-reference.reference-templates .paper .template-card-actions a,body.public-reference.reference-templates .paper .template-card-actions a:visited{padding:0 14px;border:1px solid var(--public-accent);border-radius:8px;background:var(--public-accent);color:#11150b!important}
.public-reference.reference-templates .template-card-actions a::after{display:none}
.public-reference.reference-templates .template-card-actions .template-text-button{padding:0;background:transparent;color:var(--public-link)}
.public-reference.reference-templates .template-card-actions :is(a,.template-text-button):hover{text-decoration:none;filter:brightness(1.06)}
.public-reference.reference-templates .template-card-actions :is(a,.template-text-button):active{transform:translateY(1px)}
.public-reference.reference-templates .template-preview-dialog{border:1px solid var(--public-line);border-radius:16px;background:var(--public-surface)}
.public-reference.reference-templates .template-preview-dialog::backdrop{background:rgba(5,7,12,.82);backdrop-filter:blur(5px)}
.public-reference.reference-templates .template-device-switcher{border:1px solid var(--public-line);border-radius:8px;background:var(--public-selected)}
.public-reference.reference-templates .template-device-switcher button{min-height:40px;border-radius:6px}
.public-reference.reference-templates .template-device-switcher button[aria-pressed=true]{background:var(--public-accent);color:var(--public-on-accent)}
.public-reference.reference-templates .template-dialog-close{min-width:44px;height:44px;border-color:var(--public-line);border-radius:8px;color:var(--public-text)}
.public-reference.reference-templates .template-dialog-stage{padding:clamp(12px,2vw,28px);background:#0b0e14}
.public-reference.reference-templates .template-dialog-stage iframe{border:1px solid var(--public-line);border-radius:10px;box-shadow:none;transition:width .18s ease}

@media(max-width:760px){
  .public-reference.reference-templates .template-showcase-heading{grid-template-columns:1fr;gap:12px}
  .public-reference.reference-templates .template-showcase-grid{grid-template-columns:1fr;gap:18px}
  .public-reference.reference-templates .template-showcase-frame-wrap,.public-reference.reference-templates .template-showcase-card:first-child .template-showcase-frame-wrap{height:clamp(230px,64vw,330px)}
}
@media(max-width:480px){
  .public-reference.reference-templates .template-search-row{grid-template-columns:1fr;align-items:stretch}
  .public-reference.reference-templates .template-search-row input{width:100%}
  .public-reference.reference-templates .template-showcase-copy{grid-template-columns:1fr;padding:18px}
  .public-reference.reference-templates .template-index{display:none}
  .public-reference.reference-templates .template-card-actions{align-items:stretch;flex-direction:column}
  .public-reference.reference-templates .template-card-actions :is(a,.template-text-button){width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .public-reference.reference-templates :is(.template-showcase-card,.template-categories button,.template-card-actions a,.template-text-button,.template-dialog-stage iframe){transition:none!important}
}