.demo-stage{--s:.9;--bezel:12px;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:2rem clamp(2.5rem,5vw,5rem);display:grid;position:relative}.demo-phone{padding:var(--bezel);border-radius:calc(46px * var(--s) + var(--bezel));background:color-mix(in srgb, var(--color-h0) 60%, var(--color-ash));box-shadow:0 0 0 1px var(--color-line), 0 36px 80px color-mix(in srgb, var(--color-h0) 70%, transparent), 0 0 120px color-mix(in srgb, var(--color-h3) 22%, transparent);grid-row:2}.demo-screen{width:calc(390px * var(--s));height:calc(844px * var(--s));border-radius:calc(46px * var(--s));background:var(--color-ash);position:relative;overflow:hidden}.demo-frame{background:var(--color-ash);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0;border:0;display:block}.demo-stage:not([data-started]) .demo-frame{translate:-300vw}.demo-skel{pointer-events:none;text-align:center;font-size:var(--text-fine);color:var(--color-smoke);background:radial-gradient(ellipse 70% 45% at 62% 34%, color-mix(in srgb, var(--color-h3) 45%, transparent), transparent 70%), var(--color-ash);place-items:center;padding:1.5rem;display:grid;position:absolute;inset:0}.demo-skel a{pointer-events:auto;color:var(--color-bone);text-underline-offset:.2em;font-weight:600}.demo-skip{z-index:100;border-radius:var(--radius-md);background:var(--color-h9);color:var(--color-ash);padding:.625rem .875rem;font-weight:600;text-decoration:none;position:fixed;top:.75rem;left:.75rem;translate:0 calc(-100% - 1.5rem)}.demo-skip:focus-visible{outline-color:var(--color-ash);translate:0}.demo-frame[data-focus]{outline:2px solid var(--color-focus);outline-offset:-2px}.demo-skip-end,.demo-open-sheet,.demo-pinbar{display:none}.demo-end{width:0;height:0;display:block}.demo-side{outline:none;grid-row:2;gap:2.25rem;max-width:32rem;padding-top:.5rem;display:grid}.demo-panel{gap:.875rem;display:grid}.demo-panel-title{font-family:var(--font-display);color:var(--color-bone);font-size:clamp(1.5rem,2.2vw,1.875rem);font-weight:700;line-height:1}.demo-panel-lead{font-size:var(--text-fine);color:var(--color-smoke);line-height:1.5}.demo-scs{gap:.875rem;margin-top:.25rem;display:grid}.demo-sc-btn{background:var(--color-soot);width:100%;min-height:3.25rem;box-shadow:inset 0 0 0 1.5px var(--color-line);color:var(--color-bone);text-align:left;border-radius:.875rem;align-items:center;gap:.75rem;padding:.5rem 1.125rem;font-size:1rem;font-weight:600;transition:box-shadow .2s,background-color .2s,scale .2s;display:flex}.demo-sc-btn:hover{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--color-bone) 65%, transparent)}.demo-sc-btn:active{scale:.98}.demo-sc-icon{width:1.25rem;height:1.25rem;color:var(--color-h7);flex-shrink:0}.demo-sc-help{color:var(--color-smoke);margin-top:.375rem;padding-inline:.25rem;font-size:.875rem;line-height:1.45}.demo-more{font-size:var(--text-meta);color:var(--color-dim);text-transform:lowercase;margin-top:.75rem}.demo-scs-more{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}.demo-sc-quiet .demo-sc-btn{background:0 0;min-height:2.75rem;font-size:.9375rem}.demo-sc-quiet .demo-sc-icon{color:var(--color-smoke)}.demo-ml{background:linear-gradient(160deg, var(--color-char), var(--color-soot) 70%);box-shadow:inset 0 0 0 1px var(--color-line);border-radius:1rem;gap:.75rem;margin-top:.5rem;padding:1.125rem 1.25rem 1.25rem;display:grid}.demo-ml-bar{font-size:var(--text-meta);color:var(--color-smoke);justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.demo-ml-app{color:var(--color-bone);font-weight:600}.demo-ml-text{font-size:var(--text-fine);color:var(--color-smoke);line-height:1.45}.demo-ml-pin{letter-spacing:.24em;color:var(--color-h8);font-size:clamp(2.25rem,4vw,3rem);line-height:1}.demo-ml[data-ml=pin]{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--color-h7) 55%, transparent), 0 0 48px color-mix(in srgb, var(--color-h6) 18%, transparent)}.demo-ml-done{color:var(--color-bone);align-items:center;gap:.5rem;display:flex}.demo-ml-check{width:1.125rem;height:1.125rem;color:var(--color-ink-ready);flex-shrink:0}.demo-notes{color:var(--color-dim);gap:.5rem;font-size:.875rem;line-height:1.5;display:grid}.demo-notes-title{font-size:var(--text-fine);color:var(--color-smoke);font-weight:600}
.demo-page{width:min(100% - 2 * var(--spacing-page), var(--container-page));padding-top:calc(var(--nav-h) + 1.5rem);margin-inline:auto;padding-bottom:clamp(4rem,8vw,7rem)}.demo-page.demo-stage{grid-template-rows:auto 1fr}.demo-page .demo-phone{grid-area:1/1/span 2}.demo-page .demo-side{grid-area:2/2}.demo-head{grid-area:1/2;gap:1rem;max-width:32rem;padding-top:.75rem;display:grid}.demo-title{font-family:var(--font-display);letter-spacing:-.012em;color:var(--color-bone);font-size:clamp(2.75rem,5.2vw,4.5rem);font-weight:700;line-height:.95}.demo-lead{font-size:var(--text-lead);color:var(--color-smoke);line-height:1.5}.demo-sheet{background:var(--color-soot);width:100%;max-width:100%;max-height:88dvh;color:var(--color-bone);box-shadow:0 -1px 0 var(--color-line);overscroll-behavior:contain;border:0;border-radius:1.25rem 1.25rem 0 0;margin:auto 0 0;padding:0;overflow:auto}.demo-sheet::backdrop{background:color-mix(in srgb, var(--color-h0) 72%, transparent)}.demo-sheet-in{padding:1.25rem 1rem calc(1.5rem + env(safe-area-inset-bottom));gap:1.75rem;display:grid;position:relative}.demo-sheet-close{min-height:2.75rem;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--color-bone) 35%, transparent);border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;padding:0 .875rem;font-weight:600;display:inline-flex;position:absolute;top:.875rem;right:1rem}@media (max-width:47.99rem),(pointer:coarse),(max-height:45.5rem){.demo-page{width:100%;padding-top:0;padding-bottom:0}.demo-page.demo-stage{flex-direction:column;align-items:stretch;gap:0;display:flex}.demo-page .demo-head{max-width:none;height:3rem;margin-top:var(--nav-h);padding:0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));border-bottom:1px solid var(--color-line);background:var(--color-ash);align-items:center;gap:.75rem;display:flex}.demo-page .demo-title{font-family:var(--font-ui);letter-spacing:0;font-size:1.0625rem;font-weight:600;line-height:1.2}.demo-page .demo-lead{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.demo-page .demo-open-sheet{min-height:2.75rem;box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--color-bone) 35%, transparent);color:var(--color-bone);border-radius:.625rem;align-items:center;gap:.5rem;margin-left:auto;padding:0 .875rem;font-size:.9375rem;font-weight:600;display:inline-flex}.demo-page .demo-pinbar{background:var(--color-char);height:2.25rem;color:var(--color-smoke);justify-content:space-between;align-items:center;gap:1rem;padding:0 1rem;font-size:.875rem;display:flex}.demo-pinbar-pin{letter-spacing:.2em;color:var(--color-h8);font-size:1.0625rem}.demo-page .demo-phone{box-shadow:none;background:0 0;border-radius:0;padding:0}.demo-page .demo-screen{width:100%;height:calc(100dvh - var(--nav-h) - 3rem);border-radius:0}.demo-page[data-pin] .demo-screen{height:calc(100dvh - var(--nav-h) - 5.25rem)}.demo-page .demo-frame{width:100%;height:100%;transform:none}.demo-page .demo-side,.demo-page .demo-skip-panel{display:none}.demo-page .demo-skip-end{display:block}}.demo-home{margin-top:clamp(3rem,6vw,4.5rem)}.demo-home .demo-phone,.demo-home .demo-side{grid-row:1}.demo-card{display:none}@media (max-width:47.99rem),(pointer:coarse){.demo-home{display:none}.demo-card{background:radial-gradient(ellipse 80% 70% at 85% 0%, color-mix(in srgb, var(--color-h3) 40%, transparent), transparent 70%), var(--color-soot);box-shadow:inset 0 0 0 1px var(--color-line);border-radius:1.125rem;justify-items:start;gap:1rem;margin-top:2.5rem;padding:1.5rem 1.25rem;display:grid}}.demo-card-title{font-family:var(--font-display);color:var(--color-bone);font-size:1.625rem;font-weight:700;line-height:1}.demo-card-text{font-size:var(--text-fine);color:var(--color-smoke)}.demo-missing{font-size:var(--text-fine);color:var(--color-smoke);margin-top:2rem}.demo-sheet .demo-panel-title{align-items:center;min-height:2.75rem;padding-right:6.5rem;display:flex}