/* Homepage playground (playground.js): heading, checklist, practice page, clipboard card, arrows. */
.play {
  position: relative; overflow-x: clip; color: #f4f0fb;
  background: radial-gradient(1100px 520px at 80% -8%, #3b2766 0%, transparent 62%), radial-gradient(700px 400px at 0% 100%, rgba(124, 58, 237, .14), transparent 70%), linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  margin-top: -72px; padding: 104px 0 56px;
}
.play .wrap.play-wrap { max-width: 1290px; }
.play-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.play h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0 0 8px; }
.play h1 .hl { background: linear-gradient(transparent 58%, rgba(167, 139, 250, .45) 58%); padding: 0 .08em; }
.play .eyebrow { color: var(--lavender); margin-bottom: .6rem; display: inline-flex; align-items: center; gap: 8px; }
.play-sub { margin: 0; font-size: 1.08rem; color: #cfc5e6; max-width: 40em; }
.play-get { flex: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: live 1.8s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }

/* things to try */
.tasks { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 22px 0 20px; }
.tasks ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tasks ol li { display: flex; }
.tasks ol button {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .88rem; color: #d9cff0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(196, 181, 253, .2);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.tasks ol button:hover { border-color: rgba(196, 181, 253, .5); color: #fff; }
.tk-num { line-height: 1; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; font-size: .78rem; font-weight: 700; background: rgba(167, 139, 250, .2); color: #e4dcf5; }
.tasks ol button.now { color: #fff; border-color: #fbbf24; background: rgba(251, 191, 36, .1); box-shadow: 0 0 0 3px rgba(251, 191, 36, .12); }
.tasks ol button.now .tk-num { background: #fbbf24; color: #2a1a05; }
.tasks ol button.done { color: #b9f5d8; border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); }
.tasks ol button.done .tk-num { background: #34d399; color: #053b26; font-size: 0; }
.tasks ol button.done .tk-num::after { content: "✓"; font-size: 13px; }
.tasks ol button.just { animation: tick .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tick { 40% { transform: scale(1.12); } }
.task-count { margin-left: auto; font-size: .88rem; color: #a99dc6; }
.all-done .task-count { color: #6ee7b7; font-weight: 600; }
.arrows-btn { font: inherit; font-size: .85rem; color: #c4b5fd; background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.arrows-btn:hover { color: #fff; }
.all-done .play-get, .play-done .site-header .nav-auth .btn-primary { animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(167, 139, 250, .25), 0 0 34px rgba(167, 139, 250, .55); } }

/* the stage: a page you're reading | where the reader opens | the bar + your clipboard */
.stage { position: relative; display: grid; grid-template-columns: 330px minmax(0, 1fr) 186px; gap: 22px; align-items: start; }

.practice { display: flex; flex-direction: column; color: var(--ink); background: var(--paper); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45); }
.pr-bar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: #ebe4f5; }
.pr-dots { display: flex; gap: 5px; }
.pr-dots i { width: 9px; height: 9px; border-radius: 50%; background: #cfc3e3; }
.pr-url { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .72rem; color: #6b6180; background: #fff; border-radius: 6px; padding: 3px 9px; }
.pr-tabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line); }
.pr-tabs button { font: inherit; font-size: .86rem; font-weight: 500; color: var(--ink-soft); background: none; border: 0; border-bottom: 2.5px solid transparent; padding: 6px 10px 8px; cursor: pointer; }
.pr-tabs button[aria-selected="true"] { color: var(--violet-strong); border-bottom-color: var(--violet-strong); }
.pr-body { padding: 14px 18px 4px; }
.pr-title { font-size: 1.12rem; margin: 0 0 8px; color: var(--ink); }
.pr-text { margin: 0; font-size: .94rem; line-height: 1.66; user-select: text; cursor: text; }
.pr-text::selection { background: #c4b5fd; color: var(--ink); }
.pr-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 18px 16px; font-size: .8rem; color: var(--ink-soft); }
.pr-copy { font: inherit; font-size: .9rem; font-weight: 600; color: #fff; background: var(--violet-strong); border: 0; border-radius: 9px; padding: 8px 18px; cursor: pointer; transition: background .15s; }
.pr-copy:hover { background: #6d28d9; }
.pr-copy.done { background: var(--ok); }
.pr-foot kbd { font: inherit; font-size: .74rem; padding: 1px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: #fff; }

/* your clipboard */
.clip { width: 186px; padding: 12px 13px; border-radius: 12px; background: #2e2347; border: 1px solid #5a4787; font-size: 12.5px; color: #b9acd6; }
.clip-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c4b5fd; }
.clip-label::before { content: ""; width: 12px; height: 14px; border: 1.6px solid currentColor; border-radius: 2.5px; box-shadow: inset 0 3px 0 -1.6px currentColor; }
.clip-text { margin: 0 0 8px; color: #f1ecfb; font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.clip-note { margin: 0; font-size: 11.5px; line-height: 1.45; }
.clip.empty { background: transparent; border-style: dashed; border-color: rgba(167, 139, 250, .35); }
.clip.empty .clip-text { color: #a99dc6; font-style: italic; }
.clip.other { border-color: #d97706; }
.clip.other .clip-note { color: #fcd34d; }
.clip:not(.empty):not(.other) .clip-note { color: #6ee7b7; }
.clip.flash { animation: clipflash .9s ease-out; }
@keyframes clipflash { 0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, .7); } 100% { box-shadow: 0 0 0 14px rgba(167, 139, 250, 0); } }

/* the arrows */
.coach { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.coach.off, .coach.gone { display: none; }
.coach-move { position: absolute; inset: 0; animation: bob 1.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(calc(var(--dx, 0) * 8px), calc(var(--dy, 0) * 8px)); } }
.coach-svg { position: absolute; left: 0; top: 0; overflow: visible; color: #fbbf24; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.coach-path { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }
.coach-bubble {
  position: absolute; left: 0; top: 0; max-width: 230px; padding: 10px 14px 11px; border-radius: 13px;
  background: #fff; color: #241b33; font-size: .9rem; line-height: 1.4; box-shadow: 0 0 0 2.5px #fbbf24, 0 14px 34px rgba(0, 0, 0, .45);
}
.coach-step { display: block; margin-bottom: 2px; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #b45309; }
.coach-text { display: block; font-weight: 500; }
.coach-bubble.pop .coach-text, .coach-bubble.pop .coach-step { animation: popin .35s ease-out; }
@keyframes popin { from { opacity: 0; } }
.coach.shake .coach-bubble { animation: shake .45s ease-in-out; }
@keyframes shake { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }
.coach.hot .coach-step { color: #b91c1c; }
.coach.final .coach-bubble { background: #7c3aed; color: #fff; }
.coach.final .coach-step { color: #fde68a; }
.coach-ring { position: absolute; left: 0; top: 0; border: 2.5px solid #fbbf24; border-radius: 12px; animation: ring 1.5s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, .55); } 100% { box-shadow: 0 0 0 12px rgba(251, 191, 36, 0); } }

/* a little celebration */
.confetti { position: absolute; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -14px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; opacity: 0; animation: fall var(--s) var(--d) cubic-bezier(.25, .6, .5, 1) forwards; }
@keyframes fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(30px, 860px) rotate(var(--r)); } }

@media (prefers-reduced-motion: reduce) {
  .coach-move, .coach-ring, .live-dot, .all-done .play-get, .play-done .site-header .nav-auth .btn-primary { animation: none; }
  .confetti { display: none; }
}

/* after the playground */
.after { padding: 56px 0; border-bottom: 1px solid var(--line); }
.after-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.after h2 { margin-bottom: .3em; }
.after .lead { margin: 0; }
.after .actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1100px) {
  .stage { grid-template-columns: 290px minmax(0, 1fr) 170px; gap: 18px; }
  .clip { width: 170px; }
}
@media (max-width: 900px) {
  .play-head { flex-direction: column; align-items: flex-start; }
  .task-count { margin-left: 0; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .ad-side { order: 1; flex-direction: row; align-items: flex-start; }
  .ad-slot { order: 2; }
  .ad-side .clip { flex: 1; width: auto; }
  .ad-slot { height: 440px; }
}

/* ---- fits a laptop screen (2026-11-10): step 1 (Copy) visible without scrolling ---- */
.play { z-index: 0; padding-top: 92px; padding-bottom: 44px; } /* (z-index: the demo windows stay under the site header) */
.play h1 { font-size: clamp(1.8rem, 2.7vw, 2.5rem); margin-bottom: 4px; }
.play-sub b { color: #fff; }
.tasks { margin: 14px 0 16px; }
.practice .pr-foot { padding: 12px 16px; border-bottom: 1px solid var(--line); background: #faf7ff; }
.practice .pr-copy { padding: 9px 18px; box-shadow: 0 6px 16px rgba(124, 58, 237, .28); }
.practice .pr-body { padding: 12px 18px 16px; }
.ad-slot { height: clamp(340px, calc(100vh - 300px), 500px); } /* the reader (and its question box) fits the screen */
@media (max-height: 760px) {
  .play { padding-top: 84px; }
  .play .eyebrow { margin-bottom: .3rem; }
  .tasks { margin: 10px 0 12px; }
  .tasks ol button { padding-top: 3px; padding-bottom: 3px; }
}
@media (max-width: 900px) { .ad-slot { height: 440px; } }

/* one Download button: the site header's. The big one here only on phones, where the header folds into ☰ */
@media (min-width: 761px) { .play-get { display: none; } }
.play-head { align-items: center; }
/* sound check */
.sound-check { flex: none; display: flex; align-items: center; gap: 12px; max-width: 330px; padding: 11px 12px 11px 13px; border-radius: 14px;
  background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .35); color: #f4e7c8; font-size: .86rem; line-height: 1.35; }
.sound-check b { color: #fde68a; }
.sc-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(251, 191, 36, .16); color: #fbbf24; }
.sc-ico svg { width: 19px; height: 19px; }
.sc-btn { flex: none; font: inherit; font-size: .8rem; font-weight: 600; color: #2a1a05; background: #fbbf24; border: 0; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.sc-btn:hover { background: #fcd34d; }
.sound-check.tested { border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .08); }
.sound-check.tested .sc-ico { background: rgba(52, 211, 153, .16); color: #34d399; }
.sound-check.tested .sc-btn { background: rgba(255, 255, 255, .12); color: #e4dcf5; }
@media (max-width: 900px) { .sound-check { max-width: none; width: 100%; } }
/* the AI section */
.ai-band { padding: 72px 0; background: linear-gradient(180deg, #f6f1ff 0%, var(--paper, #fbf8f3) 100%); }
.ai-band h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.ai-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ai-features .feature h3 { font-size: 1.12rem; margin: 0 0 .4em; }
.ai-features .feature p { font-size: .95rem; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ai-chips span { font-size: .76rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--wash); color: var(--violet-strong); }
@media (max-width: 1100px) { .ai-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ai-features { grid-template-columns: minmax(0, 1fr); } }