/* The /try/ page: toy Dialogue tab and toy Music Gen. Uses the tokens from style.css. */
.try { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter); }
.try-head { max-width: 46rem; }
.try-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; }
.try-lede { color: var(--text); font-size: 1.12rem; }
.try-badge { display: inline-block; margin: 0 0 12px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--v3); color: var(--text); font: 600 .85rem var(--display); }
.try-tool { margin-top: clamp(40px, 6vw, 80px); }
.try-intro { max-width: 46rem; }
.try-intro p { color: var(--text); }
.try-nudge { margin-top: clamp(40px, 6vw, 80px); padding: clamp(24px, 4vw, 40px); background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; }
.try-nudge p { max-width: 40rem; }

/* shared controls */
.try-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.try-field > label, .try-label { font-size: .9rem; font-weight: 700; color: var(--muted); }
.try input[type="text"], .try textarea, .try select {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--code-bg);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; width: 100%; min-width: 0;
}
.try textarea { resize: vertical; line-height: 1.4; }
.try select { padding-right: 6px; }
.try-row { display: flex; gap: 8px; }
.try-row-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.try-btn {
  font: 700 .98rem var(--display); color: var(--text); background: var(--ink-3);
  border: 2px solid var(--line); border-radius: 9px; padding: 8px 14px; cursor: pointer; white-space: nowrap;
}
.try-btn:hover { border-color: var(--v2); }
.try-btn:disabled { opacity: .45; cursor: default; border-color: var(--line); }
.try-btn-main { background: var(--v2); border-color: var(--v2); color: var(--code-bg); }
.try-btn-main:hover { background: color-mix(in srgb, var(--v2) 80%, var(--text)); border-color: color-mix(in srgb, var(--v2) 80%, var(--text)); }
.try-btn-small { font-size: .85rem; padding: 5px 10px; }
.try-btn[aria-pressed="true"] { border-color: var(--v3); }
.try-icon { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font-size: 1rem; cursor: pointer; }
.try-icon:hover { border-color: var(--v2); }
.try-icon:disabled { opacity: .35; cursor: default; }

/* ---- dialogue builder */
.dlg { margin-top: 20px; }
.dlg-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px 14px 0 0; }
.dlg-bar .try-field:first-child { width: 12rem; }
.dlg-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; }
.dlg-edit { padding: 14px; max-height: 760px; overflow-y: auto; }
.dlg-side { padding: 14px; border-left: 1px solid var(--line); background: var(--ink-2); border-radius: 0 0 14px 0; }
.dlg-side h3 { margin-bottom: .3em; }
.dlg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dlg-card { --c: var(--line); background: var(--ink-2); border: 1px solid var(--line); border-left: 5px solid var(--c); border-radius: 14px; padding: 10px 12px 12px; display: grid; gap: 8px; }
.dlg-card.is-now { outline: 2px solid var(--v3); outline-offset: 2px; }
/* the app's node colors, mapped to the site's ramp */
.dlg-start, .dlg-end { --c: var(--v4); }
.dlg-say { --c: var(--v2); }
.dlg-choice { --c: var(--v3); }
.dlg-branch { --c: var(--v1); }
.dlg-action { --c: color-mix(in srgb, var(--v1) 55%, var(--v2)); }
.dlg-end { --c: var(--muted); }
.dlg-card-head { display: flex; align-items: center; gap: 10px; }
.dlg-num { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--ink-3); font: 700 .85rem var(--display); }
.dlg-type { margin: 0; font-size: 1.05rem; flex: 1; }
.dlg-tools { display: flex; gap: 6px; }
.dlg-help { margin: 0; font-size: .9rem; color: var(--muted); }
.dlg-option { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 8px; border-radius: 10px; background: var(--code-bg); }
.dlg-inv { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-inv legend { font-weight: 700; color: var(--muted); font-size: .9rem; padding: 0 4px; }
.dlg-inv .try-field { width: 100%; }
.dlg-check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); cursor: pointer; }
.dlg-check.on { border-color: var(--v4); }
.dlg-check input { accent-color: var(--v4); width: 18px; height: 18px; margin: 0; }
.dlg-stage { margin-top: 14px; }
.dlg-toasts { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dlg-toasts li { padding: 4px 12px; border-radius: 999px; background: var(--ink); border: 1px solid var(--v4); color: var(--text); font-size: .9rem; }
.dlg-box { background: var(--code-bg); border: 3px solid var(--text); border-radius: 12px; padding: 14px 16px; box-shadow: inset 0 0 0 3px var(--ink); }
.dlg-who { margin: 0 0 4px; font: 700 1rem var(--display); color: var(--text); }
.dlg-line { font-size: 1.1rem; margin: 0 0 12px; }
.dlg-ended .dlg-line { color: var(--muted); }
.dlg-answers { display: flex; flex-direction: column; gap: 6px; }
.dlg-answer { text-align: left; font: inherit; color: var(--text); background: var(--ink-2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.dlg-answer:hover { border-color: var(--v3); }
.dlg-answer::before { content: "▸ "; color: var(--v3); }

@media (max-width: 820px) {
  .dlg-cols { grid-template-columns: 1fr; }
  .dlg-side { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; order: -1; }
  .dlg-edit { max-height: none; }
  .dlg-option { grid-template-columns: 1fr; }
  .dlg-bar .try-field:first-child { width: 100%; }
}

/* ---- music maker */
.mus { --cell: 22px; --label: 48px; margin-top: 20px; padding: 14px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; }
.mus-styles { display: flex; flex-wrap: wrap; gap: 8px; }
.mus-style { font: 600 .95rem var(--display); color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.mus-style:hover { border-color: var(--v2); }
.mus-style[aria-pressed="true"] { background: var(--ink-3); border-color: var(--v3); box-shadow: inset 0 0 0 1px var(--v3); }
.mus-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 14px; }
.mus-bar input[type="range"] { width: 12rem; accent-color: var(--v2); }
.mus-bar select { width: auto; }
.mus-play { min-width: 6.5rem; }
.mus-status { margin: 12px 0 2px; font-size: .95rem; color: var(--muted); }
.mus-hint { margin: 0 0 10px; }
.mus-tracks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.mus-track { --c: var(--v1); background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.mus-t2 { --c: var(--v2); } .mus-t3 { --c: var(--v3); } .mus-t4 { --c: var(--v4); }
.mus-track-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 8px; }
.mus-track-head h3 { margin: 0; font-size: 1.05rem; }
.mus-track-head h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 8px; }
.mus-wave { color: var(--muted); font-size: .9rem; margin-right: auto; }
.mus-track.is-muted .mus-grid { opacity: .4; }
.mus-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.mus-grid { display: grid; width: max-content; }
.mus-r { display: flex; }
.mus-rl { position: sticky; left: 0; z-index: 1; width: var(--label); flex: none; font: 400 .72rem/1 var(--body); color: var(--muted); background: var(--ink); display: flex; align-items: center; padding-right: 4px; }
.mus-r.is-root .mus-rl { color: var(--text); font-weight: 700; }
.mus-c { width: var(--cell); height: 18px; flex: none; padding: 0; border: 0; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--ink-2); cursor: pointer; border-radius: 0; }
.mus-r.is-root .mus-c { background: var(--ink-3); }
.mus-c.beat { border-left: 1px solid var(--line); }
.mus-c.bar { border-left: 2px solid var(--muted); }
.mus-c:hover { background: var(--line); }
.mus-c.on { background: var(--c); }
.mus-c.on.hold { background: var(--c); opacity: .6; }
.mus-c:focus-visible { outline: 3px solid var(--gold); outline-offset: -2px; border-radius: 3px; }
.mus-t4 .mus-c { height: 22px; }
.mus-head { position: absolute; top: 0; bottom: 0; left: calc(var(--label) + var(--step, 0) * var(--cell)); width: var(--cell); background: color-mix(in srgb, var(--text) 16%, transparent); border-left: 2px solid var(--text); pointer-events: none; display: none; }
.mus.is-playing .mus-head { display: block; }
@media (max-width: 560px) { .mus { --cell: 20px; --label: 40px; padding: 10px; } .mus-bar input[type="range"] { width: 100%; } .mus-bar .try-field:nth-child(2) { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .mus-head { transition: none; } }