/* Keyboard Bash (newellabs.com/play/keyboard-bash). Self-contained; system fonts only; no inline styles in the markup. */
:root {
  color-scheme: light dark;
  --bg: #f6f1e7; --card: #fffcf7; --well: #efe8da;
  --ink: #1b2130; --ink-2: #3a4254; --muted: #596070; --line: #e1d7c5; --line-strong: #cdbfa6;
  --accent: #875810; --accent-bright: #dfa140; --focus: #2459d6;
  --primary: #2f6fbf; --primary-ink: #ffffff;
  --sky-1: #e6f1fd; --sky-2: #fdf3e4; --blob-1: rgba(255, 214, 165, .55); --blob-2: rgba(190, 222, 255, .65);
  --blob-3: rgba(214, 238, 196, .6); --blob-4: rgba(246, 205, 226, .5);
  --stage-ink: #3a3550; --stage-soft: rgba(58, 53, 80, .84);
  --gate-bg: rgba(255, 255, 255, .9); --gate-ink: rgba(58, 53, 80, .72); --ring: #2f6fbf; --ring-bg: rgba(58, 53, 80, .14);
  --cap-bg: #ffffff; --cap-line: rgba(58, 53, 80, .2);
  --shadow: rgba(40, 30, 60, .14); --face: #2a2438; --veil: rgba(27, 33, 48, .5);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Varela Round", "Nunito", "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151c; --card: #1c212b; --well: #1a1f29;
    --ink: #ece7de; --ink-2: #d0cac0; --muted: #a4aab5; --line: #2a3140; --line-strong: #3b4354;
    --accent: #e9bb6c; --accent-bright: #e2a646; --focus: #93b4ff;
    --primary: #7fb0f0; --primary-ink: #0f1520;
    --sky-1: #1b2440; --sky-2: #2a2246; --blob-1: rgba(255, 190, 120, .08); --blob-2: rgba(120, 170, 255, .1);
    --blob-3: rgba(150, 220, 160, .07); --blob-4: rgba(240, 160, 200, .08);
    --stage-ink: #ece7f7; --stage-soft: rgba(236, 231, 247, .72);
    --gate-bg: rgba(42, 48, 76, .92); --gate-ink: rgba(236, 231, 247, .78); --ring: #9cc4ff; --ring-bg: rgba(236, 231, 247, .16);
    --cap-bg: rgba(255, 255, 255, .1); --cap-line: rgba(236, 231, 247, .22);
    --shadow: rgba(0, 0, 0, .12); --veil: rgba(4, 6, 12, .62); /* a soft shadow: one item's shadow on another must stay under WCAG's 0.1 luminance step */
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration-color: var(--accent-bright); text-decoration-thickness: 1.5px; text-underline-offset: 3px; -webkit-touch-callout: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; touch-action: manipulation; }
kbd { font: 500 .82em/1 var(--mono); display: inline-block; min-width: 1.6em; padding: .22em .38em; text-align: center; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--card); color: var(--ink); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Header and hero (no links up here: nothing a child can tap to leave, and no text to select: a long press on
   selectable text opens the phone's Look Up / Search / Share menu) */
.top, .hero { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.top { border-bottom: 1px solid var(--line); }
.top-in { min-height: 48px; display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-weight: 650; font-size: 15px; }
.brand svg { width: 22px; height: 22px; fill: none; stroke: var(--accent-bright); stroke-width: 6; stroke-linecap: round; }
.brand-sub { color: var(--muted); font-weight: 500; }
.brand-sub::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.hero { padding-top: 14px; padding-bottom: 10px; }
h1 { margin: 0 0 4px; line-height: 1.05; }
.h1-name { font: 800 clamp(1.9rem, 6vw, 2.7rem)/1.05 var(--round); letter-spacing: -.01em; }
.h1-sub { display: block; font: 600 clamp(1rem, 2.6vw, 1.2rem)/1.3 var(--sans); color: var(--muted); margin-top: 4px; }
.lede { margin: 6px 0 0; color: var(--ink-2); max-width: 70ch; }
.lede-short { display: none; }
@media (max-width: 560px) { .lede-long { display: none; } .lede-short { display: inline; } .lede { font-size: 15px; line-height: 1.5; } }

/* The stage: a rounded box on the page, the whole screen while a child plays */
/* --above: the header and hero over the play area (their height changes where the intro text changes) */
.stage-slot { --above: 213px; --stage-h: clamp(320px, calc(100svh - var(--above)), 760px); height: var(--stage-h); }
@media (min-width: 561px) { .stage-slot { --above: 246px; } }
@media (min-width: 900px) { .stage-slot { --stage-h: clamp(360px, calc(100svh - var(--above)), 760px); } }
.stage {
  position: relative; height: 100%; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(170deg, var(--sky-1), var(--sky-2));
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; outline: none; cursor: pointer;
}
.stage:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); }
.stage.is-play:focus-visible { box-shadow: none; }
html.kb-play, html.kb-play body { overflow: hidden; overscroll-behavior: none; }
.stage.is-play {
  position: fixed; inset: 0; z-index: 40; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none;
}
.decor i { position: absolute; border-radius: 50%; pointer-events: none; }
.decor i:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -18vmax; background: var(--blob-2); }
.decor i:nth-child(2) { width: 38vmax; height: 38vmax; right: -12vmax; bottom: -20vmax; background: var(--blob-1); }
.decor i:nth-child(3) { width: 22vmax; height: 22vmax; right: 12%; top: -9vmax; background: var(--blob-3); }
.decor i:nth-child(4) { width: 18vmax; height: 18vmax; left: 10%; bottom: -8vmax; background: var(--blob-4); }
.items { position: absolute; inset: 0; pointer-events: none; }

/* Intro (before play) */
.intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 72px 16px 24px; text-align: center; transition: opacity .25s; }
.stage.is-play .intro { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.intro-art { position: relative; width: min(620px, 92%); height: clamp(110px, 30%, 250px); }
.intro-art { --demo: clamp(96px, min(28vw, 22svh), 180px); }
.intro-art > .item { position: absolute; width: var(--demo); height: var(--demo); margin: calc(var(--demo) / -2) 0 0 calc(var(--demo) / -2); font-size: calc(var(--demo) * .9); }
.intro-art .demo-1 { left: 18%; top: 50%; }
.intro-art .demo-2 { left: 50%; top: 46%; }
.intro-art .demo-3 { left: 82%; top: 52%; }
.intro-call { margin: 0; font: 700 clamp(1.25rem, 4.2vw, 1.9rem)/1.2 var(--round); color: var(--stage-ink); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.caps { display: inline-flex; gap: 8px; }
.cap { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 10px; background: var(--cap-bg); box-shadow: inset 0 0 0 1px var(--cap-line), 0 3px 0 var(--cap-line); font: 800 20px/1 var(--round); color: var(--stage-ink); }
.cap-wide { min-width: 110px; }
.btn-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--primary-ink); font: 700 18px/1 var(--round); cursor: pointer; box-shadow: 0 4px 0 rgba(20, 40, 80, .22);
}
.btn-play svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.btn-play:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(20, 40, 80, .22); }
.noscript { margin: 0; color: var(--stage-ink); font-weight: 600; }

/* Parent gate: a small lock in the corner; hold 3 s */
.gate-wrap { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 8px; }
.gate-tip { margin: 0; font: 600 13px/1.2 var(--sans); color: var(--stage-soft); background: var(--gate-bg); padding: 6px 10px; border-radius: 999px; transition: opacity .4s; }
.stage.is-play .gate-tip { opacity: 0; }
.stage.is-play.show-tip .gate-tip, .stage.gating .gate-tip { opacity: 1; }
.gate { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; background: var(--gate-bg); color: var(--gate-ink); cursor: pointer; display: grid; place-items: center; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.gate-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-ring { position: absolute; inset: -2px; width: 60px; height: 60px; transform: rotate(-90deg); pointer-events: none; }
.ring-bg { fill: none; stroke: var(--ring-bg); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--ring); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.stage.gating .ring-fg { opacity: 1; }

/* Items that appear */
.item { position: absolute; display: grid; place-items: center; pointer-events: none; contain: layout style; }
.item-in { width: 100%; height: 100%; display: grid; place-items: center; will-change: transform, opacity; }
.item.letter .item-in, .item.digit .item-in { font: 800 1em/1 var(--round); text-shadow: 0 .045em 0 var(--shadow); }
.art { width: 100%; height: 100%; overflow: visible; }
.art .bd, .art .bd * { fill: currentColor; }
.art .bd .rj { stroke: currentColor; stroke-width: 10; stroke-linejoin: round; }
.art .sh, .art .sh * { fill: var(--shadow); }
.art .sh .rj { stroke: var(--shadow); stroke-width: 10; stroke-linejoin: round; }
.art .fc { fill: #fff3c4; }
.face .eyes ellipse, .animal .eyes ellipse { fill: var(--face); }
.art .gl { fill: #fff; }
.art .ck { fill: rgba(255, 128, 156, .42); }
.art .sm { fill: none; stroke: var(--face); stroke-linecap: round; }
.item .eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.item.blink .eyes { animation: blink .24s ease-in-out .9s 1 both; }
@keyframes blink { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.12); } }

.animal .b { fill: var(--ab); }
.animal .l { fill: var(--al); }
.animal .d { fill: var(--ad); }
.animal .ol { stroke: rgba(42, 36, 56, .24); stroke-width: 2.5; }
.animal .rj { stroke-linejoin: round; }
.animal .pk { fill: #f4a3b8; }
.animal .pk.rj { stroke: #f4a3b8; stroke-width: 4; }
.animal .dk { fill: var(--face); }
.animal .nose { fill: #e5788f; }
.animal .nose.dk { fill: var(--face); }
.animal .ln { fill: none; stroke: var(--face); stroke-width: 3.2; stroke-linecap: round; }
.animal .wh { stroke-width: 2; opacity: .5; }
.animal .wt { fill: #fff; }
.animal .ol2 { stroke: rgba(42, 36, 56, .3); stroke-width: 1.5; }
.animal .beak { fill: #f08a24; stroke: #f08a24; stroke-width: 4; stroke-linejoin: round; }
.animal .gs { fill: var(--shadow); }
.animal[data-art="cat"] { --ab: #f0a04b; --al: #f6c48d; --ad: #bb7c3a; }
.animal[data-art="dog"] { --ab: #c98d55; --al: #f1dcc2; --ad: #9c6d42; }
.animal[data-art="bear"] { --ab: #a8744a; --al: #ecd3b2; --ad: #835a39; }
.animal[data-art="frog"] { --ab: #5fae4a; --al: #cfe9a8; --ad: #4a8739; }
.animal[data-art="chick"] { --ab: #f3c63a; --al: #f8dc7a; --ad: #bd9a2d; }
.animal[data-art="bunny"] { --ab: #ece4f2; --al: #f6f1fa; --ad: #b8b1bc; }

/* Gentle idle bob for the intro samples */
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--tilt, 0deg)); } }
.intro-art .item-in { animation: bob 3.6s ease-in-out infinite; }
.intro-art .demo-2 .item-in { animation-delay: -1.2s; }
.intro-art .demo-3 .item-in { animation-delay: -2.4s; }
@media (prefers-reduced-motion: reduce) {
  .intro-art .item-in, .item.blink .eyes { animation: none; }
  .intro, .gate-tip { transition: none; }
}

/* For parents */
.parents { padding-top: 34px; padding-bottom: 28px; }
.parents h2 { font: 800 clamp(1.5rem, 4vw, 1.9rem)/1.15 var(--round); margin: 0 0 14px; }
.cards { columns: 3 320px; column-gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; break-inside: avoid; margin: 0 0 14px; display: inline-block; width: 100%; }
.card h3 { font: 750 1.12rem/1.25 var(--round); margin: 0 0 8px; }
.card h4 { font: 700 1rem/1.3 var(--sans); margin: 12px 0 4px; }
.card p, .card li { color: var(--ink-2); }
.card p { margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
.card ul, .card ol { margin: 0 0 10px; padding-left: 1.25em; }
.card li { margin: 4px 0; }
.card a { color: var(--ink); font-weight: 600; }
.faq-h { margin-top: 30px !important; }
details { border-top: 1px solid var(--line); padding: 4px 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
details p { margin: 0 0 12px; color: var(--ink-2); max-width: 75ch; }

.foot { border-top: 1px solid var(--line); margin-top: 8px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; padding-top: 14px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 14px; color: var(--muted); }
.foot p { margin: 0; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* Grown-ups menu and the leave dialog */
.panel { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--veil); overscroll-behavior: contain; }
.panel.settling { pointer-events: none; }
.panel-card { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--card); color: var(--ink); border-radius: 22px; padding: 18px 18px 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.panel-card h2 { font: 800 1.35rem/1.2 var(--round); margin: 0 0 10px; }
.panel-card > p { margin: 0 0 14px; color: var(--ink-2); }
.prow { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.prow-two { grid-template-columns: 1fr 1fr; align-items: start; }
.prow-in { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; } /* label beside its control */
.prow-in .seg { justify-self: end; }
.plabel { margin: 0; font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.plabel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.vol-line { display: flex; align-items: center; gap: 12px; }
.vol-line output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.range { flex: 1; min-width: 0; height: 44px; accent-color: var(--primary); }
.seg { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; width: min(220px, 100%); }
.seg button { min-height: 44px; border: 0; background: transparent; font: 700 17px/1 var(--round); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: 650 15px/1.2 var(--sans); cursor: pointer; text-decoration: none; text-align: center; }
.pbtn:hover { color: var(--ink); background: var(--well); }
.pbtn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pbtn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.pbtn.primary svg { fill: currentColor; stroke: none; }
.pnote { margin: 0; font-size: 14px; color: var(--muted); }
.pactions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
/* On a screen too short for the whole menu, its two main buttons stay in view while the rest scrolls behind them */
#panel .pactions { position: sticky; bottom: -14px; z-index: 1; background: var(--card); padding-bottom: 14px; }
.leave .pactions { border-top: 0; padding-top: 4px; }
.panel-card .pfine { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); } /* beats .panel-card > p */
@media (max-height: 600px) and (orientation: portrait) {
  .caps { display: none; } /* a short phone screen: leave the room to the sample shapes and the play button */
  .panel-card { padding-top: 14px; }
  .panel-card h2 { margin-bottom: 6px; }
  .prow { padding: 8px 0; }
}
.hold { position: relative; overflow: hidden; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, .3); pointer-events: none; }
.hold-label { position: relative; }

.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Short landscape phones: keep the play area big */
@media (max-height: 500px) and (orientation: landscape) {
  .top-in { min-height: 40px; }
  .hero { padding-top: 6px; padding-bottom: 6px; }
  .h1-name { font-size: 1.5rem; }
  .h1-sub { display: inline; font-size: .95rem; margin-left: 8px; }
  .lede { display: none; }
  .stage-slot { --stage-h: max(280px, calc(100svh - 96px)); }
  .intro { padding-top: 64px; gap: 8px; }
  .intro-art { height: 32%; }
  .caps { display: none; }
  .intro-art { --demo: clamp(72px, 22svh, 110px); height: 34%; }
  .btn-play { min-height: 64px; }
  .panel-card { width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 14px 18px 12px; }
  .panel-card h2, .pactions, .pfine, .panel-card > p { grid-column: 1 / -1; }
  .panel-card h2 { margin-bottom: 4px; }
  .prow { padding: 6px 0; gap: 4px; }
  #panel .pactions { padding-bottom: 8px; }
}
/* Very short landscape (a small phone on its side inside the browser's bars): shrink the intro so it all fits */
@media (max-height: 345px) and (orientation: landscape) {
  .stage-slot { --stage-h: max(236px, calc(100svh - 96px)); }
  .intro { padding: 60px 16px 12px; gap: 6px; }
  .intro-art { --demo: clamp(56px, 20svh, 80px); height: 30%; }
  .btn-play { min-height: 46px; }
}
@media (forced-colors: active) {
  .gate, .btn-play, .pbtn { border: 2px solid ButtonText; }
}