@tollerud/ui 1.1.4 → 3.0.0

package/globals-layers.css

@@ -0,0 +1,935 @@
+@layer base {
+  :root,
+  .dark {
+    /* ═══ Brand Tokens ═══ */
+    --tollerud-yellow:         #FFFF00;
+    --tollerud-yellow-warm:    #E8D500;
+    --tollerud-acid:           #FFFF00; /* Tollerud high-voltage yellow */
+    --tollerud-yellow-dim:     #B8A800;
+    --tollerud-amber:          #FFB800;
+    --tollerud-amber-glow:     #FF8C00;
+
+    /* ═══ Noir Scale ═══ */
+    --tollerud-black:          #0A0A0A;
+    --tollerud-noir-900:       #121212;
+    --tollerud-noir-800:       #1A1A1A;
+    --tollerud-noir-700:       #252525;
+    --tollerud-noir-600:       #333333;
+    --tollerud-noir-500:       #4A4A4A;
+    --tollerud-noir-400:       #666666;
+    --tollerud-noir-300:       #888888;
+    --tollerud-noir-200:       #AAAAAA;
+    --tollerud-noir-100:       #CCCCCC;
+    --tollerud-noir-50:        #E5E5E5;
+    --tollerud-white:          #F5F5F5;
+
+    /* ═══ Semantic Tokens (shadcn/ui compatible) ═══ */
+    --background:         #0A0A0A;
+    --foreground:         #F5F5F5;
+
+    --card:               #121212;
+    --card-foreground:    #F5F5F5;
+
+    --popover:            #1A1A1A;
+    --popover-foreground: #F5F5F5;
+
+    --primary:            #FFFF00;
+    --primary-foreground: #0A0A0A;
+
+    --secondary:          #252525;
+    --secondary-foreground: #AAAAAA;
+
+    --muted:              #252525;
+    --muted-foreground:   #888888;
+
+    --accent:             #FFB800;
+    --accent-foreground:  #0A0A0A;
+
+    --destructive:        #EF4444;
+    --destructive-foreground: #F5F5F5;
+
+    --success:            #22C55E;
+    --success-foreground: #0A0A0A;
+
+    --warning:            #E8D500;
+    --warning-foreground: #0A0A0A;
+
+    --info:               #3B82F6;
+    --info-foreground:    #FFFFFF;
+
+    --border:             #333333;
+    --input:              #333333;
+    --ring:               #FFFF00;
+    --radius:             0.25rem;
+
+    /* ═══ Chart Tokens ═══ */
+    --chart-1:            #FFFF00;
+    --chart-2:            #FFB800;
+    --chart-3:            #22C55E;
+    --chart-4:            #3B82F6;
+    --chart-5:            #EF4444;
+    --chart-grid:         rgba(245,245,245,0.08);
+    --chart-axis:         rgba(245,245,245,0.35);
+
+    /* ═══ Motion Tokens ═══ */
+    --motion-duration-fast:   150ms;
+    --motion-duration-normal: 250ms;
+    --motion-duration-slow:   350ms;
+    --motion-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
+    --motion-ease-in:      cubic-bezier(0.7, 0, 0.84, 0);
+    --motion-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* ═══ Elevation / z-index ═══ */
+    --z-base:       0;
+    --z-dropdown:   10;
+    --z-sticky:     20;
+    --z-fixed:      30;
+    --z-overlay:    40;
+    --z-modal:      50;
+    --z-toast:      60;
+    --z-tooltip:    70;
+
+    /* ═══ Shadow scale (noir: deep + low-spread, never milky) ═══ */
+    --shadow-sm:    0 1px 2px rgba(0,0,0,0.40);
+    --shadow-md:    0 4px 12px rgba(0,0,0,0.45);
+    --shadow-lg:    0 12px 32px rgba(0,0,0,0.55);
+    --shadow-xl:    0 24px 60px rgba(0,0,0,0.65);
+    --shadow-glow:  0 0 15px rgba(255,255,0,0.30);
+
+    /* ═══ Surface Tokens ═══ */
+    --surface:              #0A0A0A;
+    --surface-raised:       #121212;
+    --surface-overlay:      #1A1A1A;
+    --surface-hover:        #252525;
+
+    /* ═══ Text ═══ */
+    --text-primary:         #F5F5F5;
+    --text-secondary:       #AAAAAA;
+    --text-muted:           #666666;
+    --text-inverse:         #0A0A0A;
+
+    /* ═══ Typography ═══ */
+    --font-sans:     'Inter', 'SF Pro', system-ui, sans-serif;
+    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
+    --font-display:  'Inter', 'SF Pro Display', system-ui, sans-serif;
+
+    /* ═══ Glass ═══ */
+    --glass-bg:       rgba(10, 10, 10, 0.88);
+    --glass-border:   rgba(232, 213, 0, 0.08);
+    --glass-blur:     blur(20px);
+
+    /* ═══ Grid Background ═══ */
+    --grid-color:     rgba(232, 213, 0, 0.03);
+    --grid-size:      40px;
+
+    /* ═══ Gradient Accents ═══ */
+    --gradient-yellow: linear-gradient(
+      90deg,
+      transparent,
+      #E8D500 35%,
+      #FFB800 50%,
+      #E8D500 65%,
+      transparent
+    );
+    --gradient-btn:    linear-gradient(
+      135deg,
+      #E8D500,
+      #B8A800
+    );
+    --gradient-soft:   linear-gradient(
+      135deg,
+      rgba(232, 213, 0, 0.8),
+      rgba(255, 184, 0, 0.4)
+    );
+
+    /* ═══ Transition ═══ */
+    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* ═══ Base Reset ═══ */
+  * {
+    border-color: var(--border);
+  }
+
+  body {
+    font-family: var(--font-sans);
+    font-size: 1rem;
+    color: var(--foreground);
+    background-color: var(--background);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::selection {
+    background-color: rgba(232, 213, 0, 0.55);
+    color: #0A0A0A;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background: var(--background);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--tollerud-noir-600);
+    border-radius: 4px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--tollerud-noir-500);
+  }
+
+  /* ═══ Respect reduced motion ═══ */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+@layer components {
+  /* ═══ Card ═══ */
+  .tollerud-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    transition: border-color var(--transition-fast);
+  }
+  .tollerud-card:hover {
+    border-color: var(--tollerud-noir-500);
+  }
+
+  /* ═══ Button Base ═══ */
+  .tollerud-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-family: var(--font-sans);
+    font-weight: 600;
+    border-radius: var(--radius);
+    transition: all var(--transition-fast);
+    cursor: pointer;
+    border: 1px solid transparent;
+  }
+  .tollerud-btn:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+  .tollerud-btn--primary {
+    background: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--primary);
+  }
+  .tollerud-btn--primary:hover {
+    background: var(--tollerud-yellow);
+    box-shadow: var(--shadow-glow, 0 0 15px rgba(255,255,0,0.3));
+  }
+  .tollerud-btn--secondary {
+    background: transparent;
+    color: var(--foreground);
+    border-color: var(--border);
+  }
+  .tollerud-btn--secondary:hover {
+    border-color: var(--tollerud-noir-200);
+    background: var(--surface-hover);
+  }
+  .tollerud-btn--ghost {
+    background: transparent;
+    color: var(--text-secondary);
+  }
+  .tollerud-btn--ghost:hover {
+    color: var(--foreground);
+    background: var(--surface-hover);
+  }
+  .tollerud-btn--destructive {
+    background: var(--destructive);
+    color: var(--destructive-foreground);
+    border-color: var(--destructive);
+  }
+  .tollerud-btn--destructive:hover {
+    box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
+  }
+  .tollerud-btn--sm  { padding: 0.25rem 0.75rem; font-size: 0.875rem; }
+  .tollerud-btn--md  { padding: 0.5rem 1rem; font-size: 1rem; }
+  .tollerud-btn--lg  { padding: 0.75rem 1.5rem; font-size: 1.125rem; }
+  .tollerud-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
+
+  /* ═══ Terminal CTA ═══ */
+  .tollerud-btn--terminal {
+    background: transparent;
+    color: var(--tollerud-yellow);
+    border: 1px solid rgba(232, 213, 0, 0.25);
+    font-weight: 500;
+    letter-spacing: normal;
+    font-family: var(--font-mono);
+  }
+  .tollerud-btn--terminal::before {
+    content: '❯ ';
+    opacity: 0.7;
+  }
+  .tollerud-btn--terminal:hover {
+    border-color: var(--tollerud-yellow);
+    box-shadow: 0 0 15px rgba(255,255,0,0.3), 0 0 30px rgba(255,255,0,0.1);
+    background: rgba(232, 213, 0, 0.05);
+  }
+
+  /* ═══ Input ═══ */
+  .tollerud-input {
+    font-family: var(--font-sans);
+    font-size: 1rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--card);
+    border: 1px solid var(--input);
+    border-radius: var(--radius);
+    color: var(--foreground);
+    transition: border-color var(--transition-fast);
+    width: 100%;
+  }
+  .tollerud-input::placeholder {
+    color: var(--text-muted);
+  }
+  .tollerud-input:focus {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 1px var(--ring);
+  }
+
+  /* ═══ Badge ═══ */
+  .tollerud-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    border-radius: var(--radius);
+    letter-spacing: 0.02em;
+  }
+  .tollerud-badge--default {
+    background: var(--muted);
+    color: var(--text-secondary);
+  }
+  .tollerud-badge--accent {
+    background: rgba(232, 213, 0, 0.15);
+    color: var(--tollerud-yellow);
+  }
+  .tollerud-badge--success {
+    background: rgba(34, 197, 94, 0.15);
+    color: var(--success);
+  }
+  .tollerud-badge--error {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--destructive);
+  }
+  .tollerud-badge--info {
+    background: rgba(59, 130, 246, 0.15);
+    color: var(--info);
+  }
+  .tollerud-badge--warning {
+    background: rgba(232, 213, 0, 0.15);
+    color: var(--warning);
+  }
+
+  /* ═══ Pill Tags ═══ */
+  .tollerud-pill {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.375rem 1rem;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    border-radius: 3px;
+    border: 1px solid;
+    letter-spacing: 0.01em;
+  }
+  .tollerud-pill--outline {
+    background: rgba(232, 213, 0, 0.06);
+    color: var(--tollerud-yellow);
+    border-color: rgba(232, 213, 0, 0.35);
+  }
+  .tollerud-pill--muted {
+    background: rgba(232, 213, 0, 0.03);
+    color: rgba(232, 213, 0, 0.55);
+    border-color: rgba(232, 213, 0, 0.15);
+  }
+  .tollerud-pill--success {
+    background: rgba(34, 197, 94, 0.06);
+    color: var(--success);
+    border-color: rgba(34, 197, 94, 0.35);
+  }
+  .tollerud-pill--error {
+    background: rgba(239, 68, 68, 0.06);
+    color: var(--destructive);
+    border-color: rgba(239, 68, 68, 0.35);
+  }
+
+  /* ═══ Divider ═══ */
+  .tollerud-divider {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: 1.5rem 0;
+  }
+  .tollerud-divider--accent {
+    border-color: var(--tollerud-yellow);
+    width: 4rem;
+  }
+
+  /* ═══ Accent Bar (Graphify style) ═══ */
+  .tollerud-accent-bar {
+    height: 1px;
+    border: none;
+    background: var(--gradient-yellow);
+    margin: 3rem 0;
+  }
+
+  /* ═══ Gradient Text ═══ */
+  .tollerud-gradient-text {
+    background: var(--gradient-soft);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  /* ═══ Noir Glow Background (Tollerud.no signature) ═══ */
+  .tollerud-noir-glow-root {
+    background: #000;
+    isolation: isolate;
+  }
+
+  .tollerud-noir-glow-bg {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(70% 75% at 100% 0%, hsl(56, 100%, 80%) 0%, transparent 70%),
+      radial-gradient(80% 85% at 0% 100%, hsl(56, 100%, 50%) 0%, transparent 72%),
+      radial-gradient(60% 65% at 0% 0%, hsl(54, 85%, 66%) 0%, transparent 68%),
+      #000;
+    opacity: 0.45;
+    filter: saturate(1.05) contrast(1.02);
+    transform: translateZ(0);
+    animation: tollerud-noir-glow-drift 32s var(--motion-ease-in-out) infinite alternate;
+  }
+
+  .tollerud-noir-glow-vignette {
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.08) 26%, rgba(0,0,0,0.2) 58%, rgba(0,0,0,0.64) 100%),
+      linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.5));
+  }
+
+  .tollerud-noir-noise {
+    position: absolute;
+    inset: -20%;
+    opacity: 0.16;
+    mix-blend-mode: screen;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.85'/%3E%3C/svg%3E");
+    animation: tollerud-noir-noise-shift 1.6s steps(2, end) infinite;
+  }
+
+  @keyframes tollerud-noir-glow-drift {
+    0% {
+      transform: scale(1.02) translate3d(-1.5%, -1%, 0) rotate(0deg);
+      filter: saturate(1.05) contrast(1.04);
+    }
+    50% {
+      transform: scale(1.07) translate3d(1.2%, 0.8%, 0) rotate(0.8deg);
+      filter: saturate(1.2) contrast(1.12);
+    }
+    100% {
+      transform: scale(1.04) translate3d(1.8%, -1.4%, 0) rotate(-0.6deg);
+      filter: saturate(1.1) contrast(1.08);
+    }
+  }
+
+  @keyframes tollerud-noir-noise-shift {
+    0% { transform: translate3d(0, 0, 0); }
+    25% { transform: translate3d(-2%, 1%, 0); }
+    50% { transform: translate3d(1%, -2%, 0); }
+    75% { transform: translate3d(2%, 2%, 0); }
+    100% { transform: translate3d(-1%, 0, 0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .tollerud-noir-glow-bg,
+    .tollerud-noir-noise {
+      animation: none !important;
+    }
+  }
+
+  /* ═══ Grid Background ═══ */
+  .tollerud-grid-bg {
+    pointer-events: none;
+    background-image:
+      linear-gradient(var(--grid-color) 1px, transparent 1px),
+      linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
+    background-size: var(--grid-size) var(--grid-size);
+  }
+
+  /* ═══ Glass / Frosted ═══ */
+  .tollerud-glass {
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border-bottom: 1px solid var(--glass-border);
+  }
+
+  /* ═══ Focus Ring ═══ */
+  .tollerud-focus-ring:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  /* ═══ Glow ═══ */
+  .tollerud-glow {
+    box-shadow: 0 0 15px rgba(255,255,0,0.3), 0 0 30px rgba(255,255,0,0.1);
+  }
+
+  /* ═══ Skeleton ═══ */
+  .tollerud-skeleton {
+    background: linear-gradient(
+      90deg,
+      var(--muted) 25%,
+      var(--tollerud-noir-600) 50%,
+      var(--muted) 75%
+    );
+    background-size: 200% 100%;
+    animation: tollerud-skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: var(--radius);
+  }
+  @keyframes tollerud-skeleton-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  /* ═══ Display Heading ═══ */
+  .tollerud-display {
+    font-weight: 600;
+    letter-spacing: -0.045em;
+    line-height: 0.95;
+    color: var(--foreground);
+  }
+  .tollerud-display--secondary {
+    letter-spacing: -0.035em;
+    line-height: 1;
+  }
+  .tollerud-display--tertiary {
+    letter-spacing: -0.025em;
+    line-height: 1.1;
+  }
+
+  /* ═══ Status Indicator ═══ */
+  .tollerud-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+  .tollerud-status::before {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+  }
+  .tollerud-status--online::before { background: var(--success); box-shadow: 0 0 6px rgba(34,197,94,0.5); }
+  .tollerud-status--offline::before { background: var(--destructive); }
+  .tollerud-status--warning::before { background: var(--warning); box-shadow: 0 0 6px rgba(255,255,0,0.5); }
+  .tollerud-status--idle::before { background: var(--tollerud-noir-400); }
+
+  /* ═══ Code Block ═══ */
+  .tollerud-code-block {
+    background: var(--tollerud-noir-900);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    line-height: 1.7;
+    overflow-x: auto;
+    color: var(--tollerud-noir-200);
+  }
+  .tollerud-code-block .prompt { color: var(--tollerud-yellow); }
+  .tollerud-code-block .comment { color: var(--tollerud-noir-400); font-style: italic; }
+
+  /* ═══ Stat Card (for dashboards) ═══ */
+  .tollerud-stat {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem 1.25rem;
+  }
+  .tollerud-stat__label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+  }
+  .tollerud-stat__value {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--foreground);
+    margin-top: 0.125rem;
+  }
+  .tollerud-stat__change {
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-top: 0.125rem;
+  }
+  .tollerud-stat__change--up   { color: var(--success); }
+  .tollerud-stat__change--down { color: var(--destructive); }
+
+  /* ═══ Timeline ═══ */
+  .tollerud-timeline {
+    display: flex;
+    flex-direction: column;
+  }
+  .tollerud-timeline__item {
+    display: flex;
+    gap: 0.75rem;
+  }
+  .tollerud-timeline__marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 20px;
+    flex-shrink: 0;
+  }
+  .tollerud-timeline__dot-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+  }
+  .tollerud-timeline__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--tollerud-noir-500);
+    flex-shrink: 0;
+    z-index: 1;
+  }
+  .tollerud-timeline__dot--active {
+    animation: tollerud-timeline-pulse 2s infinite;
+  }
+  @keyframes tollerud-timeline-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,0,0.4); }
+    50%      { box-shadow: 0 0 0 6px rgba(255,255,0,0); }
+  }
+  .tollerud-timeline__line {
+    width: 1px;
+    flex: 1;
+    min-height: 12px;
+    background: linear-gradient(
+      180deg,
+      var(--tollerud-noir-600) 0%,
+      var(--tollerud-noir-600) 80%,
+      transparent 100%
+    );
+  }
+  .tollerud-timeline:not(.tollerud-timeline--active) .tollerud-timeline__dot--active {
+    animation: none;
+    box-shadow: 0 0 6px rgba(255,255,0,0.4);
+  }
+  .tollerud-timeline__icon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--tollerud-yellow);
+  }
+  .tollerud-timeline__content {
+    flex: 1;
+    min-width: 0;
+    padding-bottom: 1.25rem;
+  }
+  .tollerud-timeline__title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--foreground);
+  }
+  .tollerud-timeline__time {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .tollerud-timeline__description {
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    margin-top: 0.125rem;
+    line-height: 1.4;
+  }
+  .tollerud-timeline__meta {
+    font-size: 0.6875rem;
+    color: var(--text-muted);
+    background: var(--tollerud-noir-800);
+    padding: 0.125rem 0.375rem;
+    border-radius: 3px;
+    border: 1px solid var(--tollerud-noir-600);
+  }
+
+  /* ═══ Kbd (Keyboard Shortcut Chip) ═══ */
+  .tollerud-kbd {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+  }
+  .tollerud-kbd__key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    height: 22px;
+    padding: 0 5px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--tollerud-noir-200);
+    background: var(--tollerud-noir-800);
+    border: 1px solid var(--tollerud-noir-600);
+    border-radius: 4px;
+    box-shadow: 0 1px 0 var(--tollerud-noir-600);
+  }
+  .tollerud-kbd--sm .tollerud-kbd__key {
+    min-width: 18px;
+    height: 18px;
+    padding: 0 4px;
+    font-size: 10px;
+  }
+
+  /* ═══ Action Row ═══ */
+  .tollerud-action-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    text-align: left;
+    font-family: var(--font-sans);
+    transition: background var(--motion-duration-fast) var(--motion-ease-in-out);
+  }
+  .tollerud-action-row:hover,
+  .tollerud-action-row--highlighted {
+    background: var(--tollerud-noir-700);
+  }
+  .tollerud-action-row--disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .tollerud-action-row__icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--tollerud-yellow);
+  }
+  .tollerud-action-row__icon svg {
+    width: 18px;
+    height: 18px;
+  }
+  .tollerud-action-row__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  .tollerud-action-row__label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--foreground);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tollerud-action-row__description {
+    font-size: 12px;
+    color: var(--text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .tollerud-action-row__shortcut {
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  /* ═══ Command Menu ═══ */
+  .tollerud-cmd-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+    background: rgba(0, 0, 0, 0.6);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    animation: tollerud-cmd-overlay-in 150ms var(--motion-ease-out);
+  }
+  @keyframes tollerud-cmd-overlay-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  .tollerud-cmd {
+    position: fixed;
+    top: 15vh;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: var(--z-modal);
+    width: min(90vw, 640px);
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--surface-raised);
+    border: 1px solid var(--tollerud-noir-600);
+    border-radius: 12px;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+    animation: tollerud-cmd-in 200ms var(--motion-ease-out);
+    overflow: hidden;
+  }
+  @keyframes tollerud-cmd-in {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) scale(0.96) translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) scale(1) translateY(0);
+    }
+  }
+
+  .tollerud-cmd__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+  .tollerud-cmd__search-icon {
+    flex-shrink: 0;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+  }
+  .tollerud-cmd__input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: 16px;
+    line-height: 1.5;
+  }
+  .tollerud-cmd__input::placeholder {
+    color: var(--text-muted);
+  }
+
+  .tollerud-cmd__list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .tollerud-cmd__empty {
+    padding: 2rem 1rem;
+    text-align: center;
+    font-size: 14px;
+    color: var(--text-muted);
+  }
+  .tollerud-cmd__group {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+  .tollerud-cmd__group-label {
+    padding: 0.5rem 0.75rem 0.25rem;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--text-muted);
+  }
+
+  .tollerud-cmd__footer {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem 1rem;
+    border-top: 1px solid var(--border);
+    flex-shrink: 0;
+  }
+  .tollerud-cmd__hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .tollerud-cmd__hint-text {
+    font-size: 11px;
+    color: var(--text-muted);
+  }
+}
+
+@layer utilities {
+  /* ═══ Text utilities ═══ */
+  .text-balance { text-wrap: balance; }
+
+  /* ═══ Section container ═══ */
+  .tollerud-section {
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+/* ═══════════════════════════════════════════════
+   Tailwind v4 safelist — Alert tone classes
+   ═══════════════════════════════════════════════
+   These classes are used dynamically in Alert.tsx and would be missed
+   by @source scanning a pre-compiled dist file. Declaring them here
+   ensures Tailwind always generates them regardless of @source config.
+   ═══════════════════════════════════════════════ */
+
+/*
+@source inline("
+  bg-red-500/5 border-red-500/30 text-red-400
+  bg-blue-500/5 border-blue-500/30 text-blue-400
+  bg-green-500/5 border-green-500/30 text-green-400
+");
+*/
+
+@layer utilities {
+  .bg-red-500\/5   { background-color: rgb(239 68 68 / 0.05); }
+  .bg-blue-500\/5  { background-color: rgb(59 130 246 / 0.05); }
+  .bg-green-500\/5 { background-color: rgb(34 197 94 / 0.05); }
+  .border-red-500\/30   { border-color: rgb(239 68 68 / 0.3); }
+  .border-blue-500\/30  { border-color: rgb(59 130 246 / 0.3); }
+  .border-green-500\/30 { border-color: rgb(34 197 94 / 0.3); }
+  .text-red-400   { color: rgb(248 113 113); }
+  .text-blue-400  { color: rgb(96 165 250); }
+  .text-green-400 { color: rgb(74 222 128); }
+}