@northstar-js/react 0.0.0-stage → 0.2.0

package/dist/styles.css

@@ -0,0 +1,2033 @@
+/* @northstar-js/react — component styles. Uses only --ns-* custom properties
+   from @northstar-js/tokens (load tokens.css first). */
+
+/* ---------------------------------------------------------------- root */
+
+.ns-root {
+  --ns-control-h: var(--ns-density-control-height);
+  --ns-row-h: var(--ns-density-row-height);
+  --ns-row-pad: var(--ns-density-row-padding);
+  color: var(--ns-color-text-1);
+  font-family: var(--ns-font-family-ui);
+  font-size: var(--ns-font-size-13);
+  line-height: var(--ns-font-line-height-13);
+  -webkit-font-smoothing: antialiased;
+}
+.ns-root:not(.ns-portal) {
+  background: var(--ns-color-ground);
+}
+.ns-root[data-density='compact'] {
+  --ns-control-h: var(--ns-density-compact-control-height);
+  --ns-row-h: var(--ns-density-compact-row-height);
+  --ns-row-pad: var(--ns-density-compact-row-padding);
+}
+.ns-root[data-density='comfortable'] {
+  --ns-control-h: var(--ns-density-comfortable-control-height);
+  --ns-row-h: var(--ns-density-comfortable-row-height);
+  --ns-row-pad: var(--ns-density-comfortable-row-padding);
+}
+.ns-root *,
+.ns-root *::before,
+.ns-root *::after {
+  box-sizing: border-box;
+}
+.ns-portal {
+  position: relative;
+  z-index: var(--ns-z-popover);
+}
+
+.ns-visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Focus: a 2px ring in the focus role, with Day's halo behind it. */
+.ns-button:focus-visible,
+.ns-link:focus-visible,
+.ns-switch:focus-visible,
+.ns-tabs__trigger:focus-visible,
+.ns-tabs__content:focus-visible,
+.ns-menu__item:focus-visible,
+.ns-sidebar__item:focus-visible,
+.ns-table__sort:focus-visible,
+.ns-tag__remove:focus-visible,
+.ns-input__clear:focus-visible,
+.ns-skip-link:focus-visible,
+.ns-dialog:focus-visible,
+.ns-sheet:focus-visible,
+.ns-popover:focus-visible,
+.ns-slider:focus-visible,
+.ns-check__input:focus-visible + .ns-check__box,
+.ns-input:focus-within,
+.ns-select:focus-within,
+.ns-textarea:focus-visible {
+  outline: 2px solid var(--ns-color-focus);
+  outline-offset: 1px;
+  box-shadow: 0 0 0 4px var(--ns-color-focus-halo);
+}
+.ns-input:focus-within .ns-input__control:focus-visible,
+.ns-select__control:focus-visible {
+  outline: none;
+}
+
+/* -------------------------------------------------------------- sizes */
+
+.ns-size-sm { --ns-h: var(--ns-size-control-sm); --ns-px: var(--ns-space-8); }
+.ns-size-md { --ns-h: var(--ns-control-h, var(--ns-size-control-md)); --ns-px: var(--ns-space-12); }
+.ns-size-lg { --ns-h: var(--ns-size-control-lg); --ns-px: var(--ns-space-12); }
+.ns-size-xl { --ns-h: var(--ns-size-control-xl); --ns-px: var(--ns-space-16); font-size: var(--ns-font-size-15); }
+
+@media (pointer: coarse) {
+  .ns-button,
+  .ns-input,
+  .ns-select,
+  .ns-switch-label,
+  .ns-check,
+  .ns-menu__item,
+  .ns-tabs__trigger,
+  .ns-sidebar__item,
+  .ns-option {
+    min-height: var(--ns-size-target-coarse);
+  }
+  .ns-icon-button {
+    min-width: var(--ns-size-target-coarse);
+  }
+}
+
+/* ------------------------------------------------------------ buttons */
+
+.ns-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ns-space-6);
+  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);
+  --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;
+  font-weight: var(--ns-font-weight-medium);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  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);
+}
+.ns-button:hover:not(:disabled) { background: var(--ns-color-surface-3); }
+.ns-button:active:not(:disabled) { border-color: var(--ns-color-text-3); }
+.ns-button:disabled {
+  cursor: not-allowed;
+  color: var(--ns-color-text-3);
+  background: var(--ns-color-surface-1);
+  border-color: var(--ns-color-line-1);
+}
+.ns-button--primary {
+  background: var(--ns-button-primary-bg);
+  border-color: var(--ns-button-primary-bg);
+  color: var(--ns-button-primary-fg);
+}
+.ns-button--primary:hover:not(:disabled) {
+  background: var(--ns-button-primary-hover);
+  border-color: var(--ns-button-primary-hover);
+}
+.ns-button--ghost {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ns-color-text-2);
+}
+.ns-button--ghost:hover:not(:disabled) { color: var(--ns-color-text-1); background: var(--ns-color-surface-2); }
+.ns-button--ghost:disabled { background: transparent; border-color: transparent; }
+.ns-button[aria-current='page'] { color: var(--ns-color-text-1); background: var(--ns-color-surface-3); }
+.ns-button.ns-tone-signal:not(.ns-button--primary) { color: var(--ns-color-signal); }
+.ns-button[data-loading] { cursor: progress; }
+.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;
+  height: 12px;
+  border-radius: var(--ns-radius-full);
+  border: 1.5px solid currentColor;
+  border-right-color: transparent;
+  animation: ns-spin 700ms linear infinite;
+}
+@keyframes ns-spin { to { transform: rotate(360deg); } }
+
+.ns-button-group { display: inline-flex; gap: var(--ns-space-6); }
+.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-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 {
+  color: var(--ns-color-signal);
+  text-decoration: underline;
+  text-decoration-color: var(--ns-color-signal-edge);
+  text-underline-offset: 3px;
+  border-radius: var(--ns-radius-4);
+}
+.ns-link:hover { text-decoration-color: currentColor; }
+.ns-link--neutral { color: var(--ns-color-text-1); text-decoration-color: var(--ns-color-line-2); }
+
+/* -------------------------------------------------------------- forms */
+
+.ns-field { display: flex; flex-direction: column; gap: var(--ns-space-6); }
+.ns-field__label { color: var(--ns-color-text-1); font-weight: var(--ns-font-weight-medium); font-size: var(--ns-font-size-12); line-height: var(--ns-font-line-height-12); }
+.ns-field__required { color: var(--ns-color-text-3); }
+.ns-field__description,
+.ns-field__error { margin: 0; font-size: var(--ns-font-size-12); line-height: var(--ns-font-line-height-12); color: var(--ns-color-text-2); }
+.ns-field__error { color: var(--ns-color-text-1); font-weight: var(--ns-font-weight-medium); }
+
+.ns-input,
+.ns-select {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-6);
+  height: var(--ns-h, var(--ns-size-control-md));
+  padding: 0 var(--ns-space-8);
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-6);
+  background: var(--ns-color-surface-1);
+  color: var(--ns-color-text-1);
+  min-width: 0;
+}
+.ns-input:hover:not(.ns-disabled),
+.ns-select:hover { border-color: var(--ns-color-text-3); }
+.ns-input__control,
+.ns-select__control {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+.ns-input__control::placeholder,
+.ns-textarea::placeholder { color: var(--ns-color-text-3); }
+.ns-input__control::-webkit-search-cancel-button { display: none; }
+.ns-input__adornment { display: inline-flex; color: var(--ns-color-text-3); }
+.ns-input__clear,
+.ns-number__steppers button,
+.ns-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: 0;
+  border-radius: var(--ns-radius-4);
+  background: transparent;
+  color: var(--ns-color-text-3);
+  cursor: pointer;
+}
+.ns-input__clear:hover,
+.ns-number__steppers button:hover:not(:disabled),
+.ns-tag__remove:hover { color: var(--ns-color-text-1); background: var(--ns-color-surface-3); }
+.ns-number__steppers { display: inline-flex; gap: var(--ns-space-2); }
+.ns-number__steppers button:disabled { opacity: 0.4; cursor: not-allowed; }
+.ns-number .ns-input__control { font-family: var(--ns-font-family-mono); font-variant-numeric: var(--ns-font-numeric-figures); }
+.ns-invalid,
+.ns-textarea.ns-invalid { border-color: var(--ns-color-text-1); border-style: dashed; }
+.ns-disabled { opacity: 0.55; cursor: not-allowed; }
+
+.ns-select { padding-right: var(--ns-space-24); }
+.ns-select__control { appearance: none; cursor: pointer; }
+.ns-select__control option { background: var(--ns-color-surface-2); color: var(--ns-color-text-1); }
+.ns-select__chevron { position: absolute; right: var(--ns-space-8); display: inline-flex; color: var(--ns-color-text-3); pointer-events: none; }
+.ns-combobox .ns-select__chevron { position: static; }
+
+.ns-textarea {
+  min-height: 72px;
+  padding: var(--ns-space-8);
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-6);
+  background: var(--ns-color-surface-1);
+  color: var(--ns-color-text-1);
+  font: inherit;
+  resize: vertical;
+}
+
+.ns-combobox { position: relative; }
+.ns-combobox__list,
+.ns-combobox__empty {
+  position: absolute;
+  z-index: var(--ns-z-dropdown);
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 240px;
+  overflow: auto;
+  margin: 0;
+  padding: var(--ns-space-4);
+  list-style: none;
+}
+.ns-combobox__empty { padding: var(--ns-space-8); color: var(--ns-color-text-3); }
+.ns-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ns-space-8);
+  height: var(--ns-size-control-sm);
+  padding: 0 var(--ns-space-8);
+  border-radius: var(--ns-radius-4);
+  color: var(--ns-color-text-1);
+  cursor: pointer;
+}
+.ns-option[data-active] { background: var(--ns-color-surface-3); }
+.ns-option[aria-disabled='true'] { color: var(--ns-color-text-3); cursor: not-allowed; }
+.ns-option svg { color: var(--ns-color-signal); }
+
+.ns-check { display: inline-flex; align-items: center; gap: var(--ns-space-8); cursor: pointer; position: relative; }
+.ns-check__input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; cursor: inherit; }
+.ns-check__box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-4);
+  background: var(--ns-color-surface-1);
+  color: var(--ns-button-primary-fg);
+}
+.ns-check__box svg { width: 12px; height: 12px; stroke-width: 2; visibility: hidden; }
+.ns-check:hover .ns-check__box { border-color: var(--ns-color-text-3); }
+.ns-check__input:checked + .ns-check__box,
+.ns-check__input:indeterminate + .ns-check__box { background: var(--ns-color-signal-fill); border-color: var(--ns-color-signal-fill); }
+.ns-check__input:checked + .ns-check__box svg,
+.ns-check__input:indeterminate + .ns-check__box svg { visibility: visible; }
+.ns-radio .ns-check__box { border-radius: var(--ns-radius-full); }
+.ns-radio .ns-check__input:checked + .ns-check__box { background: var(--ns-color-surface-1); border-color: var(--ns-color-signal); border-width: 5px; }
+.ns-check__label { color: var(--ns-color-text-1); }
+.ns-radio-group { display: flex; gap: var(--ns-space-8); }
+.ns-radio-group--vertical { flex-direction: column; }
+.ns-radio-group--horizontal { flex-direction: row; gap: var(--ns-space-16); }
+
+.ns-switch-label { display: inline-flex; align-items: center; gap: var(--ns-space-8); cursor: pointer; }
+.ns-switch {
+  position: relative;
+  flex: none;
+  width: 28px;
+  height: 16px;
+  padding: 0;
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-color-surface-3);
+  cursor: pointer;
+  transition: background-color var(--ns-motion-duration-120) var(--ns-motion-easing-settle);
+}
+.ns-switch__thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-color-text-2);
+  transition: transform var(--ns-motion-duration-120) var(--ns-motion-easing-settle);
+}
+.ns-switch[aria-checked='true'] { background: var(--ns-color-signal-fill); border-color: var(--ns-color-signal-fill); }
+.ns-switch[aria-checked='true'] .ns-switch__thumb { transform: translateX(12px); background: var(--ns-button-primary-fg); }
+.ns-switch:disabled { opacity: 0.55; cursor: not-allowed; }
+
+.ns-slider {
+  appearance: none;
+  width: 100%;
+  height: 16px;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--ns-radius-full);
+}
+.ns-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background: linear-gradient(to right, var(--ns-color-signal) var(--ns-slider-fill, 0%), var(--ns-color-surface-3) var(--ns-slider-fill, 0%));
+}
+.ns-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ns-color-surface-3); }
+.ns-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ns-color-signal); }
+.ns-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-color-text-1);
+  border: 2px solid var(--ns-color-ground);
+}
+.ns-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: var(--ns-radius-full); background: var(--ns-color-text-1); border: 2px solid var(--ns-color-ground); }
+.ns-slider:disabled { opacity: 0.55; cursor: not-allowed; }
+
+/* ----------------------------------------------------------- overlays */
+
+.ns-pop {
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-8);
+  background: var(--ns-color-surface-2);
+  color: var(--ns-color-text-1);
+  box-shadow: var(--ns-elevation-2);
+}
+.ns-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--ns-color-ground);
+  opacity: 0.72;
+  animation: ns-fade var(--ns-motion-duration-200) var(--ns-motion-easing-enter);
+}
+.ns-overlay--dialog { z-index: var(--ns-z-dialog); }
+.ns-overlay--sheet { z-index: var(--ns-z-sheet); }
+@keyframes ns-fade { from { opacity: 0; } }
+@keyframes ns-rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } }
+@keyframes ns-slide-right { from { transform: translateX(16px); opacity: 0; } }
+@keyframes ns-slide-left { from { transform: translateX(-16px); opacity: 0; } }
+@keyframes ns-slide-up { from { transform: translateY(16px); opacity: 0; } }
+
+.ns-dialog {
+  position: fixed;
+  z-index: var(--ns-z-dialog);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  width: min(calc(100vw - 32px), 480px);
+  max-height: calc(100vh - 64px);
+  overflow: auto;
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-12);
+  background: var(--ns-color-surface-1);
+  box-shadow: var(--ns-elevation-3);
+  animation: ns-rise var(--ns-motion-duration-200) var(--ns-motion-easing-enter);
+}
+.ns-dialog--sm { width: min(calc(100vw - 32px), 360px); }
+.ns-dialog--lg { width: min(calc(100vw - 32px), 720px); }
+.ns-sheet {
+  position: fixed;
+  z-index: var(--ns-z-sheet);
+  display: flex;
+  flex-direction: column;
+  background: var(--ns-color-surface-1);
+  border: 0 solid var(--ns-color-line-2);
+  box-shadow: var(--ns-elevation-3);
+  overflow: auto;
+}
+.ns-sheet--right { top: 0; right: 0; bottom: 0; width: min(100vw, 420px); border-left-width: 1px; animation: ns-slide-right var(--ns-motion-duration-200) var(--ns-motion-easing-enter); }
+.ns-sheet--left { top: 0; left: 0; bottom: 0; width: min(100vw, 420px); border-right-width: 1px; animation: ns-slide-left var(--ns-motion-duration-200) var(--ns-motion-easing-enter); }
+.ns-sheet--bottom { left: 0; right: 0; bottom: 0; max-height: 80vh; border-top-width: 1px; border-radius: var(--ns-radius-12) var(--ns-radius-12) 0 0; animation: ns-slide-up var(--ns-motion-duration-200) var(--ns-motion-easing-enter); }
+.ns-layer__header { display: flex; align-items: flex-start; gap: var(--ns-space-8); padding: var(--ns-space-16) var(--ns-space-16) var(--ns-space-8); }
+.ns-layer__header > :first-child { flex: 1; }
+.ns-layer__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-layer__description { margin: var(--ns-space-4) 0 0; color: var(--ns-color-text-2); }
+.ns-layer__body { padding: var(--ns-space-8) var(--ns-space-16); flex: 1; }
+.ns-layer__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-layer__close { margin: -4px -4px 0 0; }
+.ns-popover > .ns-layer__title { font-size: var(--ns-font-size-13); }
+
+.ns-popover {
+  position: fixed;
+  z-index: var(--ns-z-popover);
+  min-width: 200px;
+  max-width: min(calc(100vw - 16px), 360px);
+  padding: var(--ns-space-12);
+  animation: ns-fade var(--ns-motion-duration-120) var(--ns-motion-easing-enter);
+}
+.ns-popover:focus { outline: none; }
+.ns-menu {
+  position: fixed;
+  z-index: var(--ns-z-dropdown);
+  min-width: 180px;
+  padding: var(--ns-space-4);
+  animation: ns-fade var(--ns-motion-duration-120) var(--ns-motion-easing-enter);
+}
+.ns-menu:focus { outline: none; }
+.ns-menu__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-8);
+  height: var(--ns-size-control-sm);
+  padding: 0 var(--ns-space-8);
+  border-radius: var(--ns-radius-4);
+  color: var(--ns-color-text-1);
+  cursor: pointer;
+  outline: none;
+}
+.ns-menu__item:focus,
+.ns-menu__item:hover { background: var(--ns-color-surface-3); }
+.ns-menu__item:focus-visible { outline-offset: -2px; box-shadow: none; }
+.ns-menu__item[aria-disabled='true'] { color: var(--ns-color-text-3); cursor: not-allowed; background: transparent; }
+.ns-menu__icon { display: inline-flex; color: var(--ns-color-text-2); }
+.ns-menu__text { flex: 1; }
+.ns-menu__shortcut { color: var(--ns-color-text-3); font-size: var(--ns-font-size-11); }
+.ns-menu__separator { height: 1px; margin: var(--ns-space-4) calc(-1 * var(--ns-space-4)); background: var(--ns-color-line-1); }
+.ns-menu__label { padding: var(--ns-space-4) var(--ns-space-8); color: var(--ns-color-text-3); font-size: var(--ns-font-size-11); font-weight: var(--ns-font-weight-medium); }
+
+.ns-tooltip {
+  position: fixed;
+  z-index: var(--ns-z-tooltip);
+  max-width: 260px;
+  padding: var(--ns-space-4) var(--ns-space-8);
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-6);
+  background: var(--ns-color-surface-3);
+  color: var(--ns-color-text-1);
+  font-size: var(--ns-font-size-12);
+  line-height: var(--ns-font-line-height-12);
+  box-shadow: var(--ns-elevation-1);
+  pointer-events: none;
+  animation: ns-fade var(--ns-motion-duration-120) var(--ns-motion-easing-enter);
+}
+
+/* ------------------------------------------------------------- toasts */
+
+.ns-toaster { position: fixed; z-index: var(--ns-z-toast); pointer-events: none; }
+.ns-toaster--bottom-right { right: var(--ns-space-16); bottom: var(--ns-space-16); }
+.ns-toaster--bottom-left { left: var(--ns-space-16); bottom: var(--ns-space-16); }
+.ns-toaster--top-right { right: var(--ns-space-16); top: var(--ns-space-16); }
+.ns-toaster--top-left { left: var(--ns-space-16); top: var(--ns-space-16); }
+.ns-toaster--bottom-center { left: 50%; bottom: var(--ns-space-16); transform: translateX(-50%); }
+.ns-toaster__list { display: flex; flex-direction: column; gap: var(--ns-space-8); margin: 0; padding: 0; list-style: none; }
+.ns-toaster__item { pointer-events: auto; animation: ns-slide-up var(--ns-motion-duration-200) var(--ns-motion-easing-enter); }
+.ns-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-12);
+  width: min(calc(100vw - 32px), 360px);
+  padding: var(--ns-space-12);
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-8);
+  background: var(--ns-color-surface-2);
+  box-shadow: var(--ns-elevation-2);
+}
+.ns-toast.ns-tone-signal { border-left: 2px solid var(--ns-color-signal); }
+.ns-toast__text { flex: 1; min-width: 0; }
+.ns-toast__title { font-weight: var(--ns-font-weight-medium); }
+.ns-toast__description { color: var(--ns-color-text-2); }
+
+.ns-banner {
+  position: relative;
+  z-index: var(--ns-z-banner);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ns-space-12);
+  padding: var(--ns-space-8) var(--ns-space-12);
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-8);
+  background: var(--ns-color-surface-1);
+}
+.ns-banner.ns-tone-signal { background: var(--ns-color-signal-wash); border-color: var(--ns-color-signal-edge); }
+.ns-banner__icon { display: inline-flex; padding-top: 2px; color: var(--ns-color-text-2); }
+.ns-tone-signal > .ns-banner__icon { color: var(--ns-color-signal); }
+.ns-banner__text { flex: 1; display: flex; flex-wrap: wrap; gap: 0 var(--ns-space-8); padding: 4px 0; }
+.ns-banner__title { font-weight: var(--ns-font-weight-semibold); }
+.ns-banner__body { color: var(--ns-color-text-2); }
+.ns-banner__actions { display: flex; gap: var(--ns-space-8); }
+
+/* --------------------------------------------------- layout and nav */
+
+.ns-stack { display: flex; }
+.ns-stack:is(ul, ol) { margin: 0; padding: 0; list-style: none; }
+.ns-grid { display: grid; }
+
+.ns-app-shell {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  min-height: 100vh;
+  background: var(--ns-color-ground);
+}
+.ns-app-shell--no-sidebar { grid-template-columns: minmax(0, 1fr); }
+.ns-app-shell__sidebar { position: sticky; top: 0; height: 100vh; }
+.ns-app-shell__column { display: flex; flex-direction: column; min-width: 0; }
+.ns-app-shell__main { flex: 1; padding: var(--ns-space-24); outline: none; }
+.ns-skip-link {
+  position: absolute;
+  z-index: var(--ns-z-tooltip);
+  left: var(--ns-space-8);
+  top: var(--ns-space-8);
+  padding: var(--ns-space-6) var(--ns-space-12);
+  border-radius: var(--ns-radius-6);
+  background: var(--ns-color-surface-3);
+  color: var(--ns-color-text-1);
+  transform: translateY(-200%);
+}
+.ns-skip-link:focus { transform: none; }
+
+.ns-sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  height: 100%;
+  border-right: 1px solid var(--ns-color-line-1);
+  background: var(--ns-color-surface-1);
+}
+.ns-sidebar__header { padding: var(--ns-space-12); }
+.ns-sidebar__body { flex: 1; overflow: auto; padding: var(--ns-space-4) var(--ns-space-8); }
+.ns-sidebar__footer { padding: var(--ns-space-8); border-top: 1px solid var(--ns-color-line-1); }
+.ns-sidebar__section + .ns-sidebar__section { margin-top: var(--ns-space-16); }
+.ns-sidebar__section ul { margin: 0; padding: 0; list-style: none; }
+.ns-sidebar__title { padding: var(--ns-space-4) var(--ns-space-8); color: var(--ns-color-text-3); font-size: var(--ns-font-size-11); font-weight: var(--ns-font-weight-medium); }
+.ns-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-8);
+  height: var(--ns-size-control-sm);
+  padding: 0 var(--ns-space-8);
+  border-radius: var(--ns-radius-6);
+  color: var(--ns-color-text-2);
+  text-decoration: none;
+  font-weight: var(--ns-font-weight-medium);
+  cursor: pointer;
+}
+.ns-sidebar__item:hover { background: var(--ns-color-surface-2); color: var(--ns-color-text-1); }
+.ns-sidebar__item[aria-current='page'] { background: var(--ns-color-surface-3); color: var(--ns-color-text-1); }
+.ns-sidebar__icon { display: inline-flex; color: var(--ns-color-text-3); }
+.ns-sidebar__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-sidebar__meta { color: var(--ns-color-text-3); font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-11); }
+
+.ns-top-bar {
+  position: sticky;
+  top: 0;
+  z-index: var(--ns-z-banner);
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-12);
+  height: 48px;
+  padding: 0 var(--ns-space-16);
+  border-bottom: 1px solid var(--ns-color-line-1);
+  background: var(--ns-color-ground);
+}
+.ns-top-bar__center { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ns-space-8); }
+.ns-top-bar__start,
+.ns-top-bar__end { display: flex; align-items: center; gap: var(--ns-space-8); }
+
+.ns-tabs--vertical { display: flex; gap: var(--ns-space-16); }
+.ns-tabs__list { display: flex; gap: var(--ns-space-4); border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-tabs--vertical .ns-tabs__list { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--ns-color-line-1); padding-right: var(--ns-space-8); }
+.ns-tabs__trigger {
+  position: relative;
+  height: var(--ns-control-h, var(--ns-size-control-md));
+  padding: 0 var(--ns-space-8);
+  border: 0;
+  background: transparent;
+  color: var(--ns-color-text-2);
+  font: inherit;
+  font-weight: var(--ns-font-weight-medium);
+  cursor: pointer;
+  border-radius: var(--ns-radius-4) var(--ns-radius-4) 0 0;
+}
+.ns-tabs__trigger:hover { color: var(--ns-color-text-1); }
+.ns-tabs__trigger[aria-selected='true'] { color: var(--ns-color-text-1); }
+.ns-tabs__trigger[aria-selected='true']::after {
+  content: '';
+  position: absolute;
+  left: var(--ns-space-8);
+  right: var(--ns-space-8);
+  bottom: -1px;
+  height: 2px;
+  background: var(--ns-color-signal);
+}
+.ns-tabs--vertical .ns-tabs__trigger { text-align: left; border-radius: var(--ns-radius-4); }
+.ns-tabs--vertical .ns-tabs__trigger[aria-selected='true'] { background: var(--ns-color-surface-2); }
+.ns-tabs--vertical .ns-tabs__trigger[aria-selected='true']::after { display: none; }
+.ns-tabs__trigger:disabled { color: var(--ns-color-text-3); cursor: not-allowed; }
+.ns-tabs__content { padding: var(--ns-space-16) 0; border-radius: var(--ns-radius-4); }
+
+.ns-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-6); margin: 0; padding: 0; list-style: none; }
+.ns-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--ns-space-6); color: var(--ns-color-text-2); }
+.ns-breadcrumbs a { color: var(--ns-color-text-2); text-decoration: none; border-radius: var(--ns-radius-4); }
+.ns-breadcrumbs a:hover { color: var(--ns-color-text-1); }
+.ns-breadcrumbs a:focus-visible { outline: 2px solid var(--ns-color-focus); outline-offset: 1px; }
+.ns-breadcrumbs [aria-current='page'] { color: var(--ns-color-text-1); }
+.ns-breadcrumbs__sep { color: var(--ns-color-text-3); }
+
+.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-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 */
+
+.ns-table-wrap { overflow: auto; border: 1px solid var(--ns-color-line-1); border-radius: var(--ns-radius-8); background: var(--ns-color-surface-1); }
+.ns-table { width: 100%; border-collapse: collapse; font-size: var(--ns-font-size-13); }
+.ns-table__caption { padding: var(--ns-space-8) var(--ns-space-12); text-align: left; color: var(--ns-color-text-2); caption-side: top; }
+.ns-table__th,
+.ns-table__td { height: var(--ns-row-h, var(--ns-size-row-md)); padding: var(--ns-row-pad, var(--ns-space-6)) var(--ns-space-12); text-align: left; border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-table[data-density='compact'] { --ns-row-h: var(--ns-density-compact-row-height); --ns-row-pad: var(--ns-density-compact-row-padding); }
+.ns-table[data-density='comfortable'] { --ns-row-h: var(--ns-density-comfortable-row-height); --ns-row-pad: var(--ns-density-comfortable-row-padding); }
+.ns-table__th { color: var(--ns-color-text-2); font-size: var(--ns-font-size-12); font-weight: var(--ns-font-weight-medium); background: var(--ns-color-surface-1); white-space: nowrap; }
+.ns-table--sticky .ns-table__th { position: sticky; top: 0; z-index: 1; }
+.ns-table tbody .ns-table__row:last-child .ns-table__td { border-bottom: 0; }
+.ns-table tbody .ns-table__row:hover { background: var(--ns-color-surface-2); }
+.ns-table__row[aria-selected='true'] { background: var(--ns-color-signal-wash); }
+.ns-numeric { text-align: right; font-family: var(--ns-font-family-mono); font-variant-numeric: var(--ns-font-numeric-figures); }
+.ns-table__th.ns-numeric { font-family: inherit; }
+.ns-table__sort { display: inline-flex; align-items: center; gap: var(--ns-space-4); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: var(--ns-radius-4); }
+.ns-table__sort:hover { color: var(--ns-color-text-1); }
+.ns-table__sort-mark { color: var(--ns-color-text-3); }
+[aria-sort='ascending'] .ns-table__sort-mark,
+[aria-sort='descending'] .ns-table__sort-mark { color: var(--ns-color-signal); }
+
+.ns-list { margin: 0; padding: 0; list-style: none; }
+.ns-list--divided > .ns-list__item + .ns-list__item { border-top: 1px solid var(--ns-color-line-1); }
+.ns-list__item { display: flex; align-items: center; gap: var(--ns-space-12); min-height: var(--ns-row-h, var(--ns-size-row-md)); padding: var(--ns-row-pad, var(--ns-space-6)) var(--ns-space-4); }
+.ns-list__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.ns-list__title { color: var(--ns-color-text-1); font-weight: var(--ns-font-weight-medium); }
+.ns-list__description { color: var(--ns-color-text-2); font-size: var(--ns-font-size-12); }
+.ns-list__start,
+.ns-list__end { display: inline-flex; align-items: center; gap: var(--ns-space-8); color: var(--ns-color-text-2); }
+
+.ns-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ns-space-4);
+  height: 20px;
+  padding: 0 var(--ns-space-6);
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: var(--ns-radius-4);
+  color: var(--ns-color-text-2);
+  font-size: var(--ns-font-size-11);
+  font-weight: var(--ns-font-weight-medium);
+  white-space: nowrap;
+}
+.ns-tag.ns-tone-signal { color: var(--ns-color-signal); border-color: var(--ns-color-signal-edge); background: var(--ns-color-signal-wash); }
+.ns-tag__remove { padding: 0; margin-right: -2px; }
+.ns-tag__remove svg { width: 12px; height: 12px; }
+
+.ns-badge {
+  display: inline-flex;
+  align-items: center;
+  height: 18px;
+  min-width: 18px;
+  padding: 0 var(--ns-space-6);
+  border-radius: var(--ns-radius-full);
+  font-family: var(--ns-font-family-mono);
+  font-size: var(--ns-font-size-11);
+  font-variant-numeric: var(--ns-font-numeric-figures);
+  justify-content: center;
+}
+.ns-badge--outline { border: 1px solid var(--ns-color-line-2); color: var(--ns-color-text-2); }
+.ns-badge--solid { background: var(--ns-color-surface-3); color: var(--ns-color-text-1); }
+.ns-badge--outline.ns-tone-signal { border-color: var(--ns-color-signal-edge); color: var(--ns-color-signal); }
+.ns-badge--solid.ns-tone-signal { background: var(--ns-color-signal-fill); color: var(--ns-button-primary-fg); }
+
+.ns-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-color-surface-3);
+  border: 1px solid var(--ns-color-line-2);
+  color: var(--ns-color-text-1);
+  font-weight: var(--ns-font-weight-semibold);
+  letter-spacing: 0.02em;
+  user-select: none;
+}
+.ns-avatar--sm { width: 20px; height: 20px; font-size: 9px; }
+.ns-avatar--md { width: 24px; height: 24px; font-size: var(--ns-font-size-11); }
+.ns-avatar--lg { width: 32px; height: 32px; font-size: var(--ns-font-size-12); }
+
+.ns-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 3px;
+  border: 1px solid var(--ns-color-line-2);
+  border-radius: 3px;
+  background: var(--ns-color-surface-3);
+  color: var(--ns-color-text-2);
+  font-family: var(--ns-font-family-mono);
+  font-size: 10px;
+  line-height: 1;
+}
+
+.ns-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ns-space-8); padding: var(--ns-space-40) var(--ns-space-24); text-align: center; }
+.ns-empty__icon { color: var(--ns-color-text-3); }
+.ns-empty__title { margin: 0; font-size: var(--ns-font-size-15); line-height: var(--ns-font-line-height-15); font-weight: var(--ns-font-weight-medium); }
+.ns-empty__description { margin: 0; max-width: 40ch; color: var(--ns-color-text-2); }
+.ns-empty__action { margin-top: var(--ns-space-8); }
+
+.ns-skeleton {
+  display: block;
+  background: var(--ns-color-surface-3);
+  animation: ns-pulse 1600ms var(--ns-motion-easing-travel) infinite;
+}
+.ns-skeleton--line { height: 12px; border-radius: var(--ns-radius-4); }
+.ns-skeleton--block { height: 64px; border-radius: var(--ns-radius-8); }
+.ns-skeleton--circle { width: 24px; height: 24px; border-radius: var(--ns-radius-full); }
+@keyframes ns-pulse { 50% { opacity: 0.5; } }
+
+.ns-stale {
+  position: relative;
+  padding: var(--ns-space-24) var(--ns-space-12) var(--ns-space-12);
+  border: 1px dashed var(--ns-color-text-3);
+  border-radius: var(--ns-radius-8);
+}
+.ns-stale__label {
+  position: absolute;
+  top: var(--ns-space-6);
+  left: var(--ns-space-12);
+  color: var(--ns-color-text-2);
+  font-size: var(--ns-font-size-11);
+  font-weight: var(--ns-font-weight-medium);
+  line-height: var(--ns-font-line-height-11);
+}
+.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) {
+  .ns-root *,
+  .ns-root *::before,
+  .ns-root *::after {
+    animation-duration: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0ms !important;
+  }
+  .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 */
+
+.ns-study-hint { font-size: var(--ns-font-size-12); line-height: var(--ns-font-line-height-12); color: var(--ns-color-text-3); }
+.ns-study-label { font-size: var(--ns-font-size-12); font-weight: var(--ns-font-weight-medium); color: var(--ns-color-text-2); }
+.ns-study-muted { color: var(--ns-color-text-3); }
+.ns-study-signal { color: var(--ns-color-signal); }
+.ns-study-mono { font-family: var(--ns-font-family-mono); font-variant-numeric: var(--ns-font-numeric-figures); }
+.ns-study-id { flex: none; width: 22px; font-family: var(--ns-font-family-mono); font-size: var(--ns-font-size-12); color: var(--ns-color-text-3); }
+.ns-study-divider { width: 1px; height: 20px; background: var(--ns-color-line-2); }
+.ns-study-panel { border: 1px solid var(--ns-color-line-1); border-radius: var(--ns-radius-8); background: var(--ns-color-surface-1); overflow: hidden; }
+.ns-study-panel__head { display: flex; align-items: center; gap: var(--ns-space-8); min-height: 36px; padding: 0 var(--ns-space-12); border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-study-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); color: var(--ns-color-text-1); }
+.ns-study-panel__end,
+.ns-study-panel__action { margin-left: auto; }
+.ns-study-row { display: flex; align-items: center; gap: var(--ns-space-12); min-height: 36px; padding: 0 var(--ns-space-12); border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-study-row:last-child { border-bottom: 0; }
+.ns-study-row:hover { background: var(--ns-color-surface-2); }
+.ns-study-row__input,
+.ns-brief__title,
+.ns-brief__decision,
+.ns-research__wording {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: var(--ns-radius-6);
+  background: transparent;
+  color: var(--ns-color-text-1);
+  font: inherit;
+  padding: var(--ns-space-2) var(--ns-space-4);
+  margin-left: calc(-1 * var(--ns-space-4));
+}
+.ns-study-row__input:focus-visible,
+.ns-brief__title:focus-visible,
+.ns-brief__decision:focus-visible,
+.ns-research__wording:focus-visible,
+.ns-research__anchor-input:focus-visible { outline: none; border-color: var(--ns-color-focus); box-shadow: 0 0 0 3px var(--ns-color-focus-halo); }
+.ns-study-row__ghost { flex: 1; border: 0; background: transparent; color: var(--ns-color-text-3); font: inherit; text-align: left; padding: var(--ns-space-6) 0; cursor: pointer; border-radius: var(--ns-radius-4); }
+.ns-study-row__ghost:focus-visible,
+.ns-study-icon-button:focus-visible,
+.ns-research__select:focus-visible { outline: 2px solid var(--ns-color-focus); outline-offset: -2px; }
+.ns-study-icon-button {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 24px; height: 24px; flex: none;
+  border: 0; border-radius: var(--ns-radius-4); background: transparent; color: var(--ns-color-text-3); cursor: pointer;
+}
+.ns-study-icon-button:hover { background: var(--ns-color-surface-3); color: var(--ns-color-text-1); }
+.ns-study-icon-button:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
+@media (pointer: coarse) { .ns-study-icon-button { width: 44px; height: 44px; } }
+.ns-study-callout {
+  display: flex; gap: var(--ns-space-8); align-items: flex-start;
+  padding: var(--ns-space-8) var(--ns-space-12);
+  border: 1px solid var(--ns-color-signal-edge); border-radius: var(--ns-radius-6);
+  background: var(--ns-color-signal-wash);
+  font-size: var(--ns-font-size-12); line-height: var(--ns-font-line-height-12); color: var(--ns-color-text-1);
+  max-width: 640px;
+}
+.ns-study-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ns-space-6); padding: var(--ns-space-24); text-align: center; }
+.ns-study-empty p { margin: 0; }
+.ns-study-empty__title { font-weight: var(--ns-font-weight-semibold); color: var(--ns-color-text-1); }
+
+/* StudyStatus */
+.ns-study-status { display: inline-flex; align-items: center; gap: var(--ns-space-6); color: var(--ns-color-text-2); font-size: var(--ns-font-size-12); font-weight: var(--ns-font-weight-medium); white-space: nowrap; }
+.ns-study-status--tag { height: 20px; padding: 0 var(--ns-space-6); border: 1px solid var(--ns-color-line-2); border-radius: var(--ns-radius-4); font-size: var(--ns-font-size-11); }
+.ns-study-status__mark { flex: none; color: var(--ns-color-text-3); }
+.ns-study-status--running .ns-study-status__mark,
+.ns-study-status--failed .ns-study-status__mark { color: var(--ns-color-signal); }
+.ns-study-status--complete .ns-study-status__mark { color: var(--ns-color-text-2); }
+.ns-study-status--archived { color: var(--ns-color-text-3); }
+.ns-study-status--running.ns-study-status--tag,
+.ns-study-status--failed.ns-study-status--tag { border-style: dashed; }
+.ns-study-status[data-motion='sweep'] .ns-study-status__mark { animation: ns-study-sweep 2.4s linear infinite; }
+@keyframes ns-study-sweep { to { transform: rotate(360deg); } }
+
+/* StudyShell */
+.ns-study-shell { display: flex; flex-wrap: wrap; min-height: 100%; background: var(--ns-color-ground); color: var(--ns-color-text-1); }
+.ns-study-shell__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; }
+.ns-study-shell__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-8); min-height: 44px; padding: 0 var(--ns-space-16); border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-study-shell__crumb { display: flex; align-items: center; gap: var(--ns-space-6); color: var(--ns-color-text-3); }
+.ns-study-shell__crumb b { color: var(--ns-color-text-1); font-weight: var(--ns-font-weight-medium); }
+.ns-study-shell__spacer { flex: 1; }
+.ns-study-shell__save { font-size: var(--ns-font-size-12); color: var(--ns-color-text-3); }
+.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-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; }
+.ns-study-shell__tab.ns-tabs__trigger:focus-visible { outline: 2px solid var(--ns-color-focus); outline-offset: 1px; }
+.ns-study-shell__tab-meta { font-size: var(--ns-font-size-11); color: var(--ns-color-text-3); font-variant-numeric: var(--ns-font-numeric-figures); }
+.ns-study-shell__tab-actions { margin-left: auto; display: flex; gap: var(--ns-space-8); }
+.ns-study-shell__content.ns-tabs__content { flex: 1; padding: var(--ns-space-24) var(--ns-space-32); }
+.ns-study-shell__content:focus-visible { outline: 2px solid var(--ns-color-focus); outline-offset: -2px; }
+.ns-study-shell__aside { flex: 1 1 260px; max-width: 300px; border-left: 1px solid var(--ns-color-line-1); display: flex; flex-direction: column; }
+
+/* BriefForm */
+.ns-brief { display: flex; flex-direction: column; gap: var(--ns-space-20); max-width: 820px; }
+.ns-brief__head { display: flex; flex-direction: column; gap: var(--ns-space-6); }
+.ns-brief__title { font-size: var(--ns-font-size-18); line-height: var(--ns-font-line-height-18); font-weight: var(--ns-font-weight-semibold); }
+.ns-brief__decision { resize: vertical; color: var(--ns-color-text-2); font-size: var(--ns-font-size-15); line-height: var(--ns-font-line-height-15); }
+.ns-brief__toolbar { display: flex; flex-wrap: wrap; gap: var(--ns-space-8); align-items: center; }
+
+/* PopulationPanel */
+.ns-population { display: flex; flex-direction: column; gap: var(--ns-space-20); max-width: 900px; }
+.ns-population__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-12); }
+.ns-population__market { display: inline-flex; align-items: center; gap: var(--ns-space-8); }
+.ns-population__number { width: 120px; }
+.ns-population__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
+.ns-population__group { padding: var(--ns-space-8) var(--ns-space-12) var(--ns-space-12); border-bottom: 1px solid var(--ns-color-line-1); overflow: hidden; }
+.ns-population__group-title { margin: 0 0 var(--ns-space-4); font-size: var(--ns-font-size-12); font-weight: var(--ns-font-weight-medium); color: var(--ns-color-text-3); }
+.ns-population__group svg { max-width: 100%; height: auto; }
+
+/* ResearchBuilder */
+.ns-research { display: flex; flex-wrap: wrap; margin: calc(-1 * var(--ns-space-24)) calc(-1 * var(--ns-space-32)); min-height: 100%; }
+.ns-research__list { flex: 1 1 360px; max-width: 420px; border-right: 1px solid var(--ns-color-line-1); display: flex; flex-direction: column; }
+.ns-research__list-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); color: var(--ns-color-text-3); font-size: var(--ns-font-size-12); font-weight: var(--ns-font-weight-medium); }
+.ns-research__items { margin: 0; padding: 0; list-style: none; }
+.ns-research__item { display: flex; align-items: center; border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-research__item:hover { background: var(--ns-color-surface-2); }
+.ns-research__item--on,
+.ns-research__item--on:hover { background: var(--ns-color-surface-3); }
+.ns-research__select { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ns-space-8); height: 36px; padding: 0 var(--ns-space-12); border: 0; background: transparent; color: var(--ns-color-text-1); font: inherit; text-align: left; cursor: pointer; }
+.ns-research__q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-research__tools { display: inline-flex; padding-right: var(--ns-space-6); }
+.ns-research__editor { flex: 999 1 420px; min-width: 0; padding: var(--ns-space-20) var(--ns-space-24); display: flex; flex-direction: column; gap: var(--ns-space-16); }
+.ns-research__editor-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-6); }
+.ns-research__wording { resize: vertical; font-size: var(--ns-font-size-15); line-height: var(--ns-font-line-height-15); font-weight: var(--ns-font-weight-medium); }
+.ns-research__anchors { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--ns-space-6); }
+.ns-research__anchors legend { margin-bottom: var(--ns-space-8); }
+.ns-research__anchor { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; gap: var(--ns-space-8); align-items: center; }
+.ns-research__anchor-input { height: var(--ns-size-control-sm); padding: 0 var(--ns-space-8); border: 1px solid var(--ns-color-line-2); border-radius: var(--ns-radius-6); background: var(--ns-color-surface-1); color: var(--ns-color-text-1); font: inherit; }
+.ns-research__anchor-input.ns-invalid { border-color: var(--ns-color-signal-edge); background: var(--ns-color-signal-wash); }
+
+/* ResponsesView */
+.ns-responses { display: flex; flex-direction: column; gap: var(--ns-space-16); max-width: 1100px; }
+.ns-responses__intro { margin: 0; max-width: 720px; }
+.ns-responses__row { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) 140px minmax(0, 1fr); gap: var(--ns-space-16); align-items: center; padding: var(--ns-space-12); border-bottom: 1px solid var(--ns-color-line-1); }
+.ns-responses__row:last-child { border-bottom: 0; }
+.ns-responses__dist { min-width: 0; overflow: hidden; }
+.ns-responses__dist svg { max-width: 100%; height: auto; }
+.ns-responses__extra { grid-column: 2 / -1; color: var(--ns-color-text-2); }
+@media (max-width: 720px) {
+  .ns-responses__row { grid-template-columns: 28px minmax(0, 1fr); }
+  .ns-responses__figure,
+  .ns-responses__dist { grid-column: 2; }
+}
+
+/* RunCost, RunConfirm */
+.ns-run-cost { display: flex; flex-direction: column; gap: var(--ns-space-8); }
+.ns-run-cost__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ns-space-12); }
+.ns-run-cost__button { width: 100%; }
+.ns-run-confirm__cost { padding: var(--ns-space-12) 0; }
+
+/* Illustrations */
+.ns-illustration { display: block; max-width: 100%; height: auto; }
+.ns-illustration__orbit { animation: ns-study-sweep linear infinite; }
+.ns-lockup { display: inline-flex; align-items: center; gap: 0.35em; color: var(--ns-color-text-1); line-height: 1; }
+.ns-lockup svg { flex: none; }
+.ns-lockup__word { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.1em; letter-spacing: -0.01em; }
+
+@media (prefers-reduced-motion: reduce) {
+  .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; }
+}