:root{color-scheme:light dark}
*{box-sizing:border-box}
body{font:400 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;padding:24px;background:Canvas;color:CanvasText}
main{max-width:720px;margin:0 auto}
h1{font:700 20px/1.2 system-ui;margin:0 0 8px}
p{margin:0 0 12px}
.badge{font:600 12px/1 system-ui;padding:.4em .6em;border:1px solid color-mix(in oklch, CanvasText 20%, transparent);border-radius:999px;text-decoration:none;color:CanvasText;background:Canvas}
.badge:hover{background:color-mix(in oklch, Canvas 92%, CanvasText 8%)}
small{opacity:.7}
pre{white-space:pre-wrap;background:color-mix(in oklch, Canvas 96%, CanvasText 4%);padding:12px;border-radius:8px;border:1px solid color-mix(in oklch, CanvasText 12%, transparent)}
/* --- Surprise Lab: .sl-details (accessible details/summary) --- */
:where(details.sl-details) summary{list-style:none;cursor:pointer;position:relative;padding-left:1.1em}
:where(details.sl-details) summary::-webkit-details-marker{display:none}
:where(details.sl-details) summary::before{content:"";position:absolute;left:0;top:.1em;transform:rotate(0deg);transition:transform .18s ease}
:where(details.sl-details[open]) summary::before{transform:rotate(90deg)}
:where(details.sl-details) summary:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){:where(details.sl-details) summary::before{transition:none}}
@media (prefers-contrast:more){:where(details.sl-details) summary:focus-visible{outline-width:4px}}
/* --- end .sl-details --- */

/* .sl-keyline implementation - contrast-aware outlines */
.sl-keyline {
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.2s ease;
}

.sl-keyline:focus-visible {
  outline-color: var(--focus-color, #2563eb);
}

/* Shared :focus-visible styling */
:focus-visible {
  outline: 2px solid var(--focus-color, #2563eb);
  outline-offset: 2px;
}

/* Enhanced under prefers-contrast: more */
@media (prefers-contrast: more) {
  .sl-keyline:focus-visible {
    outline-width: 3px;
    outline-color: var(--high-contrast-focus, #000000);
  }
  
  :focus-visible {
    outline-width: 3px;
    outline-color: var(--high-contrast-focus, #000000);
  }
}

/* CSS custom properties for theme consistency */
:root {
  --focus-color: #2563eb;
  --high-contrast-focus: #000000;
}