/* XYDRA OBSIDIAN v1.2.0 | CSS design system | MIT
   Add class="xy-app" to your page root. Tokens alone are safe to import.
   Accent: data-xydra-theme="ember|frost|violet" on <html>.
   Optional: data-xydra-motion="quiet|off", data-xydra-texture="grid|none".
   No fonts, images, network requests, or JavaScript required. */
:root {
  color-scheme: dark;
  --xy-bg: #0b0d12;
  --xy-surface: #13161e;
  --xy-raised: #1b1f29;
  --xy-inset: #0e1118;
  --xy-text: #eef0f6;
  --xy-muted: #a4abba;
  --xy-subtle: #8b94a6;
  --xy-border: #303644;
  --xy-control-border: #697386;
  --xy-accent: #ff806b;
  --xy-accent-rgb: 255, 128, 107;
  --xy-on-accent: #1a0c09;
  --xy-success: #78dba9;
  --xy-warning: #edc37a;
  --xy-danger: #ff94ac;
  --xy-info: #8fcaff;
  --xy-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --xy-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --xy-space-1: .25rem; --xy-space-2: .5rem; --xy-space-3: .75rem;
  --xy-space-4: 1rem; --xy-space-6: 1.5rem; --xy-space-8: 2rem;
  --xy-space-12: 3rem; --xy-space-16: 4rem;
  --xy-radius-sm: 6px; --xy-radius: 12px; --xy-radius-lg: 20px;
  --xy-shadow: 0 16px 40px #00000026, inset 0 1px 0 #ffffff04;
  --xy-ease: cubic-bezier(.2,.8,.2,1);
  --xy-fast: 160ms; --xy-normal: 260ms;
  --xy-content-width: 80rem;
  --xy-panel-padding: 1.5rem;
  --xy-texture-opacity: .28;
  --xy-scale-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='96' viewBox='0 0 72 96'%3E%3Cg fill='none' stroke='%237b879c' stroke-opacity='.18' stroke-width='.7'%3E%3Cpath d='M-36 0 0 24 36 0 72 24 108 0M-36 48 0 72 36 48 72 72 108 48M-36 96 0 120 36 96 72 120 108 96M0-24 36 0 36 48 0 72 0 120M72-24 108 0 108 48 72 72 72 120M-36 0-36 48 0 24 36 48 72 24 108 48'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-xydra-theme="frost"] {
  --xy-accent: #86dce8; --xy-accent-rgb: 134, 220, 232; --xy-on-accent: #08171b;
}
:root[data-xydra-theme="violet"] {
  --xy-accent: #bfa8ff; --xy-accent-rgb: 191, 168, 255; --xy-on-accent: #160c28;
}
:root[data-xydra-density="compact"] { --xy-panel-padding: 1rem; }
.xy-app, .xy-app *, .xy-app *::before, .xy-app *::after { box-sizing: border-box; }
.xy-app {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--xy-bg); color: var(--xy-text);
  font: 400 1rem/1.6 var(--xy-font); -webkit-font-smoothing: antialiased;
  accent-color: var(--xy-accent);
}
.xy-app :where(h1,h2,h3,p,figure,dl) { margin: 0; }
.xy-app :where(h1,h2,h3) { line-height: 1.15; font-weight: 650; letter-spacing: -.035em; }
.xy-app h1 { font-size: clamp(2.5rem,5vw,4.5rem); }
.xy-app h2 { font-size: clamp(1.65rem,3vw,2.5rem); }
.xy-app h3 { font-size: 1.1rem; }
.xy-app :where(a,button,input,select,textarea,summary) { -webkit-tap-highlight-color: transparent; }
.xy-app :where(a,button,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--xy-accent); outline-offset: 4px;
}
.xy-app :where(a) { color: var(--xy-accent); text-underline-offset: .22em; }
.xy-app :where(button,input,select,textarea) { font: inherit; }
.xy-app ::selection { color: var(--xy-text); background: #594457; }
.xy-app :where(code,kbd,pre) { font-family: var(--xy-mono); }
.xy-app :where(img,svg) { max-width: 100%; }
.xy-canvas { position: relative; isolation: isolate; }
.xy-canvas::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 88% 0%,rgba(var(--xy-accent-rgb),.085),transparent 52%),
    radial-gradient(ellipse at 0% 90%,#8a9cda06,transparent 45%);
}
.xy-canvas::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--xy-texture-opacity); background-image: var(--xy-scale-pattern);
  -webkit-mask-image: linear-gradient(140deg,transparent 5%,#000 80%);
  mask-image: linear-gradient(140deg,transparent 5%,#000 80%);
}
:root[data-xydra-texture="grid"] { --xy-scale-pattern: linear-gradient(#7b879c18 1px,transparent 1px),linear-gradient(90deg,#7b879c18 1px,transparent 1px); }
:root[data-xydra-texture="grid"] .xy-canvas::after { background-size: 48px 48px; }
:root[data-xydra-texture="none"] { --xy-texture-opacity: 0; }
.xy-container { width: min(var(--xy-content-width),100% - 3rem); margin-inline: auto; }
.xy-stack { display: grid; gap: var(--xy-space-6); }
.xy-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.xy-between { justify-content: space-between; }
.xy-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(min(100%,16rem),1fr)); }
.xy-muted { color: var(--xy-muted); }
.xy-mono { font-family: var(--xy-mono); font-size: .8rem; }
.xy-kicker { color: var(--xy-accent); font: 500 .69rem/1.5 var(--xy-mono); text-transform: uppercase; letter-spacing: .14em; }
.xy-caption { color: var(--xy-muted); font-size: .85rem; }
.xy-panel {
  min-width: 0; padding: var(--xy-panel-padding); background: var(--xy-surface);
  border: 1px solid var(--xy-border); border-radius: var(--xy-radius);
  box-shadow: var(--xy-shadow);
}
.xy-panel--raised { background: var(--xy-raised); }
.xy-panel--glass { background: #13161ef0; }
@supports (backdrop-filter: blur(16px)) {
  .xy-panel--glass { background: #13161ed9; backdrop-filter: blur(16px); }
}
.xy-divider { height: 1px; margin-block: 1.5rem; border: 0; background: var(--xy-border); }
.xy-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: .65rem;
  min-height: 44px; padding: .65rem 1rem;
  border: 1px solid var(--xy-control-border); border-radius: var(--xy-radius-sm);
  background: var(--xy-raised); color: var(--xy-text); text-decoration: none;
  font: 550 .83rem/1.4 var(--xy-font); cursor: pointer;
  transition: border-color var(--xy-fast),background var(--xy-fast),transform var(--xy-fast) var(--xy-ease);
}
.xy-btn:hover:not(:disabled,[aria-disabled="true"]) { border-color: var(--xy-accent); background: rgba(var(--xy-accent-rgb),.08); transform: translateY(-1px); }
.xy-btn:active:not(:disabled) { transform: translateY(0); }
.xy-btn--primary { background: var(--xy-accent); border-color: var(--xy-accent); color: var(--xy-on-accent); }
.xy-btn--primary:hover:not(:disabled) { background: var(--xy-accent); color: var(--xy-on-accent); filter: brightness(1.08); }
.xy-btn--ghost { background: transparent; border-color: transparent; }
.xy-btn--danger { color: var(--xy-danger); border-color: var(--xy-danger); background: #ff94ac08; }
.xy-btn:disabled, .xy-btn[aria-disabled="true"] { color: var(--xy-muted); background: var(--xy-inset); border-color: var(--xy-border); cursor: not-allowed; }
.xy-badge {
  display: inline-flex; gap: .5rem; align-items: center; width: fit-content;
  padding: .25rem .55rem; border: 1px solid var(--xy-border); border-radius: 5px;
  color: var(--xy-muted); background: var(--xy-inset); font: 500 .67rem/1.5 var(--xy-mono);
}
.xy-badge--success { color: var(--xy-success); border-color: #78dba933; background: #78dba909; }
.xy-badge--warning { color: var(--xy-warning); border-color: #edc37a33; background: #edc37a09; }
.xy-badge--danger { color: var(--xy-danger); border-color: #ff94ac33; background: #ff94ac09; }
.xy-badge--info { color: var(--xy-info); border-color: #8fcaff33; background: #8fcaff09; }
.xy-dot { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xy-field { display: grid; gap: .5rem; color: var(--xy-muted); font-size: .83rem; }
.xy-input {
  width: 100%; min-width: 0; min-height: 44px; padding: .7rem .85rem;
  border: 1px solid var(--xy-control-border); border-radius: var(--xy-radius-sm);
  background: var(--xy-inset); color: var(--xy-text);
}
.xy-input::placeholder { color: var(--xy-subtle); opacity: 1; }
.xy-input[aria-invalid="true"] { border-color: var(--xy-danger); }
.xy-input:disabled { opacity: .65; cursor: not-allowed; }
.xy-switch { display: inline-flex; align-items: center; gap: .7rem; font-size: .85rem; cursor: pointer; }
.xy-switch input {
  appearance: none; margin: 0; width: 38px; height: 22px; flex: 0 0 auto;
  border: 1px solid var(--xy-control-border); border-radius: 30px; background: var(--xy-inset); cursor: pointer;
}
.xy-switch input::before { content: ""; display: block; width: 14px; height: 14px; margin: 3px; border-radius: 50%; background: var(--xy-muted); transition: transform var(--xy-fast); }
.xy-switch input:checked { background: var(--xy-accent); border-color: var(--xy-accent); }
.xy-switch input:checked::before { background: var(--xy-on-accent); transform: translateX(16px); }
.xy-alert { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem; border: 1px solid var(--xy-border); border-left: 2px solid var(--xy-info); border-radius: var(--xy-radius-sm); background: var(--xy-inset); font-size: .85rem; }
.xy-alert--warning { border-left-color: var(--xy-warning); }
.xy-alert--danger { border-left-color: var(--xy-danger); }
.xy-alert--success { border-left-color: var(--xy-success); }
.xy-service { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--xy-text); transition: border-color var(--xy-fast),transform var(--xy-fast) var(--xy-ease); }
.xy-service:hover { border-color: var(--xy-accent); transform: translateY(-2px); }
.xy-service > :nth-child(2) { flex: 1; }
.xy-service h3 { margin-bottom: .25rem; }
.xy-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--xy-border); border-radius: 10px; background: var(--xy-inset); color: var(--xy-accent); font: 600 .85rem var(--xy-mono); }
.xy-metric { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 620; letter-spacing: -.045em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.xy-meter { display: block; width: 100%; height: 5px; border: 0; border-radius: 8px; overflow: hidden; background: var(--xy-border); accent-color: var(--xy-accent); }
.xy-meter::-webkit-progress-bar { background: var(--xy-border); }
.xy-meter::-webkit-progress-value { background: var(--xy-accent); border-radius: 8px; }
.xy-meter::-moz-progress-bar { background: var(--xy-accent); border-radius: 8px; }
.xy-table-wrap { overflow-x: auto; border: 1px solid var(--xy-border); border-radius: var(--xy-radius); }
.xy-table { width: 100%; border-collapse: collapse; text-align: left; background: var(--xy-surface); font-size: .85rem; white-space: nowrap; }
.xy-table th { padding: .85rem 1.1rem; color: var(--xy-muted); background: var(--xy-inset); font: 500 .67rem var(--xy-mono); letter-spacing: .07em; text-transform: uppercase; }
.xy-table td { padding: 1rem 1.1rem; border-top: 1px solid var(--xy-border); }
.xy-table tbody tr:hover { background: #ffffff03; }
.xy-table caption { padding: .75rem; color: var(--xy-muted); text-align: left; }
.xy-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; width: fit-content; border: 1px solid var(--xy-border); border-radius: 9px; background: var(--xy-inset); }
.xy-tabs button { min-height: 38px; padding: .45rem .9rem; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--xy-muted); font-size: .8rem; cursor: pointer; }
.xy-tabs button[aria-pressed="true"] { border-color: var(--xy-border); background: var(--xy-raised); color: var(--xy-text); }
.xy-dialog { width: min(28rem,100% - 2rem); padding: 2rem; color: var(--xy-text); background: var(--xy-surface); border: 1px solid var(--xy-control-border); border-radius: var(--xy-radius-lg); font-family: var(--xy-font); box-shadow: 0 20px 100px #0009; }
.xy-dialog::backdrop { background: #05070bcc; backdrop-filter: blur(5px); }
.xy-dialog h2 { margin-bottom: 1rem; }
.xy-dialog p { color: var(--xy-muted); margin-bottom: 1.5rem; }
.xy-code { display: block; overflow-x: auto; margin: 0; padding: 1.25rem; border: 1px solid var(--xy-border); border-radius: var(--xy-radius); background: var(--xy-inset); color: var(--xy-muted); font: .8rem/1.8 var(--xy-mono); }
.xy-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.xy-skip { position: fixed; top: 1rem; left: 1rem; z-index: 100; transform: translateY(-200%); }
.xy-skip:focus { transform: translateY(0); }
.xy-enter { animation: xy-enter 600ms var(--xy-ease) both; }
.xy-breathe { animation: xy-breathe 12s ease-in-out infinite; }
@keyframes xy-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes xy-breathe { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
:root[data-xydra-motion="off"] .xy-app *, :root[data-xydra-motion="off"] .xy-app *::before, :root[data-xydra-motion="off"] .xy-app *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
:root[data-xydra-motion="quiet"] .xy-breathe { animation: none; opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .xy-app *, .xy-app *::before, .xy-app *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .xy-panel--glass { background: var(--xy-surface); backdrop-filter: none; }
  .xy-dialog::backdrop { background: #05070bf5; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .xy-app :where(.xy-btn,.xy-input,.xy-badge,.xy-switch input) { border: 1px solid ButtonText; }
  .xy-app :focus-visible { outline-color: Highlight; }
  .xy-dot { forced-color-adjust: none; background: CanvasText; }
  .xy-switch input:checked { background: Highlight; }
  .xy-switch input:checked::before { background: HighlightText; }
  .xy-canvas::before,.xy-canvas::after { display: none; }
}
@media (max-width: 640px) {
  .xy-container { width: calc(100% - 2rem); }
  :root { --xy-panel-padding: 1.15rem; }
}

/* v1.1: preferred Obsidian atmosphere. Static scale geometry; light breathes. */
:root[data-xydra-motion="ambient"] .xy-canvas::before { animation: xy-canvas-breathe 14s ease-in-out infinite; }
@keyframes xy-canvas-breathe { 0%,100% { opacity:.55; } 50% { opacity:1; } }
.xy-brand-art { transition: transform 420ms var(--xy-ease),filter 420ms var(--xy-ease); transform-origin:50% 50%; }
.xy-brand-art:hover { transform:translateY(-3px) rotate(-.6deg); filter:brightness(1.06); }

:root[data-xydra-motion="off"] .xy-brand-art:hover { transform:none; }
@media(prefers-reduced-motion:reduce) { .xy-brand-art:hover { transform:none; } }