/* «Prueba lo que puedes crear»: a deep chapter where the demos are the light.
   Each demo: the result large on the left, the controls and Mochi's challenge on the right. */
.try {
  background: var(--deep); color: var(--paper);
  padding: var(--section-pad) var(--m) clamp(72px, 8vw, 120px);
  display: grid; gap: clamp(24px, 3vw, 40px); align-content: start;
}
.try :focus-visible { outline-color: var(--yellow); }
.try-head { max-width: 56rem; display: grid; gap: 14px; }
.try-head .head { margin: 0; }
.try-kicker { margin: 0; color: var(--mint); font-weight: 600; letter-spacing: 0.02em; }
.try-lead { margin: 0; color: #C9D6EC; max-width: 40ch; }

/* Tabs: three big choices, the chosen one lit in mint. */
.try-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.try-tabs [role="tab"] {
  display: grid; gap: 2px; text-align: left; padding: 16px 20px;
  border: 1px solid #2E4677; border-radius: 18px; background: #1E3561; color: var(--paper);
  transition: background-color 200ms ease, border-color 200ms ease, transform 140ms var(--ease-out);
}
.try-tabs [role="tab"]:active { transform: scale(0.98); }
.try-tabs [aria-selected="true"] { background: var(--mint); border-color: var(--mint); color: var(--deep); }
.try-tab-kind { font-size: var(--step-small); opacity: 0.8; }
.try-tab-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); }
@media (hover: hover) and (pointer: fine) { .try-tabs [aria-selected="false"]:hover { background: #24406F; } }

.try-panel {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start;
  animation: try-in 360ms var(--ease-out);
}
.try-panel[hidden] { display: none; }
@keyframes try-in { from { opacity: 0; transform: translateY(10px); } }

.try-stage { border-radius: var(--radius); overflow: hidden; background: #0F1F3D; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
.try-stage canvas { display: block; width: 100%; height: auto; }
.try-stage-telar canvas { aspect-ratio: 1; }
.try-stage-game { background: #0F1F3D; }
.try-stage-game canvas { aspect-ratio: 4 / 3; touch-action: manipulation; cursor: pointer; }
.try-game-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.try-play, .try-again {
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--mint); color: var(--deep); font-weight: 700;
  transition: transform 140ms var(--ease-out), filter 150ms ease;
}
.try-play:active, .try-again:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .try-play:hover, .try-again:hover { filter: brightness(1.06); } }
.try-score { margin: 0; color: #C9D6EC; }
.try-score b { color: var(--yellow); font-size: 1.25em; }

.try-side { display: grid; gap: 16px; align-content: start; }
.try-mochi {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; margin: 0;
  padding: 12px 16px; border-radius: 18px; background: #1E3561;
  transition: background-color 300ms ease;
}
.try-mochi img { border-radius: 50%; background: var(--paper); }
.try-mochi.is-win { background: var(--yellow); color: var(--deep); }
.try-mochi b { color: var(--yellow); }
.try-mochi.is-win b { color: var(--deep); }

.try-range { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-weight: 600; }
.try-range output { font-variant-numeric: tabular-nums; color: var(--mint); }
.try-range input { grid-column: 1 / -1; width: 100%; accent-color: var(--mint); height: 28px; }
.try-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.try-chips legend { padding: 0 0 8px; font-weight: 600; }
.try-chips label { position: relative; }
.try-chips input { position: absolute; opacity: 0; inset: 0; }
.try-chips span {
  display: inline-block; padding: 8px 16px; border-radius: 999px; border: 1px solid #3A5384;
  transition: background-color 150ms ease, color 150ms ease;
}
.try-chips input:checked + span { background: var(--paper); color: var(--deep); border-color: var(--paper); }
.try-chips input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.try-again { justify-self: start; background: transparent; color: var(--mint); border: 1px solid var(--mint); }

.try-code { border-radius: 16px; background: #0F1F3D; }
.try-code summary { cursor: pointer; padding: 14px 16px; font-weight: 700; color: var(--mint); }
.try-code p { margin: 0 16px 10px; color: #C9D6EC; font-size: var(--step-small); }
.try-code pre {
  margin: 0; padding: 0 16px 16px; max-height: 340px; overflow: auto;
  font: 500 0.875rem / 1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; color: #E6EEFB;
}
.try-hint { margin: 0; color: #C9D6EC; font-size: var(--step-small); }

/* The blocks: shaped and coloured like Scratch's, with a white oval for each number you can change. */
.blocks { display: grid; gap: 4px; justify-items: start; font: 600 0.9375rem / 1.2 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; }
.block { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 6px; }
.block.hat { border-radius: 18px 18px 6px 6px; padding-top: 14px; margin-top: 10px; }
.block.ev { background: #FFBF00; color: #fff; box-shadow: inset 0 -2px 0 #CC9900; }
.block.var { background: #FF8C1A; box-shadow: inset 0 -2px 0 #DB6E00; }
.block.mov { background: #4C97FF; box-shadow: inset 0 -2px 0 #3373CC; }
.block.ctl { background: #FFAB19; box-shadow: inset 0 -2px 0 #CF8B17; }
.block.c { display: grid; gap: 4px; padding: 9px 14px 14px; }
.block.c > .block { margin-left: 14px; }
.slot { display: inline-flex; }
.slot input, .slot-var {
  width: 4.2em; padding: 4px 10px; border: 0; border-radius: 999px; background: #fff; color: #575E75;
  font: inherit; text-align: center;
}
.slot-var { width: auto; background: rgba(0, 0, 0, 0.18); color: #fff; }
.slot input:focus-visible { outline: 3px solid var(--deep); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The card the visitor designs. */
.try-stage-web { display: grid; place-items: center; min-height: 380px; padding: clamp(20px, 4vw, 48px); background: #E9EEF7; }
.card-preview {
  --card-bg: #234BC0; --card-ink: #fff; --card-accent: #A0F2D5; --card-radius: 16px;
  width: min(100%, 380px); padding: 32px; display: grid; gap: 12px;
  background: var(--card-bg); color: var(--card-ink); border-radius: var(--card-radius);
  box-shadow: 0 18px 40px rgba(23, 43, 77, 0.25);
  transition: background-color 200ms ease, color 200ms ease, border-radius 200ms ease;
}
.card-preview h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; overflow-wrap: anywhere; }
.card-preview p { margin: 0; opacity: 0.9; overflow-wrap: anywhere; }
.card-preview a {
  justify-self: start; padding: 12px 20px; border-radius: max(8px, var(--card-radius));
  background: var(--card-accent); color: #172B4D; font-weight: 700; text-decoration: none; overflow-wrap: anywhere;
}
.try-field { display: grid; gap: 6px; font-weight: 600; }
.try-field input {
  min-height: 44px; padding: 0 14px; border: 1px solid #3A5384; border-radius: 12px;
  background: #0F1F3D; color: var(--paper); font: inherit; font-weight: 400;
}
.try-colors { display: flex; flex-wrap: wrap; gap: 16px; }
.try-colors label { display: grid; gap: 6px; font-weight: 600; }
.try-colors input { width: 56px; height: 44px; padding: 2px; border: 1px solid #3A5384; border-radius: 12px; background: #0F1F3D; }

.try-cta { margin: 0; }
.try-cta .btn { display: inline-flex; }

@media (max-width: 860px) {
  .try-panel { grid-template-columns: minmax(0, 1fr); }
  .try-tabs { grid-template-columns: minmax(0, 1fr); }
  .try-tabs [role="tab"] { padding: 12px 16px; grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .try-panel { animation: none; }
}