/* Canoli Studio / Studio foundation. Semantic tokens are the public styling contract. */
:root {
  color-scheme: dark;
  --color-app: #181c1b;
  --color-panel: #202523;
  --color-panel-raised: #292f2c;
  --color-field: #171c19;
  --color-canvas: #383838;
  --color-hover: #303830;
  --color-selected: #364337;
  --color-text: #e7e9df;
  --color-text-secondary: #a5ada0;
  --color-text-muted: #929c8f;
  --color-border: #363d35;
  --color-border-subtle: #2c332c;
  --color-accent: #d5e79b;
  --color-accent-hover: #e2efb9;
  --color-on-accent: #202d17;
  --color-selection: #d5e79b;
  --color-danger: #f5aea0;
  --color-danger-surface: #442c27;
  --color-paper: #eee9dd;
  --color-surface: var(--color-panel-raised);
  --color-backdrop: #0d130ec9;
  --color-warning: #d6aa78;
  --color-border-strong: #596449;
  --color-slider-track: #4b5546;
  --color-code-keyword: #c8b8ec;
  --color-code-string: #d5e79b;
  --color-code-number: #efc18d;
  --color-code-function: #a7d8d1;
  --color-code-property: #bfcee9;
  --font-ui:
    "Manrope Variable", "Manrope", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --font-display: "Manrope Variable", "Manrope", sans-serif;
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 16px;
  --text-title: 23px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 7px;
  --radius-control: var(--radius-md);
  --radius-lg: 12px;
  --radius-dialog: 18px;
  --shadow-floating: 0 8px 32px #00000026, 0 1px 3px #00000033;
  --shadow-canvas: 0 20px 70px #00000040, 0 1px 2px #00000055;
  --focus-ring: 0 0 0 2px var(--color-app), 0 0 0 4px var(--color-accent);
  --duration-fast: 120ms;
  --rail-width: 54px;
  --layers-width: 230px;
  --inspector-width: 268px;
  --header-height: 64px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-app: #f4f3ed;
  --color-panel: #eeeee7;
  --color-panel-raised: #ffffff;
  --color-field: #ffffff;
  --color-hover: #e2e7dc;
  --color-selected: #dce7cb;
  --color-text: #252d25;
  --color-text-secondary: #505d4e;
  --color-text-muted: #606b5d;
  --color-border: #b8c1b2;
  --color-border-subtle: #d5dace;
  --color-border-strong: #7b8c70;
  --color-accent: #49621c;
  --color-accent-hover: #354c12;
  --color-on-accent: #ffffff;
  --color-danger: #a63829;
  --color-danger-surface: #fbe7e1;
  --color-warning: #926120;
  --color-backdrop: #20291f66;
  --color-slider-track: #bdc8b5;
  --color-code-keyword: #70419b;
  --color-code-string: #476218;
  --color-code-number: #925013;
  --color-code-function: #17676a;
  --color-code-property: #375b8b;
  --shadow-floating: 0 8px 32px #2631241a, 0 1px 3px #26312422;
}

/* Static docs also honor the OS preference when JavaScript is disabled. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --color-app: #f4f3ed;
    --color-panel: #eeeee7;
    --color-panel-raised: #ffffff;
    --color-field: #ffffff;
    --color-hover: #e2e7dc;
    --color-selected: #dce7cb;
    --color-text: #252d25;
    --color-text-secondary: #505d4e;
    --color-text-muted: #606b5d;
    --color-border: #b8c1b2;
    --color-border-subtle: #d5dace;
    --color-border-strong: #7b8c70;
    --color-accent: #49621c;
    --color-accent-hover: #354c12;
    --color-on-accent: #ffffff;
    --color-danger: #a63829;
    --color-danger-surface: #fbe7e1;
    --color-warning: #926120;
    --color-backdrop: #20291f66;
    --color-slider-track: #bdc8b5;
    --color-code-keyword: #70419b;
    --color-code-string: #476218;
    --color-code-number: #925013;
    --color-code-function: #17676a;
    --color-code-property: #375b8b;
    --shadow-floating: 0 8px 32px #2631241a, 0 1px 3px #26312422;
  }
}


*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--color-app);color:var(--color-text);font:15px/1.7 system-ui,sans-serif}a{color:var(--color-accent);text-underline-offset:3px}a:hover{color:var(--color-accent-hover)}:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}aside{position:fixed;inset:0 auto 0 0;width:230px;padding:34px 26px;border-right:1px solid var(--color-border);background:var(--color-panel);overflow:auto}.brand{display:block;font-size:26px;font-weight:700;letter-spacing:-1px;text-decoration:none;color:var(--color-text)}.brand span{display:block;font-size:10px;letter-spacing:2px;color:var(--color-text-secondary);margin:6px 0 36px}nav{display:grid;gap:7px}nav a{padding:6px 10px;color:var(--color-text-secondary);text-decoration:none;border-radius:5px}nav a[aria-current]{background:var(--color-selected);color:var(--color-accent)}.return{display:block;margin-top:40px;font-size:12px}main{overflow-wrap:anywhere;max-width:1220px;margin-left:230px;padding:46px 5vw 100px}h1{font-size:36px;letter-spacing:-1.2px;line-height:1.2}h2{font-size:24px;margin-top:48px;border-top:1px solid var(--color-border);padding-top:26px}h3{font-size:18px;margin-top:30px}h4{font-size:15px}p,li{color:var(--color-text-secondary)}code{font:13px/1.6 ui-monospace,monospace;color:var(--color-text);background:var(--color-panel-raised);padding:2px 4px;border-radius:3px;overflow-wrap:anywhere}pre{padding:20px;background:var(--color-field);border:1px solid var(--color-border);border-radius:8px;overflow:auto}pre code{padding:0;background:none;white-space:pre;overflow-wrap:normal}table{display:block;overflow:auto;border-collapse:collapse;font-size:13px;max-width:100%;margin:20px 0}th,td{padding:10px 13px;border:1px solid var(--color-border);text-align:left;vertical-align:top}th{background:var(--color-panel);color:var(--color-text)}blockquote{margin:18px 0;border-left:3px solid var(--color-accent);padding:1px 18px}small{color:var(--color-text-muted)}hr{border:0;border-top:1px solid var(--color-border);margin:30px 0}.skip{position:fixed;left:10px;top:-100px;background:var(--color-app);padding:10px;z-index:2}.skip:focus{top:10px}@media(max-width:850px){aside{position:static;width:auto;padding:20px;border-right:0;border-bottom:1px solid var(--color-border)}.brand span{margin-bottom:12px}nav{display:flex;flex-wrap:wrap;gap:3px;font-size:12px}.return{margin-top:12px}main{margin:0;padding:24px 18px 70px}h1{font-size:30px}}
.syntax-highlighter {
  margin: 20px 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-field);
  color: var(--color-text);
}
.syntax-highlighter__header {
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-panel);
  color: var(--color-text-secondary);
  font: 12px/1.5 var(--font-ui);
}
.syntax-highlighter pre {
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 0;
  overflow: auto;
  background: transparent;
  tab-size: 2;
}
.syntax-highlighter pre:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -3px;
}
.syntax-highlighter pre code {
  padding: 0;
  background: transparent;
  color: var(--color-text);
  font: 13px/1.7 var(--font-mono);
  white-space: pre;
  overflow-wrap: normal;
}
.syntax-highlighter .hljs-comment,
.syntax-highlighter .hljs-quote {
  color: var(--color-text-secondary);
  font-style: italic;
}
.syntax-highlighter .hljs-keyword,
.syntax-highlighter .hljs-selector-tag,
.syntax-highlighter .hljs-literal {
  color: var(--color-code-keyword);
}
.syntax-highlighter .hljs-string,
.syntax-highlighter .hljs-regexp,
.syntax-highlighter .hljs-addition {
  color: var(--color-code-string);
}
.syntax-highlighter .hljs-number,
.syntax-highlighter .hljs-symbol,
.syntax-highlighter .hljs-bullet {
  color: var(--color-code-number);
}
.syntax-highlighter .hljs-title,
.syntax-highlighter .hljs-built_in,
.syntax-highlighter .hljs-type {
  color: var(--color-code-function);
}
.syntax-highlighter .hljs-attr,
.syntax-highlighter .hljs-attribute,
.syntax-highlighter .hljs-variable,
.syntax-highlighter .hljs-meta {
  color: var(--color-code-property);
}
.syntax-highlighter .hljs-deletion {
  color: var(--color-danger);
}

.appearance-select {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font: 12px/1.5 var(--font-ui);
}
.appearance-select select {
  min-width: 88px;
  height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-field);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.appearance-select select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
aside > .appearance-select {
  margin-top: 28px;
  flex-wrap: wrap;
}
@media (max-width: 1200px) {
  .topbar .appearance-select > span {
    display: none;
  }
}

.appearance-toggle {
  display: flex;
}
.appearance-popover {
  position: fixed;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  color: var(--color-text);
  box-shadow: var(--shadow-floating);
}