/* Keygrove invite. Colors, pixel corners and blocks come from the approved app screens
   (android/docs/design/approved-screens/pip.css): cream in light mode, Dusk in dark mode. */

@font-face { font-family: 'Jersey 25'; src: url(fonts/jersey25.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(fonts/nunito.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --bg: #FBEFD5; --dot: #F0DDB4; --card: #FFF9EA; --edge: #E0C998;
  --ink: #2A1B44; --muted: #5F4F76; --track: #EBD9B2; --field: #FFFDF6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2B1F58; --dot: #3A2C70; --card: #40307E; --edge: #1E1442;
    --ink: #FFF3D6; --muted: #D3C8EC; --track: #1E1442; --field: #352768;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font-family: 'Nunito', ui-rounded, system-ui, sans-serif; font-weight: 700;
  color: var(--ink); background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 2px, transparent 2.6px);
  background-size: 28px 28px;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

.d { font-family: 'Jersey 25', 'Nunito', system-ui, sans-serif; font-weight: 400; line-height: .95; letter-spacing: .4px; }
.m { color: var(--muted); }
/* The toucan: a 40 × 44 canvas, scaled by whole numbers so every pixel stays crisp. */
.toucan { image-rendering: pixelated; image-rendering: crisp-edges; display: block; cursor: pointer; touch-action: manipulation; --note: #4B3FB8; --zee: #6F6585; }
.ic { display: block; fill: currentColor; shape-rendering: crispEdges; flex: none; }

/* The signature: stepped pixel corners and a chunky pressable edge. */
.px {
  clip-path: polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
}
.block { background: var(--c); color: var(--on, #2A1B44); box-shadow: inset 0 -7px 0 var(--e), inset 0 4px 0 rgba(255,255,255,.28); }
.c-card { --c: var(--card); --e: var(--edge); --on: var(--ink); }
.c-green { --c: #8FD14F; --e: #5C9A24; }
.c-yellow { --c: #FFC93C; --e: #CF930E; }
.c-blue { --c: #67C3F3; --e: #2D8AC1; }
.c-pink { --c: #F7A8C4; --e: #CC6E92; }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 64px; padding: 6px 24px 13px; font-weight: 900; font-size: 21px;
  touch-action: manipulation; transition: transform .08s;
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 -4px 0 var(--e), inset 0 4px 0 rgba(255,255,255,.28); }
.btn:disabled { opacity: .6; }
.btn:focus-visible, .chip:focus-visible { outline: none; filter: brightness(1.08); }
.btn.big { min-height: 72px; font-size: 23px; }
.chip { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 16px 9px; font-weight: 800; font-size: 16px; }

/* Layout: one step at a time. Phone: art on top, words below. iPad landscape: side by side, like onboarding. */
.screen { max-width: 1180px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.step { display: none; flex-direction: column; gap: 20px; }
.step[data-active] { display: flex; animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.stage { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-height: 44px; }
.brand { font-size: 30px; flex: 1; white-space: nowrap; }
.body { display: flex; flex-direction: column; gap: 12px; }
h1 { margin: 0; font-size: 50px; overflow-wrap: anywhere; }
p { margin: 0; font-size: 17px; line-height: 1.4; }
.lead { font-size: 20px; font-weight: 800; line-height: 1.35; }
.tip { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.tip .ic { margin-top: 1px; }
.foot { text-align: center; font-size: 13px; padding: 26px 0 6px; }
.foot a { color: inherit; }

@media (min-width: 820px) and (min-aspect-ratio: 1/1) {
  .screen { padding: 34px; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; }
  .step { flex-direction: row; gap: 28px; min-height: min(760px, calc(100dvh - 120px)); }
  .stage { flex: 1.15; min-height: 0; }
  .copy { flex: 1; justify-content: space-between; }
  .body { flex: 1; justify-content: center; }
  h1 { font-size: 72px; }
  p { font-size: 19px; }
  .lead { font-size: 23px; }
}
@media (min-width: 700px) and (max-aspect-ratio: 1/1) { /* iPad portrait */
  .screen { padding: 34px; }
  .stage { min-height: 420px; }
  h1 { font-size: 66px; }
}

/* Language switch */
.langs { display: flex; gap: 6px; }
.langs button { min-width: 44px; min-height: 40px; padding: 2px 8px 7px; font-size: 14px; font-weight: 900; }
.langs button[aria-current] { --c: #FFC93C; --e: #CF930E; --on: #2A1B44; }

/* Welcome art */
.hello-art { position: relative; display: flex; align-items: center; justify-content: center; padding: 50px 40px 30px; }
.toucan-big { width: 200px; height: 220px; }
.star { position: absolute; width: 48px; height: 44px; animation: twinkle 2.4s ease-in-out infinite; }
.star.s1 { left: 0; top: 4px; }
.star.s2 { right: 0; top: 0; width: 60px; height: 55px; animation-delay: .8s; }
.star.s3 { left: 20px; bottom: 6px; width: 32px; height: 29px; animation-delay: 1.6s; }
.star.s4 { right: 14px; bottom: 40px; width: 28px; height: 26px; animation-delay: 1.2s; }
.star.s5 { left: -24px; top: 44%; width: 24px; height: 22px; animation-delay: .4s; }
.star.s6 { right: -18px; top: 38%; width: 36px; height: 33px; animation-delay: 2s; }
@keyframes twinkle { 50% { transform: scale(.82); opacity: .75; } }
@media (min-width: 820px) { .toucan-big { width: 280px; height: 308px; } }

/* The stage sky and the piano from the app icon */
.sky { background: linear-gradient(#2A2050 0 34%, #352763 34% 58%, #483070 58% 80%, #5E3A72 80% 100%); align-items: stretch; flex-direction: column; justify-content: flex-end; min-height: 380px; }
.piano { position: relative; background: #A8633B; }
.piano .lid { height: 10px; background: #E2AE78; box-shadow: inset 0 -3px 0 #C98A55; }
.piano .felt { height: 6px; background: #B2382F; }
.piano .keys { position: relative; display: flex; gap: 2px; background: #6E3F24; height: 190px; touch-action: none; user-select: none; -webkit-user-select: none; }
.piano .base { height: 18px; background: #6E3F24; box-shadow: inset 0 4px 0 #8A5230; }
@media (min-width: 820px) and (min-aspect-ratio: 1/1) { .piano .keys { height: 240px; } }

.key { position: relative; display: flex; align-items: flex-end; justify-content: center; font-family: 'Nunito', sans-serif; font-weight: 900; -webkit-touch-callout: none; }
.wk { flex: 1; padding-bottom: 20px; font-size: 15px; color: #8C7B66; background: #F6EDD9; box-shadow: inset 0 -12px 0 #D5C7AC; }
.bk { position: absolute; top: 0; z-index: 2; height: 60%; padding-bottom: 12px; font-size: 11px; color: #9C90C0; background: #211832; box-shadow: inset 3px 0 0 #43366B, inset 0 -8px 0 #120C22; }
.wk.down { background: #E9DCC0; box-shadow: inset 0 -6px 0 #D5C7AC; }
.bk.down { box-shadow: inset 3px 0 0 #43366B, inset 0 -3px 0 #120C22; }
/* The glowing key: the app's right-hand orange */
.wk.glow { color: #3A1C05; background: #F28C28; box-shadow: inset 0 -12px 0 #B85C12; animation: glow 1.1s ease-in-out infinite; }
.bk.glow { color: #3A1C05; background: #F28C28; box-shadow: inset 0 -8px 0 #A9520F; animation: glow 1.1s ease-in-out infinite; }
.key.glow.down { animation: none; }
@keyframes glow { 50% { filter: brightness(1.18) saturate(1.1); } }
.keys.nudge .glow { animation: nudge .5s ease-in-out 2, glow 1.1s ease-in-out infinite; }
@keyframes nudge { 25% { transform: translateY(-5px); } 75% { transform: translateY(2px); } }

/* In the puzzle the toucan perches on the piano's lid, like on the app's keyboard. */
.toucan-sky { position: absolute; left: 6px; bottom: 224px; width: 120px; height: 132px; z-index: 3; }
.sky .toucan { --note: #C9B6FF; --zee: #B9AED6; } /* light notes on the night sky */
@media (min-width: 820px) and (min-aspect-ratio: 1/1) { .toucan-sky { bottom: 274px; width: 160px; height: 176px; } }

.hint-bubble {
  position: absolute; left: 124px; right: 16px; bottom: 268px; z-index: 3;
  justify-self: start; width: fit-content; max-width: calc(100% - 140px);
  padding: 8px 14px 11px; background: #FFF3D6; color: #2A1B44; font-weight: 900; font-size: 17px; line-height: 1.25;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
  transition: opacity .3s;
}
.hint-bubble:empty { opacity: 0; }
@media (min-width: 820px) and (min-aspect-ratio: 1/1) { .hint-bubble { left: 168px; bottom: 336px; font-size: 19px; max-width: calc(100% - 184px); } }

/* A note rises from each played key */
.rise { position: absolute; z-index: 1; width: 22px; height: 26px; pointer-events: none; animation: float 1.2s ease-out forwards; }
.rise::before { content: ''; position: absolute; inset: 0; background: var(--nc, #FFC93C);
  clip-path: polygon(9px 0,22px 0,22px 6px,14px 6px,14px 20px,12px 20px,12px 24px,10px 24px,10px 26px,2px 26px,2px 24px,0 24px,0 18px,2px 18px,2px 16px,9px 16px); }
@keyframes float { to { transform: translateY(-150px); opacity: 0; } }

.seg { display: flex; gap: 3px; flex: 1; }
.seg i { display: block; flex: 1; height: 14px; background: var(--track); transition: background .2s; }
.seg i.on { background: #F0835A; }

/* Form */
.field { display: flex; flex-direction: column; gap: 7px; border: 0; margin: 0; padding: 0; font-size: 16px; font-weight: 800; }
.field legend { padding: 0; margin-bottom: 7px; }
.field small { font-size: 14px; font-weight: 700; line-height: 1.35; }
.field input:not([type=radio]) {
  width: 100%; min-height: 56px; padding: 8px 16px 10px; border: 0; outline: none;
  font: inherit; font-size: 18px; font-weight: 700; color: var(--ink);
  background: var(--field); box-shadow: inset 0 0 0 3px var(--edge), inset 0 5px 0 rgba(0,0,0,.04);
}
.field input:focus { box-shadow: inset 0 0 0 3px #67C3F3; }
.field input:disabled { opacity: .45; cursor: not-allowed; }
.field input[aria-invalid=true] { box-shadow: inset 0 0 0 3px #F0835A; }
.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.device { position: relative; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 4px 12px 11px; text-align: center; font-weight: 900; font-size: 17px; cursor: pointer; }
.device input { position: absolute; opacity: 0; pointer-events: none; }
.device:has(input:checked) { --c: #FFC93C; --e: #CF930E; --on: #2A1B44; }
.device:has(input:focus-visible) { filter: brightness(1.08); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.error { color: #F0835A; font-weight: 900; }
.privacy { font-size: 14px; text-align: center; }

/* Done */

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* Little stars in the sky, like the app icon */
.twk { position: absolute; width: 6px; height: 6px; background: #FFE9B8; animation: twinkle 3s ease-in-out infinite; }
.twk.big { width: 9px; height: 9px; }
@media (max-width: 560px) { .bk:not(.glow) { color: transparent; } }