/* Inazda Glass v1.0.0 (glass.css)
   Frosted and refractive glass surfaces in the Inazda Spatial UI direction. One file, no build step.
   Pair with glass.js (ES module) for refraction, the pointer sheen and the stateful components.

   Tiers      thin (decorative only, never text) · regular · thick · solid. Set with data-tier on .iz-glass.
   Contrast   textSafe tiers keep --iz-glass-text at 4.5:1 or more over ANY backdrop, from pure black to pure
              white, including the sheen at its brightest. See the README for the numbers.
   Solid      html[data-iz-solid] (or any ancestor), prefers-reduced-transparency, forced colours and
              browsers without backdrop-filter all get opaque surfaces with the same text colours.
   Motion     html[data-iz-motion="reduce"] or prefers-reduced-motion stops the sheen tracking, the dock
              magnify and every slide. Colour and opacity changes stay, because they carry state.
   Tokens     --iz-glass-* sit on top of the Inazda --iz-color-* tokens. Defaults use :where(), so any value
              you set yourself wins.

   Each part is fenced with @ig:name and @ig:end comments, so you can copy only what you use. */

/* @ig:tokens */
:where(:root) {
  /* tier fills. textSafe: thin false, regular true, thick true, solid true */
  --iz-glass-fill-thin: rgb(255 255 255 / .45);
  --iz-glass-fill-regular: rgb(255 255 255 / .72);
  --iz-glass-fill-thick: rgb(255 255 255 / .86);
  --iz-glass-fill-solid: #f7f7f8;
  --iz-glass-blur-thin: 10px;
  --iz-glass-blur-regular: 22px;
  --iz-glass-blur-thick: 34px;
  --iz-glass-saturate: 180%;
  --iz-glass-brightness: 1.06;

  /* text and strokes on glass (worst case: see README) */
  --iz-glass-text: var(--iz-color-fg, #0c0c0e);
  --iz-glass-text-muted: #45454d;
  --iz-glass-stroke: #55555e;            /* 3:1 boundaries: fields, switch track, chips */
  --iz-glass-divider: rgb(12 12 14 / .1);
  --iz-glass-accent: var(--iz-color-accent, #4f46e5);
  --iz-glass-on-accent: var(--iz-color-accent-fg, #ffffff);
  --iz-glass-danger: #b91c1c;
  --iz-glass-success: #15803d;
  --iz-glass-ring: #4338ca;
  --iz-glass-ring-halo: #ffffff;

  /* controls inside a glass surface (no backdrop of their own) */
  --iz-glass-control: rgb(255 255 255 / .55);
  --iz-glass-control-hover: rgb(255 255 255 / .82);
  --iz-glass-control-press: rgb(12 12 14 / .06);
  --iz-glass-raised: #ffffff;
  --iz-glass-field: rgb(255 255 255 / .62);
  --iz-glass-track: rgb(12 12 14 / .14);

  /* light and depth */
  --iz-glass-rim-top: rgb(255 255 255 / .95);
  --iz-glass-rim: rgb(255 255 255 / .55);
  --iz-glass-rim-low: rgb(255 255 255 / .12);
  --iz-glass-edge: rgb(12 12 14 / .12);
  --iz-glass-inner: rgb(255 255 255 / .35);
  --iz-glass-shadow: 0 1px 2px rgb(12 12 14 / .06), 0 12px 32px -8px rgb(24 20 60 / .22);
  --iz-glass-shadow-lift: 0 2px 4px rgb(12 12 14 / .08), 0 28px 64px -16px rgb(24 20 60 / .34);
  --iz-glass-sheen: rgb(255 255 255 / .55);
  --iz-glass-sheen-size: 360px;
  --iz-glass-scrim: rgb(12 12 14 / .28);

  /* shape and motion (Inazda radius + motion tokens) */
  --iz-glass-r-sm: var(--iz-radius-sm, 6px);
  --iz-glass-r: var(--iz-radius-md, 10px);
  --iz-glass-r-lg: var(--iz-radius-lg, 14px);
  --iz-glass-r-xl: var(--iz-radius-xl, 20px);
  --iz-glass-r-full: 9999px;
  --iz-glass-fast: 120ms;
  --iz-glass-base: 200ms;
  --iz-glass-slow: 320ms;
  --iz-glass-ease: cubic-bezier(.2, 0, 0, 1);
  --iz-glass-ease-out: cubic-bezier(.16, 1, .3, 1);
  --iz-glass-motion: 1;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    --iz-glass-fill-thin: rgb(24 24 27 / .5);
    --iz-glass-fill-regular: rgb(24 24 27 / .8);
    --iz-glass-fill-thick: rgb(24 24 27 / .88);
    --iz-glass-fill-solid: #18181b;
    --iz-glass-saturate: 160%;
    --iz-glass-brightness: .92;
    --iz-glass-text: var(--iz-color-fg, #f7f7f8);
    --iz-glass-text-muted: #c8c8cf;
    --iz-glass-stroke: #b4b4bc;
    --iz-glass-divider: rgb(255 255 255 / .1);
    --iz-glass-accent: #a5a6fa;
    --iz-glass-on-accent: #0c0c0e;
    --iz-glass-danger: #fca5a5;
    --iz-glass-success: #86efac;
    --iz-glass-ring: #a5a6fa;
    --iz-glass-ring-halo: #0c0c0e;
    --iz-glass-control: rgb(255 255 255 / .08);
    --iz-glass-control-hover: rgb(255 255 255 / .14);
    --iz-glass-control-press: rgb(255 255 255 / .05);
    --iz-glass-raised: #3a3a42;
    --iz-glass-field: rgb(0 0 0 / .28);
    --iz-glass-track: rgb(255 255 255 / .16);
    --iz-glass-rim-top: rgb(255 255 255 / .22);
    --iz-glass-rim: rgb(255 255 255 / .12);
    --iz-glass-rim-low: rgb(255 255 255 / .04);
    --iz-glass-edge: rgb(0 0 0 / .5);
    --iz-glass-inner: rgb(255 255 255 / .05);
    --iz-glass-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 16px 40px -10px rgb(0 0 0 / .6);
    --iz-glass-shadow-lift: 0 2px 4px rgb(0 0 0 / .45), 0 32px 72px -16px rgb(0 0 0 / .75);
    --iz-glass-sheen: rgb(255 255 255 / .06);
    --iz-glass-scrim: rgb(0 0 0 / .5);
  }
}
:where(:root[data-theme="dark"]) {
  --iz-glass-fill-thin: rgb(24 24 27 / .5);
  --iz-glass-fill-regular: rgb(24 24 27 / .8);
  --iz-glass-fill-thick: rgb(24 24 27 / .88);
  --iz-glass-fill-solid: #18181b;
  --iz-glass-saturate: 160%;
  --iz-glass-brightness: .92;
  --iz-glass-text: var(--iz-color-fg, #f7f7f8);
  --iz-glass-text-muted: #c8c8cf;
  --iz-glass-stroke: #b4b4bc;
  --iz-glass-divider: rgb(255 255 255 / .1);
  --iz-glass-accent: #a5a6fa;
  --iz-glass-on-accent: #0c0c0e;
  --iz-glass-danger: #fca5a5;
  --iz-glass-success: #86efac;
  --iz-glass-ring: #a5a6fa;
  --iz-glass-ring-halo: #0c0c0e;
  --iz-glass-control: rgb(255 255 255 / .08);
  --iz-glass-control-hover: rgb(255 255 255 / .14);
  --iz-glass-control-press: rgb(255 255 255 / .05);
  --iz-glass-raised: #3a3a42;
  --iz-glass-field: rgb(0 0 0 / .28);
  --iz-glass-track: rgb(255 255 255 / .16);
  --iz-glass-rim-top: rgb(255 255 255 / .22);
  --iz-glass-rim: rgb(255 255 255 / .12);
  --iz-glass-rim-low: rgb(255 255 255 / .04);
  --iz-glass-edge: rgb(0 0 0 / .5);
  --iz-glass-inner: rgb(255 255 255 / .05);
  --iz-glass-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 16px 40px -10px rgb(0 0 0 / .6);
  --iz-glass-shadow-lift: 0 2px 4px rgb(0 0 0 / .45), 0 32px 72px -16px rgb(0 0 0 / .75);
  --iz-glass-sheen: rgb(255 255 255 / .06);
  --iz-glass-scrim: rgb(0 0 0 / .5);
}
/* @ig:end */

/* @ig:solid */
/* Solid mode: opaque surfaces, no blur, no sheen, no refraction. Text colours do not change.
   Triggers: [data-iz-solid] on html or any ancestor, prefers-reduced-transparency, no backdrop-filter. */
:where([data-iz-solid]:not([data-iz-solid="false"])) {
  --iz-glass-fill-thin: var(--iz-glass-fill-solid);
  --iz-glass-fill-regular: var(--iz-glass-fill-solid);
  --iz-glass-fill-thick: var(--iz-glass-fill-solid);
  --iz-glass-blur-thin: 0px;
  --iz-glass-blur-regular: 0px;
  --iz-glass-blur-thick: 0px;
  --iz-glass-saturate: 100%;
  --iz-glass-brightness: 1;
  --iz-glass-sheen: transparent;
  --iz-glass-rim-top: transparent;
  --iz-glass-rim: var(--iz-glass-divider);
  --iz-glass-rim-low: transparent;
  --iz-glass-inner: transparent;
  --iz-glass-scrim: rgb(12 12 14 / .6);
}
@media (prefers-reduced-transparency: reduce) {
  :where(:root:not([data-iz-solid="false"])) {
    --iz-glass-fill-thin: var(--iz-glass-fill-solid);
    --iz-glass-fill-regular: var(--iz-glass-fill-solid);
    --iz-glass-fill-thick: var(--iz-glass-fill-solid);
    --iz-glass-blur-thin: 0px;
    --iz-glass-blur-regular: 0px;
    --iz-glass-blur-thick: 0px;
    --iz-glass-saturate: 100%;
    --iz-glass-brightness: 1;
    --iz-glass-sheen: transparent;
    --iz-glass-rim-top: transparent;
    --iz-glass-rim: var(--iz-glass-divider);
    --iz-glass-rim-low: transparent;
    --iz-glass-inner: transparent;
    --iz-glass-scrim: rgb(12 12 14 / .6);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(:root) {
    --iz-glass-fill-thin: var(--iz-glass-fill-solid);
    --iz-glass-fill-regular: var(--iz-glass-fill-solid);
    --iz-glass-fill-thick: var(--iz-glass-fill-solid);
    --iz-glass-sheen: transparent;
  }
}
/* @ig:end */

/* @ig:surface */
.iz-glass {
  --_fill: var(--iz-glass-fill-regular);
  --_blur: var(--iz-glass-blur-regular);
  --_ring: 0 0 #0000;
  position: relative;
  isolation: isolate;
  color: var(--iz-glass-text);
  background-color: var(--_fill);
  border-radius: var(--iz-glass-r-xl);
  -webkit-backdrop-filter: blur(var(--_blur)) saturate(var(--iz-glass-saturate)) brightness(var(--iz-glass-brightness));
  backdrop-filter: blur(var(--_blur)) saturate(var(--iz-glass-saturate)) brightness(var(--iz-glass-brightness));
  box-shadow:
    var(--_ring),
    inset 0 1px 0 0 var(--iz-glass-rim-top),
    inset 0 0 0 1px var(--iz-glass-rim),
    inset 0 -10px 24px -18px var(--iz-glass-inner),
    0 0 0 .5px var(--iz-glass-edge),
    var(--iz-glass-shadow);
  transition: background-color var(--iz-glass-base) var(--iz-glass-ease), box-shadow var(--iz-glass-base) var(--iz-glass-ease);
}
.iz-glass[data-tier="thin"] { --_fill: var(--iz-glass-fill-thin); --_blur: var(--iz-glass-blur-thin); }
.iz-glass[data-tier="thick"] { --_fill: var(--iz-glass-fill-thick); --_blur: var(--iz-glass-blur-thick); }
.iz-glass[data-tier="solid"] { --_fill: var(--iz-glass-fill-solid); --_blur: 0px; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* rim light: a 1px gradient border that catches light at the top left */
.iz-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--iz-glass-rim-top), var(--iz-glass-rim-low) 38%, transparent 60%, var(--iz-glass-rim) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* specular sheen: follows the pointer when glass.js is running, rests at the top left otherwise */
.iz-glass[data-sheen]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(var(--iz-glass-sheen-size) circle at var(--iz-sheen-x, 18%) var(--iz-sheen-y, 0%), var(--iz-glass-sheen), transparent 70%);
  opacity: var(--iz-sheen-o, .8);
  transition: opacity var(--iz-glass-slow) var(--iz-glass-ease);
  pointer-events: none;
}
.iz-glass[data-lift] { box-shadow: var(--_ring), inset 0 1px 0 0 var(--iz-glass-rim-top), inset 0 0 0 1px var(--iz-glass-rim), inset 0 -10px 24px -18px var(--iz-glass-inner), 0 0 0 .5px var(--iz-glass-edge), var(--iz-glass-shadow-lift); }

/* text helpers. Never put text on data-tier="thin": use .iz-glass-scrim for a label there. */
.iz-glass-muted { color: var(--iz-glass-text-muted); }
.iz-glass-scrim { background: var(--iz-glass-fill-regular); border-radius: var(--iz-glass-r-sm); padding: 2px 6px; color: var(--iz-glass-text); }
.iz-glass-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.iz-glass-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* focus: a two-tone ring (halo + ring) so it reads at 3:1 over any backdrop */
.iz-glass :focus-visible,
.iz-glass:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; }
.iz-glass:focus-visible { --_ring: 0 0 0 2px var(--iz-glass-ring-halo); }
/* @ig:end */

/* @ig:refract */
/* Refraction bends what is behind the glass through an SVG displacement map. glass.js turns it on only in
   engines that render SVG filters inside backdrop-filter (Chromium); elsewhere the surface stays plain frost.
   It is static, so it stays with reduced motion; solid mode and reduced transparency turn it off. */
:root[data-iz-refract="on"] .iz-glass[data-refract-ready] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* glass.js adds this layer: it carries the frost plus the displacement map, and has no shadow or children,
   so the map lines up with the surface exactly. The tint (--_fill) stays on the surface itself. */
.iz-glass__lens { display: none; }
:root[data-iz-refract="on"] [data-refract-ready] > .iz-glass__lens {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: var(--iz-refract-filter) blur(min(var(--_blur), var(--iz-glass-refract-blur))) saturate(var(--iz-glass-saturate)) brightness(var(--iz-glass-brightness));
  backdrop-filter: var(--iz-refract-filter) blur(min(var(--_blur), var(--iz-glass-refract-blur))) saturate(var(--iz-glass-saturate)) brightness(var(--iz-glass-brightness));
}
/* refracting glass blurs less, so the bend stays visible. Text safety comes from the fill, not the blur. */
.iz-glass[data-refract] { --iz-glass-refract-blur: 8px; }
.iz-glass[data-refract][data-tier="thin"] { --iz-glass-refract-blur: 1.5px; }
/* off in solid mode, with reduced transparency, and on the solid tier */
:where([data-iz-solid]:not([data-iz-solid="false"])) .iz-glass[data-refract-ready],
.iz-glass[data-refract-ready][data-iz-solid]:not([data-iz-solid="false"]),
.iz-glass[data-refract-ready][data-tier="solid"] { -webkit-backdrop-filter: none; backdrop-filter: none; }
:where([data-iz-solid]:not([data-iz-solid="false"])) .iz-glass__lens,
[data-iz-solid]:not([data-iz-solid="false"]) > .iz-glass__lens,
[data-tier="solid"] > .iz-glass__lens { display: none !important; }
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-iz-solid="false"]) .iz-glass__lens { display: none !important; }
}
/* @ig:end */


/* @ig:motion */
@media (prefers-reduced-motion: reduce) { :where(:root:not([data-iz-motion="full"])) { --iz-glass-motion: 0; } }
:where(:root[data-iz-motion="reduce"]) { --iz-glass-motion: 0; }
/* @ig:end */

/* @ig:card */
.iz-g-card { display: grid; gap: 12px; padding: 20px; border-radius: var(--iz-glass-r-xl); }
.iz-g-card__media { aspect-ratio: 16 / 9; margin: -8px -8px 4px; border-radius: calc(var(--iz-glass-r-xl) - 8px); overflow: hidden; }
.iz-g-card__media > * { width: 100%; height: 100%; display: block; object-fit: cover; }
.iz-g-card__eyebrow { color: var(--iz-glass-text-muted); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.iz-g-card__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.iz-g-card__body { margin: 0; color: var(--iz-glass-text-muted); font-size: 14px; line-height: 1.55; }
.iz-g-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* @ig:end */

/* @ig:panel */
.iz-g-panel { display: grid; border-radius: var(--iz-glass-r-xl); overflow: hidden; }
.iz-g-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--iz-glass-divider); }
.iz-g-panel__title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.iz-g-panel__sub { margin: 2px 0 0; color: var(--iz-glass-text-muted); font-size: 13px; }
.iz-g-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--iz-glass-divider); }
.iz-g-panel__row:last-child { border-bottom: 0; }
.iz-g-panel__row > div { min-width: 0; }
.iz-g-panel__label { display: block; font-size: 14px; font-weight: 500; }
.iz-g-panel__hint { display: block; margin-top: 2px; color: var(--iz-glass-text-muted); font-size: 13px; }
.iz-g-panel__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 14px 20px; }
/* @ig:end */

/* @ig:button */
.iz-g-btn {
  --_bg: var(--iz-glass-control);
  --_fg: var(--iz-glass-text);
  --_ring: 0 0 #0000;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--iz-glass-r-full);
  background: var(--_bg);
  color: var(--_fg);
  font: 500 14px/1 inherit;
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--_ring), inset 0 1px 0 0 var(--iz-glass-rim-top), inset 0 0 0 1px var(--iz-glass-rim), 0 1px 2px var(--iz-glass-edge);
  transition: background-color var(--iz-glass-fast) var(--iz-glass-ease), transform var(--iz-glass-fast) var(--iz-glass-ease), box-shadow var(--iz-glass-fast) var(--iz-glass-ease);
  -webkit-tap-highlight-color: transparent;
}
.iz-g-btn:hover { --_bg: var(--iz-glass-control-hover); }
.iz-g-btn:active { transform: scale(calc(1 - .03 * var(--iz-glass-motion))); }
.iz-g-btn:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; --_ring: 0 0 0 2px var(--iz-glass-ring-halo); }
.iz-g-btn[data-variant="primary"] {
  --_bg: var(--iz-glass-accent);
  --_fg: var(--iz-glass-on-accent);
  box-shadow: var(--_ring), inset 0 1px 0 0 rgb(255 255 255 / .35), inset 0 -1px 0 0 rgb(0 0 0 / .12), 0 6px 16px -6px color-mix(in srgb, var(--iz-glass-accent) 70%, transparent);
}
.iz-g-btn[data-variant="primary"]:hover { --_bg: color-mix(in srgb, var(--iz-glass-accent) 88%, var(--iz-glass-text)); }
.iz-g-btn[data-variant="ghost"] { --_bg: transparent; box-shadow: var(--_ring); }
.iz-g-btn[data-variant="ghost"]:hover { --_bg: var(--iz-glass-control); }
.iz-g-btn[data-size="sm"] { min-height: 32px; padding: 0 12px; font-size: 13px; }
.iz-g-btn[data-size="lg"] { min-height: 48px; padding: 0 22px; font-size: 15px; }
.iz-g-btn[data-icon] { width: 40px; padding: 0; }
.iz-g-btn[data-icon][data-size="sm"] { width: 32px; }
.iz-g-btn[data-icon][data-size="lg"] { width: 48px; }
.iz-g-btn[aria-pressed="true"] { --_bg: var(--iz-glass-text); --_fg: var(--iz-glass-fill-solid); }
.iz-g-btn:disabled, .iz-g-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
/* a floating glass button straight over a backdrop: class="iz-glass iz-g-btn" */
.iz-glass.iz-g-btn { --_bg: var(--_fill); box-shadow: var(--_ring), inset 0 1px 0 0 var(--iz-glass-rim-top), inset 0 0 0 1px var(--iz-glass-rim), 0 0 0 .5px var(--iz-glass-edge), var(--iz-glass-shadow); }
.iz-glass.iz-g-btn:hover { --_bg: var(--iz-glass-fill-thick); }
.iz-glass.iz-g-btn[aria-pressed="true"], .iz-glass.iz-g-btn[aria-expanded="true"] { --_bg: var(--iz-glass-fill-thick); }
/* @ig:end */

/* @ig:segmented */
.iz-g-seg {
  --_i: 0;
  --_n: 3;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: var(--iz-glass-r-full);
  background: var(--iz-glass-track);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .08), inset 0 0 0 1px var(--iz-glass-rim-low);
}
.iz-g-seg__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--_n));
  border-radius: var(--iz-glass-r-full);
  background: var(--iz-glass-raised);
  box-shadow: 0 0 0 1.5px var(--iz-glass-stroke), 0 2px 6px rgb(0 0 0 / .14);
  transform: translateX(calc(var(--_i) * 100%));
  transition: transform calc(var(--iz-glass-slow) * var(--iz-glass-motion)) var(--iz-glass-ease-out);
}
.iz-g-seg button {
  position: relative;
  z-index: 1;
  min-height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--iz-glass-r-full);
  background: none;
  color: var(--iz-glass-text);
  font: 500 13px/1 inherit;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.iz-g-seg button[aria-checked="true"] { font-weight: 600; }
.iz-g-seg button:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--iz-glass-ring-halo); }
/* @ig:end */

/* @ig:switch */
.iz-g-switch {
  --_x: 0;
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--iz-glass-r-full);
  background: var(--iz-glass-track);
  box-shadow: inset 0 0 0 1.5px var(--iz-glass-stroke);
  cursor: pointer;
  transition: background-color var(--iz-glass-base) var(--iz-glass-ease), box-shadow var(--iz-glass-base) var(--iz-glass-ease);
}
.iz-g-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--iz-glass-stroke);
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transform: translateX(calc(var(--_x) * 18px));
  transition: transform calc(var(--iz-glass-base) * var(--iz-glass-motion)) var(--iz-glass-ease-out), background-color var(--iz-glass-base) var(--iz-glass-ease);
}
.iz-g-switch[aria-checked="true"] { --_x: 1; background: var(--iz-glass-accent); box-shadow: inset 0 0 0 1.5px var(--iz-glass-accent); }
.iz-g-switch[aria-checked="true"]::after { background: var(--iz-glass-on-accent); }
.iz-g-switch:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; box-shadow: inset 0 0 0 1.5px var(--iz-glass-stroke), 0 0 0 2px var(--iz-glass-ring-halo); }
/* @ig:end */

/* @ig:field */
.iz-g-field { display: grid; gap: 6px; }
.iz-g-field__label { font-size: 13px; font-weight: 500; }
.iz-g-field__hint { color: var(--iz-glass-text-muted); font-size: 12px; }
.iz-g-input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--iz-glass-r);
  background: var(--iz-glass-field);
  color: var(--iz-glass-text);
  font: 400 14px/1.4 inherit;
  font-family: inherit;
  box-shadow: inset 0 0 0 1px var(--iz-glass-stroke), inset 0 1px 2px rgb(0 0 0 / .06);
  transition: box-shadow var(--iz-glass-fast) var(--iz-glass-ease);
}
.iz-g-input::placeholder { color: var(--iz-glass-text-muted); opacity: 1; }
.iz-g-input:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--iz-glass-stroke), 0 0 0 2px var(--iz-glass-ring-halo); }
.iz-g-input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--iz-glass-danger); }
.iz-g-search { position: relative; display: flex; align-items: center; }
.iz-g-search .iz-glass-icon { position: absolute; left: 12px; color: var(--iz-glass-text-muted); pointer-events: none; }
.iz-g-search .iz-g-input { padding-left: 38px; padding-right: 64px; border-radius: var(--iz-glass-r-full); }
.iz-g-search .iz-g-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.iz-g-search__clear { position: absolute; right: 6px; }
.iz-g-search__clear[hidden] { display: none; }
.iz-g-kbd { position: absolute; right: 12px; padding: 2px 6px; border-radius: var(--iz-glass-r-sm); box-shadow: inset 0 0 0 1px var(--iz-glass-stroke); color: var(--iz-glass-text); font: 500 11px/1.4 ui-monospace, monospace; pointer-events: none; }
.iz-g-search__clear:not([hidden]) ~ .iz-g-kbd { display: none; }
.iz-g-results { margin: 8px 0 0; padding: 6px; list-style: none; border-radius: var(--iz-glass-r-lg); }
.iz-g-results li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--iz-glass-r); font-size: 14px; }
.iz-g-results li[aria-selected="true"] { background: var(--iz-glass-control-hover); box-shadow: inset 0 0 0 1.5px var(--iz-glass-stroke); }
.iz-g-results li { cursor: pointer; }
.iz-g-results li[hidden] { display: none; }
.iz-g-results li small { margin-left: auto; color: var(--iz-glass-text-muted); font-size: 12px; }
.iz-g-results li[aria-selected="true"] small { color: var(--iz-glass-text); }
.iz-g-results[hidden] { display: none; }
/* @ig:end */

/* @ig:chip */
.iz-g-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.iz-g-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--iz-glass-r-full);
  background: var(--iz-glass-control);
  color: var(--iz-glass-text);
  font: 500 13px/1 inherit;
  font-family: inherit;
  box-shadow: inset 0 0 0 1px var(--iz-glass-stroke);
  cursor: pointer;
  transition: background-color var(--iz-glass-fast) var(--iz-glass-ease), color var(--iz-glass-fast) var(--iz-glass-ease);
}
.iz-g-chip:hover { background: var(--iz-glass-control-hover); }
.iz-g-chip[aria-pressed="true"] { background: var(--iz-glass-text); color: var(--iz-glass-fill-solid); box-shadow: inset 0 0 0 1px var(--iz-glass-text); }
.iz-g-chip[aria-pressed="true"]::before { content: ""; width: 10px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.iz-g-chip__x { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.iz-g-chip__x:hover { background: var(--iz-glass-control-hover); }
.iz-g-chip:focus-visible, .iz-g-chip__x:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--iz-glass-stroke), 0 0 0 2px var(--iz-glass-ring-halo); }
span.iz-g-chip { cursor: default; padding-right: 8px; }
/* @ig:end */

/* @ig:toolbar */
.iz-g-toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: 100%; padding: 4px; border-radius: var(--iz-glass-r-lg); }
.iz-g-toolbar .iz-g-btn { --_bg: transparent; box-shadow: var(--_ring); border-radius: var(--iz-glass-r); }
.iz-g-toolbar .iz-g-btn:hover { --_bg: var(--iz-glass-control-hover); }
.iz-g-toolbar .iz-g-btn[aria-pressed="true"] { --_bg: var(--iz-glass-text); --_fg: var(--iz-glass-fill-solid); }
.iz-g-toolbar__sep { width: 1px; height: 20px; margin: 0 4px; background: var(--iz-glass-divider); }
/* @ig:end */

/* @ig:navbar */
.iz-g-navbar { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px 8px 16px; border-radius: var(--iz-glass-r-full); }
.iz-g-navbar__brand { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; font-size: 15px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.iz-g-navbar__mark { width: 22px; height: 22px; border-radius: 7px; background: conic-gradient(from 210deg, #ff8a5b, #a78bfa, #60a5fa, #ff8a5b); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.iz-g-navbar__links { display: flex; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.iz-g-navbar__links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--iz-glass-r-full); color: inherit; font-size: 14px; font-weight: 500; text-decoration: none; transition: background-color var(--iz-glass-fast) var(--iz-glass-ease); }
.iz-g-navbar__links a:hover { background: var(--iz-glass-control-hover); }
.iz-g-navbar__links a[aria-current="page"] { background: var(--iz-glass-control); box-shadow: inset 0 0 0 1.5px var(--iz-glass-stroke); }
.iz-g-navbar__end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.iz-g-navbar__menu { display: none; }
.iz-g-navbar__links a:focus-visible, .iz-g-navbar__brand:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--iz-glass-ring-halo); }
@container iz-navbar (max-width: 480px) {
  /* folded: brand, menu button, then the links below. DOM order matches, so Tab order does too. */
  .iz-g-navbar { flex-wrap: wrap; border-radius: var(--iz-glass-r-xl); }
  .iz-g-navbar__menu { display: inline-flex; order: 2; margin-left: auto; }
  .iz-g-navbar__end { display: none; }
  .iz-g-navbar__links { order: 3; flex-basis: 100%; flex-direction: column; margin: 0; padding: 4px 0; }
  .iz-g-navbar__links[data-open="false"] { display: none; }
  .iz-g-navbar__links a { width: 100%; border-radius: var(--iz-glass-r); }
}
.iz-g-navbar-wrap { container: iz-navbar / inline-size; }
/* @ig:end */

/* @ig:tabbar */
.iz-g-tabbar { display: flex; justify-content: space-around; gap: 4px; padding: 6px; border-radius: var(--iz-glass-r-full); }
.iz-g-tabbar ul { display: contents; }
.iz-g-tabbar li { display: contents; }
.iz-g-tabbar a {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 56px;
  min-height: 52px;
  padding: 7px 8px 6px;
  border-radius: var(--iz-glass-r-full);
  color: var(--iz-glass-text);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--iz-glass-base) var(--iz-glass-ease);
}
.iz-g-tabbar a .iz-glass-icon { width: 22px; height: 22px; }
.iz-g-tabbar a:hover { background: var(--iz-glass-control); }
.iz-g-tabbar a[aria-current="page"] { background: var(--iz-glass-text); color: var(--iz-glass-fill-solid); font-weight: 600; }
.iz-g-tabbar a:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--iz-glass-ring-halo); }
/* @ig:end */

/* @ig:dock */
.iz-g-dock {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  padding: 8px;
  border-radius: 24px;
}
@media (max-width: 400px) { .iz-g-dock__app { width: 42px; height: 42px; border-radius: 12px; } .iz-g-dock { gap: 6px; padding: 6px; } }
.iz-g-dock ul { display: contents; }
.iz-g-dock li { position: relative; display: grid; justify-items: center; }
.iz-g-dock__app {
  --_s: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--app, #4f46e5);
  color: #ffffff;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -2px 0 rgb(0 0 0 / .15), 0 4px 10px -4px rgb(0 0 0 / .4);
  margin-inline: calc((var(--_s) - 1) * 22px * var(--iz-glass-motion));
  transform-origin: 50% 100%;
  transform: scale(calc(1 + (var(--_s) - 1) * var(--iz-glass-motion)));
  transition: transform var(--iz-glass-fast) var(--iz-glass-ease-out), margin var(--iz-glass-fast) var(--iz-glass-ease-out);
}
.iz-g-dock__app .iz-glass-icon { width: 24px; height: 24px; stroke-width: 1.8; }
.iz-g-dock__app:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 3px; box-shadow: 0 0 0 3px var(--iz-glass-ring-halo); }
.iz-g-dock__dot { width: 4px; height: 4px; margin-top: 4px; border-radius: 50%; background: var(--iz-glass-text); opacity: 0; }
.iz-g-dock li[data-running] .iz-g-dock__dot { opacity: .8; }
.iz-g-dock__sep { align-self: stretch; width: 1px; margin: 6px 2px 10px; background: var(--iz-glass-divider); }
.iz-g-dock__tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  translate: -50% 4px;
  padding: 5px 10px;
  border-radius: var(--iz-glass-r);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--iz-glass-fast) var(--iz-glass-ease), translate calc(var(--iz-glass-fast) * var(--iz-glass-motion)) var(--iz-glass-ease);
}
.iz-g-dock li:hover .iz-g-dock__tip,
.iz-g-dock li:focus-within .iz-g-dock__tip { opacity: 1; translate: -50% 0; }
/* @ig:end */

/* @ig:menu */
.iz-g-menu-wrap { position: relative; display: inline-block; }
.iz-g-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--iz-glass-r-lg);
  transform-origin: top left;
  transition: opacity var(--iz-glass-fast) var(--iz-glass-ease), transform calc(var(--iz-glass-base) * var(--iz-glass-motion)) var(--iz-glass-ease-out), display var(--iz-glass-base) allow-discrete, overlay var(--iz-glass-base) allow-discrete;
}
.iz-g-menu[data-align="end"] { left: auto; right: 0; transform-origin: top right; }
.iz-g-menu[hidden] { display: none; opacity: 0; transform: scale(calc(1 - .04 * var(--iz-glass-motion))) translateY(calc(-4px * var(--iz-glass-motion))); }
@starting-style { .iz-g-menu:not([hidden]) { opacity: 0; transform: scale(calc(1 - .04 * var(--iz-glass-motion))) translateY(calc(-4px * var(--iz-glass-motion))); } }
.iz-g-menu [role="menuitem"], .iz-g-menu [role="menuitemradio"] {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--iz-glass-r);
  background: none;
  color: var(--iz-glass-text);
  font: 400 14px/1 inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.iz-g-menu [role^="menuitem"]:hover, .iz-g-menu [role^="menuitem"]:focus { outline: none; background: var(--iz-glass-control-hover); box-shadow: inset 0 0 0 1.5px var(--iz-glass-stroke); }
.iz-g-menu [role^="menuitem"] kbd { margin-left: auto; color: var(--iz-glass-text); font: 500 11px/1 ui-monospace, monospace; opacity: .9; }
.iz-g-menu [role^="menuitem"][data-tone="danger"] { color: var(--iz-glass-danger); }
.iz-g-menu [role="menuitemradio"]::before { content: ""; flex: none; width: 10px; height: 6px; margin: -3px 2px 0; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); opacity: 0; }
.iz-g-menu [role="menuitemradio"][aria-checked="true"]::before { opacity: 1; }
.iz-g-menu__sep { height: 1px; margin: 6px 4px; background: var(--iz-glass-divider); }
/* @ig:end */

/* @ig:toast */
.iz-g-toaster { display: grid; gap: 10px; width: min(380px, 100%); margin: 0; padding: 0; list-style: none; }
.iz-g-toaster[data-fixed] { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); }
.iz-g-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--iz-glass-r-lg);
  transition: opacity var(--iz-glass-base) var(--iz-glass-ease), transform calc(var(--iz-glass-base) * var(--iz-glass-motion)) var(--iz-glass-ease-out);
}
@starting-style { .iz-g-toast { opacity: 0; transform: translateY(calc(12px * var(--iz-glass-motion))) scale(calc(1 - .03 * var(--iz-glass-motion))); } }
.iz-g-toast[data-leaving] { opacity: 0; transform: translateX(calc(24px * var(--iz-glass-motion))); }
.iz-g-toast__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--iz-glass-accent); color: var(--iz-glass-on-accent); }
.iz-g-toast[data-tone="success"] .iz-g-toast__icon { background: var(--iz-glass-success); color: var(--iz-glass-fill-solid); }
.iz-g-toast[data-tone="danger"] .iz-g-toast__icon { background: var(--iz-glass-danger); color: var(--iz-glass-fill-solid); }
.iz-g-toast__icon .iz-glass-icon { width: 16px; height: 16px; stroke-width: 2; }
.iz-g-toast__title { margin: 3px 0 0; font-size: 14px; font-weight: 600; }
.iz-g-toast__body { margin: 2px 0 0; color: var(--iz-glass-text-muted); font-size: 13px; line-height: 1.45; }
.iz-g-toast__action { margin-top: 10px; }
/* @ig:end */

/* @ig:modal */
.iz-g-modal {
  position: fixed; /* .iz-glass sets relative; a modal dialog must stay fixed or opening it scrolls the page */
  inset: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: auto;
  overscroll-behavior: contain;
  transition: opacity var(--iz-glass-base) var(--iz-glass-ease), transform calc(var(--iz-glass-slow) * var(--iz-glass-motion)) var(--iz-glass-ease-out), display var(--iz-glass-slow) allow-discrete, overlay var(--iz-glass-slow) allow-discrete;
}
.iz-g-modal:not([open]) { opacity: 0; transform: translateY(calc(16px * var(--iz-glass-motion))) scale(calc(1 - .03 * var(--iz-glass-motion))); }
@starting-style { .iz-g-modal[open] { opacity: 0; transform: translateY(calc(16px * var(--iz-glass-motion))) scale(calc(1 - .03 * var(--iz-glass-motion))); } }
.iz-g-modal::backdrop {
  background: var(--iz-glass-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity var(--iz-glass-base) var(--iz-glass-ease), display var(--iz-glass-slow) allow-discrete, overlay var(--iz-glass-slow) allow-discrete;
}
.iz-g-modal:not([open])::backdrop { opacity: 0; }
@starting-style { .iz-g-modal[open]::backdrop { opacity: 0; } }
.iz-g-modal__inner { display: grid; gap: 12px; padding: 24px; }
.iz-g-modal__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.iz-g-modal__body { margin: 0; color: var(--iz-glass-text-muted); font-size: 14px; line-height: 1.55; }
.iz-g-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.iz-g-modal__close { position: absolute; top: 12px; right: 12px; }
.iz-g-modal[data-variant="sheet"] { width: min(560px, 100vw); margin: auto auto 0; border-radius: 28px 28px 0 0; max-height: 86dvh; }
.iz-g-modal[data-variant="sheet"]:not([open]) { transform: translateY(calc(100% * var(--iz-glass-motion))); }
@starting-style { .iz-g-modal[data-variant="sheet"][open] { transform: translateY(calc(100% * var(--iz-glass-motion))); } }
.iz-g-modal__grab { width: 40px; height: 5px; margin: 10px auto -6px; border-radius: 3px; background: var(--iz-glass-stroke); opacity: .6; }
@media (prefers-reduced-transparency: reduce) { .iz-g-modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* @ig:end */

/* @ig:sidebar */
.iz-g-sidebar { display: flex; flex-direction: column; gap: 4px; width: 248px; padding: 12px; border-radius: var(--iz-glass-r-xl); transition: width calc(var(--iz-glass-base) * var(--iz-glass-motion)) var(--iz-glass-ease); }
.iz-g-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 8px; }
.iz-g-sidebar__title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.iz-g-sidebar__group { margin: 8px 0 2px; padding: 0 10px; color: var(--iz-glass-text-muted); font-size: 12px; font-weight: 500; }
.iz-g-sidebar ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.iz-g-sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--iz-glass-r);
  color: var(--iz-glass-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.iz-g-sidebar a:hover { background: var(--iz-glass-control-hover); }
.iz-g-sidebar a[aria-current="page"] { background: var(--iz-glass-text); color: var(--iz-glass-fill-solid); }
.iz-g-sidebar a:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--iz-glass-ring-halo); }
.iz-g-sidebar__count { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.iz-g-sidebar[data-collapsed="true"] { width: 68px; }
.iz-g-sidebar[data-collapsed="true"] .iz-g-sidebar__label,
.iz-g-sidebar[data-collapsed="true"] .iz-g-sidebar__count,
.iz-g-sidebar[data-collapsed="true"] .iz-g-sidebar__title,
.iz-g-sidebar[data-collapsed="true"] .iz-g-sidebar__group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iz-g-sidebar[data-collapsed="true"] .iz-g-sidebar__head { justify-content: center; }
.iz-g-sidebar[data-collapsed="true"] a { justify-content: center; padding: 0; }
/* @ig:end */

/* @ig:player */
.iz-g-player { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding: 10px 14px 10px 10px; border-radius: 22px; }
.iz-g-player__art { width: 52px; height: 52px; border-radius: 12px; background: var(--art, conic-gradient(from 200deg, #ff8a5b, #e86aa6, #7a6cff, #ff8a5b)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3), 0 4px 12px -4px rgb(0 0 0 / .35); }
.iz-g-player__meta { min-width: 0; }
.iz-g-player__title { margin: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.iz-g-player__by { margin: 1px 0 0; overflow: hidden; color: var(--iz-glass-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.iz-g-player__controls { display: flex; align-items: center; gap: 4px; }
.iz-g-player__controls .iz-g-btn[data-variant="ghost"] { --_fg: var(--iz-glass-text); }
.iz-g-player__seek { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: var(--iz-glass-text); font: 500 12px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.iz-g-range {
  --_p: 30%;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.iz-g-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--iz-glass-text) var(--_p), var(--iz-glass-track) var(--_p)); box-shadow: inset 0 0 0 1px var(--iz-glass-stroke); }
.iz-g-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--iz-glass-text) var(--_p), var(--iz-glass-track) var(--_p)); box-shadow: inset 0 0 0 1px var(--iz-glass-stroke); }
.iz-g-range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--iz-glass-raised); box-shadow: 0 0 0 1.5px var(--iz-glass-stroke), 0 2px 6px rgb(0 0 0 / .3); -webkit-appearance: none; appearance: none; }
.iz-g-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--iz-glass-raised); box-shadow: 0 0 0 1.5px var(--iz-glass-stroke), 0 2px 6px rgb(0 0 0 / .3); }
.iz-g-range:focus-visible { outline: 2px solid var(--iz-glass-ring); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 2px var(--iz-glass-ring-halo); }
@container iz-player (max-width: 420px) {
  .iz-g-player { grid-template-columns: auto minmax(0, 1fr); }
  .iz-g-player__controls { grid-column: 1 / -1; justify-content: center; }
}
.iz-g-player-wrap { container: iz-player / inline-size; }
/* @ig:end */

/* @ig:widgets */
.iz-g-widgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.iz-g-tile { display: grid; align-content: space-between; gap: 10px; min-height: 150px; padding: 16px; border-radius: 22px; }
.iz-g-tile[data-span="2"] { grid-column: span 2; }
@container iz-widgets (max-width: 330px) { .iz-g-tile[data-span="2"] { grid-column: auto; } }
.iz-g-widgets-wrap { container: iz-widgets / inline-size; }
.iz-g-tile__label { display: flex; align-items: center; gap: 6px; color: var(--iz-glass-text-muted); font-size: 12px; font-weight: 500; }
.iz-g-tile__value { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.iz-g-tile__note { margin: 0; color: var(--iz-glass-text-muted); font-size: 13px; line-height: 1.4; }
.iz-g-ring { --_p: .64; width: 56px; height: 56px; }
.iz-g-ring circle { fill: none; stroke-width: 6; }
.iz-g-ring .iz-g-ring__track { stroke: var(--iz-glass-track); }
.iz-g-ring .iz-g-ring__bar { stroke: var(--iz-glass-accent); stroke-linecap: round; stroke-dasharray: calc(var(--_p) * 138.2) 138.2; transform: rotate(-90deg); transform-origin: center; }
.iz-g-bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.iz-g-bars i { flex: 1; height: var(--h); border-radius: 3px; background: var(--iz-glass-text); opacity: .85; }
.iz-g-bars i:last-child { background: var(--iz-glass-accent); opacity: 1; }
/* @ig:end */

/* @ig:notifs */
.iz-g-notifs { position: relative; display: grid; width: min(380px, 100%); margin: 0; padding: 0; list-style: none; }
.iz-g-notif {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 12px;
  padding: 14px 16px;
  border-radius: 20px;
  transform-origin: 50% 0;
  transition: transform calc(var(--iz-glass-slow) * var(--iz-glass-motion)) var(--iz-glass-ease-out), opacity var(--iz-glass-base) var(--iz-glass-ease), margin var(--iz-glass-slow) var(--iz-glass-ease-out);
}
.iz-g-notif__app { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--app, #4f46e5); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .4); }
.iz-g-notif__app .iz-glass-icon { width: 20px; height: 20px; }
.iz-g-notif__title { margin: 0; font-size: 14px; font-weight: 600; }
.iz-g-notif__time { color: var(--iz-glass-text-muted); font-size: 12px; white-space: nowrap; }
.iz-g-notif__body { grid-column: 2 / -1; margin: 0; color: var(--iz-glass-text-muted); font-size: 13px; line-height: 1.45; }
/* collapsed: the first card on top, the next two peek out beneath it */
.iz-g-notifs[data-expanded="false"] .iz-g-notif:nth-child(1) { z-index: 3; }
.iz-g-notifs[data-expanded="false"] .iz-g-notif:nth-child(2) { z-index: 2; transform: translateY(12px) scale(.95); }
.iz-g-notifs[data-expanded="false"] .iz-g-notif:nth-child(3) { z-index: 1; transform: translateY(24px) scale(.9); }
.iz-g-notifs[data-expanded="false"] .iz-g-notif:nth-child(n+4) { visibility: hidden; opacity: 0; }
.iz-g-notifs[data-expanded="false"] .iz-g-notif:nth-child(n+2) > * { visibility: hidden; }
.iz-g-notifs[data-expanded="false"] { padding-bottom: 24px; }
.iz-g-notifs[data-expanded="true"] { gap: 10px; }
.iz-g-notifs[data-expanded="true"] .iz-g-notif { grid-area: auto; }
.iz-g-notifs-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(380px, 100%); margin-bottom: 10px; }
.iz-g-notifs-bar h3, .iz-g-notifs-bar h4 { margin: 0; font-size: 14px; font-weight: 600; }
/* @ig:end */

/* @ig:tooltip */
.iz-g-tip { position: relative; display: inline-flex; }
.iz-g-tip__bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 10; padding: 6px 10px; border-radius: var(--iz-glass-r); font-size: 12px; font-weight: 500; white-space: nowrap; translate: -50% 4px; opacity: 0; pointer-events: none; transition: opacity var(--iz-glass-fast) var(--iz-glass-ease), translate calc(var(--iz-glass-fast) * var(--iz-glass-motion)) var(--iz-glass-ease); }
.iz-g-tip:hover .iz-g-tip__bubble, .iz-g-tip:focus-within .iz-g-tip__bubble { opacity: 1; translate: -50% 0; }
/* @ig:end */

/* @ig:forced */
@media (forced-colors: active) {
  .iz-glass, .iz-glass[data-tier] {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .iz-glass::before, .iz-glass::after, .iz-glass__lens { display: none !important; }
  .iz-glass :focus-visible, .iz-g-btn:focus-visible { outline-color: Highlight; }
  .iz-g-btn, .iz-g-chip, .iz-g-input, .iz-g-seg { border: 1px solid ButtonText; }
  .iz-g-seg__thumb { display: none; }
  .iz-g-seg button[aria-checked="true"], .iz-g-chip[aria-pressed="true"], .iz-g-btn[aria-pressed="true"],
  .iz-g-tabbar a[aria-current="page"], .iz-g-sidebar a[aria-current="page"], .iz-g-navbar__links a[aria-current="page"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText;
  }
  .iz-g-switch { forced-color-adjust: none; border: 1px solid ButtonText; background: Canvas; }
  .iz-g-switch::after { background: ButtonText; }
  .iz-g-switch[aria-checked="true"] { background: Highlight; }
  .iz-g-switch[aria-checked="true"]::after { background: HighlightText; }
  .iz-g-menu [role^="menuitem"]:focus { outline: 2px solid Highlight; }
}
/* @ig:end */