/* Do not force a global color-scheme here; themes declare it. */
/* color-scheme is set per theme in css/themes.css via data-color-scheme. */
html{ 
  -webkit-text-size-adjust: 100%; 
  text-size-adjust: 100%; 
  height: 100%; 
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* Smooth theme transition helper */
html.theme-transition,
html.theme-transition body,
html.theme-transition * {
  transition: background-color 280ms ease, color 280ms ease,
              border-color 280ms ease, outline-color 280ms ease,
              box-shadow 280ms ease, fill 280ms ease, stroke 280ms ease;
}

/* Inline prompt alert */
.prompt-inline-msg {
  display: inline-block;
  margin-left: 10px;
  color: var(--accent);
  opacity: 0;
  animation: promptFade 2.2s ease-in-out forwards;
  pointer-events: none;
}

@keyframes promptFade {
  0% { opacity: 0; transform: translateY(2px); }
  12% { opacity: 1; transform: translateY(0); }
  82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

/* Allow HTML scrolling on mobile when content requires it */
@media (max-width: 800px) {
  html.mobile-scroll-enabled { 
    overflow-y: auto !important; 
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Safari-specific fixes for mobile scrolling */
  @supports (-webkit-appearance: none) {
    html.mobile-scroll-enabled {
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translateZ(0);
    }
    
    html.mobile-scroll-enabled body.scroll-enabled {
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
}

*{ box-sizing: border-box; }
html,body{ 
  margin: 0; 
  padding: 0;
}
body{
  height: 100vh; 
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-x: auto; /* Allow horizontal scroll when needed */
  overflow-y: auto;
}
::selection{ background: var(--selection); color: var(--selection-fg); }
main.page{ display:block; }
.wrap{ 
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 16px; 
  /* Push content below iOS status bar / Dynamic Island when in standalone */
  padding-top: calc(16px + env(safe-area-inset-top, 0px) + 8px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  /* Remove min-height that forces scrolling */
  /* min-height: calc(100vh - 4vh); */
}

.line{ opacity:.7; margin:0 0 1ch 0; overflow-wrap: anywhere; word-break: break-word; }

.fastfetch{ 
  margin-bottom: 2ch;
  display: flex;
  align-items: flex-start;
  gap: 2ch;
}
.col{ display:flex; flex-direction:column; gap: 0; max-width: 60ch; flex: 0 0 auto; }
.fastfetch-ticker{
  flex: 0 0 var(--ticker-width, 44ch);
  max-width: min(100%, var(--ticker-width, 44ch));
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  position: relative;
  min-height: calc(var(--ff-rows, 13) * var(--ff-lineh, 1.45em));
  overflow: hidden;
  mask-image: linear-gradient(to left, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.fastfetch-ticker[hidden]{
  display: none !important;
  flex: 0 0 auto;
}
.fastfetch-ticker.width-full{
  flex: 1 1 auto;
  max-width: none;
}
.fastfetch-ticker-inner{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  font-size: 0.95em;
  white-space: nowrap;
}
.fastfetch-ticker-content{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  min-width: 0;
}
.fastfetch-ticker.mode-march .fastfetch-ticker-inner,
.fastfetch-ticker.mode-march .fastfetch-ticker-content{
  justify-content: flex-start;
}
.fastfetch-ticker.mode-march .fastfetch-ticker-content{
  white-space: pre;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.03em;
  cursor: default;
  text-align: left;
}
.fastfetch-ticker.mode-march .fastfetch-ticker-content.has-link{
  cursor: pointer;
}
.fastfetch-ticker.mode-march .fastfetch-ticker-content.has-link:hover{
  color: var(--ansi-green);
}
.fastfetch-ticker.ticker-static{
  mask-image: none;
  -webkit-mask-image: none;
}
.fastfetch-ticker.ticker-static .fastfetch-ticker-line{
  transform: none !important;
  transition: none !important;
}
.fastfetch-ticker-label{
  display: none;
}
.fastfetch-ticker-line{
  display: inline-flex;
  align-items: center;
  gap: 1ch;
  white-space: nowrap;
}
.fastfetch-ticker-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.fastfetch-ticker-link:hover,
.fastfetch-ticker-link:focus{
  text-decoration: underline;
  color: var(--ansi-green);
}
.fastfetch-ticker-title{
  color: var(--fg);
}
.fastfetch-ticker-age{
  color: var(--ansi-bright-black);
  font-size: 0.9em;
  letter-spacing: 0.04em;
}
.fastfetch-ticker-empty{
  opacity: 0.5;
  font-style: italic;
  font-size: 0.9em;
}
.hostline{ margin:0 0 .3ch 0; text-align:left; opacity:.9; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.dashes{ margin:0 0 1ch 0; color: var(--accent); }
.info-pre{
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Reserve constant vertical space; center actual lines via padding */
  --ff-rows: 13;           /* total possible rows */
  --ff-lineh: 1.45em;      /* line height unit (matches body line-height) */
  min-height: calc(var(--ff-rows) * var(--ff-lineh));
  /* Center remaining lines vertically inside reserved space */
  padding-top: max(0px, calc((var(--ff-rows) - var(--ff-lines, var(--ff-rows))) * var(--ff-lineh) / 2));
  padding-bottom: max(0px, calc((var(--ff-rows) - var(--ff-lines, var(--ff-rows))) * var(--ff-lineh) / 2));
}
.info-pre .k{ color: var(--accent); }
.info-pre .v{ color: var(--fg); }
.foot{ margin-top: 1.5ch; }
.output{ 
  margin: 1ch 0; 
  white-space: pre; /* Prevent wrapping, allow horizontal scroll */
  overflow-x: auto;
  max-width: 100%;
}
.promptline{ 
  display: flex; 
  gap: 1ch; 
  align-items: baseline; 
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 12px 0;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  z-index: 100;
  /* Ensure sticky works by adding border for visual debugging */
  border-bottom: 1px solid transparent;
}
.ps1{ color: var(--ansi-green); }
.cmdline{ flex:1; background: var(--input-bg, transparent); border: 1px solid var(--input-border, var(--ansi-bright-black)); border-radius: 3px; outline: none; color: var(--fg); font: inherit; padding: 4px 8px; caret-color: var(--cursor); }
input.cmdline::-webkit-contacts-auto-fill-button{ visibility: hidden; display:none !important; }

@media (max-width: 800px){
  .fastfetch{ flex-direction: column; }
  .fastfetch-ticker{ display: none !important; }
  .info-pre{ white-space: pre-wrap; }
  .dashes{ white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  .wrap{ 
    margin: 0 auto;
    padding: 12px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  
  /* Mobile: Natural content flow with sticky prompt */
  
  /* Use compact last login format on mobile, but ensure Safari compatibility */
  #lastlogin::before {
    content: attr(data-compact);
  }
  #lastlogin {
    font-size: 0;
  }
  
  /* Safari mobile fix - ensure login line is visible when data-compact doesn't exist */
  #lastlogin:not([data-compact])::before {
    content: none;
  }
  #lastlogin:not([data-compact]) {
    font-size: inherit;
  }
  
  /* Larger mobile font size */
  body { font-size: 16px; line-height: 1.5; }
  
  /* Larger touch targets for input */
  .cmdline { 
    padding: 12px 8px;
    font-size: 16px;
    min-height: 24px;
  }
  
  /* Larger suggestion buttons on mobile */
  .suggestion-item {
    padding: 8px 12px;
    margin: 4px 2px;
    display: inline-block;
    background-color: var(--suggest-bg, var(--ansi-bright-black));
    border-radius: 6px;
    font-size: 15px;
  }
  
  /* More readable version number on mobile */
  .version {
    font-size: 12px;
    opacity: 0.7;
    top: 8px;
    right: 8px;
  }
  
  /* More generous spacing on mobile */
  .fastfetch { margin-bottom: 2ch; }
  .line { margin-bottom: 1ch; }
  .ps1 { font-size: 16px; }
  
  /* More readable system info */
  .info-pre { font-size: 16px; }
  .hostline { font-size: 16px; }
  /* Lock vertical scroll by default, enable only when needed */
  body { height: auto; min-height: 100vh; overflow-y: hidden; overflow-x: auto; }
  
  /* Enable scroll when content requires it - higher specificity and Safari support */
  body.scroll-enabled { 
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  
  /* Ensure HTML also allows scrolling when needed */
  html.mobile-scroll-enabled body.scroll-enabled {
    height: auto;
    min-height: 100vh;
  }
  /* Prompt line wraps nicely on narrow screens */
  .promptline { 
    flex-wrap: wrap;
    margin: 0 -12px; /* Match mobile padding */
    padding-left: 12px;
    padding-right: 12px;
  }
  .cmdline { min-width: 0; flex: 1 1 240px; }
  /* Mobile suggest area */
  .suggest {
    margin: 0 -12px; /* Match mobile padding */
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Avoid overflow for hostline and values */
  .hostline { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
  .info-pre .v { overflow-wrap: anywhere; word-break: break-word; }
}

/* Natural Document Flow: Allow page scrolling with sticky prompt */
.wrap {
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 16px; 
  /* Push content below iOS status bar / Dynamic Island when in standalone */
  padding-top: calc(16px + env(safe-area-inset-top, 0px) + 8px);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* Surface normalization: keep backgrounds unified with page */
.wrap,
.header-area,
.content-area,
.content,
.fastfetch,
.info,
.settings,
.testbench {
  background: transparent;
}

/* Ensure common code blocks don't introduce different backgrounds */
.content pre,
.testbench .tb-pre {
  background: transparent;
}

.header-area {
  /* Natural block flow - fastfetch can scroll away */
}

.content-area {
  /* Natural block flow - content can extend full height */
  margin-top: 1ch;
}

.content { 
  /* Enable horizontal scroll for wide content */
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--ansi-bright-black) var(--ansi-black);
}

/* Content horizontal scrollbar styling */
.content::-webkit-scrollbar {
  height: 8px;
}

.content::-webkit-scrollbar-track {
  background: var(--ansi-black);
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb {
  background: var(--ansi-bright-black);
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Ensure pre elements in content scroll horizontally */
.content pre {
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}

.suggest{ 
  margin-top: .5ch; 
  color: var(--accent); 
  opacity: .8; 
  /* Split layout: fixed left, scrollable right */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  position: sticky;
  top: 68px; /* Position below sticky prompt (updated padding) */
  background: var(--bg);
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  z-index: 99;
}

.suggest::-webkit-scrollbar {
  height: 8px;
}

.suggest::-webkit-scrollbar-track {
  background: var(--ansi-black);
  border-radius: 4px;
  margin: 0 4px;
}

.suggest::-webkit-scrollbar-thumb {
  background: var(--ansi-bright-black);
  border-radius: 4px;
  border: 1px solid var(--ansi-black);
}

.suggest::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  border-color: var(--ansi-bright-black);
}

.suggest::-webkit-scrollbar-thumb:active {
  background: var(--ansi-white);
}

/* New split layout children */
.suggest-fixed {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.suggest-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar to prevent covering one-line content */
  scrollbar-width: none; /* Firefox */
  white-space: nowrap; /* prevent item wrapping inside scroller */
}

/* Hide WebKit scrollbars for the suggest scroller */
.suggest-scroll::-webkit-scrollbar { display: none; height: 0; }

.suggestion-item{ 
  cursor: pointer; 
  padding: 2px 6px;
  border-radius: 3px;
  transition: background-color 0.15s ease;
  /* Better touch targets */
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;            /* do not shrink */
  white-space: nowrap;        /* keep labels on one line */
  word-break: keep-all;       /* avoid breaking at hyphens */
  -webkit-hyphens: none;      /* Safari/iOS */
  hyphens: none;              /* standard */
}
.suggestion-item:hover{ 
  background-color: var(--ansi-bright-black); 
  color: var(--ansi-white);
}
.suggestion-item.selected{ 
  background-color: var(--accent); 
  color: var(--bg);
}

/* Smart suggestion enhancements */
.suggestions-wrapper {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  overflow: visible; /* scrolling handled by parent */
  width: max-content; /* allow single-line track */
  scrollbar-width: thin;
  scrollbar-color: var(--ansi-bright-black) var(--ansi-black);
}

.suggestions-wrapper::-webkit-scrollbar {
  height: 4px;
}

.suggestions-wrapper::-webkit-scrollbar-track {
  background: var(--ansi-black);
}

.suggestions-wrapper::-webkit-scrollbar-thumb {
  background: var(--ansi-bright-black);
  border-radius: 2px;
}

.suggestions-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--ansi-white);
}

.suggestion-favorite {
  background-color: var(--ansi-yellow) !important;
  color: var(--ansi-black) !important;
  font-weight: bold;
  position: relative;
}

.suggestion-favorite::before {
  content: '★';
  font-size: 0.8em;
  margin-right: 2px;
}

.suggestion-favorite:hover {
  background-color: var(--ansi-bright-yellow) !important;
  color: var(--ansi-black) !important;
}

.suggestion-favorite.selected {
  background-color: var(--ansi-bright-yellow) !important;
  color: var(--ansi-black) !important;
  box-shadow: 0 0 0 2px var(--accent);
}

.suggestion-clear {
  background-color: var(--ansi-red) !important;
  color: var(--ansi-white) !important;
}

.suggestion-clear:hover {
  background-color: var(--ansi-bright-red) !important;
  color: var(--ansi-white) !important;
}

.suggestion-clear.selected {
  background-color: var(--ansi-bright-red) !important;
  color: var(--ansi-white) !important;
  box-shadow: 0 0 0 2px var(--ansi-white);
}

/* Contact page and content styling */
.info {
  font-family: inherit;
  line-height: 1.6;
}

.info > div {
  margin: 0.5ch 0;
  display: flex;
  align-items: baseline;
}

.info .k {
  color: var(--accent);
  font-weight: normal;
  margin-right: 1ch;
  min-width: 8ch;
}

.info .v {
  color: var(--fg);
}

.info a {
  color: var(--ansi-cyan);
  text-decoration: none;
}

.info a:hover {
  color: var(--ansi-bright-cyan);
  text-decoration: underline;
}

/* Notes layout overrides to ensure compact header on all loads */
.info.notes-wrap .notes-list { display: flex; flex-direction: column; gap: 6px; }
.info.notes-wrap .note-item { display: flex; flex-direction: column; gap: 6px; }
.info.notes-wrap .note-header { display: flex; align-items: center; gap: 8px; }
.info.notes-wrap .note-header .note-meta { flex: 1 1 auto; }
.info.notes-wrap .note-actions { display: inline-flex; gap: 6px; margin-left: 0 !important; }
.info.notes-wrap .note-actions .notes-btn { padding: 4px 8px; }


/* Version tracker */
.version {
  position: fixed;
  top: 8px;
  right: 8px;
  font-size: 8px;
  color: var(--ansi-bright-black);
  opacity: 0.3;
  z-index: 1000;
  pointer-events: none;
  font-family: inherit;
}

/* Global input fallbacks for light themes (ensure high contrast) */
:root[data-color-scheme="light"]{
  --input-bg: #ffffff; /* command line and non-.ui inputs */
  --input-border: color-mix(in oklab, var(--fg) 25%, var(--bg));
}

/* Weather emoji styling and animations */
.weather-emoji {
  display: inline-block;
  font-size: 1em;
  margin-left: 0.5ch;
}

/* Sun animation - gentle rotation */
.weather-sun {
  animation: rotate 8s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Cloudy animation - gentle float */
.weather-cloudy {
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

/* Rain animation - vertical movement */
.weather-rain, .weather-drizzle, .weather-showers {
  animation: rain 2s ease-in-out infinite;
}

@keyframes rain {
  0%, 100% { transform: translateY(0px); }
  25% { transform: translateY(1px); }
  75% { transform: translateY(-1px); }
}

/* Snow animation - gentle sway */
.weather-snow {
  animation: snow 3s ease-in-out infinite;
}

@keyframes snow {
  0%, 100% { transform: translateX(0px) translateY(0px); }
  25% { transform: translateX(-1px) translateY(1px); }
  75% { transform: translateX(1px) translateY(-1px); }
}

/* Storm animation - flash effect */
.weather-storm {
  animation: storm 2s ease-in-out infinite;
}

@keyframes storm {
  0%, 90%, 100% { opacity: 0.9; }
  5%, 15% { opacity: 0.4; }
}

/* Fog animation - fade in/out */
.weather-fog {
  animation: fog 3s ease-in-out infinite;
}

@keyframes fog {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
}

/* Settings: Reduce motion preference (user toggle) */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* Preloader dots (shared across apps) */
@keyframes dotPulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
.pre-dots span{
  display: inline-block;
  margin: 0 .12ch;
  animation: dotPulse 1s ease-in-out infinite;
}
/* Classic 3-dot */
.pre-dots span:nth-child(2){ animation-delay: .2s }
.pre-dots span:nth-child(3){ animation-delay: .4s }

/* 2 sets of 3 (6 total) with continuous wave */
.pre-dots-6 span:nth-child(1){ animation-delay: 0s }
.pre-dots-6 span:nth-child(2){ animation-delay: .166s }
.pre-dots-6 span:nth-child(3){ animation-delay: .333s }
.pre-dots-6 span:nth-child(4){ animation-delay: .5s }
.pre-dots-6 span:nth-child(5){ animation-delay: .666s }
.pre-dots-6 span:nth-child(6){ animation-delay: .833s }
/* visual gap between triplets */
.pre-dots-6 span:nth-child(4){ margin-left: .6ch }

/* 3 sets of 3 (9 total) with continuous wave */
.pre-dots-9 span:nth-child(1){ animation-delay: 0s }
.pre-dots-9 span:nth-child(2){ animation-delay: .111s }
.pre-dots-9 span:nth-child(3){ animation-delay: .222s }
.pre-dots-9 span:nth-child(4){ animation-delay: .333s }
.pre-dots-9 span:nth-child(5){ animation-delay: .444s }
.pre-dots-9 span:nth-child(6){ animation-delay: .555s }
.pre-dots-9 span:nth-child(7){ animation-delay: .666s }
.pre-dots-9 span:nth-child(8){ animation-delay: .777s }
.pre-dots-9 span:nth-child(9){ animation-delay: .888s }
/* visual gap between triplets */
.pre-dots-9 span:nth-child(4),
.pre-dots-9 span:nth-child(7){ margin-left: .6ch }

/* --- Reusable UI Controls (scoped by .ui container) --- */
.ui{
  --ui-bg: var(--ansi-black);
  --ui-fg: var(--fg);
  --ui-border: var(--ansi-bright-black);
  --ui-hover: var(--ansi-bright-black);
  --ui-focus: var(--accent);
  --slider-track: var(--ansi-bright-black);
  --slider-fill: var(--accent);
  --thumb-bg: var(--ansi-cyan);
  --thumb-size: 16px;
}

/* Make UI controls readable in light schemes, regardless of theme ANSI values */
:root[data-color-scheme="light"] .ui{
  --ui-bg: #ffffff;
  --ui-fg: var(--fg);
  --ui-border: color-mix(in oklab, var(--fg) 15%, var(--bg));
  --ui-hover: color-mix(in oklab, var(--fg) 8%, var(--bg));
  --slider-track: color-mix(in oklab, var(--fg) 12%, var(--bg));
  --thumb-bg: var(--accent);
}

/* Buttons */
.ui button{
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}
.ui button:hover{ background: var(--ui-hover); }
.ui button:active{ filter: brightness(1.05); }
.ui button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ui-focus) 40%, transparent);
  border-color: var(--ui-focus);
}
.ui button:disabled{ opacity:.6; cursor:not-allowed; }

/* Textual inputs, selects, textareas */
.ui input[type="text"],
.ui input[type="number"],
.ui input[type="password"],
.ui input[type="email"],
.ui input[type="url"],
.ui input[type="search"],
.ui textarea{
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 1px solid var(--ui-border);
  border-radius: 3px; /* match main command input */
  padding: 4px 8px;
  font: inherit;
  outline: none;
  caret-color: var(--cursor);
}
.ui input[type="color"],
.ui select{
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 4px 8px;
  font: inherit;
  outline: none;
}
.ui select{ padding-right: 24px; }
.ui .controls-wrap{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1ch;
  align-items: center;
}
.ui .ticker-control{
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}
.ui .ticker-control.disabled{
  opacity: 0.45;
}
.ui .btn-file{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ui-bg);
  color: var(--ui-fg);
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
  max-width: 100%;
}
.ui .btn-file:hover{ background: var(--ui-hover); }
.ui .btn-file:active{ filter: brightness(1.05); }
.ui .btn-file:focus-visible{ outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--ui-focus) 40%, transparent); border-color: var(--ui-focus); }
.ui .btn-file input[type="file"]{
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%);
  border: 0;
}
.ui .file-note{ margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50ch; display: inline-block; vertical-align: middle; min-width: 0; flex: 1 1 auto; }
.ui .cmdlike{
  background: var(--ui-bg);
  color: var(--ui-fg, var(--fg));
  border: 1px solid var(--ui-border);
  border-radius: 3px;
  padding: 4px 8px;
  font: inherit;
  outline: none;
  caret-color: var(--cursor);
}
.ui .cmdlike:focus-visible{ box-shadow: none; border-color: var(--ansi-bright-black); }
.ui input::placeholder, .ui textarea::placeholder{ color: color-mix(in oklab, var(--ui-fg) 60%, transparent); }
.ui input:focus-visible,
.ui select:focus-visible,
.ui textarea:focus-visible{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ui-focus) 40%, transparent);
  border-color: var(--ui-focus);
}

/* Checkboxes / Radios */
/* Circular checkboxes (filled/empty circle) */
.ui input[type="checkbox"]{
  -webkit-appearance: none; appearance: none; margin: 0;
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--ui-border);
  background: var(--ui-bg);
  display: inline-grid; place-content: center;
  cursor: pointer;
}
.ui input[type="checkbox"]::before{
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  transform: scale(0);
  transition: transform 120ms ease-in-out;
  background: var(--ui-focus);
}
.ui input[type="checkbox"]:checked::before{ transform: scale(1); }
.ui input[type="checkbox"]:focus-visible{ outline:none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--ui-focus) 40%, transparent); }
.ui input[type="radio"]{ accent-color: var(--ui-focus); }

/* Range slider */
.ui input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width: 160px; height: 22px;
  background: linear-gradient(to right, var(--slider-fill) 0, var(--slider-fill) var(--fillpx, 0px), var(--slider-track) var(--fillpx, 0px), var(--slider-track) 100%);
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: left 50%;
  border:1px solid var(--ui-border); border-radius:999px; outline:none; cursor:pointer;
}
.ui input[type="range"]:hover{ filter: brightness(1.05); }
.ui input[type="range"]:focus-visible{ box-shadow:0 0 0 2px color-mix(in oklab, var(--ui-focus) 40%, transparent); }
/* WebKit */
.ui input[type="range"]::-webkit-slider-runnable-track{ height:6px; background: transparent; border-radius:999px; }
.ui input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--thumb-bg); border:1px solid var(--ui-border);
  margin-top:-5px; box-shadow: inset 0 0 0 3px var(--ansi-black), 0 0 0 1px var(--ansi-black);
}
.ui input[type="range"]:hover::-webkit-slider-thumb{ background: color-mix(in oklab, var(--thumb-bg) 85%, var(--ansi-white)); }
/* Firefox */
.ui input[type="range"]::-moz-range-track{ height:6px; background: transparent; border:none; border-radius:999px; }
.ui input[type="range"]::-moz-range-progress{ height:6px; background: transparent; border:none; border-radius:999px; }
.ui input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--thumb-bg); border:1px solid var(--ui-border); box-shadow: inset 0 0 0 3px var(--ansi-black); }
/* Edge/IE */
.ui input[type="range"]::-ms-track{ height:6px; background: transparent; border-color: transparent; color: transparent; }
.ui input[type="range"]::-ms-fill-lower{ background: transparent; border-radius:999px; }
.ui input[type="range"]::-ms-fill-upper{ background: transparent; border-radius:999px; }