:root {
  --glass: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2));
  --glass-solid: #fffdfb;
  --glass-plate: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-hl: rgba(255, 255, 255, .22);
  --glass-rim: inset 1px 1px 0 rgba(255, 255, 255, .85), inset -1px -1px 0 rgba(255, 255, 255, .5), inset 0 0 14px rgba(255, 255, 255, .22);
  --glass-edge: color-mix(in srgb, var(--accent) 13%, rgba(255, 255, 255, .6));
  --glass-drop: 0 1px 2px rgba(42, 34, 51, .05), 0 10px 28px -12px color-mix(in srgb, var(--accent) 35%, transparent);
  --glass-drop-sm: 0 1px 2px rgba(42, 34, 51, .05), 0 4px 12px -6px color-mix(in srgb, var(--accent) 38%, transparent);
  --glass-blur: 14px;
  --press: inset 0 1px 2px rgba(79, 53, 133, .1), inset 0 0 0 1px rgba(79, 53, 133, .08);
  --well: color-mix(in srgb, var(--ink) 5%, transparent);
  --well-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 10%, transparent), 0 1px 0 rgba(255, 255, 255, .6);
  --sheet: color-mix(in srgb, var(--surface) 95%, transparent);
  --sheet-shadow: 0 40px 80px -30px rgba(42, 34, 51, .45);
  --veil: color-mix(in srgb, var(--ink) 22%, transparent);
  --goo-fill: #fffdfb;
  --sweep-blend: multiply;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045));
    --glass-solid: #342b3d;
    --glass-hl: rgba(255, 255, 255, .05);
    --glass-rim: inset 1px 1px 0 rgba(255, 255, 255, .16), inset -1px -1px 0 rgba(255, 255, 255, .06), inset 0 0 14px rgba(255, 255, 255, .035);
    --glass-edge: rgba(255, 255, 255, .09);
    --glass-drop: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -14px rgba(0, 0, 0, .7);
    --glass-drop-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 14px -8px rgba(0, 0, 0, .7);
    --press: inset 0 1px 3px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .05);
    --well-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04);
    --veil: rgba(10, 6, 14, .5);
    --sheet-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
    --goo-fill: #382f42;
    --sweep-blend: screen;
  }
}

:root[data-theme="dark"], [data-scheme="dark"] {
  --glass: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045));
  --glass-solid: #342b3d;
  --glass-hl: rgba(255, 255, 255, .05);
  --glass-rim: inset 1px 1px 0 rgba(255, 255, 255, .16), inset -1px -1px 0 rgba(255, 255, 255, .06), inset 0 0 14px rgba(255, 255, 255, .035);
  --glass-edge: rgba(255, 255, 255, .09);
  --glass-drop: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -14px rgba(0, 0, 0, .7);
  --glass-drop-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 14px -8px rgba(0, 0, 0, .7);
  --press: inset 0 1px 3px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .05);
  --well-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .04);
  --veil: rgba(10, 6, 14, .5);
  --sheet-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  --goo-fill: #382f42;
  --sweep-blend: screen;
}

[data-scheme="dark"] {
  --bg: #201a26;
  --surface: #2a2231;
  --ink: #efe8ef;
  --muted: #9c8fa3;
  --accent: #a88be0;
  --accent-deep: #cdb6f0;
  --accent-ink: #241c2e;
  --warm: #d98d66;
  --warm-text: var(--warm);
  --ava-tint: #2e2637;
  --line: #3a3143;
  --ag-haiku: #7fa6dc;
  --ag-sonnet: #8fc0a3;
  --ag-opus: #d9c77e;
  --glass-plate: color-mix(in srgb, #2a2231 80%, transparent);
  --sheet: color-mix(in srgb, #2a2231 95%, transparent);
  --goo-fill: #382f42;
  color: var(--ink);
  background: var(--bg);
}

[data-scheme="light"] {
  --bg: #fbf5f1;
  --surface: #fffdfb;
  --ink: #2a2233;
  --muted: #8d8095;
  --accent: #7c5cbf;
  --accent-deep: #4f3585;
  --accent-ink: #ffffff;
  --warm: #c97854;
  --warm-text: color-mix(in srgb, #c97854 72%, #2a2233);
  --ava-tint: #f4edf9;
  --line: #ecdfd6;
  --ag-haiku: #4d7ab8;
  --ag-sonnet: #5b8f72;
  --ag-opus: #a99442;
  --glass: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .2));
  --glass-solid: #fffdfb;
  --glass-plate: color-mix(in srgb, #fffdfb 80%, transparent);
  --glass-hl: rgba(255, 255, 255, .22);
  --glass-rim: inset 1px 1px 0 rgba(255, 255, 255, .85), inset -1px -1px 0 rgba(255, 255, 255, .5), inset 0 0 14px rgba(255, 255, 255, .22);
  --glass-edge: color-mix(in srgb, #7c5cbf 13%, rgba(255, 255, 255, .6));
  --glass-drop: 0 1px 2px rgba(42, 34, 51, .05), 0 10px 28px -12px color-mix(in srgb, #7c5cbf 35%, transparent);
  --glass-drop-sm: 0 1px 2px rgba(42, 34, 51, .05), 0 4px 12px -6px color-mix(in srgb, #7c5cbf 38%, transparent);
  --press: inset 0 1px 2px rgba(79, 53, 133, .1), inset 0 0 0 1px rgba(79, 53, 133, .08);
  --well-shadow: inset 0 1px 3px color-mix(in srgb, #2a2233 10%, transparent), 0 1px 0 rgba(255, 255, 255, .6);
  --sheet: color-mix(in srgb, #fffdfb 95%, transparent);
  --veil: color-mix(in srgb, #2a2233 22%, transparent);
  --goo-fill: #fffdfb;
  --sweep-blend: multiply;
  color: var(--ink);
  background: var(--bg);
}

.ava-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.glass-surface {
  background: var(--glass), var(--glass-plate);
  box-shadow: var(--glass-rim), 0 0 0 1px var(--glass-edge), var(--glass-drop);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-frost {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  }
}