.demo-workspace-shell{--cd-sidebar-w:228px}.demo-content-page{max-width:1300px;margin:0 auto;padding:34px 32px 70px}.demo-page-intro{max-width:780px;margin-bottom:30px}.demo-page-intro h1{font:500 clamp(30px, 3.2vw, 44px)/1.1 var(--cd-font-display);letter-spacing:-.035em;margin:12px 0}.demo-page-intro p{color:var(--cd-ink-secondary);font-size:14px;line-height:1.7}.demo-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0;display:grid}.demo-guide-grid section{background:var(--cd-bg-base);border:1px solid var(--cd-line-subtle);border-radius:12px;padding:24px}.demo-guide-grid section>span{font:10px var(--cd-font-mono);letter-spacing:.06em;color:var(--cd-accent-deep)}.demo-guide-grid h2{font:500 23px/1.2 var(--cd-font-display);margin:16px 0}.demo-guide-grid p,.demo-explainer p{color:var(--cd-ink-secondary);font-size:13px;line-height:1.75}.demo-guide-grid a,.demo-explainer a{margin-top:10px;font-size:13px;font-weight:600;display:inline-block}.demo-explainer{background:var(--cd-bg-elevated);border:1px solid var(--cd-line-subtle);border-radius:12px;margin-top:26px;padding:24px}.demo-explainer h2{font:500 25px var(--cd-font-display);margin:0 0 12px}.demo-back-link{margin-bottom:24px;font-size:12px;display:inline-block}@media (max-width:767px){.demo-content-page{padding:26px 16px 50px}.demo-guide-grid{grid-template-columns:1fr}}.demo-workspace-main{min-width:0;padding:0}.demo-overview-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 30px;display:grid}.demo-overview-actions a{border:1px solid var(--cd-line-subtle);background:var(--cd-bg-base);border-radius:10px;flex-direction:column;gap:8px;padding:18px 20px;display:flex}.demo-overview-actions strong{font-size:13px}.demo-overview-actions span{color:var(--cd-ink-secondary);font-size:12px}@media (max-width:600px){.demo-overview-actions{grid-template-columns:1fr}}.demo-workspace-topbar{justify-content:space-between;gap:14px;padding-inline:28px}.demo-workspace-topbar>div{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.demo-workspace-topbar>.demo-mobile-brand{display:none}.demo-workspace-badge{font:10px var(--cd-font-mono);letter-spacing:.08em;border:1px solid var(--cd-accent);color:var(--cd-accent-deep);border-radius:5px;padding:5px 8px;display:inline-flex}.demo-topbar-note{color:var(--cd-ink-secondary);font-size:12px}.demo-create-account{background:var(--cd-ink-primary);color:var(--cd-bg-base);white-space:nowrap;border-radius:7px;align-items:center;gap:8px;padding:9px 13px;font-size:12px;font-weight:600;display:inline-flex}.demo-workspace-identity{border-bottom:1px solid var(--cd-line-hairline);flex-direction:column;gap:7px;margin:20px 20px 14px;padding-bottom:24px;display:flex}.demo-workspace-identity strong{font-size:14px}.demo-workspace-identity>span:last-child{color:var(--cd-ink-secondary);font-size:11px}.demo-sidebar-foot{border-top:1px solid var(--cd-line-hairline);color:var(--cd-ink-secondary);padding:20px;font-size:11px;line-height:1.8}.demo-sidebar-foot a{justify-content:space-between;align-items:center;margin-top:18px;font-weight:600;display:flex}.demo-mobile-nav{display:none}.demo-skip-link{z-index:100;background:var(--cd-bg-base);padding:10px;position:fixed;top:8px;left:8px;transform:translateY(-150%)}.demo-skip-link:focus{transform:none}.demo-scenario-tabs{flex-wrap:wrap;gap:10px;padding:0 30px 14px;display:flex}.demo-scenario-tabs button{background:var(--cd-bg-base);border:1px solid var(--cd-line-subtle);border-radius:9px;flex-direction:column;align-items:flex-start;gap:6px;min-width:180px;padding:12px 18px;font-size:13px;display:flex}.demo-scenario-tabs button span{font:9px var(--cd-font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cd-ink-secondary)}.demo-scenario-tabs button[aria-pressed=true]{border-color:var(--cd-accent-deep);background:var(--cd-accent-soft);box-shadow:0 0 0 1px var(--cd-accent-deep)}.demo-sample-input{color:var(--cd-ink-secondary);max-width:820px;margin:0 30px 18px;font-size:12px;line-height:1.7}.demo-sample-input summary{cursor:pointer}.demo-sample-input p{border-left:2px solid var(--cd-accent);background:var(--cd-bg-elevated);margin:10px 0;padding:12px}.demo-workspace-main .studio-refined{grid-template-rows:60px 450px 250px;height:auto}.demo-workspace-main button:focus-visible,.demo-workspace-shell a:focus-visible{outline:2px solid var(--cd-accent-deep);outline-offset:3px}@media (max-width:900px){.demo-workspace-topbar>.demo-mobile-brand{display:block}.demo-mobile-brand .cd-sidebar-brand{border:0;height:auto;padding:0}.demo-workspace-topbar>div:has(.demo-workspace-badge){display:none}.demo-mobile-nav{border-bottom:1px solid var(--cd-line-subtle);gap:8px;padding:12px 16px;display:flex;overflow:auto}.demo-mobile-nav a{white-space:nowrap;border-radius:6px;padding:6px 10px;font-size:12px}.demo-mobile-nav a[aria-current=page]{background:var(--cd-accent-soft);color:var(--cd-accent-deep)}.demo-topbar-note{display:none}}@media (max-width:767px){.demo-workspace-main .studio-refined{grid-template-rows:auto auto 440px 320px 440px}.demo-scenario-tabs{gap:8px;padding-inline:16px}.demo-scenario-tabs button{flex:1;min-width:140px;padding:10px 12px}.demo-sample-input{margin-inline:16px}.demo-workspace-topbar{padding-inline:16px}.demo-create-account{padding:8px;font-size:11px}}