/* The optical layer stays below labels; content surfaces stay quiet and readable. */
:root {
  --glass-tint: rgb(41 49 66 / .3);
  --glass-highlight: rgb(255 255 255 / .48);
  --glass-shade: rgb(0 0 0 / .5);
  --glass-depth: 0 12px 26px rgb(0 0 0 / .28), 0 2px 5px rgb(0 0 0 / .22);
  --glass-light: rgb(198 220 255 / .13);
}
:root[data-theme='light'] {
  --glass-tint: rgb(255 255 255 / .34);
  --glass-highlight: rgb(255 255 255 / .95);
  --glass-shade: rgb(69 89 120 / .2);
  --glass-depth: 0 12px 28px rgb(45 61 90 / .14), 0 2px 5px rgb(45 61 90 / .08);
  --glass-light: rgb(255 255 255 / .48);
}
/* Broad, low-contrast light gives the transparent material an environment. */
body::before {
  z-index: -1; top: -300px; height: 1100px;
  background: radial-gradient(ellipse at 78% 25%, #537ba532, transparent 55%), radial-gradient(ellipse at 28% 12%, #5c76a023, transparent 40%);
}
:root[data-theme='light'] body::before { background: radial-gradient(ellipse at 78% 25%, #86b8e14a, transparent 55%), radial-gradient(ellipse at 28% 12%, #b4c3d545, transparent 40%); }
html .glass {
  --light-x: 24%; --light-y: 0%; --press: 1;
  position: relative; isolation: isolate;
  border: 0; background: transparent; color: var(--text);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: var(--glass-depth);
  transition: box-shadow .3s, transform .3s cubic-bezier(.22,1.5,.4,1);
}
.glass-surface { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0; pointer-events: none; }
.glass-backdrop, .glass-refraction { position: absolute; inset: 0; border-radius: inherit; }
.glass-backdrop { background: transparent; backdrop-filter: blur(9px) saturate(1.45); -webkit-backdrop-filter: blur(9px) saturate(1.45); }
.glass-refraction { backdrop-filter: var(--glass-filter, none); }
/* Specular light follows geometry and pointer position instead of a uniform border. */
.glass-surface::before {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit;
  background: radial-gradient(ellipse 90% 160% at var(--light-x) var(--light-y), var(--glass-light), transparent 68%), linear-gradient(165deg, #ffffff10, transparent 35%, #00000009 70%, #ffffff0c), var(--glass-tint);
  box-shadow: inset 0 1.5px 1px -1px var(--glass-highlight), inset 1px 0 1px -1px var(--glass-highlight), inset 0 -1.5px 2px -1px var(--glass-shade), inset 0 0 12px -5px rgb(212 231 255 / .24);
}
.glass-surface::after {
  content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px;
  background: linear-gradient(145deg, var(--glass-highlight) 0%, #ffffff22 24%, #ffffff05 45%, #c0daff38 68%, var(--glass-highlight) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9;
}
.glass > :not(.glass-surface):not(.selection-lens) { position: relative; z-index: 2; }
html .glass.is-pressed { transform: scale(.965); box-shadow: 0 5px 12px #00000020; }
html .glass.is-pressed .glass-surface::before { background-color: #c8e4ff12; }
html .glass:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
/* Separate floating groups let the content continue between them. */
.site-header { top: 22px; margin-top: 22px; width: min(1120px, calc(100% - 48px)); }
.site-nav { padding: 0; min-height: 58px; border-radius: 0; gap: 20px; display: grid; grid-template-columns: 1fr auto 1fr; }
.brand-mark { justify-self: start; font-size: 15px; gap: 11px; }
.brand-monogram { color: var(--text); background: linear-gradient(140deg,#9fb4d626,#57769b08); border-top-color: #d6e7ff45; box-shadow: inset 0 1px 2px #ffffff12, 0 4px 12px #00000010; width: 34px; height: 34px; font-size: 12px; }
.nav-links.glass { margin: 0; border-radius: 99px; padding: 5px; gap: 2px; min-height: 56px; }
.nav-links a { min-height: 44px; padding: 11px 22px; font-size: 13px; color: var(--muted); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current='page'] { background: transparent; box-shadow: none; color: var(--text); }
.nav-links a[aria-current='page'] { font-weight: 550; }
.nav-actions { justify-self: end; gap: 10px; }
.icon-button.glass { width: 50px; height: 50px; border-radius: 50%; padding: 0; }
.icon-button.glass svg { width: 19px; height: 19px; }
html .icon-button.glass:hover { transform: scale(1.04); }
html .icon-button.glass.is-pressed { transform: scale(.91); }
/* The active item is a thin overlay, not a second sheet of glass. */
.selection-lens {
  position: absolute; z-index: 1; top: 5px; left: 5px;
  width: var(--lens-width, 72px); height: calc(100% - 10px);
  transform: translateX(var(--lens-x, 0px)); border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, #d6e7ff25, #b1c6e60b 65%, #ecf6ff17);
  box-shadow: inset 0 1px 1px #ffffff40, inset 0 -1px 2px #00000020, 0 2px 5px #00000013;
  transition: transform .42s cubic-bezier(.22,1.2,.36,1), width .42s cubic-bezier(.22,1.2,.36,1);
}
:root[data-theme='light'] .selection-lens { background: linear-gradient(160deg,#ffffff9e,#ffffff30); box-shadow: inset 0 1px 1px white, inset 0 -1px 2px #6886ab1a, 0 2px 6px #35496715; }
html .site-menu.glass { position: absolute; right: 0; top: 65px; width: min(330px,100%); margin: 0; padding: 12px; border-radius: 28px; transform-origin: calc(100% - 25px) 0; }
.site-menu { --glass-tint: color-mix(in srgb,var(--surface) 70%,transparent); }
.site-menu .glass-backdrop { backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); }
.site-menu a { padding: 14px 18px; font-size: 14px; }
/* A restrained tint identifies the action; the edges retain the same optics. */
html .button.glass { border-radius: 99px; padding: 13px 24px; gap: 12px; min-height: 48px; font-size: 13px; }
html .button.glass:hover { transform: translateY(-2px); }
html .button.glass.is-pressed { transform: translateY(1px) scale(.97); }
html .button-primary.glass { color: #f5f9ff; --glass-tint: rgb(46 104 185 / .58); --glass-light: rgb(178 215 255 / .26); --glass-highlight: rgb(220 239 255 / .72); --glass-depth: 0 8px 22px #1c4f862b, 0 3px 7px #00000022; }
:root[data-theme='light'] .button-primary.glass { --glass-tint: rgb(24 81 167 / .86); --glass-highlight: rgb(255 255 255 / .75); }
html .button-quiet.glass { --glass-tint: rgb(135 155 185 / .05); }
html .tabs.glass, html .timeline-bar.glass { padding: 5px; border-radius: 99px; }
.tabs.glass .tab, .timeline-bar.glass .timeline-btn { background: transparent; box-shadow: none; border-color: transparent; }
.tabs.glass .tab.active, .timeline-bar.glass .timeline-btn.active { color: var(--text); background: transparent; box-shadow: none; border-color: transparent; }
.drawing-toolbar.glass { padding: 16px 20px; border-radius: 25px; border: 0; margin-bottom: 24px; gap: 18px; }
.drawing-toolbar.glass .button { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.drawing-toolbar.glass .button-primary { background: var(--text); color: var(--bg); }
.site-header::before { content: ''; position: absolute; z-index: -1; top: -23px; bottom: -20px; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; background: linear-gradient(var(--bg), color-mix(in srgb,var(--bg) 92%,transparent) 45%,transparent); opacity: 0; transition: opacity .25s; }
.site-header.is-scrolled::before { opacity: 1; }
@media(max-width:760px) {
  .site-header { top: 16px; margin-top: 16px; width: calc(100% - 40px); }
  .site-nav { display: flex; min-height: 50px; }
  .nav-links.glass { display: none; }
  .brand-mark { margin-right: auto; }
  .icon-button.glass { width: 46px; height: 46px; }
  html .site-menu.glass { top: 62px; }
  .hero-actions { gap: 18px; flex-wrap: wrap; }
  html .button.glass { padding: 12px 21px; }
  .drawing-toolbar.glass { padding: 18px 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .selection-lens { transition: none; }
  html .glass, html .glass:hover, html .glass.is-pressed { transform: none !important; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  html .glass { background: var(--surface); border: 1px solid var(--muted); }
  .glass-surface { display: none; }
  html .button-primary.glass { background: #245cba; color: #fff; }
  .selection-lens { background: var(--surface-2); box-shadow: none; }
  .site-header::before { display: none; }
}
@media (forced-colors:active) {
  html .glass { border: 1px solid ButtonText; }
  .glass-surface { display: none; }
  .selection-lens { border: 1px solid Highlight; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-backdrop { background: var(--surface); } }
@media print { .glass-surface { display: none; } }