:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --embed-bg: #f5f7fa;
  --embed-surface: rgba(255, 255, 255, 0.96);
  --embed-text: #172033;
  --embed-muted: #536176;
  --embed-border: rgba(23, 32, 51, 0.18);
  --embed-accent: #315b72;
  --embed-accent-text: #ffffff;
  --embed-focus: #1267d6;
  --embed-shadow: 0 14px 40px rgba(23, 32, 51, 0.14);
}

html[data-embed-appearance="dark"] {
  color-scheme: dark;
  --embed-bg: #101722;
  --embed-surface: rgba(24, 33, 47, 0.96);
  --embed-text: #f5f7fb;
  --embed-muted: #c0cad8;
  --embed-border: rgba(255, 255, 255, 0.2);
  --embed-accent: #e8c468;
  --embed-accent-text: #172033;
  --embed-focus: #8ec5ff;
  --embed-shadow: 0 14px 44px rgba(0, 0, 0, 0.34);
}

html[data-embed-appearance="transparent"] {
  color-scheme: dark;
  --embed-bg: transparent;
  --embed-surface: transparent;
  --embed-text: #ffffff;
  --embed-muted: rgba(255, 255, 255, 0.9);
  --embed-border: transparent;
  --embed-accent: #ffffff;
  --embed-accent-text: #172033;
  --embed-focus: #ffffff;
  --embed-shadow: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow-x: hidden;
  background: var(--embed-bg);
  color: var(--embed-text);
}

button,
textarea {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The wheel gets exactly the space the rest of the card leaves. Every term
   below is the same token its element uses, so a visible title, result,
   credit link or control row can never push the card past the frame. Parts
   that are hidden give their space back to the wheel. The runtime replaces the
   one-line estimates with measured heights once the text has wrapped
   (--embed-*-height), including the longest possible result. */
.embed-shell {
  --embed-shell-pad: clamp(0.5rem, 2.5vmin, 1.25rem);
  --embed-card-pad: clamp(0.65rem, 2.5vmin, 1.25rem);
  --embed-card-pad-inline: var(--embed-card-pad);
  --embed-gap: clamp(0.5rem, 2vmin, 1rem);
  --embed-stage-pad: clamp(0.35rem, 1.5vmin, 0.8rem);
  --embed-title-size: clamp(1rem, 3.6vmin, 1.5rem);
  --embed-title-space: calc(
    var(--embed-title-height, calc(var(--embed-title-size) * 1.2)) + var(--embed-gap)
  );
  /* 0.95rem text at line-height 1.4, 0.55rem padding each side, 1px borders. */
  --embed-result-space: calc(
    var(--embed-result-height, calc(2.43rem + 2px)) + var(--embed-gap)
  );
  --embed-brand-space: calc(44px + var(--embed-gap));
  --embed-controls-space: 0px;
  --embed-editor-space: 0px;
  --embed-fixed-space: calc(
    2 * var(--embed-shell-pad) + 2 * var(--embed-card-pad) + 2px +
      var(--embed-stage-pad) + var(--embed-title-space) +
      var(--embed-result-space) + var(--embed-brand-space) +
      var(--embed-controls-space) + var(--embed-editor-space)
  );
  --embed-wheel-size: max(
    4rem,
    min(
      calc(100vw - 2 * var(--embed-shell-pad) - 2 * var(--embed-card-pad-inline) - 2px),
      calc(100svh - var(--embed-fixed-space)),
      38rem
    )
  );
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: grid;
  padding: var(--embed-shell-pad);
  /* A very long result can still wrap onto a second line. Scroll in that rare
     case instead of cutting the card off. */
  overflow-x: hidden;
  overflow-y: auto;
}

.embed-shell:has(.embed-title.visually-hidden) {
  --embed-title-space: 0px;
}

.embed-shell:has(#resultBox.visually-hidden) {
  --embed-result-space: 0px;
}

.embed-shell:has(#embedBrand[hidden]) {
  --embed-brand-space: 0px;
}

.embed-shell[data-interaction="controls"],
.embed-shell[data-interaction="edit"] {
  --embed-controls-space: calc(var(--embed-controls-height, 44px) + var(--embed-gap));
}

.embed-shell[data-interaction="edit"] {
  --embed-gap: 0.4rem;
  /* Label, textarea and a two-line hint, with the editor's own 0.4rem gaps. */
  --embed-editor-space: calc(
    var(--embed-editor-height, calc(1.25rem + clamp(7rem, 20svh, 10rem) + 2.8rem + 0.8rem)) +
      var(--embed-gap)
  );
}

.embed-shell[data-interaction="edit"] .embed-card {
  gap: 0.4rem;
}

/* While the wheel turns, the corners of its square box reach past the card.
   They are transparent, so clip them at the card edge instead of letting them
   add a scroll bar to the frame. The pointer, title and result all sit inside
   the card. */
.embed-shell:not([data-mode="stream"]) .embed-card {
  overflow: hidden;
  overflow: clip;
}

/* The card clips at its padding edge, and narrow frames leave only 0.6rem
   of padding beside the wheel. Draw the keyboard focus ring closer to the
   wheel than the main site does (6px instead of 11px), so none of it is cut. */
.embed-shell:not([data-mode="stream"]) #wheelCanvas:focus-visible {
  outline-offset: 3px !important;
}

.embed-card {
  width: min(100%, 48rem);
  min-width: 0;
  min-height: 0;
  /* Auto margins centre the card, and fall back to the top edge when the
     card is taller than the frame, so scrolling can always reach it. */
  margin: auto;
  display: grid;
  /* One column that never grows past the card, so a long unbroken winner
     such as a web address wraps instead of pushing the wheel sideways. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--embed-gap);
  padding: var(--embed-card-pad) var(--embed-card-pad-inline);
  border: 1px solid var(--embed-border);
  border-radius: clamp(0.75rem, 3vmin, 1.5rem);
  background: var(--embed-surface);
  box-shadow: var(--embed-shadow);
}

.embed-title {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--embed-text);
  font-size: var(--embed-title-size);
  line-height: 1.2;
  text-align: center;
}

.embed-wheel-stage {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding-top: var(--embed-stage-pad);
  --sc-wheel-size: var(--embed-wheel-size);
}

.embed-wheel-stage .multi-wheel-row {
  width: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
}

.embed-wheel-stage .wheel-wrapper {
  width: var(--embed-wheel-size) !important;
  height: var(--embed-wheel-size) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.embed-wheel-stage #wheelCanvas:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.embed-control:focus-visible,
.embed-editor textarea:focus-visible,
.embed-brand:focus-visible {
  outline: 3px solid var(--embed-focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--embed-focus) 18%, transparent) !important;
}

.embed-controls {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.embed-control {
  min-width: 7rem;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--embed-border);
  border-radius: 0.75rem;
  background: var(--embed-surface);
  color: var(--embed-text);
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}

.embed-control-primary {
  border-color: var(--embed-accent);
  background: var(--embed-accent);
  color: var(--embed-accent-text);
}

.embed-control:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.embed-editor {
  width: 100%;
  display: grid;
  gap: 0.4rem;
}

.embed-editor label {
  font-weight: 750;
}

.embed-editor textarea {
  width: 100%;
  height: clamp(7rem, 20svh, 10rem);
  min-height: 7rem;
  resize: vertical;
  padding: 0.75rem;
  border: 1px solid var(--embed-border);
  border-radius: 0.75rem;
  background: var(--embed-surface);
  color: var(--embed-text);
  line-height: 1.45;
}

.embed-editor textarea[aria-invalid="true"] {
  border-color: #b42318;
}

.embed-hint,
.embed-noscript {
  max-width: 42rem;
  margin: 0;
  color: var(--embed-muted);
  line-height: 1.4;
  text-align: center;
}

.embed-status.result {
  max-width: 100%;
  min-height: 1.4em;
  margin: 0;
  overflow-wrap: anywhere;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--embed-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--embed-surface) 92%, var(--embed-text) 8%);
  color: var(--embed-text);
  box-shadow: none;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.embed-status.result--error {
  border-color: #b42318;
  background: #fff1f0;
  color: #8a1c13;
}

html[data-embed-appearance="dark"] .embed-status.result--error,
html[data-embed-appearance="transparent"] .embed-status.result--error {
  background: rgba(80, 12, 12, 0.9);
  color: #ffd7d2;
}

.embed-brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  color: var(--embed-muted);
  font-size: 0.86rem;
  font-weight: 800;
  text-underline-offset: 0.2em;
}

.embed-shell[data-state="loading"] .embed-brand {
  visibility: hidden;
}

.embed-shell[data-mode="stream"] {
  --embed-fixed-space: 6.75rem;
  padding: 0;
  overflow: hidden;
}

.embed-shell[data-mode="stream"] .embed-card {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  align-content: center;
  padding: 0;
  gap: clamp(0.3rem, 1.2vmin, 0.65rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.embed-shell[data-mode="stream"][data-aspect="landscape"] {
  --embed-wheel-size: min(78svh, 58vw, calc(100svh - var(--embed-fixed-space)));
}

.embed-shell[data-mode="stream"][data-aspect="portrait"] {
  --embed-wheel-size: min(70vw, 58svh, calc(100svh - var(--embed-fixed-space)));
}

.embed-shell[data-mode="stream"][data-aspect="square"] {
  --embed-wheel-size: min(84vmin, 46rem, calc(100svh - var(--embed-fixed-space)));
}

.embed-shell[data-mode="stream"] .embed-brand,
.embed-shell[data-mode="stream"] .embed-status:not(.visually-hidden) {
  padding: 0.45rem 0.75rem;
  border-color: rgba(255, 255, 255, 0.34);
  border-radius: 0.65rem;
  background: rgba(8, 13, 21, 0.72);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

@media (max-width: 520px) {
  .embed-shell {
    --embed-card-pad-inline: 0.6rem;
  }

  /* Three buttons need more width than a narrow frame has, so reserve a
     second row for the controls. */
  .embed-shell[data-interaction="controls"],
  .embed-shell[data-interaction="edit"] {
    --embed-controls-space: calc(
      var(--embed-controls-height, calc(44px * 2 + 0.5rem)) + var(--embed-gap)
    );
  }

  .embed-control {
    flex: 1 1 8rem;
  }

  .embed-shell[data-interaction="edit"] .embed-control {
    min-width: 6rem;
    flex-basis: 6rem;
    padding-inline: 0.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}