/* PSJ material system: backdrop → clear frame → frosted control → readable text.
 * Do not blur the outer gallery card: nested backdrop roots flatten the demos.
 * Layout and SVG colours retain their meaning; only interface surfaces use glass.
 */
:root {
  --surface-clear:rgba(255,255,255,.16);
  --surface-frost:rgba(255,255,255,.42);
  --surface-solid:rgba(248,252,255,.88);
  --surface-tint:rgba(80,142,222,.06);
  --edge-light:rgba(255,255,255,.92);
  --edge-shade:rgba(84,127,180,.23);
  --material-shadow:0 12px 30px rgba(40,83,138,.11),0 2px 6px rgba(40,83,138,.05);
  --material-highlight:inset 0 1px 0 var(--edge-light),inset 1px 0 0 rgba(255,255,255,.3),inset 0 -1px 0 var(--edge-shade);
  --material-fill:linear-gradient(135deg,var(--surface-frost),var(--surface-clear));
  --material-blur:16px;
}
[data-theme="dark"] {
  --surface-clear:rgba(22,42,69,.25);
  --surface-frost:rgba(26,48,76,.62);
  --surface-solid:rgba(20,36,57,.94);
  --surface-tint:rgba(104,172,246,.1);
  --edge-light:rgba(197,225,255,.32);
  --edge-shade:rgba(0,12,32,.35);
  --material-shadow:0 12px 32px #0004,0 2px 6px #0002;
  --glass-highlight:inset 0 1px 0 var(--edge-light);
  --brand:#87b5ff;
  --muted:#afbdd0;
}
body { background:var(--bg); isolation:isolate; }
body::before { z-index:-2; background:linear-gradient(#e9f5ff33,#c9e2fa33),url('./assets/ice-silk.webp') center / cover; mix-blend-mode:normal; }
body::after { z-index:-1; background:linear-gradient(130deg,#eef8ff33,transparent 50%,#c1dafa22); opacity:1; }
[data-theme="dark"] body::before { background-image:linear-gradient(#09182dcc,#10233dcc),url('./assets/ice-silk.webp'); }
[data-theme="dark"] body::after { background:linear-gradient(130deg,#132d4722,transparent); }
.glass-layer,.glass-card,.glass-panel,.metric-card,.modal-demo,.toast-demo,.code-card,.field,.button,.side-nav,.tab-bar,.chat-bubble,.demo-window,
[data-theme="dark"] :is(.glass-layer,.glass-card,.glass-panel,.metric-card,.modal-demo,.toast-demo,.code-card,.field,.button,.side-nav,.tab-bar,.chat-bubble,.demo-window) {
  background:var(--material-fill); border-color:var(--edge-light) var(--edge-shade) var(--edge-shade) var(--edge-light);
  box-shadow:var(--material-shadow),var(--material-highlight);
  -webkit-backdrop-filter:blur(var(--material-blur)) saturate(145%);
  backdrop-filter:blur(var(--material-blur)) saturate(145%);
}
.site-header,.quickref-toolbar { background:linear-gradient(135deg,var(--surface-solid),var(--surface-frost)); --material-blur:24px; }
.hero h1 { font-size:clamp(34px,4.4vw,58px); line-height:1.18; letter-spacing:-.025em; font-weight:700; }
.hero-demo { min-height:440px; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:0; box-shadow:none; }
.hero .lead { font-size:17px; line-height:1.85; }
.section-heading h2 { font-size:clamp(28px,3vw,38px); letter-spacing:-.02em; line-height:1.25; }
.section-shell { padding:40px 0; scroll-margin-top:115px; }
.section-heading { margin-bottom:26px; }
.glass-panel h3,.glass-card h3 { font-weight:600; }
.button-primary { background:linear-gradient(140deg,#80b6ffb3,#2676f6e6) !important; color:#fff; border-color:#d6eaffcc #2f7df677 #2f7df677 #d6eaffcc; }
.button-danger { background:linear-gradient(135deg,#ffddd966,#f1918644) !important; color:var(--danger); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
.button:active,button:active { transform:translateY(1px) scale(.98); }
.button:disabled,button:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.cheat-grid { align-items:start; gap:22px; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.top-nav a[aria-current] { color:var(--brand); background:var(--surface-tint); }
.cheat-card.glass-panel,.cheat-card.glass-panel:hover,
[data-theme="dark"] .cheat-card.glass-panel {
  background:var(--surface-clear); backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:var(--material-shadow),var(--material-highlight); transform:none;
}
.cheat-card:hover { border-color:var(--edge-light); }
.cheat-meta { padding:19px 20px; background:var(--surface-frost); border-top:1px solid var(--edge-light); }
.cheat-meta span { font-weight:600; letter-spacing:.08em; }
.cheat-meta b { font-weight:600; line-height:1.5; }
.cheat-meta em { display:block; font-weight:400; font-size:12px; }
.cheat-meta p { color:var(--text); opacity:.8; font-weight:400; }
/* Local coloured light crosses behind each control, so blur is actually visible. */
.reference-demo,.cheat-preview,.ui-preview,.motion-stage {
  position:relative; isolation:isolate;
  background:radial-gradient(ellipse at 85% 22%,#70b1ec55,transparent 45%),linear-gradient(135deg,#ffffff18,#cde6ff18) !important;
}
.reference-demo::before,.ui-preview::before,.motion-stage::before {
  content:""; position:absolute; z-index:-1; pointer-events:none; inset:0;
  background:linear-gradient(125deg,transparent 20%,#ffffffa6 20.5%,#ffffff08 23%,transparent 24% 58%,#5da1e526 59%,transparent 73%),radial-gradient(ellipse at 18% 95%,#d5c8f43d,transparent 60%);
}
.reference-demo { min-height:282px; border-radius:24px 24px 0 0; }
.sample-card,.sample-nav,.sample-sidebar aside,.holy aside,.sample-listdetail article,.sample-split section,.sample-hero,.sample-pill,.radius-scale i,.shadow-scale i,
.reference-demo button,.reference-demo select {
  background:var(--material-fill); border:1px solid var(--edge-light); box-shadow:var(--material-highlight),0 7px 18px #2a62a60d;
  -webkit-backdrop-filter:blur(12px) saturate(145%); backdrop-filter:blur(12px) saturate(145%);
}
.sample-split { background:transparent; gap:5px; }
.reference-demo h3 {font-size:16px;}
.reference-demo p {color:var(--text);}
.sample-hero .hero-orb {opacity:.7;}
.demo-source { background:var(--surface-clear); margin:0; padding:12px 20px 18px; }
.demo-source pre { background:var(--surface-solid); border:1px solid var(--glass-border); }
.filter-chips button { font-weight:600; background:var(--material-fill); box-shadow:var(--material-highlight),0 3px 9px #2a62a610; }
.filter-chips button.active { background:linear-gradient(135deg,#6eaaffbc,#327fe7df); color:#fff; border-color:#c7e2ff; }
.quick-search input { background:var(--surface-frost); font-weight:400; }
.demo-window { background:var(--surface-clear); }
.demo-toolbar { background:var(--surface-frost); }
.chat-bubble p {font-weight:500;}
.chat-bubble.user {background:linear-gradient(135deg,#d9f4cbaa,#b6e9a65c); color:#1d4228;}
[data-theme="dark"] .chat-bubble.user {background:#3153449c;}
.demo-body {background:transparent;}
.material-lab {display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center;}
.material-scene {position:relative; isolation:isolate; min-height:270px; overflow:hidden; border-radius:26px; display:grid; place-items:center; background:linear-gradient(145deg,#b5dbfc,#eaf6ff);}
.material-scene::before {content:""; position:absolute; inset:20px -20%; background:repeating-linear-gradient(130deg,transparent 0 70px,#4288d8 71px 110px,transparent 111px 170px,#ffffff 171px 190px); transform:translateX(var(--light-shift,0px));}
.material-specimen {width:70%; padding:24px; position:relative; border:1px solid #ffffffe6; border-radius:22px; background:rgba(255,255,255,var(--lab-opacity,.3)); backdrop-filter:blur(var(--lab-blur,16px)) saturate(145%); -webkit-backdrop-filter:blur(var(--lab-blur,16px)) saturate(145%); box-shadow:0 18px 30px #274c7433,inset 0 1px 0 #fff; color:#17304d;}
.material-specimen b {font-size:22px;}.material-specimen p {font-size:14px;margin:8px 0 0;color:inherit;}
.material-controls label {display:grid;grid-template-columns:90px 1fr 48px;align-items:center;gap:12px;margin:16px 0;font-size:13px;}
.material-controls input {width:100%;accent-color:var(--brand);}.material-controls p {font-size:14px;}
@media(max-width:760px) {.material-lab {grid-template-columns:1fr;}.hero h1 {font-size:38px;}.hero-demo {min-height:380px;}.cheat-grid {gap:18px;}}
@supports not (backdrop-filter:blur(1px)) {.sample-card,.glass-panel,.glass-card,.site-header,.quickref-toolbar,.ui-glass {background:var(--surface-solid) !important;}}

/* Buttons use one continuous optical edge, not four differently coloured borders.
 * The masked ring follows the same radius as the control. Its light fades across
 * the surface, so there are no diagonal joins at the rounded corners.
 * Reserve ::after for loading spinners; the edge must never intercept clicks.
 */
:root { --button-edge:rgba(112,155,204,.22); --button-glint:rgba(255,255,255,.88); }
[data-theme="dark"] { --button-edge:rgba(146,182,225,.2); --button-glint:rgba(212,235,255,.48); }
:is(.button,.ui-button,.filter-chips button,.theme-toggle,.reference-demo button),
[data-theme="dark"] :is(.button,.ui-button,.filter-chips button,.theme-toggle,.reference-demo button) {
  position:relative;
  border-color:var(--button-edge);
  --material-highlight:inset 0 0 0 0 transparent;
  --glass-highlight:inset 0 0 0 0 transparent;
}
:is(.button,.ui-button,.filter-chips button,.theme-toggle,.reference-demo button)::before {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:linear-gradient(145deg,var(--button-glint) 0%,rgba(255,255,255,.36) 32%,transparent 68%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
/* Flat tabs stay flat; their enclosing glass surface supplies the optical edge. */
.ui-tabs .ui-button::before { content:none; }