/* [project]/node_modules/.pnpm/@openhiggsfield+design@file+vendor+design_react-dom@19.2.8_react@19.2.8__react@19.2.8/node_modules/@openhiggsfield/design/dist/ohf.css [app-client] (css) */
.ohf {
  --bg: #0a0a0b;
  --rail: #101112;
  --s1: #151719;
  --s2: #1a1d1f;
  --s3: #222629;
  --s4: #2b3033;
  --line: #ffffff0f;
  --line-2: #ffffff1c;
  --tx: #edefef;
  --tx2: #a8aeaf;
  --tx3: #878e90;
  --tx4: #7d8486;
  --tx-off: #5c6365;
  --accent: #d1fe17;
  --accent-strong: #ddfe51;
  --accent-ink: #141a02;
  --accent-08: #d1fe1714;
  --accent-14: #d1fe1724;
  --accent-32: #d1fe1752;
  --plate: #060908b3;
  --plate-ink: #f6faf8e6;
  --shadow-1: 0 1px 2px #0006;
  --shadow-2: 0 4px 12px #0000004d, 0 16px 40px #00000059;
  --shadow-3: 0 8px 24px #0006, 0 32px 88px #00000085;
  --glint: inset 0 1px 0 #ffffff0b;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-slide: cubic-bezier(.16, 1, .3, 1);
  --font-ui: var(--font-ohf-inter), ui-sans-serif, system-ui, sans-serif;
  --danger: #ff8d78;
  --danger-bg: #ff8d781a;
  --danger-line: #ff8d7847;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-ctl: 10px;
  --radius-lg: 14px;
  --radius-bar: 15px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --h-xs: 28px;
  --h-sm: 32px;
  --h-md: 36px;
  --h-lg: 38px;
  --h-bar: 46px;
  --fs-2xs: 10.5px;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-title: 22px;
  --fw-medium: 500;
  --fw-strong: 550;
  --fw-bold: 600;
  --fw-display: 620;
  --ls-tight: -.005em;
  --ls-heading: -.015em;
  --ls-caps: .16em;
  --sp-0: 2px;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --dur-fast: .12s;
  --dur-base: .15s;
  --dur-slow: .2s;
  --dur-slide: .34s;
  --surface-canvas: var(--bg);
  --surface-panel: var(--s1);
  --surface-raised: var(--s2);
  --surface-hover: var(--s3);
  --text-primary: var(--tx);
  --text-secondary: var(--tx2);
  --text-muted: var(--tx3);
  --border-subtle: var(--line);
  --border-control: var(--line-2);
  --focus-ring: var(--accent);
  --fs-heading: 28px;
  --fs-display: 40px;
  --sp-section: 48px;
  --sp-page: 40px;
  --radius-panel: 18px;
  --success: #a5cfb8;
  --warning: #e7bd83;
  --info: #9bbfe0;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--tx);
  background: var(--bg);
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  caret-color: var(--accent);
  accent-color: var(--accent);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

.ohf *, .ohf :before, .ohf :after {
  box-sizing: border-box;
}

:where(.ohf *) {
  margin: 0;
  padding: 0;
}

:where(.ohf :is(h1, h2, h3, h4, h5, h6)) {
  font-size: inherit;
  font-weight: inherit;
}

:where(.ohf :is(ul, ol)) {
  list-style: none;
}

:where(.ohf :is(img, svg, video)) {
  display: block;
}

:where(.ohf :is(img, video)) {
  max-width: 100%;
  height: auto;
}

.ohf ::selection {
  color: #fbfef1;
  background: #d1fe1747;
}

.ohf :where(button) {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
}

.ohf :where(button:disabled) {
  cursor: default;
}

.ohf input, .ohf textarea {
  color: inherit;
  font-family: inherit;
}

.ohf :focus-visible {
  outline: 2px solid var(--accent-32);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.ohf ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ohf ::-webkit-scrollbar-thumb {
  background: var(--s3);
  border-radius: var(--radius-md);
  background-clip: padding-box;
  border: 2px solid #0000;
}

.ohf ::-webkit-scrollbar-thumb:hover {
  background: var(--s4);
  background-clip: padding-box;
  border: 2px solid #0000;
}

.ohf ::-webkit-scrollbar-track {
  background: none;
}

.ohf .ohf-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--s3) transparent;
}

@keyframes ohf-rise {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ohf-fade {
  0% {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ohf-pop {
  0% {
    opacity: 0;
    transform: scale(.97)translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ohf-pop-out {
  0% {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0;
    transform: scale(.985)translateY(4px);
  }
}

@keyframes ohf-fade-out {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes ohf-tile {
  0% {
    opacity: 0;
    transform: translateY(10px)scale(.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ohf-sheen {
  0% {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translateZ(0);
  }
}

@keyframes ohf-pulse {
  0%, to {
    opacity: .45;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ohf-arrive {
  0% {
    opacity: 0;
    filter: brightness(1.5) saturate(.6);
    transform: scale(.94);
  }

  55% {
    opacity: 1;
    filter: brightness(1.12) saturate(.95);
  }

  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@keyframes ohf-drop {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ohf-selbar-in {
  0% {
    opacity: 0;
    translate: 0 18px;
    scale: .9;
  }

  to {
    opacity: 1;
    translate: 0;
    scale: 1;
  }
}

@keyframes ohf-selbar-out {
  0% {
    opacity: 1;
    translate: 0;
    scale: 1;
  }

  to {
    opacity: 0;
    translate: 0 8px;
    scale: .96;
  }
}

@keyframes ohf-selitem {
  0% {
    opacity: 0;
    filter: blur(4px);
    translate: 0 9px;
    scale: .88;
  }

  to {
    opacity: 1;
    filter: blur();
    translate: 0;
    scale: 1;
  }
}

@keyframes ohf-count {
  0% {
    opacity: 0;
    translate: 0 -.5em;
  }

  to {
    opacity: 1;
    translate: 0;
  }
}

@keyframes ohf-keep {
  0% {
    transform: scale(1);
  }

  36% {
    transform: scale(1.34);
  }

  to {
    transform: scale(1);
  }
}

@keyframes ohf-drain {
  0% {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@keyframes ohf-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ohf-spin-once {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(180deg);
  }
}

.ohf-shell {
  background: var(--bg);
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.ohf-topbar {
  z-index: 30;
  pointer-events: none;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px 0;
  display: flex;
  position: absolute;
  inset: 0 0 auto;
}

.ohf-bar {
  pointer-events: auto;
  height: var(--h-bar);
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-bar);
  box-shadow: var(--shadow-2),var(--glint);
  align-items: center;
  padding: 0 5px;
  display: flex;
}

.ohf-sr {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  position: absolute;
  overflow: hidden;
}

.ohf-tabs {
  align-items: center;
  gap: 2px;
  display: flex;
  position: relative;
}

.ohf-thumb {
  width: var(--thumb-w);
  transform: translate3d(var(--thumb-x),0,0);
  border-radius: var(--radius-ctl);
  background: var(--s3);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1),var(--glint);
  opacity: 0;
  pointer-events: none;
  transition: transform .44s var(--ease-slide),width .44s var(--ease-slide),opacity var(--dur-slow) ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.ohf-thumb[data-ready="true"] {
  opacity: 1;
}

.ohf-tab {
  z-index: 1;
  height: var(--h-md);
  border-radius: var(--radius-ctl);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  letter-spacing: var(--ls-tight);
  color: var(--tx2);
  transition: color .22s ease,background var(--dur-base) ease;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  display: flex;
  position: relative;
}

.ohf-tab svg {
  color: var(--tx3);
  flex-shrink: 0;
  transition: color .22s;
}

.ohf-tab:hover {
  color: var(--tx);
}

.ohf-tab:hover svg {
  color: var(--tx2);
}

.ohf-tab:not([aria-selected="true"]):hover {
  background: #ffffff09;
}

.ohf-tab:active {
  transform: scale(.97);
}

.ohf-tab[aria-selected="true"] {
  color: var(--tx);
}

.ohf-tab[aria-selected="true"] svg {
  color: var(--accent);
}

.ohf-key {
  height: var(--h-md);
  border-radius: var(--radius-ctl);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  letter-spacing: var(--ls-tight);
  color: var(--tx2);
  transition: color .22s ease,background var(--dur-base) ease;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  display: flex;
  position: relative;
}

.ohf-key:hover {
  color: var(--tx);
  background: #ffffff09;
}

.ohf-key:active {
  transform: scale(.97);
}

.ohf-key svg {
  color: var(--tx3);
  flex-shrink: 0;
  transition: color .22s;
}

.ohf-key:hover svg {
  color: var(--tx2);
}

.ohf-key[data-ready="true"] svg, .ohf-key[data-busy="true"] svg {
  color: var(--accent);
}

.ohf-key[data-busy="true"] {
  color: var(--tx);
}

.ohf-lamp {
  background: var(--tx4);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  transition: background .25s;
}

.ohf-key[data-busy="true"] .ohf-lamp {
  background: var(--accent);
  animation: 2.4s ease-in-out infinite ohf-pulse;
}

.ohf-main {
  flex-direction: column;
  height: 100%;
  display: flex;
  position: relative;
}

.ohf-gallery {
  --ohf-fade: 62px;
  min-height: 0;
  padding: 72px 20px calc(var(--ohf-dock-h, 138px) + 8px);
  -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 var(--ohf-fade));
  -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 var(--ohf-fade));
  mask-image: linear-gradient(to bottom,transparent 0,#000 var(--ohf-fade));
  flex: 1;
  overflow-y: auto;
}

.ohf-grid-window {
  width: 100%;
  position: relative;
}

.ohf-grid {
  grid-template-columns: repeat(var(--ohf-cols, 4),minmax(0,1fr));
  place-items: stretch stretch;
  column-gap: 14px;
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.ohf-tile {
  break-inside: avoid;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--s1);
  border: 1px solid var(--line);
  width: 100%;
  box-shadow: var(--shadow-1);
  text-align: left;
  isolation: isolate;
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
  transition: border-color var(--dur-slow) ease,border-width .26s var(--ease-slide),box-shadow .25s var(--ease);
  animation: ohf-tile .32s var(--ease) both;
  animation-delay: var(--d, 0s);
  margin: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.ohf-tile:hover {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2);
}

.ohf-tile:has(.ohf-tile-open:active) {
  transform: scale(.99);
}

.ohf-tile:has(.ohf-tile-open:focus-visible) {
  border-color: var(--line-2);
  box-shadow: var(--shadow-2),0 0 0 2px var(--accent-32);
}

.ohf-tile-media {
  object-fit: contain;
  object-position: center;
  width: 100%;
  height: 100%;
  animation: .4s ohf-fade;
  position: absolute;
  inset: 0;
}

.ohf-tile-open {
  z-index: 1;
  border-radius: inherit;
  display: block;
  position: absolute;
  inset: 0;
}

.ohf-tile-open:focus-visible {
  outline: none;
}

.ohf-tile-acts {
  z-index: 2;
  gap: 5px;
  display: flex;
  position: absolute;
  top: 9px;
  right: 9px;
}

.ohf-tile-act {
  border-radius: var(--radius-md);
  background: var(--plate);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  width: 32px;
  height: 32px;
  color: var(--plate-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease,transform var(--dur-slow) var(--ease),background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease;
  border: 1px solid #ffffff17;
  justify-content: center;
  align-items: center;
  display: flex;
  transform: translateY(-4px)scale(.94);
}

.ohf-tile:hover .ohf-tile-act, .ohf-tile[data-saving] .ohf-tile-act, .ohf-tile-act[data-on="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.ohf-tile:has(:focus-visible) .ohf-tile-act {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.ohf-tile-act .ohf-spinner {
  border-color: #ffffff3d;
  border-top-color: var(--accent);
  width: 15px;
  height: 15px;
}

.ohf-tile-act:hover {
  color: #f5faf8;
  background: #090d0cdb;
  border-color: #fff3;
}

.ohf-tile-act:active {
  transform: scale(.92);
}

.ohf-tile-act[data-on="true"] {
  color: var(--accent);
  border-color: var(--accent-32);
}

.ohf-tile-act[data-on="true"]:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: #090d0cdb;
}

.ohf-tile-act--danger:hover {
  border-color: var(--danger-line);
  color: var(--danger);
  background: #280e0be0;
}

.ohf-tile-act[data-beat] svg {
  animation: ohf-keep var(--dur-slide) var(--ease);
}

.ohf-pick {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  width: 30px;
  height: 30px;
  transition: opacity .16s ease,translate .24s var(--ease-slide),scale .24s var(--ease-slide);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 8px;
  left: 8px;
  translate: -4px;
  scale: .9;
}

.ohf-tile:hover .ohf-pick, .ohf-grid[data-selecting="true"] .ohf-pick {
  opacity: 1;
  pointer-events: auto;
  translate: 0;
  scale: 1;
}

.ohf-tile:has(:focus-visible) .ohf-pick {
  opacity: 1;
  pointer-events: auto;
  translate: 0;
  scale: 1;
}

.ohf-pick-box {
  background: var(--plate);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #0000;
  width: 21px;
  height: 21px;
  transition: background .18s var(--ease),border-color .18s var(--ease),color .1s ease,scale .16s var(--ease);
  border: 1px solid #ffffff5c;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  display: flex;
  box-shadow: 0 1px 3px #00000080;
}

.ohf-pick-box svg {
  opacity: 0;
  transition: opacity .1s ease,scale .26s var(--ease-slide);
  scale: .4;
}

.ohf-pick:hover .ohf-pick-box {
  background: #090d0cdb;
  border-color: #ffffff9e;
}

.ohf-pick:active .ohf-pick-box {
  scale: .88;
}

.ohf-pick[aria-checked="true"] .ohf-pick-box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.ohf-pick[aria-checked="true"]:hover .ohf-pick-box {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.ohf-pick[aria-checked="true"] .ohf-pick-box svg {
  opacity: 1;
  scale: 1;
}

.ohf-tile[data-picked="true"] {
  border-width: 4px;
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}

.ohf-tile[data-picked="true"]:has(.ohf-tile-open:focus-visible) {
  box-shadow: var(--shadow-2),0 0 0 2px var(--bg),0 0 0 4px var(--accent-32);
}

.ohf-tile[data-picked="true"] .ohf-tile-media {
  filter: brightness(.82) saturate(.94);
}

.ohf-grid[data-selecting="true"] .ohf-tile-acts {
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease,translate var(--dur-slow) var(--ease);
  translate: 0 -4px;
}

.ohf-tile-badge {
  transition: translate .26s var(--ease-slide);
}

.ohf-tile:hover .ohf-tile-badge, .ohf-grid[data-selecting="true"] .ohf-tile-badge {
  translate: 30px;
}

.ohf-tile[data-fresh="true"] {
  animation: ohf-arrive .62s var(--ease) both;
}

.ohf-tile--failed {
  animation: ohf-tile .32s var(--ease) both;
  justify-content: center;
  align-items: center;
  display: flex;
}

.ohf-fail {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  max-width: 320px;
  padding: 20px;
  display: flex;
  position: relative;
}

.ohf-fail-ic {
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  width: 28px;
  height: 28px;
  color: var(--danger);
  justify-content: center;
  align-items: center;
  display: flex;
}

.ohf-fail-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.ohf-fail-why {
  font-size: var(--fs-xs);
  color: var(--tx2);
  padding-bottom: 4px;
  line-height: 1.5;
}

.ohf-grain {
  background-image: var(--ohf-grain);
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-size: 128px 128px;
  position: absolute;
  inset: 0;
}

.ohf-tile-badge {
  pointer-events: none;
  background: var(--plate);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--plate-ink);
  font-variant-numeric: tabular-nums;
  border-radius: 7px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 10px;
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
}

.ohf-tile-badge svg {
  display: block;
}

.ohf-tile-caption {
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease,transform .24s var(--ease);
  background: linear-gradient(#0000, #04070694 34%, #040706e0);
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 40px 12px 11px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(8px);
}

.ohf-tile:hover .ohf-tile-caption {
  opacity: 1;
  transform: none;
}

.ohf-tile:has(:focus-visible) .ohf-tile-caption {
  opacity: 1;
  transform: none;
}

.ohf-tile-prompt {
  max-width: 100%;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: -.006em;
  color: #f5faf8;
  text-wrap: pretty;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.38;
  display: -webkit-box;
  overflow: hidden;
}

.ohf-tile-facts {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.ohf-tile-fact {
  background: var(--plate);
  color: var(--plate-ink);
  line-height: 1.3;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: .005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid #ffffff17;
  border-radius: 7px;
  padding: 3px 7px;
}

.ohf-tile-fact--model {
  color: #f5faf8;
  font-weight: var(--fw-bold);
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.ohf-skeleton {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--s1);
  width: 100%;
  animation: ohf-tile .32s var(--ease) both;
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ohf-skeleton:before {
  content: "";
  background-image: linear-gradient(100deg,var(--s1) 24%,var(--s3) 50%,var(--s1) 76%);
  background-repeat: repeat-x;
  background-size: 50% 100%;
  width: 200%;
  animation: 2.8s linear infinite ohf-sheen;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.ohf-skeleton:after {
  content: "";
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='ohf-dither'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23ohf-dither)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  position: absolute;
  inset: 0;
}

.ohf-skeleton-label, .ohf-skeleton-clock {
  z-index: 1;
  position: relative;
}

.ohf-skeleton-label {
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--tx3);
  font-size: 10px;
}

.ohf-skeleton-clock {
  font-variant-numeric: tabular-nums;
  color: var(--tx4);
  font-size: 11px;
}

.ohf-empty {
  place-items: center;
  min-height: 100%;
  padding: 4px 0 20px;
  display: grid;
}

.ohf-empty-copy {
  text-align: center;
  width: 100%;
  max-width: 544px;
  animation: ohf-rise .42s var(--ease-slide) both;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 8px;
  display: flex;
}

.ohf-empty-title {
  font-size: 20px;
  font-weight: var(--fw-display);
  letter-spacing: -.024em;
  color: var(--tx);
  text-wrap: balance;
  line-height: 1.25;
}

.ohf-empty-hint {
  font-size: var(--fs-md);
  color: var(--tx3);
  text-wrap: balance;
  max-width: 42ch;
  line-height: 1.6;
}

.ohf-empty-starters {
  flex-direction: column;
  gap: 7px;
  width: 100%;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ohf-starter {
  text-align: left;
  border: 1px solid var(--line);
  width: 100%;
  transition: background .16s ease,border-color .16s ease,transform .16s var(--ease);
  background: #ffffff05;
  border-radius: 13px;
  align-items: center;
  gap: 13px;
  padding: 10px 12px 10px 10px;
  display: flex;
}

.ohf-starter:hover {
  background: var(--s1);
  border-color: var(--line-2);
}

.ohf-starter:active {
  transform: scale(.994);
}

.ohf-starter-thumb {
  width: 58px;
  box-shadow: inset 0 0 0 1px #ffffff14,var(--shadow-1);
  border-radius: 7px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.ohf-starter-text {
  min-width: 0;
  font-size: var(--fs-md);
  color: var(--tx2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
  line-height: 1.45;
  transition: color .16s;
  display: -webkit-box;
  overflow: hidden;
}

.ohf-starter:hover .ohf-starter-text, .ohf-starter:focus-visible .ohf-starter-text {
  color: var(--tx);
}

.ohf-starter-go {
  color: var(--tx3);
  opacity: 0;
  transition: opacity .16s ease,transform var(--dur-slow) var(--ease);
  flex-shrink: 0;
  display: flex;
  transform: translate(-4px);
}

.ohf-starter:hover .ohf-starter-go, .ohf-starter:focus-visible .ohf-starter-go {
  opacity: 1;
  transform: none;
}

.ohf-undo {
  border-radius: var(--radius-lg);
  background: var(--s2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2),var(--glint);
  animation: ohf-rise .22s var(--ease);
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px 10px 9px 14px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ohf-undo-drain {
  transform-origin: 0;
  background: var(--tx4);
  opacity: .5;
  width: 100%;
  height: 2px;
  animation: linear forwards ohf-drain;
  position: absolute;
  bottom: 0;
  left: 0;
}

.ohf-undo-text {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--tx2);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.ohf-undo-act {
  height: var(--h-xs);
  border-radius: var(--radius-md);
  background: var(--s3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--tx);
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  display: flex;
}

.ohf-undo-act:hover {
  background: var(--s4);
  border-color: var(--line-2);
}

.ohf-undo-act:active {
  transform: scale(.97);
}

.ohf-alert {
  border-radius: var(--radius-lg);
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  animation: ohf-rise .22s var(--ease);
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 10px 10px 13px;
  display: flex;
}

.ohf-composer-wrap .ohf-alert {
  background: linear-gradient(var(--danger-bg),var(--danger-bg)),var(--plate);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  box-shadow: var(--shadow-2);
}

.ohf-alert-ic {
  color: var(--danger);
  flex-shrink: 0;
  display: flex;
}

.ohf-alert-text {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--tx);
  flex: 1;
  line-height: 1.5;
}

.ohf-icon-btn--ghost {
  background: none;
  border-color: #0000;
  width: 28px;
  height: 28px;
  position: relative;
}

.ohf-icon-btn--ghost:after {
  content: "";
  position: absolute;
  inset: -6px;
}

.ohf-strip {
  flex-wrap: wrap;
  gap: 13px;
  margin: 0;
  padding: 14px 12px 0;
  list-style: none;
  display: flex;
}

.ohf-strip-item {
  animation: ohf-pop var(--dur-slow) var(--ease);
  position: relative;
}

.ohf-strip-tile {
  background: var(--s1);
  width: 56px;
  height: 56px;
  box-shadow: inset 0 0 0 1px #ffffff1a,var(--shadow-1);
  border-radius: 12px;
  display: block;
  position: relative;
  overflow: hidden;
}

.ohf-strip-thumb {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.ohf-strip-glyph {
  color: var(--tx3);
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
  display: flex;
  position: absolute;
  inset: 0;
}

.ohf-strip-tag {
  letter-spacing: .1em;
  text-align: center;
  color: #edf2f0;
  background: linear-gradient(#0000, #000000bd);
  padding: 10px 4px 4px;
  font-size: 8.5px;
  position: absolute;
  inset: auto 0 0;
}

.ohf-strip-remove {
  width: 22px;
  height: 22px;
  color: var(--tx2);
  background: var(--s4);
  box-shadow: 0 1px 4px #0000008c,inset 0 0 0 1px var(--line-2);
  transition: background var(--dur-base) ease,color var(--dur-base) ease,box-shadow var(--dur-base) ease,transform var(--dur-base) var(--ease);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: -6px;
  right: -6px;
}

.ohf-strip-remove:after {
  content: "";
  border-radius: 50%;
  position: absolute;
  inset: -7px;
}

.ohf-strip-remove:hover {
  background: var(--danger-bg);
  color: var(--danger);
  box-shadow: 0 1px 4px #0000008c,inset 0 0 0 1px var(--danger-line);
}

.ohf-strip-remove:active {
  transform: scale(.96);
}

.ohf-dock {
  z-index: 30;
  pointer-events: none;
  padding: 10px 20px 22px;
  position: absolute;
  inset: auto 0 0;
}

.ohf-composer-wrap {
  pointer-events: auto;
  max-width: 940px;
  margin: 0 auto;
  position: relative;
}

.ohf-composer {
  --ctl-r: var(--radius-ctl);
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2),var(--glint);
  transition: border-color var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease),opacity .18s var(--ease),translate var(--dur-slide) var(--ease-slide),scale var(--dur-slide) var(--ease-slide);
  flex-direction: column;
  display: flex;
}

.ohf-composer:has(.ohf-prompt:focus) {
  border-color: var(--accent-32);
  box-shadow: var(--shadow-2),var(--glint),0 0 0 3px var(--accent-08);
}

.ohf-swap {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  display: grid;
}

.ohf-swap > * {
  grid-area: 1 / 1;
}

.ohf-dock[data-selecting="true"] .ohf-composer {
  opacity: 0;
  pointer-events: none;
  translate: 0 10px;
  scale: .97;
}

.ohf-dock[data-selecting="true"] .ohf-composer-wrap {
  pointer-events: none;
}

.ohf-dock[data-selecting="true"] :is(.ohf-undo, .ohf-alert) {
  pointer-events: auto;
}

.ohf-selbar {
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  backdrop-filter: blur(24px) saturate(1.15);
  border: 1px solid var(--line-2);
  max-width: 100%;
  box-shadow: var(--shadow-3),var(--glint);
  pointer-events: none;
  animation: ohf-selbar-out var(--dur-slow) var(--ease) both;
  background: #131618e0;
  border-radius: 20px;
  justify-self: center;
  align-items: center;
  gap: 6px;
  padding: 8px;
  display: flex;
}

.ohf-selbar[data-on="true"] {
  pointer-events: auto;
  animation: ohf-selbar-in .42s var(--ease-slide) both;
}

.ohf-selbar[data-on="true"] > * {
  animation: ohf-selitem .38s var(--ease-slide) both;
}

.ohf-selbar[data-on="true"] > :nth-child(2) {
  animation-delay: 30ms;
}

.ohf-selbar[data-on="true"] > :nth-child(3) {
  animation-delay: 55ms;
}

.ohf-selbar[data-on="true"] > :nth-child(4) {
  animation-delay: 80ms;
}

.ohf-selbar[data-on="true"] > :nth-child(5) {
  animation-delay: .105s;
}

.ohf-selbar[data-on="true"] > :nth-child(6) {
  animation-delay: .13s;
}

.ohf-selbar[data-on="true"] > :nth-child(7) {
  animation-delay: .155s;
}

.ohf-selbar-count {
  font-size: var(--fs-md);
  color: var(--tx2);
  white-space: nowrap;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  display: flex;
}

.ohf-selbar-text {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.ohf-selbar-n {
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--tx);
  animation: ohf-count var(--dur-slide) var(--ease-slide);
  display: inline-block;
}

.ohf-selstack {
  flex: none;
  width: 37px;
  height: 26px;
  position: relative;
}

.ohf-selchip {
  width: 26px;
  height: 26px;
  translate: calc(var(--z) * 5px) 0;
  scale: calc(1 - var(--z) * .1);
  filter: brightness(calc(1 - var(--z) * .24));
  z-index: calc(3 - var(--z));
  animation: ohf-pop .26s var(--ease-slide);
  background-size: cover;
  border-radius: 7px;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px #040606e6, 0 1px 4px #0000008c;
}

.ohf-selchip img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ohf-selchip-play {
  color: #ffffffd1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.ohf-selbar-rule {
  background: var(--line-2);
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 2px;
}

.ohf-selbar-slot {
  flex: none;
  display: flex;
}

.ohf-selact {
  height: var(--h-md);
  min-width: 36px;
  color: var(--tx);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -.006em;
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  background: #ffffff0e;
  border: 1px solid #0000;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  display: flex;
}

.ohf-selact--wide {
  padding: 0 13px 0 11px;
}

.ohf-selact:hover:not(:disabled) {
  border-color: var(--line-2);
  background: #ffffff1a;
}

.ohf-selact:active:not(:disabled) {
  transform: scale(.94);
}

.ohf-selact:disabled {
  color: var(--tx-off);
  background: #ffffff08;
}

.ohf-selact[data-on="true"] {
  background: var(--accent-08);
  border-color: var(--accent-32);
  color: var(--accent);
}

.ohf-selact[data-on="true"]:hover {
  background: var(--accent-14);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.ohf-selact--danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger);
}

.ohf-selact--quiet {
  color: var(--tx2);
  background: none;
}

.ohf-selact--quiet:hover:not(:disabled) {
  color: var(--tx);
  background: #ffffff17;
}

.ohf-selact-label {
  font-variant-numeric: tabular-nums;
}

.ohf-composer-head {
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 2px;
  display: flex;
}

.ohf-prompt {
  resize: none;
  min-width: 0;
  min-height: 40px;
  max-height: 168px;
  font-size: var(--fs-lg);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 9px 8px 8px 4px;
  line-height: 1.5;
}

.ohf-prompt:focus-visible {
  outline: none;
}

.ohf-prompt::placeholder {
  color: var(--tx3);
}

.ohf-composer-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 2px 12px 12px;
  display: flex;
}

.ohf-controls {
  flex-wrap: wrap;
  flex: auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.ohf-attach {
  border-radius: var(--ctl-r);
  border: 1px solid var(--line-2);
  width: 34px;
  height: 34px;
  color: var(--tx2);
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 3px;
  display: flex;
}

.ohf-attach:hover:not(:disabled), .ohf-attach[aria-expanded="true"] {
  background: var(--s3);
  color: var(--tx);
}

.ohf-attach:active:not(:disabled) {
  transform: scale(.96);
}

.ohf-attach:disabled {
  color: var(--tx-off);
  border-color: var(--line);
}

.ohf-spinner {
  border: 1.5px solid var(--line-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: .7s linear infinite ohf-rotate;
}

.ohf-ctl {
  height: var(--h-lg);
  border-radius: var(--ctl-r);
  border: 1px solid var(--line-2);
  min-width: 0;
  color: var(--tx2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  display: flex;
}

.ohf-ctl:hover {
  background: var(--s3);
  color: var(--tx);
}

.ohf-ctl:active {
  transform: scale(.96);
}

.ohf-ctl[aria-expanded="true"] {
  background: var(--s3);
  border-color: var(--accent-32);
  color: var(--tx);
}

.ohf-ctl--flag[aria-pressed="true"] {
  background: var(--accent-14);
  border-color: var(--accent-32);
  color: var(--accent);
}

.ohf-ctl--model {
  background: var(--s3);
  box-shadow: var(--shadow-1);
  color: var(--tx);
}

.ohf-ctl--model:hover {
  background: var(--s4);
}

.ohf-ctl-glyph {
  color: var(--tx3);
  transition: color var(--dur-base) ease;
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.ohf-ctl:hover .ohf-ctl-glyph, .ohf-ctl[aria-expanded="true"] .ohf-ctl-glyph {
  color: var(--tx2);
}

.ohf-ctl--flag[aria-pressed="true"] .ohf-ctl-glyph {
  color: inherit;
}

.ohf-ctl-value {
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-ctl-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-ctl-ratio {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  display: flex;
}

.ohf-ctl-ratio-box {
  opacity: .7;
  border: 1.3px solid;
  border-radius: 2px;
}

.ohf-ctl-ratio-box--auto {
  opacity: .6;
  border-style: dashed;
  width: 13px;
  height: 9px;
}

.ohf-model-swatch {
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  box-shadow: inset 0 0 0 1px #ffffff1f;
}

.ohf-model-icon {
  -webkit-mask: var(--ohf-model-icon) center/contain no-repeat;
  -webkit-mask: var(--ohf-model-icon) center/contain no-repeat;
  mask: var(--ohf-model-icon) center/contain no-repeat;
  background: currentColor;
  flex-shrink: 0;
  display: inline-block;
}

.ohf-caret {
  color: var(--tx3);
  transition: transform var(--dur-slow) var(--ease);
}

[aria-expanded="true"] > .ohf-caret {
  transform: rotate(180deg);
}

.ohf-batch {
  height: var(--h-lg);
  border-radius: var(--ctl-r);
  border: 1px solid var(--line-2);
  color: var(--tx2);
  transition: background var(--dur-base) ease;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  display: flex;
}

.ohf-batch:hover {
  background: var(--s3);
}

.ohf-batch-step {
  width: 24px;
  height: 24px;
  color: var(--tx3);
  transition: background var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) var(--ease);
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.ohf-batch-step:hover:not(:disabled) {
  background: var(--s4);
  color: var(--tx);
}

.ohf-batch-step:active:not(:disabled) {
  transform: scale(.9);
}

.ohf-batch-step:disabled {
  color: var(--tx-off);
}

.ohf-batch-value {
  text-align: center;
  min-width: 30px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--tx);
}

.ohf-batch-max {
  font-weight: var(--fw-medium);
  color: var(--tx3);
}

.ohf-generate-slot {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
}

.ohf-generate {
  height: var(--h-lg);
  border-radius: var(--ctl-r);
  font-size: var(--fs-md);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-tight);
  background: linear-gradient(180deg,#d9fe3e,var(--accent));
  color: var(--accent-ink);
  transition: filter var(--dur-base) ease,background var(--dur-slow) ease,color var(--dur-slow) ease,box-shadow var(--dur-slow) ease,transform var(--dur-base) var(--ease);
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  display: flex;
  position: relative;
  box-shadow: 0 2px 8px #0006, inset 0 1px #fff6;
}

.ohf-generate:hover:not(:disabled) {
  filter: brightness(1.06);
}

.ohf-generate:active:not(:disabled) {
  transform: scale(.96);
}

.ohf-generate:disabled {
  background: var(--s3);
  color: var(--tx4);
  box-shadow: var(--shadow-1);
}

.ohf-generate[data-busy="true"]:disabled {
  background: var(--accent-14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-32);
}

.ohf-generate-glyph {
  align-items: center;
  display: none;
}

.ohf-generate-label {
  position: relative;
}

.ohf-kbd {
  border-radius: var(--radius-sm);
  height: 20px;
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: inherit;
  opacity: .68;
  background: #00000029;
  align-items: center;
  padding: 0 6px;
  line-height: 1;
  display: flex;
  position: relative;
}

.ohf-generate-sheen {
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ohf-generate-sheen:after {
  content: "";
  background-image: linear-gradient(100deg, #0000 0%, #ffffff05 30%, #ffffff1a 50%, #ffffff05 70%, #0000 100%);
  background-repeat: repeat-x;
  background-size: 50% 100%;
  width: 200%;
  animation: 1.4s linear infinite ohf-sheen;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.ohf-tip {
  position: relative;
}

.ohf-tip[data-tip]:after {
  content: attr(data-tip);
  z-index: 40;
  border-radius: var(--radius-md);
  background: var(--s4);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  color: var(--tx);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: -.003em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .13s var(--ease),translate .13s var(--ease);
  padding: 5px 9px;
  line-height: 1.3;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 4px;
}

.ohf-tip--start[data-tip]:after {
  left: 0;
  translate: 0 4px;
}

.ohf-tip--end[data-tip]:after {
  left: auto;
  right: 0;
  translate: 0 4px;
}

.ohf-tip[data-tip]:hover:after, .ohf-tip[data-tip]:focus-visible:after {
  opacity: 1;
  transition-delay: .35s;
  translate: -50%;
}

.ohf-tip[data-tip]:has(:focus-visible):after {
  opacity: 1;
  transition-delay: .35s;
  translate: -50%;
}

.ohf-tip--start[data-tip]:hover:after, .ohf-tip--start[data-tip]:focus-visible:after, .ohf-tip--end[data-tip]:hover:after, .ohf-tip--end[data-tip]:focus-visible:after {
  translate: 0;
}

.ohf-tip--start[data-tip]:has(:focus-visible):after {
  translate: 0;
}

.ohf-tip--end[data-tip]:has(:focus-visible):after {
  translate: 0;
}

.ohf-tip[aria-expanded="true"][data-tip]:after {
  content: none;
}

.ohf-composer:hover .ohf-tip[data-tip]:not(:hover):after {
  opacity: 0;
  transition-delay: 0s;
}

.ohf-popover {
  bottom: var(--ohf-pop-y, calc(100% + 10px));
  left: var(--ohf-pop-x, 0px);
  z-index: 30;
  background: var(--s2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3),var(--glint);
  animation: ohf-pop .22s var(--ease);
  transform-origin: 0 100%;
  border-radius: 16px;
  position: absolute;
}

.ohf-popover--setting {
  width: min(268px, 100%);
  max-height: min(50vh, 420px);
  padding: 14px;
  overflow-y: auto;
}

.ohf-popover--list {
  flex-direction: column;
  width: min(216px, 100%);
  max-height: min(56vh, 452px);
  padding: 12px 9px 9px;
  display: flex;
  overflow: hidden;
}

.ohf-popover--list .ohf-field {
  min-height: 0;
}

.ohf-popover--list .ohf-field-label {
  padding-left: 9px;
}

.ohf-popover--picker {
  width: min(560px, 100%);
  height: min(60vh,520px,95px + var(--ohf-picker-rows, 99) * 56px);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.ohf-popover--menu {
  flex-direction: column;
  gap: 9px;
  width: min(240px, 100%);
  padding: 12px 10px 10px;
  display: flex;
}

.ohf-popover--menu .ohf-pop-head {
  padding-left: 8px;
}

.ohf-menu {
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.ohf-menu-row {
  width: 100%;
  height: var(--h-md);
  border-radius: var(--radius-md);
  text-align: left;
  color: var(--tx2);
  transition: background var(--dur-fast) ease,color var(--dur-fast) ease;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  display: flex;
}

.ohf-menu-row:hover:not(:disabled) {
  background: var(--s3);
  color: var(--tx);
}

.ohf-menu-row:disabled {
  color: var(--tx-off);
}

.ohf-menu-ic {
  color: var(--tx3);
  transition: color var(--dur-fast) ease;
  display: flex;
}

.ohf-menu-row:hover:not(:disabled) .ohf-menu-ic {
  color: var(--accent);
}

.ohf-menu-row:disabled .ohf-menu-ic {
  color: var(--tx-off);
}

.ohf-menu-label {
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.ohf-menu-count {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--tx4);
}

.ohf-menu-row:disabled .ohf-menu-count {
  color: var(--tx-off);
}

.ohf-pop-head {
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--tx3);
  font-size: 9.5px;
}

.ohf-field {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.ohf-field-row {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.ohf-field-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  color: var(--tx2);
}

.ohf-field-value {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tx);
}

.ohf-opts {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-height: 0;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.ohf-opt {
  border-radius: var(--radius-md);
  height: 34px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  text-align: left;
  color: var(--tx2);
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  padding: 0 9px;
  transition: background .13s, color .13s;
  display: flex;
}

.ohf-opt:hover {
  background: var(--s3);
  color: var(--tx);
}

.ohf-opt:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

.ohf-opt[aria-pressed="true"] {
  background: var(--accent-08);
  color: var(--accent);
}

.ohf-opt[aria-pressed="true"]:hover {
  background: var(--accent-14);
}

.ohf-opt-label {
  flex: 1;
  min-width: 0;
}

.ohf-opt-check {
  flex-shrink: 0;
  display: flex;
}

.ohf-opt-ratio {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  display: flex;
}

.ohf-opt-box {
  opacity: .55;
  border: 1.3px solid;
  border-radius: 2px;
}

.ohf-opt-box--auto {
  border-style: dashed;
  width: 13px;
  height: 9px;
}

.ohf-opt:hover .ohf-opt-box, .ohf-opt[aria-pressed="true"] .ohf-opt-box {
  opacity: 1;
}

.ohf-chip {
  height: var(--h-sm);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: var(--fw-medium);
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--tx2);
  transition: background var(--dur-base) ease,color var(--dur-base) ease,border-color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  display: flex;
}

.ohf-chip:hover {
  background: var(--s3);
  color: var(--tx);
}

.ohf-chip:active {
  transform: scale(.96);
}

.ohf-chip[aria-pressed="true"] {
  background: var(--accent-14);
  border-color: var(--accent-32);
  color: var(--accent);
}

.ohf-slider {
  appearance: none;
  cursor: pointer;
  background: none;
  width: 100%;
  height: 20px;
}

.ohf-slider::-webkit-slider-runnable-track {
  border-radius: var(--radius-xs);
  background: linear-gradient(var(--accent),var(--accent)) 0/var(--fill, 50%) 100% no-repeat,var(--s3);
  height: 4px;
}

.ohf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease);
  background: #f2f6f5;
  border-radius: 50%;
  margin-top: -5px;
  box-shadow: 0 1px 4px #00000080;
}

.ohf-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.ohf-slider::-moz-range-track {
  border-radius: var(--radius-xs);
  background: var(--s3);
  height: 4px;
}

.ohf-slider::-moz-range-progress {
  border-radius: var(--radius-xs);
  background: var(--accent);
  height: 4px;
}

.ohf-slider::-moz-range-thumb {
  background: #f2f6f5;
  border: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  box-shadow: 0 1px 4px #00000080;
}

.ohf-input {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  width: 100%;
  min-width: 0;
  font-size: var(--fs-sm);
  transition: border-color var(--dur-base) ease,box-shadow var(--dur-base) ease;
  outline: none;
  padding: 8px 11px;
}

.ohf-input:hover {
  border-color: var(--line-2);
}

.ohf-input:focus {
  border-color: var(--accent-32);
  box-shadow: 0 0 0 3px var(--accent-08);
}

.ohf-input:focus-visible {
  outline: none;
}

.ohf-icon-btn {
  border-radius: var(--radius-md);
  background: var(--s1);
  border: 1px solid var(--line);
  width: 34px;
  height: 34px;
  color: var(--tx2);
  transition: background var(--dur-base) ease,color var(--dur-base) ease,border-color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.ohf-icon-btn:hover {
  background: var(--s3);
  color: var(--tx);
  border-color: var(--line-2);
}

.ohf-icon-btn:active {
  transform: scale(.96);
}

.ohf-picker-close {
  width: 30px;
  height: 30px;
  position: relative;
}

.ohf-picker-close:after {
  content: "";
  position: absolute;
  inset: -5px;
}

.ohf-icon-btn[data-spin="true"] svg {
  animation: ohf-spin-once .35s var(--ease);
}

.ohf-picker-head {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 16px;
  display: flex;
}

.ohf-picker-search-ic {
  color: var(--tx3);
  flex-shrink: 0;
  display: flex;
}

.ohf-picker-input {
  min-width: 0;
  font-size: var(--fs-base);
  color: var(--tx);
  background: none;
  border: none;
  outline: none;
  flex: 1;
}

.ohf-picker-input::placeholder {
  color: var(--tx3);
}

.ohf-picker-input:focus-visible {
  outline: none;
}

.ohf-picker-close {
  flex-shrink: 0;
}

.ohf-picker-list {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-height: 0;
  padding: 6px;
  display: flex;
  overflow-y: auto;
}

.ohf-picker-group {
  padding: 9px 10px 5px;
}

.ohf-model-row {
  border-radius: var(--radius-ctl);
  text-align: left;
  width: 100%;
  transition: background var(--dur-fast) ease,border-color var(--dur-fast) ease;
  border: 1px solid #0000;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  display: flex;
}

.ohf-model-row:hover {
  background: var(--s3);
}

.ohf-model-row[aria-current] {
  background: var(--s3);
  border-color: var(--line-2);
}

.ohf-model-row-swatch {
  width: 34px;
  height: 34px;
  box-shadow: inset 0 0 0 1px #ffffff1a,var(--shadow-1);
  border-radius: 9px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.ohf-model-row-swatch--icon {
  background: var(--s2);
  color: var(--tx);
  place-items: center;
  display: grid;
}

.ohf-model-row-text {
  flex: 1;
  min-width: 0;
}

.ohf-model-row-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.ohf-model-row-desc {
  font-size: var(--fs-xs);
  color: var(--tx3);
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-top: 2px;
  display: block;
  overflow: hidden;
}

.ohf-model-row-check {
  width: 16px;
  color: var(--accent);
  flex-shrink: 0;
  justify-content: center;
  display: flex;
}

.ohf-picker-empty {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: auto 0;
  padding: 30px 20px 26px;
  display: flex;
}

.ohf-picker-empty-ic {
  background: var(--s2);
  border: 1px solid var(--line);
  width: 30px;
  height: 30px;
  box-shadow: var(--glint);
  color: var(--tx3);
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.ohf-picker-empty-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--tx);
}

.ohf-picker-empty-hint {
  max-width: 40ch;
  font-size: var(--fs-xs);
  color: var(--tx3);
  text-wrap: pretty;
  line-height: 1.55;
}

.ohf-picker-empty .ohf-btn-solid {
  height: 30px;
  margin-top: 3px;
}

.ohf-popover--assets {
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(64vh, 540px);
  display: flex;
  overflow: hidden;
}

.ohf-assets-head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px 9px 10px;
  display: flex;
}

.ohf-assets-tabs {
  scrollbar-width: none;
  align-items: center;
  gap: 2px;
  min-width: 0;
  display: flex;
  overflow-x: auto;
}

.ohf-assets-tabs::-webkit-scrollbar {
  display: none;
}

.ohf-assets-tab {
  border-radius: var(--radius-md);
  white-space: nowrap;
  height: 30px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-strong);
  letter-spacing: var(--ls-tight);
  color: var(--tx2);
  transition: background var(--dur-base) ease,color var(--dur-base) ease,box-shadow var(--dur-base) ease;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  display: flex;
}

.ohf-assets-tab:hover {
  color: var(--tx);
}

.ohf-assets-tab:not([aria-selected="true"]):hover {
  background: #ffffff09;
}

.ohf-assets-tab[aria-selected="true"] {
  color: var(--tx);
  background: var(--s3);
  box-shadow: inset 0 0 0 1px var(--line-2),var(--glint);
}

.ohf-assets-tab-count {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--tx4);
}

.ohf-assets-tab[aria-selected="true"] .ohf-assets-tab-count {
  color: var(--tx2);
}

.ohf-assets-roles {
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 6px;
  padding: 11px 14px;
  display: flex;
}

.ohf-chip--role {
  height: var(--h-xs);
  font-size: var(--fs-xs);
  gap: 7px;
  padding: 0 11px;
}

.ohf-chip-count {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--tx4);
}

.ohf-chip--role[aria-pressed="true"] .ohf-chip-count {
  color: inherit;
  opacity: .75;
}

.ohf-assets-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ohf-assets-grid {
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  padding: 14px;
  display: grid;
}

.ohf-asset {
  aspect-ratio: 1;
  background: var(--s1);
  transition: box-shadow .16s ease,opacity .16s ease,transform .16s var(--ease);
  border-radius: 11px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #ffffff14;
}

.ohf-asset:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--line-2),var(--shadow-1);
}

.ohf-asset:active:not(:disabled) {
  transform: scale(.97);
}

.ohf-asset[data-picked="true"] {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.ohf-asset:disabled {
  opacity: .35;
}

.ohf-asset-art {
  background: var(--s2);
  position: absolute;
  inset: 0;
}

.ohf-asset-media {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .35s var(--ease),opacity .16s ease;
  position: absolute;
  inset: 0;
}

.ohf-asset:hover:not(:disabled) .ohf-asset-media {
  transform: scale(1.045);
}

.ohf-asset-glyph {
  color: var(--tx3);
  justify-content: center;
  align-items: center;
  transition: opacity .16s;
  display: flex;
  position: absolute;
  inset: 0;
}

.ohf-asset-kind {
  background: var(--plate);
  width: 17px;
  height: 17px;
  color: var(--plate-ink);
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 6px;
  left: 6px;
}

.ohf-asset-mark {
  background: var(--accent);
  width: 19px;
  height: 19px;
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
  opacity: 0;
  transition: opacity .16s ease,transform var(--dur-slow) var(--ease);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 6px;
  right: 6px;
  transform: scale(.7);
}

.ohf-asset[data-picked="true"] .ohf-asset-mark {
  opacity: 1;
  transform: none;
}

.ohf-asset--upload {
  border: 1px dashed var(--line-2);
  box-shadow: none;
  color: var(--tx2);
  transition: border-color var(--dur-base) ease,background var(--dur-base) ease,color var(--dur-base) ease,transform .16s var(--ease);
  background: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}

.ohf-asset--upload:hover:not(:disabled) {
  background: var(--accent-08);
  border-color: var(--accent-32);
  box-shadow: none;
  color: var(--tx);
}

.ohf-asset--upload:disabled {
  border-color: var(--line);
  color: var(--tx-off);
  opacity: 1;
}

.ohf-asset-upload-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-strong);
}

.ohf-assets-foot {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 15px;
  display: flex;
}

.ohf-assets-tally {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tx3);
}

.ohf-btn-accent {
  height: var(--h-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
  transition: background var(--dur-base) ease,color var(--dur-base) ease,box-shadow var(--dur-base) ease,transform var(--dur-base) var(--ease);
  padding: 0 14px;
}

.ohf-btn-accent:hover:not(:disabled) {
  background: var(--accent-strong);
}

.ohf-btn-accent:active:not(:disabled) {
  transform: scale(.97);
}

.ohf-btn-accent[data-quiet="true"] {
  background: var(--s3);
  color: var(--tx2);
  box-shadow: var(--shadow-1);
}

.ohf-btn-accent[data-quiet="true"]:hover {
  background: var(--s4);
  color: var(--tx);
}

.ohf dialog {
  color: inherit;
  background: none;
  border: none;
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
}

.ohf dialog::backdrop {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: ohf-fade var(--dur-slow) ease;
  background: #040505a8;
}

.ohf dialog[open] .ohf-dialog-panel {
  animation: ohf-pop .28s var(--ease);
}

.ohf dialog[data-closing] .ohf-dialog-panel {
  pointer-events: none;
  animation: .18s cubic-bezier(.4, 0, 1, 1) forwards ohf-pop-out;
}

.ohf dialog[data-closing]::backdrop {
  animation: .18s forwards ohf-fade-out;
}

.ohf-dialog-panel:focus {
  outline: none;
}

.ohf-dialog-panel {
  background: var(--s2);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3),var(--glint);
  border-radius: 18px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.ohf-keys-panel {
  width: 420px;
  max-width: calc(100vw - 32px);
}

.ohf-keys-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 18px 0;
  display: flex;
}

.ohf-keys-title {
  font-size: 16px;
  font-weight: var(--fw-display);
  letter-spacing: -.02em;
}

.ohf-keys-copy {
  font-size: var(--fs-sm);
  color: var(--tx3);
  margin: 6px 0 0;
  line-height: 1.45;
}

.ohf-keys-form {
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  display: flex;
}

.ohf-keys-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  display: flex;
}

.ohf-keys-save {
  border-radius: var(--radius-md);
  height: 34px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 14px;
}

.ohf-keys-save:hover:not(:disabled) {
  filter: brightness(1.05);
}

.ohf-keys-save:disabled {
  opacity: .45;
}

.ohf dialog.ohf-viewer {
  width: 100vw;
  height: 100dvh;
  margin: 0;
}

.ohf dialog.ohf-viewer::backdrop {
  background: #040505db;
}

.ohf-viewer-panel {
  width: 100%;
  height: 100%;
  box-shadow: none;
  background: none;
  border: 0;
  border-radius: 0;
  flex-direction: row;
  align-items: stretch;
}

.ohf dialog[open] .ohf-viewer-panel {
  animation: .22s ohf-fade;
}

.ohf dialog[data-closing] .ohf-viewer-panel {
  pointer-events: none;
  animation: .18s forwards ohf-fade-out;
}

.ohf-viewer-stage {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  display: flex;
  container-type: size;
}

.ohf-viewer-figure {
  width: min(100%,100cqh * var(--a, 1.5));
  background: var(--s1);
  max-height: 100%;
  box-shadow: var(--shadow-3),inset 0 0 0 1px #ffffff12;
  isolation: isolate;
  animation: ohf-pop var(--dur-slide) var(--ease-slide) both;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  margin: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ohf-viewer-art {
  position: absolute;
  inset: 0;
}

.ohf-viewer-figure[data-shaped] .ohf-viewer-art {
  display: none;
}

.ohf-viewer-media {
  object-fit: contain;
  width: 100%;
  height: 100%;
  animation: .3s ohf-fade;
  position: relative;
}

.ohf-viewer-side {
  background: var(--s2);
  border: 1px solid var(--line-2);
  width: 340px;
  box-shadow: var(--shadow-3),var(--glint);
  min-height: 0;
  animation: ohf-side-in .36s var(--ease-slide) both;
  border-radius: 16px;
  flex-direction: column;
  flex-shrink: 0;
  margin: 12px 12px 12px 0;
  display: flex;
  overflow: hidden;
}

@keyframes ohf-side-in {
  0% {
    opacity: 0;
    transform: translate(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ohf-viewer-side-head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 13px 13px 18px;
  display: flex;
}

.ohf-viewer-title {
  min-width: 0;
}

.ohf-viewer-model {
  font-size: var(--fs-lg);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-heading);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 8px;
  line-height: 1.25;
  display: flex;
  overflow: hidden;
}

.ohf-viewer-when {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tx4);
  margin-top: 3px;
}

.ohf-viewer-close {
  width: 30px;
  height: 30px;
}

.ohf-viewer-side-body {
  overscroll-behavior: contain;
  flex-direction: column;
  flex: 1;
  gap: 21px;
  min-height: 0;
  padding: 17px 18px 20px;
  display: flex;
  overflow-y: auto;
}

.ohf-viewer-block {
  flex-direction: column;
  gap: 9px;
  display: flex;
}

.ohf-viewer-block-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 22px;
  margin-top: -3px;
  display: flex;
}

.ohf-viewer-label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tx4);
}

.ohf-viewer-copy {
  border-radius: var(--radius-sm);
  height: 22px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--tx3);
  transition: background var(--dur-base) ease,color var(--dur-base) ease;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  display: flex;
}

.ohf-viewer-copy:hover {
  background: var(--s3);
  color: var(--tx);
}

.ohf-viewer-copy[data-done] {
  color: var(--accent);
}

.ohf-viewer-prompt {
  font-size: var(--fs-md);
  color: var(--tx);
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
  padding: 11px 12px;
  line-height: 1.55;
}

.ohf-viewer-facts {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.ohf-viewer-fact {
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  display: flex;
}

.ohf-viewer-fact dt {
  color: var(--tx3);
  white-space: nowrap;
  font-size: 12px;
}

.ohf-viewer-fact dd {
  color: var(--tx);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
  font-size: 12px;
}

.ohf-viewer-side-foot {
  border-top: 1px solid var(--line);
  flex-direction: column;
  gap: 8px;
  padding: 13px 14px 14px;
  display: flex;
}

.ohf-cta.ohf-viewer-recreate {
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  display: flex;
}

.ohf-viewer-foot-row {
  gap: 8px;
  display: flex;
}

.ohf-btn-solid.ohf-viewer-download {
  height: var(--h-md);
  flex: 1;
  justify-content: center;
}

.ohf-btn-solid.ohf-viewer-download[data-state="failed"] {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger);
}

.ohf-btn-solid.ohf-viewer-download[data-state="failed"]:hover {
  border-color: var(--danger);
  background: #ff8d7829;
}

.ohf-viewer-save-note {
  font-size: var(--fs-xs);
  color: var(--danger);
  animation: ohf-rise .22s var(--ease);
  line-height: 1.45;
}

.ohf-viewer-trash, .ohf-viewer-keep {
  width: 36px;
  height: 36px;
}

.ohf-icon-btn.ohf-viewer-trash:hover {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger);
}

.ohf-viewer-keep[data-on="true"] {
  background: var(--accent-08);
  border-color: var(--accent-32);
  color: var(--accent);
}

.ohf-viewer-keep[data-on="true"]:hover {
  background: var(--accent-14);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.ohf-btn-quiet {
  height: var(--h-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--tx2);
  transition: background var(--dur-base) ease,color var(--dur-base) ease;
  padding: 0 12px;
}

.ohf-btn-quiet:hover {
  background: var(--s3);
  color: var(--tx);
}

.ohf-btn-quiet:active {
  transform: scale(.97);
}

.ohf-btn-solid {
  height: var(--h-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  background: var(--s3);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  display: flex;
}

.ohf-btn-solid:hover {
  background: var(--s4);
  border-color: var(--line-2);
}

.ohf-btn-solid:active {
  transform: scale(.97);
}

a.ohf-btn-solid {
  color: var(--tx);
  text-decoration: none;
}

.ohf-btn-quiet {
  align-items: center;
  gap: 7px;
  display: flex;
}

.ohf-play-btn {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #f4f8f7;
  width: 60px;
  height: 60px;
  transition: transform .25s var(--ease),background var(--dur-slow) ease;
  background: #070b0a80;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  box-shadow: 0 6px 24px #00000073, inset 0 1px #ffffff29;
}

.ohf-play-btn:hover {
  background: #090f0d9e;
  transform: scale(1.06);
}

.ohf-play-btn:active {
  transform: scale(.98);
}

.ohf-wave {
  align-items: center;
  gap: 3px;
  height: 64px;
  display: flex;
  position: relative;
}

.ohf-wave span {
  background: #f4f8f7a8;
  border-radius: 3px;
  width: 3px;
}

.ohf-api-panel {
  gap: 18px;
  width: 440px;
  max-width: calc(100vw - 48px);
  padding: 24px 24px 20px;
}

.ohf-api-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.ohf-api-title {
  font-size: 17px;
  font-weight: var(--fw-display);
  letter-spacing: -.02em;
  line-height: 1.25;
}

.ohf-api-sub {
  font-size: var(--fs-sm);
  color: var(--tx3);
  padding-top: 5px;
  line-height: 1.55;
}

.ohf-api-hint {
  font-size: var(--fs-xs);
  color: var(--tx3);
}

.ohf-pill-row {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.ohf-pill {
  border-radius: var(--radius-md);
  background: var(--s1);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--tx2);
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  display: flex;
}

.ohf-pill-dot {
  background: var(--tx4);
  width: 5px;
  height: 5px;
  transition: background var(--dur-slow) ease;
  border-radius: 50%;
}

.ohf-pill[data-on="true"] .ohf-pill-dot {
  background: var(--accent);
}

.ohf-api-actions {
  align-items: center;
  gap: 8px;
  padding-top: 2px;
  display: flex;
}

.ohf-cta {
  border-radius: var(--radius-ctl);
  height: 40px;
  font-size: var(--fs-md);
  font-weight: var(--fw-display);
  background: linear-gradient(180deg,#d9fe3e,var(--accent));
  color: var(--accent-ink);
  transition: filter var(--dur-base) ease,background var(--dur-slow) ease,color var(--dur-slow) ease,box-shadow var(--dur-slow) ease,transform var(--dur-base) var(--ease);
  flex: 1;
  box-shadow: 0 2px 8px #0006, inset 0 1px #fff6;
}

.ohf-cta:hover:not(:disabled) {
  filter: brightness(1.06);
}

.ohf-cta:active:not(:disabled) {
  transform: scale(.98);
}

.ohf-cta:disabled {
  background: var(--s3);
  color: var(--tx3);
  box-shadow: var(--shadow-1);
}

.ohf-enter-1 {
  animation: ohf-drop .4s var(--ease-slide) both;
}

.ohf-enter-2 {
  animation: ohf-rise .35s var(--ease) 60ms backwards;
}

@media (hover: none) {
  .ohf-tile-act {
    opacity: 1;
    pointer-events: auto;
    width: 36px;
    height: 36px;
    transform: none;
  }

  .ohf-pick {
    opacity: 1;
    pointer-events: auto;
    width: 36px;
    height: 36px;
    translate: 0;
    scale: 1;
  }

  .ohf-pick-box {
    width: 23px;
    height: 23px;
  }

  .ohf-tile-caption {
    opacity: 1;
    transform: none;
  }

  .ohf-tile-badge {
    translate: 32px;
  }
}

@media (max-width: 900px) {
  .ohf-viewer-panel {
    flex-direction: column;
  }

  .ohf-viewer-stage {
    padding: 16px 16px 0;
  }

  .ohf-viewer-side {
    flex: none;
    width: auto;
    max-height: 60dvh;
    margin: 12px;
    animation-name: ohf-rise;
  }

  .ohf-viewer-side-body {
    padding-bottom: 16px;
  }
}

@media (max-width: 760px) {
  .ohf-key-text {
    display: none;
  }

  .ohf-key {
    gap: 7px;
    padding: 0 11px;
  }
}

@media (max-width: 640px) {
  .ohf-popover {
    left: 0;
    right: 0;
  }

  .ohf-opt {
    height: 40px;
  }

  .ohf-dock {
    padding-bottom: 14px;
  }

  .ohf-starter-text {
    -webkit-line-clamp: 3;
  }

  .ohf-popover--assets {
    max-height: min(58vh, 460px);
  }

  .ohf-assets-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    padding: 12px;
  }

  .ohf-assets-roles {
    padding: 10px 12px;
  }
}

@media (max-width: 560px) {
  .ohf-topbar {
    padding: 10px 14px 0;
  }

  .ohf-gallery {
    --ohf-fade: 56px;
    padding: 64px 14px 8px;
  }

  .ohf-dock {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ohf-bar {
    border-radius: var(--radius-lg);
    height: 42px;
  }

  .ohf-tab svg {
    display: none;
  }

  .ohf-tab, .ohf-key {
    height: var(--h-sm);
    padding: 0 11px;
  }

  .ohf-tab[data-view="favorites"] svg {
    display: block;
  }

  .ohf-tab[data-view="favorites"] .ohf-tab-label {
    display: none;
  }

  .ohf-tab[data-view="favorites"] {
    padding: 0 10px;
  }

  .ohf-strip {
    padding: 12px 10px 0;
  }

  .ohf-composer-head {
    padding: 10px 10px 2px;
  }

  .ohf-composer-row {
    padding: 2px 10px 10px;
  }

  .ohf-composer {
    border-radius: 20px;
  }

  .ohf-ctl, .ohf-batch {
    height: 42px;
  }

  .ohf-attach {
    width: 38px;
    height: 38px;
  }

  .ohf-batch-step {
    width: 28px;
    height: 28px;
  }

  .ohf-generate-slot {
    width: 100%;
    margin-left: 0;
  }

  .ohf-generate {
    width: 100%;
    height: 44px;
  }

  .ohf-generate-glyph {
    display: flex;
  }

  .ohf-kbd {
    display: none;
  }

  .ohf-selbar {
    border-radius: 18px;
    gap: 4px;
    width: 100%;
    padding: 7px;
  }

  .ohf-selbar-count {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .ohf-selact {
    min-width: 40px;
    height: 40px;
  }
}

@media (max-width: 400px) {
  .ohf-selstack {
    display: none;
  }

  .ohf-selbar-rule {
    margin: 0;
  }
}

@media (max-width: 360px) {
  .ohf-selact--wide {
    padding: 0;
  }

  .ohf-selact-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ohf *, .ohf :before, .ohf :after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .ohf-lamp {
    opacity: 1;
    animation: none;
  }

  .ohf-undo-drain, .ohf-skeleton:before, .ohf-generate-sheen {
    display: none;
  }
}

.ohf-avatar {
  background: var(--s3);
  border: 1px solid var(--line-2);
  color: var(--tx2);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  overflow: hidden;
}

.ohf-avatar--28 {
  width: var(--h-xs);
  height: var(--h-xs);
  font-size: 10px;
}

.ohf-avatar--32 {
  width: var(--h-sm);
  height: var(--h-sm);
}

.ohf-avatar--44 {
  width: 44px;
  height: 44px;
  font-size: var(--fs-base);
}

.ohf-avatar-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ohf-btn {
  height: var(--h-md);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-ctl);
  color: var(--tx2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  background: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.ohf-btn:hover:not(:disabled):not([aria-disabled="true"]), .ohf-btn[data-state="hover"] {
  background: var(--s3);
  color: var(--tx);
}

.ohf-btn:active:not(:disabled):not([aria-disabled="true"]), .ohf-btn[data-state="active"] {
  transform: scale(.96);
}

.ohf-btn:disabled, .ohf-btn[aria-disabled="true"], .ohf-btn[data-state="disabled"] {
  color: var(--tx-off);
  cursor: default;
  transform: none;
}

.ohf-btn[aria-expanded="true"] {
  background: var(--s3);
  border-color: var(--accent-32);
  color: var(--tx);
}

.ohf-btn--sm {
  height: var(--h-sm);
  border-radius: var(--radius-md);
  padding: 0 12px;
}

.ohf-btn--lg {
  height: var(--h-lg);
  padding: 0 14px;
}

.ohf-btn--primary {
  background: linear-gradient(180deg,#d9fe3e,var(--accent));
  color: var(--accent-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-display);
  border-color: #0000;
  box-shadow: 0 2px 8px #0006, inset 0 1px #fff6;
}

.ohf-btn--primary:hover:not(:disabled):not([aria-disabled="true"]), .ohf-btn--primary[data-state="hover"] {
  background: linear-gradient(180deg,#d9fe3e,var(--accent));
  color: var(--accent-ink);
  filter: brightness(1.06);
}

.ohf-btn--primary:disabled, .ohf-btn--primary[aria-disabled="true"], .ohf-btn--primary[data-state="disabled"] {
  background: var(--s3);
  color: var(--tx4);
  box-shadow: var(--shadow-1);
}

.ohf-btn--primary[data-busy="true"] {
  background: var(--accent-14);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-32);
}

.ohf-btn--model {
  background: var(--s3);
  color: var(--tx);
  box-shadow: var(--shadow-1);
}

.ohf-btn--model:hover:not(:disabled):not([aria-disabled="true"]), .ohf-btn--model[data-state="hover"] {
  background: var(--s4);
}

.ohf-btn--ghost {
  border-color: #0000;
}

.ohf-btn--danger {
  background: var(--danger-bg);
  border-color: var(--danger-line);
  color: var(--danger);
}

.ohf-btn--danger:hover:not(:disabled):not([aria-disabled="true"]), .ohf-btn--danger[data-state="hover"] {
  background: var(--danger-line);
  color: var(--danger);
}

.ohf-btn-icon {
  flex-shrink: 0;
  display: flex;
}

.ohf-btn-label {
  position: relative;
}

.ohf-btn[data-loading="true"] .ohf-btn-label {
  opacity: .7;
}

.ohf-chip[data-state="hover"] {
  background: var(--s3);
  color: var(--tx);
}

.ohf-chip[data-state="active"] {
  transform: scale(.96);
}

.ohf-chip:disabled, .ohf-chip[aria-disabled="true"], .ohf-chip[data-state="disabled"] {
  border-color: var(--line);
  color: var(--tx-off);
  background: none;
  transform: none;
}

.ohf-chip-dot {
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
}

.ohf-chip-ratio {
  opacity: .9;
  border: 1.5px solid;
  border-radius: 2px;
  flex-shrink: 0;
  display: block;
}

.ohf-credit {
  height: var(--h-sm);
  border-radius: var(--radius-md);
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--tx2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  font-size: 12px;
  display: inline-flex;
}

.ohf-credit-icon {
  color: var(--tx3);
  display: flex;
}

.ohf-credit-amount {
  font-weight: var(--fw-bold);
  color: var(--tx);
}

.ohf-icon-btn.ohf-icon-btn--28 {
  width: var(--h-xs);
  height: var(--h-xs);
}

.ohf-icon-btn.ohf-icon-btn--30 {
  width: 30px;
  height: 30px;
}

.ohf-icon-btn.ohf-icon-btn--36 {
  width: var(--h-md);
  height: var(--h-md);
}

.ohf-icon-btn[data-state="hover"] {
  background: var(--s3);
  color: var(--tx);
  border-color: var(--line-2);
}

.ohf-icon-btn[data-state="active"] {
  transform: scale(.96);
}

.ohf-icon-btn:disabled, .ohf-icon-btn[aria-disabled="true"], .ohf-icon-btn[data-state="disabled"] {
  color: var(--tx-off);
  background: var(--s1);
  border-color: var(--line);
  transform: none;
}

.ohf-icon-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]), .ohf-icon-btn--ghost[data-state="hover"] {
  background: var(--s3);
  border-color: #0000;
}

.ohf-icon-btn--ghost:disabled, .ohf-icon-btn--ghost[aria-disabled="true"], .ohf-icon-btn--ghost[data-state="disabled"] {
  background: none;
  border-color: #0000;
}

.ohf-dialog-panel {
  max-width: calc(100vw - 32px);
}

.ohf-dialog-head {
  align-items: center;
  gap: 10px;
  padding: 18px 18px 0;
  display: flex;
}

.ohf-dialog-title {
  min-width: 0;
  font-size: 16px;
  font-weight: var(--fw-display);
  letter-spacing: -.02em;
  flex: 1;
}

.ohf-dialog-body {
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 18px;
  display: flex;
}

.ohf-field-mark {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--tx4);
  margin-left: 6px;
}

.ohf-field-mark--req {
  color: var(--accent);
}

.ohf-field-counter {
  font-size: var(--fs-xs);
  color: var(--tx4);
  font-variant-numeric: tabular-nums;
}

.ohf-field-counter--over {
  color: var(--danger);
}

.ohf-field-hint, .ohf-field-error {
  font-size: var(--fs-xs);
  color: var(--tx4);
  line-height: 1.45;
}

.ohf-field-error {
  color: var(--danger);
}

.ohf-field--error .ohf-input {
  border-color: var(--danger-line);
}

.ohf-input {
  color: var(--tx);
}

.ohf-input::placeholder {
  color: var(--tx4);
}

.ohf-input[data-state="focus"] {
  border-color: var(--accent-32);
  box-shadow: 0 0 0 3px var(--accent-08);
}

.ohf-input[aria-invalid="true"] {
  border-color: var(--danger-line);
}

.ohf-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.ohf-input:disabled {
  color: var(--tx-off);
  border-color: var(--line);
  background: none;
}

.ohf-input--area {
  resize: none;
  min-height: 72px;
  padding: 10px 12px;
  line-height: 1.5;
}

.ohf-ctl[data-state="hover"] {
  background: var(--s3);
  color: var(--tx);
}

.ohf-ctl[data-state="active"] {
  transform: scale(.96);
}

.ohf-ctl:disabled, .ohf-ctl[aria-disabled="true"], .ohf-ctl[data-state="disabled"] {
  color: var(--tx-off);
  border-color: var(--line);
  background: none;
  transform: none;
}

.ohf-ctl-label {
  color: var(--tx3);
}

.ohf-ctl-caret {
  color: var(--tx3);
  margin-left: 1px;
  display: flex;
}

.ohf-popover--down {
  bottom: auto;
  top: var(--ohf-pop-y, calc(100% + 10px));
  transform-origin: 0 0;
}

.ohf-popover--static {
  animation: none;
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
}

.ohf-menu-row[data-state="hover"] {
  background: var(--s3);
  color: var(--tx);
}

.ohf-menu-row[data-state="hover"] .ohf-menu-ic {
  color: var(--accent);
}

.ohf-tabs--sm .ohf-tab {
  height: var(--h-xs);
  border-radius: 9px;
  padding: 0 12px;
  font-size: 12px;
}

.ohf-tabs--sm .ohf-thumb {
  border-radius: 9px;
}

.ohf-tabs-plate {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 3px;
  display: inline-flex;
}

.ohf-tab[data-state="hover"] {
  color: var(--tx);
  background: #ffffff09;
}

.ohf-tab[data-state="hover"] svg {
  color: var(--tx2);
}

.ohf-tab[data-state="active"] {
  transform: scale(.97);
}

.ohf-batch[data-state="hover"] {
  background: var(--s3);
}

.ohf-batch-step[data-state="hover"] {
  background: var(--s4);
  color: var(--tx);
}

.ohf-batch-step[data-state="active"] {
  transform: scale(.9);
}

.ohf-batch-max {
  margin-left: 2px;
}

.ohf-switch {
  border-radius: var(--radius-pill);
  background: var(--s4);
  width: 36px;
  height: 20px;
  transition: background var(--dur-base) ease;
  flex-shrink: 0;
  position: relative;
}

.ohf-switch:hover:not(:disabled):not([aria-disabled="true"]):not([aria-checked="true"]), .ohf-switch[data-state="hover"]:not([aria-checked="true"]) {
  background: var(--line-2);
}

.ohf-switch:active:not(:disabled):not([aria-disabled="true"]) .ohf-switch-knob, .ohf-switch[data-state="active"] .ohf-switch-knob {
  scale: .92;
}

.ohf-switch[aria-checked="true"] {
  background: var(--accent);
}

.ohf-switch:disabled {
  opacity: .45;
  cursor: default;
}

.ohf-switch-knob {
  background: var(--tx);
  width: 16px;
  height: 16px;
  box-shadow: var(--shadow-1);
  transition: translate var(--dur-slow) var(--ease),background var(--dur-base) ease,scale var(--dur-base) var(--ease);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.ohf-switch[aria-checked="true"] .ohf-switch-knob {
  background: var(--bg);
  translate: 16px;
}

.ohf-tag {
  border-radius: var(--radius-sm);
  background: var(--s3);
  height: 20px;
  color: var(--tx3);
  font-size: 11px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  align-items: center;
  padding: 0 7px;
  display: inline-flex;
}

.ohf-tag--accent {
  background: var(--accent-14);
  color: var(--accent);
}

.ohf-tag--muted {
  background: var(--s2);
  color: var(--tx4);
}

.ohf-frame {
  background: var(--s3);
  border-radius: 5px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.ohf-frame--pending {
  background: var(--s2);
  border: 1px solid var(--line-2);
}

.ohf-frame--failed {
  background: var(--danger-bg);
  border: 1px solid var(--danger-line);
  color: var(--danger);
  justify-content: center;
  align-items: center;
  display: flex;
}

.ohf-frame--empty {
  border: 1px dashed var(--line-2);
  background: none;
}

.ohf-frame--flat {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 18% 14%;
  display: flex;
}

.ohf-frame-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ohf-frame-lamp {
  background: var(--accent);
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3px var(--accent-14);
  border-radius: 50%;
  animation: 2.4s ease-in-out infinite ohf-pulse;
  position: absolute;
  top: 5px;
  right: 5px;
}

.ohf-frame-line {
  background: var(--s4);
  border-radius: 3px;
  height: 5px;
  position: absolute;
  left: 14%;
}

.ohf-frame-line--1 {
  bottom: 20%;
  right: 14%;
}

.ohf-frame-line--2 {
  bottom: 36%;
  right: 40%;
}

.ohf-frame-icon {
  display: flex;
}

.ohf-frame-bar {
  background: #ffffffd9;
  border-radius: 2px;
  height: 4px;
}

.ohf-frame-bar--1 {
  width: 70%;
}

.ohf-frame-bar--2 {
  width: 55%;
}

.ohf-frame-bar--pill {
  background: none;
  border: 1px solid;
  border-radius: 3px;
  width: 40%;
  height: 6px;
  margin-top: 2px;
}

.ohf-tip[data-state="hover"][data-tip]:after {
  opacity: 1;
  translate: -50%;
}

.ohf-tip--start[data-state="hover"][data-tip]:after, .ohf-tip--end[data-state="hover"][data-tip]:after {
  translate: 0;
}

.ohf-astrip {
  border-top: 1px solid var(--line);
  background: var(--rail);
  flex-shrink: 0;
  padding: 0 20px;
}

.ohf-astrip-notice {
  padding-top: 10px;
}

.ohf-astrip-row {
  align-items: center;
  gap: 10px;
  height: 60px;
  display: flex;
}

.ohf-astrip-status {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--tx2);
  align-items: center;
  gap: 8px;
  display: flex;
}

.ohf-astrip-spacer {
  flex: auto;
  min-width: 0;
}

.ohf-brief {
  border-radius: var(--radius-lg);
  background: var(--s2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2),var(--glint);
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 14px;
  display: flex;
}

.ohf-brief-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-strong);
  color: var(--tx3);
  flex-shrink: 0;
}

.ohf-brief-topic {
  min-width: 0;
  color: var(--tx);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: 13.5px;
  overflow: hidden;
}

.ohf-canvas {
  background: var(--rail);
  border-left: 1px solid var(--line);
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px 20px;
  display: flex;
  position: relative;
}

.ohf-canvas-head {
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ohf-canvas-spacer {
  flex: auto;
}

.ohf-canvas-pager {
  font-size: var(--fs-sm);
  color: var(--tx2);
  font-variant-numeric: tabular-nums;
}

.ohf-canvas-stage {
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 0;
  display: flex;
}

.ohf-canvas-stage .ohf-slide {
  border-radius: var(--radius-ctl);
  width: min(100%, 448px);
  box-shadow: var(--shadow-3);
}

.ohf-canvas-foot {
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  display: flex;
}

.ohf-canvas-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.ohf-canvas-label {
  width: 44px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-strong);
  color: var(--tx3);
}

.ohf-canvas-actions {
  gap: 8px;
  display: flex;
}

.ohf-canvas-actions > * {
  flex: 1;
}

.ohf-canvas-hint {
  font-size: var(--fs-xs);
  color: var(--tx4);
}

.ohf-fcard {
  text-align: left;
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--tx);
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  border-radius: 12px;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  display: flex;
}

.ohf-fcard:hover:not(:disabled):not([aria-disabled="true"]), .ohf-fcard[data-state="hover"] {
  background: var(--s2);
  border-color: var(--line-2);
}

.ohf-fcard:active:not(:disabled):not([aria-disabled="true"]), .ohf-fcard[data-state="active"] {
  transform: scale(.98);
}

.ohf-fcard[aria-pressed="true"] {
  background: var(--accent-08);
  border-color: var(--accent-32);
}

.ohf-fcard[aria-pressed="true"] .ohf-fcard-icon {
  color: var(--accent);
}

.ohf-fcard:disabled {
  color: var(--tx-off);
  cursor: default;
  background: none;
}

.ohf-fcard:disabled .ohf-fcard-icon, .ohf-fcard:disabled .ohf-fcard-desc {
  color: var(--tx-off);
}

.ohf-fcard-head {
  align-items: center;
  gap: 8px;
  width: 100%;
  display: flex;
}

.ohf-fcard-icon {
  color: var(--tx2);
  display: flex;
}

.ohf-fcard-name {
  font-size: 13.5px;
  font-weight: var(--fw-bold);
}

.ohf-fcard-spacer {
  flex: 1;
}

.ohf-fcard-check {
  color: var(--accent);
  display: flex;
}

.ohf-fcard-desc {
  color: var(--tx3);
  font-size: 12px;
  line-height: 1.45;
}

.ohf-pcard {
  border-radius: var(--radius-lg);
  background: var(--s1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1),var(--glint);
  color: var(--tx);
  text-align: left;
  transition: border-color var(--dur-base) ease,background var(--dur-base) ease,transform var(--dur-base) var(--ease);
  flex-direction: column;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.ohf-pcard:hover:not(:disabled):not([aria-disabled="true"]), .ohf-pcard[data-state="hover"] {
  border-color: var(--line-2);
  background: var(--s2);
}

.ohf-pcard:active:not(:disabled):not([aria-disabled="true"]), .ohf-pcard[data-state="active"] {
  transform: scale(.98);
}

.ohf-pcard-deck {
  gap: 6px;
  padding: 12px 12px 0;
  display: flex;
}

.ohf-pcard-body {
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  display: flex;
}

.ohf-pcard-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-pcard-meta {
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  display: flex;
}

.ohf-pcard-spacer {
  flex: 1;
}

.ohf-pcard-status {
  font-size: var(--fs-xs);
  color: var(--tx2);
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.ohf-pcard-status--live {
  color: var(--accent);
}

.ohf-pcard-status--draft {
  color: var(--tx3);
}

.ohf-pcard-lamp {
  background: var(--accent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.ohf-pcard-cover {
  aspect-ratio: 16 / 10;
  background: var(--surface-raised);
  padding: var(--sp-6);
  place-items: center;
  display: grid;
  overflow: hidden;
}

.ohf-pcard-cover .ohf-slide {
  width: 52%;
  box-shadow: var(--shadow-2);
  transform: rotate(-4deg);
}

.ohf-pcard:has(.ohf-pcard-cover) .ohf-pcard-deck {
  padding-right: var(--sp-5);
  align-self: flex-end;
  margin-top: -34px;
  position: relative;
}

.ohf-pcard:has(.ohf-pcard-cover) .ohf-pcard-body {
  gap: var(--sp-3);
  padding: var(--sp-5);
}

.ohf-pcard:has(.ohf-pcard-cover) .ohf-pcard-meta {
  row-gap: var(--sp-3);
  flex-wrap: wrap;
}

.ohf-phead {
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 20px 0 12px;
  display: flex;
}

.ohf-phead-back {
  width: var(--h-sm);
  height: var(--h-sm);
  border-radius: var(--radius-md);
  color: var(--tx3);
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  justify-content: center;
  align-items: center;
  display: flex;
}

.ohf-phead-back:hover:not(:disabled):not([aria-disabled="true"]), .ohf-phead-back[data-state="hover"] {
  background: var(--s3);
  color: var(--tx);
}

.ohf-phead-back:active:not(:disabled):not([aria-disabled="true"]), .ohf-phead-back[data-state="active"] {
  transform: scale(.96);
}

.ohf-phead-back:disabled, .ohf-phead-back[aria-disabled="true"], .ohf-phead-back[data-state="disabled"] {
  color: var(--tx-off);
  cursor: default;
  transform: none;
}

.ohf-phead-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  color: var(--tx);
  white-space: nowrap;
}

.ohf-phead-status {
  color: var(--tx4);
  font-size: var(--fs-xs);
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  display: flex;
}

.ohf-phead-spacer {
  flex: auto;
  min-width: 0;
}

.ohf-sb-row {
  border-left: 2px solid #0000;
  border-bottom: 1px solid var(--line);
  height: 90px;
  transition: background var(--dur-base) ease;
  grid-template-columns: 28px 56px minmax(0, 1.15fr) minmax(0, 1fr) 92px;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 12px;
  display: grid;
  position: relative;
}

.ohf-sb-row:hover, .ohf-sb-row[data-state="hover"] {
  background: var(--rail);
}

.ohf-sb-row[data-state="active"] {
  background: var(--s1);
}

.ohf-sb-row:has(.ohf-sb-select:active) {
  background: var(--s1);
}

.ohf-sb-row--selected {
  background: var(--s1);
  border-left-color: var(--accent);
}

.ohf-sb-row--editing {
  background: var(--s1);
  box-shadow: inset 0 0 0 1px var(--accent-32);
}

.ohf-sb-row--dragging {
  opacity: .6;
  background: var(--s2);
  box-shadow: var(--shadow-2);
}

.ohf-sb-num {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--tx3);
  font-variant-numeric: tabular-nums;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  display: flex;
}

.ohf-sb-row--selected .ohf-sb-num {
  color: var(--tx);
  font-weight: var(--fw-bold);
}

.ohf-sb-grip {
  color: #0000;
  display: flex;
}

.ohf-sb-row--selected .ohf-sb-grip, .ohf-sb-row:hover .ohf-sb-grip, .ohf-sb-row[data-state="hover"] .ohf-sb-grip, .ohf-sb-row--dragging .ohf-sb-grip {
  color: var(--tx4);
}

.ohf-sb-text {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  display: flex;
}

.ohf-sb-title {
  max-width: 100%;
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--tx);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-sb-select {
  text-align: left;
  width: 100%;
  display: block;
}

.ohf-sb-select:after {
  content: "";
  position: absolute;
  inset: 0;
}

.ohf-sb-select:focus-visible {
  outline: none;
}

.ohf-sb-select:focus-visible:after {
  outline: 2px solid var(--accent-32);
  outline-offset: -2px;
}

.ohf-sb-sub {
  max-width: 100%;
  color: var(--tx3);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}

.ohf-sb-sub-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-sb-counter {
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ohf-sb-counter--over {
  color: var(--danger);
}

.ohf-sb-side {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.ohf-sb-prompt {
  border-radius: var(--radius-md);
  background: var(--s1);
  border: 1px solid var(--line);
  min-width: 0;
  height: 34px;
  color: var(--tx2);
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: 12px;
  display: flex;
}

.ohf-sb-row--selected .ohf-sb-prompt {
  background: var(--s2);
}

.ohf-sb-prompt-ic {
  color: var(--tx4);
  flex-shrink: 0;
  display: flex;
}

.ohf-sb-prompt-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-sb-status {
  min-width: 0;
  color: var(--tx4);
  white-space: nowrap;
  text-overflow: ellipsis;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
  overflow: hidden;
}

.ohf-sb-status--live {
  color: var(--tx3);
}

.ohf-sb-status--danger {
  color: var(--danger);
}

.ohf-sb-lamp {
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  animation: 2.4s ease-in-out infinite ohf-pulse;
}

.ohf-sb-status-action {
  z-index: 1;
  position: relative;
}

.ohf-sb-actions {
  z-index: 1;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  display: flex;
  position: relative;
}

.ohf-scard {
  text-align: left;
  background: var(--s1);
  border: 1px solid var(--line);
  color: var(--tx);
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  border-radius: 12px;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  display: flex;
}

.ohf-scard:hover:not(:disabled):not([aria-disabled="true"]), .ohf-scard[data-state="hover"] {
  border-color: var(--line-2);
}

.ohf-scard:active:not(:disabled):not([aria-disabled="true"]), .ohf-scard[data-state="active"] {
  transform: scale(.98);
}

.ohf-scard[aria-pressed="true"] {
  background: var(--accent-08);
  border-color: var(--accent-32);
}

.ohf-scard-preview {
  gap: 6px;
  display: flex;
}

.ohf-scard-preview > * {
  flex: 1;
  min-width: 0;
}

.ohf-scard-preview .ohf-slide {
  border-radius: var(--radius-sm);
}

.ohf-scard-row {
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  display: flex;
}

.ohf-scard-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.ohf-scard-spacer {
  flex: 1;
}

.ohf-scard-check {
  color: var(--accent);
  display: flex;
}

.ohf-scard-desc {
  color: var(--tx3);
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.4;
}

.ohf-appbar {
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 20px;
  display: flex;
}

.ohf-appbar-brand {
  color: var(--tx);
  align-items: center;
  gap: 9px;
  text-decoration: none;
  display: flex;
}

.ohf-appbar-mark {
  border-radius: var(--radius-sm);
  background: var(--accent);
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
}

.ohf-appbar-mark > span {
  background: var(--accent-ink);
  border-radius: 2px;
  width: 8px;
  height: 8px;
}

.ohf-appbar-name {
  font-size: 13.5px;
  font-weight: var(--fw-display);
  letter-spacing: -.01em;
}

.ohf-appbar-spacer {
  flex: auto;
  min-width: 0;
}

.ohf-slide {
  background: var(--sl-bg);
  width: 100%;
  color: var(--sl-tx);
  font-family: var(--sl-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}

.ohf-slide-img {
  object-fit: cover;
  object-position: var(--sl-image-position, center);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.ohf-slide-dim {
  background: rgba(12,18,32,var(--sl-dim, .5));
  position: absolute;
  inset: 0;
}

.ohf-slide-dim--grad {
  background: linear-gradient(#08101705 15%, #08101759 42%, #081017e0);
}

.ohf-slide-body {
  flex-direction: column;
  padding: 9cqw 8cqw 16cqw;
  display: flex;
  position: absolute;
  inset: 0;
}

.ohf-slide--start .ohf-slide-body {
  justify-content: flex-start;
}

.ohf-slide--mid .ohf-slide-body {
  justify-content: center;
}

.ohf-slide--end .ohf-slide-body {
  justify-content: flex-end;
}

.ohf-slide-kicker {
  background: var(--sl-acc);
  color: var(--sl-acc-ink);
  border-radius: 100cqw;
  align-self: flex-start;
  margin-bottom: 3.2cqw;
  padding: 1.1cqw 2.8cqw;
  font-size: 3.4cqw;
  font-weight: 700;
}

.ohf-slide-title, .ohf-slide-h {
  font-family: var(--sl-head);
  font-weight: var(--sl-head-weight);
  letter-spacing: var(--sl-head-ls);
  line-height: var(--sl-head-lh);
  text-wrap: balance;
}

.ohf-slide-title {
  font-size: 10.2cqw;
}

.ohf-slide-title--md {
  font-size: 8.4cqw;
}

.ohf-slide-h {
  font-size: 7.4cqw;
}

.ohf-slide-sub {
  opacity: .9;
  margin-top: 2.6cqw;
  font-size: 4.2cqw;
  font-weight: 500;
}

.ohf-slide-text {
  opacity: .95;
  margin-top: 4cqw;
  font-size: 4.1cqw;
  font-weight: 500;
  line-height: 1.6;
}

.ohf-slide-list {
  margin-top: 5cqw;
}

.ohf-slide-item {
  border-top: .3cqw solid var(--sl-rule);
  align-items: baseline;
  gap: 3.4cqw;
  padding: 3.3cqw 0;
  font-size: 4.1cqw;
  font-weight: 600;
  display: flex;
}

.ohf-slide-item:last-child {
  border-bottom: .3cqw solid var(--sl-rule);
}

.ohf-slide-num {
  font-variant-numeric: tabular-nums;
  color: var(--sl-acc);
  font-style: normal;
  font-weight: 800;
}

.ohf-slide-item-label {
  flex: 1;
  min-width: 0;
}

.ohf-slide-item-value {
  opacity: .75;
  margin-left: auto;
  font-size: 3.8cqw;
  font-weight: 500;
}

.ohf-slide-qmark {
  height: 11cqw;
  font-family: var(--sl-head);
  color: var(--sl-acc);
  font-size: 22cqw;
  font-weight: 800;
  line-height: .7;
  display: block;
}

.ohf-slide-quote {
  font-family: var(--sl-head);
  letter-spacing: -.02em;
  text-wrap: balance;
  font-size: 6.8cqw;
  font-weight: 700;
  line-height: 1.4;
}

.ohf-slide-src {
  opacity: .8;
  margin-top: 4cqw;
  font-size: 3.8cqw;
}

.ohf-slide-pill {
  border: .4cqw solid var(--sl-acc);
  color: var(--sl-acc);
  border-radius: 100cqw;
  align-self: flex-start;
  margin-top: 6cqw;
  padding: 1.8cqw 4.4cqw;
  font-size: 4cqw;
  font-weight: 700;
}

.ohf-slide-foot {
  font-variant-numeric: tabular-nums;
  opacity: .85;
  justify-content: space-between;
  font-size: 3.1cqw;
  font-weight: 500;
  display: flex;
  position: absolute;
  bottom: 5cqw;
  left: 8cqw;
  right: 8cqw;
}

.ohf-slide-edition {
  z-index: 1;
  border-bottom: .2cqw solid var(--sl-rule);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-bottom: 2.5cqw;
  font-size: 2.6cqw;
  font-weight: 600;
  position: absolute;
  top: 6cqw;
  left: 8cqw;
  right: 8cqw;
}

.ohf-slide-foot {
  border-top: .2cqw solid var(--sl-rule);
  letter-spacing: .025em;
  padding-top: 2.4cqw;
  font-size: 2.7cqw;
}

.ohf-slide-sub {
  max-width: 30ch;
  line-height: 1.55;
}

.ohf-slide-kicker {
  letter-spacing: .06em;
  margin-bottom: 4cqw;
  font-size: 2.9cqw;
}

.ohf-slide:where([data-preset="editorial"]) .ohf-slide-kicker {
  color: inherit;
  border-bottom: .3cqw solid var(--sl-acc);
  background: none;
  border-radius: 0;
  padding: 0 0 2cqw;
}

.ohf-slide:where([data-preset="editorial"]) .ohf-slide-title {
  font-size: 9.5cqw;
  line-height: 1.32;
}

.ohf-slide:where([data-preset="editorial"]) .ohf-slide-pill {
  border-width: 0 0 .25cqw;
  border-radius: 0;
  padding: 0 0 2cqw;
}

.ohf-slide:where([data-preset="impact"]) .ohf-slide-kicker {
  border-radius: 0;
}

.ohf-slide:where([data-preset="impact"]) .ohf-slide-title {
  font-size: 11.2cqw;
  line-height: 1.12;
}

.ohf-slide:where([data-preset="impact"]) .ohf-slide-h {
  font-size: 8.6cqw;
}

.ohf-slide:where([data-preset="impact"]) .ohf-slide-pill {
  background: var(--sl-acc);
  color: var(--sl-acc-ink);
  border-radius: 0;
}

.ohf-slide:where([data-preset="soft"]) .ohf-slide-title {
  font-size: 9cqw;
  line-height: 1.35;
}

.ohf-slide:where([data-preset="soft"]) .ohf-slide-kicker {
  color: inherit;
  background: none;
  padding: 0;
}

.ohf-slide:where([data-preset="soft"]) .ohf-slide-body {
  padding-left: 10cqw;
  padding-right: 10cqw;
}

.ohf-slide--split .ohf-slide-img {
  height: 43%;
  top: 0;
}

.ohf-slide--split .ohf-slide-body {
  justify-content: center;
  padding-top: 5cqw;
  top: 43%;
}

.ohf-slide--split .ohf-slide-edition {
  color: #fff;
  text-shadow: 0 1px 6px #00000080;
  border-color: #ffffff59;
  top: 4cqw;
}

.ohf-slide--split .ohf-slide-title, .ohf-slide--split .ohf-slide-h {
  font-size: 7.8cqw;
}

.ohf-slide--split .ohf-slide-kicker {
  margin-bottom: 2cqw;
  font-size: 2.5cqw;
}

.ohf-slide--split .ohf-slide-sub {
  font-size: 3.4cqw;
}

.ohf-slide--split .ohf-slide-text {
  margin-top: 2.5cqw;
  font-size: 3.6cqw;
}

.ohf-slide--inset .ohf-slide-img {
  width: 84%;
  height: 38%;
  inset: 14cqw 8cqw auto;
}

.ohf-slide--inset .ohf-slide-body {
  justify-content: center;
  padding-top: 5cqw;
  top: 48%;
}

.ohf-slide--inset .ohf-slide-title, .ohf-slide--inset .ohf-slide-h {
  font-size: 7.2cqw;
}

.ohf-slide--inset .ohf-slide-sub, .ohf-slide--inset .ohf-slide-text {
  font-size: 3.5cqw;
}

.ohf-slide--inset .ohf-slide-kicker {
  margin-bottom: 2cqw;
  font-size: 2.5cqw;
}

.ohf-slide[data-ratio="1:1"] .ohf-slide-body {
  padding-top: 12cqw;
  padding-bottom: 15cqw;
}

.ohf-slide[data-ratio="1:1"] .ohf-slide-title {
  font-size: 8.6cqw;
}

.ohf-slide[data-ratio="1:1"] .ohf-slide-text {
  font-size: 3.8cqw;
  line-height: 1.5;
}

.ohf-slide[data-ratio="1:1"] .ohf-slide-h {
  font-size: 6.8cqw;
}

.ohf-slide[data-ratio="1:1"] .ohf-slide-item {
  padding: 2.2cqw 0;
  font-size: 3.8cqw;
}

.ohf-slide[data-ratio="1:1"].ohf-slide--split .ohf-slide-body, .ohf-slide[data-ratio="1:1"].ohf-slide--inset .ohf-slide-body {
  padding-top: 3cqw;
}

.ohf-slide[data-ratio="1:1"].ohf-slide--split .ohf-slide-title, .ohf-slide[data-ratio="1:1"].ohf-slide--inset .ohf-slide-title {
  font-size: 6.4cqw;
}

.ohf-slide[data-ratio="1:1"].ohf-slide--split .ohf-slide-sub, .ohf-slide[data-ratio="1:1"].ohf-slide--inset .ohf-slide-sub {
  margin-top: 1.5cqw;
  font-size: 3cqw;
}

.ohf-slide-metric {
  font-family: var(--sl-head);
  letter-spacing: -.06em;
  color: var(--sl-acc);
  font-variant-numeric: tabular-nums;
  margin-bottom: 7cqw;
  font-size: 25cqw;
  line-height: 1;
}

.ohf-slide-metric span {
  letter-spacing: 0;
  margin-left: 2cqw;
  font-size: 6cqw;
}

.ohf-slide-compare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5cqw;
  margin-top: 8cqw;
  display: grid;
}

.ohf-slide-compare > div {
  border-top: .4cqw solid var(--sl-acc);
  padding-top: 4cqw;
}

.ohf-slide-compare h3 {
  margin-bottom: 3cqw;
  font-size: 5.5cqw;
}

.ohf-slide-compare p {
  font-size: 4cqw;
  line-height: 1.7;
}

.ohf-search-field {
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: 0 var(--sp-4);
  height: var(--h-lg);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-ctl);
  background: var(--surface-panel);
  color: var(--text-muted);
  display: flex;
}

.ohf-search-field:focus-within {
  border-color: var(--focus-ring);
}

.ohf-search-field input {
  appearance: none;
  width: 100%;
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  background: none;
  border: 0;
  outline: none;
}

.ohf-search-field input::-webkit-search-cancel-button {
  display: none;
}

.ohf-search-field button {
  padding: var(--sp-1);
  border-radius: var(--radius-xs);
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  display: flex;
}

.ohf-search-field button:hover:not(:disabled):not([aria-disabled="true"]), .ohf-search-field button[data-state="hover"] {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.ohf-search-field button:active:not(:disabled):not([aria-disabled="true"]), .ohf-search-field button[data-state="active"] {
  transform: scale(.96);
}

.ohf-search-field button:disabled, .ohf-search-field button[aria-disabled="true"], .ohf-search-field button[data-state="disabled"] {
  color: var(--tx-off);
  cursor: default;
  transform: none;
}

.ohf .ohf-search-field input:focus-visible {
  outline: none;
}

.ohf-status {
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex;
}

.ohf-status i {
  background: currentColor;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.ohf-status--success {
  color: var(--success);
}

.ohf-status--warning {
  color: var(--warning);
}

.ohf-status--danger {
  color: var(--danger);
}

.ohf-status--live {
  color: var(--accent);
  background: var(--accent-08);
}

.ohf-status--info {
  color: var(--info);
}

.ohf-progress {
  width: 100%;
}

.ohf-progress-label {
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  display: flex;
}

.ohf-progress-track {
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  height: 3px;
  overflow: hidden;
}

.ohf-progress-track i {
  height: 100%;
  width: var(--progress);
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease);
  display: block;
}

.ohf-progress-track[data-indeterminate] i {
  animation: 1.5s ease-in-out infinite alternate ohf-progress-travel;
}

.ohf-progress--danger i {
  background: var(--danger);
}

@keyframes ohf-progress-travel {
  to {
    transform: translate(185%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ohf-progress-track i {
    transition: none;
    animation: none;
  }
}

.ohf-empty-state {
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-section) var(--sp-6);
  text-align: center;
  flex-direction: column;
  display: flex;
}

.ohf-empty-state h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.ohf-empty-state p {
  max-width: 36ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

.ohf-empty-state-icon {
  width: var(--sp-section);
  height: var(--sp-section);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  background: var(--surface-raised);
  place-items: center;
  display: grid;
}

.ohf-pagination {
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
}

.ohf-pagination > span {
  text-align: center;
  min-width: 5ch;
}

.ohf-pagination > span > span {
  color: var(--text-muted);
}

.ohf-inspector {
  border-top: 1px solid var(--border-subtle);
  padding: var(--sp-5) 0;
}

.ohf-inspector summary {
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  justify-content: space-between;
  align-items: center;
  list-style: none;
  display: flex;
}

.ohf-inspector summary::-webkit-details-marker {
  display: none;
}

.ohf-inspector summary svg {
  transform: rotate(-90deg);
}

.ohf-inspector[open] summary svg {
  transform: none;
}

.ohf-inspector > p {
  margin-top: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.ohf-inspector-content {
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  flex-direction: column;
  display: flex;
}

.ohf-asset-card {
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  text-align: left;
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  flex-direction: column;
  display: flex;
}

.ohf-asset-card:hover:not(:disabled):not([aria-disabled="true"]), .ohf-asset-card[data-state="hover"] {
  background: var(--surface-raised);
  color: var(--text-primary);
}

.ohf-asset-card:active:not(:disabled):not([aria-disabled="true"]), .ohf-asset-card[data-state="active"] {
  transform: scale(.96);
}

.ohf-asset-card:disabled, .ohf-asset-card[aria-disabled="true"], .ohf-asset-card[data-state="disabled"] {
  color: var(--tx-off);
  cursor: default;
  transform: none;
}

.ohf-asset-card[aria-pressed="true"] {
  border-color: var(--accent);
}

.ohf-asset-card-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  width: 100%;
  color: var(--text-muted);
  background: var(--surface-raised);
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.ohf-asset-card-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ohf-asset-card-check {
  right: var(--sp-3);
  top: var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  width: 22px;
  height: 22px;
  color: var(--accent-ink);
  place-items: center;
  display: grid;
  position: absolute;
}

.ohf-asset-card-title {
  font-size: var(--fs-sm);
  color: var(--text-primary);
  padding: 0 var(--sp-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-asset-card-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: 0 var(--sp-2) var(--sp-2);
}

.ohf-timeline-clip {
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-2);
  background: var(--surface-raised);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-align: left;
  transition: background var(--dur-base) ease,border-color var(--dur-base) ease,color var(--dur-base) ease,transform var(--dur-base) var(--ease);
  display: flex;
}

.ohf-timeline-clip:hover:not(:disabled):not([aria-disabled="true"]), .ohf-timeline-clip[data-state="hover"] {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.ohf-timeline-clip:active:not(:disabled):not([aria-disabled="true"]), .ohf-timeline-clip[data-state="active"] {
  transform: scale(.96);
}

.ohf-timeline-clip:disabled, .ohf-timeline-clip[aria-disabled="true"], .ohf-timeline-clip[data-state="disabled"] {
  color: var(--tx-off);
  cursor: default;
  transform: none;
}

.ohf-timeline-clip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-08);
}

.ohf-timeline-clip img {
  width: 42px;
  height: var(--h-bar);
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.ohf-timeline-clip > span {
  min-width: 0;
  font-size: var(--fs-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ohf-timeline-clip small {
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  display: block;
}

.ohf-sr-only {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.ohf :is(button, a, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.ohf-btn {
  box-shadow: var(--glint);
}

.ohf-btn--primary {
  background: var(--accent);
  box-shadow: var(--shadow-1),var(--glint);
}

.ohf-btn--primary:hover:not(:disabled):not([aria-disabled="true"]), .ohf-btn--primary[data-state="hover"] {
  background: var(--accent);
}

.ohf-btn--primary:disabled, .ohf-btn--primary[aria-disabled="true"], .ohf-btn--primary[data-state="disabled"] {
  background: var(--s3);
}

.ohf-btn--primary[data-busy="true"] {
  background: var(--accent-14);
}

.ohf-btn--ghost {
  box-shadow: none;
}

.ohf-input {
  line-height: 1.5;
}

.ohf-chip {
  box-shadow: none;
}

.ohf-appbar, .ohf-phead {
  background: var(--surface-canvas);
}

.ohf-pcard {
  transition: border-color var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease);
}

.ohf-pcard:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}

.ohf-pcard:active {
  transform: translateY(0);
}

.ohf-canvas {
  background: var(--surface-panel);
}

.ohf-canvas-stage {
  padding: var(--sp-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-canvas);
}

.ohf-canvas-stage .ohf-slide {
  border-radius: 2px;
}

.ohf-dialog-panel {
  border-radius: var(--radius-panel);
}

@media (prefers-reduced-motion: reduce) {
  .ohf *, .ohf :before, .ohf :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* [project]/src/app/base.css [app-client] (css) */
html {
  -webkit-text-size-adjust: 100%;
}

html, body {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background: #0a0a0b;
  margin: 0;
  padding: 0;
}

/* [project]/src/editors/workspace.css [app-client] (css) */
@font-face {
  font-family: Pretendard Variable;
  src: url("/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.workspace {
  --font-ohf-inter: "Pretendard Variable";
  min-height: 100svh;
}

:where(.workspace) a:where(:not(.ohf-btn)) {
  color: inherit;
  text-decoration: none;
}

.workspace .ohf-studio {
  font-family: var(--font-ui);
}

.ws-settings-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  display: grid;
}

.ws-settings-heading, .ws-settings-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ws-settings-heading {
  justify-content: space-between;
}

.ws-settings-result {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
}

.ws-settings-result p {
  margin-top: 12px;
  line-height: 1.6;
}

.ws-settings-docs {
  font-size: 13px;
  text-decoration: underline !important;
}

.ws-admin-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
  display: grid;
}

.ws-admin-stats strong {
  font-variant-numeric: tabular-nums;
  margin-top: 12px;
  font-size: 28px;
  display: block;
}

.ws-table-scroll {
  overflow-x: auto;
}

.ws-admin-table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
  font-size: 13px;
}

.ws-admin-table th, .ws-admin-table td {
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  padding: 14px 10px;
}

.ws-admin-table th {
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 500;
}

.ws-admin-table small {
  color: var(--text-muted);
  margin-top: 6px;
  display: block;
}

.ws-admin-ledger {
  margin: 24px 0;
}

@media (max-width: 760px) {
  .ws-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-nav nav {
    gap: 16px;
  }

  .ws-settings-grid {
    grid-template-columns: 1fr;
  }
}

.ws-nav {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-canvas);
  align-items: center;
  gap: 40px;
  height: 72px;
  padding: 0 32px;
  display: flex;
}

.ws-brand {
  letter-spacing: -.5px;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  display: flex;
}

.ws-brand small {
  color: var(--text-muted);
  letter-spacing: 2px;
  margin-left: 8px;
  font-size: 9px;
}

.ws-mark {
  border: 1px solid var(--text-secondary);
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 15px;
  display: grid;
}

.ws-nav nav {
  height: 100%;
  color: var(--text-secondary);
  align-items: center;
  gap: 26px;
  font-size: 13px;
  display: flex;
}

.ws-nav nav a {
  border-bottom: 2px solid #0000;
  align-items: center;
  height: 100%;
  display: flex;
}

.ws-nav nav a[aria-current] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.ws-nav-account {
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-size: 12px;
  display: flex;
}

.ws-page {
  max-width: 1280px;
  margin: auto;
  padding: 56px 40px 80px;
}

.ws-page-heading {
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
  display: flex;
}

.ws-page h1 {
  letter-spacing: -1.1px;
  margin: 10px 0 12px;
  font-size: 34px;
  font-weight: 650;
  line-height: 1.3;
}

.ws-page-heading p {
  color: var(--text-secondary);
  font-size: 14px;
}

.ws-eyebrow {
  letter-spacing: 1.8px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}

.ws-muted {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}

.ws-back {
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-size: 12px;
  display: inline-block;
}

.ws-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 28px;
  display: flex;
}

.ws-card h2 {
  letter-spacing: -.5px;
  font-size: 19px;
  font-weight: 600;
}

.ws-form {
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  display: flex;
}

.ws-form > h2 {
  letter-spacing: -.8px;
  font-size: 26px;
  font-weight: 600;
}

.workspace select {
  appearance: auto;
  width: 100%;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-canvas);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  min-height: 38px;
  padding: 8px 10px;
  font-size: 12px;
}

.workspace input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.workspace input, .workspace textarea {
  max-width: 100%;
}

.ws-toolbar, .ws-wrap {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.ws-toolbar {
  justify-content: space-between;
  margin: 24px 0;
}

.ws-toolbar .ohf-search-field {
  width: 260px;
}

.ws-project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
  display: grid;
}

.ws-project-grid .ohf-pcard-cover {
  background: var(--surface-panel);
  justify-content: center;
  height: 280px;
  padding: 26px;
  display: flex;
  overflow: hidden;
}

.ws-project-grid .ohf-slide {
  width: 190px;
  box-shadow: var(--shadow-2);
  flex: none;
  align-self: flex-start;
}

.ws-project-grid .ohf-pcard-deck {
  height: auto;
  padding: 12px 18px 0;
  display: block;
}

.ws-project-grid .ohf-pcard-title {
  font-size: 16px;
}

.ws-project-grid .ohf-pcard {
  min-width: 0;
  overflow: hidden;
}

.ws-new-grid {
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  display: grid;
}

.ws-account-grid {
  grid-template-columns: 1fr 1.3fr;
  gap: 24px;
  margin-bottom: 24px;
  display: grid;
}

.ws-balance {
  letter-spacing: -3px;
  font-size: 60px;
  font-weight: 550;
}

.ws-page > .ws-card {
  margin-bottom: 24px;
}

.ws-ledger > div {
  border-bottom: 1px solid var(--border-subtle);
  grid-template-columns: 170px 1fr 60px;
  gap: 16px;
  padding: 16px 0;
  font-size: 12px;
  display: grid;
}

.ws-ledger time {
  color: var(--text-muted);
}

.ws-ledger b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ws-job {
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  display: flex;
}

.ws-auth {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
  align-items: center;
  gap: 80px;
  max-width: 1280px;
  min-height: calc(100svh - 72px);
  margin: auto;
  padding: 64px 40px;
  display: grid;
}

.ws-auth-story h1 {
  letter-spacing: -1.8px;
  margin: 18px 0 20px;
  font-size: clamp(36px, 3.7vw, 48px);
  font-weight: 600;
  line-height: 1.25;
}

.ws-auth-story h1 em {
  color: var(--accent);
  font-style: normal;
}

.ws-auth-story p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

.ws-auth-showcase {
  margin: 32px 0 0;
}

.ws-auth-showcase-heading {
  color: var(--text-secondary);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12px;
  display: flex;
}

.ws-auth-example {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 10px;
}

.ws-auth-film {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  position: relative;
  overflow: hidden;
}

.ws-auth-film video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.ws-auth-playback, .ws-auth-sound {
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface-canvas);
  min-height: 36px;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 11px;
  display: flex;
}

.ws-auth-playback:hover, .ws-auth-sound:hover {
  background: var(--surface-raised);
}

.ws-auth-controls {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  display: flex;
}

.ws-auth-volume {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.ws-auth-controls button {
  white-space: nowrap;
  flex-shrink: 0;
}

.workspace .ws-auth-volume input[type="range"] {
  width: 80px;
  min-width: 48px;
  height: 36px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.ws-auth-volume-value {
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  color: var(--text-secondary);
  text-align: right;
  font-size: 10px;
}

.ws-auth-controls button:focus-visible, .ws-auth-volume input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 420px) {
  .ws-auth-sound span {
    display: none;
  }

  .workspace .ws-auth-volume input[type="range"] {
    width: 72px;
  }
}

.ws-auth-stages {
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.ws-auth-stages li {
  border-top: 2px solid var(--border-subtle);
  color: var(--text-secondary);
  word-break: keep-all;
  flex: 1;
  padding-top: 9px;
  font-size: 11px;
  line-height: 1.5;
  transition: border-color .3s, color .3s;
}

.ws-auth-stages li[data-active="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.ws-auth-showcase figcaption p {
  color: var(--text-muted);
  margin-top: 14px;
  font-size: 12px;
}

.ws-auth .ws-form {
  max-width: 400px;
}

.ws-editor {
  max-width: 1600px;
  margin: auto;
  padding: 0 24px 60px;
}

.ws-editor-head {
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 24px 0;
  display: flex;
}

.ws-editor-title {
  flex: 1;
  min-width: 0;
}

.ws-editor-title > .ohf-input {
  background: none;
  border-color: #0000;
  height: auto;
  padding: 4px 0;
  font-size: 18px;
  font-weight: 600;
}

.ws-editor-title > span {
  align-items: center;
  gap: 16px;
  margin-top: 5px;
  display: flex;
}

.ws-editor-title small {
  color: var(--text-muted);
  font-size: 10px;
}

.ws-editor-grid {
  grid-template-columns: minmax(330px, .95fr) minmax(370px, 1.05fr);
  align-items: start;
  gap: 28px;
  display: grid;
}

.ws-storyboard {
  min-width: 0;
}

.ws-brief {
  padding: 10px 8px 24px;
}

.ws-brief h1 {
  letter-spacing: -.7px;
  margin-top: 10px;
  font-size: 21px;
  font-weight: 600;
}

.ws-brief p {
  color: var(--text-muted);
  margin-top: 8px;
  font-size: 12px;
}

.ws-slot-list {
  flex-direction: column;
  gap: 6px;
  max-height: 440px;
  display: flex;
  overflow: auto;
}

.ws-slot {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
}

.ws-slot[data-selected="true"] {
  border-color: var(--accent-32);
  background: var(--surface-raised);
  box-shadow: inset 3px 0 0 var(--accent);
}

.workspace .ws-slot-select {
  text-align: left;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  display: flex;
}

.ws-slot-number {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
}

.ws-slot-thumb {
  background: var(--surface-canvas);
  border-radius: var(--radius-sm);
  width: 42px;
  height: 52px;
  color: var(--text-muted);
  flex: none;
  place-items: center;
  display: grid;
  overflow: hidden;
}

.ws-slot-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ws-slot-select > span:nth-child(3) {
  flex: 1;
  min-width: 0;
}

.ws-slot-select small {
  color: var(--text-muted);
  font-size: 10px;
}

.ws-slot-select strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  display: block;
  overflow: hidden;
}

.ws-slot-select p {
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 5px;
  font-size: 11px;
  overflow: hidden;
}

.ws-slot-state {
  color: var(--accent);
  font-size: 10px;
}

.ws-slot-actions {
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0;
  display: flex;
}

.ws-content-form {
  flex-direction: column;
  gap: 20px;
  padding: 24px 4px;
  display: flex;
}

.ws-pair {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}

.ws-canvas {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  min-width: 0;
  padding: 18px;
  position: sticky;
  top: 16px;
}

.ws-canvas-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.ws-canvas-stage {
  background: var(--surface-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  justify-content: center;
  align-items: center;
  min-height: 410px;
  padding: 28px;
  display: flex;
  overflow: hidden;
}

.ws-preview {
  width: min(100%, 360px);
  box-shadow: var(--shadow-3);
  position: relative;
  container-type: inline-size;
}

.ws-preview .ohf-slide {
  border-radius: 1px;
  width: 100%;
}

.ws-preview-reel {
  width: min(100%, 240px);
}

.ws-preview video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.ws-phone {
  border: 7px solid var(--s3);
  border-radius: 26px;
  overflow: hidden;
}

.ws-slide-overlay {
  --sl-tx: #fff !important;
  --sl-rule: #ffffff4d !important;
  background: none !important;
}

.ws-web-stage {
  align-items: start;
  min-height: 650px;
  padding: 16px;
}

.ws-web-stage iframe {
  background: var(--s1);
  border: 0;
  border-radius: 4px;
  width: 100%;
  height: 650px;
}

.ws-web-stage iframe.ws-web-mobile {
  width: 375px;
  max-width: 100%;
}

.ws-inspector {
  margin-top: 20px;
}

.ws-inspector .ohf-inspector-section {
  border-bottom: 1px solid var(--border-subtle);
}

.ws-inspector .ohf-field, .ws-content-form .ohf-inspector-section .ohf-field {
  margin-bottom: 16px;
}

.ws-timeline {
  gap: 8px;
  padding-bottom: 10px;
  display: flex;
  overflow: auto;
}

.ws-timeline .ohf-timeline-clip {
  min-width: 150px;
  max-width: 150px;
}

.ws-timeline .ohf-timeline-clip span {
  text-overflow: ellipsis;
  overflow: hidden;
}

.ws-assets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-height: 460px;
  display: grid;
  overflow: auto;
}

.ws-notice {
  color: var(--text-secondary);
  padding: 14px 0;
  font-size: 12px;
}

.ws-export-root {
  pointer-events: none;
  z-index: -1;
  position: fixed;
  top: 0;
  left: -20000px;
}

.ws-export-root > div {
  container-type: inline-size;
}

.ws-export-root .ohf-slide {
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.workspace audio {
  width: 100%;
  margin-top: 12px;
}

.ws-studio .ohf-shell {
  height: calc(100svh - 72px);
  min-height: 450px;
}

.workspace .ohf-dialog-body {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.workspace .ohf-dialog-panel {
  max-height: 90svh;
  overflow: auto;
}

.workspace .ohf-dialog-body > p {
  font-size: 13px;
  line-height: 1.7;
}

@media (min-width: 1450px) {
  .ws-canvas-stage {
    min-height: 540px;
  }

  .ws-preview {
    width: 400px;
  }

  .ws-preview-reel {
    width: 280px;
  }
}

@media (max-width: 1050px) {
  .ws-nav {
    gap: 24px;
    padding: 0 20px;
  }

  .ws-brand small {
    display: none;
  }

  .ws-page {
    padding: 36px 24px;
  }

  .ws-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-editor-grid {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
    gap: 18px;
  }

  .ws-canvas-stage {
    padding: 16px;
  }

  .ws-canvas-toolbar {
    flex-wrap: wrap;
  }

  .ws-auth {
    gap: 50px;
  }

  .ws-auth-story h1 {
    font-size: 36px;
  }
}

@media (max-width: 760px) {
  .ws-nav {
    flex-wrap: wrap;
    gap: 16px;
    height: auto;
    min-height: 64px;
    padding: 14px 18px;
  }

  .ws-nav nav {
    order: 3;
    gap: 24px;
    width: 100%;
    height: 32px;
  }

  .ws-nav-account {
    gap: 10px;
  }

  .ws-brand {
    font-size: 13px;
  }

  .ws-page {
    padding: 28px 18px 56px;
  }

  .ws-page h1 {
    font-size: 27px;
  }

  .ws-page-heading {
    flex-direction: column;
    align-items: start;
    gap: 18px;
  }

  .ws-project-grid {
    gap: 16px;
  }

  .ws-project-grid .ohf-pcard-cover {
    height: 220px;
    padding: 16px;
  }

  .ws-project-grid .ohf-slide {
    width: 145px;
  }

  .ws-new-grid, .ws-account-grid {
    grid-template-columns: 1fr;
  }

  .ws-card {
    padding: 22px;
  }

  .ws-auth {
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px 48px;
    display: flex;
  }

  .ws-auth-story {
    width: 100%;
    max-width: 440px;
  }

  .ws-auth-story h1 {
    letter-spacing: -1.3px;
    margin: 12px 0 14px;
    font-size: 32px;
  }

  .ws-auth-story > p {
    font-size: 12px;
  }

  .ws-auth-showcase {
    margin-top: 22px;
  }

  .ws-auth-stages {
    gap: 6px;
  }

  .ws-auth-stages li {
    font-size: 10px;
  }

  .ws-auth .ws-form {
    width: 100%;
    max-width: 440px;
    margin: auto;
  }

  .ws-toolbar {
    align-items: stretch;
  }

  .ws-toolbar .ohf-tabs-plate {
    max-width: 100%;
    overflow: auto;
  }

  .ws-toolbar .ohf-search-field {
    width: 100%;
  }

  .ws-editor {
    padding: 0 16px 40px;
  }

  .ws-editor-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ws-editor-head > .ohf-btn:first-child {
    padding-left: 0;
  }

  .ws-editor-title {
    flex-basis: 100%;
    order: 3;
  }

  .ws-editor-head > .ohf-btn:last-child {
    margin-left: auto;
  }

  .ws-editor-grid {
    flex-direction: column;
    display: flex;
  }

  .ws-storyboard, .ws-canvas {
    width: 100%;
    position: static;
  }

  .ws-slot-list {
    max-height: 300px;
  }

  .ws-canvas {
    order: -1;
  }

  .ws-canvas-stage {
    min-height: 360px;
  }

  .ws-preview {
    max-width: 290px;
  }

  .ws-preview-reel {
    max-width: 220px;
  }

  .ws-web-stage iframe {
    height: 530px;
  }

  .ws-web-stage {
    min-height: 560px;
  }

  .ws-inspector {
    margin-top: 12px;
  }

  .ws-assets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-ledger > div {
    grid-template-columns: 1fr 50px;
    gap: 8px;
  }

  .ws-ledger time {
    grid-column: span 2;
  }

  .ws-studio .ohf-shell {
    height: calc(100svh - 110px);
  }
}

@media (max-width: 420px) {
  .ws-project-grid {
    grid-template-columns: 1fr;
  }

  .ws-project-grid .ohf-pcard-cover {
    height: 270px;
  }

  .ws-project-grid .ohf-slide {
    width: 180px;
  }

  .ws-pair {
    grid-template-columns: 1fr;
  }

  .ws-canvas {
    padding: 12px;
  }

  .ws-nav-account .ohf-credit {
    font-size: 11px;
  }

  .ws-canvas-toolbar {
    gap: 8px;
  }

  .ws-new .ohf-tabs {
    flex-wrap: wrap;
  }

  .ws-new .ohf-tabs-plate {
    max-width: 100%;
  }
}

.ws-preview :is(h2, p, blockquote), .ws-export-root :is(h2, p, blockquote) {
  white-space: pre-line;
}

.ws-ai-choice {
  align-items: center;
  gap: 10px;
  font-size: 13px;
  display: flex;
}

.workspace .ws-slide-overlay .ohf-slide-body {
  color: #fff;
}

.ws-preview-reel > video {
  object-position: center var(--video-crop, 50%);
}

.ws-web-viewport {
  width: 100%;
  height: 650px;
  position: relative;
  overflow: hidden;
}

.ws-web-viewport iframe {
  position: absolute;
  top: 0;
  left: 0;
}

.ws-web-stage {
  align-items: stretch;
}

.workspace .ws-ready-download {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-md);
  overflow-wrap: anywhere;
  padding: 15px 20px;
  font-weight: 600;
  display: block;
}

.workspace .ohf-starter-thumb {
  background: var(--surface-panel);
  width: 88px;
}

.workspace .ohf-starter-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.workspace .ohf-starter-play {
  color: #fff;
  background: #00000024;
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.workspace .ohf-example-label {
  color: var(--text-muted);
  letter-spacing: .02em;
  font-size: 10px;
}

.workspace .ohf-empty-collection {
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 20px;
  display: flex;
}

.workspace .ohf-empty-collection img {
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  width: 28%;
  height: 96px;
}

@media (max-width: 600px) {
  .workspace .ohf-starter-thumb {
    width: 72px;
  }
}

@media (max-width: 560px) {
  .workspace .ohf-gallery {
    padding-bottom: calc(var(--ohf-dock-h, 303px) + 16px);
  }

  .workspace .ohf-empty {
    align-items: start;
    padding-top: 16px;
  }
}

.ws-library-entry {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.ws-library-entry h2 {
  margin: 8px 0;
}

.ws-library-upload {
  margin-bottom: 28px;
}

.ws-library-upload-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  display: flex;
}

.ws-library-upload input {
  min-width: 0;
  max-width: 100%;
  font: inherit;
  font-size: 13px;
}

.ws-library-filters {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
  padding: 24px 0;
  display: flex;
}

.ws-library-filters > :not(.ws-settings-actions) {
  flex: 170px;
  min-width: 0;
}

.ws-library-filters .ws-select {
  width: 100%;
}

.ws-library-count {
  margin: 24px 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.ws-library-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
  display: grid;
}

.ws-library-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  background: var(--surface-panel);
  min-width: 0;
  overflow: hidden;
}

.ws-library-cover {
  aspect-ratio: 4 / 3;
  background: var(--surface-canvas);
  cursor: pointer;
  width: 100%;
  color: var(--text-secondary);
  border: 0;
  padding: 0;
  display: block;
  position: relative;
}

.ws-library-cover img, .ws-library-cover video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  display: block;
}

.ws-library-cover:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.ws-library-kind {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 5px 9px;
  font-size: 11px;
  position: absolute;
  bottom: 12px;
  left: 12px;
}

.ws-library-info {
  padding: 20px;
}

.ws-library-info h2 {
  overflow-wrap: anywhere;
  margin: 8px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.ws-library-owner {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 12px;
}

.ws-library-description {
  -webkit-line-clamp: 2;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  min-height: 40px;
  font-size: 12px;
  line-height: 1.65;
  display: -webkit-box;
  overflow: hidden;
}

.ws-library-info time {
  color: var(--text-muted);
  margin-top: 16px;
  font-size: 11px;
  display: block;
}

.ws-library-fallback {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 24px;
  display: flex;
}

.ws-library-fallback span {
  font-size: 36px;
}

.ws-library-fallback p {
  font-size: 12px;
  line-height: 1.6;
}

.ws-library-pagination {
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  font-size: 13px;
  display: flex;
}

.ws-library-empty {
  align-items: flex-start;
  margin-top: 24px;
}

.ws-library-detail {
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  display: flex;
}

.ws-library-detail-media {
  background: var(--surface-canvas);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ws-library-detail-media img, .ws-library-detail-media video {
  object-fit: contain;
  width: 100%;
  max-height: 48vh;
  display: block;
}

.ws-library-detail-media audio {
  width: 100%;
}

.ws-library-prompt {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 180px;
  font-size: 13px;
  line-height: 1.7;
  overflow: auto;
}

.ws-library-original {
  font-size: 13px;
  text-decoration: underline !important;
}

@media (max-width: 1000px) {
  .ws-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ws-library-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ws-library-entry {
    flex-direction: column;
    align-items: flex-start;
  }

  .ws-library-filters {
    gap: 12px;
  }

  .ws-library-filters > :not(.ws-settings-actions) {
    flex-basis: 100%;
  }
}

.ws-account-layout {
  grid-template-columns: 230px minmax(0, 1fr);
  max-width: 1640px;
  min-height: calc(100svh - 72px);
  margin: 0 auto;
  display: grid;
}

.ws-account-sidebar {
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-canvas);
  flex-direction: column;
  align-self: start;
  gap: 32px;
  height: calc(100svh - 24px);
  max-height: 100svh;
  padding: 32px 20px;
  display: flex;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.ws-account-identity {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.ws-account-avatar {
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  border: 1px solid var(--border-control);
  width: 40px;
  height: 40px;
  color: var(--text-primary);
  flex-shrink: 0;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  display: grid;
}

.ws-account-identity > div {
  min-width: 0;
}

.ws-account-identity .ws-eyebrow {
  letter-spacing: 1.2px;
  font-size: 8px;
}

.ws-account-identity strong, .ws-account-identity small {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.ws-account-identity strong {
  margin: 6px 0;
  font-size: 14px;
}

.ws-account-identity small {
  color: var(--text-muted);
  font-size: 11px;
}

.ws-account-sidebar nav {
  flex-direction: column;
  gap: 28px;
  display: flex;
}

.ws-account-nav-label {
  color: var(--text-muted);
  letter-spacing: 1px;
  margin: 0 12px 10px;
  font-size: 10px;
}

.ws-account-sidebar nav a {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  border: 1px solid #0000;
  align-items: center;
  gap: 10px;
  margin: 3px 0;
  padding: 12px;
  font-size: 13px;
  display: flex;
}

.ws-account-sidebar nav a:hover {
  background: var(--surface-panel);
  color: var(--text-primary);
}

.ws-account-sidebar nav a[aria-current="page"] {
  background: var(--surface-raised);
  border-color: var(--border-control);
  color: var(--text-primary);
}

.ws-account-sidebar nav a[aria-current="page"] .ws-account-nav-icon {
  color: var(--accent);
}

.ws-account-nav-icon {
  text-align: center;
  width: 20px;
  font-size: 17px;
}

.ws-account-sidebar nav a small {
  color: var(--text-muted);
  white-space: nowrap;
  margin-left: auto;
  font-size: 9px;
}

.ws-account-sidebar-bottom {
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  display: flex;
}

.ws-account-credit {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  display: flex;
}

.ws-account-credit span {
  color: var(--text-secondary);
  font-size: 11px;
}

.ws-account-credit strong {
  font-variant-numeric: tabular-nums;
  font-size: 26px;
}

.ws-account-credit strong small {
  color: var(--accent);
  font-size: 18px;
}

.ws-account-admin-link {
  color: var(--text-secondary);
  font-size: 12px;
}

.ws-account-content {
  min-width: 0;
}

.ws-account-content > .ws-page {
  max-width: none;
  padding: 38px 32px 64px;
}

.ws-account-content .ws-page-heading {
  margin-bottom: 28px;
}

.ws-account-content .ws-page h1 {
  font-size: 30px;
}

.ws-account-content .ws-library-filters {
  gap: 12px;
  padding: 18px 0;
}

.ws-account-content .ws-library-filters > :not(.ws-settings-actions) {
  flex-basis: 150px;
}

.ws-account-content .ws-library-grid {
  gap: 18px;
}

.ws-account-content .ws-library-info {
  padding: 16px;
}

.ws-account-content .ws-project-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ws-account-content .ws-library-cover {
  aspect-ratio: 1;
}

.ws-account-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  display: grid;
}

.ws-account-summary .ws-balance {
  font-size: 48px;
}

.ws-account-summary .ws-balance small {
  color: var(--accent);
  font-size: 24px;
}

.ws-account-panel > .ws-card {
  margin-top: 24px;
}

.ws-account-panel > .ws-card:first-of-type {
  margin-top: 0;
}

.ws-credit-positive {
  color: var(--accent);
}

.ws-account-activity-toolbar {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 24px;
  display: flex;
}

.ws-account-job-list {
  gap: 12px;
  display: grid;
}

.ws-account-job-list article {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
}

.ws-account-job-list article > div {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  display: flex;
}

.ws-account-job-list time {
  color: var(--text-muted);
  font-size: 11px;
}

.ws-account-job-list article > p {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  margin: 16px 0;
  font-size: 12px;
}

.ws-account-empty {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 0;
  display: flex;
}

.ws-account-profile-head {
  align-items: center;
  gap: 16px;
  display: flex;
}

.ws-account-profile-head h2 {
  margin-bottom: 6px;
}

.ws-account-facts {
  margin: 0;
}

.ws-account-facts > div {
  border-bottom: 1px solid var(--border-subtle);
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  font-size: 14px;
  display: grid;
}

.ws-account-facts dt {
  color: var(--text-muted);
}

.ws-account-facts dd {
  overflow-wrap: anywhere;
  margin: 0;
}

.ws-account-disabled-fields {
  border: 0;
  gap: 20px;
  margin: 0;
  padding: 0;
  display: grid;
}

.ws-account-preview-note {
  border: 1px solid var(--border-control);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  padding: 22px;
  display: flex;
}

.ws-account-preview-note > span {
  color: var(--text-secondary);
  font-size: 28px;
}

.ws-account-preview-note strong {
  font-size: 14px;
  font-weight: 600;
}

.ws-account-preview-note p {
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
}

.ws-account-toggle-row {
  border-bottom: 1px solid var(--border-subtle);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  display: flex;
}

.ws-account-toggle-row strong {
  font-size: 14px;
  font-weight: 500;
}

.ws-account-toggle-row small {
  color: var(--text-secondary);
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  display: block;
}

.ws-account-toggle-row input {
  appearance: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-control);
  background: var(--surface-raised);
  flex-shrink: 0;
  width: 38px;
  height: 22px;
  position: relative;
}

.ws-account-toggle-row input:before {
  content: "";
  background: var(--text-muted);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 3px;
  left: 3px;
}

.ws-account-toggle-row input:checked:before {
  background: var(--text-secondary);
  left: 19px;
}

.ws-account-preview-amount {
  padding: 24px 0;
  font-size: 42px;
}

.ws-account-preview-amount small {
  color: var(--text-muted);
  font-size: 13px;
}

.ws-account-payment-placeholder {
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-md);
  min-height: 128px;
  color: var(--text-muted);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  display: flex;
}

.ws-account-payment-placeholder span {
  font-size: 24px;
}

.ws-account-payment-placeholder p {
  font-size: 12px;
}

.ws-account-preview-receipt {
  border-block: 1px solid var(--border-subtle);
  color: var(--text-muted);
  grid-template-columns: repeat(3, 1fr);
  padding: 16px 0;
  font-size: 12px;
  display: grid;
}

@media (min-width: 841px) and (max-width: 1100px) {
  .ws-account-layout {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .ws-account-sidebar {
    padding-inline: 12px;
  }

  .ws-account-content > .ws-page {
    padding-inline: 24px;
  }

  .ws-account-content .ws-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-account-content .ws-page-heading {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (max-width: 840px) {
  .ws-account-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-account-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    height: auto;
    max-height: none;
    padding: 20px 24px;
    display: grid;
    position: static;
  }

  .ws-account-sidebar nav {
    flex-direction: row;
    grid-area: 2 / 1 / auto / -1;
    gap: 8px;
    overflow-x: auto;
  }

  .ws-account-sidebar nav section {
    gap: 8px;
    display: flex;
  }

  .ws-account-nav-label {
    display: none;
  }

  .ws-account-sidebar nav a {
    white-space: nowrap;
    margin: 0;
    padding: 10px;
  }

  .ws-account-sidebar nav a small {
    margin-left: 0;
  }

  .ws-account-sidebar-bottom {
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  .ws-account-sidebar-bottom .ws-account-credit, .ws-account-sidebar-bottom .ws-account-admin-link {
    display: none;
  }

  .ws-account-content > .ws-page {
    padding: 28px 24px 56px;
  }

  .ws-account-identity .ws-eyebrow {
    display: none;
  }

  .ws-account-content .ws-library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-account-content .ws-page-heading {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .ws-account-content > .ws-page {
    padding: 24px 18px 48px;
  }

  .ws-account-sidebar {
    padding: 18px;
  }

  .ws-account-content .ws-library-grid, .ws-account-content .ws-project-grid, .ws-account-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-account-content .ws-library-filters > :not(.ws-settings-actions) {
    flex-basis: calc(50% - 12px);
  }

  .ws-account-content .ws-library-filters > :nth-child(3) {
    flex-basis: 100%;
  }

  .ws-account-facts > div {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
  }

  .ws-account-activity-toolbar {
    flex-wrap: wrap;
  }

  .ws-account-preview-note {
    align-items: flex-start;
  }

  .ws-account-content .ws-page h1 {
    font-size: 28px;
  }

  .ws-account-content .ws-library-upload-controls {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ws-library-filter-toggle {
  display: none;
}

@media (max-width: 600px) {
  .ws-account-content .ws-library-filter-toggle {
    margin-bottom: 12px;
    display: block;
  }

  .ws-account-content .ws-library-filters:not([data-open="true"]) {
    display: none;
  }

  .ws-account-content .ws-library-count {
    margin-top: 20px;
  }
}

.ws-admin-panel {
  flex-direction: column;
  gap: 24px;
  display: flex;
}

.ws-admin-panel .ws-page-heading {
  margin-bottom: 8px;
}

.ws-admin-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.ws-admin-metric {
  transition: border-color .18s, background .18s;
}

.ws-admin-metric:hover {
  background: var(--surface-raised);
  border-color: var(--border-control);
}

.ws-admin-metric > div {
  color: var(--text-secondary);
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.ws-admin-metric > div span:last-child {
  color: var(--text-muted);
}

.ws-admin-metric > strong {
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  margin: 24px 0 12px;
  font-size: 36px;
  font-weight: 500;
  display: block;
}

.ws-admin-metric strong small {
  color: var(--text-muted);
  letter-spacing: 0;
  font-size: 13px;
}

.ws-admin-metric p {
  color: var(--text-muted);
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.ws-admin-overview-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  display: grid;
}

.ws-admin-status-links {
  margin: 24px 0;
}

.ws-admin-status-links a {
  border-top: 1px solid var(--border-subtle);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 17px 0;
  display: flex;
}

.ws-admin-status-links a b {
  font-size: 13px;
  font-weight: 500;
}

.ws-admin-status-links a small {
  color: var(--text-muted);
  margin-top: 6px;
  font-size: 11px;
  display: block;
}

.ws-admin-status-links a strong {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
}

.ws-admin-status-links a strong span {
  color: var(--text-muted);
  margin-left: 12px;
  font-size: 13px;
}

.ws-admin-status-links a:hover b, .ws-admin-recent a:hover b {
  color: var(--accent);
}

.ws-admin-credit-summary {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.ws-admin-credit-summary h2 {
  margin-top: 16px;
}

.ws-admin-credit-summary .ws-balance {
  margin: 20px 0;
}

.ws-admin-credit-summary dl {
  width: 100%;
  margin: 0 0 24px;
}

.ws-admin-credit-summary dl > div {
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 13px;
  display: flex;
}

.ws-admin-credit-summary dt {
  color: var(--text-muted);
}

.ws-admin-credit-summary dd {
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.ws-admin-credit-summary .ohf-btn {
  margin-top: auto;
}

.ws-admin-recent {
  margin-top: 16px;
}

.ws-admin-recent > a {
  border-top: 1px solid var(--border-subtle);
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  display: flex;
}

.ws-admin-recent a > div {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.ws-admin-recent a > div:first-child {
  flex: 1;
  min-width: 0;
}

.ws-admin-recent b {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.ws-admin-recent small {
  width: 100%;
  color: var(--text-muted);
  font-size: 12px;
}

.ws-admin-recent a > div:last-child {
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  font-size: 12px;
}

.ws-admin-recent time {
  color: var(--text-muted);
  font-size: 11px;
}

.ws-admin-access-note {
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  display: flex;
}

.ws-admin-access-note p {
  color: var(--text-muted);
  flex: 1;
  font-size: 12px;
  line-height: 1.7;
}

.ws-admin-access-note p span {
  overflow-wrap: anywhere;
  display: block;
}

.ws-admin-filters {
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  padding: 20px;
  display: flex;
}

.ws-admin-filters > :not(.ws-settings-actions) {
  flex: 150px;
  min-width: 0;
}

.ws-admin-filters > :first-child {
  flex-basis: 220px;
}

.ws-admin-filters .ws-select {
  width: 100%;
}

.ws-admin-filter-note {
  color: var(--text-secondary);
  align-items: center;
  gap: 16px;
  font-size: 12px;
  display: flex;
}

.ws-admin-result-count {
  font-size: 13px;
}

.ws-admin-result-count .ws-muted {
  font-size: 12px;
}

.ws-admin-data-card {
  min-width: 0;
  padding: 8px 18px;
}

.ws-admin-data-card .ws-admin-table {
  min-width: 640px;
}

.ws-admin-data-card tbody tr:last-child td {
  border-bottom: 0;
}

.ws-admin-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
  display: block;
  overflow: hidden;
}

.ws-admin-table td {
  overflow-wrap: anywhere;
}

.ws-admin-footnote {
  font-size: 12px;
  line-height: 1.7;
}

.ws-admin-detail {
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding-top: 8px;
  display: flex;
}

.ws-admin-detail h2, .ws-admin-detail h3, .ws-admin-detail p {
  margin: 0;
}

.ws-admin-detail > h2 {
  overflow-wrap: anywhere;
  font-size: 22px;
}

.ws-admin-detail > h3 {
  font-size: 14px;
}

.ws-admin-detail > .ws-account-facts {
  margin: 0;
}

.ws-admin-detail > p {
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.ws-admin-slot-list {
  flex-direction: column;
  gap: 12px;
  max-height: 360px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow: auto;
}

.ws-admin-slot-list li {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  gap: 16px;
  padding: 16px;
  display: flex;
}

.ws-admin-slot-list li > span {
  color: var(--text-muted);
  font-size: 12px;
}

.ws-admin-slot-list li > div {
  min-width: 0;
}

.ws-admin-slot-list strong {
  font-size: 14px;
}

.ws-admin-slot-list p {
  color: var(--text-secondary);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0;
  font-size: 13px;
}

.ws-admin-slot-list small {
  color: var(--text-muted);
  font-size: 11px;
}

.ws-admin-grant-grid .ws-admin-table {
  min-width: 450px;
}

.ws-admin-layout .ws-admin-ledger > .ohf-field {
  max-width: 260px;
  margin: 18px 0;
}

.ws-admin-layout .ws-admin-ledger .ws-admin-table {
  min-width: 680px;
}

.ws-sr-only {
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .ws-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-admin-grant-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-admin-layout .ws-admin-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .ws-admin-overview-grid, .ws-admin-layout .ws-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .ws-admin-panel {
    gap: 20px;
  }

  .ws-admin-metrics {
    gap: 12px;
  }

  .ws-admin-metric {
    padding: 18px 14px;
  }

  .ws-admin-metric > strong {
    font-size: 30px;
  }

  .ws-admin-metric > div {
    font-size: 12px;
  }

  .ws-admin-filters {
    padding: 16px;
  }

  .ws-admin-filters > :not(.ws-settings-actions) {
    flex-basis: calc(50% - 14px);
  }

  .ws-admin-filters > :first-child {
    flex-basis: 100%;
  }

  .ws-admin-recent > a {
    flex-direction: column;
    gap: 12px;
  }

  .ws-admin-recent a > div:last-child {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .ws-admin-access-note p {
    flex-basis: 60%;
  }

  .ws-admin-layout .ws-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-admin-data-card {
    padding-inline: 10px;
  }
}

.ws-admin-grant-grid .ws-table-scroll {
  max-height: 360px;
  overflow: auto;
}

.ws-admin-grant-grid thead {
  background: var(--surface-panel);
  z-index: 1;
  position: sticky;
  top: 0;
}

.ws-editor-guide {
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12px;
}

.ws-editor-guide:hover {
  background: var(--surface-raised);
}

.ws-template-entry {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 32px 0;
  padding: 24px;
  display: flex;
}

.ws-template-entry p {
  color: var(--text-secondary);
  margin: 8px 0 0;
  font-size: 14px;
}

.ws-template-mode {
  margin: 32px 0;
}

.ws-template-heading {
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 24px;
  display: flex;
}

.ws-template-heading h2 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: 24px;
}

.ws-template-heading p {
  color: var(--text-secondary);
  margin: 10px 0 0;
  line-height: 1.6;
}

.ws-template-note {
  color: var(--text-muted);
  white-space: nowrap;
  font-size: 13px;
}

.ws-template-filters {
  margin-bottom: 24px;
  padding-bottom: 4px;
  overflow-x: auto;
}

.ws-template-filters .ohf-tabs {
  white-space: nowrap;
}

.ws-template-sources {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  padding: 14px 16px;
  font-size: 12px;
}

.ws-template-sources summary {
  cursor: pointer;
  color: var(--text-primary);
  line-height: 1.7;
}

.ws-template-sources ul {
  gap: 10px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.ws-template-sources a {
  color: var(--accent);
  overflow-wrap: anywhere;
  line-height: 1.6;
}

.ws-template-sources a:hover {
  text-decoration: underline;
}

.ws-template-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  display: grid;
}

.ws-template-card {
  text-align: left;
  min-width: 0;
  color: var(--text-primary);
  background: var(--surface-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease);
  flex-direction: column;
  padding: 0 0 22px;
  display: flex;
  overflow: hidden;
}

.ws-template-card:hover {
  border-color: var(--accent);
}

.ws-template-cover {
  background: var(--surface-raised);
  padding: 24px;
  display: block;
}

.ws-template-cover .ohf-slide {
  width: 100%;
  box-shadow: var(--shadow-2);
}

.ws-template-meta {
  color: var(--text-muted);
  justify-content: space-between;
  margin: 20px 22px 10px;
  font-size: 12px;
  display: flex;
}

.ws-template-card > strong {
  letter-spacing: -.035em;
  margin: 0 22px;
  font-size: 19px;
}

.ws-template-description {
  color: var(--text-secondary);
  margin: 10px 22px 20px;
  font-size: 14px;
  line-height: 1.7;
}

.ws-template-link {
  color: var(--text-primary);
  margin: auto 22px 0;
  font-size: 13px;
}

.ws-template-detail {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  display: grid;
}

.ws-template-stage {
  background: var(--surface-canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
}

.ws-template-stage .ohf-slide {
  width: 100%;
}

.ws-template-pages {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  display: grid;
}

.ws-template-pages button {
  border: 1px solid var(--border-subtle);
  background: var(--surface-panel);
  min-width: 0;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 3px;
}

.ws-template-pages button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text-primary);
}

.ws-template-pages small {
  margin: 5px 0 2px;
  display: block;
}

.ws-template-info {
  flex-direction: column;
  gap: 18px;
  display: flex;
}

.ws-template-info h3 {
  letter-spacing: -.04em;
  margin: 0;
  font-size: 26px;
}

.ws-template-info p {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.7;
}

.ws-template-outline {
  border-top: 1px solid var(--border-subtle);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-template-outline button {
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-size: 13px;
  display: flex;
}

.ws-template-outline button[aria-current="step"] {
  color: var(--accent);
}

.ws-template-outline span {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

@media (max-width: 1000px) {
  .ws-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ws-template-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .ws-template-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-template-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .ws-template-stage {
    max-width: 320px;
    margin: auto;
  }

  .ws-template-entry {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .ws-template-cover {
    padding: 24px 40px;
  }
}

:is(.ws-templates, .ws-template-dialog) .ohf-slide :is(h2, p, blockquote) {
  white-space: pre-line;
}

.ws-quick {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 64px;
  margin: 40px 0 24px;
  display: grid;
}

.ws-quick-intro h2 {
  letter-spacing: -.055em;
  margin: 18px 0 20px;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.3;
}

.ws-quick-intro > p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.9;
}

.ws-quick-flow {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.ws-quick-flow li {
  border-top: 1px solid var(--border-subtle);
  gap: 20px;
  padding: 20px 0;
  display: flex;
}

.ws-quick-flow li > span {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
  font-size: 12px;
}

.ws-quick-flow strong {
  font-size: 15px;
}

.ws-quick-flow p {
  color: var(--text-muted);
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.ws-quick-form {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 28px;
  display: flex;
}

.ws-quick-form fieldset {
  border: 0;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
}

.ws-quick-form textarea {
  resize: vertical;
  min-height: 180px;
  font-size: 15px;
  line-height: 1.8;
}

.ws-quick-examples {
  color: var(--text-muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}

.ws-quick-examples button {
  background: var(--surface-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 8px 10px;
}

.ws-quick-examples button:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.ws-quick-options {
  border-block: 1px solid var(--border-subtle);
}

.ws-quick-options summary {
  cursor: pointer;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  font-size: 13px;
  display: flex;
}

.ws-quick-options summary span {
  color: var(--text-muted);
}

.ws-quick-options summary:before {
  content: "+";
  color: var(--text-muted);
}

.ws-quick-options[open] summary:before {
  content: "−";
}

.ws-quick-options .ws-form {
  padding: 4px 0 20px;
}

.ws-quick-options .ohf-tabs-plate {
  max-width: 100%;
  overflow-x: auto;
}

.ws-quick-options .ohf-tab {
  flex-shrink: 0;
}

.ws-quick-notice {
  color: var(--text-secondary);
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.ws-quick-notice a {
  color: var(--accent);
}

.ws-quick-submit {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.ws-quick-submit p, .ws-quick-footnote {
  color: var(--text-muted);
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

.ws-quick :is(button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .ws-quick {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .ws-quick-flow, .ws-quick-intro h2 br {
    display: none;
  }
}

@media (max-width: 600px) {
  .ws-quick {
    margin-top: 28px;
  }

  .ws-quick-form {
    padding: 20px;
  }

  .ws-template-mode {
    overflow-x: auto;
  }

  .ws-template-mode .ohf-tabs-plate {
    white-space: nowrap;
    max-width: 100%;
    overflow-x: auto;
  }

  .ws-quick-options summary {
    gap: 8px;
    font-size: 12px;
  }
}

.ws-agent {
  margin: 40px 0;
}

.ws-agent-header {
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 28px;
  display: flex;
}

.ws-agent-header h2 {
  letter-spacing: -.05em;
  margin: 12px 0;
  font-size: clamp(26px, 3vw, 38px);
}

.ws-agent-header p {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.7;
}

.ws-agent-turns {
  white-space: nowrap;
  color: var(--accent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 10px 14px;
  font-size: 12px;
}

.ws-agent-stages {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: grid;
}

.ws-agent-stages li {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  background: var(--surface-panel);
  align-items: center;
  gap: 12px;
  padding: 16px;
  display: flex;
}

.ws-agent-stages li > span {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.ws-agent-stages strong {
  font-size: 14px;
}

.ws-agent-stages small {
  margin-left: auto;
  font-size: 11px;
}

.ws-agent-stages [data-state="current"] {
  border-color: var(--accent);
  color: var(--text-primary);
}

.ws-agent-stages [data-state="done"] > span {
  color: var(--accent);
}

.ws-agent-stages [data-state="done"] strong {
  color: var(--text-primary);
}

.ws-agent-grid {
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  gap: 24px;
  display: grid;
}

.ws-agent-main {
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  display: flex;
}

.ws-agent :is(h3, h4) {
  letter-spacing: -.03em;
  margin: 0;
}

.ws-agent h3 {
  font-size: 21px;
  line-height: 1.5;
}

.ws-agent :is(p, li, dd) {
  overflow-wrap: anywhere;
}

.ws-agent :is(.ws-agent-brief, .ws-agent-preview, .ws-agent-finish, .ws-agent-activity) {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  padding: 26px;
}

.ws-agent-section-label {
  letter-spacing: .14em;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-size: 10px;
}

.ws-agent-brief > p, .ws-agent-finish > p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.8;
}

.ws-agent-brief dl {
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 22px 0;
  display: grid;
}

.ws-agent-brief dt {
  color: var(--text-muted);
  margin-bottom: 8px;
  font-size: 11px;
}

.ws-agent-brief dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}

.ws-agent details {
  font-size: 13px;
  line-height: 1.7;
}

.ws-agent summary {
  cursor: pointer;
  color: var(--text-secondary);
  padding: 10px 0;
}

.ws-agent details p, .ws-agent details li {
  color: var(--text-secondary);
  white-space: pre-line;
}

.ws-agent-directions {
  gap: 10px;
  margin: 24px 0;
  display: grid;
}

.ws-agent-directions button {
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  padding: 20px;
}

.ws-agent-directions button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ws-agent-directions button > span {
  color: var(--text-muted);
  letter-spacing: .06em;
  margin-bottom: 9px;
  font-size: 10px;
  display: block;
}

.ws-agent-directions button[aria-pressed="true"] > span {
  color: var(--accent);
}

.ws-agent-directions strong {
  font-size: 17px;
}

.ws-agent-directions p {
  color: var(--text-secondary);
  margin: 9px 0;
  font-size: 13px;
  line-height: 1.7;
}

.ws-agent-directions small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}

.ws-agent-brief > .ohf-btn {
  margin-top: 20px;
}

.ws-agent-chosen {
  border-left: 2px solid var(--accent);
  margin-top: 20px;
  padding: 12px 0 12px 20px;
}

.ws-agent-chosen p {
  color: var(--text-secondary);
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.7;
}

.ws-agent-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  display: grid;
}

.ws-agent-cards article {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-width: 0;
  padding: 22px;
}

.ws-agent-cards article > span {
  letter-spacing: .08em;
  color: var(--accent);
  font-size: 10px;
}

.ws-agent-cards h4 {
  white-space: pre-line;
  margin-top: 20px;
  font-size: 19px;
  line-height: 1.5;
}

.ws-agent-cards p {
  color: var(--text-secondary);
  white-space: pre-line;
  font-size: 14px;
  line-height: 1.9;
}

.ws-agent-cards details {
  border-top: 1px solid var(--border-subtle);
  margin-top: 24px;
  font-size: 11px;
}

.ws-agent-cards details p {
  font-size: 12px;
}

.ws-agent-caption {
  margin-top: 16px;
}

.ws-agent-finish details {
  border-block: 1px solid var(--border-subtle);
  margin: 16px 0 24px;
  padding: 8px 0;
}

.ws-agent-finish details .ohf-btn {
  margin: 14px 0;
}

.ws-agent-finish textarea, .ws-agent-brief textarea {
  min-height: 100px;
}

.ws-agent-working {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  display: flex;
}

.ws-agent-working p {
  color: var(--text-secondary);
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.7;
}

.ws-agent-working small {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.ws-agent-pulse {
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  animation: 1.8s ease-in-out infinite ws-agent-pulse;
}

@keyframes ws-agent-pulse {
  50% {
    opacity: .35;
  }
}

.ws-agent-activity h3 {
  font-size: 17px;
}

.ws-agent-activity-hint, .ws-agent-disclosure {
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.8;
}

.ws-agent-live {
  color: var(--accent);
  margin: 20px 0;
  font-size: 12px;
}

.ws-agent-activity > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-agent-activity > ol > li {
  border-left: 1px solid var(--border-subtle);
  padding: 0 0 22px 18px;
  position: relative;
}

.ws-agent-activity > ol > li:before {
  content: "";
  background: var(--text-muted);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 7px;
  left: -3px;
}

.ws-agent-activity > ol > li:last-child:before {
  background: var(--accent);
}

.ws-agent-activity strong {
  font-size: 12px;
  line-height: 1.7;
}

.ws-agent-activity li p {
  color: var(--text-secondary);
  white-space: pre-line;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.8;
}

.ws-agent-activity details {
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

.ws-agent-activity ul {
  padding-left: 16px;
  font-size: 12px;
}

.ws-agent-activity ul li {
  margin-bottom: 8px;
}

.ws-agent-warnings {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  margin-top: 20px;
  padding: 16px;
}

.ws-agent-warnings strong {
  color: var(--accent);
}

.ws-agent-disclosure {
  border-top: 1px solid var(--border-subtle);
  margin-top: 20px;
  padding-top: 16px;
}

.ws-agent :is(button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .ws-agent-grid {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 16px;
  }

  .ws-agent-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-agent-stages small {
    display: none;
  }

  .ws-agent-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .ws-agent-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-agent-activity > ol {
    max-height: 200px;
    overflow-y: auto;
  }

  .ws-agent-stages {
    gap: 6px;
  }

  .ws-agent-stages li {
    flex-direction: column;
    gap: 6px;
    padding: 12px 8px;
  }

  .ws-agent-stages strong {
    font-size: 12px;
  }

  .ws-agent-brief dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .ws-agent :is(.ws-agent-brief, .ws-agent-preview, .ws-agent-finish, .ws-agent-activity) {
    padding: 20px;
  }

  .ws-agent-header h2 {
    font-size: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-agent-pulse {
    animation: none;
  }
}

/*# sourceMappingURL=_0yzqcue._.css.map*/