@layer kazari {
:root {
  --kz-radius: 0.5rem;
  --kz-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --kz-border: 1px solid transparent;
  --kz-transition: 150ms ease;
  --kz-font-family: 'JetBrains Mono Variable', monospace;
  --kz-font-size: 0.875rem;
  --kz-font-weight: 500;
  --kz-line-height: 1.6;
  --kz-ui-font-family: system-ui, sans-serif;
  --kz-ui-font-size: 0.9rem;
  --kz-ui-font-weight: 400;
  --kz-ui-line-height: 1.65;
  --kz-code-padding-block: 1rem;
  --kz-code-padding-inline: 1.35rem;
  --kz-title-font-size: 0.8rem;
  --kz-title-padding: 0.5rem 1rem;
  --kz-ln-padding-inline: 2ch;
  --kz-gutter-border-width: 1px;
  --kz-mark-bg: rgba(255,200,0,0.12);
  --kz-mark-border: rgba(255,200,0,0.5);
  --kz-mark-border-width: 3px;
  --kz-ins-bg: rgba(46,160,67,0.12);
  --kz-ins-border: rgba(46,160,67,0.5);
  --kz-ins-indicator: '+';
  --kz-del-bg: rgba(248,81,73,0.12);
  --kz-del-border: rgba(248,81,73,0.5);
  --kz-del-indicator: '-';
  --kz-mark-accent-margin: 0rem;
  --kz-diff-indicator-margin: 0.3rem;
  --kz-ins-indicator-color: rgba(46,160,67,0.8);
  --kz-del-indicator-color: rgba(248,81,73,0.8);
  --kz-label-mark-bg: rgba(255,200,0,0.35);
  --kz-label-ins-bg: rgba(46,160,67,0.35);
  --kz-label-del-bg: rgba(248,81,73,0.35);
  --kz-label-fg: #ffffff;
  --kz-label-padding: 0.1rem 0.3rem;
  --kz-label-font-size: 0.75rem;
  --kz-label-radius: 0.2rem;
  --kz-inline-mark-bg: rgba(255,200,0,0.2);
  --kz-inline-mark-border: rgba(255,200,0,0.5);
  --kz-inline-mark-radius: 0.2rem;
  --kz-inline-mark-padding: 0.15rem;
  --kz-inline-mark-border-width: 1.5px;
  --kz-inline-ins-bg: rgba(46,160,67,0.2);
  --kz-inline-ins-border: rgba(46,160,67,0.5);
  --kz-inline-del-bg: rgba(248,81,73,0.2);
  --kz-inline-del-border: rgba(248,81,73,0.5);
  --kz-focus-dimmed-opacity: 0.35;
  --kz-focus-ring: rgb(59,130,246);
  --kz-toolbar-padding: 0.25rem 1rem;
  --kz-terminal-header-padding: 0.5rem 1rem;
  --kz-lang-font-size: 0.8rem;
  --kz-lang-font-weight: 500;
  --kz-separator-color: rgba(161, 161, 170, 0.3);
  --kz-copy-radius: 0.375rem;
  --kz-copy-success-bg: rgba(34, 197, 94, 0.9);
  --kz-copy-success-fg: #ffffff;
  --kz-copy-success-border: rgba(34, 197, 94, 0.8);
  --kz-tooltip-bg: rgba(30,30,30,0.92);
  --kz-tooltip-fg: #ffffff;
  --kz-tooltip-font-size: 0.75rem;
  --kz-tooltip-padding: 0.35rem 0.75rem;
  --kz-tooltip-radius: 6px;
  --kz-tooltip-offset: 6px;
  --kz-tooltip-shadow: 0 2px 6px rgba(0,0,0,0.25);
  --kz-tooltip-arrow-size: 5px;
  --kz-terminal-bg: var(--kz-editor-bg);
  --kz-terminal-titlebar-bg: var(--kz-toolbar-bg);
  --kz-terminal-dot-red: #ff5f57;
  --kz-terminal-dot-yellow: #febc2e;
  --kz-terminal-dot-green: #28c840;
  --kz-ln-width: 2ch;
  --kz-ln-opacity: 1;
  --kz-ln-highlight-opacity: 0.8;
  --kz-ansi-black: #000000;
  --kz-ansi-red: #cc0000;
  --kz-ansi-green: #4e9a06;
  --kz-ansi-yellow: #c4a000;
  --kz-ansi-blue: #3465a4;
  --kz-ansi-magenta: #75507b;
  --kz-ansi-cyan: #06989a;
  --kz-ansi-white: #d3d7cf;
  --kz-ansi-bright-black: #555753;
  --kz-ansi-bright-red: #ef2929;
  --kz-ansi-bright-green: #8ae234;
  --kz-ansi-bright-yellow: #fce94f;
  --kz-ansi-bright-blue: #729fcf;
  --kz-ansi-bright-magenta: #ad7fa8;
  --kz-ansi-bright-cyan: #34e2e2;
  --kz-ansi-bright-white: #eeeeec;
  --kz-collapse-btn-bg: rgba(255,255,255,0.08);
  --kz-collapse-btn-fg: rgba(255,255,255,0.7);
  --kz-collapse-btn-hover-bg: rgba(255,255,255,0.15);
  --kz-collapse-gradient-start: transparent;
  --kz-collapse-gradient-end: var(--kz-editor-bg);
  --kz-collapse-transition: 300ms ease;
  --kz-collapse-closed-bg: rgb(84 174 255 / 20%);
  --kz-collapse-closed-border: rgb(84 174 255 / 50%);
  --kz-collapse-closed-border-width: 0;
  --kz-collapse-closed-padding: 4px;
  --kz-collapse-open-bg: transparent;
  --kz-collapse-open-bg-collapsible: rgb(84 174 255 / 10%);
  --kz-collapse-open-border: transparent;
  --kz-collapse-open-border-width: 1px;
  --kz-collapse-closed-fg: currentColor;
  --kz-collapse-closed-font-family: inherit;
  --kz-collapse-closed-font-size: inherit;
  --kz-collapse-closed-line-height: inherit;
  --kz-collapse-expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-collapse-collapse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-group-tab-bg: transparent;
  --kz-group-tab-fg: inherit;
  --kz-group-tab-active-border: #007acc;
  --kz-group-tab-padding: 0.5rem 1rem;
  --kz-group-border-width: 1px;
  --kz-group-radius: var(--kz-radius);
  --kz-file-icon-size: 1rem;
  --kz-file-icon-margin: 0;
  --kz-file-icon-opacity: 0.8;
  --kz-scrollbar-width: 8px;
  --kz-scrollbar-height: 8px;
  --kz-scrollbar-track: transparent;
  --kz-fs-font-scale: 1;
  --kz-editor-bg: #f7f7f7;
  --kz-ln-fg: #7f7f7f;
  --kz-ln-highlight-fg: #24292f;
  --kz-gutter-border-color: rgba(0,0,0,0.1);
  --kz-toolbar-bg: rgba(229, 231, 235, 0.15);
  --kz-toolbar-border: rgba(209, 213, 219, 0.5);
  --kz-lang-fg: #4b5563;
  --kz-copy-fg: #4b5563;
  --kz-copy-fg-hover: #111827;
  --kz-copy-bg-hover: rgba(156, 163, 175, 0.2);
  --kz-collapse-btn-fg: #4b5563;
  --kz-collapse-btn-bg: rgba(0, 0, 0, 0.04);
  --kz-collapse-btn-hover-bg: rgba(0, 0, 0, 0.08);
  --kz-collapse-btn-border: rgba(0, 0, 0, 0.15);
  --kz-collapse-btn-border-hover: rgba(0, 0, 0, 0.3);
  --kz-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --kz-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
  --kz-group-tab-active-bg: rgba(255,255,255,0.8);
  --kz-group-tab-active-fg: #24292f;
  --kz-group-border: rgba(0,0,0,0.1);
}
:root.dark {
  --kz-editor-bg: #0d1117;
  --kz-editor-fg: #e6edf3;
  --kz-ln-fg: #6e7681;
  --kz-ln-highlight-fg: #e6edf3;
  --kz-gutter-border-color: rgba(255,255,255,0.1);
  --kz-toolbar-bg: rgba(39, 39, 42, 0.6);
  --kz-toolbar-border: rgba(63, 63, 70, 0.4);
  --kz-lang-fg: #a1a1aa;
  --kz-copy-fg: #d4d4d8;
  --kz-copy-fg-hover: #ffffff;
  --kz-copy-bg-hover: rgba(63, 63, 70, 0.8);
  --kz-collapse-btn-fg: #d4d4d8;
  --kz-collapse-btn-bg: rgba(255, 255, 255, 0.1);
  --kz-collapse-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --kz-collapse-btn-border: rgba(255, 255, 255, 0.2);
  --kz-collapse-btn-border-hover: rgba(255, 255, 255, 0.35);
  --kz-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --kz-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
  --kz-group-tab-active-bg: rgba(255,255,255,0.1);
  --kz-group-tab-active-fg: #e6edf3;
  --kz-group-border: rgba(255,255,255,0.1);
}
.kazari-block .kz-line span[style^="--"] { color: var(--sl, inherit); background-color: var(--slbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovl-editor-bg); --kz-editor-fg: var(--kz-ovl-editor-fg); --kz-ln-fg: var(--kz-ovl-ln-fg); --kz-ln-highlight-fg: var(--kz-ovl-ln-highlight-fg); --kz-gutter-border-color: var(--kz-ovl-gutter-border-color); --kz-toolbar-bg: var(--kz-ovl-toolbar-bg); --kz-toolbar-border: var(--kz-ovl-toolbar-border); --kz-lang-fg: var(--kz-ovl-lang-fg); --kz-copy-fg: var(--kz-ovl-copy-fg); --kz-copy-fg-hover: var(--kz-ovl-copy-fg-hover); --kz-copy-bg-hover: var(--kz-ovl-copy-bg-hover); --kz-collapse-btn-fg: var(--kz-ovl-collapse-btn-fg); --kz-collapse-btn-bg: var(--kz-ovl-collapse-btn-bg); --kz-collapse-btn-hover-bg: var(--kz-ovl-collapse-btn-hover-bg); --kz-collapse-btn-border: var(--kz-ovl-collapse-btn-border); --kz-collapse-btn-border-hover: var(--kz-ovl-collapse-btn-border-hover); --kz-scrollbar-thumb: var(--kz-ovl-scrollbar-thumb); --kz-scrollbar-thumb-hover: var(--kz-ovl-scrollbar-thumb-hover); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.dark .kazari-block .kz-line span[style^="--"] { color: var(--sd, inherit); background-color: var(--sdbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.dark .kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovd-editor-bg, var(--kz-ovl-editor-bg)); --kz-editor-fg: var(--kz-ovd-editor-fg, var(--kz-ovl-editor-fg)); --kz-ln-fg: var(--kz-ovd-ln-fg, var(--kz-ovl-ln-fg)); --kz-ln-highlight-fg: var(--kz-ovd-ln-highlight-fg, var(--kz-ovl-ln-highlight-fg)); --kz-gutter-border-color: var(--kz-ovd-gutter-border-color, var(--kz-ovl-gutter-border-color)); --kz-toolbar-bg: var(--kz-ovd-toolbar-bg, var(--kz-ovl-toolbar-bg)); --kz-toolbar-border: var(--kz-ovd-toolbar-border, var(--kz-ovl-toolbar-border)); --kz-lang-fg: var(--kz-ovd-lang-fg, var(--kz-ovl-lang-fg)); --kz-copy-fg: var(--kz-ovd-copy-fg, var(--kz-ovl-copy-fg)); --kz-copy-fg-hover: var(--kz-ovd-copy-fg-hover, var(--kz-ovl-copy-fg-hover)); --kz-copy-bg-hover: var(--kz-ovd-copy-bg-hover, var(--kz-ovl-copy-bg-hover)); --kz-collapse-btn-fg: var(--kz-ovd-collapse-btn-fg, var(--kz-ovl-collapse-btn-fg)); --kz-collapse-btn-bg: var(--kz-ovd-collapse-btn-bg, var(--kz-ovl-collapse-btn-bg)); --kz-collapse-btn-hover-bg: var(--kz-ovd-collapse-btn-hover-bg, var(--kz-ovl-collapse-btn-hover-bg)); --kz-collapse-btn-border: var(--kz-ovd-collapse-btn-border, var(--kz-ovl-collapse-btn-border)); --kz-collapse-btn-border-hover: var(--kz-ovd-collapse-btn-border-hover, var(--kz-ovl-collapse-btn-border-hover)); --kz-scrollbar-thumb: var(--kz-ovd-scrollbar-thumb, var(--kz-ovl-scrollbar-thumb)); --kz-scrollbar-thumb-hover: var(--kz-ovd-scrollbar-thumb-hover, var(--kz-ovl-scrollbar-thumb-hover)); }
.kazari-block {
  position: relative;
  margin: 1rem 0;
  min-width: 0;
}
.kazari-block pre {
  margin: 0;
  padding: 0;
  border: none;
  background: var(--kz-editor-bg);
  color: var(--kz-editor-fg);
  font-family: var(--kz-font-family);
  font-size: var(--kz-font-size);
  font-weight: var(--kz-font-weight);
  line-height: var(--kz-line-height);
  border-radius: var(--kz-radius);
  overflow-x: auto;
}
.kazari-block .frame pre {
  border-radius: 0;
}
.kazari-block .frame.is-terminal pre {
  background: var(--kz-terminal-bg);
}
.kazari-block pre code {
  display: block;
  padding: var(--kz-code-padding-block) 0;
  font-family: inherit;
}
.kazari-block .kz-line {
  display: grid;
  grid-template-areas: 'gutter code';
  grid-template-columns: auto 1fr;
  min-height: 1lh;
}
.kazari-block .kz-line .kz-code {
  grid-area: code;
  padding-inline: var(--kz-code-padding-inline);
  white-space: pre;
}
.kazari-block pre.wrap .kz-line .kz-code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  text-indent: calc(var(--kz-indent, 0ch) * -1);
  padding-inline-start: calc(var(--kz-code-padding-inline) + var(--kz-indent, 0ch));
}
.kazari-block pre.wrap .kz-line .kz-code .indent {
  white-space: pre;
}
.kazari-block button:focus-visible {
  outline: 2px solid var(--kz-focus-ring, currentColor);
  outline-offset: 2px;
}
.kazari-block [role="tab"]:focus-visible {
  outline: 2px solid var(--kz-focus-ring, currentColor);
  outline-offset: -2px;
}
.kazari-block, .kazari-block *, .kazari-block *::before, .kazari-block *::after {
  transition: none !important;
}
.kazari-block .kz-sr-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.kazari-block .kz-gutter {
  grid-area: gutter;
  min-width: calc(var(--kz-ln-width) + 2 * var(--kz-ln-padding-inline));
  border-right: var(--kz-gutter-border-width) solid var(--kz-gutter-border-color);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.kazari-block .kz-gutter .kz-ln {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  box-sizing: content-box;
  min-width: var(--kz-ln-width);
  padding-inline: var(--kz-ln-padding-inline);
  font-variant-numeric: tabular-nums;
  color: var(--kz-ln-fg);
  opacity: var(--kz-ln-opacity);
}
.kazari-block .highlight .kz-gutter .kz-ln {
  color: var(--kz-ln-highlight-fg);
  opacity: var(--kz-ln-highlight-opacity);
}
/* Line marker backgrounds */
.kazari-block .kz-line.highlight.mark {
  background: var(--kz-mark-bg);
}
.kazari-block .kz-line.highlight.ins {
  background: var(--kz-ins-bg);
}
.kazari-block .kz-line.highlight.del {
  background: var(--kz-del-bg);
}

/* Left accent bar via inset box-shadow (no layout shift) */
.kazari-block .kz-line.highlight {
  box-shadow: inset var(--kz-mark-border-width) 0 0 0 var(--kz-mark-border);
}
.kazari-block .kz-line.highlight.ins {
  box-shadow: inset var(--kz-mark-border-width) 0 0 0 var(--kz-ins-border);
}
.kazari-block .kz-line.highlight.del {
  box-shadow: inset var(--kz-mark-border-width) 0 0 0 var(--kz-del-border);
}

/* Diff indicators via ::before on .kz-code */
.kazari-block .kz-line.ins .kz-code,
.kazari-block .kz-line.del .kz-code {
  position: relative;
}
.kazari-block .kz-line.ins .kz-code::before {
  content: var(--kz-ins-indicator);
  color: var(--kz-ins-indicator-color);
  position: absolute;
  left: 0;
  margin-left: var(--kz-diff-indicator-margin);
  white-space: pre;
  pointer-events: none;
}
.kazari-block .kz-line.del .kz-code::before {
  content: var(--kz-del-indicator);
  color: var(--kz-del-indicator-color);
  position: absolute;
  left: 0;
  margin-left: var(--kz-diff-indicator-margin);
  white-space: pre;
  pointer-events: none;
}

/* Labeled range line backgrounds (stronger than single-line markers) */
.kazari-block .kz-line.highlight.mark.tm-label {
  background: var(--kz-label-mark-bg);
}
.kazari-block .kz-line.highlight.ins.tm-label {
  background: var(--kz-label-ins-bg);
}
.kazari-block .kz-line.highlight.del.tm-label {
  background: var(--kz-label-del-bg);
}

/* Labeled ranges — badge at the left edge of the code area.
   data-label on .kz-code div, read via attr().
   On ins/del lines, this overrides the diff indicator ::before. */
.kazari-block .kz-line.tm-label .kz-code {
  position: relative;
}
.kazari-block .kz-line.tm-label .kz-code::before {
  content: attr(data-label);
  display: block;
  position: absolute;
  left: 0;
  margin-left: 0;
  z-index: 1;
  color: var(--kz-label-fg);
  padding: var(--kz-label-padding);
  font-size: var(--kz-label-font-size);
  border-radius: var(--kz-label-radius);
  white-space: nowrap;
  pointer-events: none;
}
.kazari-block .kz-line.mark.tm-label .kz-code::before {
  background: var(--kz-mark-border);
}
.kazari-block .kz-line.ins.tm-label .kz-code::before {
  background: var(--kz-ins-border);
}
.kazari-block .kz-line.del.tm-label .kz-code::before {
  background: var(--kz-del-border);
}
/* Inline text markers */
.kazari-block mark,
.kazari-block ins,
.kazari-block del {
  background: var(--kz-inline-mark-bg);
  border: var(--kz-inline-mark-border-width) solid var(--kz-inline-mark-border);
  border-radius: var(--kz-inline-mark-radius);
  padding: var(--kz-inline-mark-padding);
  text-decoration: none;
}
.kazari-block ins {
  background: var(--kz-inline-ins-bg);
  border-color: var(--kz-inline-ins-border);
  text-decoration: none;
}
.kazari-block del {
  background: var(--kz-inline-del-bg);
  border-color: var(--kz-inline-del-border);
  text-decoration: none;
}

/* Multi-token spanning — remove borders/radius at joins */
.kazari-block mark.open-start,
.kazari-block ins.open-start,
.kazari-block del.open-start {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0;
}
.kazari-block mark.open-end,
.kazari-block ins.open-end,
.kazari-block del.open-end {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 0;
}
/* Focus lines — container-level class, CSS handles dimming */
.kazari-block code.has-focus .kz-line:not(.focused) {
  opacity: var(--kz-focus-dimmed-opacity);
}
.kazari-block code.has-focus .kz-line.highlight:not(.focused) {
  opacity: var(--kz-focus-dimmed-opacity);
}
.kazari-block figure {
  all: revert;
  position: relative;
  margin: 0;
  border-radius: var(--kz-radius);
  box-shadow: var(--kz-shadow);
  border: var(--kz-border);
}
.kazari-block pre::-webkit-scrollbar {
  width: var(--kz-scrollbar-width);
  height: var(--kz-scrollbar-height);
}
.kazari-block pre::-webkit-scrollbar-thumb {
  background: var(--kz-scrollbar-thumb);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
.kazari-block pre::-webkit-scrollbar-thumb:hover {
  background: var(--kz-scrollbar-thumb-hover);
  background-clip: padding-box;
}
.kazari-block pre::-webkit-scrollbar-track {
  background: var(--kz-scrollbar-track);
}
.kazari-block pre {
  scrollbar-width: thin;
  scrollbar-color: var(--kz-scrollbar-thumb) transparent;
}
.kazari-block .frame {
  position: relative;
  min-width: 0;
  border-radius: var(--kz-radius);
  box-shadow: var(--kz-shadow);
  border: var(--kz-border);
}
.kazari-block .frame > :first-child {
  border-radius: var(--kz-radius) var(--kz-radius) 0 0;
}
.kazari-block .frame > :last-child {
  border-radius: 0 0 var(--kz-radius) var(--kz-radius);
}
.kazari-block .frame > :last-child:not(pre) {
  overflow: hidden;
}
/* Themed blocks need their own backdrop: the translucent toolbar colors
   composite over the frame, which otherwise shows the page background. */
.kazari-block.kz-themed .frame,
.kazari-block[data-kz-theme] .frame {
  background: var(--kz-editor-bg);
}
.kazari-block .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.kazari-block .kz-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: var(--kz-toolbar-padding);
  background: var(--kz-toolbar-bg);
  border-bottom: 1px solid var(--kz-toolbar-border);
}
.kazari-block .kz-toolbar-left,
.kazari-block .kz-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
/* The title side shrinks and ellipsizes; the button side keeps its
   buttons whole. */
.kazari-block .kz-toolbar-right {
  flex-shrink: 0;
}
.kazari-block .kz-lang {
  font-size: var(--kz-lang-font-size);
  font-weight: var(--kz-lang-font-weight);
  font-family: var(--kz-ui-font-family);
  color: var(--kz-lang-fg);
}
/* The row's 0.5rem flex gap already separates these, so the margin only
   tops it up to 0.625rem, keeping the separator centered against the
   0.625rem padding on its other side. */
.kazari-block .kz-lang + .kz-title {
  margin-left: 0.125rem;
  padding-left: 0.625rem;
  border-left: 1px solid var(--kz-separator-color);
}
.kazari-block .kz-title {
  font-size: 0.875rem;
  font-family: var(--kz-ui-font-family);
  color: var(--kz-editor-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .kazari-block .kz-toolbar {
    padding-inline: 0.5rem;
  }
  .kazari-block .kz-toolbar-left,
  .kazari-block .kz-toolbar-right {
    gap: 0.25rem;
  }
  .kazari-block .kz-terminal-actions {
    gap: 0.25rem;
  }
}
.kazari-block [data-tooltip] {
  position: relative;
}
.kazari-block [data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--kz-tooltip-offset));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--kz-tooltip-padding);
  border-radius: var(--kz-tooltip-radius);
  background: var(--kz-tooltip-bg);
  color: var(--kz-tooltip-fg);
  font-family: var(--kz-ui-font-family);
  font-size: var(--kz-tooltip-font-size);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--kz-tooltip-shadow);
  visibility: hidden;
  z-index: 10;
}
.kazari-block [data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + var(--kz-tooltip-offset) - var(--kz-tooltip-arrow-size));
  left: 50%;
  transform: translateX(-50%);
  border: var(--kz-tooltip-arrow-size) solid transparent;
  border-top-color: var(--kz-tooltip-bg);
  pointer-events: none;
  visibility: hidden;
  z-index: 10;
}
.kazari-block [data-tooltip]:hover::after,
.kazari-block [data-tooltip]:hover::before,
.kazari-block [data-tooltip]:focus-visible::after,
.kazari-block [data-tooltip]:focus-visible::before {
  visibility: visible;
}
.kazari-block [data-tooltip]:active::after,
.kazari-block [data-tooltip]:active::before {
  visibility: hidden;
}
.kazari-block .kz-copy-btn.copied::after,
.kazari-block .kz-copy-btn.copied::before {
  visibility: hidden;
}
.kazari-block:fullscreen [data-tooltip]::after,
.kazari-block:-webkit-full-screen [data-tooltip]::after {
  z-index: 100;
  bottom: auto;
  top: calc(100% + var(--kz-tooltip-offset));
}
.kazari-block:fullscreen [data-tooltip]::before,
.kazari-block:-webkit-full-screen [data-tooltip]::before {
  z-index: 100;
  bottom: auto;
  top: calc(100% + var(--kz-tooltip-offset) - var(--kz-tooltip-arrow-size));
  border-top-color: transparent;
  border-bottom-color: var(--kz-tooltip-bg);
}
@media (hover: none) {
  .kazari-block [data-tooltip]::after,
  .kazari-block [data-tooltip]::before {
    display: none;
  }
}
@media print {
  .kazari-block [data-tooltip]::after,
  .kazari-block [data-tooltip]::before {
    display: none;
  }
}
/* An empty slot a site fills with background-image. The background
   properties live here so a site only supplies the image itself.

   background-origin matters because the separator rule below pads this box.
   Backgrounds resolve against the padding box by default, so contain would
   size the image to the padded width and center would place it across that
   width, pulling the icon off its square and toward the separator. Binding
   it to the content box keeps the padding as separator spacing only. */
.kazari-block .kz-file-icon {
  display: inline-block;
  width: var(--kz-file-icon-size);
  height: var(--kz-file-icon-size);
  margin: var(--kz-file-icon-margin);
  opacity: var(--kz-file-icon-opacity);
  vertical-align: middle;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
}
/* The toolbar row is flex with a 0.5rem gap, and that gap already sits
   between the language badge and this box, so the margin only tops it up
   to 0.625rem, matching the padding on the other side of the border. A
   full 0.625rem margin here would double count the gap and push the
   separator off center. */
.kazari-block .kz-lang + .kz-file-icon {
  margin-left: 0.125rem;
  padding-left: 0.625rem;
  border-left: 1px solid var(--kz-separator-color);
}
.kazari-block .kz-file-icon + .kz-title {
  margin-left: 0;
}
.kazari-block .kz-terminal-header {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: var(--kz-terminal-header-padding);
  background: var(--kz-terminal-titlebar-bg);
  border-bottom: 1px solid var(--kz-toolbar-border);
  position: relative;
}
.kazari-block .kz-terminal-header .kz-terminal-dots {
  flex-shrink: 0;
}
/* The title is a flex item, not an absolutely centered overlay, so it can
   shrink and ellipsize instead of rendering behind the dots or the action
   buttons when the header runs out of room. It centers in the space
   between its neighbors, which sits slightly off true center when the
   two sides differ in width. */
.kazari-block .kz-terminal-header .kz-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.875rem;
  font-family: var(--kz-ui-font-family);
  color: var(--kz-editor-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kazari-block .kz-terminal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
  flex-shrink: 0;
  z-index: 1;
}
.kazari-block .kz-terminal-dots {
  display: flex;
  gap: 0.4rem;
  z-index: 1;
}
.kazari-block .kz-terminal-dots span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}
.kazari-block .kz-terminal-dots span:nth-child(1) { background: var(--kz-terminal-dot-red); }
.kazari-block .kz-terminal-dots span:nth-child(2) { background: var(--kz-terminal-dot-yellow); }
.kazari-block .kz-terminal-dots span:nth-child(3) { background: var(--kz-terminal-dot-green); }
.kazari-block .kz-terminal-header.kz-dots-minimal {
  min-height: 2rem;
}
.kazari-block .kz-terminal-header.kz-dots-minimal::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  left: var(--kz-code-padding-inline);
  width: 2.1rem;
  height: 0.56rem;
  /* Fallbacks keep the dots visible on multi-engine pages where the page
     CSS comes from an engine without the minimal dot style configured. */
  background-color: var(--kz-terminal-dots-fg, currentColor);
  opacity: var(--kz-terminal-dots-opacity, 0.15);
  -webkit-mask-image: var(--kz-terminal-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E"));
  mask-image: var(--kz-terminal-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E"));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.kazari-block .kz-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--kz-link-underline, currentColor);
  text-decoration-thickness: var(--kz-link-underline-width, 1px);
  text-underline-offset: var(--kz-link-underline-offset, 0.15em);
  cursor: pointer;
}
.kazari-block .kz-link:hover {
  text-decoration-style: solid;
}
.kazari-block .kz-link-icon {
  display: inline;
  width: 0.75em;
  height: 0.75em;
  margin-inline-start: 0.15em;
  vertical-align: -0.05em;
  opacity: 0.5;
}
.kazari-block .kz-link:hover .kz-link-icon {
  opacity: 0.8;
}
.kazari-block .kz-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--kz-copy-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--kz-copy-fg);
  background: transparent;
  direction: ltr;
  unicode-bidi: isolate;
}
.kazari-block .kz-copy-btn:hover {
  background: var(--kz-copy-bg-hover);
  color: var(--kz-copy-fg-hover);
}
.kazari-block .kz-copy-btn.copied {
  background: var(--kz-copy-success-bg);
  color: var(--kz-copy-success-fg);
  border-color: var(--kz-copy-success-border);
}
.kazari-block .kz-copy-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.kazari-block:not(:has(.frame)) .kz-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.2s ease, color 0.2s ease;
  z-index: 1;
}
.kazari-block:not(:has(.frame)):hover .kz-copy-btn,
.kazari-block:not(:has(.frame)) .kz-copy-btn:focus-visible {
  opacity: 1;
}
.kazari-block:not(:has(.frame)) .kz-copy-btn.copied {
  opacity: 1;
}
@media (hover: none) {
  .kazari-block:not(:has(.frame)) .kz-copy-btn {
    opacity: 1;
  }
}
@media print {
  .kazari-block:not(:has(.frame)) .kz-copy-btn {
    display: none;
  }
}
.kazari-block .kz-fs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--kz-copy-radius);
  background: transparent;
  color: var(--kz-copy-fg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.kazari-block .kz-fs-btn:hover {
  background: var(--kz-copy-bg-hover);
  color: var(--kz-copy-fg-hover);
}
.kazari-block .kz-fs-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.kazari-block .kz-fs-exit-icon {
  display: none;
  width: 1.25rem;
  height: 1.25rem;
}
.kazari-block .kz-font-controls {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
.kazari-block .kz-font-inc,
.kazari-block .kz-font-dec {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--kz-copy-radius);
  background: transparent;
  color: var(--kz-copy-fg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.kazari-block .kz-font-inc:hover,
.kazari-block .kz-font-dec:hover {
  background: var(--kz-copy-bg-hover);
  color: var(--kz-copy-fg-hover);
}
.kazari-block .kz-font-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.kazari-block:fullscreen .kz-font-controls,
.kazari-block:-webkit-full-screen .kz-font-controls {
  display: flex;
}
.kazari-block:fullscreen .kz-fs-icon,
.kazari-block:-webkit-full-screen .kz-fs-icon {
  display: none;
}
.kazari-block:fullscreen .kz-fs-exit-icon,
.kazari-block:-webkit-full-screen .kz-fs-exit-icon {
  display: inline;
}
.kazari-block:fullscreen,
.kazari-block:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--kz-editor-bg);
  padding: 2rem;
}
.kazari-block:fullscreen .frame,
.kazari-block:-webkit-full-screen .frame {
  width: 100%;
  max-width: none;
  border-radius: var(--kz-radius);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  overflow: auto;
  font-size: calc(1em * var(--kz-fs-font-scale));
}
.kazari-block:fullscreen pre,
.kazari-block:-webkit-full-screen pre {
  font-size: calc(var(--kz-font-size) * var(--kz-fs-font-scale));
}
.kazari-block:fullscreen .kz-lang,
.kazari-block:-webkit-full-screen .kz-lang {
  font-size: calc(var(--kz-lang-font-size) * var(--kz-fs-font-scale));
}
.kazari-block:fullscreen .kz-title,
.kazari-block:-webkit-full-screen .kz-title {
  font-size: calc(0.875rem * var(--kz-fs-font-scale));
}
@media (max-width: 768px) {
  .kazari-block:fullscreen,
  .kazari-block:-webkit-full-screen {
    padding: 0.75rem;
  }
  .kazari-block .kz-font-inc,
  .kazari-block .kz-font-dec {
    padding: 0.5rem;
  }
  .kazari-block .kz-font-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
  .kazari-block .kz-fs-btn {
    padding: 0.5rem;
  }
  .kazari-block .kz-fs-icon,
  .kazari-block .kz-fs-exit-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
}
@media (hover: none) and (pointer: coarse) {
  .kazari-block .kz-fs-btn:hover {
    background: transparent;
    transform: none;
  }
  .kazari-block .kz-font-inc:hover,
  .kazari-block .kz-font-dec:hover {
    background: transparent;
    transform: none;
  }
}
.kazari-block .kz-wrap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--kz-copy-radius);
  background: transparent;
  color: var(--kz-copy-fg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.kazari-block .kz-wrap-btn:hover {
  background: var(--kz-copy-bg-hover);
  color: var(--kz-copy-fg-hover);
}
.kazari-block .kz-wrap-btn[aria-pressed="true"] {
  background: var(--kz-copy-bg-hover);
  color: var(--kz-copy-fg-hover);
}
.kazari-block .kz-wrap-icon,
.kazari-block .kz-wrap-off-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.kazari-block .kz-wrap-off-icon {
  display: none;
}
.kazari-block .kz-wrap-btn[aria-pressed="true"] .kz-wrap-icon {
  display: none;
}
.kazari-block .kz-wrap-btn[aria-pressed="true"] .kz-wrap-off-icon {
  display: inline;
}
/* --- Threshold-based collapse --- */

.kazari-block .kz-collapse-content {
    position: relative;
}

.kazari-block .kz-collapse-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4em;
    background: linear-gradient(
        to bottom,
        var(--kz-collapse-gradient-start),
        var(--kz-collapse-gradient-end)
    );
    pointer-events: none;
    transition: opacity var(--kz-collapse-transition);
    z-index: 1;
}

.kazari-block .kz-collapse-bar {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    background: var(--kz-editor-bg);
    position: relative;
    z-index: 2;
}

.kazari-block .kz-collapse-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 1rem;
    border: 1px solid var(--kz-collapse-btn-border);
    border-radius: 1rem;
    background: var(--kz-collapse-btn-bg);
    color: var(--kz-collapse-btn-fg);
    font-size: 0.8rem;
    font-family: var(--kz-ui-font-family);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
}

.kazari-block .kz-collapse-btn:hover {
    background: var(--kz-collapse-btn-hover-bg);
    border-color: var(--kz-collapse-btn-border-hover);
}

/* --- Toolbar collapse toggle --- */

.kazari-block .kz-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--kz-copy-radius);
    background: transparent;
    color: var(--kz-copy-fg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.kazari-block .kz-collapse-toggle:hover {
    background: var(--kz-copy-bg-hover);
    color: var(--kz-copy-fg-hover);
}

.kazari-block .kz-collapse-toggle-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.kazari-block:not(.kz-collapsed) .kz-collapse-toggle-icon {
    transform: rotate(180deg);
}

.kazari-block .frame {
    position: relative;
}


.kazari-block.kz-collapsed .kz-hidden {
    display: none;
}

.kazari-block:not(.kz-collapsed) .kz-hidden {
    display: grid;
}

.kazari-block:not(.kz-collapsed) .kz-collapse-gradient {
    opacity: 0;
    pointer-events: none;
}

.kazari-block:not(.kz-collapsed) .kz-gap {
    display: none;
}

/* --- Range-based collapse sections --- */

.kazari-block .kz-section {
    position: relative;
    border: none;
    margin: 0;
    padding: 0;
}

.kazari-block .kz-section summary {
    position: relative;
    display: block;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
    color: var(--kz-collapse-closed-fg);
    background-color: var(--kz-collapse-closed-bg);
    --cs-border-color: var(--kz-collapse-closed-border);
    --cs-border-width: var(--kz-collapse-closed-border-width);
    box-shadow: inset 0 calc(-1 * var(--cs-border-width)) var(--cs-border-color),
                inset 0 var(--cs-border-width) var(--cs-border-color);
    margin: 0;
    padding: 0;
    font-family: var(--kz-collapse-closed-font-family);
    font-size: var(--kz-collapse-closed-font-size);
    line-height: var(--kz-collapse-closed-line-height);
}

.kazari-block .kz-section summary::marker {
    display: inline-block;
    content: "";
    width: 16px;
    height: 16px;
}

.kazari-block .kz-section summary::-webkit-details-marker {
    display: none;
}

.kazari-block .kz-section summary .kz-code {
    padding-block: var(--kz-collapse-closed-padding);
    padding-left: var(--kz-indent, 0ch);
    text-indent: 0;
}

/* Expand & collapse icons (Octicons, MIT licensed) */
.kazari-block .kz-section .expand,
.kazari-block .kz-section .collapse {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    opacity: 0.75;
}

.kazari-block .kz-section .expand::after,
.kazari-block .kz-section .collapse::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 0;
    background-color: var(--kz-collapse-closed-fg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    line-height: 0;
}

.kazari-block .kz-section .expand::after {
    -webkit-mask-image: var(--kz-collapse-expand-icon);
    mask-image: var(--kz-collapse-expand-icon);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.kazari-block .kz-section .collapse {
    display: none;
}

.kazari-block .kz-section .collapse::after {
    -webkit-mask-image: var(--kz-collapse-collapse-icon);
    mask-image: var(--kz-collapse-collapse-icon);
}

.kazari-block .kz-section .text {
    margin-left: 1em;
}

/* Common open section styles */
.kazari-block .kz-section[open],
.kazari-block .kz-section details[open] + .content-lines {
    --cs-border-color: var(--kz-collapse-open-border);
    --cs-border-width: var(--kz-collapse-open-border-width);
    box-shadow: inset 0 calc(-1 * var(--cs-border-width)) var(--cs-border-color),
                inset 0 var(--cs-border-width) var(--cs-border-color);
}

/* --- GitHub style (details is outer element) --- */

.kazari-block details.kz-section[open] > summary {
    display: none;
}

.kazari-block details.kz-section[open] {
    background-color: var(--kz-collapse-open-bg);
}

/* --- Collapsible-start / collapsible-end styles (re-collapsible) --- */

.kazari-block .kz-section:is(.collapsible-start, .collapsible-end) {
    display: flex;
    flex-direction: column;
}

.kazari-block .kz-section.collapsible-end {
    flex-direction: column-reverse;
}

.kazari-block .kz-section:is(.collapsible-start, .collapsible-end) .content-lines {
    display: none;
}

.kazari-block .kz-section:is(.collapsible-start, .collapsible-end) details[open] .collapse {
    display: inline-block;
}

.kazari-block .kz-section:is(.collapsible-start, .collapsible-end) details[open] .expand,
.kazari-block .kz-section:is(.collapsible-start, .collapsible-end) details[open] .text {
    display: none;
}

.kazari-block .kz-section:is(.collapsible-start, .collapsible-end) details[open] + .content-lines {
    display: block;
    background-color: var(--kz-collapse-open-bg-collapsible);
}

/* --- Gap indicators --- */

.kazari-block .kz-gap {
    background: var(--kz-collapse-closed-bg);
    border-block: 1px dashed var(--kz-collapse-closed-border);
}

.kazari-block .kz-gap .kz-code {
    text-align: center;
    padding-block: 0;
    line-height: 1.2;
    -webkit-user-select: none;
    user-select: none;
}

.kazari-block .kz-gap .kz-gap-indicator {
    color: var(--kz-editor-fg);
    opacity: 0.45;
    font-size: 1.2em;
}

/* --- Print --- */

@media print {
    .kazari-block .kz-collapse-gradient,
    .kazari-block .kz-collapse-btn {
        display: none !important;
    }
    .kazari-block.kz-collapsed .kz-hidden {
        display: grid !important;
    }
    .kazari-block .kz-gap {
        display: none !important;
    }
    .kazari-block .kz-section:is(.collapsible-start, .collapsible-end) details {
        display: none !important;
    }
    .kazari-block .kz-section:is(.collapsible-start, .collapsible-end) .content-lines {
        display: block !important;
    }
}
/* Code group container */
.kazari-block.kz-group {
  border: var(--kz-group-border-width) solid var(--kz-group-border);
  border-radius: var(--kz-group-radius);
  overflow: hidden;
}

/* Tab bar */
.kazari-block .kz-group-tabs {
  display: flex;
  border-bottom: 1px solid var(--kz-group-border);
  background: var(--kz-editor-bg);
  overflow-x: auto;
}

.kazari-block .kz-group-tabs button[role="tab"] {
  padding: var(--kz-group-tab-padding);
  background: var(--kz-group-tab-bg);
  color: var(--kz-group-tab-fg);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--kz-ui-font-family);
  font-size: var(--kz-ui-font-size);
  font-weight: var(--kz-ui-font-weight);
  line-height: var(--kz-ui-line-height);
  white-space: nowrap;
  transition: color var(--kz-transition), background var(--kz-transition), border-color var(--kz-transition);
}

.kazari-block .kz-group-tabs button[role="tab"]:hover {
  background: var(--kz-group-tab-active-bg);
}

.kazari-block .kz-group-tabs button[role="tab"][aria-selected="true"] {
  background: var(--kz-group-tab-active-bg);
  color: var(--kz-group-tab-active-fg);
  border-bottom-color: var(--kz-group-tab-active-border);
}

/* Panels */
.kazari-block .kz-group-panels [role="tabpanel"][hidden] {
  display: none;
}

/* Neutralize inner kazari-block wrapper inside group panels */
.kazari-block .kz-group-panels .kazari-block {
  border-radius: 0;
  box-shadow: none;
}

/* Remove figure border-radius and shadow inside group */
.kazari-block .kz-group-panels .frame {
  border-radius: 0;
  box-shadow: none;
}
.kazari-block .kz-output {
    background: var(--kz-output-bg, var(--kz-editor-bg));
    color: var(--kz-output-fg, var(--kz-editor-fg));
    padding: 0;
    margin: 0;
    opacity: var(--kz-output-opacity, 0.7);
}
.kazari-block .kz-output-header {
    background: var(--kz-output-header-bg, var(--kz-toolbar-bg));
    border-top: 1px solid var(--kz-output-border, rgba(128,128,128,0.2));
    padding: 0;
    margin: 0;
}
.kazari-block .kz-output-toggle {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: 700;
    color: var(--kz-output-label-color, var(--kz-toolbar-fg, currentColor));
    font-family: var(--kz-ui-font-family, inherit);
    padding: 0.5em var(--kz-code-padding-inline, 1rem);
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    opacity: 0.85;
    box-sizing: border-box;
    line-height: inherit;
}
.kazari-block .kz-output-toggle:hover {
    opacity: 1;
}
.kazari-block .kz-output-toggle::before {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -0.15em;
}
.kazari-block .kz-output.kz-output-hidden .kz-output-toggle::before {
    transform: rotate(-45deg);
    margin-top: 0.15em;
}
.kazari-block .kz-output.kz-output-hidden .kz-output-pre {
    display: none;
}
.kazari-block .kz-output-pre {
    display: block;
    margin: 0;
    padding: 0 var(--kz-code-padding-inline, 1rem) var(--kz-code-padding-block, 0.75rem);
    background: none;
    border: none;
    overflow-x: auto;
    white-space: pre;
    font-family: var(--kz-font-family);
    font-size: var(--kz-font-size);
    font-weight: var(--kz-font-weight);
    line-height: var(--kz-line-height);
    color: inherit;
    box-sizing: border-box;
}
}

@layer kazari {
:root {
  --kz-radius: 0.5rem;
  --kz-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --kz-border: 1px solid transparent;
  --kz-transition: 150ms ease;
  --kz-font-family: 'JetBrains Mono Variable', monospace;
  --kz-font-size: 0.875rem;
  --kz-font-weight: 500;
  --kz-line-height: 1.6;
  --kz-ui-font-family: system-ui, sans-serif;
  --kz-ui-font-size: 0.9rem;
  --kz-ui-font-weight: 400;
  --kz-ui-line-height: 1.65;
  --kz-code-padding-block: 1rem;
  --kz-code-padding-inline: 1.35rem;
  --kz-title-font-size: 0.8rem;
  --kz-title-padding: 0.5rem 1rem;
  --kz-ln-padding-inline: 2ch;
  --kz-gutter-border-width: 1px;
  --kz-mark-bg: rgba(255,200,0,0.12);
  --kz-mark-border: rgba(255,200,0,0.5);
  --kz-mark-border-width: 3px;
  --kz-ins-bg: rgba(46,160,67,0.12);
  --kz-ins-border: rgba(46,160,67,0.5);
  --kz-ins-indicator: '+';
  --kz-del-bg: rgba(248,81,73,0.12);
  --kz-del-border: rgba(248,81,73,0.5);
  --kz-del-indicator: '-';
  --kz-mark-accent-margin: 0rem;
  --kz-diff-indicator-margin: 0.3rem;
  --kz-ins-indicator-color: rgba(46,160,67,0.8);
  --kz-del-indicator-color: rgba(248,81,73,0.8);
  --kz-label-mark-bg: rgba(255,200,0,0.35);
  --kz-label-ins-bg: rgba(46,160,67,0.35);
  --kz-label-del-bg: rgba(248,81,73,0.35);
  --kz-label-fg: #ffffff;
  --kz-label-padding: 0.1rem 0.3rem;
  --kz-label-font-size: 0.75rem;
  --kz-label-radius: 0.2rem;
  --kz-inline-mark-bg: rgba(255,200,0,0.2);
  --kz-inline-mark-border: rgba(255,200,0,0.5);
  --kz-inline-mark-radius: 0.2rem;
  --kz-inline-mark-padding: 0.15rem;
  --kz-inline-mark-border-width: 1.5px;
  --kz-inline-ins-bg: rgba(46,160,67,0.2);
  --kz-inline-ins-border: rgba(46,160,67,0.5);
  --kz-inline-del-bg: rgba(248,81,73,0.2);
  --kz-inline-del-border: rgba(248,81,73,0.5);
  --kz-focus-dimmed-opacity: 0.35;
  --kz-focus-ring: rgb(59,130,246);
  --kz-toolbar-padding: 0.25rem 1rem;
  --kz-terminal-header-padding: 0.5rem 1rem;
  --kz-lang-font-size: 0.8rem;
  --kz-lang-font-weight: 500;
  --kz-separator-color: rgba(161, 161, 170, 0.3);
  --kz-copy-radius: 0.375rem;
  --kz-copy-success-bg: rgba(34, 197, 94, 0.9);
  --kz-copy-success-fg: #ffffff;
  --kz-copy-success-border: rgba(34, 197, 94, 0.8);
  --kz-tooltip-bg: rgba(30,30,30,0.92);
  --kz-tooltip-fg: #ffffff;
  --kz-tooltip-font-size: 0.75rem;
  --kz-tooltip-padding: 0.35rem 0.75rem;
  --kz-tooltip-radius: 6px;
  --kz-tooltip-offset: 6px;
  --kz-tooltip-shadow: 0 2px 6px rgba(0,0,0,0.25);
  --kz-tooltip-arrow-size: 5px;
  --kz-terminal-bg: var(--kz-editor-bg);
  --kz-terminal-titlebar-bg: var(--kz-toolbar-bg);
  --kz-terminal-dot-red: #ff5f57;
  --kz-terminal-dot-yellow: #febc2e;
  --kz-terminal-dot-green: #28c840;
  --kz-ln-width: 2ch;
  --kz-ln-opacity: 1;
  --kz-ln-highlight-opacity: 0.8;
  --kz-ansi-black: #000000;
  --kz-ansi-red: #cc0000;
  --kz-ansi-green: #4e9a06;
  --kz-ansi-yellow: #c4a000;
  --kz-ansi-blue: #3465a4;
  --kz-ansi-magenta: #75507b;
  --kz-ansi-cyan: #06989a;
  --kz-ansi-white: #d3d7cf;
  --kz-ansi-bright-black: #555753;
  --kz-ansi-bright-red: #ef2929;
  --kz-ansi-bright-green: #8ae234;
  --kz-ansi-bright-yellow: #fce94f;
  --kz-ansi-bright-blue: #729fcf;
  --kz-ansi-bright-magenta: #ad7fa8;
  --kz-ansi-bright-cyan: #34e2e2;
  --kz-ansi-bright-white: #eeeeec;
  --kz-collapse-btn-bg: rgba(255,255,255,0.08);
  --kz-collapse-btn-fg: rgba(255,255,255,0.7);
  --kz-collapse-btn-hover-bg: rgba(255,255,255,0.15);
  --kz-collapse-gradient-start: transparent;
  --kz-collapse-gradient-end: var(--kz-editor-bg);
  --kz-collapse-transition: 300ms ease;
  --kz-collapse-closed-bg: rgb(84 174 255 / 20%);
  --kz-collapse-closed-border: rgb(84 174 255 / 50%);
  --kz-collapse-closed-border-width: 0;
  --kz-collapse-closed-padding: 4px;
  --kz-collapse-open-bg: transparent;
  --kz-collapse-open-bg-collapsible: rgb(84 174 255 / 10%);
  --kz-collapse-open-border: transparent;
  --kz-collapse-open-border-width: 1px;
  --kz-collapse-closed-fg: currentColor;
  --kz-collapse-closed-font-family: inherit;
  --kz-collapse-closed-font-size: inherit;
  --kz-collapse-closed-line-height: inherit;
  --kz-collapse-expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-collapse-collapse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-file-icon-size: 1rem;
  --kz-file-icon-margin: 0;
  --kz-file-icon-opacity: 0.8;
  --kz-scrollbar-width: 8px;
  --kz-scrollbar-height: 8px;
  --kz-scrollbar-track: transparent;
  --kz-fs-font-scale: 1;
  --kz-terminal-dots-opacity: 0.15;
  --kz-terminal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='30' cy='8' r='8'/%3E%3Ccircle cx='52' cy='8' r='8'/%3E%3C/svg%3E");
  --kz-editor-bg: #f7f7f7;
  --kz-ln-fg: #7f7f7f;
  --kz-ln-highlight-fg: #24292f;
  --kz-gutter-border-color: rgba(0,0,0,0.1);
  --kz-toolbar-bg: rgba(229, 231, 235, 0.15);
  --kz-toolbar-border: rgba(209, 213, 219, 0.5);
  --kz-lang-fg: #4b5563;
  --kz-copy-fg: #4b5563;
  --kz-copy-fg-hover: #111827;
  --kz-copy-bg-hover: rgba(156, 163, 175, 0.2);
  --kz-collapse-btn-fg: #4b5563;
  --kz-collapse-btn-bg: rgba(0, 0, 0, 0.04);
  --kz-collapse-btn-hover-bg: rgba(0, 0, 0, 0.08);
  --kz-collapse-btn-border: rgba(0, 0, 0, 0.15);
  --kz-collapse-btn-border-hover: rgba(0, 0, 0, 0.3);
  --kz-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --kz-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
  --kz-terminal-dots-fg: #24292f;
}
:root.dark {
  --kz-editor-bg: #0d1117;
  --kz-editor-fg: #e6edf3;
  --kz-ln-fg: #6e7681;
  --kz-ln-highlight-fg: #e6edf3;
  --kz-gutter-border-color: rgba(255,255,255,0.1);
  --kz-toolbar-bg: rgba(39, 39, 42, 0.6);
  --kz-toolbar-border: rgba(63, 63, 70, 0.4);
  --kz-lang-fg: #a1a1aa;
  --kz-copy-fg: #d4d4d8;
  --kz-copy-fg-hover: #ffffff;
  --kz-copy-bg-hover: rgba(63, 63, 70, 0.8);
  --kz-collapse-btn-fg: #d4d4d8;
  --kz-collapse-btn-bg: rgba(255, 255, 255, 0.1);
  --kz-collapse-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --kz-collapse-btn-border: rgba(255, 255, 255, 0.2);
  --kz-collapse-btn-border-hover: rgba(255, 255, 255, 0.35);
  --kz-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --kz-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
  --kz-terminal-dots-fg: #e6edf3;
}
.kazari-block .kz-line span[style^="--"] { color: var(--sl, inherit); background-color: var(--slbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovl-editor-bg); --kz-editor-fg: var(--kz-ovl-editor-fg); --kz-ln-fg: var(--kz-ovl-ln-fg); --kz-ln-highlight-fg: var(--kz-ovl-ln-highlight-fg); --kz-gutter-border-color: var(--kz-ovl-gutter-border-color); --kz-toolbar-bg: var(--kz-ovl-toolbar-bg); --kz-toolbar-border: var(--kz-ovl-toolbar-border); --kz-lang-fg: var(--kz-ovl-lang-fg); --kz-copy-fg: var(--kz-ovl-copy-fg); --kz-copy-fg-hover: var(--kz-ovl-copy-fg-hover); --kz-copy-bg-hover: var(--kz-ovl-copy-bg-hover); --kz-collapse-btn-fg: var(--kz-ovl-collapse-btn-fg); --kz-collapse-btn-bg: var(--kz-ovl-collapse-btn-bg); --kz-collapse-btn-hover-bg: var(--kz-ovl-collapse-btn-hover-bg); --kz-collapse-btn-border: var(--kz-ovl-collapse-btn-border); --kz-collapse-btn-border-hover: var(--kz-ovl-collapse-btn-border-hover); --kz-scrollbar-thumb: var(--kz-ovl-scrollbar-thumb); --kz-scrollbar-thumb-hover: var(--kz-ovl-scrollbar-thumb-hover); --kz-terminal-dots-fg: var(--kz-ovl-terminal-dots-fg); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.dark .kazari-block .kz-line span[style^="--"] { color: var(--sd, inherit); background-color: var(--sdbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.dark .kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovd-editor-bg, var(--kz-ovl-editor-bg)); --kz-editor-fg: var(--kz-ovd-editor-fg, var(--kz-ovl-editor-fg)); --kz-ln-fg: var(--kz-ovd-ln-fg, var(--kz-ovl-ln-fg)); --kz-ln-highlight-fg: var(--kz-ovd-ln-highlight-fg, var(--kz-ovl-ln-highlight-fg)); --kz-gutter-border-color: var(--kz-ovd-gutter-border-color, var(--kz-ovl-gutter-border-color)); --kz-toolbar-bg: var(--kz-ovd-toolbar-bg, var(--kz-ovl-toolbar-bg)); --kz-toolbar-border: var(--kz-ovd-toolbar-border, var(--kz-ovl-toolbar-border)); --kz-lang-fg: var(--kz-ovd-lang-fg, var(--kz-ovl-lang-fg)); --kz-copy-fg: var(--kz-ovd-copy-fg, var(--kz-ovl-copy-fg)); --kz-copy-fg-hover: var(--kz-ovd-copy-fg-hover, var(--kz-ovl-copy-fg-hover)); --kz-copy-bg-hover: var(--kz-ovd-copy-bg-hover, var(--kz-ovl-copy-bg-hover)); --kz-collapse-btn-fg: var(--kz-ovd-collapse-btn-fg, var(--kz-ovl-collapse-btn-fg)); --kz-collapse-btn-bg: var(--kz-ovd-collapse-btn-bg, var(--kz-ovl-collapse-btn-bg)); --kz-collapse-btn-hover-bg: var(--kz-ovd-collapse-btn-hover-bg, var(--kz-ovl-collapse-btn-hover-bg)); --kz-collapse-btn-border: var(--kz-ovd-collapse-btn-border, var(--kz-ovl-collapse-btn-border)); --kz-collapse-btn-border-hover: var(--kz-ovd-collapse-btn-border-hover, var(--kz-ovl-collapse-btn-border-hover)); --kz-scrollbar-thumb: var(--kz-ovd-scrollbar-thumb, var(--kz-ovl-scrollbar-thumb)); --kz-scrollbar-thumb-hover: var(--kz-ovd-scrollbar-thumb-hover, var(--kz-ovl-scrollbar-thumb-hover)); --kz-terminal-dots-fg: var(--kz-ovd-terminal-dots-fg, var(--kz-ovl-terminal-dots-fg)); }
}

@layer kazari {
.kazari-customizer {
  --kz-radius: 0.5rem;
  --kz-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --kz-border: 1px solid transparent;
  --kz-transition: 150ms ease;
  --kz-font-family: 'JetBrains Mono Variable', monospace;
  --kz-font-size: 0.875rem;
  --kz-font-weight: 500;
  --kz-line-height: 1.6;
  --kz-ui-font-family: system-ui, sans-serif;
  --kz-ui-font-size: 0.9rem;
  --kz-ui-font-weight: 400;
  --kz-ui-line-height: 1.65;
  --kz-code-padding-block: 1rem;
  --kz-code-padding-inline: 1.35rem;
  --kz-title-font-size: 0.8rem;
  --kz-title-padding: 0.5rem 1rem;
  --kz-ln-padding-inline: 2ch;
  --kz-gutter-border-width: 1px;
  --kz-mark-bg: rgba(255,200,0,0.12);
  --kz-mark-border: rgba(255,200,0,0.5);
  --kz-mark-border-width: 3px;
  --kz-ins-bg: rgba(46,160,67,0.12);
  --kz-ins-border: rgba(46,160,67,0.5);
  --kz-ins-indicator: '+';
  --kz-del-bg: rgba(248,81,73,0.12);
  --kz-del-border: rgba(248,81,73,0.5);
  --kz-del-indicator: '-';
  --kz-mark-accent-margin: 0rem;
  --kz-diff-indicator-margin: 0.3rem;
  --kz-ins-indicator-color: rgba(46,160,67,0.8);
  --kz-del-indicator-color: rgba(248,81,73,0.8);
  --kz-label-mark-bg: rgba(255,200,0,0.35);
  --kz-label-ins-bg: rgba(46,160,67,0.35);
  --kz-label-del-bg: rgba(248,81,73,0.35);
  --kz-label-fg: #ffffff;
  --kz-label-padding: 0.1rem 0.3rem;
  --kz-label-font-size: 0.75rem;
  --kz-label-radius: 0.2rem;
  --kz-inline-mark-bg: rgba(255,200,0,0.2);
  --kz-inline-mark-border: rgba(255,200,0,0.5);
  --kz-inline-mark-radius: 0.2rem;
  --kz-inline-mark-padding: 0.15rem;
  --kz-inline-mark-border-width: 1.5px;
  --kz-inline-ins-bg: rgba(46,160,67,0.2);
  --kz-inline-ins-border: rgba(46,160,67,0.5);
  --kz-inline-del-bg: rgba(248,81,73,0.2);
  --kz-inline-del-border: rgba(248,81,73,0.5);
  --kz-focus-dimmed-opacity: 0.35;
  --kz-focus-ring: rgb(59,130,246);
  --kz-toolbar-padding: 0.25rem 1rem;
  --kz-terminal-header-padding: 0.5rem 1rem;
  --kz-lang-font-size: 0.8rem;
  --kz-lang-font-weight: 500;
  --kz-separator-color: rgba(161, 161, 170, 0.3);
  --kz-copy-radius: 0.375rem;
  --kz-copy-success-bg: rgba(34, 197, 94, 0.9);
  --kz-copy-success-fg: #ffffff;
  --kz-copy-success-border: rgba(34, 197, 94, 0.8);
  --kz-tooltip-bg: rgba(30,30,30,0.92);
  --kz-tooltip-fg: #ffffff;
  --kz-tooltip-font-size: 0.75rem;
  --kz-tooltip-padding: 0.35rem 0.75rem;
  --kz-tooltip-radius: 6px;
  --kz-tooltip-offset: 6px;
  --kz-tooltip-shadow: 0 2px 6px rgba(0,0,0,0.25);
  --kz-tooltip-arrow-size: 5px;
  --kz-terminal-bg: var(--kz-editor-bg);
  --kz-terminal-titlebar-bg: var(--kz-toolbar-bg);
  --kz-terminal-dot-red: #ff5f57;
  --kz-terminal-dot-yellow: #febc2e;
  --kz-terminal-dot-green: #28c840;
  --kz-ln-width: 2ch;
  --kz-ln-opacity: 1;
  --kz-ln-highlight-opacity: 0.8;
  --kz-ansi-black: #000000;
  --kz-ansi-red: #cc0000;
  --kz-ansi-green: #4e9a06;
  --kz-ansi-yellow: #c4a000;
  --kz-ansi-blue: #3465a4;
  --kz-ansi-magenta: #75507b;
  --kz-ansi-cyan: #06989a;
  --kz-ansi-white: #d3d7cf;
  --kz-ansi-bright-black: #555753;
  --kz-ansi-bright-red: #ef2929;
  --kz-ansi-bright-green: #8ae234;
  --kz-ansi-bright-yellow: #fce94f;
  --kz-ansi-bright-blue: #729fcf;
  --kz-ansi-bright-magenta: #ad7fa8;
  --kz-ansi-bright-cyan: #34e2e2;
  --kz-ansi-bright-white: #eeeeec;
  --kz-collapse-btn-bg: rgba(255,255,255,0.08);
  --kz-collapse-btn-fg: rgba(255,255,255,0.7);
  --kz-collapse-btn-hover-bg: rgba(255,255,255,0.15);
  --kz-collapse-gradient-start: transparent;
  --kz-collapse-gradient-end: var(--kz-editor-bg);
  --kz-collapse-transition: 300ms ease;
  --kz-collapse-closed-bg: rgb(84 174 255 / 20%);
  --kz-collapse-closed-border: rgb(84 174 255 / 50%);
  --kz-collapse-closed-border-width: 0;
  --kz-collapse-closed-padding: 4px;
  --kz-collapse-open-bg: transparent;
  --kz-collapse-open-bg-collapsible: rgb(84 174 255 / 10%);
  --kz-collapse-open-border: transparent;
  --kz-collapse-open-border-width: 1px;
  --kz-collapse-closed-fg: currentColor;
  --kz-collapse-closed-font-family: inherit;
  --kz-collapse-closed-font-size: inherit;
  --kz-collapse-closed-line-height: inherit;
  --kz-collapse-expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-collapse-collapse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-file-icon-size: 1rem;
  --kz-file-icon-margin: 0;
  --kz-file-icon-opacity: 0.8;
  --kz-scrollbar-width: 8px;
  --kz-scrollbar-height: 8px;
  --kz-scrollbar-track: transparent;
  --kz-fs-font-scale: 1;
  --kz-editor-bg: #f7f7f7;
  --kz-ln-fg: #7f7f7f;
  --kz-ln-highlight-fg: #24292f;
  --kz-gutter-border-color: rgba(0,0,0,0.1);
  --kz-toolbar-bg: rgba(229, 231, 235, 0.15);
  --kz-toolbar-border: rgba(209, 213, 219, 0.5);
  --kz-lang-fg: #4b5563;
  --kz-copy-fg: #4b5563;
  --kz-copy-fg-hover: #111827;
  --kz-copy-bg-hover: rgba(156, 163, 175, 0.2);
  --kz-collapse-btn-fg: #4b5563;
  --kz-collapse-btn-bg: rgba(0, 0, 0, 0.04);
  --kz-collapse-btn-hover-bg: rgba(0, 0, 0, 0.08);
  --kz-collapse-btn-border: rgba(0, 0, 0, 0.15);
  --kz-collapse-btn-border-hover: rgba(0, 0, 0, 0.3);
  --kz-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --kz-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
}
.kazari-customizer.dark {
  --kz-editor-bg: #0d1117;
  --kz-editor-fg: #e6edf3;
  --kz-ln-fg: #6e7681;
  --kz-ln-highlight-fg: #e6edf3;
  --kz-gutter-border-color: rgba(255,255,255,0.1);
  --kz-toolbar-bg: rgba(39, 39, 42, 0.6);
  --kz-toolbar-border: rgba(63, 63, 70, 0.4);
  --kz-lang-fg: #a1a1aa;
  --kz-copy-fg: #d4d4d8;
  --kz-copy-fg-hover: #ffffff;
  --kz-copy-bg-hover: rgba(63, 63, 70, 0.8);
  --kz-collapse-btn-fg: #d4d4d8;
  --kz-collapse-btn-bg: rgba(255, 255, 255, 0.1);
  --kz-collapse-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --kz-collapse-btn-border: rgba(255, 255, 255, 0.2);
  --kz-collapse-btn-border-hover: rgba(255, 255, 255, 0.35);
  --kz-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --kz-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}
.kazari-block .kz-line span[style^="--"] { color: var(--sl, inherit); background-color: var(--slbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovl-editor-bg); --kz-editor-fg: var(--kz-ovl-editor-fg); --kz-ln-fg: var(--kz-ovl-ln-fg); --kz-ln-highlight-fg: var(--kz-ovl-ln-highlight-fg); --kz-gutter-border-color: var(--kz-ovl-gutter-border-color); --kz-toolbar-bg: var(--kz-ovl-toolbar-bg); --kz-toolbar-border: var(--kz-ovl-toolbar-border); --kz-lang-fg: var(--kz-ovl-lang-fg); --kz-copy-fg: var(--kz-ovl-copy-fg); --kz-copy-fg-hover: var(--kz-ovl-copy-fg-hover); --kz-copy-bg-hover: var(--kz-ovl-copy-bg-hover); --kz-collapse-btn-fg: var(--kz-ovl-collapse-btn-fg); --kz-collapse-btn-bg: var(--kz-ovl-collapse-btn-bg); --kz-collapse-btn-hover-bg: var(--kz-ovl-collapse-btn-hover-bg); --kz-collapse-btn-border: var(--kz-ovl-collapse-btn-border); --kz-collapse-btn-border-hover: var(--kz-ovl-collapse-btn-border-hover); --kz-scrollbar-thumb: var(--kz-ovl-scrollbar-thumb); --kz-scrollbar-thumb-hover: var(--kz-ovl-scrollbar-thumb-hover); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.dark .kazari-block .kz-line span[style^="--"] { color: var(--sd, inherit); background-color: var(--sdbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.dark .kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovd-editor-bg, var(--kz-ovl-editor-bg)); --kz-editor-fg: var(--kz-ovd-editor-fg, var(--kz-ovl-editor-fg)); --kz-ln-fg: var(--kz-ovd-ln-fg, var(--kz-ovl-ln-fg)); --kz-ln-highlight-fg: var(--kz-ovd-ln-highlight-fg, var(--kz-ovl-ln-highlight-fg)); --kz-gutter-border-color: var(--kz-ovd-gutter-border-color, var(--kz-ovl-gutter-border-color)); --kz-toolbar-bg: var(--kz-ovd-toolbar-bg, var(--kz-ovl-toolbar-bg)); --kz-toolbar-border: var(--kz-ovd-toolbar-border, var(--kz-ovl-toolbar-border)); --kz-lang-fg: var(--kz-ovd-lang-fg, var(--kz-ovl-lang-fg)); --kz-copy-fg: var(--kz-ovd-copy-fg, var(--kz-ovl-copy-fg)); --kz-copy-fg-hover: var(--kz-ovd-copy-fg-hover, var(--kz-ovl-copy-fg-hover)); --kz-copy-bg-hover: var(--kz-ovd-copy-bg-hover, var(--kz-ovl-copy-bg-hover)); --kz-collapse-btn-fg: var(--kz-ovd-collapse-btn-fg, var(--kz-ovl-collapse-btn-fg)); --kz-collapse-btn-bg: var(--kz-ovd-collapse-btn-bg, var(--kz-ovl-collapse-btn-bg)); --kz-collapse-btn-hover-bg: var(--kz-ovd-collapse-btn-hover-bg, var(--kz-ovl-collapse-btn-hover-bg)); --kz-collapse-btn-border: var(--kz-ovd-collapse-btn-border, var(--kz-ovl-collapse-btn-border)); --kz-collapse-btn-border-hover: var(--kz-ovd-collapse-btn-border-hover, var(--kz-ovl-collapse-btn-border-hover)); --kz-scrollbar-thumb: var(--kz-ovd-scrollbar-thumb, var(--kz-ovl-scrollbar-thumb)); --kz-scrollbar-thumb-hover: var(--kz-ovd-scrollbar-thumb-hover, var(--kz-ovl-scrollbar-thumb-hover)); }
}

@layer kazari {
.kazari-tinted {
  --kz-radius: 0.5rem;
  --kz-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --kz-border: 1px solid transparent;
  --kz-transition: 150ms ease;
  --kz-font-family: 'JetBrains Mono Variable', monospace;
  --kz-font-size: 0.875rem;
  --kz-font-weight: 500;
  --kz-line-height: 1.6;
  --kz-ui-font-family: system-ui, sans-serif;
  --kz-ui-font-size: 0.9rem;
  --kz-ui-font-weight: 400;
  --kz-ui-line-height: 1.65;
  --kz-code-padding-block: 1rem;
  --kz-code-padding-inline: 1.35rem;
  --kz-title-font-size: 0.8rem;
  --kz-title-padding: 0.5rem 1rem;
  --kz-ln-padding-inline: 2ch;
  --kz-gutter-border-width: 1px;
  --kz-mark-bg: rgba(255,200,0,0.12);
  --kz-mark-border: rgba(255,200,0,0.5);
  --kz-mark-border-width: 3px;
  --kz-ins-bg: rgba(46,160,67,0.12);
  --kz-ins-border: rgba(46,160,67,0.5);
  --kz-ins-indicator: '+';
  --kz-del-bg: rgba(248,81,73,0.12);
  --kz-del-border: rgba(248,81,73,0.5);
  --kz-del-indicator: '-';
  --kz-mark-accent-margin: 0rem;
  --kz-diff-indicator-margin: 0.3rem;
  --kz-ins-indicator-color: rgba(46,160,67,0.8);
  --kz-del-indicator-color: rgba(248,81,73,0.8);
  --kz-label-mark-bg: rgba(255,200,0,0.35);
  --kz-label-ins-bg: rgba(46,160,67,0.35);
  --kz-label-del-bg: rgba(248,81,73,0.35);
  --kz-label-fg: #ffffff;
  --kz-label-padding: 0.1rem 0.3rem;
  --kz-label-font-size: 0.75rem;
  --kz-label-radius: 0.2rem;
  --kz-inline-mark-bg: rgba(255,200,0,0.2);
  --kz-inline-mark-border: rgba(255,200,0,0.5);
  --kz-inline-mark-radius: 0.2rem;
  --kz-inline-mark-padding: 0.15rem;
  --kz-inline-mark-border-width: 1.5px;
  --kz-inline-ins-bg: rgba(46,160,67,0.2);
  --kz-inline-ins-border: rgba(46,160,67,0.5);
  --kz-inline-del-bg: rgba(248,81,73,0.2);
  --kz-inline-del-border: rgba(248,81,73,0.5);
  --kz-focus-dimmed-opacity: 0.35;
  --kz-focus-ring: rgb(59,130,246);
  --kz-toolbar-padding: 0.25rem 1rem;
  --kz-terminal-header-padding: 0.5rem 1rem;
  --kz-lang-font-size: 0.8rem;
  --kz-lang-font-weight: 500;
  --kz-separator-color: rgba(161, 161, 170, 0.3);
  --kz-copy-radius: 0.375rem;
  --kz-copy-success-bg: rgba(34, 197, 94, 0.9);
  --kz-copy-success-fg: #ffffff;
  --kz-copy-success-border: rgba(34, 197, 94, 0.8);
  --kz-tooltip-bg: rgba(30,30,30,0.92);
  --kz-tooltip-fg: #ffffff;
  --kz-tooltip-font-size: 0.75rem;
  --kz-tooltip-padding: 0.35rem 0.75rem;
  --kz-tooltip-radius: 6px;
  --kz-tooltip-offset: 6px;
  --kz-tooltip-shadow: 0 2px 6px rgba(0,0,0,0.25);
  --kz-tooltip-arrow-size: 5px;
  --kz-terminal-bg: var(--kz-editor-bg);
  --kz-terminal-titlebar-bg: var(--kz-toolbar-bg);
  --kz-terminal-dot-red: #ff5f57;
  --kz-terminal-dot-yellow: #febc2e;
  --kz-terminal-dot-green: #28c840;
  --kz-ln-width: 2ch;
  --kz-ln-opacity: 1;
  --kz-ln-highlight-opacity: 0.8;
  --kz-ansi-black: #000000;
  --kz-ansi-red: #cc0000;
  --kz-ansi-green: #4e9a06;
  --kz-ansi-yellow: #c4a000;
  --kz-ansi-blue: #3465a4;
  --kz-ansi-magenta: #75507b;
  --kz-ansi-cyan: #06989a;
  --kz-ansi-white: #d3d7cf;
  --kz-ansi-bright-black: #555753;
  --kz-ansi-bright-red: #ef2929;
  --kz-ansi-bright-green: #8ae234;
  --kz-ansi-bright-yellow: #fce94f;
  --kz-ansi-bright-blue: #729fcf;
  --kz-ansi-bright-magenta: #ad7fa8;
  --kz-ansi-bright-cyan: #34e2e2;
  --kz-ansi-bright-white: #eeeeec;
  --kz-collapse-btn-bg: rgba(255,255,255,0.08);
  --kz-collapse-btn-fg: rgba(255,255,255,0.7);
  --kz-collapse-btn-hover-bg: rgba(255,255,255,0.15);
  --kz-collapse-gradient-start: transparent;
  --kz-collapse-gradient-end: var(--kz-editor-bg);
  --kz-collapse-transition: 300ms ease;
  --kz-collapse-closed-bg: rgb(84 174 255 / 20%);
  --kz-collapse-closed-border: rgb(84 174 255 / 50%);
  --kz-collapse-closed-border-width: 0;
  --kz-collapse-closed-padding: 4px;
  --kz-collapse-open-bg: transparent;
  --kz-collapse-open-bg-collapsible: rgb(84 174 255 / 10%);
  --kz-collapse-open-border: transparent;
  --kz-collapse-open-border-width: 1px;
  --kz-collapse-closed-fg: currentColor;
  --kz-collapse-closed-font-family: inherit;
  --kz-collapse-closed-font-size: inherit;
  --kz-collapse-closed-line-height: inherit;
  --kz-collapse-expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-collapse-collapse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-file-icon-size: 1rem;
  --kz-file-icon-margin: 0;
  --kz-file-icon-opacity: 0.8;
  --kz-scrollbar-width: 8px;
  --kz-scrollbar-height: 8px;
  --kz-scrollbar-track: transparent;
  --kz-fs-font-scale: 1;
  --kz-editor-bg: #defffe;
  --kz-ln-fg: #7f7f7f;
  --kz-ln-highlight-fg: #24292f;
  --kz-gutter-border-color: rgba(0,0,0,0.1);
  --kz-toolbar-bg: rgba(229, 231, 235, 0.15);
  --kz-toolbar-border: rgba(209, 213, 219, 0.5);
  --kz-lang-fg: #4b5563;
  --kz-copy-fg: #4b5563;
  --kz-copy-fg-hover: #111827;
  --kz-copy-bg-hover: rgba(156, 163, 175, 0.2);
  --kz-collapse-btn-fg: #4b5563;
  --kz-collapse-btn-bg: rgba(0, 0, 0, 0.04);
  --kz-collapse-btn-hover-bg: rgba(0, 0, 0, 0.08);
  --kz-collapse-btn-border: rgba(0, 0, 0, 0.15);
  --kz-collapse-btn-border-hover: rgba(0, 0, 0, 0.3);
  --kz-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --kz-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
}
.kazari-tinted.dark {
  --kz-editor-bg: #001515;
  --kz-editor-fg: #e6edf3;
  --kz-ln-fg: #6e7681;
  --kz-ln-highlight-fg: #e6edf3;
  --kz-gutter-border-color: rgba(255,255,255,0.1);
  --kz-toolbar-bg: rgba(39, 39, 42, 0.6);
  --kz-toolbar-border: rgba(63, 63, 70, 0.4);
  --kz-lang-fg: #a1a1aa;
  --kz-copy-fg: #d4d4d8;
  --kz-copy-fg-hover: #ffffff;
  --kz-copy-bg-hover: rgba(63, 63, 70, 0.8);
  --kz-collapse-btn-fg: #d4d4d8;
  --kz-collapse-btn-bg: rgba(255, 255, 255, 0.1);
  --kz-collapse-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --kz-collapse-btn-border: rgba(255, 255, 255, 0.2);
  --kz-collapse-btn-border-hover: rgba(255, 255, 255, 0.35);
  --kz-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --kz-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}
.kazari-block .kz-line span[style^="--"] { color: var(--sl, inherit); background-color: var(--slbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovl-editor-bg); --kz-editor-fg: var(--kz-ovl-editor-fg); --kz-ln-fg: var(--kz-ovl-ln-fg); --kz-ln-highlight-fg: var(--kz-ovl-ln-highlight-fg); --kz-gutter-border-color: var(--kz-ovl-gutter-border-color); --kz-toolbar-bg: var(--kz-ovl-toolbar-bg); --kz-toolbar-border: var(--kz-ovl-toolbar-border); --kz-lang-fg: var(--kz-ovl-lang-fg); --kz-copy-fg: var(--kz-ovl-copy-fg); --kz-copy-fg-hover: var(--kz-ovl-copy-fg-hover); --kz-copy-bg-hover: var(--kz-ovl-copy-bg-hover); --kz-collapse-btn-fg: var(--kz-ovl-collapse-btn-fg); --kz-collapse-btn-bg: var(--kz-ovl-collapse-btn-bg); --kz-collapse-btn-hover-bg: var(--kz-ovl-collapse-btn-hover-bg); --kz-collapse-btn-border: var(--kz-ovl-collapse-btn-border); --kz-collapse-btn-border-hover: var(--kz-ovl-collapse-btn-border-hover); --kz-scrollbar-thumb: var(--kz-ovl-scrollbar-thumb); --kz-scrollbar-thumb-hover: var(--kz-ovl-scrollbar-thumb-hover); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.dark .kazari-block .kz-line span[style^="--"] { color: var(--sd, inherit); background-color: var(--sdbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.dark .kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovd-editor-bg, var(--kz-ovl-editor-bg)); --kz-editor-fg: var(--kz-ovd-editor-fg, var(--kz-ovl-editor-fg)); --kz-ln-fg: var(--kz-ovd-ln-fg, var(--kz-ovl-ln-fg)); --kz-ln-highlight-fg: var(--kz-ovd-ln-highlight-fg, var(--kz-ovl-ln-highlight-fg)); --kz-gutter-border-color: var(--kz-ovd-gutter-border-color, var(--kz-ovl-gutter-border-color)); --kz-toolbar-bg: var(--kz-ovd-toolbar-bg, var(--kz-ovl-toolbar-bg)); --kz-toolbar-border: var(--kz-ovd-toolbar-border, var(--kz-ovl-toolbar-border)); --kz-lang-fg: var(--kz-ovd-lang-fg, var(--kz-ovl-lang-fg)); --kz-copy-fg: var(--kz-ovd-copy-fg, var(--kz-ovl-copy-fg)); --kz-copy-fg-hover: var(--kz-ovd-copy-fg-hover, var(--kz-ovl-copy-fg-hover)); --kz-copy-bg-hover: var(--kz-ovd-copy-bg-hover, var(--kz-ovl-copy-bg-hover)); --kz-collapse-btn-fg: var(--kz-ovd-collapse-btn-fg, var(--kz-ovl-collapse-btn-fg)); --kz-collapse-btn-bg: var(--kz-ovd-collapse-btn-bg, var(--kz-ovl-collapse-btn-bg)); --kz-collapse-btn-hover-bg: var(--kz-ovd-collapse-btn-hover-bg, var(--kz-ovl-collapse-btn-hover-bg)); --kz-collapse-btn-border: var(--kz-ovd-collapse-btn-border, var(--kz-ovl-collapse-btn-border)); --kz-collapse-btn-border-hover: var(--kz-ovd-collapse-btn-border-hover, var(--kz-ovl-collapse-btn-border-hover)); --kz-scrollbar-thumb: var(--kz-ovd-scrollbar-thumb, var(--kz-ovl-scrollbar-thumb)); --kz-scrollbar-thumb-hover: var(--kz-ovd-scrollbar-thumb-hover, var(--kz-ovl-scrollbar-thumb-hover)); }
}

@layer kazari {
.kazari-scoped {
  --kz-radius: 0.5rem;
  --kz-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --kz-border: 1px solid transparent;
  --kz-transition: 150ms ease;
  --kz-font-family: 'JetBrains Mono Variable', monospace;
  --kz-font-size: 0.875rem;
  --kz-font-weight: 500;
  --kz-line-height: 1.6;
  --kz-ui-font-family: system-ui, sans-serif;
  --kz-ui-font-size: 0.9rem;
  --kz-ui-font-weight: 400;
  --kz-ui-line-height: 1.65;
  --kz-code-padding-block: 1rem;
  --kz-code-padding-inline: 1.35rem;
  --kz-title-font-size: 0.8rem;
  --kz-title-padding: 0.5rem 1rem;
  --kz-ln-padding-inline: 2ch;
  --kz-gutter-border-width: 1px;
  --kz-mark-bg: rgba(255,200,0,0.12);
  --kz-mark-border: rgba(255,200,0,0.5);
  --kz-mark-border-width: 3px;
  --kz-ins-bg: rgba(46,160,67,0.12);
  --kz-ins-border: rgba(46,160,67,0.5);
  --kz-ins-indicator: '+';
  --kz-del-bg: rgba(248,81,73,0.12);
  --kz-del-border: rgba(248,81,73,0.5);
  --kz-del-indicator: '-';
  --kz-mark-accent-margin: 0rem;
  --kz-diff-indicator-margin: 0.3rem;
  --kz-ins-indicator-color: rgba(46,160,67,0.8);
  --kz-del-indicator-color: rgba(248,81,73,0.8);
  --kz-label-mark-bg: rgba(255,200,0,0.35);
  --kz-label-ins-bg: rgba(46,160,67,0.35);
  --kz-label-del-bg: rgba(248,81,73,0.35);
  --kz-label-fg: #ffffff;
  --kz-label-padding: 0.1rem 0.3rem;
  --kz-label-font-size: 0.75rem;
  --kz-label-radius: 0.2rem;
  --kz-inline-mark-bg: rgba(255,200,0,0.2);
  --kz-inline-mark-border: rgba(255,200,0,0.5);
  --kz-inline-mark-radius: 0.2rem;
  --kz-inline-mark-padding: 0.15rem;
  --kz-inline-mark-border-width: 1.5px;
  --kz-inline-ins-bg: rgba(46,160,67,0.2);
  --kz-inline-ins-border: rgba(46,160,67,0.5);
  --kz-inline-del-bg: rgba(248,81,73,0.2);
  --kz-inline-del-border: rgba(248,81,73,0.5);
  --kz-focus-dimmed-opacity: 0.35;
  --kz-focus-ring: rgb(59,130,246);
  --kz-toolbar-padding: 0.25rem 1rem;
  --kz-terminal-header-padding: 0.5rem 1rem;
  --kz-lang-font-size: 0.8rem;
  --kz-lang-font-weight: 500;
  --kz-separator-color: rgba(161, 161, 170, 0.3);
  --kz-copy-radius: 0.375rem;
  --kz-copy-success-bg: rgba(34, 197, 94, 0.9);
  --kz-copy-success-fg: #ffffff;
  --kz-copy-success-border: rgba(34, 197, 94, 0.8);
  --kz-tooltip-bg: rgba(30,30,30,0.92);
  --kz-tooltip-fg: #ffffff;
  --kz-tooltip-font-size: 0.75rem;
  --kz-tooltip-padding: 0.35rem 0.75rem;
  --kz-tooltip-radius: 6px;
  --kz-tooltip-offset: 6px;
  --kz-tooltip-shadow: 0 2px 6px rgba(0,0,0,0.25);
  --kz-tooltip-arrow-size: 5px;
  --kz-terminal-bg: var(--kz-editor-bg);
  --kz-terminal-titlebar-bg: var(--kz-toolbar-bg);
  --kz-terminal-dot-red: #ff5f57;
  --kz-terminal-dot-yellow: #febc2e;
  --kz-terminal-dot-green: #28c840;
  --kz-ln-width: 2ch;
  --kz-ln-opacity: 1;
  --kz-ln-highlight-opacity: 0.8;
  --kz-ansi-black: #000000;
  --kz-ansi-red: #cc0000;
  --kz-ansi-green: #4e9a06;
  --kz-ansi-yellow: #c4a000;
  --kz-ansi-blue: #3465a4;
  --kz-ansi-magenta: #75507b;
  --kz-ansi-cyan: #06989a;
  --kz-ansi-white: #d3d7cf;
  --kz-ansi-bright-black: #555753;
  --kz-ansi-bright-red: #ef2929;
  --kz-ansi-bright-green: #8ae234;
  --kz-ansi-bright-yellow: #fce94f;
  --kz-ansi-bright-blue: #729fcf;
  --kz-ansi-bright-magenta: #ad7fa8;
  --kz-ansi-bright-cyan: #34e2e2;
  --kz-ansi-bright-white: #eeeeec;
  --kz-collapse-btn-bg: rgba(255,255,255,0.08);
  --kz-collapse-btn-fg: rgba(255,255,255,0.7);
  --kz-collapse-btn-hover-bg: rgba(255,255,255,0.15);
  --kz-collapse-gradient-start: transparent;
  --kz-collapse-gradient-end: var(--kz-editor-bg);
  --kz-collapse-transition: 300ms ease;
  --kz-collapse-closed-bg: rgb(84 174 255 / 20%);
  --kz-collapse-closed-border: rgb(84 174 255 / 50%);
  --kz-collapse-closed-border-width: 0;
  --kz-collapse-closed-padding: 4px;
  --kz-collapse-open-bg: transparent;
  --kz-collapse-open-bg-collapsible: rgb(84 174 255 / 10%);
  --kz-collapse-open-border: transparent;
  --kz-collapse-open-border-width: 1px;
  --kz-collapse-closed-fg: currentColor;
  --kz-collapse-closed-font-family: inherit;
  --kz-collapse-closed-font-size: inherit;
  --kz-collapse-closed-line-height: inherit;
  --kz-collapse-expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-collapse-collapse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-file-icon-size: 1rem;
  --kz-file-icon-margin: 0;
  --kz-file-icon-opacity: 0.8;
  --kz-scrollbar-width: 8px;
  --kz-scrollbar-height: 8px;
  --kz-scrollbar-track: transparent;
  --kz-fs-font-scale: 1;
  --kz-editor-bg: #f7f7f7;
  --kz-ln-fg: #7f7f7f;
  --kz-ln-highlight-fg: #24292f;
  --kz-gutter-border-color: rgba(0,0,0,0.1);
  --kz-toolbar-bg: rgba(229, 231, 235, 0.15);
  --kz-toolbar-border: rgba(209, 213, 219, 0.5);
  --kz-lang-fg: #4b5563;
  --kz-copy-fg: #4b5563;
  --kz-copy-fg-hover: #111827;
  --kz-copy-bg-hover: rgba(156, 163, 175, 0.2);
  --kz-collapse-btn-fg: #4b5563;
  --kz-collapse-btn-bg: rgba(0, 0, 0, 0.04);
  --kz-collapse-btn-hover-bg: rgba(0, 0, 0, 0.08);
  --kz-collapse-btn-border: rgba(0, 0, 0, 0.15);
  --kz-collapse-btn-border-hover: rgba(0, 0, 0, 0.3);
  --kz-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --kz-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
}
.kazari-scoped.dark {
  --kz-editor-bg: #0d1117;
  --kz-editor-fg: #e6edf3;
  --kz-ln-fg: #6e7681;
  --kz-ln-highlight-fg: #e6edf3;
  --kz-gutter-border-color: rgba(255,255,255,0.1);
  --kz-toolbar-bg: rgba(39, 39, 42, 0.6);
  --kz-toolbar-border: rgba(63, 63, 70, 0.4);
  --kz-lang-fg: #a1a1aa;
  --kz-copy-fg: #d4d4d8;
  --kz-copy-fg-hover: #ffffff;
  --kz-copy-bg-hover: rgba(63, 63, 70, 0.8);
  --kz-collapse-btn-fg: #d4d4d8;
  --kz-collapse-btn-bg: rgba(255, 255, 255, 0.1);
  --kz-collapse-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --kz-collapse-btn-border: rgba(255, 255, 255, 0.2);
  --kz-collapse-btn-border-hover: rgba(255, 255, 255, 0.35);
  --kz-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --kz-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}
.kazari-block .kz-line span[style^="--"] { color: var(--sl, inherit); background-color: var(--slbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovl-editor-bg); --kz-editor-fg: var(--kz-ovl-editor-fg); --kz-ln-fg: var(--kz-ovl-ln-fg); --kz-ln-highlight-fg: var(--kz-ovl-ln-highlight-fg); --kz-gutter-border-color: var(--kz-ovl-gutter-border-color); --kz-toolbar-bg: var(--kz-ovl-toolbar-bg); --kz-toolbar-border: var(--kz-ovl-toolbar-border); --kz-lang-fg: var(--kz-ovl-lang-fg); --kz-copy-fg: var(--kz-ovl-copy-fg); --kz-copy-fg-hover: var(--kz-ovl-copy-fg-hover); --kz-copy-bg-hover: var(--kz-ovl-copy-bg-hover); --kz-collapse-btn-fg: var(--kz-ovl-collapse-btn-fg); --kz-collapse-btn-bg: var(--kz-ovl-collapse-btn-bg); --kz-collapse-btn-hover-bg: var(--kz-ovl-collapse-btn-hover-bg); --kz-collapse-btn-border: var(--kz-ovl-collapse-btn-border); --kz-collapse-btn-border-hover: var(--kz-ovl-collapse-btn-border-hover); --kz-scrollbar-thumb: var(--kz-ovl-scrollbar-thumb); --kz-scrollbar-thumb-hover: var(--kz-ovl-scrollbar-thumb-hover); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.dark .kazari-block .kz-line span[style^="--"] { color: var(--sd, inherit); background-color: var(--sdbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.dark .kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovd-editor-bg, var(--kz-ovl-editor-bg)); --kz-editor-fg: var(--kz-ovd-editor-fg, var(--kz-ovl-editor-fg)); --kz-ln-fg: var(--kz-ovd-ln-fg, var(--kz-ovl-ln-fg)); --kz-ln-highlight-fg: var(--kz-ovd-ln-highlight-fg, var(--kz-ovl-ln-highlight-fg)); --kz-gutter-border-color: var(--kz-ovd-gutter-border-color, var(--kz-ovl-gutter-border-color)); --kz-toolbar-bg: var(--kz-ovd-toolbar-bg, var(--kz-ovl-toolbar-bg)); --kz-toolbar-border: var(--kz-ovd-toolbar-border, var(--kz-ovl-toolbar-border)); --kz-lang-fg: var(--kz-ovd-lang-fg, var(--kz-ovl-lang-fg)); --kz-copy-fg: var(--kz-ovd-copy-fg, var(--kz-ovl-copy-fg)); --kz-copy-fg-hover: var(--kz-ovd-copy-fg-hover, var(--kz-ovl-copy-fg-hover)); --kz-copy-bg-hover: var(--kz-ovd-copy-bg-hover, var(--kz-ovl-copy-bg-hover)); --kz-collapse-btn-fg: var(--kz-ovd-collapse-btn-fg, var(--kz-ovl-collapse-btn-fg)); --kz-collapse-btn-bg: var(--kz-ovd-collapse-btn-bg, var(--kz-ovl-collapse-btn-bg)); --kz-collapse-btn-hover-bg: var(--kz-ovd-collapse-btn-hover-bg, var(--kz-ovl-collapse-btn-hover-bg)); --kz-collapse-btn-border: var(--kz-ovd-collapse-btn-border, var(--kz-ovl-collapse-btn-border)); --kz-collapse-btn-border-hover: var(--kz-ovd-collapse-btn-border-hover, var(--kz-ovl-collapse-btn-border-hover)); --kz-scrollbar-thumb: var(--kz-ovd-scrollbar-thumb, var(--kz-ovl-scrollbar-thumb)); --kz-scrollbar-thumb-hover: var(--kz-ovd-scrollbar-thumb-hover, var(--kz-ovl-scrollbar-thumb-hover)); }
}

@layer kazari {
:root {
  --kz-radius: 0.5rem;
  --kz-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --kz-border: 1px solid transparent;
  --kz-transition: 150ms ease;
  --kz-font-family: 'JetBrains Mono Variable', monospace;
  --kz-font-size: 0.875rem;
  --kz-font-weight: 500;
  --kz-line-height: 1.6;
  --kz-ui-font-family: system-ui, sans-serif;
  --kz-ui-font-size: 0.9rem;
  --kz-ui-font-weight: 400;
  --kz-ui-line-height: 1.65;
  --kz-code-padding-block: 1rem;
  --kz-code-padding-inline: 1.35rem;
  --kz-title-font-size: 0.8rem;
  --kz-title-padding: 0.5rem 1rem;
  --kz-ln-padding-inline: 2ch;
  --kz-gutter-border-width: 1px;
  --kz-mark-bg: rgba(255,200,0,0.12);
  --kz-mark-border: rgba(255,200,0,0.5);
  --kz-mark-border-width: 3px;
  --kz-ins-bg: rgba(46,160,67,0.12);
  --kz-ins-border: rgba(46,160,67,0.5);
  --kz-ins-indicator: '+';
  --kz-del-bg: rgba(248,81,73,0.12);
  --kz-del-border: rgba(248,81,73,0.5);
  --kz-del-indicator: '-';
  --kz-mark-accent-margin: 0rem;
  --kz-diff-indicator-margin: 0.3rem;
  --kz-ins-indicator-color: rgba(46,160,67,0.8);
  --kz-del-indicator-color: rgba(248,81,73,0.8);
  --kz-label-mark-bg: rgba(255,200,0,0.35);
  --kz-label-ins-bg: rgba(46,160,67,0.35);
  --kz-label-del-bg: rgba(248,81,73,0.35);
  --kz-label-fg: #ffffff;
  --kz-label-padding: 0.1rem 0.3rem;
  --kz-label-font-size: 0.75rem;
  --kz-label-radius: 0.2rem;
  --kz-inline-mark-bg: rgba(255,200,0,0.2);
  --kz-inline-mark-border: rgba(255,200,0,0.5);
  --kz-inline-mark-radius: 0.2rem;
  --kz-inline-mark-padding: 0.15rem;
  --kz-inline-mark-border-width: 1.5px;
  --kz-inline-ins-bg: rgba(46,160,67,0.2);
  --kz-inline-ins-border: rgba(46,160,67,0.5);
  --kz-inline-del-bg: rgba(248,81,73,0.2);
  --kz-inline-del-border: rgba(248,81,73,0.5);
  --kz-focus-dimmed-opacity: 0.35;
  --kz-focus-ring: rgb(59,130,246);
  --kz-toolbar-padding: 0.25rem 1rem;
  --kz-terminal-header-padding: 0.5rem 1rem;
  --kz-lang-font-size: 0.8rem;
  --kz-lang-font-weight: 500;
  --kz-separator-color: rgba(161, 161, 170, 0.3);
  --kz-copy-radius: 0.375rem;
  --kz-copy-success-bg: rgba(34, 197, 94, 0.9);
  --kz-copy-success-fg: #ffffff;
  --kz-copy-success-border: rgba(34, 197, 94, 0.8);
  --kz-tooltip-bg: rgba(30,30,30,0.92);
  --kz-tooltip-fg: #ffffff;
  --kz-tooltip-font-size: 0.75rem;
  --kz-tooltip-padding: 0.35rem 0.75rem;
  --kz-tooltip-radius: 6px;
  --kz-tooltip-offset: 6px;
  --kz-tooltip-shadow: 0 2px 6px rgba(0,0,0,0.25);
  --kz-tooltip-arrow-size: 5px;
  --kz-terminal-bg: var(--kz-editor-bg);
  --kz-terminal-titlebar-bg: var(--kz-toolbar-bg);
  --kz-terminal-dot-red: #ff5f57;
  --kz-terminal-dot-yellow: #febc2e;
  --kz-terminal-dot-green: #28c840;
  --kz-ln-width: 2ch;
  --kz-ln-opacity: 1;
  --kz-ln-highlight-opacity: 0.8;
  --kz-ansi-black: #000000;
  --kz-ansi-red: #cc0000;
  --kz-ansi-green: #4e9a06;
  --kz-ansi-yellow: #c4a000;
  --kz-ansi-blue: #3465a4;
  --kz-ansi-magenta: #75507b;
  --kz-ansi-cyan: #06989a;
  --kz-ansi-white: #d3d7cf;
  --kz-ansi-bright-black: #555753;
  --kz-ansi-bright-red: #ef2929;
  --kz-ansi-bright-green: #8ae234;
  --kz-ansi-bright-yellow: #fce94f;
  --kz-ansi-bright-blue: #729fcf;
  --kz-ansi-bright-magenta: #ad7fa8;
  --kz-ansi-bright-cyan: #34e2e2;
  --kz-ansi-bright-white: #eeeeec;
  --kz-collapse-btn-bg: rgba(255,255,255,0.08);
  --kz-collapse-btn-fg: rgba(255,255,255,0.7);
  --kz-collapse-btn-hover-bg: rgba(255,255,255,0.15);
  --kz-collapse-gradient-start: transparent;
  --kz-collapse-gradient-end: var(--kz-editor-bg);
  --kz-collapse-transition: 300ms ease;
  --kz-collapse-closed-bg: rgb(84 174 255 / 20%);
  --kz-collapse-closed-border: rgb(84 174 255 / 50%);
  --kz-collapse-closed-border-width: 0;
  --kz-collapse-closed-padding: 4px;
  --kz-collapse-open-bg: transparent;
  --kz-collapse-open-bg-collapsible: rgb(84 174 255 / 10%);
  --kz-collapse-open-border: transparent;
  --kz-collapse-open-border-width: 1px;
  --kz-collapse-closed-fg: currentColor;
  --kz-collapse-closed-font-family: inherit;
  --kz-collapse-closed-font-size: inherit;
  --kz-collapse-closed-line-height: inherit;
  --kz-collapse-expand-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-collapse-collapse-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z'/%3E%3C/svg%3E");
  --kz-file-icon-size: 1rem;
  --kz-file-icon-margin: 0;
  --kz-file-icon-opacity: 0.8;
  --kz-scrollbar-width: 8px;
  --kz-scrollbar-height: 8px;
  --kz-scrollbar-track: transparent;
  --kz-fs-font-scale: 1;
  --kz-editor-bg: #f7f7f7;
  --kz-ln-fg: #7f7f7f;
  --kz-ln-highlight-fg: #24292f;
  --kz-gutter-border-color: rgba(0,0,0,0.1);
  --kz-toolbar-bg: rgba(229, 231, 235, 0.15);
  --kz-toolbar-border: rgba(209, 213, 219, 0.5);
  --kz-lang-fg: #4b5563;
  --kz-copy-fg: #4b5563;
  --kz-copy-fg-hover: #111827;
  --kz-copy-bg-hover: rgba(156, 163, 175, 0.2);
  --kz-collapse-btn-fg: #4b5563;
  --kz-collapse-btn-bg: rgba(0, 0, 0, 0.04);
  --kz-collapse-btn-hover-bg: rgba(0, 0, 0, 0.08);
  --kz-collapse-btn-border: rgba(0, 0, 0, 0.15);
  --kz-collapse-btn-border-hover: rgba(0, 0, 0, 0.3);
  --kz-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --kz-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35);
}
:root.dark {
  --kz-editor-bg: #0d1117;
  --kz-editor-fg: #e6edf3;
  --kz-ln-fg: #6e7681;
  --kz-ln-highlight-fg: #e6edf3;
  --kz-gutter-border-color: rgba(255,255,255,0.1);
  --kz-toolbar-bg: rgba(39, 39, 42, 0.6);
  --kz-toolbar-border: rgba(63, 63, 70, 0.4);
  --kz-lang-fg: #a1a1aa;
  --kz-copy-fg: #d4d4d8;
  --kz-copy-fg-hover: #ffffff;
  --kz-copy-bg-hover: rgba(63, 63, 70, 0.8);
  --kz-collapse-btn-fg: #d4d4d8;
  --kz-collapse-btn-bg: rgba(255, 255, 255, 0.1);
  --kz-collapse-btn-hover-bg: rgba(255, 255, 255, 0.18);
  --kz-collapse-btn-border: rgba(255, 255, 255, 0.2);
  --kz-collapse-btn-border-hover: rgba(255, 255, 255, 0.35);
  --kz-scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --kz-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
}
.kazari-block .kz-line span[style^="--"] { color: var(--sl, inherit); background-color: var(--slbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovl-editor-bg); --kz-editor-fg: var(--kz-ovl-editor-fg); --kz-ln-fg: var(--kz-ovl-ln-fg); --kz-ln-highlight-fg: var(--kz-ovl-ln-highlight-fg); --kz-gutter-border-color: var(--kz-ovl-gutter-border-color); --kz-toolbar-bg: var(--kz-ovl-toolbar-bg); --kz-toolbar-border: var(--kz-ovl-toolbar-border); --kz-lang-fg: var(--kz-ovl-lang-fg); --kz-copy-fg: var(--kz-ovl-copy-fg); --kz-copy-fg-hover: var(--kz-ovl-copy-fg-hover); --kz-copy-bg-hover: var(--kz-ovl-copy-bg-hover); --kz-collapse-btn-fg: var(--kz-ovl-collapse-btn-fg); --kz-collapse-btn-bg: var(--kz-ovl-collapse-btn-bg); --kz-collapse-btn-hover-bg: var(--kz-ovl-collapse-btn-hover-bg); --kz-collapse-btn-border: var(--kz-ovl-collapse-btn-border); --kz-collapse-btn-border-hover: var(--kz-ovl-collapse-btn-border-hover); --kz-scrollbar-thumb: var(--kz-ovl-scrollbar-thumb); --kz-scrollbar-thumb-hover: var(--kz-ovl-scrollbar-thumb-hover); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.dark .kazari-block .kz-line span[style^="--"] { color: var(--sd, inherit); background-color: var(--sdbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.dark .kazari-block.kz-themed { --kz-editor-bg: var(--kz-ovd-editor-bg, var(--kz-ovl-editor-bg)); --kz-editor-fg: var(--kz-ovd-editor-fg, var(--kz-ovl-editor-fg)); --kz-ln-fg: var(--kz-ovd-ln-fg, var(--kz-ovl-ln-fg)); --kz-ln-highlight-fg: var(--kz-ovd-ln-highlight-fg, var(--kz-ovl-ln-highlight-fg)); --kz-gutter-border-color: var(--kz-ovd-gutter-border-color, var(--kz-ovl-gutter-border-color)); --kz-toolbar-bg: var(--kz-ovd-toolbar-bg, var(--kz-ovl-toolbar-bg)); --kz-toolbar-border: var(--kz-ovd-toolbar-border, var(--kz-ovl-toolbar-border)); --kz-lang-fg: var(--kz-ovd-lang-fg, var(--kz-ovl-lang-fg)); --kz-copy-fg: var(--kz-ovd-copy-fg, var(--kz-ovl-copy-fg)); --kz-copy-fg-hover: var(--kz-ovd-copy-fg-hover, var(--kz-ovl-copy-fg-hover)); --kz-copy-bg-hover: var(--kz-ovd-copy-bg-hover, var(--kz-ovl-copy-bg-hover)); --kz-collapse-btn-fg: var(--kz-ovd-collapse-btn-fg, var(--kz-ovl-collapse-btn-fg)); --kz-collapse-btn-bg: var(--kz-ovd-collapse-btn-bg, var(--kz-ovl-collapse-btn-bg)); --kz-collapse-btn-hover-bg: var(--kz-ovd-collapse-btn-hover-bg, var(--kz-ovl-collapse-btn-hover-bg)); --kz-collapse-btn-border: var(--kz-ovd-collapse-btn-border, var(--kz-ovl-collapse-btn-border)); --kz-collapse-btn-border-hover: var(--kz-ovd-collapse-btn-border-hover, var(--kz-ovl-collapse-btn-border-hover)); --kz-scrollbar-thumb: var(--kz-ovd-scrollbar-thumb, var(--kz-ovl-scrollbar-thumb)); --kz-scrollbar-thumb-hover: var(--kz-ovd-scrollbar-thumb-hover, var(--kz-ovl-scrollbar-thumb-hover)); }
.kazari-block[data-kz-theme="dark"] { --kz-editor-bg: #0d1117; --kz-editor-fg: #e6edf3; --kz-ln-fg: #6e7681; --kz-ln-highlight-fg: #e6edf3; --kz-gutter-border-color: rgba(255,255,255,0.1); --kz-toolbar-bg: rgba(39, 39, 42, 0.6); --kz-toolbar-border: rgba(63, 63, 70, 0.4); --kz-lang-fg: #a1a1aa; --kz-copy-fg: #d4d4d8; --kz-copy-fg-hover: #ffffff; --kz-copy-bg-hover: rgba(63, 63, 70, 0.8); --kz-collapse-btn-fg: #d4d4d8; --kz-collapse-btn-bg: rgba(255, 255, 255, 0.1); --kz-collapse-btn-hover-bg: rgba(255, 255, 255, 0.18); --kz-collapse-btn-border: rgba(255, 255, 255, 0.2); --kz-collapse-btn-border-hover: rgba(255, 255, 255, 0.35); --kz-scrollbar-thumb: rgba(255, 255, 255, 0.15); --kz-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.kazari-block[data-kz-theme="light"] { --kz-editor-bg: #f7f7f7; --kz-ln-fg: #7f7f7f; --kz-ln-highlight-fg: #24292f; --kz-gutter-border-color: rgba(0,0,0,0.1); --kz-toolbar-bg: rgba(229, 231, 235, 0.15); --kz-toolbar-border: rgba(209, 213, 219, 0.5); --kz-lang-fg: #4b5563; --kz-copy-fg: #4b5563; --kz-copy-fg-hover: #111827; --kz-copy-bg-hover: rgba(156, 163, 175, 0.2); --kz-collapse-btn-fg: #4b5563; --kz-collapse-btn-bg: rgba(0, 0, 0, 0.04); --kz-collapse-btn-hover-bg: rgba(0, 0, 0, 0.08); --kz-collapse-btn-border: rgba(0, 0, 0, 0.15); --kz-collapse-btn-border-hover: rgba(0, 0, 0, 0.3); --kz-scrollbar-thumb: rgba(0, 0, 0, 0.2); --kz-scrollbar-thumb-hover: rgba(0, 0, 0, 0.35); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.kazari-block[data-kz-theme] { --kz-terminal-bg: var(--kz-editor-bg); --kz-terminal-titlebar-bg: var(--kz-toolbar-bg); }
.kazari-block[data-kz-theme="dark"] .kz-line span[style^="--"] { color: var(--sd, inherit); background-color: var(--sdbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block[data-kz-theme="light"] .kz-line span[style^="--"] { color: var(--sl, inherit); background-color: var(--slbg, transparent); font-style: var(--sfs, inherit); font-weight: var(--sfw, inherit); text-decoration: var(--std, inherit); }
.kazari-block.kz-themed[data-kz-theme="dark"] { --kz-editor-bg: var(--kz-ovd-editor-bg, var(--kz-ovl-editor-bg)); --kz-editor-fg: var(--kz-ovd-editor-fg, var(--kz-ovl-editor-fg)); --kz-ln-fg: var(--kz-ovd-ln-fg, var(--kz-ovl-ln-fg)); --kz-ln-highlight-fg: var(--kz-ovd-ln-highlight-fg, var(--kz-ovl-ln-highlight-fg)); --kz-gutter-border-color: var(--kz-ovd-gutter-border-color, var(--kz-ovl-gutter-border-color)); --kz-toolbar-bg: var(--kz-ovd-toolbar-bg, var(--kz-ovl-toolbar-bg)); --kz-toolbar-border: var(--kz-ovd-toolbar-border, var(--kz-ovl-toolbar-border)); --kz-lang-fg: var(--kz-ovd-lang-fg, var(--kz-ovl-lang-fg)); --kz-copy-fg: var(--kz-ovd-copy-fg, var(--kz-ovl-copy-fg)); --kz-copy-fg-hover: var(--kz-ovd-copy-fg-hover, var(--kz-ovl-copy-fg-hover)); --kz-copy-bg-hover: var(--kz-ovd-copy-bg-hover, var(--kz-ovl-copy-bg-hover)); --kz-collapse-btn-fg: var(--kz-ovd-collapse-btn-fg, var(--kz-ovl-collapse-btn-fg)); --kz-collapse-btn-bg: var(--kz-ovd-collapse-btn-bg, var(--kz-ovl-collapse-btn-bg)); --kz-collapse-btn-hover-bg: var(--kz-ovd-collapse-btn-hover-bg, var(--kz-ovl-collapse-btn-hover-bg)); --kz-collapse-btn-border: var(--kz-ovd-collapse-btn-border, var(--kz-ovl-collapse-btn-border)); --kz-collapse-btn-border-hover: var(--kz-ovd-collapse-btn-border-hover, var(--kz-ovl-collapse-btn-border-hover)); --kz-scrollbar-thumb: var(--kz-ovd-scrollbar-thumb, var(--kz-ovl-scrollbar-thumb)); --kz-scrollbar-thumb-hover: var(--kz-ovd-scrollbar-thumb-hover, var(--kz-ovl-scrollbar-thumb-hover)); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.kazari-block.kz-themed[data-kz-theme="light"] { --kz-editor-bg: var(--kz-ovl-editor-bg); --kz-editor-fg: var(--kz-ovl-editor-fg); --kz-ln-fg: var(--kz-ovl-ln-fg); --kz-ln-highlight-fg: var(--kz-ovl-ln-highlight-fg); --kz-gutter-border-color: var(--kz-ovl-gutter-border-color); --kz-toolbar-bg: var(--kz-ovl-toolbar-bg); --kz-toolbar-border: var(--kz-ovl-toolbar-border); --kz-lang-fg: var(--kz-ovl-lang-fg); --kz-copy-fg: var(--kz-ovl-copy-fg); --kz-copy-fg-hover: var(--kz-ovl-copy-fg-hover); --kz-copy-bg-hover: var(--kz-ovl-copy-bg-hover); --kz-collapse-btn-fg: var(--kz-ovl-collapse-btn-fg); --kz-collapse-btn-bg: var(--kz-ovl-collapse-btn-bg); --kz-collapse-btn-hover-bg: var(--kz-ovl-collapse-btn-hover-bg); --kz-collapse-btn-border: var(--kz-ovl-collapse-btn-border); --kz-collapse-btn-border-hover: var(--kz-ovl-collapse-btn-border-hover); --kz-scrollbar-thumb: var(--kz-ovl-scrollbar-thumb); --kz-scrollbar-thumb-hover: var(--kz-ovl-scrollbar-thumb-hover); --kz-collapse-gradient-end: var(--kz-editor-bg); }
.kazari-block .kz-theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--kz-copy-radius);
  background: transparent;
  color: var(--kz-copy-fg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.kazari-block .kz-theme-toggle-btn:hover {
  background: var(--kz-copy-bg-hover);
  color: var(--kz-copy-fg-hover);
}
.kazari-block .kz-theme-toggle-btn[aria-pressed="true"] {
  background: var(--kz-copy-bg-hover);
  color: var(--kz-copy-fg-hover);
}
.kazari-block .kz-theme-toggle-light-icon,
.kazari-block .kz-theme-toggle-dark-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.kazari-block .kz-theme-toggle-dark-icon {
  display: none;
}
.kazari-block[data-kz-theme="dark"] .kz-theme-toggle-light-icon {
  display: none;
}
.kazari-block[data-kz-theme="dark"] .kz-theme-toggle-dark-icon {
  display: inline;
}
.kazari-block[data-kz-theme="light"] .kz-theme-toggle-light-icon {
  display: inline;
}
.kazari-block[data-kz-theme="light"] .kz-theme-toggle-dark-icon {
  display: none;
}
}

.kazari-block .kz-lang-icon { display:inline-block; width:var(--kz-lang-icon-size,1.25rem); height:var(--kz-lang-icon-size,1.25rem); margin:var(--kz-lang-icon-margin,0); opacity:var(--kz-lang-icon-opacity,0.8); vertical-align:middle; flex-shrink:0; }
.kazari-block .kz-file-icon { font-size: 1rem; margin-right: .4rem; }
.kz-todo-badge,.kz-fixme-badge{display:inline-block;font-size:0.7em;font-weight:700;font-family:var(--kz-ui-font-family,system-ui,sans-serif);padding:0.1em 0.45em;border-radius:3px;margin-left:0.5em;vertical-align:middle;line-height:1.4}.kz-todo-badge{background:rgba(234,179,8,0.2);color:#b45309}.kz-fixme-badge{background:rgba(239,68,68,0.2);color:#dc2626}
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  margin: 0;
  background: #f8f9fa;
  color: #1a1a1a;
  font-family: system-ui, sans-serif;
}

button,
input,
select {
  font: inherit;
}

button,
a,
input,
select,
summary {
  outline-offset: 3px;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(248, 249, 250, .96);
  border-bottom: 1px solid #dfe3e8;
  backdrop-filter: blur(12px);
}

.site-nav-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: .65rem clamp(1rem, 3vw, 2.5rem);
}

.site-brand {
  font-size: 1.15rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.site-engine-banner {
  padding: .5rem clamp(1rem, 3vw, 2.5rem);
  background: #eef0fd;
  border-bottom: 1px solid #d8dafa;
  color: #3b44a8;
  font-size: .88rem;
  font-weight: 500;
  text-align: center;
}

.site-nav-links {
  display: flex;
  gap: .25rem;
}

.site-nav-links a {
  padding: .4rem .75rem .55rem;
  border-radius: .25rem .25rem 0 0;
  color: #3d4550;
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  border-bottom: 2px solid transparent;
}

.site-nav-links a:hover {
  background: #f5f6f7;
  color: #1a1a2e;
}

.site-nav-links a.active {
  background: transparent;
  color: #1a1a2e;
  font-weight: 600;
  border-bottom: 2px solid #4a55c5;
}

.site-theme-toggle {
  margin-left: auto;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}

.site-theme-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: .75rem;
  background: #d1d5db;
  transition: background .2s ease;
}

.toggle-track::before,
.toggle-track::after {
  content: "";
  position: absolute;
  width: .8rem;
  height: .8rem;
  background: #6b7280;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.toggle-track::before {
  left: .3rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E");
}

.toggle-track::after {
  right: .3rem;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

.site-theme-toggle input:checked ~ .toggle-track::before,
.site-theme-toggle input:checked ~ .toggle-track::after {
  background: rgba(255, 255, 255, .7);
}

.toggle-thumb {
  position: absolute;
  left: .2rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform .2s ease;
}

.site-theme-toggle input:checked ~ .toggle-track {
  background: #4f46e5;
}

.site-theme-toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(1.25rem);
}

.site-theme-toggle input:focus-visible ~ .toggle-track {
  outline: 2px solid #5965d8;
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  padding: .65rem .9rem;
  border-radius: .4rem;
  background: #1a1a1a;
  color: #fff;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.demo-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #dfe3e8;
  background: rgba(248, 249, 250, .94);
  backdrop-filter: blur(12px);
}

.demo-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1360px;
  margin: 0 auto;
  padding: .85rem clamp(1rem, 3vw, 2.5rem);
}

.demo-brand h1 {
  margin: 0;
  font-size: 1.35rem;
}

.demo-brand p {
  margin: .2rem 0 0;
  color: #3d4550;
  font-size: .9rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.backend-switcher {
  display: flex;
  padding: .2rem;
  border: 1px solid #c8ced6;
  border-radius: .5rem;
  background: #fff;
}

.backend-switcher a,
.backend-switcher span {
  padding: .35rem .6rem;
  border-radius: .3rem;
  color: #555f6c;
  font-size: .85rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.backend-switcher a:hover {
  background: #f5f6f7;
  color: #1a1a2e;
}

.backend-switcher span {
  background: #eef0f3;
  color: #1a1a2e;
  font-weight: 600;
}

.theme-toggle,
.clear-filters {
  padding: .55rem .8rem;
  border: 1px solid #c8ced6;
  border-radius: .45rem;
  background: #fff;
  color: inherit;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.theme-toggle:hover,
.clear-filters:hover {
  border-color: #aeb4eb;
  background: #f0f1ff;
  color: #303bc4;
}

.theme-toggle:focus-visible,
.clear-filters:focus-visible {
  border-color: #5965d8;
  box-shadow: 0 0 0 3px rgba(89, 101, 216, .2);
}

.theme-toggle:active,
.clear-filters:active {
  transform: scale(.97);
}

.demo-shell {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  max-width: 1360px;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 3vw, 2.5rem) 5rem;
}

.demo-sidebar,
.demo-content,
.demo-category,
.demo-example {
  min-width: 0;
}

.demo-nav {
  position: sticky;
  top: 3.75rem;
  max-height: calc(100vh - 4.5rem);
  overflow-y: auto;
  padding-right: .75rem;
  scrollbar-width: thin;
}

.demo-nav-title {
  margin: 0 0 .75rem;
  color: #333b45;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-nav a {
  display: block;
  margin: .1rem 0;
  padding: .3rem .55rem;
  border-left: 2px solid transparent;
  border-radius: 0 .35rem .35rem 0;
  color: #3d4550;
  font-size: .84rem;
  line-height: 1.3;
  text-decoration: none;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.demo-nav a:hover {
  border-left-color: #aeb4eb;
  background: #f0f1ff;
  color: #303bc4;
}

.demo-nav a[aria-current="location"] {
  border-left-color: #5965d8;
  background: #e8eafc;
  color: #303bc4;
  font-weight: 650;
}

.demo-nav .category-link {
  margin-top: .75rem;
  color: #262d36;
  font-weight: 700;
}

.demo-nav .nav-category.is-active>.category-link {
  color: #303bc4;
}

.demo-content {
  max-width: 960px;
}

.mobile-jump {
  display: none;
  position: sticky;
  top: 4.2rem;
  z-index: 15;
  margin: -.5rem 0 1.5rem;
  padding: .75rem;
  border: 1px solid #dfe3e8;
  border-radius: .6rem;
  background: rgba(248, 249, 250, .96);
  backdrop-filter: blur(12px);
}

.mobile-jump label,
.filter-field label {
  display: block;
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 700;
}

.mobile-jump select,
.showcase-filters input,
.showcase-filters select {
  width: 100%;
  min-width: 0;
  padding: .55rem;
  border: 1px solid #c8ced6;
  border-radius: .4rem;
  background: #fff;
  color: inherit;
}

.showcase-filters {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(10rem, .45fr) auto;
  gap: .75rem;
  align-items: end;
  margin-bottom: .5rem;
  padding: 1rem;
  border: 1px solid #dfe3e8;
  border-radius: .7rem;
  background: #fff;
}

.result-count {
  grid-column: 1 / -1;
  margin: 0;
  color: #4a5260;
  font-size: .85rem;
}

.no-results {
  margin-top: 2rem;
  padding: 2rem;
  border: 1px dashed #c8ced6;
  border-radius: .7rem;
  text-align: center;
}

.no-results h2 {
  margin-top: 0;
}

.demo-category {
  scroll-margin-top: 4rem;
}

.demo-category+.demo-category {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #dfe3e8;
}

.demo-category>h2 {
  margin: 0;
  color: #252b33;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
}

.category-description {
  margin: .5rem 0 2rem;
  color: #4a5260;
}

.demo-example {
  margin: 0 0 2.75rem;
  scroll-margin-top: 4rem;
}

.example-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}

.example-heading h3 {
  margin: 0;
  color: #4b535d;
  font-size: 1.05rem;
}

.example-description {
  margin: -.25rem 0 .75rem;
  color: #3d4550;
}

.copy-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2rem;
  padding: .35rem .6rem;
  border: 1px solid transparent;
  border-radius: .45rem;
  background: transparent;
  color: #4a55c5;
  cursor: pointer;
  font-size: .82rem;
  line-height: 1;
  white-space: nowrap;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.copy-action svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform .16s ease;
}

.copy-action:hover {
  border-color: #cdd1fa;
  background: #f0f1ff;
  color: #303bc4;
  box-shadow: 0 3px 10px rgba(48, 59, 196, .12);
  transform: translateY(-1px);
}

.copy-action:hover svg {
  transform: scale(1.08);
}

.copy-action:focus-visible {
  border-color: #5965d8;
  box-shadow: 0 0 0 3px rgba(89, 101, 216, .2);
}

.copy-action:active {
  box-shadow: none;
  transform: translateY(0) scale(.97);
}

.copy-action.copied {
  border-color: #9ad5ae;
  background: #e9f8ee;
  color: #18783a;
  box-shadow: 0 3px 10px rgba(24, 120, 58, .12);
}

.copy-action.copied svg {
  transform: scale(1.08);
}

.recipe-disclosure {
  margin-top: .85rem;
  border: 1px solid #dfe3e8;
  border-radius: .55rem;
  background: #fff;
}

.recipe-disclosure summary {
  padding: .7rem .85rem;
  cursor: pointer;
  color: #414a55;
  font-weight: 650;
}

.recipe-content {
  padding: 0 .85rem .85rem;
}

.recipe-tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  border-bottom: 1px solid #dfe3e8;
}

.recipe-tabs button {
  padding: .55rem .75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #4a5260;
  cursor: pointer;
}

.recipe-tabs button[aria-selected="true"] {
  border-bottom-color: #5965d8;
  color: #303bc4;
}

.recipe-panel {
  position: relative;
  padding-top: .75rem;
}

.recipe-panel h4 {
  margin: 0 0 .5rem;
  font-size: .85rem;
}

.recipe-panel pre {
  max-height: 24rem;
  margin: 0;
  padding: .9rem;
  overflow: auto;
  border-radius: .45rem;
  background: #f1f3f5;
  color: #252b33;
  font: .82rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre;
}

.copy-recipe {
  display: flex;
  margin: 0 0 .45rem auto;
}

.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #bbb;
  background: #e8e8ec;
  color: #444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s;
  transform: translate(-50%, 8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  z-index: 1000;
}
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.back-to-top::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 6px;
  background: #333;
  color: #fff;
  font-size: .75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.back-to-top:hover::after {
  opacity: 1;
}
.back-to-top:hover {
  background: #d8d8dd;
  border-color: #aaa;
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

.site-footer {
  margin-top: 4rem;
  border-top: 1px solid #e0e3e8;
  background: #f8f9fb;
}
.site-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem clamp(1rem,3vw,2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.site-footer-brand {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}
.site-footer-kanji {
  font-weight: 400;
  color: #888;
  margin-left: .15em;
}
.site-footer-about {
  max-width: 540px;
}
.site-footer-about p {
  margin: 0;
  font-size: .85rem;
  color: #3d4550;
  line-height: 1.55;
}
.site-footer-about a {
  color: #4a55c5;
  text-decoration: none;
}
.site-footer-about a:hover {
  text-decoration: underline;
}
.site-footer-links {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .82rem;
}
.site-footer-links a {
  color: #3d4550;
  text-decoration: none;
}
.site-footer-links a:hover {
  color: #4a55c5;
}
.site-footer-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ccc;
}

.sr-announcement {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

[hidden] {
  display: none !important;
}

.dark {
  color-scheme: dark;
  --dk-bg: #1a1a1b;
  --dk-surface: #272729;
  --dk-surface-hover: #2f2f31;
  --dk-surface-active: #3a3a3c;
  --dk-border: #343536;
  --dk-border-mid: #3e3f41;
  --dk-border-hover: #4f5052;
  --dk-border-bright: #5a5b5d;
  --dk-text: #d7dadc;
  --dk-text-muted: #c8d0d4;
  --dk-text-secondary: #a3a5a7;
  --dk-text-heading: #d7dadc;
  --dk-accent: #4fbcff;
  --dk-accent-text: #79cdff;
  --dk-accent-bright: #a8dfff;
  --dk-focus-shadow: 0 0 0 3px rgba(79, 188, 255, .2);
  --dk-ok-border: #39794f;
  --dk-ok-bg: #1f4930;
  --dk-ok-text: #a9e8bc;
  --dk-code-bg: #1e1e1f;
}

.dark body {
  background: var(--dk-bg);
  color: var(--dk-text);
}

.dark .site-nav {
  background: rgba(26, 26, 27, .96);
  border-color: var(--dk-border);
}

.dark .site-brand {
  color: var(--dk-text-heading);
}

.dark .site-engine-banner {
  background: var(--dk-surface);
  border-color: var(--dk-border);
  color: var(--dk-accent);
}

.dark .site-nav-links a {
  color: var(--dk-text-secondary);
}

.dark .site-nav-links a:hover {
  background: var(--dk-surface-hover);
  color: #d9dcff;
}

.dark .site-nav-links a.active {
  background: transparent;
  color: #f0f1ff;
  border-bottom-color: #7c85e0;
}

.nav-toggle-input { display: none; }
.nav-toggle-label { display: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; padding: 6px; margin-left: auto; }
.nav-toggle-label span { display: block; width: 22px; height: 2px; background: #57606a; border-radius: 1px; transition: transform .2s, opacity .2s; }
.dark .nav-toggle-label span { background: var(--dk-text-secondary); }
@media (max-width: 768px) {
  .site-nav-inner { flex-wrap: wrap; }
  .nav-toggle-label { display: flex; }
  .site-theme-toggle { margin-left: .75rem; }
  .site-nav-links { display: none; flex-direction: column; width: 100%; gap: 0; padding: .5rem 0; border-top: 1px solid #e1e4e8; margin-top: .5rem; }
  .site-nav-links a { border-radius: .25rem; border-bottom: none; padding: .6rem .75rem; }
  .site-nav-links a.active { border-bottom: none; background: #f0f1ff; }
  .nav-toggle-input:checked ~ .site-nav-links { display: flex; }
  .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .dark .site-nav-links { border-top-color: var(--dk-border); }
  .dark .site-nav-links a.active { background: var(--dk-surface-hover); }
  .backend-switcher { display: none; }
  .nav-toggle-input:checked ~ .backend-switcher { display: flex; width: 100%; }
}

.dark .demo-header,
.dark .mobile-jump {
  border-color: var(--dk-border);
  background: rgba(21, 23, 25, .94);
}

.dark .demo-brand p,
.dark .category-description,
.dark .example-description,
.dark .result-count {
  color: var(--dk-text-muted);
}

.dark .theme-toggle,
.dark .clear-filters,
.dark .backend-switcher,
.dark .showcase-filters,
.dark .showcase-filters input,
.dark .showcase-filters select,
.dark .mobile-jump select,
.dark .recipe-disclosure {
  border-color: var(--dk-border-mid);
  background: var(--dk-surface);
  color: var(--dk-text);
}

.dark .theme-toggle:hover,
.dark .clear-filters:hover {
  border-color: var(--dk-border-bright);
  background: var(--dk-surface-hover);
  color: #fff;
}

.dark .theme-toggle:focus-visible,
.dark .clear-filters:focus-visible {
  border-color: var(--dk-accent);
  box-shadow: var(--dk-focus-shadow);
}

.dark .backend-switcher span {
  background: var(--dk-surface-active);
  color: #f0f1ff;
  font-weight: 600;
}

.dark .backend-switcher a,
.dark .demo-nav a,
.dark .example-heading h3 {
  color: var(--dk-text-secondary);
}

.dark .demo-nav-title,
.dark .demo-nav .category-link,
.dark .demo-category>h2 {
  color: var(--dk-text-heading);
}

.dark .demo-nav a:hover {
  border-left-color: var(--dk-border-hover);
  background: var(--dk-surface-hover);
  color: var(--dk-accent-text);
}

.dark .demo-nav a[aria-current="location"] {
  border-left-color: var(--dk-accent);
  background: var(--dk-surface-active);
  color: var(--dk-accent-bright);
}

.dark .demo-nav .nav-category.is-active>.category-link,
.dark .copy-action,
.dark .recipe-tabs button[aria-selected="true"] {
  color: var(--dk-accent);
}

.dark .back-to-top {
  background: #3a3a40;
  border-color: #555;
  color: #ddd;
}
.dark .back-to-top::after {
  background: #555;
}
.dark .back-to-top:hover {
  background: #4a4a52;
  border-color: #777;
}

.dark .site-footer {
  border-color: #2a2e36;
  background: #121417;
}
.dark .site-footer-kanji {
  color: #666;
}
.dark .site-footer-about p {
  color: #9aa0ad;
}
.dark .site-footer-about a {
  color: #aeb5ff;
}
.dark .site-footer-links a {
  color: #9aa0ad;
}
.dark .site-footer-links a:hover {
  color: #aeb5ff;
}
.dark .site-footer-sep {
  background: #444;
}

.dark .copy-action:hover {
  border-color: var(--dk-border-hover);
  background: var(--dk-surface-hover);
  color: var(--dk-accent-text);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.dark .copy-action:focus-visible {
  border-color: var(--dk-accent);
  box-shadow: var(--dk-focus-shadow);
}

.dark .copy-action.copied {
  border-color: var(--dk-ok-border);
  background: var(--dk-ok-bg);
  color: var(--dk-ok-text);
}

.dark .demo-category+.demo-category,
.dark .recipe-tabs {
  border-color: var(--dk-border);
}

.dark .recipe-disclosure summary {
  color: var(--dk-text);
}

.dark .recipe-panel pre {
  background: var(--dk-code-bg);
  color: var(--dk-text);
}

@media (max-width: 900px) {
  .demo-shell {
    display: block;
    max-width: 960px;
  }

  .demo-sidebar {
    display: none;
  }

  .mobile-jump {
    display: block;
  }
}

@media (max-width: 680px) {
  .demo-header-inner {
    align-items: flex-start;
  }

  .header-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .backend-switcher {
    justify-content: center;
  }

  .showcase-filters {
    grid-template-columns: 1fr;
  }

  .result-count {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .demo-header-inner {
    padding-block: .65rem;
  }

  .demo-brand p {
    display: none;
  }

  .demo-brand h1 {
    font-size: 1.15rem;
  }

  .theme-toggle {
    padding: .45rem .65rem;
  }

  .demo-shell {
    padding-top: 1rem;
  }

  .mobile-jump {
    top: 5.8rem;
  }

  .demo-category+.demo-category {
    margin-top: 3rem;
    padding-top: 1.5rem;
  }

  .demo-example {
    margin-bottom: 2.25rem;
  }

  .example-heading {
    align-items: flex-start;
  }

  .example-heading h3 {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .copy-action,
  .copy-action svg,
  .demo-nav a,
  .theme-toggle,
  .clear-filters {
    transition: none;
  }
}

.kz-svg-preview {
  overflow-x: auto;
  padding: .5rem 0;
}

.kz-svg-preview svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.kz-svg-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.kz-svg-compare .kz-svg-preview {
  min-width: 0;
}

@media (max-width: 768px) {
  .kz-svg-compare {
    grid-template-columns: 1fr;
  }
}

/* Demo-only language icon visuals (consumers provide their own) */
.kz-lang-icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.kz-lang-icon[data-lang="go"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300ADD8' d='M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zM17.829 10.01c-.744.187-1.252.327-1.996.514-.187.047-.199.059-.363-.128-.187-.222-.327-.363-.585-.504-.773-.41-1.519-.292-2.209.129-.819.502-1.243 1.252-1.231 2.139.012.886.585 1.613 1.46 1.742.748.105 1.381-.128 1.89-.632.105-.117.199-.246.315-.398H13.21c-.269 0-.339-.164-.245-.385.164-.374.468-.992.644-1.299.047-.082.152-.222.339-.222h4.16c-.023.327-.023.643-.07.968-.117.82-.397 1.59-.852 2.291-.714 1.1-1.67 1.906-2.874 2.373-.992.386-2.022.456-3.062.21-1.007-.235-1.836-.82-2.454-1.648-.538-.714-.863-1.542-.956-2.443-.117-1.147.105-2.22.654-3.215.607-1.101 1.473-1.906 2.58-2.443.91-.444 1.882-.607 2.898-.514 1.007.093 1.906.456 2.664 1.112.468.398.827.877 1.097 1.43.058.094.023.14-.082.164z'/%3E%3Cpath fill='%2300ADD8' d='M21.348 17.263c-.924.047-1.79-.105-2.583-.584-.667-.398-1.112-.96-1.295-1.707-.246-1.018-.07-1.965.502-2.839.607-.933 1.449-1.53 2.501-1.835.897-.257 1.789-.269 2.651.07.758.292 1.295.82 1.588 1.577.386 1.007.328 1.988-.175 2.932-.398.737-.97 1.295-1.706 1.695-.526.281-1.089.456-1.695.514-.07 0-.14.012-.21.012-.024.011-.048.011-.071.011-.012-.011-.012-.011.012-.011zm2.373-4.137c-.012-.152-.035-.269-.07-.386-.234-.735-.852-1.147-1.612-1.077-.748.07-1.32.456-1.694 1.1-.316.538-.374 1.124-.188 1.718.187.574.7.96 1.296.984.467.012.886-.117 1.26-.386.584-.42.945-.97 1.008-1.706v-.247z'/%3E%3C/svg%3E");
}
.kz-lang-icon[data-lang="python"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233776AB' d='M11.914 0C5.82 0 6.2 2.656 6.2 2.656l.007 2.752h5.814v.826H3.9S0 5.789 0 11.969c0 6.18 3.403 5.96 3.403 5.96h2.03v-2.868s-.109-3.402 3.346-3.402h5.766s3.24.052 3.24-3.133V3.19S18.28 0 11.913 0zM8.708 1.85a1.06 1.06 0 110 2.12 1.06 1.06 0 010-2.12z'/%3E%3Cpath fill='%23FFD43B' d='M12.086 24c6.094 0 5.714-2.656 5.714-2.656l-.007-2.752h-5.814v-.826H20.1S24 18.211 24 12.031c0-6.18-3.403-5.96-3.403-5.96h-2.03v2.868s.109 3.402-3.346 3.402H9.455s-3.24-.052-3.24 3.133v5.336S5.72 24 12.087 24zm3.206-1.85a1.06 1.06 0 110-2.12 1.06 1.06 0 010 2.12z'/%3E%3C/svg%3E");
}
.kz-lang-icon[data-lang="javascript"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect fill='%23F7DF1E' width='24' height='24' rx='2'/%3E%3Cpath fill='%23323330' d='M6.4 19.2l1.7-1c.3.6.6 1 1.3 1 .6 0 1-.2 1-1.1v-6h2.1v6c0 1.8-1.1 2.7-2.6 2.7-1.4 0-2.2-.7-2.7-1.6zm6.4-.2l1.7-1c.4.7.9 1.2 1.8 1.2.8 0 1.2-.4 1.2-.9 0-.6-.5-.9-1.4-1.3l-.5-.2c-1.4-.6-2.3-1.3-2.3-2.9 0-1.4 1.1-2.5 2.8-2.5 1.2 0 2.1.4 2.7 1.5l-1.5 1c-.3-.6-.7-.8-1.2-.8s-.8.3-.8.7c0 .5.3.7 1.1 1l.5.2c1.6.7 2.5 1.4 2.5 3 0 1.7-1.4 2.7-3.2 2.7-1.8 0-2.9-.8-3.5-1.9z'/%3E%3C/svg%3E");
}