@northstar-js/react 0.1.0 → 0.2.0

package/dist/styles.css

@@ -111,7 +111,8 @@
   height: var(--ns-h, var(--ns-size-control-md));
   padding: 0 var(--ns-px, var(--ns-space-12));
   border: 1px solid var(--ns-color-line-2);
-  border-radius: var(--ns-radius-6);
+  --ns-button-radius: var(--ns-radius-control-pill);
+  border-radius: var(--ns-button-radius);
   background: var(--ns-color-surface-2);
   color: var(--ns-color-text-1);
   font: inherit;
@@ -136,8 +137,8 @@
   color: var(--ns-button-primary-fg);
 }
 .ns-button--primary:hover:not(:disabled) {
-  background: var(--ns-glacier-200);
-  border-color: var(--ns-glacier-200);
+  background: var(--ns-button-primary-hover);
+  border-color: var(--ns-button-primary-hover);
 }
 .ns-button--ghost {
   background: transparent;
@@ -152,6 +153,9 @@
 .ns-button[data-loading] .ns-button__label { opacity: 0.7; }
 .ns-icon-button { width: var(--ns-h, var(--ns-size-control-md)); padding: 0; }
 .ns-icon-button svg { width: var(--ns-size-icon-sm); height: var(--ns-size-icon-sm); }
+/* Icon-only: a perfect circle (pill radius on a square), the icon centred on both axes. */
+.ns-icon-button:not(.ns-expand-host) { aspect-ratio: 1; flex: none; }
+.ns-icon-button:not(.ns-expand-host) > .ns-button__label { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
 
 .ns-spinner {
   width: 12px;
@@ -167,8 +171,9 @@
 .ns-button-group--attached { gap: 0; }
 .ns-button-group--attached > .ns-button { border-radius: 0; }
 .ns-button-group--attached > .ns-button + .ns-button { margin-left: -1px; }
-.ns-button-group--attached > .ns-button:first-child { border-radius: var(--ns-radius-6) 0 0 var(--ns-radius-6); }
-.ns-button-group--attached > .ns-button:last-child { border-radius: 0 var(--ns-radius-6) var(--ns-radius-6) 0; }
+.ns-button-group--attached > .ns-button:first-child { border-radius: var(--ns-button-radius) 0 0 var(--ns-button-radius); }
+.ns-button-group--attached > .ns-button:last-child { border-radius: 0 var(--ns-button-radius) var(--ns-button-radius) 0; }
+.ns-button-group--attached > .ns-button:only-child { border-radius: var(--ns-button-radius); }
 .ns-button-group--attached > .ns-button:focus-visible { position: relative; z-index: 1; }
 
 .ns-link {
@@ -657,7 +662,7 @@
 
 .ns-pagination { display: flex; align-items: center; gap: var(--ns-space-4); }
 .ns-pagination ul { display: flex; align-items: center; gap: var(--ns-space-2); margin: 0; padding: 0; list-style: none; }
-.ns-pagination__page { min-width: var(--ns-size-control-sm); padding: 0 var(--ns-space-6); font-family: var(--ns-font-family-mono); font-variant-numeric: var(--ns-font-numeric-figures); }
+.ns-pagination__page { min-width: var(--ns-h, var(--ns-size-control-sm)); padding: 0 var(--ns-space-6); font-family: var(--ns-font-family-mono); font-variant-numeric: var(--ns-font-numeric-figures); }
 .ns-pagination__gap { color: var(--ns-color-text-3); padding: 0 var(--ns-space-4); }
 
 /* -------------------------------------------------------- data display */
@@ -791,6 +796,394 @@
 }
 .ns-stale__detail { color: var(--ns-color-text-3); font-weight: var(--ns-font-weight-regular); }
 
+/* ================================================ interaction layer
+   Material (glass), pointer light, springs. Pointer effects have a keyboard
+   twin (:focus-visible / :has(:focus-visible)); every movement stops under
+   reduced motion, glass turns solid under reduced transparency, without
+   backdrop-filter, and in forced colours. */
+
+@property --ns-orbit { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
+
+/* ---------------------------------------------------- surface, card, panel */
+
+.ns-surface,
+.ns-card,
+.ns-panel {
+  position: relative;
+  isolation: isolate;
+  border: 1px solid var(--ns-color-line-1);
+  color: var(--ns-color-text-1);
+}
+.ns-surface.ns-material--solid { background: var(--ns-color-surface-1); }
+.ns-radius-6 { border-radius: var(--ns-radius-6); }
+.ns-radius-8 { border-radius: var(--ns-radius-8); }
+.ns-radius-10 { border-radius: var(--ns-radius-glass-panel); }
+.ns-radius-12 { border-radius: var(--ns-radius-12); }
+.ns-surface.ns-material--solid.ns-depth-1 { box-shadow: var(--ns-elevation-1); }
+.ns-surface.ns-material--solid.ns-depth-2 { box-shadow: var(--ns-elevation-2); }
+.ns-surface.ns-material--solid.ns-depth-3 { box-shadow: var(--ns-elevation-3); background: var(--ns-color-surface-2); }
+
+.ns-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-radius: var(--ns-radius-12);
+  background: var(--ns-color-surface-1);
+  box-shadow: var(--ns-elevation-1);
+  transition: transform var(--ns-motion-duration-release) var(--ns-motion-spring-release),
+    box-shadow var(--ns-motion-duration-200) var(--ns-motion-easing-settle),
+    border-color var(--ns-motion-duration-200) var(--ns-motion-easing-settle);
+}
+.ns-card__header { display: flex; align-items: flex-start; gap: var(--ns-space-12); padding: var(--ns-space-16) var(--ns-space-16) 0; }
+.ns-card__heading { flex: 1; min-width: 0; }
+.ns-card__title { margin: 0; font-size: var(--ns-font-size-15); line-height: var(--ns-font-line-height-15); font-weight: var(--ns-font-weight-semibold); }
+.ns-card__description { margin: var(--ns-space-4) 0 0; color: var(--ns-color-text-2); }
+.ns-card__actions { display: flex; gap: var(--ns-space-6); }
+.ns-card__body { flex: 1; padding: var(--ns-space-16); }
+.ns-card__header + .ns-card__body { padding-top: var(--ns-space-12); }
+.ns-card__footer { display: flex; justify-content: flex-end; gap: var(--ns-space-8); padding: var(--ns-space-12) var(--ns-space-16); border-top: 1px solid var(--ns-color-line-1); }
+.ns-card--interactive { cursor: pointer; }
+.ns-card--interactive:hover,
+.ns-card--interactive:has(:focus-visible) {
+  transform: translateY(var(--ns-material-lift));
+  border-color: var(--ns-color-line-2);
+  box-shadow: var(--ns-elevation-2), 0 12px 32px -18px var(--ns-material-glow);
+}
+.ns-card--interactive:active {
+  transform: translateY(0) scale(0.995);
+  transition-duration: var(--ns-motion-duration-press);
+  transition-timing-function: var(--ns-motion-spring-press);
+}
+
+.ns-panel { border-radius: var(--ns-radius-8); background: var(--ns-color-surface-1); overflow: hidden; }
+.ns-panel__head { display: flex; align-items: center; gap: var(--ns-space-8); min-height: 40px; padding: 0 var(--ns-space-12); border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-panel__title { margin: 0; font-size: var(--ns-font-size-13); line-height: var(--ns-font-line-height-13); font-weight: var(--ns-font-weight-medium); }
+.ns-panel__actions { margin-left: auto; display: flex; gap: var(--ns-space-6); }
+.ns-panel__body { padding: var(--ns-space-12); }
+.ns-panel__body--flush { padding: 0; }
+
+/* -------------------------------------------------------------- glass */
+
+.ns-material--glass,
+.ns-button--glass.ns-button--secondary,
+.ns-button--glass.ns-button--ghost:hover:not(:disabled),
+.ns-tabs--glass .ns-tabs__list {
+  background: var(--ns-material-glass-specular),
+    linear-gradient(var(--ns-material-glass-tint), var(--ns-material-glass-tint)),
+    var(--ns-material-glass-fill);
+  border-color: var(--ns-material-glass-edge);
+  -webkit-backdrop-filter: blur(var(--ns-material-blur-md)) saturate(var(--ns-material-saturate));
+  backdrop-filter: blur(var(--ns-material-blur-md)) saturate(var(--ns-material-saturate));
+  box-shadow: inset 0 1px 0 var(--ns-material-glass-rim), var(--ns-material-shadow);
+}
+.ns-button--glass.ns-button--secondary,
+.ns-button--glass.ns-button--ghost:hover:not(:disabled),
+.ns-tabs--glass .ns-tabs__list {
+  -webkit-backdrop-filter: blur(var(--ns-material-blur-sm)) saturate(var(--ns-material-saturate));
+  backdrop-filter: blur(var(--ns-material-blur-sm)) saturate(var(--ns-material-saturate));
+  box-shadow: inset 0 1px 0 var(--ns-material-glass-rim);
+}
+.ns-depth-1.ns-material--glass {
+  -webkit-backdrop-filter: blur(var(--ns-material-blur-sm)) saturate(var(--ns-material-saturate));
+  backdrop-filter: blur(var(--ns-material-blur-sm)) saturate(var(--ns-material-saturate));
+  box-shadow: inset 0 1px 0 var(--ns-material-glass-rim);
+}
+.ns-depth-3.ns-material--glass,
+.ns-dialog.ns-material--glass,
+.ns-sheet.ns-material--glass {
+  -webkit-backdrop-filter: blur(var(--ns-material-blur-lg)) saturate(var(--ns-material-saturate));
+  backdrop-filter: blur(var(--ns-material-blur-lg)) saturate(var(--ns-material-saturate));
+}
+.ns-material--glass .ns-panel__head,
+.ns-material--glass .ns-card__footer,
+.ns-material--glass .ns-layer__footer,
+.ns-material--glass .ns-menu__separator { border-color: var(--ns-material-glass-edge); }
+.ns-material--glass .ns-menu__separator { background: var(--ns-material-glass-edge); }
+.ns-material--glass .ns-menu__item:focus,
+.ns-material--glass .ns-menu__item:hover { background: var(--ns-material-spotlight); }
+.ns-material--glass .ns-menu__item[aria-disabled='true'] { background: transparent; }
+.ns-overlay:has(+ .ns-material--glass) {
+  opacity: 1;
+  background: color-mix(in srgb, var(--ns-color-ground) 48%, transparent);
+  -webkit-backdrop-filter: blur(var(--ns-material-blur-sm));
+  backdrop-filter: blur(var(--ns-material-blur-sm));
+}
+
+/* ----------------------------------------------------- pointer light */
+
+.ns-reactive::before,
+.ns-button--glass::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background: radial-gradient(360px circle at var(--ns-mx, 50%) var(--ns-my, 0%), var(--ns-material-spotlight), transparent 62%);
+  opacity: 0;
+  transition: opacity var(--ns-motion-duration-200) var(--ns-motion-easing-settle);
+}
+.ns-button--glass::before { background: radial-gradient(80px circle at var(--ns-mx, 50%) var(--ns-my, 0%), var(--ns-material-spotlight), transparent 70%); }
+.ns-reactive[data-pointer]::before,
+.ns-reactive:has(:focus-visible)::before,
+.ns-reactive:focus-visible::before,
+.ns-button--glass[data-pointer]::before,
+.ns-button--glass:focus-visible::before { opacity: 1; }
+
+/* Spotlight: the border lights up where the pointer is (keyboard: along the top). */
+.ns-card--spotlight::after,
+.ns-card--orbit::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  pointer-events: none;
+  background: radial-gradient(200px circle at var(--ns-mx, 50%) var(--ns-my, 0%), var(--ns-color-signal), transparent 70%);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  opacity: 0;
+  transition: opacity var(--ns-motion-duration-200) var(--ns-motion-easing-settle);
+}
+.ns-card--spotlight[data-pointer]::after,
+.ns-card--spotlight:has(:focus-visible)::after,
+.ns-card--spotlight:focus-visible::after { opacity: 1; }
+
+/* Orbit: a short arc of light travels the border. */
+.ns-card--orbit::after {
+  background: conic-gradient(from var(--ns-orbit), transparent 0 70%, var(--ns-color-signal) 86%, transparent 96%);
+  opacity: 0.9;
+  animation: ns-orbit 7s linear infinite;
+}
+@keyframes ns-orbit { to { --ns-orbit: 360deg; } }
+
+/* ------------------------------------------------------------ buttons */
+
+.ns-button {
+  position: relative;
+  isolation: isolate;
+  transform: translate(var(--ns-mag-x, 0px), var(--ns-mag-y, 0px));
+  transition: background-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle),
+    border-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle),
+    color var(--ns-motion-duration-120) var(--ns-motion-easing-settle),
+    box-shadow var(--ns-motion-duration-200) var(--ns-motion-easing-settle),
+    transform var(--ns-motion-duration-release) var(--ns-motion-spring-release);
+}
+.ns-button:active:not(:disabled) {
+  transform: translate(var(--ns-mag-x, 0px), calc(var(--ns-mag-y, 0px) + 0.5px)) scale(var(--ns-material-press));
+  transition-duration: var(--ns-motion-duration-press);
+  transition-timing-function: var(--ns-motion-spring-press);
+}
+.ns-button--primary { box-shadow: inset 0 1px 0 var(--ns-material-glass-rim); }
+.ns-button--primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 var(--ns-material-glass-rim), 0 6px 20px -8px var(--ns-material-glow); }
+.ns-button--primary:active:not(:disabled) { box-shadow: inset 0 1px 2px var(--ns-color-signal), 0 0 0 3px var(--ns-material-glow); }
+.ns-button--secondary:active:not(:disabled) { box-shadow: inset 0 1px 0 var(--ns-color-line-1); }
+.ns-button--glass.ns-button--secondary:hover:not(:disabled) { border-color: var(--ns-color-line-2); }
+
+/* Focus: the ring snaps in from a little way out, with a glacier glow behind it. */
+.ns-button:focus-visible,
+.ns-switch:focus-visible,
+.ns-tabs__trigger:focus-visible,
+.ns-link:focus-visible {
+  box-shadow: 0 0 0 4px var(--ns-color-focus-halo), 0 0 18px 2px var(--ns-material-glow);
+  animation: ns-ring-in var(--ns-motion-duration-200) var(--ns-motion-spring-settle);
+}
+@keyframes ns-ring-in { from { outline-offset: 5px; outline-color: transparent; } }
+
+/* The north star holds still and breathes while its orbit turns round it. */
+.ns-spinner--star { width: 14px; height: 14px; border: 0; border-radius: 0; animation: none; overflow: visible; }
+.ns-spinner__star { transform-box: view-box; transform-origin: 50% 50%; animation: ns-star-breathe 1200ms var(--ns-motion-easing-travel) infinite; }
+.ns-spinner__orbit { opacity: 0.45; stroke-dasharray: 10 31; stroke-linecap: round; transform-box: view-box; transform-origin: 50% 50%; animation: ns-spin 1100ms linear infinite; }
+@keyframes ns-star-breathe { 50% { transform: scale(0.72); opacity: 0.7; } }
+.ns-button[data-success] { border-color: var(--ns-color-signal-edge); }
+.ns-button--primary[data-success] { border-color: var(--ns-button-primary-bg); }
+.ns-button__check { flex: none; animation: ns-check-pop var(--ns-motion-duration-release) var(--ns-motion-spring-release); }
+.ns-button__check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ns-draw var(--ns-motion-duration-320) var(--ns-motion-easing-settle) 60ms forwards; }
+.ns-button:not(.ns-button--primary) .ns-button__check { color: var(--ns-color-signal); }
+@keyframes ns-draw { to { stroke-dashoffset: 0; } }
+@keyframes ns-check-pop { from { transform: scale(0.4) rotate(-20deg); opacity: 0; } }
+
+/* -------------------------------------------------------------- links */
+
+.ns-link {
+  text-decoration: none;
+  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--ns-color-signal-edge), var(--ns-color-signal-edge));
+  background-size: 0% 1px, 100% 1px;
+  background-position: 0 100%, 0 100%;
+  background-repeat: no-repeat;
+  padding-bottom: 1px;
+  transition: background-size var(--ns-motion-duration-320) var(--ns-motion-easing-settle), color var(--ns-motion-duration-120) var(--ns-motion-easing-settle);
+}
+.ns-link--neutral { background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--ns-color-line-2), var(--ns-color-line-2)); }
+.ns-link:hover,
+.ns-link:focus-visible { background-size: 100% 1px, 100% 1px; }
+
+/* -------------------------------------------------------------- forms */
+
+.ns-input,
+.ns-select,
+.ns-textarea {
+  transition: border-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle),
+    box-shadow var(--ns-motion-duration-200) var(--ns-motion-easing-settle);
+}
+.ns-input:focus-within,
+.ns-select:focus-within,
+.ns-textarea:focus-visible {
+  border-color: var(--ns-color-signal-edge);
+  box-shadow: 0 0 0 4px var(--ns-color-focus-halo), 0 0 22px -4px var(--ns-material-glow);
+}
+
+.ns-switch { transition: background-color var(--ns-motion-duration-200) var(--ns-motion-easing-settle), border-color var(--ns-motion-duration-200) var(--ns-motion-easing-settle), box-shadow var(--ns-motion-duration-200) var(--ns-motion-easing-settle); }
+.ns-switch[aria-checked='true'] { box-shadow: 0 0 12px -3px var(--ns-material-glow); }
+.ns-switch__thumb {
+  transition: transform var(--ns-motion-duration-release) var(--ns-motion-spring-release),
+    width var(--ns-motion-duration-press) var(--ns-motion-spring-press),
+    background-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle);
+}
+.ns-switch:active:not(:disabled) .ns-switch__thumb { width: 15px; }
+.ns-switch[aria-checked='true']:active:not(:disabled) .ns-switch__thumb { transform: translateX(9px); }
+
+/* --------------------------------------------------------------- tabs */
+
+.ns-tabs__list { position: relative; }
+.ns-tabs__trigger { z-index: 1; transition: color var(--ns-motion-duration-120) var(--ns-motion-easing-settle); }
+.ns-tabs__indicator { position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 0; pointer-events: none; opacity: 0; }
+.ns-tabs__list[data-indicator] .ns-tabs__indicator { opacity: 1; }
+.ns-tabs__list[data-indicator='ready'] .ns-tabs__indicator {
+  transition: transform var(--ns-motion-duration-settle) var(--ns-motion-spring-settle),
+    width var(--ns-motion-duration-settle) var(--ns-motion-spring-settle),
+    height var(--ns-motion-duration-settle) var(--ns-motion-spring-settle);
+}
+.ns-tabs__list[data-indicator] .ns-tabs__trigger[aria-selected='true']::after { display: none; }
+.ns-tabs__indicator::after { content: ''; position: absolute; left: var(--ns-space-8); right: var(--ns-space-8); bottom: -1px; height: 2px; border-radius: 1px; background: var(--ns-color-signal); }
+.ns-tabs--vertical .ns-tabs__indicator { border-radius: var(--ns-radius-4); background: var(--ns-color-surface-2); }
+.ns-tabs--vertical .ns-tabs__indicator::after { left: 0; right: auto; top: var(--ns-space-6); bottom: var(--ns-space-6); width: 2px; height: auto; }
+.ns-tabs--vertical .ns-tabs__list[data-indicator] .ns-tabs__trigger[aria-selected='true'] { background: transparent; }
+
+.ns-tabs--pill .ns-tabs__list { display: inline-flex; gap: var(--ns-space-2); padding: 3px; border: 1px solid var(--ns-color-line-1); border-radius: var(--ns-radius-control-pill); background: var(--ns-color-surface-1); }
+.ns-tabs--pill.ns-tabs--vertical .ns-tabs__list { padding-right: 3px; border-right: 1px solid var(--ns-color-line-1); }
+.ns-tabs--pill .ns-tabs__trigger { height: calc(var(--ns-control-h, var(--ns-size-control-md)) - 6px); padding: 0 var(--ns-space-12); border-radius: var(--ns-radius-control-pill); }
+.ns-tabs--pill .ns-tabs__trigger[aria-selected='true']::after,
+.ns-tabs--pill .ns-tabs__indicator::after { display: none; }
+.ns-tabs--pill .ns-tabs__list:not([data-indicator]) .ns-tabs__trigger[aria-selected='true'],
+.ns-tabs--pill .ns-tabs__indicator { background: var(--ns-color-surface-3); box-shadow: inset 0 0 0 1px var(--ns-color-line-2); border-radius: var(--ns-radius-control-pill); }
+.ns-tabs--glass .ns-tabs__indicator {
+  background: var(--ns-material-glass-specular), linear-gradient(var(--ns-material-spotlight), var(--ns-material-spotlight)), var(--ns-material-glass-fill);
+  box-shadow: inset 0 1px 0 var(--ns-material-glass-rim), inset 0 0 0 1px var(--ns-material-glass-edge), 0 4px 14px -6px var(--ns-material-glow);
+}
+
+/* ---------------------------------------------------- layers: springs */
+
+.ns-pop[data-state] { --ns-pop-x: 0px; --ns-pop-y: -4px; transform-origin: top center; }
+.ns-pop[data-side='top'],
+.ns-tooltip[data-side='top'] { --ns-pop-y: 4px; transform-origin: bottom center; }
+.ns-pop[data-side='left'],
+.ns-tooltip[data-side='left'] { --ns-pop-x: 4px; --ns-pop-y: 0px; transform-origin: center right; }
+.ns-pop[data-side='right'],
+.ns-tooltip[data-side='right'] { --ns-pop-x: -4px; --ns-pop-y: 0px; transform-origin: center left; }
+.ns-tooltip[data-side='bottom'] { --ns-pop-y: -4px; }
+.ns-pop[data-state='open'],
+.ns-tooltip[data-state='open'] { animation: ns-layer-in var(--ns-motion-duration-release) var(--ns-motion-spring-settle); }
+.ns-pop[data-state='closed'],
+.ns-tooltip[data-state='closed'] { animation: ns-layer-out var(--ns-motion-duration-120) var(--ns-motion-easing-exit) forwards; pointer-events: none; }
+@keyframes ns-layer-in { from { opacity: 0; transform: translate(var(--ns-pop-x, 0px), var(--ns-pop-y, 4px)) scale(0.96); } }
+@keyframes ns-layer-out { to { opacity: 0; transform: translate(var(--ns-pop-x, 0px), var(--ns-pop-y, 4px)) scale(0.97); } }
+
+.ns-overlay[data-state='closed'] { animation: ns-fade-out var(--ns-motion-duration-200) var(--ns-motion-easing-exit) forwards; }
+@keyframes ns-fade-out { to { opacity: 0; } }
+.ns-dialog[data-state='open'] { animation: ns-dialog-in var(--ns-motion-duration-settle) var(--ns-motion-spring-settle); }
+.ns-dialog[data-state='closed'] { animation: ns-dialog-out var(--ns-motion-duration-200) var(--ns-motion-easing-exit) forwards; pointer-events: none; }
+@keyframes ns-dialog-in { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(0.96); } }
+@keyframes ns-dialog-out { to { opacity: 0; transform: translate(-50%, calc(-50% + 6px)) scale(0.98); } }
+.ns-sheet[data-state='open'] { animation: ns-sheet-in var(--ns-motion-duration-320) var(--ns-motion-easing-enter); }
+.ns-sheet[data-state='closed'] { animation: ns-sheet-in var(--ns-motion-duration-200) var(--ns-motion-easing-exit) reverse forwards; pointer-events: none; }
+.ns-sheet--right { --ns-sheet-from: translateX(32px); }
+.ns-sheet--left { --ns-sheet-from: translateX(-32px); }
+.ns-sheet--bottom { --ns-sheet-from: translateY(32px); }
+@keyframes ns-sheet-in { from { opacity: 0; transform: var(--ns-sheet-from); } }
+
+.ns-toaster__item { animation: ns-toast-in var(--ns-motion-duration-release) var(--ns-motion-spring-release); }
+@keyframes ns-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
+.ns-toast { transition: transform var(--ns-motion-duration-release) var(--ns-motion-spring-release), border-color var(--ns-motion-duration-200) var(--ns-motion-easing-settle); }
+.ns-toaster__item:hover .ns-toast,
+.ns-toaster__item:focus-within .ns-toast { transform: translateY(-1px); border-color: var(--ns-color-line-2); }
+.ns-toast.ns-material--glass.ns-tone-signal { border-left-color: var(--ns-color-signal); }
+
+.ns-menu__item,
+.ns-option { transition: background-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle); }
+
+/* --------------------------------------------------------- data, tags */
+
+.ns-table--interactive tbody .ns-table__row {
+  transition: transform var(--ns-motion-duration-release) var(--ns-motion-spring-release),
+    box-shadow var(--ns-motion-duration-200) var(--ns-motion-easing-settle),
+    background-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle);
+}
+.ns-table--interactive tbody .ns-table__row:hover,
+.ns-table--interactive tbody .ns-table__row:has(:focus-visible) {
+  position: relative;
+  z-index: 1;
+  background: var(--ns-color-surface-2);
+  transform: translateY(-1px);
+  box-shadow: 0 1px 0 var(--ns-color-line-2), 0 8px 20px -14px var(--ns-material-glow);
+}
+.ns-table--interactive tbody .ns-table__row:hover > :first-child,
+.ns-table--interactive tbody .ns-table__row:has(:focus-visible) > :first-child { box-shadow: inset 2px 0 0 var(--ns-color-signal); }
+
+.ns-tag { transition: border-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle), box-shadow var(--ns-motion-duration-200) var(--ns-motion-easing-settle); }
+.ns-tag:has(.ns-tag__remove):hover { border-color: var(--ns-color-text-3); }
+.ns-tag.ns-tone-signal:has(.ns-tag__remove):hover { border-color: var(--ns-color-signal); box-shadow: 0 0 10px -3px var(--ns-material-glow); }
+.ns-tag__remove { transition: transform var(--ns-motion-duration-release) var(--ns-motion-spring-release); }
+.ns-tag__remove:active { transform: scale(0.82); transition-duration: var(--ns-motion-duration-press); }
+
+/* ------------------------------------------------------------ fallbacks */
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .ns-material--glass,
+  .ns-button--glass.ns-button--secondary,
+  .ns-button--glass.ns-button--ghost:hover:not(:disabled),
+  .ns-tabs--glass .ns-tabs__list,
+  .ns-tabs--glass .ns-tabs__indicator { background: var(--ns-material-solid); }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ns-material--glass,
+  .ns-button--glass.ns-button--secondary,
+  .ns-button--glass.ns-button--ghost:hover:not(:disabled),
+  .ns-tabs--glass .ns-tabs__list,
+  .ns-tabs--glass .ns-tabs__indicator,
+  .ns-overlay:has(+ .ns-material--glass) {
+    background: var(--ns-material-solid);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+  .ns-overlay:has(+ .ns-material--glass) { background: var(--ns-color-ground); opacity: 0.72; }
+}
+@media (forced-colors: active) {
+  .ns-material--glass,
+  .ns-button--glass,
+  .ns-tabs--glass .ns-tabs__list,
+  .ns-card,
+  .ns-panel,
+  .ns-surface {
+    background: Canvas;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    border-color: CanvasText;
+    box-shadow: none;
+  }
+  .ns-reactive::before,
+  .ns-button--glass::before,
+  .ns-card--spotlight::after,
+  .ns-card--orbit::after { display: none; }
+  .ns-tabs__indicator::after { background: Highlight; }
+  .ns-tabs--pill .ns-tabs__indicator { background: Highlight; box-shadow: none; }
+  .ns-tabs--pill .ns-tabs__trigger[aria-selected='true'] { color: HighlightText; }
+  .ns-link { text-decoration: underline; background-image: none; }
+  .ns-table--interactive tbody .ns-table__row:hover > :first-child,
+  .ns-table--interactive tbody .ns-table__row:has(:focus-visible) > :first-child { box-shadow: none; outline: 2px solid Highlight; outline-offset: -2px; }
+}
+
 /* ------------------------------------------------------ reduced motion */
 
 @media (prefers-reduced-motion: reduce) {
@@ -803,6 +1196,18 @@
   }
   .ns-skeleton { animation: none !important; }
   .ns-spinner { animation: none !important; border-right-color: currentColor; border-style: dotted; }
+  /* No movement: presses, lifts, magnets, the orbit and the turning star all
+     hold still. State changes (selected tab, switch, success) still show. */
+  .ns-button,
+  .ns-button:active:not(:disabled),
+  .ns-card--interactive,
+  .ns-toast,
+  .ns-tag__remove,
+  .ns-table--interactive tbody .ns-table__row { transform: none !important; }
+  .ns-spinner__star,
+  .ns-spinner__orbit,
+  .ns-card--orbit::after { animation: none !important; }
+  .ns-tabs__indicator { transition: none !important; }
 }
 
 /* ============================================== northstar: study workspace */
@@ -889,7 +1294,7 @@
 .ns-study-shell__tabs { display: flex; flex-direction: column; flex: 1; }
 .ns-study-shell__tabbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-8); min-height: 40px; padding: 0 var(--ns-space-12); border-bottom: 1px solid var(--ns-color-line-1); }
 .ns-study-shell__tablist.ns-tabs__list { border-bottom: 0; gap: var(--ns-space-2); }
-.ns-study-shell__tab.ns-tabs__trigger { display: inline-flex; align-items: center; gap: var(--ns-space-6); height: 26px; padding: 0 var(--ns-space-12); border-radius: var(--ns-radius-6); }
+.ns-study-shell__tab.ns-tabs__trigger { display: inline-flex; align-items: center; gap: var(--ns-space-6); height: 26px; padding: 0 var(--ns-space-12); border-radius: var(--ns-radius-control-pill); }
 .ns-study-shell__tab.ns-tabs__trigger:hover { background: var(--ns-color-surface-2); }
 .ns-study-shell__tab.ns-tabs__trigger[aria-selected='true'] { background: var(--ns-color-surface-3); box-shadow: inset 0 0 0 1px var(--ns-color-line-2); }
 .ns-study-shell__tab.ns-tabs__trigger[aria-selected='true']::after { display: none; }
@@ -969,3 +1374,660 @@
   .ns-study-status[data-motion] .ns-study-status__mark,
   .ns-illustration__orbit { animation: none !important; }
 }
+
+/* ===================================================== liquid layer
+   Liquid glass, borderless surfaces, icon-led controls, flows and long,
+   soft motion. Loaded last so it refines everything above. */
+
+/* ------------------------------------------------- borderless surfaces */
+
+.ns-surface,
+.ns-card,
+.ns-panel { border-color: transparent; }
+.ns-card.ns-material--solid,
+.ns-panel.ns-material--solid,
+.ns-surface.ns-material--solid { box-shadow: inset 0 0 0 1px var(--ns-material-hairline), var(--ns-elevation-1); }
+.ns-surface.ns-material--solid.ns-depth-3 { box-shadow: inset 0 0 0 1px var(--ns-material-hairline), var(--ns-elevation-3); }
+.ns-panel__head { border-bottom-color: var(--ns-material-hairline); }
+.ns-card__footer { border-top: 0; padding-top: 0; }
+.ns-card {
+  transition: transform var(--ns-motion-duration-layout) var(--ns-motion-easing-glide),
+    box-shadow var(--ns-motion-duration-layout) var(--ns-motion-easing-glide),
+    background-color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover);
+}
+.ns-card--interactive:hover,
+.ns-card--interactive:has(:focus-visible) {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--ns-material-hairline), var(--ns-elevation-2), 0 18px 40px -22px var(--ns-material-glow);
+}
+.ns-table-wrap { border-color: transparent; box-shadow: inset 0 0 0 1px var(--ns-material-hairline); }
+.ns-sidebar { border-right: 0; }
+.ns-sidebar__footer { border-top-color: var(--ns-material-hairline); }
+.ns-top-bar { border-bottom-color: var(--ns-material-hairline); }
+.ns-tabs__list { border-bottom-color: var(--ns-material-hairline); }
+.ns-study-panel { border-color: transparent; box-shadow: inset 0 0 0 1px var(--ns-material-hairline); }
+.ns-study-shell__bar,
+.ns-study-shell__tabbar { border-bottom-color: var(--ns-material-hairline); }
+.ns-study-shell__aside { border-left-color: var(--ns-material-hairline); }
+
+/* Buttons: tonal, not outlined. The secondary button is a quiet fill. */
+.ns-button--secondary,
+.ns-button--secondary:disabled { border-color: transparent; }
+.ns-button:active:not(:disabled):not(.ns-button--primary) { border-color: transparent; }
+.ns-button-group--attached { gap: 1px; }
+.ns-button-group--attached > .ns-button + .ns-button { margin-left: 0; }
+
+/* Hover in and out on the same soft curve; nothing snaps. */
+.ns-button {
+  transition: background-color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    border-color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    box-shadow var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    padding var(--ns-motion-duration-layout) var(--ns-motion-spring-layout),
+    transform var(--ns-motion-duration-release) var(--ns-motion-spring-release);
+}
+.ns-sidebar__item,
+.ns-tabs__trigger,
+.ns-menu__item,
+.ns-option,
+.ns-breadcrumbs a,
+.ns-tag {
+  transition: background-color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    box-shadow var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    border-color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover);
+}
+.ns-tabs__list[data-indicator='ready'] .ns-tabs__indicator {
+  transition: transform var(--ns-motion-duration-layout) var(--ns-motion-spring-layout),
+    width var(--ns-motion-duration-layout) var(--ns-motion-spring-layout),
+    height var(--ns-motion-duration-layout) var(--ns-motion-spring-layout);
+}
+
+/* ----------------------------------------------------------- liquid glass */
+
+.ns-liquid,
+.ns-material--glass,
+.ns-button--glass.ns-button--secondary,
+.ns-button--glass.ns-button--ghost:hover:not(:disabled),
+.ns-tabs--glass .ns-tabs__list {
+  --ns-liquid-ring: inset 0 1px 0 0 var(--ns-material-liquid-rim), inset 0 -1px 0 0 var(--ns-material-liquid-rim-low),
+    inset 0 0 0 0.5px var(--ns-material-liquid-rim-low), inset 0 0 16px 0 var(--ns-material-liquid-inner);
+  background: var(--ns-material-liquid-highlight),
+    linear-gradient(var(--ns-material-liquid-tint), var(--ns-material-liquid-tint)),
+    var(--ns-material-glass-fill);
+  border-color: transparent;
+  -webkit-backdrop-filter: blur(var(--ns-material-liquid-fallback-blur)) saturate(var(--ns-material-saturate));
+  backdrop-filter: blur(var(--ns-material-liquid-fallback-blur)) saturate(var(--ns-material-saturate));
+  box-shadow: var(--ns-liquid-ring);
+}
+.ns-liquid { position: relative; isolation: isolate; border-radius: var(--ns-liquid-radius, var(--ns-radius-glass-panel)); color: var(--ns-color-text-1); }
+.ns-liquid--tint-none { background: var(--ns-material-liquid-highlight), var(--ns-material-glass-fill); }
+.ns-liquid--tint-signal { background: var(--ns-material-liquid-highlight), linear-gradient(var(--ns-color-signal-wash), var(--ns-color-signal-wash)), var(--ns-material-glass-fill); }
+.ns-liquid--floating,
+.ns-material--glass:not(.ns-depth-1):not(.ns-button) { box-shadow: var(--ns-liquid-ring), var(--ns-material-liquid-shadow); }
+.ns-liquid__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
+.ns-material--glass .ns-panel__head { border-bottom-color: var(--ns-material-liquid-rim-low); }
+
+/* True refraction where url() backdrop filters work (Chromium). */
+html[data-ns-liquid='refract'] :is(.ns-liquid--md, .ns-liquid:not(.ns-liquid--sm):not(.ns-liquid--lg), .ns-material--glass) {
+  -webkit-backdrop-filter: var(--ns-liquid-filter, url(#ns-liquid-md)) saturate(1.25);
+  backdrop-filter: var(--ns-liquid-filter, url(#ns-liquid-md)) saturate(1.25);
+}
+html[data-ns-liquid='refract'] :is(.ns-liquid--sm, .ns-depth-1.ns-material--glass, .ns-button--glass.ns-button--secondary, .ns-button--glass.ns-button--ghost:hover:not(:disabled), .ns-tabs--glass .ns-tabs__list, .ns-toast.ns-material--glass, .ns-tooltip.ns-material--glass) {
+  -webkit-backdrop-filter: var(--ns-liquid-filter, url(#ns-liquid-sm)) saturate(1.25);
+  backdrop-filter: var(--ns-liquid-filter, url(#ns-liquid-sm)) saturate(1.25);
+}
+html[data-ns-liquid='refract'] :is(.ns-liquid--lg, .ns-depth-3.ns-material--glass, .ns-dialog.ns-material--glass, .ns-sheet.ns-material--glass) {
+  -webkit-backdrop-filter: var(--ns-liquid-filter, url(#ns-liquid-lg)) blur(2px) saturate(1.25);
+  backdrop-filter: var(--ns-liquid-filter, url(#ns-liquid-lg)) blur(2px) saturate(1.25);
+}
+.ns-tabs--glass .ns-tabs__indicator {
+  background: var(--ns-material-liquid-highlight), linear-gradient(var(--ns-material-spotlight), var(--ns-material-spotlight)), var(--ns-material-glass-fill);
+  box-shadow: inset 0 1px 0 var(--ns-material-liquid-rim), inset 0 0 0 0.5px var(--ns-material-liquid-rim-low), 0 6px 16px -8px var(--ns-material-glow);
+}
+
+/* ------------------------------------------------------ icon-led controls */
+
+.ns-reveal-label {
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  min-width: 0;
+  transition: grid-template-columns var(--ns-motion-duration-layout) var(--ns-motion-spring-layout),
+    opacity var(--ns-motion-duration-320) var(--ns-motion-easing-hover);
+}
+.ns-reveal-label__inner { min-width: 0; overflow: hidden; }
+/* Icon-first expand (IconButton expand and every other host) lives in the
+   precision layer at the end of this file. */
+
+.ns-toolbar { display: inline-flex; align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-4); border-radius: var(--ns-radius-glass-bar); }
+.ns-toolbar--vertical { flex-direction: column; align-items: stretch; }
+.ns-toolbar.ns-liquid { --ns-liquid-radius: var(--ns-radius-glass-bar); }
+.ns-toolbar .ns-toolbar__item { border-radius: var(--ns-button-radius); }
+.ns-toolbar .ns-toolbar__item.ns-button--rounded { --ns-button-radius: var(--ns-radius-glass-inner); }
+
+/* Sidebar: labels show in full; they wrap rather than end in an ellipsis. */
+.ns-sidebar__text { flex: 1; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
+.ns-sidebar__item { min-height: var(--ns-size-control-sm); height: auto; }
+.ns-sidebar--collapsed { width: auto; min-width: 56px; }
+.ns-sidebar--collapsed .ns-sidebar__item { gap: 0; }
+.ns-sidebar--collapsed .ns-sidebar__icon { width: var(--ns-size-icon-sm); justify-content: center; }
+.ns-sidebar--collapsed .ns-sidebar__text { flex: 0 1 auto; grid-template-columns: 0fr; opacity: 0; }
+.ns-sidebar--collapsed .ns-sidebar__text .ns-reveal-label__inner { white-space: nowrap; transition: padding var(--ns-motion-duration-layout) var(--ns-motion-spring-layout); }
+.ns-sidebar--collapsed .ns-sidebar__meta,
+.ns-sidebar--collapsed .ns-sidebar__title { opacity: 0; white-space: nowrap; transition: opacity var(--ns-motion-duration-320) var(--ns-motion-easing-hover); }
+.ns-sidebar--collapsed:is(:hover, :focus-within) .ns-sidebar__text { grid-template-columns: 1fr; opacity: 1; }
+.ns-sidebar--collapsed:is(:hover, :focus-within) .ns-sidebar__text .ns-reveal-label__inner { padding-left: var(--ns-space-8); }
+.ns-sidebar--collapsed:is(:hover, :focus-within) :is(.ns-sidebar__meta, .ns-sidebar__title) { opacity: 1; }
+
+/* Secondary actions ease in on hover or focus; always there on touch. */
+.ns-hover-actions {
+  display: inline-flex;
+  gap: var(--ns-space-6);
+  align-items: center;
+  transition: opacity var(--ns-motion-duration-micro) var(--ns-motion-easing-hover), transform var(--ns-motion-duration-layout) var(--ns-motion-easing-glide);
+}
+@media (hover: hover) and (pointer: fine) {
+  .ns-hover-actions { opacity: 0; transform: translateX(4px); }
+  :is(.ns-card, .ns-panel, .ns-table__row, .ns-list__item, .ns-hover-scope, .ns-study-row):is(:hover, :focus-within) .ns-hover-actions,
+  .ns-hover-actions:focus-within { opacity: 1; transform: none; }
+}
+
+/* --------------------------------------------------------------- flows */
+
+.ns-flow { display: flex; flex-direction: column; gap: var(--ns-space-24); }
+.ns-flow__head { display: flex; flex-direction: column; gap: var(--ns-space-12); }
+.ns-flow__steps { display: flex; flex-wrap: wrap; gap: var(--ns-space-4); margin: 0; padding: 0; list-style: none; }
+.ns-flow__step {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ns-space-8);
+  height: var(--ns-size-control-md);
+  padding: 0 var(--ns-space-12) 0 var(--ns-space-6);
+  border: 0;
+  border-radius: var(--ns-radius-full);
+  background: transparent;
+  color: var(--ns-color-text-3);
+  font: inherit;
+  font-weight: var(--ns-font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover), color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover);
+}
+.ns-flow__step:hover:not(:disabled) { background: var(--ns-color-surface-2); color: var(--ns-color-text-1); }
+.ns-flow__step:disabled { cursor: default; }
+.ns-flow__step:focus-visible { outline: 2px solid var(--ns-color-focus); outline-offset: 2px; }
+.ns-flow__item[data-state='complete'] .ns-flow__step { color: var(--ns-color-text-2); }
+.ns-flow__item[data-state='current'] .ns-flow__step { color: var(--ns-color-text-1); background: var(--ns-color-surface-2); }
+.ns-flow__mark {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-color-surface-3);
+  color: var(--ns-color-text-2);
+  font-family: var(--ns-font-family-mono);
+  font-size: var(--ns-font-size-11);
+  font-variant-numeric: var(--ns-font-numeric-figures);
+  transition: background-color var(--ns-motion-duration-320) var(--ns-motion-easing-glide), color var(--ns-motion-duration-320) var(--ns-motion-easing-glide),
+    transform var(--ns-motion-duration-layout) var(--ns-motion-spring-release);
+}
+.ns-flow__mark svg { width: 12px; height: 12px; }
+.ns-flow__item[data-state='complete'] .ns-flow__mark { background: var(--ns-color-signal-wash); color: var(--ns-color-signal); }
+.ns-flow__item[data-state='current'] .ns-flow__mark { background: var(--ns-button-primary-bg); color: var(--ns-button-primary-fg); transform: scale(1.06); }
+.ns-flow__rail { position: relative; height: 2px; border-radius: 1px; background: var(--ns-color-surface-3); overflow: hidden; }
+.ns-flow__fill { position: absolute; inset: 0; transform-origin: 0 50%; background: var(--ns-color-signal); border-radius: inherit; transition: transform var(--ns-motion-duration-layout) var(--ns-motion-spring-layout); }
+.ns-flow__stage { position: relative; min-width: 0; }
+.ns-flow__panel { display: flex; flex-direction: column; gap: var(--ns-space-16); animation: ns-step-in var(--ns-motion-duration-layout) var(--ns-motion-easing-glide); }
+.ns-flow[data-direction='back'] .ns-flow__panel { animation-name: ns-step-in-back; }
+.ns-flow--vt .ns-flow__panel { animation: none; }
+.ns-flow__panel-head { display: flex; flex-direction: column; gap: var(--ns-space-4); }
+.ns-flow__eyebrow { color: var(--ns-color-text-3); font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-11); font-variant-numeric: var(--ns-font-numeric-figures); }
+.ns-flow__title { margin: 0; font-size: var(--ns-font-size-18); line-height: var(--ns-font-line-height-18); font-weight: var(--ns-font-weight-semibold); outline: none; }
+.ns-flow__description { margin: 0; color: var(--ns-color-text-2); }
+.ns-flow--compact .ns-flow__head { gap: 0; }
+@keyframes ns-step-in { from { opacity: 0; transform: translateX(20px); } }
+@keyframes ns-step-in-back { from { opacity: 0; transform: translateX(-20px); } }
+
+.ns-next-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ns-space-8); }
+.ns-next-action__hint { margin-right: auto; color: var(--ns-color-text-3); font-size: var(--ns-font-size-12); }
+.ns-next-action__back svg { width: 14px; height: 14px; }
+.ns-next-action__back .ns-button__label,
+.ns-next-action__go .ns-button__label { display: inline-flex; align-items: center; gap: var(--ns-space-6); }
+.ns-next-action__arrow { display: inline-flex; transition: transform var(--ns-motion-duration-layout) var(--ns-motion-easing-glide); }
+.ns-next-action__arrow svg { width: 14px; height: 14px; }
+.ns-next-action__go:is(:hover, :focus-visible) .ns-next-action__arrow { transform: translateX(3px); }
+
+/* View transitions for steps and tabs: the old view slips away, the new one glides in. */
+::view-transition-old(ns-step) { animation: ns-vt-out var(--ns-motion-duration-micro) var(--ns-motion-easing-exit) both; }
+::view-transition-new(ns-step) { animation: ns-vt-in var(--ns-motion-duration-layout) var(--ns-motion-easing-glide) both; }
+::view-transition-group(ns-step) { animation-duration: var(--ns-motion-duration-layout); animation-timing-function: var(--ns-motion-spring-layout); }
+html[data-ns-flow-dir='back']::view-transition-new(ns-step) { animation-name: ns-vt-in-back; }
+html[data-ns-flow-dir='back']::view-transition-old(ns-step) { animation-name: ns-vt-out-back; }
+@keyframes ns-vt-in { from { opacity: 0; transform: translateX(16px); filter: blur(2px); } }
+@keyframes ns-vt-in-back { from { opacity: 0; transform: translateX(-16px); filter: blur(2px); } }
+@keyframes ns-vt-out { to { opacity: 0; transform: translateX(-8px); } }
+@keyframes ns-vt-out-back { to { opacity: 0; transform: translateX(8px); } }
+
+/* StudyShell: a sliding pill under the tabs, and the guided flow. */
+.ns-study-shell__tablist .ns-tabs__indicator { border-radius: var(--ns-radius-control-pill); background: var(--ns-color-surface-3); }
+.ns-study-shell__tablist .ns-tabs__indicator::after { display: none; }
+.ns-study-shell__tablist[data-indicator] .ns-study-shell__tab.ns-tabs__trigger[aria-selected='true'] { background: transparent; box-shadow: none; }
+.ns-study-shell__flow { flex: 1; padding: var(--ns-space-20) var(--ns-space-32) var(--ns-space-32); }
+.ns-study-shell__next { margin-top: var(--ns-space-8); padding-top: var(--ns-space-16); }
+
+/* ------------------------------------------------------------- reveal */
+
+.ns-reveal,
+.ns-reveal--stagger > * {
+  transition: opacity var(--ns-motion-duration-reveal) var(--ns-motion-easing-glide),
+    transform var(--ns-motion-duration-reveal) var(--ns-motion-easing-glide),
+    filter var(--ns-motion-duration-reveal) var(--ns-motion-easing-glide);
+  transition-delay: var(--ns-reveal-delay, 0ms);
+}
+.ns-reveal[data-reveal='pending']:not(.ns-reveal--stagger) { opacity: 0; }
+.ns-reveal--rise[data-reveal='pending']:not(.ns-reveal--stagger) { transform: translateY(16px); }
+.ns-reveal--scale[data-reveal='pending']:not(.ns-reveal--stagger) { transform: scale(0.97); filter: blur(4px); }
+.ns-reveal--stagger[data-reveal='pending'] > * { opacity: 0; transform: translateY(10px); }
+.ns-reveal--stagger > * { transition-delay: calc(var(--ns-reveal-delay, 0ms) + var(--ns-i, 0) * var(--ns-motion-duration-stagger)); }
+.ns-reveal--stagger > :nth-child(2) { --ns-i: 1; }
+.ns-reveal--stagger > :nth-child(3) { --ns-i: 2; }
+.ns-reveal--stagger > :nth-child(4) { --ns-i: 3; }
+.ns-reveal--stagger > :nth-child(5) { --ns-i: 4; }
+.ns-reveal--stagger > :nth-child(6) { --ns-i: 5; }
+.ns-reveal--stagger > :nth-child(7) { --ns-i: 6; }
+.ns-reveal--stagger > :nth-child(8) { --ns-i: 7; }
+.ns-reveal--stagger > :nth-child(n + 9) { --ns-i: 8; }
+
+/* ---------------------------------------------------------- fallbacks */
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .ns-liquid,
+  .ns-material--glass { background: var(--ns-material-liquid-highlight), var(--ns-material-solid); }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ns-liquid,
+  .ns-material--glass,
+  html[data-ns-liquid='refract'] :is(.ns-liquid, .ns-material--glass) {
+    background: var(--ns-material-solid);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+@media (forced-colors: active) {
+  .ns-liquid,
+  html[data-ns-liquid='refract'] :is(.ns-liquid, .ns-material--glass) {
+    background: Canvas;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    border: 1px solid CanvasText;
+    box-shadow: none;
+  }
+  .ns-card,
+  .ns-panel,
+  .ns-surface,
+  .ns-button--secondary { border-color: CanvasText; }
+  .ns-flow__item[data-state='current'] .ns-flow__mark { background: Highlight; color: HighlightText; }
+  .ns-flow__fill { background: Highlight; }
+  .ns-hover-actions { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ns-reveal[data-reveal],
+  .ns-reveal--stagger[data-reveal] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
+  .ns-flow__panel { animation: none !important; }
+  .ns-flow__mark,
+  .ns-next-action__arrow,
+  .ns-hover-actions,
+  .ns-card--interactive { transform: none !important; }
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) { animation: none !important; }
+}
+
+/* ==================================================== precision layer
+   Icon-first expand everywhere and tighter glass corners (radius.glass.*). */
+
+/* ------------------------------------------------------ icon-first expand
+   A host (`ns-expand-host`) shows its icon; its ExpandLabel is collapsed to
+   0fr and eases to 1fr, so layout measures the whole label (no ellipsis, no
+   width guessing, no jank). Hover, keyboard focus, selection, an open menu
+   and data-expand="always" open it; touch screens always show it. */
+
+.ns-expand-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; }
+.ns-button__icon { display: inline-flex; flex: none; }
+.ns-expand-host { --ns-expand-gap: var(--ns-space-6); }
+.ns-expand-host .ns-expand {
+  grid-template-columns: 0fr;
+  opacity: 0;
+  transition: grid-template-columns var(--ns-motion-duration-layout) var(--ns-motion-easing-glide),
+    opacity var(--ns-motion-duration-320) var(--ns-motion-easing-hover);
+}
+.ns-expand-host .ns-expand__inner {
+  white-space: nowrap;
+  padding-inline: 0;
+  transition: padding var(--ns-motion-duration-layout) var(--ns-motion-easing-glide);
+}
+.ns-expand-host:is(:hover, :focus-visible, :has(:focus-visible), [data-expand='always'], [aria-selected='true'], [aria-expanded='true']) .ns-expand { grid-template-columns: 1fr; opacity: 1; }
+.ns-expand-host:is(:hover, :focus-visible, :has(:focus-visible), [data-expand='always'], [aria-selected='true'], [aria-expanded='true']) .ns-expand__inner { padding-inline: var(--ns-expand-gap) var(--ns-expand-tail, 0px); }
+.ns-expand-host:is(:hover, :focus-visible, :has(:focus-visible), [data-expand='always'], [aria-selected='true'], [aria-expanded='true']) .ns-expand--end .ns-expand__inner { padding-inline: var(--ns-expand-tail, 0px) var(--ns-expand-gap); }
+@media (hover: none) {
+  .ns-expand-host .ns-expand { grid-template-columns: 1fr; opacity: 1; }
+  .ns-expand-host .ns-expand__inner { padding-inline: var(--ns-expand-gap) var(--ns-expand-tail, 0px); }
+  .ns-expand-host .ns-expand--end .ns-expand__inner { padding-inline: var(--ns-expand-tail, 0px) var(--ns-expand-gap); }
+}
+
+/* Buttons, icon buttons, menu triggers, pagination steps: square while closed. */
+.ns-button.ns-expand-host {
+  --ns-expand-tail: var(--ns-space-2);
+  gap: 0;
+  min-width: var(--ns-h, var(--ns-size-control-md));
+  padding-inline: calc((var(--ns-h, var(--ns-size-control-md)) - var(--ns-size-icon-sm)) / 2);
+}
+.ns-icon-button.ns-expand-host { width: auto; }
+.ns-button.ns-expand-host .ns-expand-icon { min-width: var(--ns-size-icon-sm); }
+.ns-button.ns-expand-host .ns-expand-icon svg { width: var(--ns-size-icon-sm); height: var(--ns-size-icon-sm); }
+.ns-run-cost__button--expand { width: auto; align-self: flex-start; }
+
+/* Tabs: icon tabs open to their labels; the selected one stays open. */
+.ns-tabs__trigger--icon { display: inline-flex; align-items: center; gap: var(--ns-space-6); }
+.ns-tabs__trigger--icon.ns-expand-host { gap: 0; }
+.ns-tabs__icon { color: var(--ns-color-text-3); transition: color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover); }
+.ns-tabs__trigger:is(:hover, [aria-selected='true']) .ns-tabs__icon { color: currentColor; }
+
+/* Breadcrumbs: collapsed crumbs show an icon or an ellipsis and open in full. */
+.ns-breadcrumbs--collapse li > :is(a, span):not(.ns-breadcrumbs__sep) { display: inline-flex; align-items: center; }
+.ns-breadcrumbs__more {
+  display: inline-block;
+  overflow: hidden;
+  max-width: 1.25em;
+  transition: max-width var(--ns-motion-duration-layout) var(--ns-motion-easing-glide), opacity var(--ns-motion-duration-micro) var(--ns-motion-easing-hover);
+}
+.ns-breadcrumbs li.ns-expand-host { --ns-expand-gap: 0px; }
+.ns-breadcrumbs li.ns-expand-host:has(.ns-breadcrumbs__icon svg) { --ns-expand-gap: var(--ns-space-4); }
+.ns-breadcrumbs--collapse:has(:focus-visible) .ns-expand { grid-template-columns: 1fr; opacity: 1; }
+.ns-breadcrumbs--collapse:has(:focus-visible) .ns-breadcrumbs__more,
+.ns-expand-host:is(:hover, :has(:focus-visible)) .ns-breadcrumbs__more { max-width: 0; opacity: 0; }
+.ns-breadcrumbs--collapse:has(:focus-visible) .ns-expand__inner { padding-inline: var(--ns-expand-gap) 0; }
+@media (hover: none) { .ns-breadcrumbs__more { max-width: 0; opacity: 0; } }
+
+/* Tags, badges and the study status chip. */
+.ns-tag.ns-expand-host,
+.ns-badge.ns-expand-host,
+.ns-study-status.ns-expand-host { gap: 0; --ns-expand-gap: var(--ns-space-4); }
+.ns-study-status.ns-expand-host { --ns-expand-gap: var(--ns-space-6); }
+.ns-badge.ns-expand-host { padding-inline: var(--ns-space-4); }
+.ns-tag.ns-expand-host .ns-tag__remove { margin-left: var(--ns-space-4); }
+.ns-tag__icon svg,
+.ns-badge__icon svg { width: 12px; height: 12px; }
+.ns-badge__icon { margin-right: var(--ns-space-2); }
+.ns-badge.ns-expand-host .ns-badge__icon { margin-right: 0; }
+
+/* Back in a flow: the arrow leads, the word follows on hover and focus. */
+.ns-next-action__back.ns-expand-host .ns-expand-icon svg { width: 14px; height: 14px; }
+
+/* Ghost buttons on glass hover with light, not an opaque fill. */
+:where(.ns-liquid, .ns-material--glass, [data-material='glass']) .ns-button--ghost:not(.ns-button--glass):hover:not(:disabled) { background: var(--ns-material-spotlight); }
+
+/* ---------------------------------------------------------- glass radii */
+
+.ns-card.ns-material--glass,
+.ns-panel.ns-material--glass,
+.ns-dialog.ns-material--glass,
+:where(.ns-surface.ns-material--glass) { border-radius: var(--ns-radius-glass-panel); }
+.ns-sheet--bottom.ns-material--glass { border-radius: var(--ns-radius-glass-panel) var(--ns-radius-glass-panel) 0 0; }
+.ns-tabs--glass .ns-tabs__list { border-radius: var(--ns-radius-control-pill); }
+.ns-tabs--glass .ns-tabs__trigger,
+.ns-tabs--glass .ns-tabs__indicator { border-radius: var(--ns-radius-control-pill); }
+.ns-button--glass { border-radius: var(--ns-button-radius); }
+
+/* --------------------------------------------- precision layer fallbacks */
+
+@media (forced-colors: active) {
+  .ns-expand-host .ns-expand { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ns-expand-host .ns-expand,
+  .ns-expand-host .ns-expand__inner,
+  .ns-breadcrumbs__more { transition: none !important; }
+}
+
+/* ==================================================== shape and texture
+   Every button is a pill (radius.control.pill): a capsule, or a circle when
+   it is square (icon-only, or an icon-first button while its label is
+   closed). `shape="rounded"` (.ns-button--rounded) opts out: radius.control.
+   rounded off glass, radius.glass.control on it. Ends of a pill take a
+   little more padding so the label does not crowd the curve. */
+
+.ns-button:where(:not(.ns-icon-button, .ns-expand-host, .ns-button--rounded)) { padding-inline: calc(var(--ns-px, var(--ns-space-12)) + var(--ns-space-2)); }
+.ns-button.ns-button--rounded,
+.ns-pagination--rounded .ns-button { --ns-button-radius: var(--ns-radius-control-rounded); }
+:where(.ns-liquid, .ns-material--glass, [data-material='glass']) .ns-button.ns-button--rounded,
+.ns-button.ns-button--rounded.ns-button--glass { --ns-button-radius: var(--ns-radius-glass-control); }
+.ns-tabs--rounded.ns-tabs--pill .ns-tabs__list { border-radius: var(--ns-radius-8); }
+.ns-tabs--rounded.ns-tabs--pill .ns-tabs__trigger,
+.ns-tabs--rounded.ns-tabs--pill .ns-tabs__indicator { border-radius: var(--ns-radius-6); }
+.ns-tabs--rounded.ns-tabs--glass .ns-tabs__list { border-radius: var(--ns-radius-glass-bar); }
+.ns-tabs--rounded.ns-tabs--glass :is(.ns-tabs__trigger, .ns-tabs__indicator) { border-radius: var(--ns-radius-glass-control); }
+
+/* ------------------------------------------------------ tactile texture
+   A fine brushed micro-texture on every button, under the label: two
+   periods of horizontal lines (3px light, 5px dark, coprime so they never
+   band), a soft highlight across the top and a low inner bevel. It lives in
+   ::after (z-index -1 inside the button's own stacking context), so it never
+   fights the button's background or box-shadow. Per variant: secondary and
+   primary always (primary in its Glacier-tuned signal-* set), ghost only on
+   hover and focus, disabled never. This is the soft finish
+   (finish="soft"); the machined spin finish below and glass's specular
+   switch it off. Per theme through
+   material.texture.*; text on every textured body is gated in
+   tooling/contrast at its lightest and darkest point. */
+
+.ns-button {
+  --ns-tex-on: 0;
+  --ns-tex-light: var(--ns-material-texture-light);
+  --ns-tex-dark: var(--ns-material-texture-dark);
+  --ns-tex-top: var(--ns-material-texture-top);
+  --ns-tex-hi: var(--ns-material-texture-bevel-hi);
+  --ns-tex-lo: var(--ns-material-texture-bevel-lo);
+}
+.ns-button--primary {
+  --ns-tex-light: var(--ns-material-texture-signal-light);
+  --ns-tex-dark: var(--ns-material-texture-signal-dark);
+  --ns-tex-top: var(--ns-material-texture-signal-top);
+  --ns-tex-hi: var(--ns-material-texture-signal-bevel-hi);
+  --ns-tex-lo: var(--ns-material-texture-signal-bevel-lo);
+}
+.ns-button::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background:
+    linear-gradient(180deg, var(--ns-tex-top), transparent 56%),
+    repeating-linear-gradient(180deg, var(--ns-tex-light) 0 1px, transparent 1px 3px),
+    repeating-linear-gradient(180deg, var(--ns-tex-dark) 0 1px, transparent 1px 5px);
+  box-shadow: inset 0 1px 0 var(--ns-tex-hi), inset 0 -1px 0 var(--ns-tex-lo);
+  opacity: var(--ns-tex-on);
+  transition: opacity var(--ns-motion-duration-micro) var(--ns-motion-easing-hover);
+}
+.ns-button:is(.ns-button--secondary, .ns-button--primary) { --ns-tex-on: 1; }
+.ns-button.ns-button--ghost:is(:hover, :focus-visible, [aria-expanded='true'], [aria-current='page']):not(:disabled, .ns-button--glass) { --ns-tex-on: 1; }
+.ns-button:disabled,
+.ns-button.ns-button--glass { --ns-tex-on: 0; }
+/* Pressed: the light comes from below, so the face reads as pushed in. */
+.ns-button:active:not(:disabled)::after { box-shadow: inset 0 1px 2px var(--ns-tex-lo), inset 0 -1px 0 var(--ns-tex-hi); }
+/* ConstellationButton is a button too (effects.css carries its texture). */
+
+/* --------------------------------------------- shape and texture fallbacks */
+
+@media (prefers-reduced-transparency: reduce) {
+  .ns-button::after { background: none; }
+}
+@media (prefers-contrast: more) {
+  .ns-button::after { display: none; }
+  .ns-button:is(.ns-button--secondary, .ns-button--ghost:hover) { border-color: var(--ns-color-text-2); }
+}
+@media (forced-colors: active) {
+  .ns-button::after { display: none; }
+  .ns-button { border: 1px solid ButtonText; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ns-button::after { transition: none; }
+}
+
+/* ===================================================== machined spin
+   The default finish of every button, on glass and off it: Button,
+   IconButton, ToolbarItem, Menu.Trigger, pagination, toasts, layer close
+   buttons and the effects ConstellationButton. finish="soft" (or
+   NorthstarProvider buttonFinish="soft", which marks its root with
+   data-button-finish) keeps the soft finish above: tonal fill and tactile
+   texture. tone="silver" is an alias for spin. Glass buttons keep glass.
+
+   ::before is the metal: a conic sweep of seven machined stops under a fine
+   concentric grain, both centred on the button, so an icon-only circle is
+   a turned knob. It sits one pixel past the border, so the bevel ring is
+   flush. ::after is the light band that slides across on hover and focus.
+   While hovered, the sweep turns a few degrees with the pointer
+   (--ns-pointer-x/-y, written by usePointerTracking; @property eases it;
+   without a pointer it holds still). Primary and tone="signal" are
+   Glacier-anodized. Ghost has no metal at rest; a faint wash of it fades in
+   on hover, focus and selection. Disabled is matte and flat. Pressed drops
+   1px, dims a little and flips the bevel. Colours per theme through
+   material.spin.*, motion through the material.spin scale; ink on the
+   lightest and darkest stop of every body is gated in tooling/contrast. */
+
+@property --ns-spin-angle { syntax: '<angle>'; inherits: false; initial-value: 200deg; }
+
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])) {
+  --ns-tex-on: 0;
+  --ns-spin-on: 1;
+  --ns-spin-1: var(--ns-material-spin-stop-1);
+  --ns-spin-2: var(--ns-material-spin-stop-2);
+  --ns-spin-3: var(--ns-material-spin-stop-3);
+  --ns-spin-4: var(--ns-material-spin-stop-4);
+  --ns-spin-5: var(--ns-material-spin-stop-5);
+  --ns-spin-6: var(--ns-material-spin-stop-6);
+  --ns-spin-7: var(--ns-material-spin-stop-7);
+  --ns-spin-ink: var(--ns-material-spin-ink);
+  --ns-spin-grain: var(--ns-material-spin-grain-light);
+  --ns-spin-grain-dark: var(--ns-material-spin-grain-dark);
+  border-color: transparent;
+  transition: color var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    box-shadow var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    filter var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    padding var(--ns-motion-duration-layout) var(--ns-motion-spring-layout),
+    transform var(--ns-motion-duration-release) var(--ns-motion-spring-release);
+}
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):is(.ns-button--primary, .ns-fx-cbutton--primary, .ns-tone-signal:not(.ns-button--ghost)) {
+  --ns-spin-1: var(--ns-material-spin-signal-stop-1);
+  --ns-spin-2: var(--ns-material-spin-signal-stop-2);
+  --ns-spin-3: var(--ns-material-spin-signal-stop-3);
+  --ns-spin-4: var(--ns-material-spin-signal-stop-4);
+  --ns-spin-5: var(--ns-material-spin-signal-stop-5);
+  --ns-spin-6: var(--ns-material-spin-signal-stop-6);
+  --ns-spin-7: var(--ns-material-spin-signal-stop-7);
+  --ns-spin-ink: var(--ns-material-spin-signal-ink);
+  --ns-spin-grain: var(--ns-material-spin-signal-grain-light);
+}
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):not(.ns-button--ghost) {
+  color: var(--ns-spin-ink);
+  text-shadow: 0 1px 0 var(--ns-material-spin-emboss);
+  box-shadow: var(--ns-material-spin-shadow);
+}
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  --ns-spin-angle: var(--ns-material-spin-angle);
+  background:
+    repeating-radial-gradient(circle at 50% 50%, var(--ns-spin-grain-dark) 0 1px, var(--ns-spin-grain) 1px 2px),
+    conic-gradient(from var(--ns-spin-angle) at 50% 50%, var(--ns-spin-1), var(--ns-spin-2) 8%, var(--ns-spin-3) 22%, var(--ns-spin-4) 38%, var(--ns-spin-5) 52%, var(--ns-spin-6) 68%, var(--ns-spin-7) 84%, var(--ns-spin-1));
+  opacity: var(--ns-spin-on);
+  transition: opacity var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    --ns-spin-angle var(--ns-motion-duration-layout) var(--ns-motion-easing-glide);
+}
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::after {
+  inset: -1px;
+  box-shadow: none;
+  background: linear-gradient(100deg, transparent 30%, var(--ns-material-spin-sheen) 50%, transparent 70%) 120% 0 / 260% 100% no-repeat;
+  opacity: var(--ns-spin-on);
+  transition: opacity var(--ns-motion-duration-micro) var(--ns-motion-easing-hover),
+    background-position var(--ns-material-spin-sweep) var(--ns-material-spin-sweep-easing);
+}
+/* Hover: the band slides across, the metal brightens a touch and the sweep turns with the pointer. */
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):is(:hover, :focus-visible):not(:disabled)::after { background-position: -20% 0; }
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):hover:not(:disabled) { filter: brightness(1.04); }
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):hover:not(:disabled)::before {
+  --ns-spin-angle: calc(var(--ns-material-spin-angle) + var(--ns-pointer-x, 0) * var(--ns-material-spin-turn) / 2 + var(--ns-pointer-y, 0) * var(--ns-material-spin-turn) / 6);
+}
+/* Pressed: down a pixel, a little smaller and darker, and the bevel flips. */
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):active:not(:disabled) {
+  transform: translate(var(--ns-mag-x, 0px), calc(var(--ns-mag-y, 0px) + 1px)) scale(var(--ns-material-spin-press));
+  filter: brightness(0.96);
+  transition-duration: var(--ns-motion-duration-press);
+  transition-timing-function: var(--ns-motion-spring-press);
+}
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):not(.ns-button--ghost):active:not(:disabled) { box-shadow: var(--ns-material-spin-shadow-press); }
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):active:not(:disabled)::after { box-shadow: none; }
+/* Focus: the Glacier ring (color.focus), 2px, standing 3px off the metal. */
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):focus-visible { outline: 2px solid var(--ns-color-focus); outline-offset: 3px; }
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):not(.ns-button--ghost):focus-visible { box-shadow: var(--ns-material-spin-shadow); }
+/* Ghost: no metal at rest; the faint wash on hover, focus, an open menu and the current page. */
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])).ns-button--ghost { --ns-spin-on: 0; }
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])).ns-button--ghost:is(:hover, :focus-visible, [aria-expanded='true'], [aria-current='page']):not(:disabled) {
+  --ns-spin-on: var(--ns-material-spin-ghost);
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--ns-material-spin-ghost-edge);
+}
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])) .ns-button__check { color: currentColor; }
+/* Disabled: matte and flat, no grain, sheen or bevel. Loading keeps its metal. */
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):disabled:not([data-loading]) {
+  --ns-spin-on: 1;
+  color: var(--ns-material-spin-matte-ink);
+  text-shadow: none;
+  box-shadow: inset 0 0 0 1px var(--ns-color-line-2);
+  filter: none;
+  opacity: 1;
+}
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):disabled:not([data-loading])::before { background: var(--ns-material-spin-matte); }
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):disabled:not([data-loading])::after { display: none; }
+:is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])).ns-button--ghost:disabled:not([data-loading]) { --ns-spin-on: 0; color: var(--ns-color-text-3); }
+
+/* ----------------------------------------------- machined spin fallbacks */
+
+@media (prefers-reduced-transparency: reduce) {
+  /* No grain: the sweep alone. */
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])) { --ns-spin-grain: transparent; --ns-spin-grain-dark: transparent; }
+}
+@media (prefers-contrast: more) {
+  /* A flat fill at the lightest stop, outlined in ink. */
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::before { background: var(--ns-spin-2); }
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::after { display: none; }
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):not(.ns-button--ghost) { box-shadow: 0 0 0 1px var(--ns-spin-ink); text-shadow: none; }
+}
+@media (forced-colors: active) {
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::before,
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::after { display: none; }
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])) {
+    background: ButtonFace;
+    color: ButtonText;
+    border: 1px solid ButtonText;
+    box-shadow: none;
+    text-shadow: none;
+    filter: none;
+  }
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):disabled,
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):disabled:not([data-loading]) { background: ButtonFace; color: GrayText; border-color: GrayText; box-shadow: none; }
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):focus-visible { outline-color: Highlight; }
+}
+@media (prefers-reduced-motion: reduce) {
+  /* No sliding band and no turning sweep; the press holds still too. */
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::after { display: none; }
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin'])):hover:not(:disabled)::before { --ns-spin-angle: var(--ns-material-spin-angle); }
+  :is(.ns-button, .ns-fx-cbutton):not(.ns-button--glass, [data-finish='soft'], [data-button-finish='soft'] :not([data-finish='spin']))::before { transition: none; }
+}