.code-block{color:#e8e8ed;background:#1d1d1f;border-radius:.875rem;margin:1.5rem 0;overflow:hidden}.code-block__bar{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:.75rem;padding:.375rem .5rem .375rem 1rem;display:flex}.code-block__language{color:#8a8a8e;letter-spacing:.02em;text-transform:uppercase;font-size:.75rem}.code-block__copy{color:#f5f5f7;cursor:pointer;font:inherit;background:#ffffff0f;border:0;border-radius:999px;align-items:center;gap:.375rem;min-height:2rem;margin-left:auto;padding:.25rem .75rem;font-size:.8125rem;transition:background-color .12s;display:inline-flex}.code-block__copy:hover{background:#ffffff1f}.code-block__copy:focus-visible{outline-offset:2px;outline:2px solid #2997ff}.code-block__copy-icon{width:1rem;height:1rem}.code-block__pre{margin:0;padding:1rem 1rem 1rem .5rem;font-size:.8125rem;line-height:1.65;overflow-x:auto}.code-block__code{background:0 0;min-width:max-content;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:block}.code-block__line{display:block}.code-block__number{color:#8a8a8e;text-align:right;-webkit-user-select:none;user-select:none;min-width:2.5ch;margin-right:1rem;display:inline-block}.code-block .comment,.code-block .prolog,.code-block .doctype,.code-block .cdata{color:#8fbf7f;font-style:italic}.code-block .keyword,.code-block .tag,.code-block .boolean,.code-block .builtin,.code-block .selector,.code-block .important{color:#7cb8ff}.code-block .string,.code-block .char,.code-block .attr-value,.code-block .regex,.code-block .url{color:#f0a37f}.code-block .function{color:#e6db74}.code-block .number,.code-block .constant,.code-block .symbol{color:#b5e3a8}.code-block .class-name,.code-block .maybe-class-name{color:#5fd7c4}.code-block .variable,.code-block .attr-name,.code-block .property,.code-block .parameter{color:#a8d8ff}.code-block .punctuation,.code-block .operator{color:#c7c7cc}@media (prefers-reduced-motion:reduce){.code-block__copy{transition:none}}
.media-frame--browser{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-lg);box-shadow:var(--elevation-lg);overflow:hidden}.media-frame__bar{background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border));align-items:center;gap:.375rem;padding:.75rem .875rem;display:flex}.media-frame__bar span{background:hsl(var(--foreground)/18%);border-radius:50%;width:.625rem;height:.625rem;display:block}.media-frame--phone{background:hsl(var(--foreground));box-shadow:var(--elevation-lg);border-radius:2rem;max-width:22rem;margin-inline:auto;padding:.5rem}.media-frame--phone .media-frame__screen{border-radius:1.5rem;overflow:hidden}.media-frame__screen img,.media-frame__screen video{width:100%;height:auto;display:block}