.showcase-page{--sc-ink:#193d44;--sc-accent:#28646c;--sc-soft:#eaf3f1;--sc-line:#dce5e5;--sc-paper:#fff;--sc-muted:#5b6e73;background:#f5f8f8;color:var(--sc-ink)}
[data-bs-theme=dark] .showcase-page{--sc-ink:#e1efee;--sc-accent:#9ed8d2;--sc-soft:#253b3d;--sc-line:#3a4d50;--sc-paper:#1d2c30;--sc-muted:#afc2c5;background:#152328}
.showcase-wrap{max-width:1200px;margin:auto;padding:48px 24px 32px}.showcase-intro{max-width:760px;margin:0 auto 32px;text-align:center}.showcase-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--sc-accent)}.showcase-intro h1{font-size:clamp(32px,5vw,56px);line-height:1.12;letter-spacing:-.025em;margin:16px auto;max-width:none}.showcase-intro p{font-size:18px;line-height:1.65;color:var(--sc-muted)}
.showcase-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.showcase-roles a{display:grid;grid-template-columns:40px 1fr;gap:4px 12px;text-decoration:none;color:var(--sc-ink);padding:20px;border:1px solid var(--sc-line);border-radius:12px;background:var(--sc-paper)}.showcase-roles a>span{grid-row:span 2;font-size:28px}.showcase-roles strong{font-size:18px}.showcase-roles small{line-height:1.5;color:var(--sc-muted)}.showcase-roles [aria-current=page]{border-color:var(--sc-accent);background:var(--sc-soft);box-shadow:inset 0 0 0 1px var(--sc-accent)}
.showcase-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0}.showcase-toolbar p{font-size:12px;color:var(--sc-muted);max-width:650px;margin:0}.showcase-devices,.preview-period,.preview-modes{display:flex;gap:4px}.showcase-devices{flex-shrink:0;padding:4px;border:1px solid var(--sc-line);border-radius:10px;background:var(--sc-paper)}.showcase-page button{min-height:48px;touch-action:manipulation}.showcase-devices button,.preview-nav button,.preview-period button,.preview-modes button,.preview-roster-toolbar button{border:0;border-radius:7px;padding:8px 14px;background:transparent;color:var(--sc-muted);font:inherit;font-size:14px}.showcase-page button[aria-pressed=true]{background:var(--sc-soft);color:var(--sc-ink);font-weight:650}.showcase-page :is(button,a):focus-visible{outline:3px solid var(--sc-accent);outline-offset:3px}.showcase-page button:active{opacity:.75}
.showcase-caption{text-align:center;margin:28px auto 20px;max-width:750px}.showcase-caption h2{font-size:24px;letter-spacing:-.015em}.showcase-caption p{color:var(--sc-muted);margin:8px 0}.preview-device{max-width:1100px;margin:0 auto;border:1px solid var(--sc-line);border-radius:12px;padding:8px;background:var(--sc-paper);box-shadow:0 18px 65px #163b4310}.showcase-stage[data-device=phone] .preview-device{max-width:390px;border:5px solid var(--sc-ink);border-radius:24px;padding:3px}.preview-screen{container-type:inline-size;overflow:hidden;border-radius:8px;background:var(--sc-paper)}.preview-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--sc-line);font-size:13px}.preview-logo{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:750}.preview-dot{display:inline-block;width:10px;height:10px;background:#82aaa1;border-radius:50%;margin-left:8px}.preview-layout{display:grid;grid-template-columns:155px minmax(0,1fr);height:560px;min-height:0}.preview-nav{display:flex;flex-direction:column;gap:8px;padding:20px 10px;border-right:1px solid var(--sc-line);background:color-mix(in srgb,var(--sc-soft) 35%,var(--sc-paper))}.preview-nav button{display:flex;gap:10px;align-items:center;text-align:left}.preview-nav button span{font-size:20px}.preview-body{padding:24px;min-width:0;min-height:0;overflow:auto;scrollbar-gutter:stable}.preview-body h3{font-size:23px;margin:4px 0 8px}.preview-body h4{font-size:16px;margin:0 0 8px}.preview-body p{color:var(--sc-muted);font-size:14px;line-height:1.6}.preview-child{display:flex;gap:12px;align-items:center;margin-bottom:20px}.preview-child .demo-child-portrait{width:72px;height:72px;margin:0}.preview-child p{margin:0}.preview-child small,.preview-title small{color:var(--sc-muted);font-size:12px}.preview-period{align-items:center;margin-bottom:16px;border-bottom:1px solid var(--sc-line);padding-bottom:10px}.preview-period time{margin-left:auto;font-size:12px;color:var(--sc-muted)}.preview-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.preview-facts article{display:grid;grid-template-columns:40px 1fr;padding:18px;border:1px solid var(--sc-line);border-radius:10px;gap:5px 8px}.preview-facts article>span{grid-row:span 2;align-self:center;font-size:28px;color:var(--sc-accent)}.preview-facts small{grid-column:2;color:var(--sc-muted)}.preview-facts strong{grid-column:2;font-size:17px}.preview-note{display:flex;gap:14px;padding:20px;margin-top:20px;border-radius:10px;background:var(--sc-soft)}.preview-note>span{font-size:25px}.preview-note p{margin:0}.preview-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.preview-title time{font-size:12px;color:var(--sc-muted)}.preview-roster-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:13px}.preview-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:12px 0;background:var(--sc-soft);padding:4px;border-radius:9px}.preview-modes button{padding:8px 3px;font-size:13px}.preview-modes button[aria-pressed=true]{background:var(--sc-paper)}.preview-hint{font-size:12px!important}.preview-roster{padding-right:4px}.preview-roster h4{font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 8px;color:var(--sc-muted)}.preview-child-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(250px,1.4fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--sc-line)}.preview-child-name{display:flex;align-items:center;min-width:0;gap:10px}.preview-child-name strong{font-size:13px;overflow-wrap:anywhere}.preview-child-name .demo-child-portrait{width:36px;height:36px;margin:0}.preview-choices{display:flex;gap:4px}.preview-choices button{flex:1;min-width:0;line-height:1.3;border:1px solid var(--sc-line);background:var(--sc-paper);color:var(--sc-muted);border-radius:7px;padding:6px;font-size:12px}.preview-choices button[aria-pressed=true]{border-color:var(--sc-accent)}.preview-choices button:disabled{opacity:.45}.preview-child-row.is-absent .preview-child-name{opacity:.6}.preview-save{min-height:20px;font-size:12px!important;margin:8px 0 0}.preview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0 28px}.preview-metrics article{padding:18px 12px;border:1px solid var(--sc-line);border-radius:9px}.preview-metrics strong{display:block;font-size:29px;font-weight:700}.preview-metrics strong span{font-size:15px;color:var(--sc-muted)}.preview-metrics article>span{font-size:12px;color:var(--sc-muted)}.preview-groups article{padding:18px 0;border-bottom:1px solid var(--sc-line)}.preview-groups article div{display:flex;justify-content:space-between;gap:10px;font-size:14px}.preview-groups span{color:var(--sc-muted);font-size:12px}.preview-groups meter{width:100%;height:12px;margin-top:12px;accent-color:#477e78}.preview-meal{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--sc-line)}.preview-meal>span{font-size:26px}.preview-meal p{margin:0;white-space:pre-line}.preview-announcement{padding:24px;background:var(--sc-soft);border-radius:10px;margin:16px 0}.preview-notice-icon{display:block;font-size:48px;margin-bottom:18px}.preview-announcement small{color:var(--sc-muted)}.showcase-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin:48px 0 0;padding:32px;background:var(--sc-soft);border-radius:12px}.showcase-cta h2{font-size:25px}.showcase-cta p{max-width:680px;margin:8px 0 0;color:var(--sc-muted)}.showcase-cta a{flex-shrink:0}
@container(max-width:650px){.preview-layout{display:flex;flex-direction:column;height:640px}.preview-nav{order:2;flex:none;position:static;flex-direction:row;justify-content:space-around;border-right:0;border-top:1px solid var(--sc-line);padding:8px 4px}.preview-nav button{flex-direction:column;gap:2px;font-size:11px;padding:6px;flex:1}.preview-body{padding:18px 14px;order:1;flex:1}.preview-header{padding:12px 14px}.preview-child-row{grid-template-columns:1fr;gap:8px;padding:14px 0}.preview-child-name strong{font-size:14px}.preview-facts article{padding:14px 10px;grid-template-columns:28px 1fr;gap:4px}.preview-facts article>span{font-size:23px}.preview-facts strong{font-size:14px}.preview-facts small{font-size:11px}.preview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-title h3{font-size:21px}.preview-note{padding:16px}}
@media(max-width:767px){.showcase-wrap{padding:28px 16px}.showcase-intro p{font-size:16px}.showcase-roles{gap:6px}.showcase-roles a{display:flex;align-items:center;flex-direction:column;padding:12px 6px;text-align:center;gap:6px}.showcase-roles a>span{font-size:23px}.showcase-roles strong{font-size:13px}.showcase-roles small{display:none}.showcase-toolbar{align-items:flex-start;flex-direction:column;gap:14px}.showcase-devices{align-self:center}.showcase-caption h2{font-size:23px}.showcase-cta{flex-direction:column;align-items:flex-start;padding:24px}.preview-device{padding:3px}.showcase-stage[data-device=phone] .preview-device{max-width:350px}}
@media(prefers-reduced-motion:no-preference){.preview-device{transition:max-width 220ms ease}.showcase-role:not([hidden]){animation:showcase-in 180ms ease-out}@keyframes showcase-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}}
[hidden]{display:none!important}
:root .showcase-page .top-navbar .nav-link.nav-menu-link.active,:root .showcase-page .top-navbar .nav-link.nav-menu-link:hover{background:var(--sc-soft);color:var(--sc-ink)}

/* Panel actions stay at the end of the preview; the dock stays outside scrolling content. */
.preview-body [data-preview-panel="menu"]{display:flex;flex-direction:column;min-height:100%}
.preview-body [data-preview-panel="menu"]>.button{align-self:flex-start;margin-top:auto}
.preview-nav button{justify-content:flex-start;flex-shrink:0}
@container(max-width:650px){.preview-nav button{justify-content:center;text-align:center}}
.showcase-page :is(.showcase-roles a,.preview-device,.preview-facts article,.preview-note,.preview-metrics article,.preview-announcement,.showcase-cta){border-radius:var(--radius-card)}
.showcase-page :is(.showcase-devices,.preview-screen,.preview-modes){border-radius:var(--radius-card)}
.showcase-page :is(.showcase-devices button,.preview-nav button,.preview-period button,.preview-modes button,.preview-choices button){border-radius:var(--radius-control)}
.showcase-roles a{align-content:start}
.showcase-cta>.button{align-self:center}

/* Product previews share the current app's surfaces, type and Lucide controls. */
.showcase-page{--sc-ink:var(--text-primary);--sc-accent:var(--primary);--sc-soft:var(--primary-subtle);--sc-line:var(--border);--sc-paper:var(--surface);--sc-muted:var(--text-secondary);background:var(--background)}
[data-bs-theme=dark] .showcase-page{--sc-ink:var(--text-primary);--sc-accent:var(--primary);--sc-soft:var(--primary-subtle);--sc-line:var(--border);--sc-paper:var(--surface);--sc-muted:var(--text-secondary);background:var(--background)}
.showcase-page svg.lucide{width:20px;height:20px;flex:none;vertical-align:middle}.showcase-roles a>span svg{width:28px;height:28px}.showcase-devices button,.preview-modes button{display:flex;align-items:center;justify-content:center;gap:6px}.preview-header{background:var(--surface)}.preview-logo img{border-radius:10px}.preview-logo strong{display:block;font-size:20px;line-height:1.2}.preview-logo small{display:block;font-size:10px;font-weight:600;color:var(--text-secondary)}.preview-screen,.preview-body{background:var(--background)}.preview-nav{background:var(--surface)}.preview-facts article,.preview-metrics article{background:var(--surface)}.preview-facts article{grid-template-columns:28px 1fr;border-radius:var(--radius-card)}.preview-facts article>span{font-size:20px}.preview-modes svg{width:16px!important;height:16px!important}.preview-child h3{font-size:26px}.preview-announcement{background:var(--surface);border:1px solid var(--border)}.preview-notice-icon svg{width:40px!important;height:40px!important}.preview-nav button[aria-pressed=true]{background:var(--primary-subtle);color:var(--primary)}.preview-body{scrollbar-gutter:auto}.preview-layout{grid-template-columns:180px minmax(0,1fr)}
@container(max-width:650px){.preview-logo small{display:none}.preview-header{padding:12px}.preview-nav{padding-bottom:10px}.preview-facts strong{font-size:15px}.preview-modes button{flex-direction:column;font-size:12px}.preview-child h3{font-size:23px}}
.preview-choices button{display:flex;align-items:center;justify-content:center;gap:5px}.preview-choices button svg{width:16px!important;height:16px!important}
.preview-device{--sc-ink:var(--text-primary);--sc-accent:var(--primary);--sc-soft:var(--primary-subtle);--sc-line:var(--border);--sc-paper:var(--surface);--sc-muted:var(--text-secondary)}