/* Motion Lab product surfaces only. This file is never loaded by case iframes.
   Optics study: iyinchao/liquid-glass-studio. Reading surfaces stay opaque. */
.motion-lab-app {
  --material-fill: rgba(250, 252, 255, .82);
  --material-reading-fill: rgba(255, 255, 255, .96);
  --material-edge: rgba(255, 255, 255, .92);
  --material-outline: rgba(82, 101, 129, .17);
  --material-shadow: 0 8px 28px rgba(43, 64, 96, .08), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(66, 92, 125, .08);
  --material-blur: blur(24px) saturate(150%);
  --chrome-base-height: 64px;
  background: radial-gradient(ellipse at 3% 0%, rgba(192, 214, 244, .22), transparent 38%), radial-gradient(ellipse at 97% 4%, rgba(219, 210, 240, .18), transparent 35%), var(--bg);
}
.motion-lab-app .site-header {
  inset: var(--space-3) clamp(12px, 2vw, 32px) auto;
  min-height: var(--chrome-base-height);
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 40%, rgba(207, 226, 251, .035)), rgba(255, 255, 255, .09);
  box-shadow: 0 8px 28px rgba(43, 64, 96, .07), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(68, 105, 152, .18);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
}
.motion-lab-app .site-header[data-refraction="svg"] { backdrop-filter: url("#ml-header-refraction") saturate(120%); -webkit-backdrop-filter: url("#ml-header-refraction") saturate(120%); }
.motion-lab-app .site-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(130deg, rgba(255, 255, 255, .95), rgba(218, 236, 255, .2) 30%, rgba(255, 255, 255, .08) 52%, rgba(159, 200, 236, .48) 74%, rgba(255, 255, 255, .86));
  -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;
}
.motion-lab-app .header-optics-definitions { position: fixed; width: 0; height: 0; pointer-events: none; }
.motion-lab-app .site-header .brand,
.motion-lab-app .site-header .site-nav a { text-shadow: 0 1px 1px rgba(255, 255, 255, .65); }
.motion-lab-app .brand-glyph i { animation: none; }
.motion-lab-app .site-nav { background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48), inset 0 -1px 0 rgba(62, 81, 111, .055); }
.motion-lab-app .site-nav a { transition: color var(--motion-feedback) var(--motion-ease-feedback); }
.motion-lab-app .nav-selection {
  transform-origin: 0 0;
  border: 1px solid rgba(255, 255, 255, .75);
  background: linear-gradient(135deg, rgba(255, 255, 255, .56), rgba(248, 251, 255, .24));
  box-shadow: 0 2px 8px rgba(44, 65, 93, .1), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(76, 102, 139, .06);
  pointer-events: none;
}
.motion-lab-app .nav-selection[hidden] { display: none; }
.motion-lab-app .search-trigger,
.motion-lab-app .motion-setting {
  border-color: var(--material-outline);
  background: rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 #fff;
  color: var(--ink);
}
.motion-lab-app #site-shell .ui-button:not(.ui-button-primary):not(.ui-button-accent):not(.ui-button-quiet):not([aria-pressed="true"]):not([aria-expanded="true"]),
.motion-lab-app #site-shell .ui-icon-button:not(.ui-button-quiet):not([aria-pressed="true"]) {
  background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(246, 249, 253, .9));
  border-color: var(--material-outline);
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(49, 70, 101, .035);
}
.motion-lab-app #site-shell .ui-button-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(24, 36, 55, .08);
}
.motion-lab-app #site-shell .ui-card:not(.is-primary),
.motion-lab-app #site-shell .il-course {
  background-image: linear-gradient(150deg, rgba(255, 255, 255, .55), transparent 42%);
  box-shadow: inset 0 1px 0 #fff, var(--shadow-card);
  border-color: rgba(67, 88, 120, .11);
}
.motion-lab-app #site-shell .ui-card-interactive:hover { box-shadow: var(--shadow-lift); }
.motion-lab-app .home-rail,
.motion-lab-app .back-to-top {
  border: 1px solid var(--material-outline);
  background: var(--material-fill);
  box-shadow: var(--material-shadow);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
}
.motion-lab-app .search-dialog {
  border: 1px solid var(--material-edge);
  background: linear-gradient(125deg, rgba(255, 255, 255, .45), transparent 50%), var(--material-reading-fill);
  box-shadow: var(--material-shadow), 0 24px 72px rgba(29, 45, 69, .18);
  backdrop-filter: var(--material-blur);
  -webkit-backdrop-filter: var(--material-blur);
}
.motion-lab-app .search-item[data-active="true"] { background: rgba(0, 113, 227, .08); }
.motion-lab-app .search-foot { background: rgba(237, 243, 251, .45); }
.motion-lab-app .study-sheet { border: 1px solid var(--material-edge); }
.motion-lab-app .sheet-bar {
  background: linear-gradient(120deg, rgba(255, 255, 255, .8), rgba(239, 246, 254, .75));
  box-shadow: inset 0 1px 0 #fff;
  border-bottom-color: var(--material-outline);
}

/* One contained, user-operated optics sample, not a full-page renderer. */
.motion-lab-app .material-lab { margin-block: var(--space-7); padding-block: var(--space-6); border-block: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.motion-lab-app .material-lab-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.motion-lab-app .material-workbench { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(240px, 1fr); border: 1px solid var(--material-outline); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.motion-lab-app .material-preview { min-width: 0; padding: var(--space-5); background: var(--surface-2); }
.motion-lab-app .material-stage-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.motion-lab-app .material-backgrounds, .motion-lab-app .material-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.motion-lab-app .material-mode { font-size: var(--type-eyebrow-size); }
.motion-lab-app .material-stage { position: relative; isolation: isolate; height: 340px; overflow: hidden; border: 1px solid var(--material-outline); border-radius: var(--r-md); background: #e7edf5; }
.motion-lab-app .material-canvas, .motion-lab-app .material-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion-lab-app .material-canvas { display: block; z-index: 1; }
.motion-lab-app .material-stage[data-renderer="css"] .material-canvas { display: none; }
.motion-lab-app .material-fallback { display: flex; flex-direction: column; justify-content: space-around; padding: var(--space-5); background: repeating-linear-gradient(90deg, transparent 0 12%, #ffffff68 12% 21%, transparent 21% 29%), radial-gradient(ellipse at 20% 20%, #a8c8ef, transparent 70%), radial-gradient(ellipse at 90% 40%, #c8b4e7, transparent 70%), #c2dccf; }
.motion-lab-app .material-fallback > span { color: #526783; font: 500 var(--type-meta-size) var(--font-mono); }
.motion-lab-app .material-stage[data-pattern="grid"] .material-fallback { background: linear-gradient(#647b9c38 1px, transparent 1px), linear-gradient(90deg, #647b9c38 1px, transparent 1px), #e7edf5; background-size: 24px 24px; }
.motion-lab-app .material-stage[data-pattern="text"] .material-fallback { background: #f4f5f8; }
.motion-lab-app .material-lens {
  position: absolute; z-index: 2; left: 0; top: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  width: min(224px, calc(100% - 48px)); height: 104px; padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .95); border-radius: var(--r-xl);
  background: rgb(249 252 255 / var(--lens-tint, .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--lens-highlight, .6)), inset 0 -1px 0 #7294c233, 0 10px 24px #34496218;
  backdrop-filter: blur(var(--lens-blur, 14px)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--lens-blur, 14px)) saturate(140%);
  color: #22324b; cursor: grab; touch-action: none; user-select: none;
  -webkit-user-select: none;
}
.motion-lab-app .material-stage[data-renderer="webgl2"] .material-lens { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.motion-lab-app .material-lens[data-dragging="true"] { cursor: grabbing; }
.motion-lab-app .material-lens:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.motion-lab-app .material-lens > svg { flex: none; }
.motion-lab-app .material-lens > span { display: grid; gap: var(--space-2); text-align: left; }
.motion-lab-app .material-lens strong { font-size: var(--type-small-size); font-weight: 600; }
.motion-lab-app .material-lens small { color: #475a74; font-size: var(--type-eyebrow-size); }
.motion-lab-app .material-preview > p { margin-top: var(--space-4); line-height: 1.8; }
.motion-lab-app .material-inspector { display: grid; align-content: start; gap: var(--space-5); padding: var(--space-5); border-left: 1px solid var(--line); }
.motion-lab-app .material-fields { display: grid; gap: var(--space-4); }
.motion-lab-app .material-field > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.motion-lab-app .material-field label { color: var(--ink); }
.motion-lab-app .material-field input { display: block; width: 100%; min-height: 32px; margin: var(--space-1) 0 0; accent-color: var(--accent); cursor: pointer; }
.motion-lab-app .material-field input:disabled { opacity: .45; cursor: not-allowed; }
.motion-lab-app .material-note { margin-top: var(--space-4); min-height: 3.2em; line-height: 1.8; }
.motion-lab-app .material-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.motion-lab-app .material-principles > div { display: grid; gap: var(--space-3); align-content: start; }
.motion-lab-app .material-principles h3 { font-size: var(--type-body-size); }
.motion-lab-app .material-credit { margin-top: var(--space-5); line-height: 1.8; }

@media (max-width: 1100px) {
  .motion-lab-app .site-header { padding-block: var(--space-2); }
}
@media (max-width: 760px) {
  .motion-lab-app .material-workbench { grid-template-columns: 1fr; }
  .motion-lab-app .material-inspector { border-left: 0; border-top: 1px solid var(--line); }
  .motion-lab-app .material-principles { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .motion-lab-app .site-header { padding-inline: var(--space-3); gap: var(--space-2); }
  .motion-lab-app .brand { gap: var(--space-2); }
  .motion-lab-app .header-actions { gap: var(--space-1); }
  .motion-lab-app .search-trigger { padding-inline: var(--space-2); }
  .motion-lab-app .site-header .motion-setting { width: 124px; max-width: 124px; }
  .motion-lab-app .site-nav a { padding-inline: var(--space-2); }
  .motion-lab-app .material-preview, .motion-lab-app .material-inspector { padding: var(--space-4); }
  .motion-lab-app .material-stage { height: 300px; }
}

@supports not (backdrop-filter: blur(1px)) {
  .motion-lab-app { --material-fill: #f9fbfe; --material-reading-fill: #fff; }
  .motion-lab-app .site-header { background: #f9fbfe; }
  .motion-lab-app .material-lens { background: #f5f8fc; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .motion-lab-app { --material-fill: #f9fbfe; --material-reading-fill: #fff; --material-edge: #8493a8; --material-outline: #8493a8; --material-blur: none; background: var(--bg); }
  .motion-lab-app .site-header, .motion-lab-app .search-dialog, .motion-lab-app .home-rail, .motion-lab-app .back-to-top { background: var(--material-fill); }
  .motion-lab-app .site-header[data-refraction] { background: var(--material-fill); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--material-outline); }
  .motion-lab-app .site-header::after { display: none; }
  .motion-lab-app .nav-selection { background: #fff; border-color: #8493a8; }
  .motion-lab-app .sheet-bar { background: #f8faff; }
}
@media (forced-colors: active) {
  .motion-lab-app .site-header, .motion-lab-app .search-dialog, .motion-lab-app .sheet-bar, .motion-lab-app .material-lens { background: Canvas; color: CanvasText; border: 1px solid ButtonText; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .motion-lab-app .nav-selection { background: Highlight; border-color: Highlight; }
  .motion-lab-app .site-nav.has-selection a[aria-current="page"] { color: HighlightText; }
  .motion-lab-app .site-header[data-refraction] { background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .motion-lab-app .site-header::after { display: none; }
  .motion-lab-app .material-canvas { display: none; }
  .motion-lab-app .material-lens small { color: CanvasText; }
}