.demo-bar{background:var(--palette-ink-deep);color:var(--color-text-inverse);font-size:var(--text-sm);grid-template-columns:1fr auto;align-items:center;gap:.5rem 1rem;padding:.6rem clamp(1rem,4vw,2rem);line-height:1.45;display:grid}.demo-bar__lead{margin:0}.demo-bar__actions{flex-wrap:wrap;justify-content:flex-end;gap:.4rem;display:flex}.demo-bar__button{border:1px solid color-mix(in oklab, var(--color-text-inverse) 55%, transparent);min-height:2.25rem;color:inherit;font:inherit;cursor:pointer;background:0 0;border-radius:999px;padding:.35rem .8rem}.demo-bar__button:hover,.demo-bar__button:focus-visible{background:color-mix(in oklab, var(--color-text-inverse) 16%, transparent)}.demo-bar__button[aria-pressed=true],.demo-bar__button[aria-pressed=true]:hover{background:var(--color-text-inverse);color:var(--palette-ink-deep)}.demo-bar__button:focus-visible,.demo-bar__guide summary:focus-visible{outline:2px solid var(--color-text-inverse);outline-offset:2px}.demo-bar__guide{grid-column:1/-1}.demo-bar__guide summary{cursor:pointer;width:fit-content;text-decoration:underline}.demo-bar__guide ul{margin:.4rem 0 .2rem;padding-left:1.2rem}.demo-bar__guide a{color:inherit;text-decoration:underline}.demo-bar__guide a:focus-visible{outline:2px solid var(--color-text-inverse);outline-offset:2px}.demo-bar code{background:color-mix(in oklab, var(--color-text-inverse) 16%, transparent);border-radius:.25rem;padding:0 .25rem;font-size:.95em}@media (width<=48rem){.demo-bar{grid-template-columns:1fr}.demo-bar__actions{justify-content:flex-start}}.demo-inbox{border:1px solid var(--color-border);background:var(--color-surface-raised);width:min(40rem,100vw - 2rem);max-height:min(80vh,44rem);color:var(--color-text);border-radius:.75rem;margin:auto;padding:1.25rem 1.5rem}.demo-inbox::backdrop{background:var(--color-overlay)}.demo-inbox__header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.demo-inbox__header h2{margin:0}.demo-inbox__note,.demo-inbox__empty,.demo-email__meta{color:var(--color-text-muted);font-size:var(--text-sm)}.demo-inbox__list{gap:.9rem;margin:1rem 0 0;padding:0;list-style:none;display:grid}.demo-email{border:1px solid var(--color-border);border-radius:.5rem;padding:.9rem 1rem}.demo-email--unread{border-color:var(--color-border-strong);background:var(--color-surface)}.demo-email__subject{font-size:var(--text-base);margin:.2rem 0 .4rem}.demo-email__meta{margin:0}.guide-anchor{position:relative}.guide-on .guide-zone--active{outline:2px dashed var(--color-text);outline-offset:-4px}.guide-peek{z-index:var(--z-drawer);border:1px solid var(--color-border-strong);background:var(--color-surface-raised);max-inline-size:min(26rem,100% - 1rem);color:var(--color-text);font-size:var(--text-xs);pointer-events:none;opacity:0;border-radius:.5rem;padding:.5rem .7rem;line-height:1.35;position:absolute;inset-block-start:3.2rem;inset-inline-start:.5rem;transform:translateY(-.25rem);box-shadow:0 6px 18px #00000024}.guide-zone--active>.guide-peek{opacity:1;transform:translateY(0)}.guide-badge{z-index:var(--z-drawer);border:1px solid var(--color-text-inverse);background:var(--palette-ink-deep);min-block-size:2.25rem;min-inline-size:2.75rem;color:var(--color-text-inverse);font:inherit;font-size:var(--text-sm);letter-spacing:normal;text-transform:none;white-space:nowrap;cursor:pointer;opacity:.88;border-radius:999px;padding:.3rem .8rem;font-weight:600;line-height:1.2;position:absolute;inset-block-start:.5rem;inset-inline-start:.5rem;box-shadow:0 2px 8px #0000002e}.guide-zone:hover>.guide-badge,.guide-badge:hover,.guide-badge:focus-visible,.guide-badge[aria-expanded=true]{opacity:1}.guide-badge:focus-visible{outline:3px solid var(--color-text);outline-offset:2px}.guide-zone:has(details[open])>.guide-badge--below,.guide-zone:has(details[open])>.guide-peek{display:none}.guide-badge--below{inset-block-start:calc(100% + .35rem);inset-inline:50% auto;transform:translate(-50%)}.guide-badge--above{inset-block:auto calc(100% + .25rem)}.guide-badge--end{inset-inline:auto .5rem}.guide-badge--inline{min-block-size:1.75rem;padding-block:.1rem;inset-block-start:50%;inset-inline:auto .5rem;transform:translateY(-50%)}.guide-badge--static{position:static}.guide-offstage{margin-block:var(--space-6);border:1px dashed var(--color-border-strong);color:var(--color-text-muted);font-size:var(--text-sm);border-radius:.75rem;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;display:flex}.guide-offstage p{margin:0}.guide-panel{z-index:var(--z-skip-link);border:1px solid var(--color-border-strong);background:var(--color-surface-raised);max-block-size:min(36rem,100vh - 7rem);inline-size:min(23rem,100vw - 2rem);color:var(--color-text);font-size:var(--text-sm);border-radius:.75rem;margin:0;padding:1.1rem 1.25rem 1.25rem;line-height:1.5;position:fixed;inset-block:auto 1rem;inset-inline:auto 1rem;overflow:auto;box-shadow:0 12px 32px #0000002e}.guide-panel__header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.guide-panel__header h2{font-size:var(--text-xl);margin:0}.guide-panel__header h2:focus{outline:none}.guide-panel__header h2:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}.guide-panel p{margin:.25rem 0 0}.guide-panel__section{margin-block-start:.85rem}.guide-panel__section h3{color:var(--color-text-muted);font-size:var(--text-2xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;margin:0;font-weight:600}.guide-panel__label{color:var(--color-text-muted)}.guide-panel__edits{margin:.25rem 0 0;padding-inline-start:1.2rem;list-style:outside}.guide-panel__note{color:var(--color-text-muted)}.guide-panel__actions{flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-block-start:1rem;display:flex}.guide-panel__also,.guide-panel__more{text-decoration:underline}@media (width<=48rem){.guide-badge--below{inset-inline:auto .5rem;transform:none}.guide-peek{display:none}.guide-panel{border-radius:.9rem .9rem 0 0;max-block-size:65vh;inline-size:100%;max-inline-size:100%;inset-block:auto 0;inset-inline:0}}@media (prefers-reduced-motion:no-preference){.guide-badge{transition:opacity .12s}.guide-peek{transition:opacity .12s,transform .12s}}