:root {
  --accent: #5b4fd1;
  --on-accent: #ffffff;
  --soft: #efecfd;
  --lavender: #e7e2fb;
  --peach: #fde6dc;
  --code: #f1f3f8;
}
:root[data-theme="dark"] {
  --accent: #b6acff;
  --on-accent: #1a1838;
  --soft: #262a4a;
  --lavender: #2c2a4e;
  --peach: #3b2b33;
  --code: #1a2638;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --accent: #b6acff; --on-accent: #1a1838; --soft: #262a4a; --lavender: #2c2a4e; --peach: #3b2b33; --code: #1a2638; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 28px; }
body { margin: 0; background: var(--idy-bg); color: var(--idy-ink); font-size: 16px; line-height: 1.75; }
a { color: var(--accent); text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
p { margin: 0 0 16px; }
h1, h2, h3 { margin: 0; }
h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.25; }
.wrap { width: min(100% - 56px, 1120px); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; z-index: 10; top: -100px; left: 20px; padding: 8px 14px; background: var(--idy-surface); }
.skip-link:focus { top: 12px; }
/* Keep the site navigation accessible when the character crosses the header. */
.idy-header.compact-header { position: relative; z-index: 2147483001; }

.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; padding-block: 120px 90px; }
.hero-copy { min-width: 0; }
.eyebrow { margin-bottom: 20px; color: var(--accent); font-size: 13px; font-weight: 700; }
h1 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.09; letter-spacing: -.045em; }
.hero-description { max-width: 46ch; margin-top: 25px; color: var(--idy-muted); font-size: 17px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 17px 23px; margin-top: 28px; }
.hero-note { margin: 22px 0 0; max-width: 46ch; color: var(--idy-muted); font-size: 13px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 11px 20px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.5; }
.button:hover { text-decoration: none; filter: brightness(.95); }
.primary { color: var(--on-accent); background: var(--accent); }
.text-link { font-size: 14px; font-weight: 600; }

/* Cards with plain top edges and room above them: good places to perch. */
.playground { display: grid; gap: 150px; padding-top: 150px; min-width: 0; }
.tile { margin: 0; padding: 20px 22px 18px; border: 1px solid var(--idy-line); border-radius: 14px; background: var(--idy-surface); }
.tile p { margin: 0; color: var(--idy-muted); font-size: 14px; line-height: 1.6; }
.tile-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--accent); }
.tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tile-lavender { background: var(--lavender); border-color: transparent; }
.tile-peach { background: var(--peach); border-color: transparent; }
.try-field { display: grid; gap: 8px; margin-top: -40px; color: var(--idy-muted); font-size: 13px; }
.try-field input { min-height: 46px; padding: 10px 14px; border: 1px solid var(--idy-line); border-radius: 10px; background: var(--idy-surface); color: var(--idy-ink); font: inherit; font-size: 15px; }
.try-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.meet-section, .features-section, .embed-section, .questions-section { padding-block: 60px; border-top: 1px solid var(--idy-line); }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 42px; }
.section-heading h2 { max-width: 22ch; }
.section-heading > p { max-width: 48ch; margin: 0; color: var(--idy-muted); align-self: end; }

.figure-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pick { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 14px; padding: 22px; border: 1px solid var(--idy-line); border-radius: 14px; background: var(--idy-surface); color: var(--idy-ink); font: inherit; text-align: left; cursor: pointer; }
.pick:hover { border-color: var(--accent); }
.pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--soft); }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--idy-surface); box-shadow: 0 0 0 1px var(--idy-line); }
.swatch-miru { background: linear-gradient(160deg, #cfbaf7, #8ebcf2); }
.swatch-koharu { background: linear-gradient(160deg, #ffbfa3, #e0892b); }
.swatch-xiaoxiao { background: linear-gradient(160deg, #4f4864, #e7525d); }
.swatch-riley { background: linear-gradient(160deg, #c9804d, #2c3d6c); }
.swatch-amara { background: linear-gradient(160deg, #4a3330, #ff7f6e); }
.swatch-elsie { background: linear-gradient(160deg, #f2d39a, #c8343f); }
.pick-name { font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.pick-text { grid-column: 1 / -1; color: var(--idy-muted); font-size: 14px; line-height: 1.65; }

.features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 80px; margin: 0; }
.features-list dt { margin-bottom: 10px; font-size: 19px; font-weight: 700; line-height: 1.45; }
.features-list dd { max-width: 49ch; margin: 0; color: var(--idy-muted); font-size: 15px; }
.unavailable-feature { color: var(--idy-muted); }
.unavailable-feature .code { color: var(--idy-muted); }
.availability { display: inline-block; margin: 0 0 6px; color: var(--idy-muted); font-size: 12px; font-weight: 600; }

.code { margin: 0 0 10px; padding: 18px 20px; overflow-x: auto; border: 1px solid var(--idy-line); border-radius: 12px; background: var(--code); font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-note { margin: 0 0 30px; max-width: 75ch; color: var(--idy-muted); font-size: 13px; }

.questions-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.questions details { border-bottom: 1px solid var(--idy-line); }
.questions summary { padding: 17px 0; cursor: pointer; font-size: 16px; font-weight: 650; }
.questions details:first-child summary { padding-top: 0; }
.questions details p { margin: 0 0 22px; color: var(--idy-muted); font-size: 14px; }

@media (max-width: 1000px) {
  .hero, .section-heading, .features-list, .questions-section { gap: 38px; }
  .figure-picker { gap: 16px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-block: 60px 48px; }
  .playground { gap: 130px; padding-top: 110px; }
  .section-heading, .features-list, .questions-section, .figure-picker { grid-template-columns: 1fr; }
  .section-heading { gap: 20px; margin-bottom: 30px; }
  .meet-section, .features-section, .embed-section, .questions-section { padding-block: 40px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .tile-row { grid-template-columns: 1fr; gap: 130px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }