@charset "UTF-8";
:root {
  --accent: #4CAFEF;
  --accent-700: #007ACC;
  --accent-700-hover: #005FA3;
  --background: #121212;
  --bg-0: #000;
  --bg-1: #1F2020;
  --bg-2: #1F1F1F;
  --bg-3: #2A2D2D;
  --black1: black;
  --blue: #3182CE;
  --blue1: #007aff;
  --blueShadow1: #2196f3;
  --dt-leaderboard: #e85252;
  --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a);
  --gray1: #8e8e93;
  --gray2: #636366;
  --gray3: #48484a;
  --gray4: #3a3a3c;
  --gray5: #2c2c2e;
  --gray6: #1c1c1e;
  --green: #4ADE80;
  --green-bg: #2D5A3D;
  --green1: #34c759;
  --left-msg-bg: white;
  --lightBlue1: #4bbaff;
  --login-container-bg: #1e1e1e;
  --msger-send-btn-bg: blue;
  --msger-send-btn-hover-bg: darkblue;
  --my-custom-cat: #02375a;
  --my-custom-dog: #cafff3;
  --orange: #ED8936;
  --panel: #2B2B2B;
  --popup-bg: #222;
  --red: #E53E3E;
  --right-msg-bg: lightBlue1;
  --status-indicator-base-bg: rgba(255, 255, 255, 0.05);
  --status-indicator-base-border: rgba(255, 255, 255, 0.1);
  --status-indicator-error-bg: rgba(220, 53, 69, 0.2);
  --status-indicator-error-border: rgba(220, 53, 69, 0.3);
  --status-indicator-error-color: #dc3545;
  --status-indicator-pending-bg: rgba(255, 193, 7, 0.2);
  --status-indicator-pending-border: rgba(255, 193, 7, 0.3);
  --status-indicator-pending-color: #ffc107;
  --status-indicator-success-bg: rgba(40, 167, 69, 0.2);
  --status-indicator-success-border: rgba(40, 167, 69, 0.3);
  --status-indicator-success-color: #28a745;
  --success-green: #28A745;
  --surface: #333;
  --teal: #38B2AC;
  --text: #F0F0F0;
  --text-muted: #aaa;
  --toggle-btn-bg: green;
  --toggle-btn-hover-bg: darkgreen;
  --validation-error-color: #ef4444;
  --validation-focus-color: #6366f1;
  --validation-success-color: #10b981;
  --warn: #FBBF24;
  --warn-bg: #5A3D2D;
  --white1: white;
  --white2: rgba(255, 255, 255, 0.87);
  --white3: #e1e1e6;
  --ocs-game-panel-bg: rgba(13, 13, 26, 0.92);
  --ocs-game-accent: #4ecca3;
  --ocs-game-text: #e0e0e0;
  --ocs-game-muted: #c7f2d4;
  --ocs-game-surface-alt: #1a1a2e;
  --ocs-game-surface-contrast: #0d0d1a;
  --ocs-game-overlay: rgba(13, 13, 26, 0.72);
  --ocs-game-panel-selected-bg: #2a2a4a;
  --ocs-game-selected-border: #7effff;
  --ocs-game-score-accent: #f59e0b; }

/**
 * Design System Variables
 * Centralized spacing, sizing, and breakpoint constants
 * Use these throughout SCSS files for consistency
 */
/**
 * Responsive text with automatic mobile scaling
 * @param {Number} $size - Desktop font size
 * @param {Number} $scale - Mobile scale factor (default: 0.8)
 */
/**
 * Responsive padding with automatic mobile scaling
 * @param {Number} $padding - Desktop padding
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Responsive spacing (padding or margin) with automatic mobile scaling
 * @param {String} $property - 'padding' or 'margin'
 * @param {Number} $spacing - Desktop spacing value
 * @param {Number} $reduction - Amount to reduce on mobile (default: 4px)
 */
/**
 * Form Mixins
 * Reusable form patterns for modals, widgets, and interactive components
 * All media queries are embedded in mixins for consistency
 */
/**
 * Modal Container
 * Centered container for modal content with responsive padding
 *
 * @param {Number} $min-width - Minimum width (default: 300px)
 * @param {Number} $max-width - Maximum width (default: 400px)
 * @param {Number} $padding - Inner padding (default: 24px)
 *
 * @example
 *   .my-modal-content {
 *     @include modal-container;
 *   }
 */
/**
 * Widget Container
 * Fixed/floating container for widgets like leaderboards
 *
 * @param {Number} $width - Container width (default: 350px)
 * @param {Number} $border-width - Border width (default: 2px)
 *
 * @example
 *   .my-widget {
 *     @include widget-container;
 *   }
 */
/**
 * Header Bar
 * Common header for modals and widgets
 *
 * @param {Number} $padding - Inner padding (default: 16px)
 * @param {Number} $font-size - Font size (default: 20px)
 *
 * @example
 *   .my-header {
 *     @include header-bar;
 *   }
 */
/**
 * Form Group
 * Label and input pair with consistent styling
 *
 * @param {Number} $margin-bottom - Space between groups (default: 16px)
 *
 * @example
 *   .form-group {
 *     @include form-group;
 *   }
 */
/**
 * Submit Button
 * Primary action button with responsive sizing
 *
 * @param {Number} $padding - Inner padding (default: 12px)
 *
 * @example
 *   .submit-btn {
 *     @include submit-button;
 *   }
 */
/**
 * Content Area
 * Scrollable content area with max height
 *
 * @param {Number} $max-height - Maximum height (default: 400px)
 *
 * @example
 *   .content-area {
 *     @include content-area;
 *   }
 */
/**
 * Button Container
 * Flex container for button groups
 *
 * @param {String} $direction - Flex direction (default: column)
 * @param {Number} $gap - Gap between items (default: 10px)
 *
 * @example
 *   .button-group {
 *     @include button-container;
 *   }
 */
/**
 * Action Button
 * Full-width button for modals/forms
 *
 * @param {Number} $padding - Inner padding (default: 12px 16px)
 *
 * @example
 *   .action-btn {
 *     @include action-button;
 *   }
 */
/**
 * Table Styles
 * Themed table with alternating rows
 *
 * @example
 *   .my-table {
 *     @include themed-table;
 *   }
 */
/**
 * Game Modal Content
 * Modal styling optimized for game interfaces with backdrop blur and gradients
 *
 * @param {Color} $border-color - Border accent color (default: var(--pref-accent-color))
 * @param {Number} $max-width - Maximum width (default: 600px)
 * @param {Number} $padding - Inner padding (default: 30px)
 *
 * @example
 *   #cheatsModal .modal-content {
 *     @include game-modal-content;
 *   }
 */
/**
 * Game Modal Header
 * Header section for game modals with gradient accents
 *
 * @param {Color} $accent-color - Accent color for gradient (default: var(--pref-accent-color))
 * @param {Number} $padding-bottom - Bottom spacing (default: 20px)
 *
 * @example
 *   .modal-header {
 *     @include game-modal-header;
 *   }
 */
/**
 * Game Modal Body
 * Content area for game modals with auto-scrolling
 *
 * @param {Number} $max-height - Maximum height before scrolling (default: 400px)
 * @param {Number} $padding - Inner padding (default: 20px)
 *
 * @example
 *   .modal-body {
 *     @include game-modal-body;
 *   }
 */
/**
 * Game Modal Animation Keyframes
 * Slide-in animation for game modals
 */
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-30px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
/**
 * Container Mixins
 * Reusable container patterns for grouping and organizing content
 */
/**
 * Main Container
 * Top-level wrapper for a complete lesson/activity section
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 2rem)
 *
 * @example
 *   .code-runner-container {
 *     @include main-container;
 *   }
 *
 *   .lesson-container {
 *     @include main-container(3rem);
 *   }
 */
/**
 * Sub Container
 * Groups related elements with subtle border and styling
 *
 * @param {Number} $margin-bottom - Bottom margin (default: 20px)
 *
 * @example
 *   .editor-container {
 *     @include sub-container;
 *   }
 *
 *   .output-container {
 *     @include sub-container(15px);
 *   }
 */
/**
 * Inline Container
 * Lightweight container for inline grouping without heavy styling
 *
 * @param {String} $display - Display type (default: flex)
 * @param {Number} $gap - Gap between items (default: 1rem)
 *
 * @example
 *   .button-group {
 *     @include inline-container;
 *   }
 *
 *   .toolbar {
 *     @include inline-container(flex, 0.5rem);
 *   }
 */
/**
 * Button Mixins
 * Reusable button patterns for consistent styling across the application
 */
/**
 * Base Control
 * Common color and interaction styles for all controls
 * @private - Use specific mixins instead
 */
/**
 * Text Button
 * Standard rectangular button with text content
 *
 * @example
 *   .my-text-button {
 *     @include text-button;
 *   }
 */
/**
 * Icon Button
 * Square button designed for icon-only content
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .my-icon-button {
 *     @include icon-button;
 *   }
 *
 *   .my-large-icon-button {
 *     @include icon-button(48px, 12px);
 *   }
 */
/**
 * Emphasized Button
 * Button with inverted colors for primary actions
 *
 * @param {Number} $size - Button size (default: 38px)
 * @param {Number} $spacing - Margin left spacing (default: 8px)
 *
 * @example
 *   .ocs__btn.utility.run {
 *     @include emphasized-icon-button;
 *   }
 *
 * Behavior hooks should use HTML attributes such as data-hook="run"
 * rather than JS-specific class names.
 */
/**
 * Toggle Button
 * Button with icon that can rotate or change state
 *
 * @example
 *   .my-toggle {
 *     @include toggle-button;
 *   }
 */
/**
 * Select Control
 * Standardized dropdown/select styling
 *
 * @param {Number} $min-width - Minimum width (default: 150px)
 *
 * @example
 *   .languageSelect {
 *     @include select-control;
 *   }
 *
 *   .customSelect {
 *     @include select-control(200px);
 *   }
 */
/**
 * Game Navigation Button
 * Circular button with emoji/icon for game navigation
 *
 * @param {Color} $color - Button accent color (default: var(--pref-accent-color))
 * @param {Number} $size - Button diameter (default: 50px)
 *
 * @example
 *   .prevButton {
 *     @include game-nav-button;
 *   }
 *
 *   .customNavBtn {
 *     @include game-nav-button(#FF5733, 60px);
 *   }
 */
/**
 * Game Level Button
 * Button for level selection grids
 *
 * @param {Number} $size - Button size (default: 50px)
 *
 * @example
 *   .levelButton {
 *     @include game-level-button;
 *   }
 */
/**
 * Emoji Button
 * Button optimized for large emoji display
 *
 * @param {Number} $size - Button size (default: 60px)
 * @param {Number} $emoji-size - Emoji font size (default: 30px)
 *
 * @example
 *   .emojiBtn {
 *     @include emoji-button;
 *   }
 */
.ocs__links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap; }

.ocs__links--wide {
  gap: 1rem; }

.ocs__btn {
  background: var(--pref-bg-color);
  border: 1px solid var(--ui-border);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  cursor: pointer;
  transition: all 0.2s;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  text-decoration: none; }
  .ocs__btn:hover {
    background: var(--panel-mid);
    border-color: var(--pref-accent-color); }
  .ocs__btn:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  .ocs__btn:hover {
    opacity: 0.9;
    transform: scale(1.05); }
  @media (max-width: 768px) {
    .ocs__btn {
      height: 44px; } }

.ocs__btn--icon {
  gap: 0.5rem;
  font-weight: 700; }

.ocs__btn-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
  .ocs__btn-icon img,
  .ocs__btn-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor; }

.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.medium {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px;
  cursor: pointer; }

.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
  cursor: pointer; }

.ocs__btn.small {
  height: 28px;
  padding: 4px 10px;
  border-radius: 40px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.medium {
  height: 35px;
  padding: 7px 14px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.23px; }

.ocs__btn.large {
  height: 50px;
  padding: 14px 20px;
  border-radius: 12px;
  border-style: solid;
  border-width: 1px;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px; }

.ocs__btn.pill {
  border: none;
  border-radius: 999px; }

.ocs__btn.pill:not(.accent) {
  background: color-mix(in srgb, var(--pref-text-color) 6%, var(--pref-bg-color));
  border: 1px solid var(--ui-border);
  color: var(--pref-accent-color) !important; }
  .ocs__btn.pill:not(.accent):hover, .ocs__btn.pill:not(.accent):focus-visible {
    background: color-mix(in srgb, var(--pref-text-color) 12%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color) !important; }

.ocs__btn.accent {
  --ocs-btn-tone: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-accent-color); }

.ocs__btn.accent.fill {
  background: color-mix(in srgb, var(--pref-accent-color) 20%, var(--pref-bg-color));
  color: var(--pref-text-color); }
  .ocs__btn.accent.fill:hover, .ocs__btn.accent.fill:focus, .ocs__btn.accent.fill:active {
    background: color-mix(in srgb, var(--pref-accent-color) 30%, var(--pref-bg-color));
    border-color: var(--pref-accent-color);
    color: var(--pref-text-color); }

.ocs__btn.alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn.alert-red:hover, .ocs__btn.alert-red:focus, .ocs__btn.alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.fill:hover, .ocs__btn.alert-red.fill:focus, .ocs__btn.alert-red.fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn.alert-yellow:hover, .ocs__btn.alert-yellow:focus, .ocs__btn.alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.fill:hover, .ocs__btn.alert-yellow.fill:focus, .ocs__btn.alert-yellow.fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn.alert-green:hover, .ocs__btn.alert-green:focus, .ocs__btn.alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.fill:hover, .ocs__btn.alert-green.fill:focus, .ocs__btn.alert-green.fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.utility {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 0;
  line-height: 1;
  font-weight: 700; }
  .ocs__btn.utility::before {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1; }

.ocs__btn.utility.run {
  background: var(--pref-accent-color);
  border-color: var(--pref-accent-color);
  color: var(--pref-bg-color); }
  .ocs__btn.utility.run::before {
    content: '▶'; }

.ocs__btn.utility.pause {
  background: var(--warn);
  border-color: var(--warn);
  color: #000; }
  .ocs__btn.utility.pause::before {
    content: '⏸'; }

.ocs__btn.utility.stop {
  background: var(--red);
  border-color: var(--red);
  color: #fff; }
  .ocs__btn.utility.stop::before {
    content: '■'; }

.ocs__btn.utility.fullscreen,
.ocs__btn.utility.copy,
.ocs__btn.utility.save,
.ocs__btn.utility.clear,
.ocs__btn.utility.reset,
.ocs__btn.utility.copyOutput {
  background: var(--pref-bg-color);
  border-color: var(--ui-border);
  color: var(--pref-text-color); }

.ocs__btn.utility.fullscreen::before {
  content: '⛶'; }

.ocs__btn.utility.copy::before {
  content: '📋'; }

.ocs__btn.utility.save::before {
  content: '💾'; }

.ocs__btn.utility.clear::before {
  content: '🗑'; }

.ocs__btn.utility.reset::before {
  content: '↻'; }

.ocs__btn.utility.copyOutput::before {
  content: '⎘'; }

.ocs__btn.utility:disabled {
  opacity: 0.5;
  cursor: not-allowed; }

@media (max-width: 768px) {
  .ocs__btn.utility {
    width: 40px;
    min-width: 40px;
    height: 40px; }
    .ocs__btn.utility::before {
      font-size: 1rem; } }
.ocs__btn--alert-red {
  --ocs-btn-tone: var(--red);
  background: transparent;
  border-width: 2px;
  border-color: var(--red);
  color: var(--red); }
  .ocs__btn--alert-red:hover, .ocs__btn--alert-red:focus, .ocs__btn--alert-red:active {
    background: transparent;
    border-color: var(--red);
    color: var(--red); }

.ocs__btn.alert-red.ocs__btn--alert-fill,
.ocs__btn--alert-red.fill,
.ocs__btn--alert-red.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--red) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-red.ocs__btn--alert-fill:hover, .ocs__btn.alert-red.ocs__btn--alert-fill:focus, .ocs__btn.alert-red.ocs__btn--alert-fill:active,
  .ocs__btn--alert-red.fill:hover,
  .ocs__btn--alert-red.fill:focus,
  .ocs__btn--alert-red.fill:active,
  .ocs__btn--alert-red.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-red.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-red.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--red) 30%, var(--pref-bg-color));
    border-color: var(--red);
    color: var(--red); }

.ocs__btn--alert-yellow {
  --ocs-btn-tone: var(--warn);
  background: transparent;
  border-width: 2px;
  border-color: var(--warn);
  color: var(--warn); }
  .ocs__btn--alert-yellow:hover, .ocs__btn--alert-yellow:focus, .ocs__btn--alert-yellow:active {
    background: transparent;
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn.alert-yellow.ocs__btn--alert-fill,
.ocs__btn--alert-yellow.fill,
.ocs__btn--alert-yellow.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--warn) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-yellow.ocs__btn--alert-fill:hover, .ocs__btn.alert-yellow.ocs__btn--alert-fill:focus, .ocs__btn.alert-yellow.ocs__btn--alert-fill:active,
  .ocs__btn--alert-yellow.fill:hover,
  .ocs__btn--alert-yellow.fill:focus,
  .ocs__btn--alert-yellow.fill:active,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-yellow.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--warn) 30%, var(--pref-bg-color));
    border-color: var(--warn);
    color: var(--warn); }

.ocs__btn--alert-green {
  --ocs-btn-tone: var(--green);
  background: transparent;
  border-width: 2px;
  border-color: var(--green);
  color: var(--green); }
  .ocs__btn--alert-green:hover, .ocs__btn--alert-green:focus, .ocs__btn--alert-green:active {
    background: transparent;
    border-color: var(--green);
    color: var(--green); }

.ocs__btn.alert-green.ocs__btn--alert-fill,
.ocs__btn--alert-green.fill,
.ocs__btn--alert-green.ocs__btn--alert-fill {
  background: color-mix(in srgb, var(--green) 20%, var(--pref-bg-color)); }
  .ocs__btn.alert-green.ocs__btn--alert-fill:hover, .ocs__btn.alert-green.ocs__btn--alert-fill:focus, .ocs__btn.alert-green.ocs__btn--alert-fill:active,
  .ocs__btn--alert-green.fill:hover,
  .ocs__btn--alert-green.fill:focus,
  .ocs__btn--alert-green.fill:active,
  .ocs__btn--alert-green.ocs__btn--alert-fill:hover,
  .ocs__btn--alert-green.ocs__btn--alert-fill:focus,
  .ocs__btn--alert-green.ocs__btn--alert-fill:active {
    background: color-mix(in srgb, var(--green) 30%, var(--pref-bg-color));
    border-color: var(--green);
    color: var(--green); }

.ocs__container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-family: var(--pref-font-family);
  color: var(--pref-text-color); }

.ocs__container,
.ocs__container * {
  box-sizing: border-box; }

/**
 * Grid Mixins
 * Follows the same pattern as _buttons.scss:
 * - plain &:hover (no @media wrapper)
 * - theme vars: --pref-bg-color, --pref-text-color, --pref-accent-color, --panel, --panel-mid, --ui-border
 */
/**
 * Standard Grid — fixed columns, collapses to 2 on mobile.
 *
 * @param {Number} $cols - Column count (default: 3)
 * @param {Number} $gap  - Gap (default: $spacing-md)
 */
/**
 * Card Grid — auto-fill responsive.
 *
 * @param {Number} $min-cell - Min cell width before wrap (default: 200px)
 * @param {Number} $gap      - Gap (default: $spacing-lg)
 */
/**
 * Grid Card Cell — themed card with hover lift.
 */
/**
 * Calculator Grid — equal square tiles.
 *
 * @param {Number} $cols - Column count (default: 4)
 * @param {Number} $gap  - Gap (default: $spacing-sm)
 */
/**
 * Grid Key Cell — square themed tile.
 */
/**
 * Grid Key Cell — Accent (primary action tile, e.g. =).
 */
/**
 * Grid Key Cell — Muted (utility tile, e.g. clear).
 */
/**
 * Gallery Grid — auto-fill square tiles.
 *
 * @param {Number} $min-size - Min cell size (default: 160px)
 * @param {Number} $gap      - Gap (default: $spacing-sm)
 */
/**
 * Gallery Cell — square themed tile.
 */
.ocs__grid {
  width: 100%; }

.ocs__grid-cell {
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 15px;
  color: var(--pref-text-color); }
  .ocs__grid-cell--header {
    grid-column: 1 / -1;
    font-size: 18px;
    font-weight: 600;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
    border-color: var(--pref-accent-color); }
  .ocs__grid-cell--wide {
    grid-column: span 2; }
  .ocs__grid-cell--accent {
    background: color-mix(in srgb, var(--pref-accent-color) 15%, var(--panel));
    border-color: var(--pref-accent-color); }
  .ocs__grid-cell--muted {
    background: color-mix(in srgb, var(--pref-text-color) 4%, var(--panel));
    color: color-mix(in srgb, var(--pref-text-color) 70%, transparent); }

.ocs__grid--standard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .ocs__grid--standard {
      grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--standard.cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; }
    @media (max-width: 768px) {
      .ocs__grid--standard.cols-2 {
        grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--standard.cols-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px; }
    @media (max-width: 768px) {
      .ocs__grid--standard.cols-4 {
        grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--standard .ocs__grid-cell {
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; }
    .ocs__grid--standard .ocs__grid-cell:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
    .ocs__grid--standard .ocs__grid-cell:active {
      transform: scale(0.97); }

.ocs__grid--card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px; }
  @media (max-width: 768px) {
    .ocs__grid--card {
      grid-template-columns: 1fr; } }
  .ocs__grid--card .ocs__grid-cell {
    background: var(--panel);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 20px;
    color: var(--pref-text-color);
    transition: all 0.2s ease; }
    .ocs__grid--card .ocs__grid-cell:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
  .ocs__grid--card .ocs__thumbnail-link {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: inherit;
    text-decoration: none; }
    .ocs__grid--card .ocs__thumbnail-link h3 {
      margin: 0;
      min-width: 0;
      font-size: 16px;
      font-weight: 600;
      overflow-wrap: anywhere; }
  .ocs__grid--card .ocs__card-treatment {
    margin: 12px 0 0;
    color: var(--pref-text-color);
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7; }
  .ocs__grid--card .ocs__card-description,
  .ocs__grid--card .ocs__card-team {
    margin-top: 12px;
    color: var(--pref-text-color);
    font-size: 12px;
    opacity: 0.85; }
  .ocs__grid--card .ocs__card-team {
    font-size: 10px;
    opacity: 0.65; }
  .ocs__grid--card.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @media (max-width: 1024px) {
      .ocs__grid--card.cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 768px) {
      .ocs__grid--card.cols-3 {
        grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .ocs__grid--card .ocs__thumbnail-link {
    gap: 12px; } }
.ocs__grid--calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: fit-content;
  padding: 15px;
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 16px; }
  @media (max-width: 768px) {
    .ocs__grid--calculator {
      gap: 8px; } }
  .ocs__grid--calculator .ocs__grid-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    color: var(--pref-text-color);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    min-width: 60px; }
    .ocs__grid--calculator .ocs__grid-cell:hover {
      background: var(--panel-mid);
      border-color: var(--pref-accent-color);
      transform: scale(1.05); }
    .ocs__grid--calculator .ocs__grid-cell:active {
      transform: scale(0.95); }
    @media (max-width: 768px) {
      .ocs__grid--calculator .ocs__grid-cell {
        font-size: 16px;
        border-radius: 10px; } }
    .ocs__grid--calculator .ocs__grid-cell--accent {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--panel);
      border: 1px solid var(--ui-border);
      border-radius: 12px;
      color: var(--pref-text-color);
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      background: var(--pref-accent-color);
      border-color: var(--pref-accent-color);
      color: var(--pref-bg-color); }
      .ocs__grid--calculator .ocs__grid-cell--accent:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color);
        transform: scale(1.05); }
      .ocs__grid--calculator .ocs__grid-cell--accent:active {
        transform: scale(0.95); }
      @media (max-width: 768px) {
        .ocs__grid--calculator .ocs__grid-cell--accent {
          font-size: 16px;
          border-radius: 10px; } }
      .ocs__grid--calculator .ocs__grid-cell--accent:hover {
        opacity: 0.85;
        transform: scale(1.05); }
    .ocs__grid--calculator .ocs__grid-cell--muted {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--panel);
      border: 1px solid var(--ui-border);
      border-radius: 12px;
      color: var(--pref-text-color);
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
      user-select: none;
      background: var(--panel-mid);
      border-color: var(--ui-border); }
      .ocs__grid--calculator .ocs__grid-cell--muted:hover {
        background: var(--panel-mid);
        border-color: var(--pref-accent-color);
        transform: scale(1.05); }
      .ocs__grid--calculator .ocs__grid-cell--muted:active {
        transform: scale(0.95); }
      @media (max-width: 768px) {
        .ocs__grid--calculator .ocs__grid-cell--muted {
          font-size: 16px;
          border-radius: 10px; } }
    .ocs__grid--calculator .ocs__grid-cell--wide {
      grid-column: span 2;
      aspect-ratio: auto;
      padding: 0 20px; }

.ocs__grid--color {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .ocs__grid--color {
      grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--color .ocs__grid-cell {
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer; }
  .ocs__grid--color .ocs__grid-cell:nth-child(1):hover, .ocs__grid--color .ocs__grid-cell:nth-child(1):active {
    background: #a31f1f;
    border-color: #f04242;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(2):hover, .ocs__grid--color .ocs__grid-cell:nth-child(2):active {
    background: #a3771f;
    border-color: #f0b642;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(3):hover, .ocs__grid--color .ocs__grid-cell:nth-child(3):active {
    background: #8da31f;
    border-color: #d3f042;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(4):hover, .ocs__grid--color .ocs__grid-cell:nth-child(4):active {
    background: #1fa31f;
    border-color: #42f042;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(5):hover, .ocs__grid--color .ocs__grid-cell:nth-child(5):active {
    background: #1fa377;
    border-color: #42f0b6;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(6):hover, .ocs__grid--color .ocs__grid-cell:nth-child(6):active {
    background: #1f77a3;
    border-color: #42b6f0;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(7):hover, .ocs__grid--color .ocs__grid-cell:nth-child(7):active {
    background: #1f1fa3;
    border-color: #4242f0;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(8):hover, .ocs__grid--color .ocs__grid-cell:nth-child(8):active {
    background: #771fa3;
    border-color: #b642f0;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
  .ocs__grid--color .ocs__grid-cell:nth-child(9):hover, .ocs__grid--color .ocs__grid-cell:nth-child(9):active {
    background: #a31f77;
    border-color: #f042b6;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }

@keyframes ocs-holo-rotate {
  from {
    filter: hue-rotate(0deg) brightness(1.05); }
  to {
    filter: hue-rotate(360deg) brightness(1.05); } }
.ocs__grid--holographic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; }
  @media (max-width: 768px) {
    .ocs__grid--holographic {
      grid-template-columns: repeat(2, 1fr); } }
  .ocs__grid--holographic .ocs__grid-cell {
    background: #d41111;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 15px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    animation: ocs-holo-rotate 4s linear infinite;
    transition: transform 0.15s ease;
    cursor: default; }
    .ocs__grid--holographic .ocs__grid-cell:hover {
      transform: scale(1.06); }
    .ocs__grid--holographic .ocs__grid-cell:active {
      transform: scale(0.96); }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(1) {
    animation-delay: 0s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(2) {
    animation-delay: -0.333s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(3) {
    animation-delay: -0.666s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(4) {
    animation-delay: -0.999s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(5) {
    animation-delay: -1.332s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(6) {
    animation-delay: -1.665s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(7) {
    animation-delay: -1.998s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(8) {
    animation-delay: -2.331s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(9) {
    animation-delay: -2.664s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(10) {
    animation-delay: -2.997s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(11) {
    animation-delay: -3.33s; }
  .ocs__grid--holographic .ocs__grid-cell:nth-child(12) {
    animation-delay: -3.663s; }

.ocs__grid--gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px; }
  .ocs__grid--gallery .ocs__grid-cell {
    aspect-ratio: 1;
    background: var(--panel);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pref-text-color);
    padding: 0; }
    .ocs__grid--gallery .ocs__grid-cell:hover {
      border-color: var(--pref-accent-color);
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
    .ocs__grid--gallery .ocs__grid-cell--wide {
      grid-column: span 2;
      aspect-ratio: 2 / 1; }

.glass, .tintedGlass {
  backdrop-filter: blur(30px); }

.tintedGlass {
  background: var(--glass-tint); }

.glow, .glowOnHover {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .glow:after, .glowOnHover:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
img {
  border-radius: 12px; }

.ocs__image-frame {
  display: block;
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px; }

img.ocs__image-frame {
  object-fit: contain; }

.ocs__image-frame--cover {
  overflow: hidden;
  padding: 0; }

.ocs__image-frame--cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.ocs__image-frame--thumbnail {
  width: 7rem;
  height: 7rem;
  max-width: 7rem;
  flex: 0 0 7rem; }

@media (max-width: 768px) {
  .ocs__image-frame {
    padding: 8px; }

  .ocs__image-frame--thumbnail {
    width: 4.5rem;
    height: 4.5rem;
    max-width: 4.5rem;
    flex-basis: 4.5rem; } }
.ocs__table-wrap {
  width: 100%;
  overflow-x: auto; }

.ocs__table {
  width: 100%;
  border-collapse: collapse;
  color: var(--pref-text-color); }
  .ocs__table th,
  .ocs__table td {
    padding: 12px 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--ui-border, #333); }
    @media (max-width: 768px) {
      .ocs__table th,
      .ocs__table td {
        padding: 10px 6px;
        font-size: 13px; } }
  .ocs__table th {
    color: var(--text-muted, #aaa);
    font-weight: 600;
    background: var(--panel-mid, #252525);
    text-align: left; }
  .ocs__table td {
    color: var(--pref-text-color, #ddd); }
  .ocs__table tbody tr {
    background: var(--panel, #1a1a1a);
    transition: background 0.2s; }
    .ocs__table tbody tr:hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }
    .ocs__table tbody tr:nth-child(even) {
      background: var(--ui-bg, rgba(0, 0, 0, 0.06)); }
    .ocs__table tbody tr:nth-child(even):hover {
      background: var(--panel-mid, rgba(255, 255, 255, 0.05)); }
  .ocs__table th,
  .ocs__table td {
    color: var(--pref-text-color);
    border-color: var(--ui-border); }
  .ocs__table th {
    background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
    color: var(--pref-text-color); }
  .ocs__table tbody tr {
    background: var(--panel); }
    .ocs__table tbody tr:nth-child(even) {
      background: color-mix(in srgb, var(--pref-text-color) 4%, var(--panel)); }
    .ocs__table tbody tr:hover, .ocs__table tbody tr:nth-child(even):hover {
      background: color-mix(in srgb, var(--pref-accent-color) 10%, var(--panel)); }

input, textarea {
  color: var(--pref-text-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--pref-text-color) 12%, transparent));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--pref-text-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--pref-bg-color); }

select.ocs__input {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

select.ocs__input option {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

input, textarea {
  color: var(--pref-text-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--pref-text-color) 12%, transparent));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--pref-text-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--pref-bg-color); }

select.ocs__input {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

select.ocs__input option {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

.glass, .tintedGlass {
  backdrop-filter: blur(30px); }

.tintedGlass {
  background: var(--glass-tint); }

.glow, .glowOnHover {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .glow:after, .glowOnHover:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])),
textarea.ocs__input,
select.ocs__input {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--pref-bg-color) 88%, var(--pref-text-color) 12%);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  filter: none;
  padding: 0.5rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
  input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]))::placeholder,
  textarea.ocs__input::placeholder,
  select.ocs__input::placeholder {
    color: color-mix(in srgb, var(--pref-text-color) 60%, transparent);
    opacity: 1; }
  input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):focus-visible,
  textarea.ocs__input:focus-visible,
  select.ocs__input:focus-visible {
    border-color: var(--pref-accent-color);
    outline: 2px solid color-mix(in srgb, var(--pref-accent-color) 35%, transparent);
    outline-offset: 2px; }

input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):-webkit-autofill,
input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):-webkit-autofill:hover,
input.ocs__input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pref-text-color); }

input.ocs__input.gradient,
input.gradientInput {
  background-image: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a); }

.inputIconGroup > ion-icon {
  position: absolute;
  top: 50%;
  left: 10px;
  /* Adjust based on desired spacing */
  transform: translateY(-50%);
  font-size: 1.5rem;
  /* Adjust the size of the icon */
  color: color-mix(in srgb, var(--pref-text-color) 40%, transparent);
  pointer-events: none;
  /* Ensure the icon does not interfere with input focus */ }

input, textarea {
  color: var(--pref-text-color);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pref-text-color) 24%, transparent);
  filter: drop-shadow(0 10px 10px color-mix(in srgb, var(--pref-text-color) 12%, transparent));
  padding: 15px;
  transition: all 0.3s ease; }
  input:focus, textarea:focus {
    outline: none;
    border-color: var(--pref-accent-color); }
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--pref-text-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px var(--pref-bg-color); }

select.ocs__input {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

select.ocs__input option {
  color: var(--pref-text-color);
  background-color: var(--pref-bg-color); }

input.ocs__input.small,
input.smallInput {
  font-size: 0.8em; }

input.ocs__input.medium,
input.mediumInput {
  font-size: 1.1em; }

input.ocs__input.large,
input.largeInput {
  font-size: 1.5em; }

textarea.ocs__input.small,
textarea.smallInput {
  font-size: 0.8em;
  height: 8em; }

textarea.ocs__input.medium,
textarea.mediumInput {
  font-size: 1.1em;
  height: 12em; }

textarea.ocs__input.large,
textarea.largeInput {
  font-size: 1.5em;
  height: 24em; }

.ocs__toggle {
  --ocs-toggle-accent: var(--pref-accent-color);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pref-text-color);
  cursor: pointer; }
  .ocs__toggle--green {
    --ocs-toggle-accent: var(--pref-success-color, var(--pref-accent-color)); }

.ocs__toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0; }
  .ocs__toggle-input:checked + .ocs__toggle-track {
    background: var(--ocs-toggle-accent); }
    .ocs__toggle-input:checked + .ocs__toggle-track::before {
      transform: translateX(23px); }
  .ocs__toggle-input:focus-visible + .ocs__toggle-track {
    outline: 2px solid var(--ocs-toggle-accent);
    outline-offset: 2px; }
  .ocs__toggle-input:disabled ~ .ocs__toggle-track, .ocs__toggle-input:disabled ~ .ocs__toggle-label {
    cursor: not-allowed;
    opacity: 0.55; }

.ocs__toggle-track {
  position: relative;
  flex: 0 0 54px;
  width: 54px;
  height: 31px;
  border-radius: 31px;
  border: 1px solid var(--ui-border);
  background: var(--panel-mid);
  transition: background 0.2s ease; }
  .ocs__toggle-track::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--pref-text-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pref-text-color) 25%, transparent);
    transition: transform 0.2s ease; }

.ocs__toggle-label {
  user-select: none; }

.switch {
  display: flex;
  align-items: center;
  gap: 10px; }
  .switch .toggle {
    position: relative;
    width: 54px;
    height: 31px; }
  .switch input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0; }
    .switch input[type="checkbox"]:checked + .slider {
      background: var(--pref-accent-color); }
      .switch input[type="checkbox"]:checked + .slider.green {
        background: var(--pref-success-color, var(--pref-accent-color)); }
      .switch input[type="checkbox"]:checked + .slider::before {
        transform: translateX(23px); }
    .switch input[type="checkbox"]:focus-visible + .slider {
      outline: 2px solid var(--pref-accent-color);
      outline-offset: 2px; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border-radius: 31px;
  border: 1px solid var(--ui-border);
  background: var(--panel-mid);
  transition: background 0.2s ease; }
  .slider::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--pref-text-color);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--pref-text-color) 25%, transparent);
    transition: transform 0.2s ease; }

.label-text {
  color: var(--pref-text-color);
  user-select: none; }

.glass, .tintedGlass {
  backdrop-filter: blur(30px); }

.tintedGlass {
  background: var(--glass-tint); }

.glow, .glowOnHover {
  cursor: pointer;
  position: relative;
  z-index: 0; }
  .glow:before, .glowOnHover:before, .glow:after, .glowOnHover:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    z-index: -1; }
  .glow:before, .glowOnHover:before {
    background: linear-gradient(45deg, color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #ff4d6d), var(--pref-accent-color, #4bbaff), color-mix(in srgb, var(--pref-accent-color, #4bbaff) 65%, #7c3aed)); }
  .glow:hover:before, .glowOnHover:hover:before {
    opacity: 1; }
  .glow:after, .glowOnHover:after {
    background: var(--panel, #1c1c1e); }

.glowOnHover {
  color: var(--pref-text-color, white);
  background: var(--panel, #1c1c1e); }

@keyframes glowing {
  0%,
    100% {
    background-position: 0 0; }
  50% {
    background-position: 400% 0; } }
h1, h2, h3, h4 {
  color: var(--pref-text-color, white); }

p, li, ul, ol {
  color: var(--text-muted, var(--pref-text-color, #e1e1e6)); }

a {
  color: var(--pref-accent-color, #4bbaff); }
  a:hover {
    color: var(--pref-text-color, rgba(255, 255, 255, 0.87)); }

.ocs__capstone-nav {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ui-border); }

.ocs__card {
  background: var(--panel);
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  color: var(--pref-text-color); }

.ocs__capstone-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem; }

.ocs__section-title {
  margin: 0 0 1rem;
  color: var(--pref-text-color);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

.ocs__card > h2.ocs__section-title,
.ocs__card > h3.ocs__section-title,
.ocs__container > h2.ocs__section-title {
  font-size: 0.875rem; }

.ocs__badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 1rem;
  border: 1px solid var(--pref-accent-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  color: var(--pref-accent-color);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.ocs__description {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.7; }

.ocs__text {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65; }

.ocs__lead {
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 70ch; }

.ocs__callout {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel));
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6; }

.ocs__callout a {
  color: var(--pref-accent-color); }

.ocs__status {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--pref-accent-color);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pref-accent-color) 12%, var(--panel));
  color: var(--pref-accent-color);
  font-size: 0.72rem;
  font-weight: 600; }

.ocs__team {
  display: flex;
  flex-direction: column;
  gap: 0.1rem; }

.ocs__team-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase; }

.ocs__team-name {
  color: var(--pref-text-color);
  font-size: 0.85rem;
  font-weight: 600; }

.ocs__split,
.ocs__facts {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
  align-items: stretch; }

.ocs__split {
  grid-template-columns: 1fr 1fr; }

.ocs__facts {
  grid-template-columns: repeat(3, 1fr); }

.ocs__split .ocs__visual,
.ocs__facts .ocs__visual {
  width: 100%;
  height: 100%; }

.ocs__visual {
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel));
  color: var(--pref-text-color); }

.ocs__keypoints {
  display: grid;
  gap: 0.75rem; }

.ocs__keypoint {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: var(--text-muted);
  line-height: 1.5; }

.ocs__check {
  flex-shrink: 0;
  color: var(--pref-accent-color);
  font-weight: 700; }

.ocs__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
  margin: 1.25rem 0 0; }

.ocs__stat {
  padding: 1rem 0.75rem;
  text-align: center;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel)); }

.ocs__stat-value {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em; }

.ocs__stat-label {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.ocs__diagram {
  margin: 1rem 0 1.25rem;
  padding: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel)); }

.ocs__diagram .mermaid {
  display: flex;
  justify-content: center;
  margin: 0; }

.ocs__entity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none; }

.ocs__entity-list li {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--pref-text-color) 5%, var(--panel));
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5; }

.ocs__card-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(320px, 1.3fr) minmax(320px, 1.7fr);
  gap: 2rem;
  align-items: stretch;
  min-width: 0; }

.ocs__card-grid > * {
  min-width: 0; }

.ocs__nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ui-border); }

.ocs__nav-grid--in-card {
  margin: 1rem 0 0;
  padding-bottom: 0;
  border-bottom: none; }

.ocs__nav-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 15px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--pref-text-color);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }

.ocs__nav-card:visited {
  color: var(--pref-text-color); }

.ocs__nav-card:hover,
.ocs__nav-card.is-active {
  border-color: var(--pref-accent-color);
  background: color-mix(in srgb, var(--pref-accent-color) 10%, var(--panel)); }

.ocs__nav-card:hover {
  transform: translateY(-1px); }

.ocs__nav-card:hover {
  transform: translateY(-1px); }

.ocs__nav-card-kicker {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

html.user-theme-active .ocs__nav-card-kicker {
  color: var(--text-muted) !important; }

.ocs__nav-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25; }

html.user-theme-active .ocs__nav-card-title {
  color: var(--pref-accent-color) !important; }

.ocs__nav-card .ocs__status {
  font-size: 0.65rem; }

.ocs__nav-card .ocs__text {
  flex-basis: 100%;
  font-size: 0.82rem;
  line-height: 1.45; }

.ocs__nav-card-cta {
  margin-left: auto;
  color: var(--pref-accent-color);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase; }

.ocs-intelligence-infograph .ocs-intelligence-question {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0; }

.ocs-intelligence-infograph .ocs__team .ocs__text {
  margin: 0.35rem 0 0;
  text-align: center; }

.ocs-intelligence-infograph .ocs__diagram-stack {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem; }

.ocs-intelligence-infograph .ocs__diagram-block .ocs__diagram {
  margin-bottom: 0; }

.ocs-intelligence-infograph .ocs__diagram-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.06em; }

@media (min-width: 900px) {
  .ocs-intelligence-infograph .ocs__diagram-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; } }
.ocs-intelligence-infograph .ocs__diagram .mermaid,
.ocs-intelligence-infograph .ocs__diagram .mermaid * {
  box-sizing: content-box; }

.ocs-intelligence-infograph .ocs-intelligence-figure {
  margin: 0; }

.ocs-intelligence-infograph .ocs-intelligence-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35); }

.ocs-intelligence-infograph .ocs-intelligence-figure figcaption {
  margin-top: 0.55rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.45; }

.ocs-intelligence-infograph .ocs-intelligence-figure a {
  text-decoration: underline;
  text-underline-offset: 2px; }

.ocs-intelligence-infograph .ocs__table-wrap {
  margin-top: 1rem; }

.ocs-intelligence-infograph .ocs__table td:first-child {
  font-weight: 600;
  min-width: 12rem; }

.ocs-intelligence-infograph .ocs__table td:nth-child(2) {
  white-space: nowrap;
  width: 8rem; }

.ocs-intelligence-infograph .ocs-intelligence-gpu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  width: 100%;
  margin: 0.75rem 0 0.5rem; }

.ocs-intelligence-infograph .ocs-intelligence-gpu {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em; }

.ocs-intelligence-infograph .ocs__card-grid + .ocs__stats {
  margin-top: 1.75rem; }

.ocs-intelligence-infograph .ocs__card-grid + .ocs__stats + .ocs__section-title {
  margin-top: 1.75rem; }

@media (max-width: 520px) {
  .ocs-intelligence-infograph .ocs-intelligence-gpu-grid {
    grid-template-columns: repeat(2, 1fr); } }
.ocs-intelligence-infograph .ocs-intelligence-gift-kicker,
.ocs-intelligence-infograph .ocs-intelligence-cost-line {
  letter-spacing: 0.04em; }

.ocs-intelligence-infograph .ocs-intelligence-gift-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62); }

.ocs-intelligence-infograph .ocs-intelligence-cost-line {
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff; }

.ocs-intelligence-infograph .ocs-intelligence-gift .ocs__stats {
  margin-top: 1.75rem; }

.ocs-intelligence-infograph .ocs-intelligence-stage-status {
  display: inline-block;
  margin-top: 1rem; }

.ocs-intelligence-infograph .ocs-intelligence-stack-link {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }

.ocs-intelligence-infograph .ocs-intelligence-stack-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22); }

.ocs__entity-list strong {
  color: var(--pref-text-color); }

.ocs__hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem; }

.ocs__hub-card {
  display: block;
  padding: 1.5rem;
  border: 1px solid var(--ui-border);
  border-radius: 1rem;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }

.ocs__hub-card:hover {
  border-color: var(--pref-accent-color);
  background: color-mix(in srgb, var(--pref-accent-color) 8%, var(--panel));
  transform: translateY(-2px); }

.ocs__hub-card-title {
  display: block;
  margin: 0.25rem 0 0.5rem;
  color: var(--pref-text-color);
  font-size: 1.2rem;
  font-weight: 800; }

.ocs__hub-card > .ocs__hub-card-title {
  font-size: 1.2rem; }

.ocs__hub-card p {
  margin: 0;
  color: var(--text-muted); }

.ocs__phase-crumb {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none; }

.ocs__phase-crumb:hover {
  color: var(--pref-accent-color);
  text-decoration: underline; }

.ocs__pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem; }

.ocs__pager-link {
  display: block;
  padding: 1rem 1.25rem;
  border: 1px solid var(--ui-border);
  border-radius: 0.75rem;
  background: var(--panel);
  color: var(--text-muted);
  text-decoration: none; }

.ocs__pager-link:hover {
  border-color: var(--pref-accent-color);
  color: var(--pref-text-color); }

.ocs__pager-link.next {
  text-align: right; }

@media (max-width: 900px) {
  .ocs__facts {
    grid-template-columns: 1fr; }

  .ocs__card-grid {
    grid-template-columns: 1fr 1fr; }

  .ocs__nav-grid {
    grid-template-columns: 1fr; }

  .ocs__hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .ocs__card-grid,
  .ocs__split {
    grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .ocs__stats {
    grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .ocs__hub-grid,
  .ocs__pager {
    grid-template-columns: 1fr; } }
.labrats {
  --pref-bg-color: #121212;
  --pref-text-color: #E8EEF7;
  --pref-accent-color: #8CC8F2;
  --pref-success-color: #6FD39A;
  --pref-font-family: Atkinson Hyperlegible Next, Atkinson Hyperlegible, Segoe UI, sans-serif;
  --pref-font-size: 1.0625rem;
  --text-muted: #AEBBD0;
  --panel: #121212;
  --panel-mid: #111D33;
  --ui-bg: #111D33;
  --ui-border: #263652;
  --red: #FF8A80;
  --green: #6FD39A;
  --labrats-control-border: #6E7F9C;
  --labrats-tint: #13243F;
  --labrats-signal: #F5A00A;
  --labrats-on-signal: #0E1B33;
  --labrats-band: #060D1A;
  --labrats-on-band: #E8EEF7;
  --labrats-on-band-muted: #AEBBD0;
  color-scheme: dark; }

.labrats[data-theme="light"] {
  --pref-bg-color: #FFFFFF;
  --pref-text-color: #0E1B33;
  --pref-accent-color: #1B5A9C;
  --pref-success-color: #1E7A46;
  --pref-font-family: Atkinson Hyperlegible Next, Atkinson Hyperlegible, Segoe UI, sans-serif;
  --pref-font-size: 1.0625rem;
  --text-muted: #46546C;
  --panel: #FFFFFF;
  --panel-mid: #F3F6FA;
  --ui-bg: #F3F6FA;
  --ui-border: #D3DDE8;
  --red: #B42318;
  --green: #1E7A46;
  --labrats-control-border: #7B8799;
  --labrats-tint: #EEF6FC;
  --labrats-signal: #F5A00A;
  --labrats-on-signal: #0E1B33;
  --labrats-band: #0E1B33;
  --labrats-on-band: #E8EEF7;
  --labrats-on-band-muted: #AEBBD0;
  color-scheme: light; }

html:has(> body.labrats) {
  background: #121212; }

html:has(> body.labrats[data-theme="light"]) {
  background: #FFFFFF; }

body.labrats {
  margin: 0;
  background: var(--pref-bg-color);
  color: var(--pref-text-color);
  font-family: var(--pref-font-family);
  font-size: var(--pref-font-size);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility; }
  body.labrats *,
  body.labrats *::before,
  body.labrats *::after {
    box-sizing: border-box; }
  body.labrats h1,
  body.labrats h2,
  body.labrats h3 {
    margin: 0 0 0.5em;
    color: var(--pref-text-color);
    font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance; }
  body.labrats h1 {
    font-size: clamp(2.25rem, calc(1.4rem + 3.2vw), 4rem);
    line-height: 1.02; }
  body.labrats h2 {
    font-size: clamp(1.6rem, calc(1.2rem + 1.4vw), 2.25rem); }
  body.labrats h3 {
    font-size: 1.25rem;
    letter-spacing: -0.01em; }
  body.labrats h4 {
    margin: 0 0 0.4em;
    font-size: 1rem; }
  body.labrats p,
  body.labrats li,
  body.labrats dd,
  body.labrats dt,
  body.labrats address {
    color: var(--pref-text-color);
    font-style: normal; }
  body.labrats p {
    margin: 0 0 1em;
    max-width: 42rem; }
  body.labrats a {
    color: var(--pref-accent-color);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease; }
    body.labrats a:hover {
      color: var(--pref-text-color);
      text-decoration-color: var(--labrats-signal);
      text-decoration-thickness: 2px; }
  body.labrats a[href^="tel:"] {
    white-space: nowrap; }
  body.labrats :focus-visible {
    outline: 3px solid var(--pref-accent-color);
    outline-offset: 2px; }
  body.labrats img {
    max-width: 100%;
    height: auto;
    border-radius: 0; }
  body.labrats strong {
    font-weight: 700; }
  body.labrats .ocs__lead {
    max-width: 42rem;
    color: var(--text-muted);
    font-size: 1.1875rem;
    line-height: 1.55; }
  body.labrats .ocs__description,
  body.labrats .ocs__text {
    margin: 0 0 1em;
    max-width: 42rem; }
  body.labrats .ocs__callout {
    max-width: 42rem;
    border-radius: 8px;
    background: var(--labrats-tint);
    color: var(--pref-text-color);
    font-size: 1rem; }
  body.labrats .ocs__card {
    border-radius: 8px; }
  body.labrats .ocs__section-title {
    color: var(--text-muted);
    font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", sans-serif;
    letter-spacing: 0.04em; }

body.labrats .ocs__btn {
  min-height: 3rem;
  height: auto;
  padding: 0.6rem 1.15rem;
  border-radius: 6px;
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  body.labrats .ocs__btn:hover {
    transform: none;
    opacity: 1; }

body.labrats .ocs__btn.accent:not(.fill) {
  background: transparent;
  color: var(--pref-accent-color); }
  body.labrats .ocs__btn.accent:not(.fill):hover {
    background: var(--labrats-tint); }

body.labrats .ocs__btn.signal.fill {
  --ocs-btn-tone: var(--labrats-signal);
  border-color: var(--labrats-signal);
  background: var(--labrats-signal);
  color: var(--labrats-on-signal); }
  body.labrats .ocs__btn.signal.fill:hover, body.labrats .ocs__btn.signal.fill:focus-visible {
    border-color: var(--pref-text-color);
    background: color-mix(in srgb, var(--labrats-signal) 85%, var(--pref-text-color));
    color: var(--labrats-on-signal); }
  body.labrats .ocs__btn.signal.fill[aria-busy="true"] {
    cursor: progress;
    opacity: 0.7; }

body.labrats .labrats__skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10000;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--labrats-signal);
  color: var(--labrats-on-signal);
  font-weight: 700;
  transform: translateY(-200%); }
  body.labrats .labrats__skip:focus {
    transform: none; }

body.labrats .labrats__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  body.labrats *,
  body.labrats *::before,
  body.labrats *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }
.labrats .labrats__wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem; }
.labrats main[aria-busy="true"] {
  min-height: 70vh; }
.labrats .labrats__loading {
  color: var(--text-muted); }
.labrats .labrats__page-header {
  padding-block: 1.5rem 2.25rem;
  border-bottom: 1px solid var(--ui-border); }
  .labrats .labrats__page-header h1 {
    max-width: 22ch;
    margin-top: 1.75rem; }
  .labrats .labrats__page-header .ocs__lead {
    margin-bottom: 0; }
.labrats .labrats__body {
  padding-block: 2.5rem 4.5rem; }
.labrats .labrats__section {
  margin-block: 0 4rem; }
  .labrats .labrats__section:last-child {
    margin-bottom: 0; }
  .labrats .labrats__section > h2 {
    max-width: 26ch; }
.labrats .labrats__body > .labrats__split:not(.labrats__section) {
  margin-bottom: 4rem; }
.labrats .labrats__band {
  padding-block: 3rem;
  background: var(--labrats-tint);
  box-shadow: 0 0 0 100vmax var(--labrats-tint);
  clip-path: inset(0 -100vmax); }
.labrats .labrats__split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2rem 3.5rem;
  align-items: start; }
  .labrats .labrats__split--center {
    align-items: center; }
  .labrats .labrats__split--reverse > :first-child {
    order: 2; }
  .labrats .labrats__split--narrow-aside {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); }
  @media (max-width: 52rem) {
    .labrats .labrats__split {
      grid-template-columns: minmax(0, 1fr); }
      .labrats .labrats__split--reverse > :first-child {
        order: 0; }
      .labrats .labrats__split--narrow-aside {
        grid-template-columns: minmax(0, 1fr); } }
.labrats .labrats__stack > * + * {
  margin-top: 1rem; }
.labrats .labrats__lede-link {
  font-weight: 700; }
.labrats .labrats__redirect {
  padding-block: 4rem; }

.labrats .labrats__announcement {
  background: var(--labrats-band);
  color: var(--labrats-on-band);
  font-size: 0.9375rem; }
  .labrats .labrats__announcement[hidden] {
    display: none; }
  .labrats .labrats__announcement p {
    margin: 0;
    padding-block: 0.55rem;
    color: inherit; }
  .labrats .labrats__announcement a {
    color: inherit;
    font-weight: 700;
    text-decoration-color: var(--labrats-signal);
    text-decoration-thickness: 2px; }
.labrats .labrats__announcement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem; }
.labrats .labrats__announcement-close {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer; }
  .labrats .labrats__announcement-close:hover {
    background: color-mix(in srgb, var(--labrats-on-band) 14%, transparent); }
.labrats .labrats__header {
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 1px solid var(--ui-border);
  background: var(--pref-bg-color); }
.labrats .labrats__header-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.5rem; }
.labrats .labrats__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-right: auto;
  color: var(--pref-text-color);
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none; }
  .labrats .labrats__brand strong {
    font-weight: 800; }
  .labrats .labrats__brand img {
    width: 3rem;
    height: 3rem; }
  .labrats .labrats__brand:hover {
    color: var(--pref-text-color); }
.labrats .labrats__nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap; }
  .labrats .labrats__nav ul {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none; }
  .labrats .labrats__nav ul a {
    display: inline-block;
    padding-block: 0.6rem;
    border-bottom: 3px solid transparent;
    color: var(--pref-text-color);
    font-weight: 700;
    text-decoration: none; }
    .labrats .labrats__nav ul a:hover {
      border-bottom-color: var(--ui-border); }
    .labrats .labrats__nav ul a[aria-current] {
      border-bottom-color: var(--labrats-signal); }
  .labrats .labrats__nav ul a.labrats__nav-enroll {
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--labrats-signal); }
    .labrats .labrats__nav ul a.labrats__nav-enroll[aria-current] {
      box-shadow: 0 0 0 2px var(--pref-bg-color), 0 0 0 4px var(--labrats-signal); }
.labrats .labrats__menu-toggle {
  display: none; }
@media (max-width: 60rem) {
  .labrats .labrats__header-row {
    flex-wrap: wrap;
    gap: 0 1rem; }
  .labrats .labrats__header[data-menu-ready] .labrats__menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 1rem;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--pref-bg-color);
    color: var(--pref-text-color);
    font: 700 1rem "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", sans-serif;
    cursor: pointer; }
  .labrats .labrats__header[data-menu-ready] .labrats__nav {
    display: none; }
  .labrats .labrats__header[data-menu-ready][data-open] .labrats__nav {
    display: flex; }
  .labrats .labrats__nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    padding-bottom: 1rem; }
    .labrats .labrats__nav ul {
      flex-direction: column;
      align-items: stretch;
      gap: 0; }
    .labrats .labrats__nav ul a {
      display: block;
      padding: 0.85rem 0;
      border-bottom: 1px solid var(--ui-border);
      font-size: 1.125rem; }
      .labrats .labrats__nav ul a[aria-current] {
        border-bottom-color: var(--ui-border);
        box-shadow: inset 4px 0 0 var(--labrats-signal);
        padding-left: 0.85rem; }
    .labrats .labrats__nav ul a.labrats__nav-enroll {
      margin-top: 0.75rem;
      padding: 0.85rem 1rem;
      border: 1px solid var(--labrats-signal);
      text-align: center; }
      .labrats .labrats__nav ul a.labrats__nav-enroll[aria-current] {
        padding-left: 1rem;
        box-shadow: 0 0 0 2px var(--pref-bg-color), 0 0 0 4px var(--labrats-signal); }
  .labrats .labrats__nav-signin {
    padding-block: 0.85rem;
    font-size: 1.125rem;
    font-weight: 700; } }
.labrats .labrats__menu-icon {
  position: relative;
  display: inline-block;
  width: 1.1rem;
  height: 2px;
  background: currentColor; }
  .labrats .labrats__menu-icon::before, .labrats .labrats__menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease; }
  .labrats .labrats__menu-icon::before {
    top: -6px; }
  .labrats .labrats__menu-icon::after {
    top: 6px; }
.labrats .labrats__header[data-open] .labrats__menu-icon {
  background: transparent; }
  .labrats .labrats__header[data-open] .labrats__menu-icon::before {
    transform: translateY(6px) rotate(45deg); }
  .labrats .labrats__header[data-open] .labrats__menu-icon::after {
    transform: translateY(-6px) rotate(-45deg); }
.labrats .labrats__tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none; }
.labrats .labrats__tabs a {
  display: inline-block;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-decoration: none; }
  .labrats .labrats__tabs a:hover {
    color: var(--pref-text-color);
    border-bottom-color: var(--ui-border); }
  .labrats .labrats__tabs a[aria-current] {
    color: var(--pref-text-color);
    font-weight: 700;
    border-bottom-color: var(--labrats-signal); }

.labrats .labrats__contents {
  position: sticky;
  top: 4.5rem;
  z-index: 499;
  border-bottom: 1px solid var(--ui-border);
  background: var(--pref-bg-color); }
  .labrats .labrats__contents ul {
    display: flex;
    gap: 0 1.5rem;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none; }
  .labrats .labrats__contents a {
    display: inline-block;
    padding-block: 0.75rem;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.9375rem;
    white-space: nowrap;
    text-decoration: none; }
    .labrats .labrats__contents a:hover {
      color: var(--pref-text-color); }
    .labrats .labrats__contents a[aria-current] {
      color: var(--pref-text-color);
      font-weight: 700;
      border-bottom-color: var(--labrats-signal); }

html:has(> body.labrats) {
  scroll-padding-top: 8.5rem; }

.labrats .labrats__footer {
  margin-top: 0;
  padding-block: 3.5rem 1.5rem;
  background: var(--labrats-band);
  color: var(--labrats-on-band); }
  .labrats .labrats__footer h2 {
    margin-bottom: 0.75rem;
    color: var(--labrats-on-band);
    font-size: 1.05rem;
    letter-spacing: 0; }
  .labrats .labrats__footer p,
  .labrats .labrats__footer li,
  .labrats .labrats__footer address {
    color: var(--labrats-on-band-muted);
    font-size: 0.9375rem; }
  .labrats .labrats__footer p {
    margin-bottom: 0.6rem; }
  .labrats .labrats__footer a {
    color: var(--labrats-on-band); }
    .labrats .labrats__footer a:hover {
      color: var(--labrats-on-band);
      text-decoration-color: var(--labrats-signal); }
  .labrats .labrats__footer .ocs__input {
    background-color: var(--pref-bg-color); }
  .labrats .labrats__footer label,
  .labrats .labrats__footer .labrats__required {
    color: var(--labrats-on-band); }
  .labrats .labrats__footer .labrats__form-status,
  .labrats .labrats__footer .labrats__form-status[data-state] {
    color: var(--labrats-on-band); }
  .labrats .labrats__footer .labrats__field-error {
    color: var(--labrats-signal); }
.labrats .labrats__footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 2.5rem 3rem; }
  .labrats .labrats__footer-grid address {
    margin-bottom: 0.6rem; }
  @media (max-width: 60rem) {
    .labrats .labrats__footer-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  @media (max-width: 36rem) {
    .labrats .labrats__footer-grid {
      grid-template-columns: minmax(0, 1fr); } }
.labrats .labrats__footer-sitemap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  grid-column: 1 / -1;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--labrats-on-band) 18%, transparent); }
  .labrats .labrats__footer-sitemap ul {
    margin: 0;
    padding: 0;
    list-style: none; }
  .labrats .labrats__footer-sitemap li {
    margin-bottom: 0.35rem; }
  @media (min-width: 60rem) {
    .labrats .labrats__footer-sitemap {
      grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 36rem) {
    .labrats .labrats__footer-sitemap {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.labrats .labrats__footer-search {
  grid-column: 1 / -1; }
.labrats .labrats__search {
  display: grid;
  gap: 0.5rem;
  max-width: 42rem; }
  .labrats .labrats__search label {
    font-weight: 700; }
.labrats .labrats__search-row {
  display: flex;
  gap: 0.5rem; }
  .labrats .labrats__search-row .ocs__input {
    flex: 1;
    min-width: 0; }
.labrats .labrats__search-results {
  margin: 0;
  padding: 0;
  list-style: none; }
  .labrats .labrats__search-results li {
    padding-block: 0.3rem; }
.labrats .labrats__footer-signup {
  grid-column: 3;
  grid-row: 1; }
  @media (max-width: 60rem) {
    .labrats .labrats__footer-signup {
      grid-column: 1 / -1;
      grid-row: auto; } }
.labrats .labrats__footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--labrats-on-band) 18%, transparent); }
  .labrats .labrats__footer-base p {
    margin: 0; }
  .labrats .labrats__footer-base .ocs__toggle {
    color: var(--labrats-on-band);
    font-size: 0.9375rem; }
.labrats .labrats__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none; }

.labrats .labrats__hero {
  padding-block: 3rem 3.5rem;
  border-bottom: 1px solid var(--ui-border); }
  .labrats .labrats__hero h1 {
    max-width: 13ch;
    font-size: clamp(2.6rem, calc(1.2rem + 5vw), 5.25rem); }
  .labrats .labrats__hero .ocs__lead {
    font-size: 1.25rem; }
.labrats .labrats__hero-visit {
  margin-top: 1.75rem;
  color: var(--text-muted);
  font-size: 0.9375rem; }
.labrats .labrats__figure {
  margin: 0; }
  .labrats .labrats__figure img {
    display: block;
    width: 100%;
    border-radius: 8px; }
  .labrats .labrats__figure figcaption {
    margin-top: 0.6rem;
    color: var(--text-muted);
    font-size: 0.875rem; }
.labrats .labrats__grade {
  display: inline-block;
  padding: 0.15rem 0.55rem 0.15rem 0.5rem;
  border: 1px solid var(--ui-border);
  border-left: 4px solid var(--labrats-signal);
  border-radius: 2px;
  background: var(--pref-bg-color);
  color: var(--pref-text-color);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap; }
.labrats .labrats__programs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ui-border); }
.labrats .labrats__program {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.75rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--ui-border); }
  .labrats .labrats__program img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
    background: var(--panel-mid); }
  .labrats .labrats__program h3 {
    margin-bottom: 0.35rem;
    font-size: 1.5rem; }
    .labrats .labrats__program h3 a {
      color: var(--pref-text-color);
      text-decoration: none; }
      .labrats .labrats__program h3 a:hover {
        text-decoration: underline;
        text-decoration-color: var(--labrats-signal); }
  .labrats .labrats__program p {
    margin-bottom: 0.5rem; }
  @media (max-width: 40rem) {
    .labrats .labrats__program {
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem; }
      .labrats .labrats__program img {
        aspect-ratio: 16 / 9; } }
.labrats .labrats__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  align-items: center;
  margin-bottom: 0.6rem;
  color: var(--text-muted);
  font-size: 0.9375rem; }
.labrats .labrats__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--ui-border); }
  .labrats .labrats__facts > div {
    padding: 1rem 1.25rem 1rem 0;
    border-bottom: 1px solid var(--ui-border); }
  .labrats .labrats__facts dt {
    margin-bottom: 0.2rem;
    color: var(--text-muted);
    font-size: 0.875rem; }
  .labrats .labrats__facts dd {
    margin: 0;
    font-weight: 700; }
.labrats .labrats__notice {
  max-width: 42rem;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--labrats-signal);
  border-radius: 0 8px 8px 0;
  background: var(--labrats-tint); }
  .labrats .labrats__notice p {
    margin: 0; }
  .labrats .labrats__notice p + p {
    margin-top: 0.5rem; }
.labrats .labrats__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: var(--panel-mid); }
  .labrats .labrats__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0; }
  .labrats .labrats__embed--document {
    aspect-ratio: 3 / 4;
    max-width: 34rem; }
.labrats .labrats__widget {
  max-width: 44rem;
  margin-block: 1.5rem; }
  .labrats .labrats__widget iframe {
    width: 100%;
    min-height: 40rem;
    border: 0; }
.labrats .labrats__videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none; }
  .labrats .labrats__videos h3 {
    margin-top: 0.75rem;
    font-size: 1.05rem; }
  .labrats .labrats__videos--compact {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.labrats .labrats__cta {
  padding: 2.5rem;
  border-radius: 8px;
  background: var(--labrats-band);
  color: var(--labrats-on-band); }
  .labrats .labrats__cta h2,
  .labrats .labrats__cta p {
    color: var(--labrats-on-band); }
  .labrats .labrats__cta p {
    color: var(--labrats-on-band-muted); }
  .labrats .labrats__cta a:not(.ocs__btn) {
    color: var(--labrats-on-band); }
  @media (max-width: 40rem) {
    .labrats .labrats__cta {
      padding: 1.75rem 1.25rem; } }
.labrats .labrats__people {
  margin: 0;
  padding: 0;
  list-style: none; }
.labrats .labrats__person {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 2rem;
  padding-block: 2rem;
  border-top: 1px solid var(--ui-border); }
  .labrats .labrats__person img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px; }
  .labrats .labrats__person h2 {
    margin-bottom: 0.2rem;
    font-size: 1.5rem; }
  @media (max-width: 36rem) {
    .labrats .labrats__person {
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem; }
      .labrats .labrats__person img {
        max-width: 9rem; } }
.labrats .labrats__person--text {
  grid-template-columns: minmax(0, 1fr); }
.labrats .labrats__role {
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-weight: 700; }
.labrats .labrats__honor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: honor; }
  .labrats .labrats__honor li {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--ui-border);
    font-size: 1.125rem;
    counter-increment: honor; }
    .labrats .labrats__honor li::before {
      content: counter(honor);
      min-width: 1.5ch;
      color: var(--pref-accent-color);
      font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
      font-size: 1.75rem;
      font-weight: 800;
      line-height: 1; }
.labrats .labrats__motto {
  max-width: 18ch;
  margin: 0 0 1rem;
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(2rem, calc(1.2rem + 3vw), 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em; }
.labrats .labrats__outlets {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none; }
  .labrats .labrats__outlets img {
    max-height: 3rem;
    width: auto; }
.labrats .ocs__grid--card .ocs__grid-cell {
  border-radius: 8px; }
  .labrats .ocs__grid--card .ocs__grid-cell:hover {
    transform: none;
    box-shadow: none; }
.labrats .labrats__clipping {
  display: block;
  color: var(--pref-text-color);
  text-decoration: none; }
  .labrats .labrats__clipping img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--pref-bg-color); }
  .labrats .labrats__clipping span {
    display: block;
    margin-top: 0.6rem;
    font-weight: 700; }
  .labrats .labrats__clipping small {
    color: var(--text-muted);
    font-size: 0.875rem; }
.labrats .labrats__downloads {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ui-border); }
  .labrats .labrats__downloads li {
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--ui-border); }
  .labrats .labrats__downloads a {
    font-weight: 700; }
  .labrats .labrats__downloads small {
    color: var(--text-muted); }
.labrats .labrats__list {
  max-width: 42rem;
  margin: 0 0 1.25rem;
  padding-left: 1.2rem; }
  .labrats .labrats__list li {
    margin-bottom: 0.4rem;
    padding-left: 0.25rem; }
  .labrats .labrats__list li::marker {
    color: var(--pref-accent-color); }
.labrats .labrats__columns {
  columns: 2 12rem;
  column-gap: 2.5rem; }
  .labrats .labrats__columns li {
    break-inside: avoid; }

.labrats .labrats__videos .labrats__figure img {
  aspect-ratio: 16 / 9;
  object-fit: cover; }

.labrats .labrats__quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 2rem 3rem; }
.labrats blockquote {
  align-self: start;
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 4px solid var(--labrats-signal); }
  .labrats blockquote p {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.55; }
  .labrats blockquote footer {
    color: var(--text-muted);
    font-size: 0.9375rem; }
.labrats .labrats__pullquote p {
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em; }
.labrats .ocs__stats {
  margin-block: 1.5rem; }
.labrats .ocs__stat {
  border-radius: 8px;
  background: var(--pref-bg-color);
  text-align: left;
  padding: 1.1rem 1.25rem; }
.labrats .ocs__stat-value {
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  font-size: 2rem; }
.labrats .ocs__stat-label {
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted); }

.labrats .labrats__videos--compact {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }

.labrats .labrats__sessions {
  display: grid;
  gap: 2.5rem; }
.labrats .labrats__session {
  padding-top: 1.5rem;
  border-top: 2px solid var(--pref-text-color); }
  .labrats .labrats__session h3 {
    margin-bottom: 0.25rem;
    font-size: 1.375rem; }
  .labrats .labrats__session .ocs__table-wrap {
    margin-block: 1rem 1.25rem; }
.labrats .labrats__session-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem; }
.labrats .ocs__table {
  font-variant-numeric: tabular-nums; }
  .labrats .ocs__table th,
  .labrats .ocs__table td {
    padding: 0.7rem 1rem 0.7rem 0;
    font-size: 1rem;
    vertical-align: top; }
  .labrats .ocs__table th {
    background: transparent;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 700; }
  .labrats .ocs__table tbody tr,
  .labrats .ocs__table tbody tr:nth-child(even) {
    background: transparent; }
  .labrats .ocs__table tbody tr:hover,
  .labrats .ocs__table tbody tr:nth-child(even):hover {
    background: var(--labrats-tint); }
  .labrats .ocs__table td:first-child {
    font-weight: 700; }
.labrats .labrats__day {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 1.5rem;
  max-width: 42rem;
  margin: 0 0 1.5rem;
  font-variant-numeric: tabular-nums; }
  .labrats .labrats__day dt,
  .labrats .labrats__day dd {
    margin: 0;
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--ui-border); }
  .labrats .labrats__day dt {
    color: var(--text-muted);
    white-space: nowrap; }
  @media (max-width: 30rem) {
    .labrats .labrats__day {
      grid-template-columns: minmax(0, 1fr); }
      .labrats .labrats__day dt {
        padding-bottom: 0;
        border-bottom: 0; } }
.labrats .labrats__day-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 2.5rem; }
.labrats .labrats__price {
  max-width: 42rem; }

.labrats details {
  max-width: 42rem;
  margin-bottom: 1.25rem;
  border-block: 1px solid var(--ui-border); }
  .labrats details summary {
    padding-block: 0.85rem;
    font-weight: 700;
    cursor: pointer; }
  .labrats details ul {
    margin-top: 0.25rem; }

.labrats .labrats__form {
  max-width: 40rem; }
.labrats .labrats__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem; }
  @media (max-width: 34rem) {
    .labrats .labrats__form-grid {
      grid-template-columns: minmax(0, 1fr); } }
.labrats .labrats__form--compact .labrats__form-grid {
  gap: 0.75rem; }
.labrats .labrats__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0; }
  .labrats .labrats__field--wide {
    grid-column: 1 / -1; }
  .labrats .labrats__field label {
    font-weight: 700; }
.labrats .ocs__input {
  width: 100%;
  min-height: 3rem;
  border-color: var(--labrats-control-border);
  border-radius: 6px;
  background-color: var(--pref-bg-color);
  font-size: 1rem; }
  .labrats .ocs__input:hover {
    border-color: var(--pref-text-color); }
  .labrats .ocs__input[aria-invalid="true"] {
    border-color: var(--red); }
.labrats textarea.ocs__input {
  min-height: 8rem;
  resize: vertical; }
.labrats .labrats__required {
  margin-left: 0.25rem;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400; }
.labrats .labrats__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem; }
.labrats .labrats__field-error {
  margin: 0;
  color: var(--red);
  font-size: 0.875rem;
  font-weight: 700; }
.labrats .labrats__fieldset {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0; }
  .labrats .labrats__fieldset legend {
    margin-bottom: 0.85rem;
    padding: 0;
    font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
    font-size: 1.2rem;
    font-weight: 800; }
  .labrats .labrats__fieldset[aria-invalid="true"] .labrats__choices {
    outline: 2px solid var(--red);
    outline-offset: 4px;
    border-radius: 2px; }
.labrats .labrats__question {
  margin-bottom: 1rem; }
  .labrats .labrats__question > p:first-child {
    margin-bottom: 0.4rem;
    font-weight: 700; }
.labrats .labrats__choices {
  display: grid;
  gap: 0.25rem; }
  .labrats .labrats__choices label {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    min-height: 2.75rem;
    cursor: pointer; }
  .labrats .labrats__choices--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem; }
.labrats input[type="checkbox"]:not(.ocs__toggle-input),
.labrats input[type="radio"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  filter: none;
  accent-color: var(--pref-accent-color); }
.labrats .labrats__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden; }
.labrats .labrats__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-top: 1.5rem; }
.labrats .labrats__form-status {
  margin: 0;
  font-weight: 700; }
  .labrats .labrats__form-status[data-state="success"] {
    color: var(--pref-success-color); }
  .labrats .labrats__form-status[data-state="error"] {
    color: var(--red); }

.labrats .labrats__nav-signin {
  color: var(--pref-text-color);
  font-size: 0.9375rem;
  font-weight: 700; }
  .labrats .labrats__nav-signin[aria-current] {
    text-decoration-color: var(--labrats-signal);
    text-decoration-thickness: 2px; }
.labrats .labrats__signin,
.labrats .labrats__admin-signin {
  max-width: 26rem; }
.labrats .labrats__text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--pref-accent-color);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer; }
  .labrats .labrats__text-button--danger {
    color: var(--red); }
.labrats .labrats__assignments {
  display: grid;
  gap: 2rem; }
.labrats .labrats__assignment {
  padding-top: 1.5rem;
  border-top: 2px solid var(--pref-text-color); }
  .labrats .labrats__assignment h2,
  .labrats .labrats__assignment h3 {
    margin-bottom: 0.25rem;
    font-size: 1.375rem; }
  .labrats .labrats__assignment[data-state="reviewed"] {
    border-top-color: var(--pref-success-color); }
.labrats .labrats__assignment-instructions {
  white-space: pre-line; }
.labrats .labrats__turnins {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--ui-border); }
.labrats .labrats__turnin h4 {
  margin: 0;
  font-size: 1.05rem; }
.labrats .labrats__turnin[data-state="submitted"] .labrats__grade {
  border-left-color: var(--pref-accent-color); }
.labrats .labrats__console-status {
  min-height: 1.6em;
  margin-bottom: 1rem;
  font-weight: 700; }
.labrats .labrats__console-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--ui-border); }
  .labrats .labrats__console-tabs [role="tab"] {
    padding: 0.75rem 0;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--text-muted);
    font: 700 1rem "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", sans-serif;
    cursor: pointer; }
    .labrats .labrats__console-tabs [role="tab"]:hover {
      color: var(--pref-text-color); }
    .labrats .labrats__console-tabs [role="tab"][aria-selected="true"] {
      color: var(--pref-text-color);
      border-bottom-color: var(--labrats-signal); }
.labrats .labrats__console-panel > h2 {
  margin-bottom: 1rem; }
.labrats .labrats__panel-form {
  margin-bottom: 2rem; }
  .labrats .labrats__panel-form form {
    padding-bottom: 1.25rem; }
.labrats .labrats__console-search {
  max-width: 24rem;
  margin-bottom: 1rem; }
.labrats .labrats__console-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem; }
  .labrats .labrats__console-filters .labrats__field {
    min-width: 12rem; }
.labrats .labrats__compact-input {
  min-height: 2.5rem;
  padding: 0.35rem 0.6rem; }
.labrats .labrats__row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 1rem; }
.labrats .labrats__row-action {
  margin: 0;
  border: 0; }
  .labrats .labrats__row-action summary {
    padding: 0;
    color: var(--pref-accent-color); }
.labrats .labrats__inline-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem; }
.labrats .labrats__details {
  display: block;
  max-width: 28rem;
  font-size: 0.9375rem; }
.labrats .labrats__field--toggle {
  justify-content: flex-end; }