@layer components{@scope(.code-annotate-block){:scope[data-annotated] .line{padding-inline-start:1.2em;position:relative}.code-annotate-highlight,.code-annotate-add,.code-annotate-remove,.code-annotate-has-callout,.code-annotate-callout-line{inline-size:100%;display:inline-block}.code-annotate-highlight{background-color:color-mix(in oklab, var(--color-border-warning) 16%, transparent);box-shadow:inset 6px 0 0 var(--color-border-warning)}.code-annotate-add{background-color:color-mix(in oklab, var(--color-border-success) 14%, transparent);box-shadow:inset 6px 0 0 var(--color-border-success)}.code-annotate-add:before{content:"＋";color:var(--color-fg-success);font-weight:700;position:absolute;inset-inline-start:.4em}.code-annotate-remove{background-color:color-mix(in oklab, var(--color-border-error) 12%, transparent);box-shadow:inset 6px 0 0 var(--color-border-error)}.code-annotate-remove:before{content:"－";color:var(--color-fg-error);font-weight:700;position:absolute;inset-inline-start:.4em}.code-annotate-has-callout{background-color:color-mix(in oklab, var(--color-border-info) 18%, transparent);box-shadow:inset 6px 0 0 var(--color-border-info)}.code-annotate-callout-line{padding-block:.6em .3em;font-size:.9em}.code-annotate-callout-text{background-color:var(--color-fg-info);color:var(--color-fg-inverse);border-radius:.5em;padding:.5em 1em;font-weight:500;line-height:1.4;display:inline-block;position:relative}.code-annotate-callout-text:before{content:"";border-inline:.5em solid #0000;border-block-end:.5em solid var(--color-fg-info);block-size:0;inline-size:0;position:absolute;inset-block-start:-.45em;inset-inline-start:1em}:scope{writing-mode:horizontal-tb;margin-block:1.5rem}:scope:has(>.code-annotate-copy){--code-surface:var(--color-bg-surface);--code-ink:var(--color-fg-base);--code-mute:var(--color-fg-mute);--code-pill:var(--color-bg-mute);background-color:var(--code-surface);border-radius:.75rem;margin-block:1.75rem;position:relative}:scope:has(>.code-annotate-copy)>.shiki{tab-size:2;padding:1rem 1.25rem;background-color:#0000!important}:scope:has(>.code-annotate-tab)>.shiki{padding-block-start:.375rem}.code-annotate-tab{color:var(--code-mute);padding:.75rem 3rem 0 1.25rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;line-height:1;display:block}.code-annotate-copy{background-color:var(--code-surface);border-radius:.5rem;display:inline-flex;position:absolute;inset-block-start:.4rem;inset-inline-end:.4rem}:scope:has(>.code-annotate-copy):is(.code-annotate-group *){background-color:#0000;border-radius:0;margin:0}:scope:is(.code-annotate-group *)>.code-annotate-tab{display:none}:scope:has(>.code-annotate-copy):is(.code-annotate-group *)>.shiki{padding-block-start:.5rem}:scope:is(.code-annotate-group *)>.code-annotate-copy{inset-block-start:-1.85rem}}::view-transition-group(.code-group){animation-duration:.2s;animation-timing-function:ease-out}.code-annotate-group{--code-surface:var(--color-bg-surface);--code-ink:var(--color-fg-base);--code-mute:var(--color-fg-mute);--code-pill:var(--color-bg-mute);--code-track:var(--color-bg-mute);--code-segment:var(--color-bg-base);writing-mode:horizontal-tb;background-color:var(--code-surface);border-radius:.75rem;margin-block:1.75rem}.code-annotate-group-tabs{background-color:var(--code-track);border-radius:.6rem;gap:.125rem;max-inline-size:calc(100% - 4rem);margin:.5rem 0 0 .75rem;padding:.2rem;display:inline-flex;overflow-x:auto}.code-annotate-group-tab{color:var(--code-mute);cursor:pointer;border-radius:.45rem;flex:none;padding:.4rem .8rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;line-height:1;transition:color .15s ease-out,background-color .15s ease-out}.code-annotate-group-tab:hover{color:var(--code-ink)}.code-annotate-group-tab[aria-selected=true]{background-color:var(--code-segment);color:var(--code-ink)}.code-annotate-group-tab:focus-visible{outline:2px solid var(--color-border-info);outline-offset:-2px}.writing-v .code-annotate-block:not(.code-annotate-group *),.writing-v .code-annotate-group{margin-inline:1rem}.dark .code-annotate-group{--code-track:var(--color-bg-subtle);--code-segment:var(--color-bg-mute)}.dark .shiki{color:var(--shiki-dark)!important;background-color:var(--shiki-dark-bg)!important}.dark .shiki span:not(.line,.code-annotate-callout-text){color:var(--shiki-dark)!important;font-style:var(--shiki-dark-font-style)!important;font-weight:var(--shiki-dark-font-weight)!important;text-decoration:var(--shiki-dark-text-decoration)!important}}