.demo-page{min-height:100vh}.demo-banner{z-index:var(--z-sticky);background:color-mix(in oklch, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);position:sticky;top:0}.demo-banner-inner{align-items:center;gap:var(--sp-2);max-width:1160px;padding:var(--sp-2) var(--sp-3);margin:0 auto;display:flex}.demo-banner-back{min-height:44px;padding:0 var(--sp-2);border-radius:var(--radius-sm);color:var(--muted);transition:color var(--transition);flex:none;align-items:center;gap:8px;font-weight:700;display:inline-flex}.demo-banner-back:hover{color:var(--text)}.demo-banner-back-label{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;font-size:20px;display:none}.demo-banner-label{align-items:center;gap:var(--sp-3);flex:auto;min-width:0;margin:0;display:flex}.demo-sample-chip{border:1px solid color-mix(in oklch, var(--gold) 45%, transparent);border-radius:var(--radius-pill);background:color-mix(in oklch, var(--gold) 10%, transparent);color:var(--gold);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;flex:none;padding:4px 10px;font-size:10px;font-weight:800}.demo-banner-note{color:var(--muted);font-size:var(--fs-sm);text-overflow:ellipsis;white-space:nowrap;display:none;overflow:hidden}.demo-banner-actions{flex:none;align-items:center;gap:6px;display:flex}.demo-tour-button{min-height:44px;padding:0 12px}.demo-tour-button span{display:none}.demo-cta{min-height:44px;padding:0 var(--sp-4);font-size:var(--fs-sm);white-space:nowrap}.demo-cta-long{display:none}.demo-secondary-link{min-height:44px;color:var(--muted);font-size:var(--fs-sm);text-underline-offset:3px;align-items:center;text-decoration:underline;display:inline-flex}.demo-secondary-link:hover{color:var(--text)}.demo-main{max-width:1160px;padding:var(--sp-6) var(--sp-4) 132px;margin:0 auto}.demo-loading{text-align:center}.demo-intro{gap:var(--sp-4);margin-bottom:var(--sp-5);flex-direction:column;display:flex}.demo-intro .micro{margin-bottom:var(--sp-2)}.demo-intro h1{margin:0 0 var(--sp-2);font-size:40px;line-height:1}.demo-intro p:not(.micro){text-wrap:pretty;margin:0}.demo-view-switch{gap:var(--sp-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.demo-view{gap:var(--sp-5);animation:demo-fade-in .28s var(--ease-out) backwards;display:grid}.demo-closing{margin-top:var(--sp-8);padding:var(--sp-10) var(--sp-5);text-align:center;background:radial-gradient(30rem 12rem at 50% 100%, color-mix(in oklch, var(--gold) 10%, transparent), transparent 70%), var(--panel)}.demo-closing h2{margin:0 auto var(--sp-2);justify-content:center;max-width:20ch;font-size:clamp(30px,6vw,44px);line-height:1}.demo-closing p{margin:0 0 var(--sp-5)}.demo-closing-actions{align-items:center;gap:var(--sp-3);flex-direction:column;display:flex}.demo-closing .demo-cta{min-height:52px;padding:0 var(--sp-6);font-size:16px}.demo-prompt{width:calc(100vw - var(--sp-8));max-width:440px;color:var(--text);background:0 0;border:none;padding:0}.demo-prompt::backdrop{background:color-mix(in oklch, var(--bg-deep) 74%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.demo-prompt-card{padding:var(--sp-6);border:1px solid color-mix(in oklch, var(--gold) 35%, var(--border));border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-lg)}.demo-prompt[open] .demo-prompt-card{animation:demo-rise .22s var(--ease-out) both}.demo-prompt-card h2{margin:0 0 var(--sp-2);font-size:var(--fs-2xl)}.demo-prompt-card p{margin:0 0 var(--sp-2);text-wrap:pretty}.demo-prompt-kicker{color:var(--gold);font-size:var(--fs-micro);letter-spacing:var(--tracking-micro);text-transform:uppercase;font-weight:800}.demo-prompt-feature{font-size:var(--fs-sm)}.demo-prompt-actions{gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap;display:flex}.demo-prompt-actions>*{flex:160px}.demo-tour{right:max(var(--sp-3), env(safe-area-inset-right));bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));left:max(var(--sp-3), env(safe-area-inset-left));z-index:900;max-width:420px;padding:var(--sp-4);border:1px solid color-mix(in oklch, var(--gold) 40%, var(--border));border-radius:var(--radius-lg);background:var(--panel-2);box-shadow:var(--shadow-lg);animation:demo-rise .22s var(--ease-out) both;margin:0 auto;position:fixed}.demo-tour h2{margin:0 0 var(--sp-1);font-size:var(--fs-xl)}.demo-tour p{margin:0}.demo-tour-header{margin-bottom:var(--sp-2);justify-content:space-between;align-items:center;display:flex}.demo-tour-header .demo-tour-step{color:var(--gold);font-size:var(--fs-micro);letter-spacing:var(--tracking-micro);text-transform:uppercase;font-weight:800}.demo-tour-close{width:44px;height:44px;min-height:44px;color:var(--muted);border-color:#0000;margin:-10px -10px -10px 0;padding:0}.demo-tour-actions{justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4);display:flex}.demo-tour-target{outline:2px solid var(--gold);outline-offset:6px;border-radius:var(--radius-lg);scroll-margin-top:96px}@keyframes demo-fade-in{0%{opacity:0;transform:translateY(6px)}}@keyframes demo-rise{0%{opacity:0;transform:translateY(10px)}}@media (prefers-reduced-motion:reduce){.demo-view,.demo-tour,.demo-prompt[open] .demo-prompt-card{animation:none}}@media (min-width:520px){.demo-tour-button span,.demo-banner-back-label{display:inline}.demo-cta-short{display:none}.demo-cta-long{display:inline}}@media (min-width:720px){.demo-banner-note{display:block}.demo-banner-inner{padding:var(--sp-2) var(--sp-6)}.demo-view-switch{display:flex}.demo-view-switch button{flex:none}}@media (min-width:900px){.demo-main{padding:var(--sp-8) var(--sp-8) 140px}.demo-intro{flex-direction:row;justify-content:space-between;align-items:flex-end}.demo-intro h1{font-size:52px}.demo-tour{right:var(--sp-6);bottom:var(--sp-6);width:380px;margin:0;left:auto}.demo-closing-actions{flex-direction:row;justify-content:center}}@media (max-width:600px){.demo-prompt{width:100vw;max-width:none;margin:auto 0 0}.demo-prompt-card{padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom));border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-bottom:none}}