/* Approved sage / curiosity-shelf direction. Shared player styles stay in app.css. */
:root {
  --sage: #829375;
  --sage-strong: #576b4d;
  --gutter: clamp(24px, 4.65vw, 76px);
  --col-max: 1440px;
  --bar-h: 118px;
}

html:not([data-theme="dark"]) {
  color-scheme: light;
  --paper: #f8f6f0;
  --paper-2: #edece5;
  --ink: #26312d;
  --ink-2: #535b54;
  --ink-3: #71776d;
  --ink-4: #9a9e93;
  --line: #deddd4;
  --line-2: #c8cbbf;
  --selection: #82937533;
  --frame-edge: #26312d1a;
}

html[data-theme="dark"] {
  --sage: #9cac8f;
  --sage-strong: #b2c2a7;
  --paper: #171d19;
  --paper-2: #232c25;
  --ink: #f0f0e7;
  --ink-2: #c0c8bd;
  --ink-3: #a4b19e;
  --ink-4: #809079;
  --line: #364236;
  --line-2: #596553;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --sage: #9cac8f;
    --sage-strong: #b2c2a7;
    --paper: #171d19;
    --paper-2: #232c25;
    --ink: #f0f0e7;
    --ink-2: #c0c8bd;
    --ink-3: #a4b19e;
    --ink-4: #809079;
    --line: #364236;
    --line-2: #596553;
  }
  html:not([data-theme]) .composer-box { background: var(--paper); }
}

.bar { position: relative; border-bottom: 0; }
.bar.is-scrolled { box-shadow: none; }
.bar-inner { max-width: var(--col-max); }
.wordmark {
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  color: var(--ink);
}
.wordmark-logo {
  display: block;
  width: 100px;
  aspect-ratio: 2087 / 753;
  background: currentColor;
  /* Frame the transparent artwork without recoloring or redrawing its letters. */
  mask-image: url('/assets/landing/wordmark.png');
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
.bar-links { gap: 34px; }
.bar-link { font: 400 16px/1.4 var(--sans); color: var(--ink); }
.profile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink);
  font: 400 23px/1 var(--serif);
}

.composer { max-width: var(--col-max); padding: 47px 0 64px; }
.home-intro { display: block; margin: 0 0 33px; }
.home-intro h1 {
  max-width: none;
  margin: 0;
  font: 400 clamp(24px, 4.2vw, 64px)/1.09 var(--serif);
  letter-spacing: -.038em;
  white-space: nowrap;
}
.home-intro .home-lede {
  margin: 18px 0 0;
  color: var(--ink);
  font: 400 clamp(17px, 1.6vw, 24px)/1.5 var(--sans);
  letter-spacing: -.025em;
}
.composer-form { width: 100%; position: relative; z-index: 2; }
.composer-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 272px;
  padding: 27px 20px 18px 24px;
  border: 1px solid var(--line-2);
  border-radius: 13px;
  background: color-mix(in srgb, var(--paper) 62%, white);
  box-shadow: none;
}
html[data-theme="dark"] .composer-box { background: var(--paper); }
.composer-box::after { border-color: var(--sage); box-shadow: 0 0 0 3px #82937512; }
.composer-box:focus-within::after { opacity: .65; }
.composer .field {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 148px;
  max-height: 320px;
  margin: 0;
  padding: 0 8px 8px 0;
  border: 0;
  font: 400 clamp(24px, 2.25vw, 34px)/1.35 var(--serif);
  letter-spacing: -.02em;
  box-shadow: none;
  background: transparent;
}
.composer .field::placeholder { color: var(--ink-3); }
.composer .field:focus { box-shadow: none; }
.composer .count { position: absolute; top: 10px; right: 20px; font: 11px var(--sans); }
.composer-toolbar, .composer-input-actions, .composer-settings {
  display: flex;
  align-items: center;
}
.composer-toolbar { justify-content: space-between; gap: 20px; margin-top: auto; }
.composer-input-actions { gap: 16px; }
.composer .upload {
  padding: 0;
  height: 48px;
  border: 0;
  border-radius: 4px;
  gap: 11px;
  font: 400 15px/1.4 var(--sans);
  color: var(--ink);
  box-shadow: none;
  white-space: nowrap;
}
.composer .upload svg { width: 23px; height: 23px; }
.composer .dictate {
  width: 47px;
  height: 40px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.composer .dictate svg { width: 23px; height: 23px; }
.composer-settings { gap: 14px; }
.choice-picker { position: relative; }
.choice-picker > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font: 400 14px/1.4 var(--sans);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.choice-picker > summary::-webkit-details-marker { display: none; }
.choice-picker > summary svg { flex: none; }
.choice-picker > summary svg:last-child:not(:first-child) { width: 15px; height: 15px; }
.choice-picker[open] > summary, .choice-picker > summary:hover { background: var(--paper-2); border-color: var(--sage); }
.choice-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  right: 0;
  min-width: 218px;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 8px 24px #26312d14;
}
.choice-panel > label {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 10px;
  padding: 11px 12px;
  border-radius: 7px;
  cursor: pointer;
  font: 400 14px/20px var(--sans);
}
.choice-panel label:hover, .choice-panel label:has(input:checked) { background: var(--paper-2); }
.choice-panel input[type="radio"] { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--sage-strong); }
.choice-panel small { grid-column: 2; color: var(--ink-2); font: 12px/20px var(--sans); }
.options-panel { width: 312px; padding: 20px; }
.voice-choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.voice-choices legend { margin-bottom: 12px; font: 500 14px/20px var(--sans); }
.voice-choices label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.options-panel .author-options { margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.options-panel .author-options > summary { font: 13px/20px var(--sans); color: var(--ink-2); }
.options-panel .author-options-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
.options-panel .author-options-fields label { min-width: 0; }
.options-panel .author-options-fields input, .options-panel .author-options-fields select { max-width: 100%; }
.composer .explain {
  grid-column: auto;
  grid-row: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 138px;
  height: 62px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font: 400 25px/1 var(--serif);
  letter-spacing: -.02em;
}
.composer .explain:disabled { opacity: .5; cursor: not-allowed; }
.composer-error:empty, .engine:empty { display: none; }
.composer-error, .engine { margin: 12px 2px 0; font: 13px/20px var(--sans); }

.curiosity { margin-top: 53px; }
.curiosity h2 { margin: 0 0 23px; font: 400 29px/1.2 var(--serif); letter-spacing: -.025em; }
.example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.example-card { display: block; min-width: 0; padding: 0; text-align: left; border-radius: 9px; color: var(--ink); }
.example-poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fafaf7;
  transition: border-color 180ms ease;
}
.example-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
.example-play {
  position: absolute;
  bottom: 13px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding-left: 2px;
  border-radius: 50%;
  background: #26312d;
  color: #f8f6f0;
  transition: background-color 160ms ease, transform 160ms ease;
}
.example-duration { position: absolute; bottom: 13px; right: 12px; padding: 1px 6px; border: 1px solid #c8cbbf; border-radius: 5px; background: #fafaf7ed; color: #26312d; font: 13px/20px var(--sans); }
.example-duration:empty { display: none; }
.example-title { display: block; margin-top: 15px; font: 400 17px/1.4 var(--sans); letter-spacing: -.025em; }
@media (hover: hover) {
  .example-card:hover .example-poster { border-color: var(--sage-strong); }
  .example-card:hover img { transform: scale(1.025); }
  .example-card:hover .example-play { background: var(--sage-strong); transform: scale(1.06); }
}
.composer .recently { margin-top: 46px; }
.composer .recently-label { color: var(--ink); font-size: 25px; }
.composer .recently .row-list { border: 0; border-radius: 0; }
.composer .recently .row { padding-inline: 0; }
.page:has(.composer:not([hidden])) > .studio-footer { display: none; }

.example-dialog { width: min(960px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 15px; background: var(--paper); color: var(--ink); overflow: auto; }
.example-dialog::backdrop { background: #18241ec4; }
.example-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; }
.example-dialog h2 { margin: 0; font: 400 28px/1.2 var(--serif); }
#example-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; }
#example-close:hover { background: var(--paper-2); }
#example-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #fafaf7; }
.example-dialog-footer { padding: 19px 24px; }
#example-error { margin: 18px 24px; color: var(--oxide); }
.example-dialog .text-link { font-size: 14px; color: var(--sage-strong); }
.choice-picker > summary:focus-visible, .example-card:focus-visible, .composer-toolbar button:focus-visible, .wordmark:focus-visible, .profile:focus-visible, .example-dialog button:focus-visible { outline: 2px solid var(--sage-strong); outline-offset: 5px; }

@media (min-width: 1600px) {
  .bar { padding-inline: max(var(--gutter), calc((100vw - var(--col-max)) / 2)); }
}
@media (max-width: 1100px) {
  :root { --bar-h: 98px; }
  .composer { padding-top: 30px; }
  .composer-settings { gap: 9px; }
  .choice-picker > summary { padding-inline: 11px; gap: 6px; }
  .composer .explain { min-width: 108px; height: 54px; font-size: 23px; padding-inline: 18px; }
  .composer-input-actions { gap: 10px; }
  .composer .upload { font-size: 13px; gap: 8px; }
  .example-grid { gap: 18px; }
}
@media (max-width: 860px) {
  .composer-toolbar { flex-wrap: wrap; gap: 13px; }
  .composer-settings { margin-left: auto; }
  .composer-box { min-height: 250px; }
  .curiosity { margin-top: 40px; }
  .example-title { font-size: 15px; }
}
@media (max-width: 600px) {
  :root { --gutter: 22px; --bar-h: 90px; }
  .wordmark-logo { width: 84px; }
  .bar-links { gap: 20px; }
  .bar-link { font-size: 13px; }
  .profile { width: 36px; height: 36px; font-size: 20px; }
  .composer { padding-top: 25px; padding-bottom: 36px; }
  .home-intro { margin-bottom: 26px; }
  .home-intro h1 { font-size: clamp(36px, 9.5vw, 49px); line-height: 1.06; letter-spacing: -.035em; white-space: normal; text-wrap: pretty; }
  .home-intro .home-lede { margin-top: 15px; font-size: 16px; line-height: 1.5; }
  .composer-box { min-height: 282px; padding: 19px 14px 14px; gap: 8px; border-radius: 12px; }
  .composer .field { min-height: 109px; font-size: 24px; line-height: 1.3; padding: 0 2px; }
  .composer-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 7px; width: 100%; }
  .composer-input-actions { gap: 12px; }
  .composer .upload { height: 42px; font-size: 13px; }
  .composer .upload svg { width: 19px; height: 19px; }
  .composer .dictate { width: 42px; }
  .composer-settings { display: grid; grid-template-columns: auto auto 44px 1fr; gap: 7px; width: 100%; margin: 0; }
  .choice-picker > summary { min-height: 44px; padding: 0 8px; font-size: 12px; gap: 5px; border-radius: 7px; }
  .choice-picker > summary > svg:first-child { display: none; }
  .more-options > summary > svg:first-child { display: block; }
  .more-options > summary > span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .composer .explain { min-width: 0; height: 46px; padding: 0 10px; font-size: 20px; border-radius: 7px; }
  .choice-panel { left: 0; right: auto; }
  .more-options .choice-panel { left: auto; right: -78px; width: min(294px, calc(100vw - 76px)); max-height: 320px; overflow: auto; }
  .curiosity { margin-top: 36px; }
  .curiosity h2 { margin-bottom: 18px; font-size: 26px; }
  .example-grid { grid-template-columns: 1fr; gap: 25px; }
  .example-title { font-size: 16px; margin-top: 11px; }
  .example-play { width: 35px; height: 35px; }
  .composer .recently { margin-top: 40px; }
  .example-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 12px; }
  .example-dialog-header { padding: 12px 14px; gap: 10px; }
  .example-dialog h2 { font-size: 24px; }
  .example-dialog-footer { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .example-poster img, .example-play { transition: none; }
  .example-card:hover img, .example-card:hover .example-play { transform: none; }
}