optikos 0.0.0-stage → 0.2.0

package/dist/optikos.css

@@ -0,0 +1,4240 @@
+/*
+ * Optikos tokens. Three layers, all custom properties:
+ *   1. primitives   --op-blue-500            (raw palette, never used by components)
+ *   2. semantic     --op-color-primary       (what themes change)
+ *   3. component    --op-button-bg           (declared by each component, falls back to a semantic token)
+ * Everything lives in @layer optikos so unlayered user CSS always wins without !important.
+ * Scope a theme with data-op-theme="dark" (several allowed: "dark compact") on any element.
+ */
+@layer optikos {
+  :root,
+  [data-op-theme~='light'] {
+    /* primitives */
+    --op-gray-0: #ffffff;
+    --op-gray-50: #f8fafc;
+    --op-gray-100: #f1f5f9;
+    --op-gray-200: #e2e8f0;
+    --op-gray-300: #cbd5e1;
+    --op-gray-400: #94a3b8;
+    --op-gray-500: #64748b;
+    --op-gray-600: #475569;
+    --op-gray-700: #334155;
+    --op-gray-800: #1e293b;
+    --op-gray-900: #0f172a;
+    --op-blue-50: #eff6ff;
+    --op-blue-100: #dbeafe;
+    --op-blue-500: #3b82f6;
+    --op-blue-600: #2563eb;
+    --op-blue-700: #1d4ed8;
+    --op-red-50: #fef2f2;
+    --op-red-500: #ef4444;
+    --op-red-600: #dc2626;
+    --op-red-700: #b91c1c;
+    --op-green-50: #f0fdf4;
+    --op-green-600: #16a34a;
+    --op-green-700: #15803d;
+    --op-amber-50: #fffbeb;
+    --op-amber-600: #d97706;
+    --op-amber-700: #b45309;
+
+    /* semantic colors: steel blue on cool grey, made for long sessions in grids and forms */
+    --op-color-bg: #edf0f4;
+    --op-color-surface: var(--op-gray-0);
+    --op-color-surface-2: #f3f5f8;
+    --op-color-fg: #1b2430;
+    --op-color-fg-muted: #5b6676; /* keeps 4.5:1 on surface-2 */
+    --op-color-border: #d8dee6;
+    --op-color-border-strong: #a9b3c1;
+    --op-color-hover: #eaeff6;
+    --op-color-selected: #d9e6f7;
+    --op-color-primary: #1f4e8c;
+    --op-color-primary-hover: #173d6f;
+    --op-color-primary-fg: var(--op-gray-0);
+    --op-color-primary-soft: #e4edf8;
+    --op-color-danger: #b3261e;
+    --op-color-danger-hover: #8f1d17;
+    --op-color-danger-fg: var(--op-gray-0);
+    --op-color-danger-soft: #fbe4e2;
+    --op-color-success: #1e7a4d;
+    --op-color-success-soft: #dff2e8;
+    --op-color-warning: #9a5b00;
+    --op-color-warning-soft: #fcecc9;
+    --op-color-info: #1f5fa8;
+    --op-color-info-soft: #dfeaf8;
+    --op-color-focus: #2f7bd6;
+    --op-color-disabled-fg: #9aa4b2;
+    --op-color-disabled-bg: #eef1f5;
+    --op-color-overlay: rgb(16 24 38 / 0.5);
+    --op-color-inverse-bg: #14213a;
+    --op-color-inverse-fg: #eaf0fa;
+
+    /* typography */
+    --op-font-family: 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
+    --op-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    --op-font-size: 0.9375rem;
+    --op-font-size-sm: 0.8125rem;
+    --op-font-size-lg: 1.0625rem;
+    --op-font-size-xl: 1.3125rem;
+    --op-line-height: 1.45;
+    --op-font-weight: 400;
+    --op-font-weight-medium: 500;
+    --op-font-weight-bold: 600;
+
+    /* spacing, density, shape: comfortable, small radii, hairline borders */
+    --op-space-1: 0.25rem;
+    --op-space-2: 0.5rem;
+    --op-space-3: 0.875rem;
+    --op-space-4: 1.125rem;
+    --op-space-5: 1.5rem;
+    --op-space-6: 2.25rem;
+    --op-control-height: 2.375rem;
+    --op-control-padding-x: 0.875rem;
+    --op-row-height: 2.75rem;
+    --op-border-width: 1px;
+    --op-radius-sm: 0.1875rem;
+    --op-radius: 0.25rem;
+    --op-radius-lg: 0.375rem;
+    --op-radius-pill: 62.5rem;
+    --op-focus-width: 2px;
+    --op-focus-offset: 1px;
+    --op-icon-size: 1.3em;
+    --op-icon-stroke: 1.75;
+
+    /* elevation and motion: flat at rest, shadows only on what floats */
+    --op-shadow-sm: none;
+    --op-shadow: 0 2px 6px rgb(16 24 38 / 0.14);
+    --op-shadow-lg: 0 10px 28px rgb(16 24 38 / 0.28);
+    --op-duration: 90ms;
+
+    /* scrollbars follow the theme: thin, thumb from the strong border, track transparent */
+    --op-scrollbar-width: thin;
+    --op-scrollbar-size: 0.5rem;
+    --op-scrollbar-thumb: var(--op-color-border-strong);
+    --op-scrollbar-track: transparent;
+    --op-easing: ease-out;
+    --op-z-layer: 1000;
+  }
+
+  /* The light look's component colors (a navy sidebar, a tinted grid header). Literal values, and not on :root under
+     another theme, so a theme that does not set them keeps the component defaults. dark.css sets its own. */
+  :root:not([data-op-theme]),
+  [data-op-theme~='light'],
+  [data-op-theme='compact'] {
+    --op-navmenu-item-height: 2.5rem;
+    --op-navmenu-bg: #14213a;
+    --op-navmenu-fg: #d5ddeb;
+    --op-navmenu-group-fg: #8195b4;
+    --op-navmenu-item-hover-bg: #1d2f52;
+    --op-navmenu-active-bg: #203c6a;
+    --op-navmenu-active-fg: #ffffff;
+    --op-navmenu-active-bar: #5ea6f5;
+    --op-navmenu-badge-bg: #5ea6f5;
+    --op-navmenu-badge-fg: #0a1730;
+    --op-grid-header-bg: #e6ebf1;
+    --op-grid-header-fg: #2a3547;
+    --op-field-label-weight: 600;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root,
+    [data-op-theme] {
+      --op-duration: 0.01ms;
+    }
+  }
+
+  /* inherited: every scroll area below a themed element (and the global layer) picks it up */
+  :root,
+  [data-op-theme] {
+    scrollbar-width: var(--op-scrollbar-width);
+    scrollbar-color: var(--op-scrollbar-thumb) var(--op-scrollbar-track);
+  }
+  /* browsers without scrollbar-color (older Safari) */
+  @supports not (scrollbar-color: auto) {
+    :root ::-webkit-scrollbar,
+    [data-op-theme] ::-webkit-scrollbar {
+      inline-size: var(--op-scrollbar-size);
+      block-size: var(--op-scrollbar-size);
+    }
+    :root ::-webkit-scrollbar-thumb,
+    [data-op-theme] ::-webkit-scrollbar-thumb {
+      background: var(--op-scrollbar-thumb);
+      border-radius: var(--op-radius-pill);
+    }
+    :root ::-webkit-scrollbar-track,
+    [data-op-theme] ::-webkit-scrollbar-track {
+      background: var(--op-scrollbar-track);
+    }
+  }
+
+  /* Base look for any themed subtree, so a scoped theme repaints its background and text. */
+  [data-op-theme] {
+    color: var(--op-color-fg);
+    background: var(--op-color-bg);
+    font-family: var(--op-font-family);
+    font-size: var(--op-font-size);
+    line-height: var(--op-line-height);
+  }
+  :where(.op-layout, .op-component, .op-field, .op-panel, .op-container, .op-layer *) {
+    box-sizing: border-box;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-spinner-size: 1.5rem;
+    --op-spinner-stroke: 2px;
+  }
+
+  /* every Optikos element gets the themed font; zero specificity, so any component rule overrides it */
+  :where([class^='op-'], [class*=' op-']) {
+    font-family: var(--op-font-family);
+    font-size: var(--op-font-size);
+  }
+  .op-component,
+  .op-container {
+    color: var(--op-color-fg);
+  }
+
+  /* loading mask (Component.setLoading) */
+  .is-loading {
+    position: relative;
+  }
+  .op-mask {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--op-space-2);
+    background: var(--op-mask-bg, color-mix(in srgb, var(--op-color-surface) 70%, transparent));
+    color: var(--op-color-fg);
+  }
+
+  .op-spinner {
+    display: inline-block;
+    box-sizing: border-box;
+    width: var(--op-spinner-size);
+    height: var(--op-spinner-size);
+    border: var(--op-spinner-stroke) solid var(--op-color-border-strong);
+    border-top-color: var(--op-spinner-color, var(--op-color-primary));
+    border-radius: 50%;
+    animation: op-spin 700ms linear infinite;
+  }
+  @keyframes op-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .op-spinner {
+      animation-duration: 2s;
+    }
+  }
+
+  /* virtual lists (core/virtual.ts) */
+  .op-virtual {
+    position: relative;
+    inline-size: 100%;
+  }
+  .op-sr-only {
+    position: absolute;
+    inline-size: 0;
+    block-size: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* floating layer */
+  .op-layer {
+    position: fixed;
+    inset: 0;
+    z-index: var(--op-z-layer);
+    pointer-events: none;
+    font-family: var(--op-font-family);
+    font-size: var(--op-font-size);
+    line-height: var(--op-line-height);
+    color: var(--op-color-fg);
+  }
+  .op-layer > * {
+    pointer-events: auto;
+  }
+
+  :where(.op-component, .op-field, .op-container) :focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-field-label-width: 8rem;
+  }
+
+  .op-field {
+    --_label-fg: var(--op-field-label-fg, var(--op-color-fg));
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-field-gap, var(--op-space-1));
+    font-family: var(--op-font-family);
+    font-size: var(--op-font-size);
+    color: var(--op-color-fg);
+    min-width: 0;
+  }
+  .op-field__label {
+    color: var(--_label-fg);
+    font-size: var(--op-field-label-size, var(--op-font-size));
+    font-weight: var(--op-field-label-weight, var(--op-font-weight-medium));
+  }
+  .op-field.is-required > .op-field__label::after {
+    content: ' *';
+    color: var(--op-color-danger);
+  }
+  .op-field__control {
+    min-width: 0;
+  }
+  .op-field__help {
+    color: var(--op-field-help-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+  }
+  .op-field__error {
+    color: var(--op-field-error-fg, var(--op-color-danger));
+    font-size: var(--op-font-size-sm);
+  }
+  .op-field__error:empty {
+    display: none;
+  }
+  /* stableSize: the error line is always reserved, so a field does not grow when it becomes invalid */
+  .op-field.op-stable > .op-field__error:empty {
+    display: block;
+    min-block-size: calc(var(--op-font-size-sm) * var(--op-line-height));
+  }
+  .op-field--label-left {
+    display: grid;
+    grid-template-columns: var(--op-field-label-width) minmax(0, 1fr);
+    align-items: start;
+    column-gap: var(--op-space-3);
+  }
+  .op-field--label-left > .op-field__label {
+    padding-block: var(--op-space-2);
+    grid-column: 1;
+  }
+  .op-field--label-left > .op-field__control,
+  .op-field--label-left > .op-field__help,
+  .op-field--label-left > .op-field__error {
+    grid-column: 2;
+  }
+  .op-field.is-disabled {
+    color: var(--op-color-disabled-fg);
+  }
+}
+
+@layer optikos {
+  [hidden] {
+    display: none !important;
+  }
+  .op-layout {
+    box-sizing: border-box;
+  }
+  .op-layout-fit {
+    display: flex;
+    flex-direction: column;
+  }
+  .op-layout-fit > * {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+  }
+  .op-layout-hbox,
+  .op-layout-vbox {
+    display: flex;
+    gap: var(--op-layout-gap, var(--op-space-2));
+    align-items: var(--op-layout-align, stretch);
+    justify-content: var(--op-layout-justify, flex-start);
+    flex-wrap: var(--op-layout-wrap, nowrap);
+  }
+  .op-layout-hbox {
+    flex-direction: row;
+  }
+  .op-layout-vbox {
+    flex-direction: column;
+  }
+  .op-layout-hbox > *,
+  .op-layout-vbox > * {
+    min-width: 0;
+    min-height: 0;
+  }
+  /* a column keeps its children at their natural height (the container scrolls or clips instead of squashing them);
+     a child that sets `flex` (e.g. a grid with flex: 1) still grows and shrinks as asked */
+  .op-layout-vbox > * {
+    flex-shrink: 0;
+  }
+  /* content that is taller than its column scrolls inside it; it never spills over what comes next */
+  .op-layout-vbox {
+    overflow: auto;
+  }
+  .op-layout-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--op-layout-columns, 1), minmax(0, 1fr));
+    gap: var(--op-layout-gap, var(--op-space-2));
+  }
+  .op-layout-border {
+    display: grid;
+    grid-template-areas: 'north north north' 'west center east' 'south south south';
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    gap: var(--op-layout-gap, 0);
+  }
+  .op-layout-border > * {
+    min-width: 0;
+    min-height: 0;
+  }
+  .op-layout-hbox.op-layout-stack.is-narrow {
+    flex-direction: column;
+  }
+  /* stacked children take their natural height (a `flex: 1` meant for the row would squash them in a column) */
+  .op-layout-hbox.op-layout-stack.is-narrow > * {
+    flex: 0 0 auto !important;
+  }
+  .op-layout-grid.is-narrow {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .op-layout-grid.is-narrow > * {
+    grid-column: auto !important;
+  }
+
+  /* narrow border layout: one column; west/east become drawers sliding over the center */
+  :root {
+    --op-region-drawer-width: 20rem;
+    --op-region-drawer-z: 3;
+  }
+  .op-layout-border {
+    position: relative;
+  }
+  .op-layout-border.is-narrow {
+    grid-template-areas: 'north' 'center' 'south';
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .op-layout-border.is-narrow > [data-region='west'],
+  .op-layout-border.is-narrow > [data-region='east'] {
+    position: absolute;
+    inset-block: 0;
+    z-index: var(--op-region-drawer-z);
+    inline-size: min(var(--op-region-drawer-width), 100%) !important;
+    visibility: hidden;
+    transition: transform var(--op-duration) var(--op-easing), visibility var(--op-duration);
+    box-shadow: var(--op-shadow-lg);
+  }
+  .op-layout-border.is-narrow > [data-region='west'] {
+    inset-inline-start: 0;
+    transform: translateX(-100%);
+  }
+  .op-layout-border.is-narrow > [data-region='east'] {
+    inset-inline-end: 0;
+    transform: translateX(100%);
+  }
+  .op-layout-border.is-narrow > [data-region].is-open {
+    visibility: visible;
+    transform: none;
+  }
+  .op-layout-border.is-narrow.has-open-region::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: calc(var(--op-region-drawer-z) - 1);
+    background: var(--op-color-overlay);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-badge-dot-size: 0.5rem;
+    --op-badge-height: 1.5em;
+    --op-badge-icon-size: 1em;
+  }
+  .op-badge {
+    --_fg: var(--op-color-fg);
+    --_bg: var(--op-color-surface-2);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: 0 var(--op-badge-padding-x, var(--op-space-2));
+    min-block-size: var(--op-badge-height);
+    box-sizing: border-box;
+    color: var(--op-badge-fg, var(--_fg));
+    background: var(--op-badge-bg, var(--_bg));
+    border-radius: var(--op-badge-radius, var(--op-radius-pill));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-badge-font-weight, var(--op-font-weight-bold));
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  .op-badge--primary { --_fg: var(--op-color-primary-text, var(--op-color-primary)); --_bg: var(--op-color-primary-soft); }
+  .op-badge--success { --_fg: var(--op-color-success); --_bg: var(--op-color-success-soft); }
+  .op-badge--warning { --_fg: var(--op-color-warning); --_bg: var(--op-color-warning-soft); }
+  .op-badge--danger { --_fg: var(--op-color-danger); --_bg: var(--op-color-danger-soft); }
+  .op-badge--info { --_fg: var(--op-color-info); --_bg: var(--op-color-info-soft); }
+  .op-badge__dot {
+    inline-size: var(--op-badge-dot-size);
+    block-size: var(--op-badge-dot-size);
+    border-radius: 50%;
+    background: currentColor;
+  }
+  .op-badge .op-icon {
+    --op-icon-size: var(--op-badge-icon-size);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-button-spinner-size: 1em;
+    --op-button-primary-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
+  }
+
+  .op-button {
+    --_bg: var(--op-button-bg, var(--op-color-surface));
+    --_fg: var(--op-button-fg, var(--op-color-fg));
+    --_border: var(--op-button-border, var(--op-color-border-strong));
+    --_hover: var(--op-button-hover-bg, var(--op-color-hover));
+    --_active: var(--op-button-active-bg, var(--op-color-selected));
+    display: inline-grid;
+    place-items: center;
+    box-sizing: border-box;
+    min-block-size: var(--op-button-height, var(--op-control-height));
+    padding: var(--op-button-padding-y, 0) var(--op-button-padding-x, var(--op-control-padding-x));
+    font: inherit;
+    font-weight: var(--op-button-font-weight, var(--op-font-weight-medium));
+    color: var(--_fg);
+    background: var(--_bg);
+    border: var(--op-border-width) solid var(--_border);
+    border-radius: var(--op-button-radius, var(--op-radius));
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background var(--op-duration) var(--op-easing), border-color var(--op-duration) var(--op-easing), transform var(--op-motion-press-duration, 100ms) var(--op-motion-ease-out, ease-out);
+  }
+  .op-button:hover:not(:disabled) {
+    background: var(--_hover);
+  }
+  .op-button:active:not(:disabled),
+  .op-button.is-pressed {
+    background: var(--_active);
+  }
+  .op-button:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  /* normal face and loading face occupy the same grid cell */
+  .op-button__face,
+  .op-button__busy {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--op-button-gap, var(--op-space-2));
+  }
+  .op-button--icon-right .op-button__face {
+    flex-direction: row-reverse;
+  }
+  .op-button__busy {
+    visibility: hidden;
+  }
+  .op-button.is-loading .op-button__busy {
+    visibility: visible;
+  }
+  .op-button.is-loading .op-button__face {
+    visibility: hidden;
+  }
+  /* stableSize: false → only the active face takes space, the button fits its content */
+  .op-button:not(.op-stable) .op-button__busy,
+  .op-button:not(.op-stable).is-loading .op-button__face {
+    display: none;
+  }
+  .op-button:not(.op-stable).is-loading .op-button__busy {
+    display: inline-flex;
+  }
+
+  .op-button--primary {
+    --_bg: var(--op-button-primary-bg, var(--op-color-primary));
+    --_fg: var(--op-button-primary-fg, var(--op-color-primary-fg));
+    --_border: var(--op-button-primary-bg, var(--op-color-primary));
+    --_hover: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
+    --_active: var(--op-button-primary-hover-bg, var(--op-color-primary-hover));
+    box-shadow: var(--op-button-primary-shadow);
+  }
+  .op-button--danger {
+    --_bg: var(--op-button-danger-bg, var(--op-color-danger));
+    --_fg: var(--op-button-danger-fg, var(--op-color-danger-fg));
+    --_border: var(--op-button-danger-bg, var(--op-color-danger));
+    --_hover: var(--op-button-danger-hover-bg, var(--op-color-danger-hover));
+    --_active: var(--op-button-danger-hover-bg, var(--op-color-danger-hover));
+  }
+  .op-button--ghost {
+    --_bg: transparent;
+    --_border: transparent;
+  }
+
+  .op-button:disabled {
+    cursor: not-allowed;
+    color: var(--op-color-disabled-fg);
+    background: var(--op-color-disabled-bg);
+    border-color: var(--op-color-border);
+  }
+  .op-button.is-loading {
+    cursor: progress;
+  }
+  .op-button__spinner {
+    --op-spinner-size: var(--op-button-spinner-size);
+    --op-spinner-color: currentColor;
+  }
+}
+
+@layer optikos {
+  .op-chip {
+    display: inline-flex;
+    align-items: center;
+    max-inline-size: 100%;
+    box-sizing: border-box;
+    min-block-size: var(--op-chip-height, calc(var(--op-control-height) * 0.8));
+    color: var(--op-chip-fg, var(--op-color-fg));
+    background: var(--op-chip-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-chip-border, var(--op-color-border-strong));
+    border-radius: var(--op-chip-radius, var(--op-radius-pill));
+    font-size: var(--op-font-size-sm);
+    vertical-align: middle;
+  }
+  .op-chip__main,
+  .op-chip__remove {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: 0 var(--op-space-3);
+    min-block-size: inherit;
+    color: inherit;
+    background: none;
+    border: 0;
+    border-radius: inherit;
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-chip__main {
+    min-inline-size: 0;
+  }
+  .op-chip__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-chip__remove {
+    padding-inline: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-fg-muted);
+  }
+  .op-chip__remove:hover:not(:disabled) {
+    color: var(--op-color-danger);
+  }
+  .op-chip__main:focus-visible,
+  .op-chip__remove:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-chip:hover:not(.is-disabled) {
+    border-color: var(--op-chip-hover-border, var(--op-color-primary));
+  }
+  .op-chip.is-selected {
+    color: var(--op-chip-selected-fg, var(--op-color-primary-text, var(--op-color-primary)));
+    background: var(--op-chip-selected-bg, var(--op-color-primary-soft));
+    border-color: var(--op-chip-selected-border, var(--op-color-primary));
+  }
+  .op-chip.is-disabled {
+    color: var(--op-color-disabled-fg);
+    border-color: var(--op-color-border);
+  }
+  .op-chip.is-disabled button {
+    cursor: default;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-codeviewer-font-size: 0.8125rem;
+    --op-codeviewer-line-height: 1.6;
+    --op-codeviewer-tab-size: 2;
+    --op-codeviewer-gutter-gap: 1.25rem;
+    --op-codeviewer-max-height: 32rem;
+  }
+  .op-codeviewer {
+    overflow: hidden;
+    color: var(--op-codeviewer-fg, var(--op-color-fg));
+    background: var(--op-codeviewer-bg, var(--op-color-surface-2));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius-lg);
+  }
+  .op-codeviewer__bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-control-height);
+    padding-inline: var(--op-space-3) var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-codeviewer__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-codeviewer__pre {
+    margin: 0;
+    padding: var(--op-space-3) var(--op-space-4);
+    max-block-size: var(--op-codeviewer-max-height);
+    overflow: auto;
+    font-family: var(--op-font-mono);
+    font-size: var(--op-codeviewer-font-size);
+    line-height: var(--op-codeviewer-line-height);
+    tab-size: var(--op-codeviewer-tab-size);
+  }
+  .op-codeviewer__pre:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  /* the global op-* rule would give lines and tokens the base font: everything inside the code keeps the mono one */
+  .op-codeviewer__pre * {
+    font-family: inherit;
+    font-size: inherit;
+  }
+  /* lines stretch to the widest one, so a marked line is marked across the whole scroll width */
+  .op-codeviewer__code {
+    display: block;
+    min-inline-size: 100%;
+    inline-size: max-content;
+    font: inherit;
+  }
+  .op-codeviewer.is-wrapped .op-codeviewer__code {
+    inline-size: auto;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  .op-codeviewer__line {
+    position: relative;
+    display: block;
+    margin-inline: calc(var(--op-space-4) * -1);
+    padding-inline: var(--op-space-4);
+  }
+  .op-codeviewer__line.is-marked {
+    background: var(--op-codeviewer-mark-bg, var(--op-color-selected));
+    box-shadow: inset calc(var(--op-border-width) * 3) 0 0 var(--op-color-primary);
+  }
+  /* line numbers: a CSS counter in the gutter, never part of the text (selection and screen readers skip it) */
+  .op-codeviewer.has-numbers .op-codeviewer__line {
+    padding-inline-start: calc(var(--op-space-4) + var(--op-codeviewer-gutter, 2ch) + var(--op-codeviewer-gutter-gap));
+  }
+  .op-codeviewer.has-numbers .op-codeviewer__line::before {
+    counter-increment: op-codeline;
+    content: counter(op-codeline);
+    position: absolute;
+    inset-inline-start: var(--op-space-4);
+    inline-size: var(--op-codeviewer-gutter, 2ch);
+    color: var(--op-codeviewer-gutter-fg, var(--op-color-fg-muted));
+    text-align: end;
+    user-select: none;
+  }
+  /* syntax colors are pulled towards the text color, so they keep their contrast in every theme */
+  .op-codeviewer__tok--keyword {
+    color: var(--op-codeviewer-keyword, color-mix(in srgb, var(--op-color-primary) 80%, var(--op-color-fg)));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-codeviewer__tok--string {
+    color: var(--op-codeviewer-string, color-mix(in srgb, var(--op-color-success) 70%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--comment {
+    color: var(--op-codeviewer-comment, var(--op-color-fg-muted));
+    font-style: italic;
+  }
+  .op-codeviewer__tok--number {
+    color: var(--op-codeviewer-number, color-mix(in srgb, var(--op-color-warning) 65%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--property,
+  .op-codeviewer__tok--attr {
+    color: var(--op-codeviewer-property, color-mix(in srgb, var(--op-color-info) 70%, var(--op-color-fg)));
+  }
+  .op-codeviewer__tok--tag {
+    color: var(--op-codeviewer-tag, color-mix(in srgb, var(--op-color-danger) 70%, var(--op-color-fg)));
+  }
+}
+
+@layer optikos {
+  .op-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--op-icon-size);
+    block-size: var(--op-icon-size);
+    line-height: 1;
+  }
+  .op-icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    stroke-width: var(--op-icon-stroke);
+  }
+}
+
+@layer optikos {
+  .op-label {
+    color: var(--op-label-fg, var(--op-color-fg));
+  }
+  .op-label--muted {
+    color: var(--op-label-muted-fg, var(--op-color-fg-muted));
+  }
+  .op-label--title {
+    font-size: var(--op-label-title-size, var(--op-font-size-lg));
+    font-weight: var(--op-label-title-weight, var(--op-font-weight-bold));
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-chat-max-width: 75%;
+    --op-chat-input-max-height: 8rem;
+    --op-chat-dot-size: 0.4rem;
+    --op-chat-reply-bg: rgb(0 0 0 / 0.07);
+  }
+  .op-chat {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    min-block-size: 0;
+    color: var(--op-color-fg);
+    background: var(--op-chat-bg, var(--op-color-bg));
+  }
+  .op-chat__log {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--op-chat-gap, var(--op-space-1));
+    min-block-size: 0;
+    padding: var(--op-space-3) var(--op-space-4);
+    overflow: auto;
+  }
+  .op-chat__log:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-chat__empty {
+    margin: auto;
+    color: var(--op-color-fg-muted);
+  }
+  .op-chat__empty[hidden] {
+    display: none;
+  }
+  .op-chat__day {
+    display: flex;
+    justify-content: center;
+    margin-block: var(--op-space-3);
+  }
+  .op-chat__day > span {
+    padding: var(--op-space-1) var(--op-space-3);
+    color: var(--op-chat-day-fg, var(--op-color-fg-muted));
+    background: var(--op-chat-day-bg, var(--op-color-surface-2));
+    border-radius: var(--op-radius);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-chat__msg {
+    display: flex;
+    max-inline-size: 100%;
+  }
+  .op-chat__msg.is-me {
+    justify-content: flex-end;
+  }
+  .op-chat__msg.is-first {
+    margin-block-start: var(--op-space-2);
+  }
+  .op-chat__bubble {
+    box-sizing: border-box;
+    max-inline-size: var(--op-chat-max-width);
+    padding: var(--op-space-2) var(--op-space-3);
+    overflow-wrap: anywhere;
+    color: var(--op-chat-bubble-them-fg, var(--op-color-fg));
+    background: var(--op-chat-bubble-them-bg, var(--op-color-surface));
+    border-radius: var(--op-chat-bubble-radius, var(--op-radius-lg));
+    box-shadow: var(--op-chat-bubble-shadow, var(--op-shadow-sm));
+  }
+  .op-chat__msg.is-me .op-chat__bubble {
+    color: var(--op-chat-bubble-me-fg, var(--op-color-primary-fg));
+    background: var(--op-chat-bubble-me-bg, var(--op-color-primary));
+  }
+  /* inside a run the corners next to the neighbour are squared, like a stack of bubbles */
+  .op-chat__msg.is-them:not(.is-first) .op-chat__bubble {
+    border-start-start-radius: var(--op-radius-sm);
+  }
+  .op-chat__msg.is-them:not(.is-last) .op-chat__bubble {
+    border-end-start-radius: var(--op-radius-sm);
+  }
+  .op-chat__msg.is-me:not(.is-first) .op-chat__bubble {
+    border-start-end-radius: var(--op-radius-sm);
+  }
+  .op-chat__msg.is-me:not(.is-last) .op-chat__bubble {
+    border-end-end-radius: var(--op-radius-sm);
+  }
+  .op-chat__author {
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-chat__author[hidden] {
+    display: none;
+  }
+  .op-chat__reply {
+    margin-block-end: var(--op-space-1);
+    padding: var(--op-space-1) var(--op-space-2);
+    border-inline-start: var(--op-space-1) solid currentColor;
+    border-radius: var(--op-radius-sm);
+    background: var(--op-chat-reply-bg);
+    font-size: var(--op-font-size-sm);
+    opacity: 0.85;
+  }
+  .op-chat__reply strong {
+    display: block;
+  }
+  .op-chat__code {
+    padding: 0 var(--op-space-1);
+    font-family: var(--op-font-mono);
+    background: var(--op-chat-reply-bg);
+    border-radius: var(--op-radius-sm);
+  }
+  .op-chat__meta {
+    display: inline-flex;
+    float: inline-end;
+    align-items: center;
+    gap: var(--op-space-1);
+    margin-inline-start: var(--op-space-3);
+    margin-block-start: var(--op-space-2);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-chat__status {
+    display: inline-flex;
+  }
+  .op-chat__status .op-icon:nth-child(2) {
+    margin-inline-start: calc(var(--op-icon-size) * -0.6);
+  }
+  .op-chat__status.is-read {
+    color: var(--op-chat-read-fg, var(--op-color-info));
+    opacity: 1;
+  }
+  .op-chat__status.is-error {
+    color: var(--op-color-danger);
+  }
+  .op-chat__status.is-sending::before {
+    content: '…';
+  }
+  .op-chat__typing {
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+    gap: var(--op-space-2);
+    padding: var(--op-space-2) var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    background: var(--op-chat-bubble-them-bg, var(--op-color-surface));
+    border-radius: var(--op-chat-bubble-radius, var(--op-radius-lg));
+    font-size: var(--op-font-size-sm);
+  }
+  .op-chat__typing[hidden] {
+    display: none;
+  }
+  .op-chat__dots {
+    display: inline-flex;
+    gap: var(--op-space-1);
+  }
+  .op-chat__dots i {
+    inline-size: var(--op-chat-dot-size);
+    block-size: var(--op-chat-dot-size);
+    background: currentColor;
+    border-radius: var(--op-radius-pill);
+    animation: op-chat-dot calc(var(--op-duration) * 10) infinite ease-in-out both;
+  }
+  .op-chat__dots i:nth-child(2) {
+    animation-delay: calc(var(--op-duration) * 1.5);
+  }
+  .op-chat__dots i:nth-child(3) {
+    animation-delay: calc(var(--op-duration) * 3);
+  }
+  @keyframes op-chat-dot {
+    0%,
+    80%,
+    100% {
+      opacity: 0.25;
+    }
+    40% {
+      opacity: 1;
+    }
+  }
+  .op-chat__suggestions {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: var(--op-space-2);
+    padding: var(--op-space-2) var(--op-space-4) 0;
+  }
+  .op-chat__suggestions[hidden] {
+    display: none;
+  }
+  .op-chat__chip {
+    padding: var(--op-space-1) var(--op-space-3);
+    font: inherit;
+    color: var(--op-chat-chip-fg, var(--op-color-primary));
+    background: var(--op-chat-chip-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-chat-chip-border, var(--op-color-primary));
+    border-radius: var(--op-radius-pill);
+    cursor: pointer;
+  }
+  .op-chat__chip:hover:not(:disabled) {
+    background: var(--op-color-primary-soft);
+  }
+  .op-chat__chip:disabled {
+    color: var(--op-color-disabled-fg);
+    border-color: var(--op-color-border);
+    cursor: not-allowed;
+  }
+  .op-chat__composer {
+    display: flex;
+    flex: none;
+    align-items: flex-end;
+    gap: var(--op-space-2);
+    padding: var(--op-space-3) var(--op-space-4);
+    background: var(--op-chat-composer-bg, var(--op-color-surface));
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+  }
+  .op-chat__input {
+    flex: 1;
+    box-sizing: border-box;
+    min-block-size: var(--op-control-height);
+    max-block-size: var(--op-chat-input-max-height);
+    padding: var(--op-space-2) var(--op-control-padding-x);
+    font: inherit;
+    color: var(--op-color-fg);
+    background: var(--op-chat-input-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: var(--op-chat-input-radius, var(--op-radius));
+    resize: none;
+  }
+  .op-chat__input:focus {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-chat.is-readonly .op-chat__composer {
+    display: none;
+  }
+}
+
+@layer optikos {
+  /* the editor fills the cell: no label, no error line, the row height */
+  .op-grid__cell.is-editing {
+    position: relative;
+    padding-block: 0;
+    padding-inline: var(--op-grid-editor-inset, var(--op-space-1));
+    overflow: visible;
+  }
+  .op-grid__editor {
+    inline-size: 100%;
+  }
+  .op-grid__editor .op-textfield__input {
+    min-block-size: 0;
+    block-size: calc(var(--op-grid-row-height, var(--op-row-height)) - 2 * var(--op-space-1));
+  }
+  .op-grid__editor.is-invalid .op-textfield__input {
+    border-color: var(--op-color-danger);
+  }
+  .op-grid__editor .op-field__error {
+    position: absolute;
+    z-index: 1;
+    inset-block-start: 100%;
+    padding: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-danger-fg);
+    background: var(--op-color-danger);
+    border-radius: var(--op-radius-sm);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+  }
+  .op-grid__editor .op-field__error:empty {
+    display: none;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-dataview-item-width: 10rem;
+    --op-dataview-gap: var(--op-space-3);
+    --op-dataview-ring-width: 0.1875rem;
+  }
+  .op-dataview {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-3);
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .op-dataview__items {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(var(--op-dataview-item-width), 1fr));
+    /* every row is as tall as the tallest card, so rows line up whatever each card's text does */
+    grid-auto-rows: 1fr;
+    gap: var(--op-dataview-gap);
+    padding: var(--op-space-1);
+  }
+  .op-dataview__item {
+    position: relative;
+    min-inline-size: 0;
+    border-radius: var(--op-dataview-item-radius, var(--op-radius));
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    user-select: none;
+  }
+  /* the card fills its cell: a short card stretches to the row instead of leaving a gap under it */
+  .op-dataview__item > * {
+    flex: 1;
+    min-block-size: 0;
+  }
+  .op-dataview__item:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-dataview__item.is-selected {
+    box-shadow: 0 0 0 var(--op-dataview-ring-width) var(--op-dataview-selected-ring, var(--op-color-primary));
+  }
+  .op-dataview__empty {
+    padding: var(--op-space-6);
+    color: var(--op-color-fg-muted);
+    text-align: center;
+  }
+  .op-dataview__empty[hidden] {
+    display: none;
+  }
+  .op-dataview__pager {
+    flex: none;
+    padding: var(--op-space-2);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-filterbuilder-gap: var(--op-space-2);
+    --op-filterbuilder-group-padding: var(--op-space-3);
+    --op-filterbuilder-value-width: 8rem;
+    --op-filterbuilder-value-max-width: 18rem;
+    --op-filterbuilder-chips-max-height: 6rem;
+    --op-filterbuilder-nested-bg: var(--op-color-surface-2);
+  }
+  .op-filterbuilder {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-filterbuilder-gap);
+    min-inline-size: 0;
+  }
+  .op-filterbuilder__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-filterbuilder-gap);
+  }
+  .op-filterbuilder__group.is-nested {
+    padding: var(--op-filterbuilder-group-padding);
+    background: var(--op-filterbuilder-nested-bg);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius);
+  }
+  .op-filterbuilder__head,
+  .op-filterbuilder__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-filterbuilder-gap);
+  }
+  .op-filterbuilder__value {
+    flex: 1 1 var(--op-filterbuilder-value-width);
+    min-inline-size: 0;
+    max-inline-size: var(--op-filterbuilder-value-max-width);
+  }
+  /* a validation message hangs below the field instead of making the row taller (and the controls beside it jump) */
+  .op-filterbuilder__value {
+    position: relative;
+  }
+  .op-filterbuilder__value > .op-field__error {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+    z-index: 1;
+    margin: 0;
+    white-space: nowrap;
+    font-size: var(--op-font-size-sm);
+  }
+  .op-filterbuilder__row:has(.op-field__error:not(:empty)) {
+    margin-block-end: var(--op-space-4);
+  }
+  .op-filterbuilder__to {
+    color: var(--op-color-fg-muted);
+  }
+  .op-filterbuilder__none {
+    color: var(--op-color-fg-muted);
+  }
+  .op-filterbuilder__select {
+    min-block-size: var(--op-control-height);
+    padding-inline: var(--op-control-padding-x);
+    font: inherit;
+    color: var(--op-color-fg);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius);
+  }
+  .op-filterbuilder__select:focus-visible,
+  .op-filterbuilder__remove:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-filterbuilder__remove {
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-filterbuilder__remove:hover {
+    color: var(--op-color-danger);
+    background: var(--op-color-hover);
+  }
+  .op-filterbuilder__foot {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .op-filterbuilder__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--op-space-1);
+    max-block-size: var(--op-filterbuilder-chips-max-height);
+    overflow: auto;
+  }
+  .op-filterbuilder__chip {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--op-space-1) var(--op-space-3);
+    color: var(--op-color-fg);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius-pill);
+    cursor: pointer;
+  }
+  .op-filterbuilder__chip:hover {
+    background: var(--op-color-hover);
+  }
+  .op-filterbuilder__chip:has(:checked) {
+    color: var(--op-filterbuilder-chip-on-fg, var(--op-color-primary));
+    background: var(--op-color-primary-soft);
+    border-color: var(--op-color-primary);
+  }
+  .op-filterbuilder__chip:has(:focus-visible) {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-filterbuilder__chipbox {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-grid-colmenu-width: 14rem;
+    --op-grid-colmenu-height: 20rem;
+    --op-grid-drop-width: 0.1875rem;
+    --op-grid-resizer-width: 0.5rem;
+    --op-grid-group-tracking: 0.05em;
+    --op-grid-action-size: 2rem;
+    --op-grid-action-gap: var(--op-space-1);
+    --op-grid-action-idle-opacity: 0.45;
+    --op-grid-action-disabled-opacity: 0.3;
+    --op-grid-selected-bar-width: 0.125rem;
+  }
+  .op-grid {
+    --_border: var(--op-grid-border, var(--op-color-border));
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    min-inline-size: 0;
+    min-block-size: 0;
+    color: var(--op-grid-fg, var(--op-color-fg));
+    background: var(--op-grid-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--_border);
+    border-radius: var(--op-grid-radius, var(--op-radius));
+    overflow: hidden;
+  }
+  /* header + rows: the focusable role=grid part, between the bulk bar and the pager */
+  .op-grid__table {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    position: relative;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+  .op-grid__table:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-grid__header {
+    position: relative;
+    flex: none;
+    overflow: hidden;
+    color: var(--op-grid-header-fg, var(--op-color-fg));
+    background: var(--op-grid-header-bg, var(--op-color-surface-2));
+    border-block-end: var(--op-border-width) solid var(--op-grid-header-border, var(--op-color-border-strong));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-grid__row {
+    display: grid;
+    grid-template-columns: var(--op-grid-cols);
+    box-sizing: border-box;
+    min-inline-size: var(--op-grid-min-width);
+  }
+  .op-grid__header-row {
+    min-block-size: var(--op-grid-row-height, var(--op-row-height));
+  }
+  .op-grid__viewport {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .op-grid__body-row {
+    border-block-end: var(--op-border-width) solid var(--_border);
+    cursor: default;
+  }
+  .op-grid__body-row:hover {
+    background: var(--op-grid-row-hover-bg, var(--op-color-hover));
+  }
+  .op-grid--striped .op-grid__body-row.is-odd {
+    background: var(--op-grid-row-stripe-bg, var(--op-color-surface-2));
+  }
+  .op-grid__body-row.is-selected {
+    background: var(--op-grid-row-selected-bg, var(--op-color-selected));
+    box-shadow: inset var(--op-grid-selected-bar-width) 0 0 var(--op-grid-selected-bar, var(--op-color-primary));
+  }
+  .op-grid__body-row.is-active {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-grid__cell {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    padding-inline: var(--op-grid-cell-padding-x, var(--op-control-padding-x));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-grid__cell--right {
+    justify-content: flex-end;
+    text-align: end;
+  }
+  .op-grid__cell--center {
+    justify-content: center;
+  }
+  .op-grid__sort {
+    text-transform: inherit;
+    letter-spacing: inherit;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+  .op-grid__arrow {
+    display: inline-flex;
+    opacity: 0;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-grid__hcell.is-sortable:hover .op-grid__arrow {
+    opacity: 0.4;
+  }
+  .op-grid__hcell.is-sorted-asc .op-grid__arrow,
+  .op-grid__hcell.is-sorted-desc .op-grid__arrow {
+    opacity: 1;
+  }
+  .op-grid__hcell.is-sorted-desc .op-grid__arrow {
+    transform: rotate(180deg);
+  }
+  .op-grid__empty {
+    padding: var(--op-space-5);
+    text-align: center;
+    color: var(--op-color-fg-muted);
+  }
+  .op-grid__pager {
+    flex: none;
+    padding: var(--op-space-2);
+    border-block-start: var(--op-border-width) solid var(--_border);
+  }
+  .op-grid .op-virtual {
+    min-inline-size: var(--op-grid-min-width);
+  }
+  .op-grid__check {
+    margin: 0;
+    accent-color: var(--op-grid-check-accent, var(--op-color-primary));
+    cursor: pointer;
+  }
+  /* the checkbox and action columns are narrow: the frame gives them their own padding instead of the text-cell one */
+  .op-grid__selcell,
+  .op-grid__actcell {
+    padding-inline: var(--op-grid-action-gap);
+  }
+  .op-grid__actcell {
+    justify-content: flex-end;
+    gap: var(--op-grid-action-gap);
+  }
+  .op-grid__actbtn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-inline-size: var(--op-grid-action-size);
+    block-size: var(--op-grid-action-size);
+    padding: var(--op-space-1);
+    font: inherit;
+    font-size: var(--op-font-size-sm);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-grid__actbtn:hover {
+    color: var(--op-color-fg);
+    background: var(--op-color-hover);
+  }
+  .op-grid__bar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-grid-row-height, var(--op-row-height));
+    padding-inline: var(--op-space-2);
+    background: var(--op-grid-bar-bg, var(--op-color-surface));
+    border-block-end: var(--op-border-width) solid var(--_border);
+  }
+  .op-grid__bulk {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-2);
+  }
+  .op-grid__bulk[hidden] {
+    display: none;
+  }
+  .op-grid__count {
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-grid__bar > .op-button {
+    margin-inline-start: auto;
+  }
+  .op-grid__colmenu {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-2);
+    min-inline-size: var(--op-grid-colmenu-width);
+    max-block-size: var(--op-grid-colmenu-height);
+    padding: var(--op-space-2);
+  }
+  .op-grid__collist {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+  .op-grid__colitem {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    padding: var(--op-space-1) var(--op-space-2);
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-grid__colitem:hover {
+    background: var(--op-color-hover);
+  }
+  .op-grid__colitem[hidden],
+  .op-grid__colempty[hidden] {
+    display: none;
+  }
+  .op-grid__colempty {
+    padding: var(--op-space-2);
+    color: var(--op-color-fg-muted);
+    text-align: center;
+  }
+  /* visible mode: always there, dimmed until the row is hovered, active or selected */
+  .op-grid--actions-visible .op-grid__actbtn {
+    opacity: var(--op-grid-action-idle-opacity);
+  }
+  .op-grid--actions-visible .op-grid__body-row:hover .op-grid__actbtn,
+  .op-grid--actions-visible .op-grid__body-row.is-active .op-grid__actbtn,
+  .op-grid--actions-visible .op-grid__body-row.is-selected .op-grid__actbtn,
+  .op-grid--actions-visible .op-grid__actbtn:focus-visible {
+    opacity: 1;
+  }
+  .op-grid__actbtn.is-danger:hover {
+    color: var(--op-color-danger);
+  }
+  .op-grid__actbtn:disabled {
+    opacity: var(--op-grid-action-disabled-opacity);
+    cursor: not-allowed;
+  }
+  /* column drag: grab cursor, a ghost label under the pointer and a bar where the column will land */
+  .op-grid--reorderable .op-grid__hcell.is-reorderable {
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+  }
+  .op-grid__hcell {
+    position: relative;
+  }
+  /* resize handle: a thin strip on the header's end edge; a hairline shows on hover and while dragging */
+  .op-grid__resizer {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--op-grid-resizer-width);
+    cursor: col-resize;
+    touch-action: none;
+    z-index: 1;
+  }
+  .op-grid__resizer::after {
+    content: '';
+    position: absolute;
+    inset-block: 25%;
+    inset-inline-end: 0;
+    inline-size: var(--op-border-width);
+    background: var(--op-color-border-strong);
+  }
+  .op-grid__resizer:hover::after,
+  .op-grid.is-resizing .op-grid__resizer:hover::after {
+    inset-block: 0;
+    inline-size: var(--op-grid-drop-width);
+    background: var(--op-color-primary);
+  }
+  .op-grid.is-resizing {
+    cursor: col-resize;
+    user-select: none;
+  }
+  .op-grid__hcell.is-dragging-col {
+    opacity: 0.4;
+  }
+  .op-grid__ghost {
+    position: fixed;
+    z-index: var(--op-z-layer);
+    padding: var(--op-space-1) var(--op-space-3);
+    color: var(--op-color-fg);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-primary);
+    border-radius: var(--op-radius);
+    box-shadow: var(--op-shadow);
+    pointer-events: none;
+    transform: translate(var(--op-space-2), var(--op-space-2));
+    font-weight: var(--op-font-weight-bold);
+    white-space: nowrap;
+  }
+  .op-grid__drop {
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--op-grid-drop-width);
+    margin-inline-start: calc(var(--op-grid-drop-width) / -2);
+    background: var(--op-color-primary);
+    pointer-events: none;
+  }
+  /* group band over the header */
+  .op-grid__group-row {
+    min-block-size: 0;
+  }
+  .op-grid__gcell {
+    padding: var(--op-space-1) var(--op-grid-cell-padding-x, var(--op-control-padding-x));
+    overflow: hidden;
+    color: var(--op-grid-group-fg, var(--op-color-fg-muted));
+    background: var(--op-grid-group-bg, var(--op-color-surface-2));
+    border-block-end: var(--op-border-width) solid var(--_border);
+    border-inline-end: var(--op-border-width) solid var(--_border);
+    font-size: var(--op-font-size-sm);
+    letter-spacing: var(--op-grid-group-tracking);
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  .op-grid__gcell.is-empty {
+    background: transparent;
+    border-inline-end-color: transparent;
+  }
+  /* column menu: group chips and sections */
+  .op-grid__colchips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--op-space-1);
+  }
+  .op-grid__colchips[hidden],
+  .op-grid__colgroup[hidden] {
+    display: none;
+  }
+  .op-grid__colchip {
+    padding: 0 var(--op-space-3);
+    font: inherit;
+    font-size: var(--op-font-size-sm);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius-pill);
+    cursor: pointer;
+  }
+  .op-grid__colchip.is-on {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+    border-color: var(--op-color-primary);
+  }
+  .op-grid__colgroup {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--op-space-2);
+    padding: var(--op-space-1) var(--op-space-2);
+    margin-block-start: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    text-transform: uppercase;
+  }
+  .op-grid__colgroup label {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    cursor: pointer;
+  }
+  .op-grid__colgroup ~ .op-grid__colitem {
+    padding-inline-start: var(--op-space-4);
+  }
+}
+
+@layer optikos {
+  .op-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-pagination-gap, var(--op-space-1));
+    color: var(--op-color-fg);
+  }
+  .op-pagination__btn.is-current {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+  }
+  .op-pagination__gap {
+    padding-inline: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+  }
+  .op-pagination__info {
+    margin-inline-start: auto;
+    padding-inline-start: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-searchgrid-gap: var(--op-space-3);
+    --op-searchgrid-filters-padding: 0;
+    --op-searchgrid-field-width: 12rem;
+    --op-searchgrid-grid-min-height: 12rem;
+  }
+  .op-searchgrid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-searchgrid-gap);
+    block-size: 100%;
+    min-block-size: 0;
+  }
+  .op-searchgrid__filters {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: var(--op-searchgrid-gap);
+    padding: var(--op-searchgrid-filters-padding);
+    background: var(--op-searchgrid-filters-bg, transparent);
+  }
+  .op-searchgrid__filters > .op-field {
+    flex: 1 1 var(--op-searchgrid-field-width);
+    min-inline-size: 0;
+  }
+  .op-searchgrid__buttons {
+    display: flex;
+    gap: var(--op-space-2);
+    margin-inline-start: auto;
+  }
+  .op-searchgrid > .op-grid {
+    flex: 1;
+    min-block-size: var(--op-searchgrid-grid-min-height);
+  }
+}
+
+@layer optikos {
+  .op-table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    color: var(--op-color-fg);
+    font-size: var(--op-font-size);
+  }
+  .op-table caption {
+    padding: var(--op-space-2);
+    text-align: start;
+    color: var(--op-color-fg-muted);
+  }
+  .op-table th,
+  .op-table td {
+    padding: var(--op-table-cell-padding-y, var(--op-space-2)) var(--op-table-cell-padding-x, var(--op-space-3));
+    text-align: start;
+    border-block-end: var(--op-border-width) solid var(--op-table-border, var(--op-color-border));
+  }
+  .op-table th {
+    background: var(--op-table-header-bg, var(--op-color-surface-2));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-table--striped tbody tr:nth-child(even) {
+    background: var(--op-table-stripe-bg, var(--op-color-surface-2));
+  }
+  .op-table .op-table__cell--right {
+    text-align: end;
+  }
+  .op-table .op-table__cell--center {
+    text-align: center;
+  }
+  .op-table__empty td {
+    text-align: center;
+    color: var(--op-color-fg-muted);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-tree-indent: 1.25rem;
+    --op-tree-check-size: 1rem;
+    --op-tree-check-icon-size: 0.8em;
+  }
+  .op-tree {
+    display: block;
+    min-inline-size: 0;
+    overflow: auto;
+    color: var(--op-tree-fg, var(--op-color-fg));
+    background: var(--op-tree-bg, transparent);
+  }
+  .op-tree__root,
+  .op-tree__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-tree__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    box-sizing: border-box;
+    min-block-size: var(--op-tree-item-height, var(--op-row-height));
+    padding-inline: var(--op-space-1) var(--op-space-3);
+    padding-inline-start: calc(var(--op-space-1) + var(--_level, 0) * var(--op-tree-indent));
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+    user-select: none;
+  }
+  .op-tree__item:hover:not(.is-disabled) {
+    background: var(--op-tree-hover-bg, var(--op-color-hover));
+  }
+  .op-tree__item:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-tree__item.is-selected {
+    color: var(--op-tree-selected-fg, var(--op-color-fg));
+    background: var(--op-tree-selected-bg, var(--op-color-selected));
+  }
+  .op-tree__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: default;
+  }
+  .op-tree__toggle {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--op-tree-indent);
+    color: var(--op-color-fg-muted);
+  }
+  .op-tree__toggle .op-icon {
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-tree__item.is-expanded > .op-tree__toggle .op-icon {
+    transform: rotate(90deg);
+  }
+  .op-tree__spinner {
+    --op-spinner-size: var(--op-tree-check-size);
+  }
+  .op-tree__check {
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--op-tree-check-size);
+    block-size: var(--op-tree-check-size);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: var(--op-radius-sm);
+    background: var(--op-color-surface);
+    --op-icon-size: var(--op-tree-check-icon-size);
+  }
+  .op-tree__check.is-checked,
+  .op-tree__check.is-mixed {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+    border-color: var(--op-color-primary);
+  }
+  .op-tree__icon {
+    display: inline-flex;
+    color: var(--op-tree-icon-fg, var(--op-color-fg-muted));
+  }
+  .op-tree__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-tree__empty {
+    padding: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-calendar-day-size: 2.25rem;
+  }
+  .op-calendar {
+    box-sizing: border-box;
+    padding: var(--op-calendar-padding, var(--op-space-2));
+    color: var(--op-color-fg);
+    background: var(--op-calendar-bg, var(--op-color-surface));
+  }
+  .op-calendar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--op-space-1);
+    margin-block-end: var(--op-space-2);
+  }
+  .op-calendar__nav,
+  .op-calendar__title,
+  .op-calendar__month {
+    font: inherit;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-calendar__nav {
+    display: inline-flex;
+    padding: var(--op-space-2);
+  }
+  .op-calendar__title {
+    flex: 1;
+    padding: var(--op-space-2);
+    font-weight: var(--op-font-weight-bold);
+    text-transform: capitalize;
+  }
+  .op-calendar__nav:hover,
+  .op-calendar__title:hover,
+  .op-calendar__month:hover {
+    background: var(--op-color-hover);
+  }
+  .op-calendar__grid {
+    border-collapse: collapse;
+  }
+  .op-calendar__dow {
+    padding-block-end: var(--op-space-1);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-medium);
+    color: var(--op-color-fg-muted);
+    text-transform: capitalize;
+  }
+  .op-calendar__day {
+    box-sizing: border-box;
+    inline-size: var(--op-calendar-day-size);
+    block-size: var(--op-calendar-day-size);
+    padding: 0;
+    text-align: center;
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-calendar__day:hover {
+    background: var(--op-calendar-day-hover-bg, var(--op-color-hover));
+  }
+  .op-calendar__day.is-outside {
+    color: var(--op-calendar-outside-fg, var(--op-color-fg-muted));
+  }
+  .op-calendar__day.is-today {
+    box-shadow: inset 0 0 0 var(--op-border-width) var(--op-calendar-today-border, var(--op-color-primary));
+  }
+  .op-calendar__day.is-selected,
+  .op-calendar__month.is-selected {
+    color: var(--op-calendar-day-selected-fg, var(--op-color-primary-fg));
+    background: var(--op-calendar-day-selected-bg, var(--op-color-primary));
+  }
+  .op-calendar__day.is-in-range {
+    color: var(--op-calendar-range-fg, var(--op-color-fg));
+    background: var(--op-calendar-range-bg, var(--op-color-selected));
+    border-radius: 0;
+  }
+  .op-calendar__day.is-range-start {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .op-calendar__day.is-range-end {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .op-calendar__day.is-disabled {
+    color: var(--op-color-disabled-fg);
+    background: transparent;
+    cursor: not-allowed;
+    text-decoration: line-through;
+  }
+  .op-calendar__day:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-calendar__months {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--op-space-1);
+  }
+  .op-calendar__month {
+    padding: var(--op-space-3) var(--op-space-2);
+    text-transform: capitalize;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-checkbox-size: 1.125rem;
+  }
+  .op-checkbox__label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-control-height);
+    cursor: pointer;
+  }
+  .op-checkbox__input {
+    position: absolute;
+    opacity: 0;
+    inline-size: 0;
+    block-size: 0;
+  }
+  .op-checkbox__box {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--op-checkbox-size);
+    block-size: var(--op-checkbox-size);
+    color: var(--op-checkbox-checked-fg, var(--op-color-primary-fg));
+    background: var(--op-checkbox-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-checkbox-border, var(--op-color-border-strong));
+    border-radius: var(--op-checkbox-radius, var(--op-radius-sm));
+    transition: background var(--op-duration) var(--op-easing);
+  }
+  .op-checkbox__box .op-icon {
+    font-size: var(--op-checkbox-size);
+    visibility: hidden;
+  }
+  .op-checkbox__dash {
+    position: absolute;
+    inset-inline: 25%;
+    block-size: var(--op-icon-stroke);
+    background: currentColor;
+    visibility: hidden;
+  }
+  .op-checkbox.is-checked .op-checkbox__box,
+  .op-checkbox.is-indeterminate .op-checkbox__box {
+    background: var(--op-checkbox-checked-bg, var(--op-color-primary));
+    border-color: var(--op-checkbox-checked-bg, var(--op-color-primary));
+  }
+  .op-checkbox.is-checked .op-checkbox__box .op-icon,
+  .op-checkbox.is-indeterminate .op-checkbox__dash {
+    visibility: visible;
+  }
+  .op-checkbox__input:focus-visible + .op-checkbox__box {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-checkbox.is-invalid .op-checkbox__box {
+    border-color: var(--op-field-invalid-border, var(--op-color-danger));
+  }
+  .op-checkbox.is-disabled .op-checkbox__label {
+    cursor: not-allowed;
+    color: var(--op-color-disabled-fg);
+  }
+}
+
+@layer optikos {
+  .op-checkboxgroup__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-checkboxgroup-gap, var(--op-space-1));
+  }
+  .op-checkboxgroup__options--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--op-checkboxgroup-gap, var(--op-space-4));
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-dial-spacing: 0.75rem;
+    --op-dial-item-spacing: 3.5rem;
+    --op-dial-height: 3.75rem;
+    --op-dial-size: 13rem;
+    --op-dial-readout-size: 2.75rem;
+    --op-dial-readout-size-circle: 2rem;
+    --op-dial-roll-duration: 380ms;
+    --op-dial-tick-height: 0.75rem;
+    --op-dial-major-height: 1.375rem;
+    --op-dial-needle-width: 0.1875rem;
+    --op-dial-label-gap: 0.25rem;
+    --op-dial-ring-inset: 0.5rem;
+    --op-dial-hub: 0.625rem;
+    --op-dial-digit-height: 1em; /* one line of the readout: a reel moves by this per digit */
+  }
+  .op-dial {
+    --_sp: var(--op-dial-spacing);
+  }
+  .op-dial--list {
+    --_sp: var(--op-dial-item-spacing);
+  }
+  .op-dial__box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--op-space-2);
+  }
+
+  /* the readout: digits roll like an odometer (each reel is the column 0–9, moved by --d) */
+  .op-dial__readout {
+    display: flex;
+    justify-content: center;
+    min-block-size: var(--op-dial-digit-height);
+    color: var(--op-dial-readout-fg, var(--op-color-fg));
+    font-size: var(--op-dial-readout-size);
+    font-weight: var(--op-font-weight-bold);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    white-space: pre;
+  }
+  .op-dial__digit,
+  .op-dial__reel {
+    font-size: inherit; /* the global op-* rule would reset them to the base size */
+  }
+  .op-dial__digit {
+    display: inline-block;
+    block-size: var(--op-dial-digit-height);
+    overflow: hidden;
+  }
+  .op-dial__reel {
+    display: flex;
+    flex-direction: column;
+    transform: translateY(calc(var(--d, 0) * -10%));
+    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
+  }
+  .op-dial__reel > span {
+    display: block;
+    block-size: var(--op-dial-digit-height);
+  }
+
+  /* the face: a flat ruler sliding under a fixed needle */
+  .op-dial__face {
+    position: relative;
+    inline-size: 100%;
+    block-size: var(--op-dial-height);
+    border-radius: var(--op-radius);
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+  }
+  .op-dial__face:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-dial.is-dragging .op-dial__face {
+    cursor: grabbing;
+  }
+  .op-dial__window {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
+  }
+  .op-dial__tape {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 50%;
+    /* --pos (set by the component) is the item under the needle, fractional while dragging */
+    transform: translateX(calc(var(--pos, 0) * -1 * var(--_sp)));
+    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
+  }
+  .op-dial.is-dragging .op-dial__tape {
+    transition: none;
+  }
+  .op-dial.is-gliding .op-dial__tape {
+    transition-timing-function: var(--op-motion-ease-out);
+  }
+  .op-dial__tick {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: calc(var(--i) * var(--_sp));
+    inline-size: var(--op-border-width);
+    block-size: var(--op-dial-tick-height);
+    background: var(--op-dial-tick-fg, var(--op-color-border-strong));
+    transform: translateX(-50%);
+  }
+  .op-dial__tick.is-major {
+    inline-size: calc(var(--op-border-width) * 2);
+    block-size: var(--op-dial-major-height);
+    background: var(--op-dial-major-fg, var(--op-color-fg-muted));
+  }
+  .op-dial__tick-label {
+    position: absolute;
+    inset-block-start: calc(100% + var(--op-dial-label-gap));
+    inset-inline-start: 50%;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+    transform: translateX(-50%);
+    transition: color var(--op-duration) var(--op-easing);
+  }
+  .op-dial__tick.is-current .op-dial__tick-label {
+    color: var(--op-color-primary-text, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-dial__needle {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    inline-size: var(--op-dial-needle-width);
+    block-size: calc(var(--op-dial-major-height) + var(--op-space-1));
+    background: var(--op-dial-needle, var(--op-color-primary));
+    border-radius: var(--op-radius-pill);
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  /* circle: a clock face, the ticks around the ring and a hand from the center */
+  .op-dial--circle .op-dial__face {
+    inline-size: var(--op-dial-size);
+    block-size: var(--op-dial-size);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: 50%;
+  }
+  .op-dial--circle .op-dial__window {
+    overflow: visible;
+    mask-image: none;
+  }
+  .op-dial--circle .op-dial__tape {
+    inset: 0;
+    transform: none;
+    transition: none;
+  }
+  .op-dial--circle .op-dial__tick {
+    inset-block-start: var(--op-dial-ring-inset);
+    inset-inline-start: 50%;
+    transform-origin: 50% calc(var(--op-dial-size) / 2 - var(--op-dial-ring-inset) - var(--op-border-width));
+    transform: translateX(-50%) rotate(var(--a));
+  }
+  .op-dial--circle .op-dial__tick-label {
+    transform: translateX(-50%) rotate(calc(var(--a) * -1));
+  }
+  .op-dial--circle .op-dial__needle {
+    inset-block-start: auto;
+    inset-block-end: 50%;
+    block-size: calc(var(--op-dial-size) / 2 - var(--op-dial-ring-inset) - var(--op-dial-major-height) - var(--op-space-5) - var(--op-space-2));
+    transform-origin: 50% 100%;
+    transition: transform var(--op-dial-roll-duration) var(--op-motion-ease-out);
+  }
+  .op-dial--circle.is-dragging .op-dial__needle {
+    transition: none;
+  }
+  /* the hub the hand turns on */
+  .op-dial--circle .op-dial__needle::after {
+    content: '';
+    position: absolute;
+    inset-block-end: calc(var(--op-dial-hub) / -2);
+    inset-inline-start: 50%;
+    inline-size: var(--op-dial-hub);
+    block-size: var(--op-dial-hub);
+    background: inherit;
+    border-radius: 50%;
+    transform: translateX(-50%);
+  }
+  .op-dial--circle .op-dial__readout {
+    font-size: var(--op-dial-readout-size-circle);
+  }
+
+  .op-dial.is-disabled .op-dial__face {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .op-dial.is-readonly .op-dial__face {
+    cursor: default;
+  }
+  .op-motion-off .op-dial__reel,
+  .op-motion-off .op-dial__tape,
+  .op-motion-off .op-dial__needle {
+    transition: none;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-listbox-max-height: 15rem;
+  }
+  .op-listbox {
+    position: relative;
+    box-sizing: border-box;
+    max-block-size: var(--op-listbox-max-height);
+    overflow: auto;
+    background: var(--op-listbox-bg, var(--op-color-surface));
+    color: var(--op-color-fg);
+  }
+  .op-listbox__item {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: var(--op-listbox-item-padding-y, 0) var(--op-listbox-item-padding-x, var(--op-control-padding-x));
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .op-listbox__item.is-active {
+    background: var(--op-listbox-item-active-bg, var(--op-color-hover));
+  }
+  .op-listbox__item.is-selected {
+    color: var(--op-listbox-item-selected-fg, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-listbox__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-listbox__mark {
+    color: inherit;
+    background: var(--op-color-primary-soft);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-listbox__hint {
+    margin-inline-start: auto;
+    padding-inline-start: var(--op-space-3);
+    color: var(--op-listbox-hint-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: normal;
+  }
+  .op-listbox__empty {
+    padding: var(--op-space-3);
+    color: var(--op-listbox-empty-fg, var(--op-color-fg-muted));
+  }
+}
+
+@layer optikos {
+  .op-picker__trigger {
+    position: absolute;
+    inset-inline-end: var(--op-space-1);
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-picker-arrow-fg, var(--op-color-fg-muted));
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-picker.is-open .op-picker__trigger {
+    transform: rotate(180deg);
+  }
+  .op-picker:has(.op-picker__trigger) .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  .op-picker.is-readonly .op-textfield__input,
+  .op-select .op-textfield__input {
+    cursor: pointer;
+    text-overflow: ellipsis;
+  }
+  /* stableSize: room for the spinner is always there, so the text does not shift when a search starts */
+  .op-suggest.op-stable .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  .op-picker.is-searching .op-picker__spinner {
+    display: inline-block;
+  }
+  .op-picker__spinner {
+    --op-spinner-size: var(--op-icon-size);
+    position: absolute;
+    inset-inline-end: var(--op-space-2);
+    display: none;
+  }
+  .op-picker__trigger:disabled {
+    cursor: not-allowed;
+  }
+  .op-suggest__icon {
+    position: absolute;
+    inset-inline-start: var(--op-space-2);
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    color: var(--op-picker-arrow-fg, var(--op-color-fg-muted));
+    pointer-events: none;
+  }
+  .op-textfield__wrap.has-icon .op-textfield__input {
+    padding-inline-start: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  /* the lookup's magnifier button sits where the arrow would; the spinner moves left of it */
+  .op-lookup .op-picker__spinner {
+    inset-inline-end: calc(var(--op-icon-size) + var(--op-space-4));
+  }
+  .op-lookup.op-stable .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) * 2 + var(--op-space-5));
+  }
+  /* showValue: the record's id as a badge at the start of the field */
+  .op-picker__id {
+    position: absolute;
+    inset-inline-start: var(--op-space-2);
+    inset-block: 50% auto;
+    transform: translateY(-50%);
+    padding: 0 var(--op-space-2);
+    color: var(--op-picker-id-fg, var(--op-color-fg-muted));
+    background: var(--op-picker-id-bg, var(--op-color-surface-2));
+    border-radius: var(--op-radius-pill);
+    font-size: var(--op-font-size-sm);
+    pointer-events: none;
+  }
+  .op-picker__id[hidden] {
+    display: none;
+  }
+  .op-textfield__wrap.has-id .op-textfield__input {
+    padding-inline-start: calc(var(--op-picker-id-width) + var(--op-space-4));
+  }
+  .op-textfield__wrap.has-id.has-icon .op-picker__id {
+    inset-inline-start: calc(var(--op-icon-size) + var(--op-space-3));
+  }
+  .op-textfield__wrap.has-id.has-icon .op-textfield__input {
+    padding-inline-start: calc(var(--op-icon-size) + var(--op-picker-id-width) + var(--op-space-5));
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-radio-size: 1.125rem;
+  }
+  .op-radiogroup__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-radiogroup-gap, var(--op-space-1));
+  }
+  .op-radiogroup__options--horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--op-radiogroup-gap, var(--op-space-4));
+  }
+  .op-radio {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-control-height);
+    cursor: pointer;
+  }
+  .op-radio__input {
+    position: absolute;
+    opacity: 0;
+    inline-size: 0;
+    block-size: 0;
+  }
+  .op-radio__dot {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--op-radio-size);
+    block-size: var(--op-radio-size);
+    background: var(--op-radio-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-radio-border, var(--op-color-border-strong));
+    border-radius: 50%;
+  }
+  .op-radio.is-checked .op-radio__dot {
+    background: var(--op-radio-checked-bg, var(--op-color-primary));
+    border-color: var(--op-radio-checked-bg, var(--op-color-primary));
+    box-shadow: inset 0 0 0 var(--op-space-1) var(--op-radio-bg, var(--op-color-surface));
+  }
+  .op-radio__input:focus-visible + .op-radio__dot {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-radio:has(:disabled) {
+    cursor: not-allowed;
+    color: var(--op-color-disabled-fg);
+  }
+  .op-radiogroup.is-invalid .op-radio__dot {
+    border-color: var(--op-field-invalid-border, var(--op-color-danger));
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-secret-mask-tracking: 0.1em;
+  }
+  .op-secret__box {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-space-1);
+  }
+  .op-secret .op-textfield__input {
+    padding-inline-end: calc(var(--op-icon-size) + var(--op-space-5));
+  }
+  .op-secret__eye,
+  .op-secret__replace,
+  .op-secret__keep {
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-secret__eye {
+    position: absolute;
+    inset-inline-end: var(--op-space-1);
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+  }
+  .op-secret__eye:hover,
+  .op-secret__eye[aria-pressed='true'] {
+    color: var(--op-color-primary);
+  }
+  .op-secret__replace,
+  .op-secret__keep {
+    color: var(--op-color-primary);
+    background: transparent;
+    border: 0;
+    text-decoration: underline;
+  }
+  .op-secret__replace {
+    position: absolute;
+    inset-inline-end: var(--op-space-3);
+  }
+  .op-secret__eye:focus-visible,
+  .op-secret__replace:focus-visible,
+  .op-secret__keep:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  /* saved: a mask where the value would be, and a field that looks closed (it opens through the warning) */
+  .op-secret.is-stored .op-textfield__input {
+    cursor: pointer;
+    background: var(--op-color-surface-2);
+  }
+  .op-secret.is-stored .op-textfield__input::placeholder {
+    color: var(--op-secret-mask-fg, var(--op-color-fg));
+    letter-spacing: var(--op-secret-mask-tracking);
+  }
+  .op-secret__hint {
+    display: flex;
+    align-items: baseline;
+    gap: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-secret__hint[hidden],
+  .op-secret__note[hidden],
+  .op-secret__keep[hidden],
+  .op-secret__eye[hidden],
+  .op-secret__replace[hidden] {
+    display: none;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-slider-track-height: 0.375rem;
+    --op-slider-knob-size: 1.25rem;
+    --op-slider-bubble-offset: 0.5rem;
+  }
+  .op-slider__box {
+    padding-block: calc(var(--op-slider-knob-size) / 2 + var(--op-space-2)) var(--op-space-1);
+    padding-inline: calc(var(--op-slider-knob-size) / 2);
+  }
+  .op-slider.has-bubble-always .op-slider__box {
+    padding-block-start: calc(var(--op-slider-knob-size) + var(--op-space-4));
+  }
+  .op-slider__track {
+    position: relative;
+    block-size: var(--op-slider-track-height);
+    background: var(--op-slider-track-bg, var(--op-color-border-strong));
+    border-radius: var(--op-radius-pill);
+    cursor: pointer;
+    touch-action: none;
+  }
+  .op-slider__fill {
+    position: absolute;
+    inset-block: 0;
+    background: var(--op-slider-fill-bg, var(--op-color-primary));
+    border-radius: inherit;
+  }
+  .op-slider__knob {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: var(--op-slider-knob-size);
+    block-size: var(--op-slider-knob-size);
+    margin-inline-start: calc(var(--op-slider-knob-size) / -2);
+    margin-block-start: calc(var(--op-slider-knob-size) / -2);
+    box-sizing: border-box;
+    background: var(--op-slider-knob-bg, var(--op-color-surface));
+    border: calc(var(--op-border-width) * 2) solid var(--op-slider-knob-border, var(--op-color-primary));
+    border-radius: 50%;
+    box-shadow: var(--op-shadow-sm);
+    cursor: grab;
+    touch-action: none;
+  }
+  .op-slider.is-dragging .op-slider__knob {
+    cursor: grabbing;
+  }
+  .op-slider__knob:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-slider__knob[aria-valuenow] {
+    z-index: 1;
+  }
+  /* the bubble with the value: above the knob, while dragging or focused (or always / never) */
+  .op-slider__bubble {
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-end: calc(100% + var(--op-slider-bubble-offset));
+    padding: 0 var(--op-space-2);
+    color: var(--op-slider-bubble-fg, var(--op-color-inverse-fg));
+    background: var(--op-slider-bubble-bg, var(--op-color-inverse-bg));
+    border-radius: var(--op-radius-sm);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+    transform: translateX(-50%);
+    opacity: 0;
+    pointer-events: none;
+  }
+  .op-slider.is-dragging .op-slider__bubble,
+  .op-slider.is-focus-knob .op-slider__knob:focus-visible .op-slider__bubble,
+  .op-slider.has-bubble-always .op-slider__bubble {
+    opacity: 1;
+  }
+  .op-slider.has-bubble-never .op-slider__bubble {
+    display: none;
+  }
+  .op-slider__mark {
+    position: absolute;
+    inset-block-start: 100%;
+    inline-size: var(--op-border-width);
+    block-size: var(--op-space-2);
+    margin-block-start: var(--op-space-1);
+    background: var(--op-color-border-strong);
+  }
+  .op-slider__mark-label {
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+    transform: translateX(-50%);
+  }
+  .op-slider__scale {
+    display: flex;
+    justify-content: space-between;
+    margin-block-start: var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-slider.is-disabled .op-slider__track,
+  .op-slider.is-readonly .op-slider__track {
+    cursor: not-allowed;
+  }
+  .op-slider.is-disabled {
+    opacity: 0.6;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-textarea-min-height: 4rem;
+  }
+  .op-textarea__input {
+    min-block-size: var(--op-textarea-min-height);
+    padding-block: var(--op-space-2);
+    resize: vertical;
+    line-height: var(--op-line-height);
+  }
+}
+
+@layer optikos {
+  .op-textfield {
+    --_bg: var(--op-textfield-bg, var(--op-color-surface));
+    --_border: var(--op-textfield-border, var(--op-color-border-strong));
+  }
+  .op-textfield__wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .op-textfield__input {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--op-textfield-height, var(--op-control-height));
+    padding: var(--op-textfield-padding-y, 0) var(--op-textfield-padding-x, var(--op-control-padding-x));
+    font: inherit;
+    color: var(--op-textfield-fg, var(--op-color-fg));
+    background: var(--_bg);
+    border: var(--op-border-width) solid var(--_border);
+    border-radius: var(--op-textfield-radius, var(--op-radius));
+    transition: border-color var(--op-duration) var(--op-easing);
+  }
+  .op-textfield__input::placeholder {
+    color: var(--op-textfield-placeholder, var(--op-color-fg-muted));
+  }
+  .op-textfield__input:focus {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+    border-color: var(--op-textfield-border-focus, var(--op-color-focus));
+  }
+  .op-textfield.is-invalid .op-textfield__input {
+    --_border: var(--op-field-invalid-border, var(--op-color-danger));
+  }
+  .op-textfield.is-readonly .op-textfield__input {
+    background: var(--op-color-surface-2);
+  }
+  .op-textfield__input:disabled {
+    color: var(--op-color-disabled-fg);
+    background: var(--op-color-disabled-bg);
+    cursor: not-allowed;
+  }
+  .op-textfield__clear {
+    position: absolute;
+    inset-inline-end: var(--op-space-1);
+    display: none;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-textfield.has-value .op-textfield__clear {
+    display: inline-flex;
+  }
+  .op-textfield__clear:hover {
+    color: var(--op-color-fg);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-toggle-width: 2.25rem;
+    --op-toggle-height: 1.25rem;
+    --op-toggle-knob-inset: 0.1875rem;
+  }
+  /* the checkbox box becomes a track; its knob is a pseudo-element that slides */
+  .op-toggle .op-checkbox__box {
+    inline-size: var(--op-toggle-width);
+    block-size: var(--op-toggle-height);
+    border-radius: var(--op-radius-pill);
+    background: var(--op-toggle-track-bg, var(--op-color-border-strong));
+    border-color: transparent;
+    transition: background var(--op-duration) var(--op-easing);
+  }
+  .op-toggle .op-checkbox__box > * {
+    display: none;
+  }
+  .op-toggle .op-checkbox__box::after {
+    content: '';
+    position: absolute;
+    inset-block: var(--op-toggle-knob-inset);
+    inset-inline-start: var(--op-toggle-knob-inset);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--op-toggle-knob-bg, var(--op-color-surface));
+    box-shadow: var(--op-shadow-sm);
+    transition: translate var(--op-duration) var(--op-easing);
+  }
+  .op-toggle.is-checked .op-checkbox__box {
+    background: var(--op-toggle-on-bg, var(--op-color-primary));
+  }
+  .op-toggle.is-checked .op-checkbox__box::after {
+    translate: calc(var(--op-toggle-width) - var(--op-toggle-height)) 0;
+  }
+  [dir='rtl'] .op-toggle.is-checked .op-checkbox__box::after {
+    translate: calc((var(--op-toggle-width) - var(--op-toggle-height)) * -1) 0;
+  }
+}
+
+@layer optikos {
+  .op-fieldgroup__body {
+    --op-layout-gap: var(--op-fieldgroup-gap, var(--op-space-2));
+  }
+  /* the fields share the row; each still has its label for screen readers, but only the group's label shows */
+  .op-fieldgroup__body > .op-field {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+  .op-fieldgroup__body .op-field__label {
+    position: absolute;
+    inline-size: 0;
+    block-size: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .op-fieldgroup__body .op-field__help,
+  .op-fieldgroup__body .op-field__error,
+  .op-fieldgroup__body .op-field.op-stable > .op-field__error:empty {
+    display: none; /* the group has the one error line (and beats the reserved line of stableSize) */
+  }
+  .op-fieldgroup > .op-field__label {
+    cursor: default;
+  }
+}
+
+@layer optikos {
+  .op-fieldlist__box {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--op-fieldlist-gap, var(--op-space-2));
+  }
+  .op-fieldlist__rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-fieldlist-row-gap, var(--op-space-2));
+    align-self: stretch;
+  }
+  .op-fieldlist__row {
+    --op-layout-gap: var(--op-space-2);
+  }
+  .op-fieldlist__row > .op-field {
+    flex: 1 1 0;
+    min-inline-size: 0;
+  }
+  /* the labels read as a column header: shown on the first row, kept for screen readers on the others */
+  .op-fieldlist__row:not(.is-first) .op-field__label {
+    position: absolute;
+    inline-size: 0;
+    block-size: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .op-fieldlist__row:not(.is-first) .op-field__help {
+    display: none;
+  }
+  .op-fieldlist__tools {
+    display: flex;
+    flex: none;
+    gap: var(--op-space-1);
+    align-self: flex-start;
+    min-block-size: var(--op-control-height);
+    align-items: center;
+  }
+  /* on the first row the tools line up with the inputs, under the labels */
+  .op-fieldlist__row.is-first > .op-fieldlist__tools {
+    margin-block-start: calc(var(--op-font-size) * var(--op-line-height) + var(--op-field-gap, var(--op-space-1)));
+  }
+  .op-fieldlist__tool,
+  .op-fieldlist__add {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    font: inherit;
+    cursor: pointer;
+  }
+  .op-fieldlist__tool {
+    padding: var(--op-space-1);
+  }
+  .op-fieldlist__add {
+    padding: var(--op-space-1) var(--op-space-2);
+    color: var(--op-color-primary-text, var(--op-color-primary));
+    font-weight: var(--op-font-weight-medium);
+  }
+  .op-fieldlist__tool:hover:not(:disabled),
+  .op-fieldlist__add:hover:not(:disabled) {
+    color: var(--op-color-fg);
+    background: var(--op-color-hover);
+  }
+  .op-fieldlist__tool:disabled,
+  .op-fieldlist__add:disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-fieldlist__tool:focus-visible,
+  .op-fieldlist__add:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-fieldlist__empty {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+}
+
+@layer optikos {
+  .op-form {
+    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
+  }
+  .op-form__tab {
+    padding: var(--op-form-tab-padding, var(--op-space-4));
+  }
+}
+
+@layer optikos {
+  .op-formactions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-space-2) var(--op-space-3);
+    padding: var(--op-formactions-padding, var(--op-space-3) 0 0);
+    border-block-start: var(--op-border-width) solid var(--op-formactions-border, var(--op-color-border));
+  }
+  .op-formactions__status {
+    flex: 1;
+    min-inline-size: 0;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-formactions__status:not(:empty)::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--op-space-2);
+    block-size: var(--op-space-2);
+    margin-inline-end: var(--op-space-2);
+    background: var(--op-color-warning);
+    border-radius: 50%;
+  }
+  .op-formactions__buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--op-space-2);
+    margin-inline-start: auto;
+  }
+  /* sticky: stays at the bottom of the scrolling area while the form scrolls under it */
+  .op-formactions.is-sticky {
+    position: sticky;
+    inset-block-end: 0;
+    z-index: 1;
+    padding: var(--op-formactions-padding, var(--op-space-3));
+    background: var(--op-formactions-bg, var(--op-color-surface));
+    box-shadow: var(--op-shadow-sm);
+  }
+}
+
+@layer optikos {
+  .op-formerrors {
+    padding: var(--op-space-3) var(--op-space-4);
+    color: var(--op-formerrors-fg, var(--op-color-fg));
+    background: var(--op-formerrors-bg, var(--op-color-danger-soft));
+    border: var(--op-border-width) solid var(--op-formerrors-border, var(--op-color-danger));
+    border-inline-start-width: calc(var(--op-border-width) * 4);
+    border-radius: var(--op-radius);
+  }
+  .op-formerrors:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-formerrors__title {
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-formerrors__list {
+    margin: var(--op-space-2) 0 0;
+    padding-inline-start: var(--op-space-4);
+  }
+  .op-formerrors__link {
+    padding: 0;
+    color: var(--op-color-danger);
+    background: none;
+    border: 0;
+    font: inherit;
+    text-align: start;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  .op-formerrors__link:hover {
+    text-decoration-thickness: calc(var(--op-border-width) * 2);
+  }
+  .op-formerrors__link:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+    border-radius: var(--op-radius-sm);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-formsection-aside-width: 16rem;
+    --op-formsection-gap: var(--op-space-6);
+  }
+  /* side by side when the section itself is wide enough: a container query, so it works inside any panel or window */
+  .op-formsection {
+    display: flow-root; /* holds the floated aside */
+    container-type: inline-size;
+    min-inline-size: 0;
+  }
+  .op-formsection__aside,
+  .op-formsection__body {
+    min-inline-size: 0;
+  }
+  .op-formsection__body {
+    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
+    margin-block-start: var(--op-space-3);
+  }
+  .op-formsection__title {
+    margin: 0;
+    font-size: var(--op-font-size-lg);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-formsection__desc {
+    margin: var(--op-space-1) 0 0;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-formsection--divided + .op-formsection--divided {
+    margin-block-start: var(--op-space-4);
+    padding-block-start: var(--op-space-5);
+    border-block-start: var(--op-border-width) solid var(--op-formsection-divider, var(--op-color-border));
+  }
+  @container (min-width: 40rem) {
+    .op-formsection:not(.op-formsection--stacked) > .op-formsection__aside {
+      float: inline-start;
+      inline-size: var(--op-formsection-aside-width);
+    }
+    .op-formsection:not(.op-formsection--stacked) > .op-formsection__body {
+      margin-block-start: 0;
+      margin-inline-start: calc(var(--op-formsection-aside-width) + var(--op-formsection-gap));
+    }
+  }
+}
+
+@layer optikos {
+  /* the field's control becomes a row: [prefix][input box][suffix], the inner corners squared off */
+  .op-inputgroup__row {
+    display: flex;
+    align-items: stretch;
+  }
+  .op-inputgroup__row > :not(.op-inputgroup__affix) {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-inputgroup__affix {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding-inline: var(--op-control-padding-x);
+    color: var(--op-inputgroup-affix-fg, var(--op-color-fg-muted));
+    background: var(--op-inputgroup-affix-bg, var(--op-color-surface-2));
+    border: var(--op-border-width) solid var(--op-textfield-border, var(--op-color-border-strong));
+    white-space: nowrap;
+  }
+  .op-inputgroup__btn {
+    color: var(--op-color-fg);
+    font: inherit;
+    font-weight: var(--op-font-weight-medium);
+    cursor: pointer;
+  }
+  .op-inputgroup__btn:hover {
+    background: var(--op-color-hover);
+  }
+  .op-inputgroup__btn:focus-visible {
+    position: relative;
+    z-index: 1;
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-inputgroup__affix--prefix {
+    margin-inline-end: calc(var(--op-border-width) * -1);
+    border-start-start-radius: var(--op-textfield-radius, var(--op-radius));
+    border-end-start-radius: var(--op-textfield-radius, var(--op-radius));
+  }
+  .op-inputgroup__affix--suffix {
+    margin-inline-start: calc(var(--op-border-width) * -1);
+    border-start-end-radius: var(--op-textfield-radius, var(--op-radius));
+    border-end-end-radius: var(--op-textfield-radius, var(--op-radius));
+  }
+  /* every text-based field (Select, DateField, NumberField...) draws its box on .op-textfield__input */
+  .op-inputgroup .has-prefix .op-textfield__input {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .op-inputgroup .has-suffix .op-textfield__input {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .op-inputgroup .op-textfield__input:focus {
+    position: relative;
+    z-index: 1; /* the focus ring stays above the joined segments */
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-stepform-review-label-width: 9rem;
+  }
+  .op-stepform {
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-stepform-gap, var(--op-space-4));
+    min-block-size: 0;
+  }
+  .op-stepform > .op-stepper {
+    flex: none;
+    padding-inline: var(--op-stepform-step-padding, var(--op-space-3));
+  }
+  .op-stepform__body {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .op-stepform__step {
+    padding: var(--op-stepform-step-padding, var(--op-space-3));
+  }
+  .op-stepform > .op-stepform__footer {
+    flex: none;
+    border-block-end: 0;
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+  }
+  .op-stepform__review-title {
+    margin: var(--op-space-3) 0 var(--op-space-2);
+    font-size: var(--op-font-size-lg);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-stepform__review-list {
+    display: grid;
+    grid-template-columns: minmax(var(--op-stepform-review-label-width), max-content) minmax(0, 1fr);
+    gap: var(--op-space-1) var(--op-space-4);
+    margin: 0;
+  }
+  .op-stepform__review-list dt {
+    color: var(--op-color-fg-muted);
+  }
+  .op-stepform__review-list dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+}
+
+@layer optikos {
+  .op-container {
+    min-width: 0;
+  }
+}
+
+@layer optikos {
+  .op-fieldset {
+    min-inline-size: 0;
+    margin: 0;
+    padding: var(--op-fieldset-padding, var(--op-space-3));
+    color: var(--op-color-fg);
+    border: var(--op-border-width) solid var(--op-fieldset-border, var(--op-color-border));
+    border-radius: var(--op-fieldset-radius, var(--op-radius));
+  }
+  .op-fieldset__legend {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding-inline: var(--op-space-1);
+    color: var(--op-fieldset-legend-fg, var(--op-color-fg));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-fieldset__toggle {
+    display: inline-flex;
+    padding: 0;
+    color: inherit;
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+  .op-fieldset.is-collapsed .op-fieldset__toggle .op-icon {
+    transform: rotate(180deg);
+  }
+  .op-fieldset.is-collapsed {
+    padding-block-end: 0;
+  }
+  .op-fieldset__desc {
+    margin: 0 0 var(--op-space-3);
+    padding-inline: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-fieldset__body {
+    --op-layout-gap: var(--op-form-gap, var(--op-space-3));
+  }
+  /* line: no frame, a rule under the legend; plain: just the legend */
+  .op-fieldset--line,
+  .op-fieldset--plain {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+  }
+  .op-fieldset--line > .op-fieldset__legend,
+  .op-fieldset--plain > .op-fieldset__legend {
+    inline-size: 100%;
+    margin-block-end: var(--op-space-3);
+    padding: 0;
+  }
+  .op-fieldset--line > .op-fieldset__legend {
+    padding-block-end: var(--op-space-2);
+    border-block-end: var(--op-border-width) solid var(--op-fieldset-border, var(--op-color-border));
+  }
+  .op-fieldset--line > .op-fieldset__desc,
+  .op-fieldset--plain > .op-fieldset__desc {
+    margin-block-start: calc(var(--op-space-2) * -1);
+    padding: 0;
+  }
+  .op-fieldset--collapsible-title .op-fieldset__title,
+  .op-fieldset__toggle + .op-fieldset__title {
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+@layer optikos {
+  .op-panel {
+    --_bg: var(--op-panel-bg, var(--op-color-surface));
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    color: var(--op-panel-fg, var(--op-color-fg));
+    background: var(--_bg);
+    border: var(--op-border-width) solid var(--op-panel-border, var(--op-color-border));
+    border-radius: var(--op-panel-radius, var(--op-radius));
+    box-shadow: var(--op-panel-shadow, none);
+    overflow: hidden;
+  }
+  .op-panel__header {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    padding: var(--op-panel-header-padding, var(--op-space-2) var(--op-space-3));
+    background: var(--op-panel-header-bg, var(--op-color-surface-2));
+    color: var(--op-panel-header-fg, var(--op-color-fg));
+    border-block-end: var(--op-border-width) solid var(--op-panel-header-border, var(--op-panel-border, var(--op-color-border-strong)));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-panel__title {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-panel--collapsible .op-panel__title {
+    cursor: pointer;
+  }
+  .op-panel__tools {
+    display: flex;
+    gap: var(--op-space-1);
+  }
+  .op-panel__tool {
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: inherit;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-panel__tool:hover {
+    background: var(--op-color-hover);
+  }
+  .op-panel__tool:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-panel.is-collapsed .op-panel__header {
+    border-block-end: 0;
+  }
+  .op-panel.is-collapsed .op-panel__tool:first-child .op-icon {
+    transform: rotate(180deg);
+  }
+  .op-panel__body {
+    flex: 1;
+    min-height: 0;
+    padding: var(--op-panel-body-padding, var(--op-space-3));
+    overflow: auto;
+  }
+  .op-panel__tbar,
+  .op-panel__bbar,
+  .op-panel__footer {
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+  }
+  .op-panel__bbar,
+  .op-panel__footer {
+    border-block-end: 0;
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+  }
+  /* the ↻ tool turns while the panel reloads */
+  .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: op-spin 700ms linear infinite;
+  }
+  .op-motion-off .op-panel.is-reloading > .op-panel__header .op-panel__tool svg {
+    animation: none;
+  }
+}
+
+@layer optikos {
+  .op-spacer--line {
+    align-self: stretch;
+    inline-size: var(--op-border-width);
+    background: var(--op-spacer-line, var(--op-color-border));
+  }
+}
+
+@layer optikos {
+  .op-toolbar {
+    --op-layout-gap: var(--op-toolbar-gap, var(--op-space-2));
+    flex-wrap: wrap;
+    padding: var(--op-toolbar-padding, var(--op-space-2));
+    background: var(--op-toolbar-bg, var(--op-color-surface));
+    border-block-end: var(--op-border-width) solid var(--op-toolbar-border, var(--op-color-border));
+  }
+  /* toolbar items keep their size and wrap to a new row instead of being squeezed or cut */
+  .op-toolbar > * {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}
+
+@layer optikos {
+  .op-viewport {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    color: var(--op-viewport-fg, var(--op-color-fg));
+    background: var(--op-viewport-bg, var(--op-color-bg));
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-breadcrumb-separator: '›';
+  }
+  .op-breadcrumb {
+    color: var(--op-breadcrumb-fg, var(--op-color-fg-muted));
+  }
+  .op-breadcrumb__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--op-breadcrumb-gap, var(--op-space-1));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-breadcrumb__list > li + li::before {
+    content: var(--op-breadcrumb-separator);
+    margin-inline-end: var(--op-breadcrumb-gap, var(--op-space-1));
+  }
+  .op-breadcrumb__item,
+  .op-breadcrumb__more,
+  .op-breadcrumb__current {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-1);
+    padding: var(--op-space-1);
+    font: inherit;
+    color: inherit;
+    text-decoration: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+  }
+  .op-breadcrumb__item,
+  .op-breadcrumb__more {
+    cursor: pointer;
+  }
+  .op-breadcrumb__item:hover,
+  .op-breadcrumb__more:hover {
+    color: var(--op-breadcrumb-hover-fg, var(--op-color-fg));
+    background: var(--op-color-hover);
+  }
+  .op-breadcrumb__item:focus-visible,
+  .op-breadcrumb__more:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: 0;
+  }
+  .op-breadcrumb__current {
+    color: var(--op-breadcrumb-current-fg, var(--op-color-fg));
+    font-weight: var(--op-font-weight-medium);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-navmenu-rail-width: 3.5rem;
+    --op-navmenu-indent: 1rem;
+    --op-navmenu-group-tracking: 0.04em;
+    --op-navmenu-badge-min-width: 1.25rem;
+  }
+  .op-navmenu {
+    display: block;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    color: var(--op-navmenu-fg, var(--op-color-fg));
+    background: var(--op-navmenu-bg, var(--op-color-surface));
+    overflow: auto;
+  }
+  .op-navmenu__tree,
+  .op-navmenu__group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-navmenu__tree {
+    padding: var(--op-space-2);
+  }
+  .op-navmenu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-3);
+    box-sizing: border-box;
+    min-block-size: var(--op-navmenu-item-height, var(--op-control-height));
+    padding: 0 var(--op-space-3);
+    padding-inline-start: calc(var(--op-space-3) + var(--_level, 0) * var(--op-navmenu-indent));
+    border-radius: var(--op-radius);
+    border-inline-start: var(--op-space-1) solid transparent;
+    cursor: pointer;
+    user-select: none;
+  }
+  .op-navmenu__item:hover:not(.is-disabled) {
+    background: var(--op-navmenu-item-hover-bg, var(--op-color-hover));
+  }
+  .op-navmenu__item:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-navmenu__item.is-active {
+    color: var(--op-navmenu-active-fg, var(--op-color-primary));
+    background: var(--op-navmenu-active-bg, var(--op-color-primary-soft));
+    border-inline-start-color: var(--op-navmenu-active-bar, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-navmenu__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-navmenu__item.is-group {
+    color: var(--op-navmenu-group-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    letter-spacing: var(--op-navmenu-group-tracking);
+    text-transform: uppercase;
+  }
+  .op-navmenu__icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--op-icon-size);
+  }
+  .op-navmenu__text {
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-navmenu__badge {
+    flex: none;
+    min-inline-size: var(--op-navmenu-badge-min-width);
+    padding: 0 var(--op-space-2);
+    color: var(--op-navmenu-badge-fg, var(--op-color-primary-fg));
+    background: var(--op-navmenu-badge-bg, var(--op-color-primary));
+    border-radius: var(--op-radius-pill);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    text-align: center;
+  }
+  .op-navmenu__chevron {
+    display: inline-flex;
+    flex: none;
+    transition: transform var(--op-duration) var(--op-easing);
+  }
+  .op-navmenu__item.is-group:not(.is-expanded) .op-navmenu__chevron {
+    transform: rotate(-90deg);
+  }
+  /* rail: icons only; a group is just a thin rule between its neighbours */
+  .op-navmenu.is-rail {
+    inline-size: var(--op-navmenu-rail-width);
+  }
+  .op-navmenu.is-rail .op-navmenu__text,
+  .op-navmenu.is-rail .op-navmenu__chevron,
+  .op-navmenu.is-rail .op-navmenu__item.is-group .op-navmenu__icon {
+    display: none;
+  }
+  .op-navmenu.is-rail .op-navmenu__item {
+    justify-content: center;
+    padding-inline: 0;
+  }
+  .op-navmenu.is-rail .op-navmenu__item.is-group {
+    min-block-size: var(--op-space-3);
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+    border-radius: 0;
+    pointer-events: none;
+  }
+  .op-navmenu.is-rail .op-navmenu__badge {
+    display: none;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-stepper-marker-size: 1.75rem;
+  }
+  .op-stepper__list {
+    display: flex;
+    gap: var(--op-space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .op-stepper__step {
+    display: flex;
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-stepper__step:last-child {
+    flex: none;
+  }
+  /* the line to the next step: fills what is left after the text, level with the middle of the marker */
+  .op-stepper__line {
+    flex: 1;
+    align-self: flex-start;
+    min-inline-size: var(--op-space-3);
+    margin-block-start: calc(var(--op-stepper-marker-size) / 2);
+    margin-inline: var(--op-space-1) var(--op-space-2);
+    block-size: var(--op-border-width);
+    background: var(--op-stepper-line, var(--op-color-border-strong));
+  }
+  .op-stepper__step.is-done .op-stepper__line {
+    background: var(--op-stepper-done-bg, var(--op-color-success));
+  }
+  .op-stepper__btn {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--op-space-2);
+    min-inline-size: 0;
+    padding: 0;
+    font: inherit;
+    color: var(--op-color-fg-muted);
+    text-align: start;
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-stepper__btn:disabled {
+    cursor: default;
+  }
+  .op-stepper__btn:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: var(--op-focus-offset);
+  }
+  .op-stepper__marker {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--op-stepper-marker-size);
+    block-size: var(--op-stepper-marker-size);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-stepper-line, var(--op-color-border-strong));
+    border-radius: 50%;
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-stepper__text {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    padding-inline-end: var(--op-space-2);
+    background: inherit;
+  }
+  .op-stepper__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-stepper__desc,
+  .op-stepper__opt {
+    font-size: var(--op-font-size-sm);
+    color: var(--op-color-fg-muted);
+  }
+  .op-stepper__step.is-current .op-stepper__btn {
+    color: var(--op-color-fg);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-stepper__step.is-current .op-stepper__marker {
+    color: var(--op-color-primary-fg);
+    background: var(--op-stepper-current-bg, var(--op-color-primary));
+    border-color: var(--op-stepper-current-bg, var(--op-color-primary));
+  }
+  .op-stepper__step.is-done:not(.is-current) .op-stepper__marker {
+    color: var(--op-color-success);
+    border-color: var(--op-stepper-done-bg, var(--op-color-success));
+  }
+  .op-stepper__step.is-error .op-stepper__marker {
+    color: var(--op-color-danger-fg);
+    background: var(--op-stepper-error-bg, var(--op-color-danger));
+    border-color: var(--op-stepper-error-bg, var(--op-color-danger));
+  }
+  .op-stepper__step.is-error .op-stepper__btn {
+    color: var(--op-color-danger);
+  }
+  /* phones: only the current step shows its words; the others keep them for screen readers (the button's name) */
+  @media (max-width: 40rem) {
+    .op-stepper__step:not(.is-current) .op-stepper__text {
+      position: absolute;
+      inline-size: 0;
+      block-size: 0;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .op-stepper__step:not(.is-current) {
+      flex: none;
+    }
+    .op-stepper__step:not(.is-current) .op-stepper__line {
+      min-inline-size: var(--op-space-2);
+    }
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-tabs-badge-min-width: 1.25em;
+  }
+  .op-tabs {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    color: var(--op-color-fg);
+  }
+  .op-tabs--left {
+    flex-direction: row;
+  }
+  .op-tabs__bar {
+    display: flex;
+    flex: none;
+    gap: var(--op-tabs-gap, var(--op-space-1));
+    background: var(--op-tabs-bar-bg, var(--op-color-surface-2));
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .op-tabs--left > .op-tabs__bar {
+    flex-direction: column;
+    border-block-end: 0;
+    border-inline-end: var(--op-border-width) solid var(--op-color-border);
+    overflow: visible;
+  }
+  .op-tabs__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    padding: var(--op-tabs-tab-padding-y, var(--op-space-2)) var(--op-tabs-tab-padding-x, var(--op-space-4));
+    color: var(--op-tabs-tab-fg, var(--op-color-fg-muted));
+    border-block-end: var(--op-space-1) solid transparent;
+    margin-block-end: calc(var(--op-border-width) * -1);
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+  }
+  .op-tabs--left > .op-tabs__bar > .op-tabs__tab {
+    border-block-end: 0;
+    border-inline-end: var(--op-space-1) solid transparent;
+    margin-block-end: 0;
+    margin-inline-end: calc(var(--op-border-width) * -1);
+  }
+  .op-tabs__tab:hover {
+    color: var(--op-color-fg);
+  }
+  .op-tabs__tab.is-active {
+    color: var(--op-tabs-tab-active-fg, var(--op-color-primary));
+    border-color: var(--op-tabs-tab-active-border, var(--op-color-primary));
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-tabs__tab[aria-disabled='true'] {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-tabs__close,
+  .op-tabs__reload {
+    display: inline-flex;
+    border-radius: var(--op-radius-sm);
+  }
+  .op-tabs__close:hover,
+  .op-tabs__reload:hover {
+    background: var(--op-color-hover);
+  }
+  /* the ↻ turns while the tab reloads */
+  .op-tabs__tab.is-reloading .op-tabs__reload svg {
+    animation: op-spin 700ms linear infinite;
+  }
+  .op-motion-off .op-tabs__tab.is-reloading .op-tabs__reload svg {
+    animation: none;
+  }
+  .op-tabs__panels {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .op-tabs__panels > * {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+  .op-tabs__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--op-tabs-badge-min-width);
+    padding: 0 var(--op-space-1);
+    color: var(--op-color-danger-fg);
+    background: var(--op-color-danger);
+    border-radius: var(--op-radius-pill);
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-tabs__tab.has-error {
+    color: var(--op-color-danger);
+  }
+  .op-tabs__tab.is-dirty .op-tabs__title::after {
+    content: '•';
+    margin-inline-start: var(--op-space-1);
+    color: var(--op-color-primary);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-palette-width: 38rem;
+    --op-palette-top: 12vh;
+    --op-palette-max-height: 26rem;
+  }
+  .op-palette-backdrop {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding: var(--op-palette-top) var(--op-space-3) var(--op-space-3);
+    background: var(--op-backdrop-bg, var(--op-color-overlay));
+  }
+  .op-palette {
+    display: flex;
+    flex-direction: column;
+    inline-size: min(var(--op-palette-width), 100%);
+    max-block-size: 100%;
+    color: var(--op-color-fg);
+    background: var(--op-palette-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-palette-radius, var(--op-radius-lg));
+    box-shadow: var(--op-shadow-lg);
+    overflow: hidden;
+  }
+  .op-palette__search {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    padding: var(--op-space-3) var(--op-space-4);
+    color: var(--op-color-fg-muted);
+    border-block-end: var(--op-border-width) solid var(--op-color-border);
+  }
+  .op-palette__crumb {
+    flex: none;
+    padding: 0 var(--op-space-2);
+    color: var(--op-color-primary);
+    background: var(--op-color-primary-soft);
+    border-radius: var(--op-radius-sm);
+    font-size: var(--op-font-size-sm);
+    white-space: nowrap;
+  }
+  .op-palette__crumb[hidden],
+  .op-palette__filters[hidden] {
+    display: none;
+  }
+  .op-palette__input {
+    flex: 1;
+    min-inline-size: 0;
+    padding: 0;
+    font: inherit;
+    font-size: var(--op-font-size-lg);
+    color: var(--op-color-fg);
+    background: transparent;
+    border: 0;
+    outline: none;
+  }
+  .op-palette__filters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--op-space-1);
+    padding: var(--op-space-2) var(--op-space-4) 0;
+  }
+  .op-palette__chip {
+    padding: 0 var(--op-space-3);
+    font: inherit;
+    font-size: var(--op-font-size-sm);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius-pill);
+    cursor: pointer;
+  }
+  .op-palette__chip.is-on {
+    color: var(--op-color-primary-fg);
+    background: var(--op-color-primary);
+    border-color: var(--op-color-primary);
+  }
+  .op-palette__chip:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-palette__list {
+    flex: 1;
+    min-block-size: 0;
+    max-block-size: var(--op-palette-max-height);
+    padding: var(--op-space-2);
+    overflow: auto;
+  }
+  .op-palette__group {
+    padding: var(--op-space-2) var(--op-space-3) var(--op-space-1);
+    color: var(--op-palette-group-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-palette__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-3);
+    padding: var(--op-space-2) var(--op-space-3);
+    border-radius: var(--op-radius);
+    cursor: pointer;
+  }
+  .op-palette__item.is-active {
+    background: var(--op-palette-item-active-bg, var(--op-color-hover));
+  }
+  .op-palette__item.is-disabled {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-palette__icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--op-icon-size);
+    color: var(--op-color-fg-muted);
+  }
+  .op-palette__text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  .op-palette__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .op-palette__desc {
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-palette__mark {
+    color: inherit;
+    background: var(--op-color-primary-soft);
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-palette__cat,
+  .op-palette__kbd {
+    flex: none;
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-palette__kbd {
+    padding: 0 var(--op-space-2);
+    font-family: var(--op-font-mono);
+    background: var(--op-color-surface-2);
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-radius: var(--op-radius-sm);
+  }
+  .op-palette__more {
+    display: inline-flex;
+    color: var(--op-color-fg-muted);
+  }
+  .op-palette__empty {
+    padding: var(--op-space-5);
+    color: var(--op-color-fg-muted);
+    text-align: center;
+  }
+  .op-palette__hint {
+    padding: var(--op-space-2) var(--op-space-4);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+    background: var(--op-color-surface-2);
+    border-block-start: var(--op-border-width) solid var(--op-color-border);
+  }
+}
+
+@layer optikos {
+  .op-dropdown {
+    position: fixed;
+    box-sizing: border-box;
+    max-inline-size: calc(100vw - var(--op-space-4));
+    color: var(--op-dropdown-fg, var(--op-color-fg));
+    background: var(--op-dropdown-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-dropdown-border, var(--op-color-border));
+    border-radius: var(--op-dropdown-radius, var(--op-radius));
+    box-shadow: var(--op-dropdown-shadow, var(--op-shadow));
+    overflow: hidden;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-menu-min-width: 10rem;
+    --op-menu-max-height: 22rem;
+    --op-menu-group-tracking: 0.04em;
+  }
+  .op-menu {
+    box-sizing: border-box;
+    min-inline-size: var(--op-menu-min-width);
+    padding: var(--op-menu-padding, var(--op-space-1));
+    color: var(--op-color-fg);
+    background: var(--op-menu-bg, var(--op-color-surface));
+  }
+  .op-menu__item {
+    display: flex;
+    align-items: center;
+    gap: var(--op-space-2);
+    min-block-size: var(--op-menu-item-height, var(--op-control-height));
+    padding: 0 var(--op-menu-item-padding-x, var(--op-space-3)) 0 var(--op-space-2);
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+    outline: none;
+  }
+  .op-menu__item:hover,
+  .op-menu__item:focus {
+    background: var(--op-menu-item-hover-bg, var(--op-color-hover));
+  }
+  .op-menu__item[aria-disabled='true'] {
+    color: var(--op-color-disabled-fg);
+    cursor: not-allowed;
+  }
+  .op-menu__icon {
+    display: inline-flex;
+    inline-size: var(--op-icon-size);
+  }
+  .op-menu__text {
+    flex: 1;
+    white-space: nowrap;
+  }
+  .op-menu__arrow {
+    display: inline-flex;
+    color: var(--op-color-fg-muted);
+  }
+  .op-menu__sep {
+    margin-block: var(--op-space-1);
+    block-size: var(--op-border-width);
+    background: var(--op-menu-sep, var(--op-color-border));
+  }
+  /* with search: the field on top, the items scroll under it */
+  .op-menu__search {
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--op-control-height);
+    margin-block-end: var(--op-space-1);
+    padding: 0 var(--op-space-2);
+    color: var(--op-color-fg);
+    background: var(--op-color-surface);
+    border: var(--op-border-width) solid var(--op-color-border-strong);
+    border-radius: var(--op-radius-sm);
+    font: inherit;
+  }
+  .op-menu__search:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+    outline-offset: calc(var(--op-focus-width) * -1);
+  }
+  .op-menu__list {
+    max-block-size: var(--op-menu-max-height);
+    overflow: auto;
+  }
+  .op-menu__empty {
+    padding: var(--op-space-2) var(--op-space-3);
+    color: var(--op-color-fg-muted);
+    font-size: var(--op-font-size-sm);
+  }
+  .op-menu.is-searching .op-menu__sep,
+  .op-menu__group:not(:has(.op-menu__item:not([hidden]))) {
+    display: none;
+  }
+  /* groups: a quiet header over the items that share it */
+  .op-menu__group + .op-menu__group,
+  .op-menu__item + .op-menu__group {
+    margin-block-start: var(--op-space-1);
+  }
+  .op-menu__group-label {
+    padding: var(--op-space-2) var(--op-space-3) var(--op-space-1) var(--op-space-2);
+    color: var(--op-menu-group-fg, var(--op-color-fg-muted));
+    font-size: var(--op-font-size-sm);
+    font-weight: var(--op-font-weight-bold);
+    letter-spacing: var(--op-menu-group-tracking);
+    text-transform: uppercase;
+  }
+}
+
+@layer optikos {
+  .op-messagebox__icon {
+    font-size: var(--op-font-size-xl);
+    color: var(--op-color-primary);
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-toast-width: 22rem;
+    --op-z-toast: 2;
+  }
+  .op-toast-region {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: var(--op-toast-gap, var(--op-space-2));
+    padding: var(--op-space-4);
+    max-inline-size: 100%;
+    z-index: var(--op-z-toast);
+    pointer-events: none;
+  }
+  .op-toast-region > * {
+    pointer-events: auto;
+  }
+  .op-toast-region[data-pos^='top'] {
+    inset-block-start: 0;
+  }
+  .op-toast-region[data-pos^='bottom'] {
+    inset-block-end: 0;
+  }
+  .op-toast-region[data-pos$='right'] {
+    inset-inline-end: 0;
+  }
+  .op-toast-region[data-pos$='left'] {
+    inset-inline-start: 0;
+  }
+  .op-toast-region[data-pos='top'],
+  .op-toast-region[data-pos='bottom'] {
+    inset-inline: 0;
+    align-items: center;
+  }
+  .op-toast {
+    --_accent: var(--op-toast-accent-info, var(--op-color-info));
+    display: flex;
+    align-items: flex-start;
+    gap: var(--op-space-2);
+    box-sizing: border-box;
+    inline-size: var(--op-toast-width);
+    max-inline-size: 100%;
+    padding: var(--op-space-3);
+    color: var(--op-toast-fg, var(--op-color-fg));
+    background: var(--op-toast-bg, var(--op-color-surface));
+    border: var(--op-border-width) solid var(--op-color-border);
+    border-inline-start: var(--op-space-1) solid var(--_accent);
+    border-radius: var(--op-toast-radius, var(--op-radius));
+    box-shadow: var(--op-toast-shadow, var(--op-shadow));
+    animation: op-toast-in var(--op-duration) var(--op-easing);
+  }
+  .op-toast--success {
+    --_accent: var(--op-toast-accent-success, var(--op-color-success));
+  }
+  .op-toast--warning {
+    --_accent: var(--op-toast-accent-warning, var(--op-color-warning));
+  }
+  .op-toast--error {
+    --_accent: var(--op-toast-accent-error, var(--op-color-danger));
+  }
+  .op-toast__icon {
+    color: var(--_accent);
+    display: inline-flex;
+  }
+  .op-toast__body {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .op-toast__title {
+    font-weight: var(--op-font-weight-bold);
+  }
+  .op-toast__close {
+    display: inline-flex;
+    padding: var(--op-space-1);
+    color: var(--op-color-fg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--op-radius-sm);
+    cursor: pointer;
+  }
+  .op-toast__close:hover {
+    background: var(--op-color-hover);
+  }
+  @keyframes op-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(calc(var(--op-space-2) * -1));
+    }
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-tooltip-max-width: 20rem;
+  }
+  .op-tooltip {
+    position: fixed;
+    box-sizing: border-box;
+    max-inline-size: var(--op-tooltip-max-width);
+    padding: var(--op-tooltip-padding, var(--op-space-1) var(--op-space-2));
+    color: var(--op-tooltip-fg, var(--op-color-inverse-fg));
+    background: var(--op-tooltip-bg, var(--op-color-inverse-bg));
+    border-radius: var(--op-tooltip-radius, var(--op-radius-sm));
+    font-size: var(--op-tooltip-font-size, var(--op-font-size-sm));
+    pointer-events: none;
+    overflow-wrap: anywhere;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-widget-width: 24rem;
+    --op-widget-height: 26rem;
+    --op-widget-wide: 36rem;
+    --op-widget-offset: var(--op-space-4);
+    --op-widget-grip: 0.5rem;
+    --op-widget-corner: 1rem;
+  }
+  .op-widget {
+    min-block-size: 0;
+    background: var(--op-widget-bg, var(--op-color-surface));
+    border-radius: var(--op-widget-radius, var(--op-radius-lg));
+  }
+  .op-widget.is-floating {
+    --_from: translateX(0);
+    position: fixed;
+    box-shadow: var(--op-widget-shadow, var(--op-shadow-lg));
+    opacity: 0;
+    transform: var(--_from);
+    transition: transform var(--op-duration) var(--op-easing), opacity var(--op-duration) var(--op-easing);
+  }
+  .op-widget.is-floating.is-open {
+    opacity: 1;
+    transform: none;
+  }
+  .op-widget.is-floating[hidden] {
+    display: none;
+  }
+  /* sides: a column on the left/right, a bar (anchored to the end corner) on top/bottom */
+  .op-widget--right.is-floating,
+  .op-widget--left.is-floating {
+    inset-block: var(--op-widget-offset);
+    inline-size: var(--op-widget-size, var(--op-widget-width));
+    max-inline-size: calc(100% - 2 * var(--op-widget-offset));
+  }
+  .op-widget--right.is-floating {
+    inset-inline-end: var(--op-widget-offset);
+    --_from: translateX(calc(100% + var(--op-widget-offset)));
+  }
+  .op-widget--left.is-floating {
+    inset-inline-start: var(--op-widget-offset);
+    --_from: translateX(calc(-100% - var(--op-widget-offset)));
+  }
+  .op-widget--top.is-floating,
+  .op-widget--bottom.is-floating {
+    inset-inline-end: var(--op-widget-offset);
+    inline-size: min(var(--op-widget-wide), calc(100% - 2 * var(--op-widget-offset)));
+    block-size: var(--op-widget-size, var(--op-widget-height));
+    max-block-size: calc(100% - 2 * var(--op-widget-offset));
+  }
+  .op-widget--top.is-floating {
+    inset-block-start: var(--op-widget-offset);
+    --_from: translateY(calc(-100% - var(--op-widget-offset)));
+  }
+  .op-widget--bottom.is-floating {
+    inset-block-end: var(--op-widget-offset);
+    --_from: translateY(calc(100% + var(--op-widget-offset)));
+  }
+  .op-widget [aria-pressed='true'] {
+    color: var(--op-color-primary);
+    background: var(--op-color-primary-soft);
+  }
+  /* dragged: no longer tied to a side; the slide-in becomes a small rise */
+  .op-widget.is-moved.is-floating {
+    --_from: translateY(var(--op-space-3));
+  }
+  .op-widget__handle {
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+  }
+  .op-widget.is-dragging .op-widget__handle {
+    cursor: grabbing;
+  }
+  .op-widget.is-dragging {
+    transition: none;
+  }
+  /* resize: an invisible strip on the inner edge (a line shows on hover/focus); a corner grip once the widget was moved */
+  .op-widget__resize {
+    position: absolute;
+    z-index: 1;
+    touch-action: none;
+  }
+  .op-widget--right .op-widget__resize,
+  .op-widget--left .op-widget__resize {
+    inset-block: 0;
+    inline-size: var(--op-widget-grip);
+    cursor: ew-resize;
+  }
+  .op-widget--right .op-widget__resize {
+    inset-inline-start: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--left .op-widget__resize {
+    inset-inline-end: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--top .op-widget__resize,
+  .op-widget--bottom .op-widget__resize {
+    inset-inline: 0;
+    block-size: var(--op-widget-grip);
+    cursor: ns-resize;
+  }
+  .op-widget--top .op-widget__resize {
+    inset-block-end: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget--bottom .op-widget__resize {
+    inset-block-start: calc(var(--op-widget-grip) / -2);
+  }
+  .op-widget__resize:hover,
+  .op-widget__resize:focus-visible,
+  .op-widget.is-resizing .op-widget__resize {
+    background: linear-gradient(var(--op-color-primary), var(--op-color-primary)) center / var(--op-focus-width) 100% no-repeat;
+    outline: none;
+  }
+  .op-widget--top .op-widget__resize:is(:hover, :focus-visible),
+  .op-widget--bottom .op-widget__resize:is(:hover, :focus-visible),
+  .op-widget--top.is-resizing .op-widget__resize,
+  .op-widget--bottom.is-resizing .op-widget__resize {
+    background-size: 100% var(--op-focus-width);
+  }
+  .op-widget.is-moved .op-widget__resize {
+    inset: auto 0 0 auto;
+    inline-size: var(--op-widget-corner);
+    block-size: var(--op-widget-corner);
+    background: linear-gradient(135deg, transparent 55%, var(--op-color-border-strong) 55% 62%, transparent 62% 75%, var(--op-color-border-strong) 75% 82%, transparent 82%);
+    cursor: nwse-resize;
+  }
+  .op-widget.is-moved .op-widget__resize:focus-visible {
+    outline: var(--op-focus-width) solid var(--op-color-focus);
+  }
+  .op-widget.is-resizing {
+    transition: none;
+    user-select: none;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-window-width: 28rem;
+  }
+  .op-window-backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--op-backdrop-bg, var(--op-color-overlay));
+  }
+  /* mask: false — still modal (the page is inert and takes no clicks), just not dimmed */
+  .op-window-backdrop.is-clear {
+    background: transparent;
+  }
+  .op-window {
+    position: fixed;
+    inline-size: var(--op-window-width);
+    max-inline-size: calc(100vw - var(--op-space-4));
+    max-block-size: calc(100vh - var(--op-space-4));
+    max-block-size: calc(100dvh - var(--op-space-4));
+    background: var(--op-window-bg, var(--op-color-surface));
+    border-radius: var(--op-window-radius, var(--op-radius-lg));
+    box-shadow: var(--op-window-shadow, var(--op-shadow-lg));
+  }
+  .op-window:focus {
+    outline: none;
+  }
+  .op-window__handle {
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+  }
+  .op-window.is-dragging .op-window__handle {
+    cursor: grabbing;
+  }
+}
+
+@layer optikos {
+  :root {
+    --op-motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --op-motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --op-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --op-motion-press-scale: 0.97;
+    --op-motion-press-duration: 100ms;
+    --op-motion-popover-scale: 0.95;
+    --op-motion-dropdown-duration: 200ms;
+    --op-motion-exit-ratio: 0.8;
+    --op-motion-stagger-step: 30ms;
+    --op-motion-blur: 4px;
+  }
+  /* Rule 4: interactive things shrink a little under the finger. Rule 14: while held, only transform may animate. */
+  .op-button:active:not(:disabled),
+  .op-dataview__item:active,
+  [data-op-press]:active {
+    transform: scale(var(--op-motion-press-scale));
+    transition-property: transform;
+    transition-duration: var(--op-motion-press-duration);
+    transition-timing-function: var(--op-motion-ease-out);
+  }
+  [data-op-press] {
+    transition: transform var(--op-motion-press-duration) var(--op-motion-ease-out);
+  }
+  .op-dataview__item {
+    transition: transform var(--op-motion-press-duration) var(--op-motion-ease-out), box-shadow var(--op-duration) var(--op-easing);
+  }
+}