.demo-page{background:var(--color-page);min-height:100vh;color:var(--color-ink)}.demo-login{place-items:center;min-height:100vh;padding:1.5rem;display:grid}.demo-card{border:1px solid var(--color-rule);border-radius:var(--radius-slip);background:var(--color-sheet);width:min(100%,26rem);box-shadow:var(--elevation-raised);padding:1.5rem}.demo-app{grid-template-columns:18rem minmax(0,1fr);gap:.75rem;height:100vh;padding:.75rem;display:grid}.demo-rail{border:1px solid var(--color-rule);border-radius:var(--radius-leaf);background:color-mix(in oklch, var(--color-sheet) 78%, transparent);min-height:0;box-shadow:var(--elevation-raised);backdrop-filter:blur(14px)saturate(1.3);flex-direction:column;display:flex;overflow:hidden}.demo-rail-head{border-bottom:1px solid var(--color-rule);flex-shrink:0;align-items:center;gap:.625rem;height:3rem;padding:0 .75rem;display:flex}.demo-brand-tile{border-radius:var(--radius-slip);background-image:linear-gradient(135deg, color-mix(in oklch, var(--color-accent) 78%, white), var(--color-accent));width:2rem;height:2rem;color:var(--color-on-accent);box-shadow:0 6px 14px color-mix(in oklch, var(--color-accent) 34%, transparent);flex-shrink:0;place-items:center;display:grid}.demo-wordmark{font-family:var(--font-display);letter-spacing:.1em;color:var(--color-ink);font-size:1rem;font-weight:600;text-decoration:none}.demo-wordmark-lg{font-size:1.125rem}.demo-auth{width:min(100%,24rem)}.demo-auth-brand{justify-content:center;align-items:center;gap:.625rem;margin-bottom:1.5rem;text-decoration:none;display:flex}.demo-auth .demo-card{width:100%}.demo-page-title{letter-spacing:-.015em;text-wrap:balance;font-size:1.875rem;font-weight:600;line-height:1.05}@media (width>=40rem){.demo-page-title{font-size:2.25rem}}.demo-page-actions .btn{min-height:2rem;padding:.25rem .75rem;font-size:.875rem;font-weight:500}.demo-rail nav{flex:1;min-height:0;padding:.375rem .5rem;overflow:auto}.demo-nav-group{margin-bottom:.25rem}.demo-nav-group:last-child{margin-bottom:0}.demo-nav-group ul{margin:0;padding:0;list-style:none}.demo-nav-part{letter-spacing:.08em;text-transform:uppercase;min-height:2rem;color:var(--color-mute);align-items:center;gap:.375rem;margin:0;padding:.25rem .625rem;font-size:.6875rem;font-weight:600;line-height:1.4;display:flex}.demo-nav-chevron{flex-shrink:0;transform:rotate(90deg)}.demo-nav-link{border-radius:var(--radius-slip);min-height:2rem;font-size:var(--text-small);color:var(--color-soft);align-items:center;gap:.5rem;padding:.25rem .625rem;text-decoration:none;display:flex;position:relative}.demo-nav-link [data-nav-icon]{color:var(--color-mute);flex-shrink:0;display:flex}.demo-nav-link>span:nth-child(2){flex:1}.demo-nav-link[aria-current=page]{background:color-mix(in oklch, var(--color-accent) 16%, var(--color-sheet));color:var(--color-ink);font-weight:500}.demo-nav-link[aria-current=page]:before{content:"";border-radius:var(--radius-pill);background:var(--color-accent);width:3px;position:absolute;inset-block:.35rem;inset-inline-start:0}.demo-nav-link[aria-current=page] [data-nav-icon]{color:var(--color-accent)}.demo-nav-badge{border-radius:var(--radius-pill);background:var(--color-warn-bg);min-width:1.25rem;font-size:var(--text-folio);font-variant-numeric:tabular-nums;text-align:center;color:var(--color-warn);padding:0 .35rem;font-weight:600}.demo-rail-foot{border-top:1px solid var(--color-rule);flex-shrink:0;padding:.5rem}.demo-plan{margin-bottom:.5rem;padding:0 .5rem}.demo-plan-name{color:var(--color-soft);margin-bottom:.25rem;font-size:.6875rem;font-weight:500}.demo-plan li{justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.6875rem;line-height:1.45;display:flex}.demo-plan li span:first-child{text-overflow:ellipsis;white-space:nowrap;color:var(--color-mute);overflow:hidden}.demo-plan li span:last-child{font-variant-numeric:tabular-nums;color:var(--color-ink);flex-shrink:0}.demo-user,.demo-signout{border-radius:var(--radius-slip);width:100%;min-height:2rem;font:inherit;font-size:var(--text-small);color:var(--color-soft);text-align:start;cursor:pointer;background:0 0;border:0;align-items:center;gap:.5rem;padding:.375rem .5rem;display:flex}.demo-signout [data-nav-icon]{color:var(--color-mute);display:flex}.demo-avatar{border-radius:var(--radius-pill);background:color-mix(in oklch, var(--color-accent) 15%, transparent);width:1.75rem;height:1.75rem;color:var(--color-accent-text);flex-shrink:0;place-items:center;font-size:.75rem;font-weight:600;display:grid}.demo-sheet{border:1px solid var(--color-rule);border-radius:var(--radius-leaf);background:var(--color-sheet);min-width:0;min-height:0;box-shadow:var(--elevation-raised);overflow:auto}.demo-topbar{border-bottom:1px solid var(--color-rule);z-index:2;background:color-mix(in oklch, var(--color-sheet) 88%, transparent);backdrop-filter:blur(12px);justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex;position:sticky;top:0}.demo-body{padding:1.25rem}.demo-metrics{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1rem;margin:1rem 0;display:grid}.demo-metric{border:1px solid var(--color-rule);border-radius:var(--radius-slip);background:var(--color-sheet);padding:.75rem 1rem}.demo-metric b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin-top:.25rem;font-size:1.125rem;font-weight:500;display:block}.demo-banner{border:1px solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-glow-1);font-size:var(--text-small);color:var(--color-soft);padding:.75rem 1rem}.demo-steps{margin:1rem 0;padding-left:1.25rem}.demo-steps li+li{margin-top:.35rem}@media (hover:hover){.demo-nav-link:hover,.demo-signout:hover{background:color-mix(in oklch, var(--color-ink) 6%, transparent);color:var(--color-ink)}.demo-nav-link:hover [data-nav-icon],.demo-signout:hover [data-nav-icon]{color:var(--color-soft)}.demo-nav-link[aria-current=page]:hover{color:var(--color-ink)}}@media (width<64rem){.demo-app{grid-template-columns:minmax(0,1fr);height:auto;min-height:100vh}.demo-sheet{overflow:visible}.demo-rail{display:none}.demo-app.is-nav-open .demo-rail{z-index:40;background:var(--color-sheet);width:min(18rem,100vw - 1.5rem);display:flex;position:fixed;inset:.75rem auto .75rem .75rem;overflow:auto}}