:root{
  --paper:#E8E6E8; --ink:#1D1D1B; --grey:#5E5C5A; --lift:rgba(29,29,27,.42); --white:#FFFFFF; --hair:#D4D2D4;
  --home:#16A0C1; --move:#46D393; --sing:#FFE133; --learn:#FF9100; --pink:#F99595; --red:#FF313C;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --P:16px; --G:7px; --H:8px; --edge:32px; --k:1; --kd:1; --acc:var(--move);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.35;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
.app{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden}
/* the landing player (change 189): no top bar; the boards span the frame; closed, the pads board alone with all its corners */
.embed .t-bar{display:none}
.embed .main{padding:0}
/* the landing: the pads never move when one is pressed; the transport and the navigation simply appear under them (Nili) */
.embed .stack{justify-content:flex-start}
.embed .col{justify-content:flex-start}
.embed .hero{display:none}
.embed.closed .board.bottom,.embed.closed .nav{display:none}
.embed.closed .board.top{border-radius:calc(12px * var(--k))}
.embed .grid16{grid-template-columns:repeat(2,1fr);column-gap:var(--G);row-gap:calc(4px * var(--k))}
/* under each song pad of the landing, on the white, at the right of the song's name (Nili): the skills it works on as one small square of four colours (change 192, Nili),
   the colours LEARN opens on; no frame around it */
.embed .gname{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(6px * var(--k))}
.embed .gname .gsq{flex:none;margin-top:calc(2px * var(--k));display:grid;grid-template-columns:repeat(2,calc(11px * var(--k)));gap:calc(2px * var(--k));pointer-events:none}   /* no frame (Nili) */
.embed .gname .gsq i{display:block;width:calc(11px * var(--k));height:calc(11px * var(--k));border-radius:1px}
.embed .gname{font-size:calc(15px * var(--k));font-weight:800;line-height:1.25;margin-bottom:calc(4px * var(--k))}
.embed .grid16{grid-auto-flow:column;grid-template-rows:auto auto}
/* the bar (Nili: bigger, the name in the centre): the pad 56 at the left, the name centred between it and the X, the X 44 at the right */
.ebar{display:grid;grid-template-columns:calc(56px * var(--k)) 1fr calc(56px * var(--k));align-items:center;column-gap:calc(8px * var(--k));flex:none}
.ebar .epad{width:calc(56px * var(--k));height:calc(56px * var(--k));grid-column:1}
.ebar .label{grid-column:2;text-align:center;font-size:calc(15px * var(--k));min-width:0;overflow-wrap:break-word}
.ebar .ex{width:calc(44px * var(--k));height:calc(44px * var(--k));grid-column:3;justify-self:end}
.emove{text-align:center;margin-top:calc(12px * var(--k));flex:none}
.emove .cue{font-size:calc(28px * var(--k))}
.emove .sub{margin-top:calc(4px * var(--k))}
.embed .stage .fig img{max-height:100%}
.esub{text-align:center;margin-top:calc(12px * var(--k));flex:none;font-size:calc(17px * var(--k))}
.esing .prompt{text-align:center}
.esing .pl{font-size:calc(34px * var(--k))}   /* the lyrics take the room the window gives them */
.skx.eskx{flex:none;flex-direction:row;align-items:center;gap:calc(12px * var(--k));margin-top:calc(12px * var(--k));padding:calc(8px * var(--k)) calc(12px * var(--k)) calc(8px * var(--k)) calc(8px * var(--k))}
.skx.eskx .skt{flex:1;align-items:center}
.mos.m4{grid-template-columns:repeat(2,1fr);gap:calc(3px * var(--k));width:calc(36px * var(--k));flex:none}
.ecards{margin-top:calc(8px * var(--k))}
.ecards .sk{padding:calc(10px * var(--k)) calc(12px * var(--k))}
.ecards .ech{display:flex;align-items:center;gap:calc(8px * var(--k))}
.ecards .ech .cat{display:block;font-size:calc(13px * var(--k));font-weight:400;letter-spacing:.1em;color:var(--grey)}
.ecards .sk b{display:block;font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0;margin-top:calc(4px * var(--k))}
.ecards .sk p{display:block;font-size:calc(15px * var(--k));padding:0;margin-top:calc(4px * var(--k));max-width:none}
/* THE TOP BAR, on the grid: the logo starts on the first column line, the menu's drawing ends on the last (placed by align()) */
.t-bar{height:calc(44px * var(--k));border-bottom:1px solid var(--hair);padding:0 calc(var(--edge) - calc(11px * var(--k))) 0 var(--edge);display:flex;align-items:center;justify-content:space-between;flex:none}
.t-bar .logo{height:calc(20px * var(--k));display:block}
.icon{width:calc(44px * var(--k));height:calc(44px * var(--k));display:inline-grid;place-items:center;background:none;border:0;cursor:pointer}
/* THE SCREEN: one column of the three boards (phone, iPad upright, Home everywhere); on iPad sideways and computers the song
   screens split: the column on the left (the song's pad, the transport, the navigation), the window on the right */
.main{flex:1;min-height:0;display:flex;justify-content:center;gap:calc(8px * var(--k));padding:calc(8px * var(--k)) 16px calc(calc(16px * var(--k)) + env(safe-area-inset-bottom,0px))}
.col{flex:none;width:var(--W,calc(343px * var(--k)));display:flex;flex-direction:column;min-height:0}
.stack{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.main .wwin{display:none;min-width:0;border-radius:calc(12px * var(--k));padding:var(--P)}
.wwin .beats{margin-bottom:0}
.wwin .skills{margin-bottom:0}
/* LEARN (change 182, Nili, Oct 2 night): under the song's name, the skill categories this song builds, where "5 skills" was: on the
   iPad and computers their names, on phones their squares; pressed, they open the categories card. Every skill open on big screens. */
/* SKILLS OF EARLY CHILDHOOD (change 183, Nili: "it should have a title"; "more artistic and iconic"): a paper key (the app's pressable
   surface) under the song's name: its title and chevron, the line that says what it is, and the six skill colours as a strip of squares in
   one fixed order (Motor, Musical, Imagination, Language, Social-Emotional, Cognitive), the ones this song builds in their colour, the
   others white, so a parent learns the colours song after song. On the iPad and computers the names of the song's own follow. */
.hlab{margin-bottom:calc(8px * var(--k))}
.hlab{display:flex;align-items:center;justify-content:space-between;gap:calc(12px * var(--k))}
.hlab .hname{min-width:0}
.hlab .hkeys{display:flex;align-items:center;gap:calc(8px * var(--k));flex:none;margin:calc(-6px * var(--k)) 0}
.key.wx{width:calc(36px * var(--k));height:calc(36px * var(--k));flex:none}
.key.wx svg{width:calc(14px * var(--k));height:calc(14px * var(--k))}
/* the SKILL MAP key: the six colours as a small 3 by 2 icon, then its name; paper, 44 tall */
.mapk{display:flex;align-items:center;gap:calc(8px * var(--k));height:calc(44px * var(--k));padding:0 calc(12px * var(--k)) 0 calc(10px * var(--k));border:0;border-radius:calc(6px * var(--k));background:var(--paper);font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;cursor:pointer;flex:none;font-family:var(--font);color:var(--ink)}
.mos.mapi{grid-template-columns:repeat(3,1fr);gap:calc(2px * var(--k));width:calc(30px * var(--k))}
.mos.mapi i{border-radius:1px}
/* the strip's squares are keys (wide screens) */
.skx{cursor:default}
.mos.msong{display:grid;gap:calc(6px * var(--k));justify-content:start;width:100%}
.mos.msong .msq{position:relative;aspect-ratio:1;border-radius:calc(4px * var(--k))}
/* hovering a square: its category's name, on a white label above it */
.mos.msong .msq:hover::after,.mos.msong .msq:focus-visible::after{content:attr(data-name);position:absolute;left:0;bottom:calc(100% + 6px * var(--k));white-space:nowrap;background:var(--ink);color:#fff;font-size:calc(13px * var(--k));font-weight:800;padding:calc(4px * var(--k)) calc(8px * var(--k));border-radius:calc(4px * var(--k));z-index:5;pointer-events:none}
.lhead .skx{overflow:visible}
.skx.strip{cursor:default}
.skx .sktb{border:0;background:none;padding:0;cursor:pointer;width:100%;text-align:left;color:var(--ink);font-family:var(--font)}
.mos .msq{display:block;aspect-ratio:1;border:0;padding:0;background:var(--white);border-radius:calc(2px * var(--k));cursor:pointer}
.mos .msq:active{transform:translateY(1px)}
.skills .sk.glow{animation:glow 1.4s ease}
@keyframes glow{0%{box-shadow:inset 0 0 0 3px var(--ink)}100%{box-shadow:inset 0 0 0 3px transparent}}
.gd.goff{opacity:.55}
/* iPad upright, iPad sideways and computers: the song's name a title, growing with the window (Nili, change 186) */
[data-mode=tall] .hlab,[data-mode=wide] .hlab{font-size:calc(15px * var(--kd));letter-spacing:.1em;margin-bottom:calc(8px * var(--kd))}
.lhead{align-items:stretch}
.lhead .words{display:flex}
.skx{width:100%;border:0;border-radius:calc(6px * var(--k));background:var(--paper);padding:calc(12px * var(--k));display:flex;flex-direction:column;gap:calc(8px * var(--k));text-align:left;cursor:pointer;color:var(--ink)}
.lhead .skx{flex:1;overflow:hidden}
.popc{max-width:none}
.skx.down{background:#DAD8DA;box-shadow:inset 0 2px 3px rgba(29,29,27,.18)}
.skx .skt{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(8px * var(--k));font-size:calc(15px * var(--k));font-weight:800;line-height:1.2}
.skx .skt svg{flex:none;width:calc(16px * var(--k));height:calc(16px * var(--k));margin-top:calc(2px * var(--k))}
.mos{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(4px * var(--k))}
.mos.m6{grid-template-columns:repeat(6,1fr)}
.mos i{display:block;aspect-ratio:1;background:var(--white);border-radius:calc(2px * var(--k))}
.skx .skn{display:flex;flex-wrap:wrap;gap:calc(4px * var(--k)) calc(12px * var(--k));font-size:calc(13px * var(--k));font-weight:800;margin-top:auto}
.skx .skn span{display:flex;align-items:center;gap:calc(6px * var(--k))}
.skx .skn .sq{width:calc(10px * var(--k));height:calc(10px * var(--k));flex:none}
.padw .skx{margin-top:var(--P)}
.skx.strip{background:var(--paper)}
[data-mode=wide] .head .words{grid-column:1 / span 3}
/* the skills of the song, each its own paper tile (change 184: "visual separation between each other") */
.skills .sk{border-top:0;background:var(--paper);border-radius:calc(6px * var(--k));padding:0 calc(12px * var(--k));margin-top:calc(8px * var(--k))}
.skills .sk:first-child{margin-top:0}
.skills.allopen .sk button{cursor:default}
.skills .src{border-top:0;margin-top:calc(4px * var(--k))}
/* the categories card and the menu's Skill categories: a square, the name, the song's skills in it, the category's skills (April 3) */
.gd{margin-top:calc(8px * var(--k));background:var(--white);border-radius:calc(6px * var(--k));padding:calc(12px * var(--k))}
.popb .mos,.mbody .mos{margin-bottom:calc(4px * var(--k))}
.gh{display:flex;align-items:center;gap:calc(8px * var(--k));font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0}
.gh .sq{width:calc(12px * var(--k));height:calc(12px * var(--k));flex:none}
.gd .gs{font-size:calc(15px * var(--k));font-weight:800;margin-top:calc(6px * var(--k))}
.gd p{font-size:calc(15px * var(--k));color:var(--grey);margin-top:calc(4px * var(--k));line-height:1.35}
.pop{position:absolute;inset:0;z-index:45;background:rgba(18,18,16,.5);animation:tin .18s ease-out}
.popc{position:absolute;background:var(--paper);border-radius:calc(12px * var(--k));display:flex;flex-direction:column;overflow:hidden}
.poph{display:flex;align-items:center;justify-content:space-between;gap:calc(12px * var(--k));padding:calc(8px * var(--k)) calc(8px * var(--k)) calc(8px * var(--k)) var(--P);border-bottom:1px solid var(--white);flex:none}
.poph .key{width:calc(44px * var(--k));flex:none}
.popb{overflow:auto;padding:var(--P);-webkit-overflow-scrolling:touch}
.board.top.padw{flex:none;padding-bottom:var(--P)}
.padw .pad{grid-column:1 / -1}
/* THREE BOARDS, ONE WIDTH. The window and the transport joined (2 px of paper at the seam); the navigation its own board */
.board{background:var(--white);padding:var(--P);display:flex;flex-direction:column;min-height:0}
.board.top{border-radius:calc(12px * var(--k)) calc(12px * var(--k)) 0 0;padding-bottom:var(--H);flex:1}
.board.top.homew{padding-bottom:var(--P);flex:none}
.board.bottom{border-radius:0 0 calc(12px * var(--k)) calc(12px * var(--k));padding-top:var(--H);margin-top:calc(2px * var(--k));flex:none;padding-bottom:calc(12px * var(--k))}
.g4{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--G)}
.head{align-items:start;flex:none}
.words{grid-column:1 / span 2;display:flex;flex-direction:column;gap:calc(6px * var(--k));min-width:0}
.label{font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.cue{font-size:var(--cfs,calc(28px * var(--kd)));font-weight:800;line-height:1.1;overflow-wrap:break-word}
.cue .ph{display:block;font-size:calc(15px * var(--k));font-weight:400;color:var(--grey);margin-top:calc(4px * var(--k))}
.sub{font-size:calc(15px * var(--k));color:var(--grey);line-height:1.33}
.stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:var(--H) 0}
.stage .fig{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.stage .fig img,.stage .fig svg{max-height:100%;max-width:100%;height:100%;width:auto;display:block;object-fit:contain}
.beats{display:grid;column-gap:var(--G);height:calc(6px * var(--k));flex:none;margin-bottom:var(--H)}
.beats i{background:var(--paper);display:block}
.beats i.on{background:var(--acc)}
/* the pads: the paper artwork, two states, corners 4 */
.pad,.gp{position:relative;aspect-ratio:1/1;border:0;padding:0;background:var(--white);display:block;cursor:pointer;border-radius:calc(4px * var(--k));overflow:hidden}
.pad{grid-column:3 / span 2}
/* iPad upright: the column is wide; the song's pad takes one column, the words three (their type grows with the window) */

.pad img,.gp img{width:100%;height:100%;display:block}
.lock{position:absolute;right:calc(4px * var(--k));bottom:calc(4px * var(--k));width:calc(20px * var(--k));height:calc(20px * var(--k));background:rgba(255,255,255,.88);display:grid;place-items:center;pointer-events:none}
.new{position:absolute;left:calc(4px * var(--k));top:calc(4px * var(--k));height:calc(20px * var(--k));padding:0 calc(4px * var(--k));background:var(--pink);font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0;line-height:calc(20px * var(--k));color:var(--ink);pointer-events:none}
.grid16{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--G);flex:none}
/* HOME */
/* HOME (change 181, Nili, Oct 2 evening): the words leave the grid's board and stand on the paper above it, on the same four columns:
   the bunny with headphones centred in column 1, NILLA 0-3 and Nursery Rhymes across columns 2 to 4, sized by fitHero() to fill the
   room there is (the width of three columns at most), centred; the handwritten note under them before the first press */
.hero{display:none;flex:1;min-height:0;flex-direction:column;justify-content:center;align-items:stretch;padding:0 var(--P)}
.homemode .hero{display:flex}
/* iPad sideways and computers (change 182, Nili: "the song pad grid should be very big in the center"; "you can separate the grid from
   the transport and the navigation"): the big board on the left, a square as tall as the screen allows (Home's grid, or the song's
   window); the column on the right, the same height: at its top Home's words (the lockup) or the song's pad, at its foot the transport
   and the navigation, which never move. The big board has its own padding and gap (4.7% and 2.0% of its side). */
[data-mode=wide] .main{align-items:center;gap:calc(16px * var(--k))}
[data-mode=wide] .main .wwin{display:flex;order:-1;flex:none;width:var(--S);height:var(--S);border-radius:calc(12px * var(--k))}
[data-mode=wide] .col{height:var(--S)}
[data-mode=wide] .stack{justify-content:flex-start}
[data-mode=wide] #win:empty{display:none}
[data-mode=wide] .hero{justify-content:flex-start;padding-top:var(--PS)}
[data-mode=wide] .board.top.padw{border-radius:calc(12px * var(--k))}
[data-mode=wide] .board.bottom{margin-top:auto;border-radius:calc(12px * var(--k));padding-top:calc(12px * var(--k))}
[data-mode=wide] .note{flex-direction:row-reverse}

.wwin.homew{padding:var(--P)}
.wwin.homew .grid16{flex:1}

.lockup{display:flex;justify-content:center;align-items:center;gap:var(--G)}   /* one unit (change 184): the bunny as tall as the two lines, then the words */
.hbun{flex:none;display:flex}
.hbun img{display:block;height:var(--bh,60px);width:auto}
.hl{flex:none;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.t1{font-size:calc(34px * var(--k));font-weight:800;line-height:1;white-space:nowrap}
.hsub{font-size:calc(22px * var(--k));font-weight:400;line-height:1.1;margin-top:calc(4px * var(--k));white-space:nowrap}
.note{font-family:"Caveat",cursive;font-weight:600;font-size:calc(22px * var(--k));line-height:1;margin-top:calc(12px * var(--k));display:flex;align-items:flex-end;justify-content:center;gap:calc(6px * var(--k));flex:none}
/* SING */
.key.kact{height:calc(44px * var(--k));margin:calc(2px * var(--k)) 0 0;flex-direction:row;gap:calc(8px * var(--k));font-size:calc(15px * var(--k));letter-spacing:.1em}
/* KARAOKE (change 185, Nili): the key says ON or OFF; the sentence a size up. On the iPad sideways and computers, an analog switch: the
   word and its lamp in column 1, the track in columns 2 and 3, a ridged knob that slides and carries the word OFF or ON; the track lights
   yellow when it is on. Under it, what karaoke is also called. */
.kst{font-size:calc(17px * var(--k));line-height:1.3}
.key.kact .onoff{margin-left:calc(4px * var(--k));padding-left:calc(8px * var(--k));border-left:1px solid rgba(29,29,27,.25);font-size:calc(13px * var(--k));color:var(--grey);letter-spacing:.1em}
.key.kact.on .onoff{color:var(--ink)}
.tog{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--G);align-items:center;width:100%;border:0;background:none;padding:0;margin-top:calc(4px * var(--k));cursor:pointer;color:var(--ink)}
.tog .tlab{display:flex;align-items:center;gap:calc(8px * var(--k));font-size:calc(15px * var(--k));font-weight:800;letter-spacing:0}
.tog .led{width:calc(10px * var(--k));height:calc(10px * var(--k));border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1px rgba(29,29,27,.25);flex:none}
.tog.on .led{background:var(--sing);box-shadow:inset 0 0 0 1px rgba(29,29,27,.25),0 0 calc(6px * var(--k)) var(--sing)}
.tog .track{grid-column:2 / span 2;position:relative;height:calc(44px * var(--k));border-radius:calc(6px * var(--k));background:var(--paper);display:grid;grid-template-columns:1fr 1fr;align-items:center;transition:background .2s}
.tog.on .track{background:var(--sing)}
.tog .knob{position:absolute;top:calc(4px * var(--k));bottom:calc(4px * var(--k));left:calc(4px * var(--k));width:calc(50% - 6px * var(--k));border-radius:calc(4px * var(--k));background:var(--white);box-shadow:inset 0 0 0 1px rgba(29,29,27,.14);display:flex;align-items:center;justify-content:center;gap:calc(4px * var(--k));transition:left .2s ease}
.tog.on .knob{left:calc(50% + 2px * var(--k))}
.tog .knob i{display:block;width:1px;height:42%;background:rgba(29,29,27,.3)}
.tog .knob b{font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0;margin:0 calc(4px * var(--k))}
.kalso{margin-top:calc(4px * var(--k))}
/* phones and the iPad upright: no room beside KARAOKE, the track goes under it, the words' full width (change 188, Nili: "this button on the others too") */
[data-mode=phone] .tog,[data-mode=tall] .tog{grid-template-columns:1fr;row-gap:calc(6px * var(--k))}
[data-mode=phone] .tog .track,[data-mode=tall] .tog .track{grid-column:1}
.prompt{display:flex;flex-direction:column;gap:calc(12px * var(--k))}
.pl{font-size:calc(28px * var(--kd));font-weight:800;line-height:1.15;min-height:calc(32px * var(--kd))}
.pl span{color:var(--lift)}
.pl span.sung{color:var(--ink);background:var(--sing);box-shadow:0 0 0 calc(2px * var(--k)) var(--sing)}
.pl small{display:block;font-size:calc(15px * var(--k));font-weight:400;font-style:italic;color:var(--grey);margin-top:calc(6px * var(--k))}
.pl.none{font-size:calc(17px * var(--k));color:var(--grey);font-weight:400}
/* LEARN */
.skills{flex:1;min-height:0;overflow:auto;margin:calc(12px * var(--k)) 0 var(--H);-webkit-overflow-scrolling:touch}
.sk{border-top:1px solid var(--paper)}
.sk button{width:100%;min-height:calc(44px * var(--k));border:0;background:none;display:flex;align-items:center;gap:calc(12px * var(--k));text-align:left;font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0;cursor:pointer;padding:0}
.sk .sq{width:calc(12px * var(--k));height:calc(12px * var(--k));flex:none}
.sk .ttl{display:flex;flex-direction:column;gap:calc(2px * var(--k))}
.sk .cat{display:none;font-size:calc(13px * var(--k));font-weight:400;letter-spacing:.1em;color:var(--grey)}
.sk.open .cat{display:block}
.sk.open button{padding:calc(10px * var(--k)) 0;align-items:flex-start}
.sk.open .sq{margin-top:calc(3px * var(--k))}
.sk p{display:none;font-size:calc(15px * var(--k));padding:0 0 calc(12px * var(--k)) 0}
.sk.open p{display:block}
.src{font-size:calc(13px * var(--k));color:var(--grey);padding:calc(12px * var(--k)) 0 0;border-top:1px solid var(--paper)}
.src p+p{margin-top:calc(6px * var(--k))}
/* THE TRANSPORT (its own thing; the base of the studio) */
.np{display:flex;justify-content:space-between;align-items:baseline;gap:calc(8px * var(--k));min-height:calc(20px * var(--k))}
.np .song{font-size:calc(15px * var(--k));font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.np .song .ins{font-weight:400;background:var(--sing);padding:1px calc(4px * var(--k))}
.np .tm{font-size:calc(13px * var(--k));color:var(--grey);font-variant-numeric:tabular-nums;white-space:nowrap}
.scrub{position:relative;height:calc(16px * var(--k));display:flex;align-items:center;margin-top:calc(4px * var(--k));cursor:pointer;touch-action:none}
.scrub .track{position:absolute;left:0;right:0;height:calc(2px * var(--k));background:var(--paper)}
.scrub .played{position:absolute;left:0;height:calc(2px * var(--k));background:var(--ink)}
.scrub .dot{position:absolute;width:calc(12px * var(--k));height:calc(12px * var(--k));transform:translateX(-50%);border-radius:50%;background:var(--white);box-shadow:0 0 0 calc(2px * var(--k)) var(--ink)}
.idle .np,.idle .scrub{display:none}
.idle .keys{margin-top:0}
.keys{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--G);margin-top:calc(8px * var(--k))}
.key{height:calc(44px * var(--k));border:0;border-radius:calc(6px * var(--k));background:var(--paper);display:flex;align-items:center;justify-content:center;gap:calc(4px * var(--k));font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;cursor:pointer}
.key.play{grid-column:span 2}
/* the drawings scale with the rest (change 181) */
.key svg,.tab svg,.icon svg{width:calc(22px * var(--k));height:calc(22px * var(--k))}
.key.kact svg,.key[data-act=kara] svg{width:calc(18px * var(--k));height:calc(18px * var(--k))}
.mcnav .key svg,.tx svg,[data-act=lockx] svg{width:calc(16px * var(--k));height:calc(16px * var(--k))}
.lock svg{width:calc(12px * var(--k));height:calc(12px * var(--k))}
.note svg{width:calc(24px * var(--k));height:calc(24px * var(--k))}
.key.down{background:#DAD8DA;box-shadow:inset 0 calc(2px * var(--k)) calc(3px * var(--k)) rgba(29,29,27,.18)}
.key.on{background:var(--sing)}
/* THE NAVIGATION (its own thing): white at rest; the open tab is its colour, lit like a gel */
.nav{flex:none;display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--G);margin:calc(8px * var(--k)) 0 0;padding:var(--H) var(--P);background:var(--white);border-radius:calc(12px * var(--k))}
.tab{height:calc(44px * var(--k));border:0;border-radius:calc(6px * var(--k));display:grid;place-items:center;font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;cursor:pointer;background:var(--white);box-shadow:inset 0 0 0 1px var(--hair)}
.tab.open{background:radial-gradient(ellipse 70% 85% at 50% 40%,rgba(255,255,255,.80) 0%,rgba(255,255,255,.30) 45%,rgba(255,255,255,0) 75%),linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 40%),var(--c);box-shadow:0 calc(1px * var(--k)) calc(4px * var(--k)) rgba(29,29,27,.14)}
.tab.down{background:var(--c);box-shadow:inset 0 calc(2px * var(--k)) calc(3px * var(--k)) rgba(29,29,27,.25)}
.tab[data-s=home]{--c:var(--home)} .tab[data-s=move]{--c:var(--move)} .tab[data-s=sing]{--c:var(--sing)} .tab[data-s=learn]{--c:var(--learn)}
/* THE FIRST-PRESS GUIDE (landing, change 195, Nili): a quick walk through the three tabs. A white card exactly over the transport
   (the board it covers), its words big and centred; under it the navigation, the step's tab lit in its colour, the others faded.
   One step after another, no sliding: the words change in place (a short fade), the light moves from tab to tab */
.gscrim{position:fixed;inset:0;z-index:39;background:rgba(29,29,27,.55)}
.nav.gstep{position:relative;z-index:41}
.gtour{position:fixed;z-index:40;background:var(--white);border-radius:calc(12px * var(--k));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--P);cursor:pointer}
.gtour .gn{display:inline-grid;place-items:center;min-width:calc((100% - 3 * var(--G)) / 4);height:calc(36px * var(--k));padding:0 calc(16px * var(--k));border-radius:calc(6px * var(--k));font-size:calc(15px * var(--k));font-weight:800;letter-spacing:0;color:var(--ink);background:radial-gradient(ellipse 70% 85% at 50% 40%,rgba(255,255,255,.80) 0%,rgba(255,255,255,.30) 45%,rgba(255,255,255,0) 75%),linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 40%),var(--gc,var(--paper));box-shadow:0 calc(1px * var(--k)) calc(4px * var(--k)) rgba(29,29,27,.14)}   /* the tab's name as its lit tab, the gel (Nili: no outline, not big) */
.gtour .gt{font-size:calc(22px * var(--k));font-weight:800;line-height:1.2;margin-top:calc(20px * var(--k));transition:opacity .15s}   /* room between the picture and the words (Nili) */
.gtour .gt.fade,.gtour .gpv.fade{opacity:0}
/* WHAT TO EXPECT (change 199, Nili): a small picture of each tab between its name and its words, from the playing song */
.gtour .gpv{margin-top:calc(20px * var(--k));display:flex;justify-content:center;align-items:center;height:calc(88px * var(--k));transition:opacity .15s;max-width:100%}   /* one height for the three pictures: the card does not jump */
.gtour .gpv img{display:block;height:calc(88px * var(--k));width:auto;max-width:100%}
.gtour .gpv svg{display:block;height:calc(88px * var(--k));width:auto}
.gtour .gsg{font-size:calc(26px * var(--k));font-weight:800;line-height:1.4;max-width:calc(300px * var(--k))}   /* big, read at once (Nili) */
.gtour .gsg span{padding:0 calc(1px * var(--k));border-radius:calc(2px * var(--k))}
.gtour .gsg span.on{background:var(--sing);box-shadow:0 0 0 calc(2px * var(--k)) var(--sing)}
.gtour .gln{display:flex;align-items:center;gap:calc(10px * var(--k));text-align:left}
.gtour .gln img{flex:none;width:calc(64px * var(--k));height:calc(64px * var(--k));border-radius:calc(4px * var(--k));object-fit:cover}
.gtour .gln svg{flex:none;width:calc(20px * var(--k));height:calc(20px * var(--k))}
.gtour .gln .gsk{background:var(--paper);border-radius:calc(6px * var(--k));padding:calc(10px * var(--k)) calc(12px * var(--k));max-width:calc(230px * var(--k))}
.gtour .gln .gsk span{display:flex;align-items:center;gap:calc(6px * var(--k));font-size:calc(13px * var(--k));font-weight:400;letter-spacing:0;color:var(--grey)}
.gtour .gln .gsk i{flex:none;width:calc(12px * var(--k));height:calc(12px * var(--k));border-radius:calc(2px * var(--k))}
.gtour .gln .gsk b{display:block;font-size:calc(15px * var(--k));font-weight:800;line-height:1.2;margin-top:calc(4px * var(--k))}
.gtour .glc{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(8px * var(--k)) calc(14px * var(--k));max-width:calc(280px * var(--k))}
.gtour .glc span{display:inline-flex;align-items:center;gap:calc(6px * var(--k));font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0}
.gtour .glc i{flex:none;width:calc(14px * var(--k));height:calc(14px * var(--k));border-radius:calc(2px * var(--k))}
.gtour{padding-top:calc(32px * var(--k));padding-bottom:calc(32px * var(--k))}   /* a taller card (Nili) */
.gtour .garr{position:absolute;top:calc(100% - 1px);width:calc(24px * var(--k));height:calc(12px * var(--k));background:var(--white);clip-path:polygon(0 0,100% 0,50% 100%);transition:left .15s;pointer-events:none}   /* points down to the lit tab */
.gk{position:fixed;z-index:41;background:var(--white);color:var(--ink);font-weight:800}   /* outside the card, under the tabs: a white key, easy to see (Nili) */
.gk[hidden]{display:none}
.embed.gkroom .main{padding-bottom:calc(68px * var(--k))}   /* the dark room under the tabs that holds GOT IT */

.gtour .gx{position:absolute;top:0;right:0;width:calc(44px * var(--k));height:calc(44px * var(--k));display:grid;place-items:center;border:0;background:none;cursor:pointer}
.gtour .gx svg{width:calc(14px * var(--k));height:calc(14px * var(--k))}
.nav.gstep .tab{opacity:.35;transition:opacity .15s,background .15s}
.nav.gstep .tab.glit{opacity:1;background:var(--c);box-shadow:0 calc(1px * var(--k)) calc(4px * var(--k)) rgba(29,29,27,.14)}
/* NILLA 0-3 FREE: the thin bar under the top bar */
.lockbar{position:absolute;left:calc(16px * var(--k));right:calc(16px * var(--k));top:calc(44px * var(--k));z-index:20;display:flex;align-items:center;gap:calc(12px * var(--k));margin-top:calc(8px * var(--k));padding:calc(6px * var(--k)) calc(6px * var(--k)) calc(6px * var(--k)) calc(16px * var(--k));min-height:calc(56px * var(--k));background:var(--white);border-radius:calc(12px * var(--k));
  box-shadow:inset 0 0 0 1px var(--hair);transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .2s,opacity .2s}
.lockbar.on{transform:none;opacity:1;pointer-events:auto}
.lockbar .lbt{flex:1;font-size:calc(15px * var(--k));font-weight:400}
.lockbar .lbget{flex:none;display:inline-flex;align-items:center;min-height:calc(44px * var(--k));padding:0 calc(16px * var(--k));background:var(--red);color:#fff;font-size:calc(15px * var(--k));font-weight:800;letter-spacing:0;text-decoration:none;border-radius:calc(6px * var(--k));white-space:nowrap}
/* THE MENU (as in v244: every row opens and closes in place, one at a time), a white board of the column's width under the menu key */
.menu{position:absolute;left:calc(16px * var(--k));width:var(--W,calc(343px * var(--k)));top:calc(52px * var(--k));bottom:calc(calc(16px * var(--k)) + env(safe-area-inset-bottom,0px));z-index:30;background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair);border-radius:calc(12px * var(--k));overflow:auto;padding:0 var(--P) var(--P);display:none;-webkit-overflow-scrolling:touch}
.menu.on{display:block}
.mrow{border-bottom:1px solid var(--white)}
.menu .key,.menu .mkey,.menu .tierprev button{background:var(--white)}
.menu .tierprev button[aria-pressed="true"]{background:var(--ink)}
.mh{width:100%;min-height:calc(48px * var(--k));display:flex;align-items:center;justify-content:space-between;gap:calc(12px * var(--k));border:0;background:none;padding:0;font-size:calc(17px * var(--k));font-weight:800;text-align:left;text-decoration:none;color:var(--ink);cursor:pointer}
.mh i{font-style:normal;font-weight:400;font-size:calc(15px * var(--k));color:var(--grey)}
.mh .chev{flex:none;transition:transform .2s}
.mrow.open .mh .chev{transform:rotate(180deg)}
.mbody{display:none;padding:0 0 calc(16px * var(--k));font-size:calc(15px * var(--k));line-height:1.4}
.mrow.open .mbody{display:block}
.mbody p{margin-top:calc(8px * var(--k))}
.mbody .lead{font-size:calc(17px * var(--k));font-weight:800;line-height:1.3;margin-top:0}
.mbody .eye{font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-top:calc(16px * var(--k))}
.mbody .eye:first-child{margin-top:0}
.mbody .eye+.lead{margin-top:calc(8px * var(--k))}
.mlist{list-style:none;margin-top:calc(4px * var(--k))}
.mlist li{position:relative;padding-left:calc(16px * var(--k));margin-top:calc(4px * var(--k))}
.mlist li::before{content:'';position:absolute;left:0;top:.55em;width:calc(6px * var(--k));height:calc(6px * var(--k));background:var(--ink)}
.mph{display:block;width:100%;border-radius:calc(4px * var(--k));margin-top:calc(12px * var(--k))}
.mkey{display:flex;align-items:center;justify-content:center;width:100%;height:calc(44px * var(--k));border:0;border-radius:calc(6px * var(--k));background:var(--paper);font-size:calc(15px * var(--k));font-weight:800;text-decoration:none;color:var(--ink);margin-top:calc(12px * var(--k));cursor:pointer}
/* Team: Onili on top, two columns of photo; Annie, Amandine and Anthony under her, one column each; the words beside, on the column lines */
.tmm{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--G);align-items:start;margin-top:calc(12px * var(--k))}
.tmm img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:calc(4px * var(--k));grid-column:1}
.tmm.top img{grid-column:1 / span 2}
.tmm .tw{grid-column:2 / -1;display:flex;flex-direction:column;gap:calc(2px * var(--k));font-size:calc(15px * var(--k))}
.tmm.top .tw{grid-column:3 / -1}
.tmm .tw b{font-weight:800}
/* Credits: opens on the playing song; the previous and next songs on the keys at each end */
.mcnav{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--G);align-items:center}
.mcsong{grid-column:2 / span 2;display:flex;align-items:center;gap:calc(8px * var(--k));min-width:0}
.mcsong img{width:calc(32px * var(--k));height:calc(32px * var(--k));border-radius:calc(4px * var(--k));flex:none}
.mcsong b{font-size:calc(15px * var(--k));font-weight:800;line-height:1.2}
.mccont .featrow{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--G);row-gap:calc(4px * var(--k));margin-top:calc(12px * var(--k))}
.feat1{display:flex;align-items:center;gap:calc(8px * var(--k));min-height:calc(44px * var(--k));min-width:0}
.feat1.wide{grid-column:1 / -1}
.feat1 .fic{display:flex;align-items:center;flex:none;height:calc(32px * var(--k))}
.feat1 .fic img,.feat1 .fic svg{width:calc(32px * var(--k));height:calc(32px * var(--k));display:block;object-fit:contain;flex:none}
.feat1 .fic > * + *{margin-left:-4px}
.feat1 .fnm{font-family:"Caveat","Bradley Hand",cursive;font-size:calc(22px * var(--k));font-weight:600;line-height:1.05;min-width:0;overflow-wrap:anywhere}
.feat1 .fnm small{display:block;font-family:var(--font);font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.feat1 .fnm small.fsub{font-family:"Caveat","Bradley Hand",cursive;font-size:calc(17px * var(--k));font-weight:600;letter-spacing:0;text-transform:none}
.featva{margin-top:calc(16px * var(--k))}
.featw{display:block;font-family:"Caveat","Bradley Hand",cursive;font-size:calc(28px * var(--k));font-weight:600;line-height:1}
.fwu{display:block;height:calc(14px * var(--k));width:auto;margin-top:calc(2px * var(--k));fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}

.plan{padding:calc(16px * var(--k)) 0;border-bottom:1px solid var(--white)}
.pyou{font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0;text-transform:uppercase;color:var(--grey)}
.pname{font-size:calc(22px * var(--k));font-weight:800;line-height:1.2;margin-top:calc(2px * var(--k))}
.pget{display:flex;flex-direction:column;justify-content:center;min-height:calc(56px * var(--k));margin-top:calc(12px * var(--k));padding:calc(8px * var(--k)) calc(16px * var(--k));border-radius:calc(6px * var(--k));background:var(--red);color:#fff;text-decoration:none}
.pget b{font-size:calc(17px * var(--k));font-weight:800;letter-spacing:0}
.pget span{font-size:calc(13px * var(--k));font-weight:400}
.mver{padding-top:calc(16px * var(--k));font-size:calc(13px * var(--k));color:var(--grey)}
.tierprev{display:flex;gap:calc(8px * var(--k));align-items:center;flex-wrap:wrap;padding:calc(16px * var(--k)) 0 0;font-size:calc(13px * var(--k));color:var(--grey)}
.tierprev button{min-height:calc(44px * var(--k));padding:0 calc(12px * var(--k));border:0;border-radius:calc(6px * var(--k));background:var(--paper);font-size:calc(13px * var(--k));font-weight:800;letter-spacing:0;cursor:pointer}
.tierprev button[aria-pressed="true"]{background:var(--ink);color:#fff}
.toast{position:absolute;left:50%;bottom:calc(140px * var(--k));transform:translateX(-50%);background:var(--ink);color:#fff;font-size:calc(15px * var(--k));padding:calc(10px * var(--k)) calc(16px * var(--k));border-radius:calc(6px * var(--k));opacity:0;transition:opacity .2s;pointer-events:none;z-index:40}
.toast.on{opacity:1}
/* THE QUICK TOUR (v242's cards, change 176, on the grid): the screen goes dark but for the tab the card names; the card is the window's
   width, over the window; QUICK TOUR and the X above it, GOT IT and NEXT under it, on the card's own column lines */
.tour{position:absolute;inset:0;z-index:50;cursor:pointer;touch-action:none;animation:tin .22s ease-out}
@keyframes tin{from{opacity:0}to{opacity:1}}
.thole{position:absolute;border-radius:calc(6px * var(--k));pointer-events:none;box-shadow:0 0 0 4000px rgba(18,18,16,.82)}
.twrap{position:absolute;display:flex;flex-direction:column;gap:calc(12px * var(--k));cursor:auto}
.ttop{display:flex;align-items:center;justify-content:space-between;padding:0 var(--P)}
.tq{font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;color:#fff}
.tq b{font-weight:800;margin-left:calc(8px * var(--k));opacity:.75}
.tx{width:calc(44px * var(--k));height:calc(44px * var(--k));border:0;border-radius:calc(6px * var(--k));background:var(--white);display:grid;place-items:center;cursor:pointer}
.tcard{background:var(--white);border-radius:calc(12px * var(--k));padding:var(--P);display:flex;flex-direction:column}
.tcard .ttx{font-size:calc(22px * var(--k));font-weight:800;line-height:1.25;margin-top:calc(8px * var(--k))}
.tcard .tsub{font-size:calc(17px * var(--k));font-weight:800;margin-top:calc(16px * var(--k))}
.key.tgo{width:100%;margin-top:calc(16px * var(--k));font-size:calc(15px * var(--k));font-weight:800;letter-spacing:.1em;gap:calc(8px * var(--k));
  background:radial-gradient(ellipse 70% 85% at 50% 40%,rgba(255,255,255,.80) 0%,rgba(255,255,255,.30) 45%,rgba(255,255,255,0) 75%),linear-gradient(135deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 40%),var(--c);box-shadow:0 calc(1px * var(--k)) calc(4px * var(--k)) rgba(29,29,27,.14)}
.key.tgo b{font-size:calc(15px * var(--k));font-weight:800;letter-spacing:.1em}
.tbot{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--G);padding:0 var(--P)}
.tbot .key{grid-column:span 2;font-size:calc(13px * var(--k));letter-spacing:.1em}
.key.tgot{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 calc(2px * var(--k)) #fff}
.key.tnext{background:var(--white)}
.key.tnext::after{content:'\2192';margin-left:calc(8px * var(--k))}

/* October 7 ruled presentation only. Existing tactile palette and geometry. */
.keys>[data-act="prev"]{grid-column:1}
.keys>[data-act="play"]{grid-column:2 / 4}
.keys>[data-act="next"]{grid-column:4}
.embed #tp .keys,.embed #nav{scroll-margin-top:52px;scroll-margin-bottom:8px}
.skills .sk .cat{display:block;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.skills .sk .ttl>span:not(.cat){font-size:17px;font-weight:800;text-transform:none;letter-spacing:0}
.skills .sk p{font-size:17px;font-weight:400;letter-spacing:0;display:block}
.skills .src{font-size:15px;font-weight:400;color:var(--grey)}
.skills ol.src{padding-left:24px;list-style:decimal}
.skills ol.src li{margin:8px 0}
.skills .src a{color:inherit}
.embed .learn-tiles{display:grid;grid-template-columns:1fr;gap:4px;margin:8px 0;overflow:visible;flex:none}
.embed.learn-rest .board.top{flex:none;height:auto;overflow:visible}
.embed .learn-tile{display:block;text-align:left;border:0;border-radius:6px;background:var(--paper);color:var(--ink);padding:6px 10px;cursor:pointer}
.embed .learn-tile .cat{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.embed .learn-tile .sq{display:inline-block;width:12px;height:12px;flex:none}
.embed .learn-tile b{display:block;font-size:17px;font-weight:800;letter-spacing:0;line-height:1.15;margin-top:3px;text-transform:none}