:root {
  --glass-fill: rgba(255, 255, 255, .42);
  --glass-edge: rgba(18, 18, 20, .12);
  --glass-highlight: rgba(255, 255, 255, .96);
  --glass-blur: 24px;
  --glass-shadow: 0 8px 28px rgba(16, 16, 20, .07);
  --glass-inset: inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(255, 255, 255, .45);
}

.glass-surface,
#resources-menu.glass-surface,
#mobile-menu.glass-surface,
#feature-media.glass-surface {
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(245, 245, 247, .2)), var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-inset), var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

.glass-dark {
  color: #fff;
  background: linear-gradient(145deg, rgba(65, 65, 68, .8), rgba(15, 15, 18, .88));
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 5px 16px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.button.glass-action {
  background: linear-gradient(160deg, #3a3a3d, #101012 75%);
  border-color: #242426;
  box-shadow: inset 0 1px 0 #ffffff42, inset 0 0 0 1px #ffffff08, 0 3px 7px #00000018;
  color: #fff;
  transition: transform .16s, box-shadow .16s;
}
.button.glass-action:hover {
  background: linear-gradient(160deg, #4a4a4e, #1b1b1e 75%);
  box-shadow: inset 0 1px 0 #ffffff60, 0 5px 12px #00000024;
}
.button.glass-action:active { transform: translateY(0); box-shadow: inset 0 2px 4px #0006; }

.site-header.glass-surface {
  width: min(1360px, calc(100% - 48px));
  height: 64px;
  top: 14px;
  margin: 14px auto 0;
  padding-inline: 20px;
  border-radius: 20px;
  background: linear-gradient(120deg, #ffffffe0, #f6f6f6b8);
}
.site-header .button.small { min-height: 40px; padding-inline: 15px; border-radius: 12px; }
.resources>button:hover, .resources>button[aria-expanded=true], .login:hover { background: #11111108; }
.login { border-radius: 10px; padding-inline: 10px; }
#resources-menu.glass-surface {
  top: 50px;
  left: 0;
  padding: 7px;
  border-radius: 18px;
  --glass-fill: rgba(255, 255, 255, .46);
  --glass-shadow: 0 16px 40px #0000001c;
}
#resources-menu a:hover, #mobile-menu a:hover { background: #11111108; }
#mobile-menu.glass-surface { top: calc(100% + 8px); left: 0; right: 0; border-radius: 18px; }

.import-form.glass-surface {
  padding: 8px;
  min-height: 64px;
  border-radius: 22px;
  --glass-shadow: 0 16px 36px #11111112, 0 3px 7px #11111105;
}
.import-form .generate { height: 46px; min-height: 46px; border-radius: 15px; }
.import-form:hover { border-color: #11111130; }
.import-form:focus-within { border-color: #11111170; box-shadow: var(--glass-inset), 0 0 0 3px #1111110a, 0 14px 30px #11111112; }
.import-form.has-error { border-color: #6d28d9; }
.clear-file-button { background: #ffffff80; border: 1px solid #11111114; }
.clear-file-button:hover { background: #fff; }
.duration.glass-dark { border-radius: 8px; padding: 2px 6px; }
.reference-caption.glass-dark { border-radius: 8px; padding: 8px 12px; font-size: 10px; }

.feature-tabs.glass-surface { padding: 8px; border-radius: 24px; gap: 4px; }
.feature-tabs button { border-radius: 17px; min-width: 0; }
.feature-tabs button:hover { background: #ffffff6b; }
.feature-tabs button[aria-selected=true], .monochrome .feature-tabs button[aria-selected=true] {
  color: #fff;
  background: linear-gradient(145deg, #424245, #1b1b1e);
  border-color: #ffffff36;
  box-shadow: inset 0 1px 0 #ffffff38, 0 4px 12px #0000001a;
}
.feature-tabs button[aria-selected=true] small { color: #e4e4e7; }
.feature-tabs button[aria-selected=true] .feature-symbol { color: #f4f4f5; }
.feature-tabs button[aria-selected=true]:focus-visible { outline-color: #111; outline-offset: 3px; }
#feature-media.glass-surface { border-radius: 24px; }
#feature-media video { border-radius: 12px; }
.review-card.glass-surface { border-radius: 20px; --glass-shadow: 0 6px 20px #11111106; }
.study-toolbar.glass-surface { border-radius: 15px; --glass-fill: rgba(255, 255, 255, .65); }
.study-toolbar button { border-radius: 10px; }
.study-toolbar button:hover { background: #11111108; }
.study-toolbar button[aria-pressed=true] { color: #fff; background: #28282b; box-shadow: inset 0 1px #ffffff30; }

dialog.glass-surface {
  --glass-fill: rgba(255, 255, 255, .72);
  --glass-blur: 32px;
  --glass-shadow: 0 28px 90px #00000026;
  border-radius: 26px;
  padding: 28px;
}
dialog::backdrop { background: rgba(10, 10, 12, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.close-button { background: #ffffff80; border-color: #11111125; box-shadow: inset 0 1px #fff; transition: background .16s; }
.close-button:hover { background: #fff; }

@media(max-width:767px) {
  :root { --glass-blur: 16px; }
  .site-header.glass-surface { width: calc(100% - 24px); height: 60px; top: 10px; margin-top: 10px; padding-inline: 10px; border-radius: 18px; }
  .site-header .brand img { width: 100px; }
  .site-header .header-actions { gap: 9px; }
  .site-header .login { padding-inline: 4px; }
  .site-header .button.small { font-size: 11px; padding-inline: 10px; }
  .site-header .mobile-toggle { left: calc(50% - 38px); border-radius: 11px; }
  .site-header .mobile-toggle[aria-expanded=true] { background: #1111110a; }
  .import-form.glass-surface { min-height: 112px; padding: 7px; border-radius: 22px; }
  .feature-tabs.glass-surface { padding: 6px; border-radius: 20px; }
  .feature-tabs button { border-radius: 13px; padding: 12px 9px; }
  #feature-media.glass-surface { border-radius: 20px; }
  dialog.glass-surface { padding: 21px; border-radius: 22px; }
  .reference-caption.glass-dark { padding: 5px 7px; font-size: 8px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface, .site-header.glass-surface, #resources-menu.glass-surface, #mobile-menu.glass-surface, #feature-media.glass-surface, dialog.glass-surface { background: #fafafa; }
  .glass-dark { background: #252527; }
}
/* The explicit Glass choice can override the OS preference; Solid remains one click away. */
:root[data-transparency=solid] .glass-surface,
:root[data-transparency=solid] .site-header.glass-surface,
:root[data-transparency=solid] #resources-menu.glass-surface,
:root[data-transparency=solid] #mobile-menu.glass-surface,
:root[data-transparency=solid] #feature-media.glass-surface,
:root[data-transparency=solid] dialog.glass-surface {
  background: #fafafa; backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root[data-transparency=solid] .glass-dark { background: #252527; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-transparency=solid] dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: #10101299; }
@media(prefers-reduced-transparency:reduce) {
  :root:not([data-transparency=glass]) .glass-surface,
  :root:not([data-transparency=glass]) .site-header.glass-surface,
  :root:not([data-transparency=glass]) #resources-menu.glass-surface,
  :root:not([data-transparency=glass]) #mobile-menu.glass-surface,
  :root:not([data-transparency=glass]) #feature-media.glass-surface,
  :root:not([data-transparency=glass]) dialog.glass-surface { background: #fafafa; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root:not([data-transparency=glass]) .glass-dark { background: #252527; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root:not([data-transparency=glass]) dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; background: #10101299; }
}
@media(forced-colors:active) {
  .glass-surface, .site-header.glass-surface, #resources-menu.glass-surface, #mobile-menu.glass-surface, #feature-media.glass-surface, dialog.glass-surface, .glass-dark, :root .feature-tabs button[aria-selected=true], .button.glass-action { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; backdrop-filter: none; }
  .feature-tabs button[aria-selected=true] { outline: 2px solid Highlight; }
  .feature-tabs button[aria-selected=true] small, .feature-tabs button[aria-selected=true] .feature-symbol { color: CanvasText; }
}

.study-toolbar.glass-surface{flex-wrap:wrap}.study-toolbar.glass-surface .study-identity{flex-shrink:0}

dialog.glass-surface p, #access-dialog>p, #sample-dialog #sample-source { color: #3f3f46; }
@media(max-width:360px) {
  .site-header .brand img { width: 90px; }
  .site-header .mobile-toggle { left: calc(50% - 42px); }
}