/* Accessibility and runtime states only. Approved v258 geometry lives in tight.css. */
/* October 6 Credits: type says what; handwriting says who. Scoped to Credits. */
[data-cred]{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;color:var(--ink)}
[data-cred] .credits-song{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
[data-cred] .credits-song img{display:block;width:44px;height:44px;border-radius:4px}
[data-cred] .credits-song b{display:block;font-size:17px;font-weight:800;line-height:1.2}
[data-cred] .credits-song small{display:block;margin-top:4px;font-size:13px;font-weight:400;color:rgba(29,29,27,.6)}
[data-cred] .credits-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--G);margin-top:12px}
[data-cred] .credits-nav button{grid-column:span 2;height:44px;border:1px solid rgba(29,29,27,.12);border-radius:6px;background:var(--white);color:var(--ink);font:800 13px/1 ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;letter-spacing:.1em;cursor:pointer;padding:0 8px}
[data-cred] .credits-nav button:active{transform:translateY(1px)}
[data-cred] .credits-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[data-cred] .credits-group h3{margin:16px 0 0;padding:8px 0 6px;border-bottom:2px solid var(--ink);font-size:15px;font-weight:800;line-height:1.2;letter-spacing:.1em}
[data-cred] .credit-line{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:12px;min-height:56px;align-items:center;padding:8px 0;box-sizing:border-box}
[data-cred] .credit-line+.credit-line{border-top:1px solid rgba(29,29,27,.12)}
[data-cred] .credit-icon{width:56px;height:44px;display:flex;align-items:center;justify-content:center}
[data-cred] .credit-icon img,[data-cred] .credit-icon svg{display:block;height:44px;width:56px;object-fit:contain}
[data-cred] .credit-role{display:table;box-sizing:border-box;min-height:20px;padding:1px 8px;border:1px solid rgba(29,29,27,.1);border-radius:4px;background:var(--white);color:var(--ink);font-size:13px;font-weight:800;line-height:16px;letter-spacing:.1em}
[data-cred] .credit-name{display:block;margin-top:4px;font-family:"Caveat",cursive;font-size:24px;font-weight:600;line-height:1;overflow-wrap:anywhere}
[data-cred] .credit-written{display:block;margin-top:4px;font-size:15px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
[data-cred] .credit-written .credit-name{display:inline;margin:0}
html,body{min-height:100dvh}
.app{height:var(--visible-app-height,100dvh)}
.app.homemode{min-height:var(--home-min-height,0px)}
.app.song-started{min-height:var(--home-min-height,0px)}
/* Only gaps inside the title lockup scale, together with its text and bunny. */
.hero .lockup{flex:none;gap:var(--hero-gap,var(--G))}
.hero .hsub{margin-top:var(--hero-line-gap,calc(4px * var(--k)))}
button:focus-visible,a:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.gp[aria-disabled=true]{cursor:pointer}
.gp[aria-disabled=true].down{box-shadow:none;transform:none}
.tog .knob{transition:transform .2s ease;left:calc(2px * var(--k))}
.tog.on .knob{left:calc(2px * var(--k));transform:translateX(calc(100% + 4px * var(--k)))}
.pl span{background:linear-gradient(to right,var(--sing) var(--p,0%),transparent var(--p,0%));color:var(--lift)}
.pl span.sung{background:linear-gradient(to right,var(--sing) var(--p,0%),transparent var(--p,0%));box-shadow:none}
.session-state{position:absolute;inset:0;z-index:90;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:32px}
.session-inner{width:min(343px,100%);font-size:15px}
.session-inner h1{font-size:22px;margin-bottom:12px}
.session-inner .key{width:100%;margin-top:16px}
.session-skeleton{height:44px;background:var(--hair);border-radius:6px;margin:12px 0}
.session-skeleton:nth-child(2){width:72%}
.session-skeleton:last-child{height:220px}
.between-card .tcard p{margin-top:12px;font-size:15px}
/* v278 uses the existing paper, ink and song-colour system. */
.mcap{margin-top:calc(16px * var(--k))}
.menu .account-email{margin-top:calc(4px * var(--k));max-width:100%;min-width:0;font-family:var(--font);font-size:calc(15px * var(--k));font-weight:400;line-height:1.4;letter-spacing:0;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.mcap .tf{display:block;width:100%;height:44px;background:var(--white);border:0;border-radius:6px;padding:0 12px;font:inherit;margin:8px 0}
.mcap .mkey{width:100%;min-height:44px;background:var(--ink);color:var(--white)}
.mcap .cerr{background:var(--sing);padding:8px 12px;border-radius:6px;margin:8px 0}
.mcap [aria-invalid=true]{outline:2px solid var(--ink)}
.mcap button:disabled{opacity:.65;cursor:wait}
.tcard .tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(4px * var(--k));width:60%;margin:calc(16px * var(--k)) auto 0}
.tcard .tgrid img{display:block;width:100%;border-radius:calc(2px * var(--k))}
.embed .gp{box-shadow:0 2px 8px rgba(29,29,27,.16),0 1px 2px rgba(29,29,27,.10)}
.embed .gp.down,.embed .gp:active{transform:translateY(1px)}
.totrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--G);align-items:end;margin-top:var(--G)}
.totrow .tw{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-self:stretch}
.totrow h3{font-size:calc(17px * var(--k));font-weight:800;line-height:1.2}
.totrow p{font-size:calc(15px * var(--k));line-height:1.3;margin-top:calc(4px * var(--k))}
.totrow .key{margin-top:calc(12px * var(--k));width:100%;min-height:44px;background:var(--ink);color:var(--white);font-size:calc(15px * var(--k));letter-spacing:.1em;white-space:nowrap}
.totrow .tf{grid-column:1/-1;width:100%;height:44px;border:0;border-radius:6px;background:#E8E6E8;padding:0 12px;font:inherit;font-size:calc(17px * var(--k))}
.totrow .terr{grid-column:1/-1;background:var(--sing);padding:8px 12px;border-radius:6px}
.totrow .tok{grid-column:1/-1;background:var(--paper);padding:12px;border-radius:6px;font-size:calc(15px * var(--k))}
.totrow .tok b{display:block;font-size:calc(17px * var(--k))}
.totrow button:disabled{opacity:.65;cursor:wait}
/* v258 X: keep the approved 36px drawing and provide a 44px touch area. */
.key.wx{position:relative}
.key.wx::before{content:"";position:absolute;inset:-4px}
/* Category selection feedback without an independent layout animation. */
.skills .sk.glow{animation:none}
/* APPROVED October 4/6: rounded ink type, paper keys and coloured gel.
   All ruler sizing follows --k. Immutable HOME pad grid ratios are untouched. */
:root{--ramp-grey:#5E5C5A;--free-blue:#16A0C1}
.hero .t1{font-size:calc(34px * var(--k));font-weight:800;letter-spacing:0;white-space:normal}
.hero .hsub{font-size:calc(22px * var(--k));font-weight:400;letter-spacing:0}
.hero .hbun img{height:calc(46px * var(--k))}
.hero .note{font-size:calc(28px * var(--k));font-weight:600}
.hero{flex:none;min-height:calc(116px * var(--k));padding-top:calc(8px * var(--k));padding-bottom:calc(12px * var(--k))}
.song-started .hero{display:flex;min-height:calc(68px * var(--k));justify-content:center}
.name-line{display:flex;align-items:center;gap:calc(7px * var(--k))}
.hero .lockup{max-width:100%;min-width:0;align-self:center}
.hero .hl{flex:0 1 auto;min-width:0}
.hero .name-line{flex-wrap:wrap;min-width:0;max-width:100%}
.hero .free-tag{flex:none}
.hero .hsub{white-space:normal}
.free-tag{width:calc(72.5px * var(--k));height:calc(28px * var(--k));border-radius:calc(6px * var(--k));background:var(--free-blue);color:#fff;display:grid;place-items:center;font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em}
.free-line{font-size:calc(13px * var(--k));font-weight:400;color:var(--ramp-grey);text-align:center;margin-top:calc(8px * var(--k))}
.tour-offer{display:flex;align-items:center;justify-content:center;gap:var(--G);font-family:"Caveat",cursive;font-size:calc(26px * var(--k));font-weight:600;line-height:1.1}
.tour-offer .key{width:calc(44px * var(--k));height:44px;flex:none;background:var(--white);font-family:var(--font);font-size:calc(15px * var(--k));font-weight:800}
.lock{right:9%;bottom:9%;width:18px;height:18px;background:none;border-radius:0;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.lock svg{width:18px;height:18px}
.new{width:14px;height:14px;top:7px;left:7px;border-radius:50%;padding:0;border:2px solid #fff;background:var(--free-blue);box-sizing:content-box}
.free-opening .gp[aria-disabled=true]>img{animation:locked-opening 2.1s linear both}
.free-opening .lock{animation:opening-lock 2.1s linear both}
.free-opening .free-tag{animation:opening-free 2.1s linear both}
.free-opening .new{animation:opening-new 2.1s linear both}
/* Cast light, never edited art. A discrete phase avoids animating filters. */
.opening-dark .gp[aria-disabled=true]>img{filter:brightness(.55)}
@keyframes locked-opening{from,to{opacity:1}}
@keyframes opening-lock{0%,70%{opacity:0}100%{opacity:1}}
@keyframes opening-free{0%,20%{opacity:0}35%,100%{opacity:1}}
@keyframes opening-new{0%,48%{opacity:0}58%,100%{opacity:1}}
.tab{height:calc(52px * var(--k));display:flex;flex-direction:column;justify-content:center;gap:calc(3px * var(--k));font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em}
.nav-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px}
.nav-icon img,.nav-icon svg{width:22px;height:22px;object-fit:contain}
.selected-pad{width:100%;aspect-ratio:1;min-height:0}
.selected-pad .pad{width:100%;height:100%;cursor:default}
.board.bottom:not(.idle){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--G);row-gap:calc(7px * var(--k))}
.transport-pad{grid-column:1;grid-row:1 / span 2;align-self:start;position:relative;width:100%;aspect-ratio:1;min-width:0}
.transport-pad .pad{position:absolute;inset:0;width:100%;height:100%;cursor:default;grid-column:auto}
.transport-pad .pad img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.board.bottom .np{grid-column:2 / 5;grid-row:1;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:calc(4px * var(--k));min-width:0}
.np .song{white-space:normal;overflow:visible;text-overflow:clip;font-size:calc(15px * var(--k));font-weight:800;letter-spacing:0;line-height:1.2}
.np .song .ins{font-weight:400}
.stage .fig{position:relative}
.stage .fig img,.stage .fig svg{position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.lockbar[hidden]{display:none}
.board.bottom .scrub{grid-column:2 / 5;grid-row:2;width:100%;align-self:center;margin:0}
.board.bottom .keys{grid-column:1 / 5;grid-row:3;margin:0}
.key.play{grid-column:auto}
.grid-key:disabled{background:#E8E6E8;opacity:.5;cursor:default}
.key,.mkey{font-size:calc(15px * var(--k));font-weight:800;letter-spacing:.1em}
.window-content{width:100%;flex:none}
.cue{font-size:calc(28px * var(--k));font-weight:800;letter-spacing:0;overflow-wrap:break-word}
.tog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--G);width:100%;height:44px;min-height:44px;margin:0;flex:none}
.tog .tlab{grid-column:1;font-size:calc(13px * var(--k));letter-spacing:.1em}
.tog .track{grid-column:2 / 4;width:100%;height:calc(36px * var(--k))}
.tog .knob{width:calc(50% - 4px)}
.tog.on .track{background:var(--sing)}
.tog.on .knob{transform:translateX(calc(100% + 4px))}
.learn-ruler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--G);height:44px;flex:none;width:100%}
.skill-tray{grid-column:1 / 4;display:flex;gap:4px;padding:4px;background:#E8E6E8;border-radius:6px;height:44px}
.skill-tray .msq{position:relative;flex:1;min-width:0;height:36px;aspect-ratio:auto;padding:0;border:0;border-radius:4px;background:var(--skill-color);cursor:pointer}
.learn-ruler .map-key{grid-column:4;height:44px;background:#E8E6E8;font-size:calc(13px * var(--k))}
.skill-tray .msq:active,.skill-tray .msq.scroll-pressed{transform:scale(.92);box-shadow:inset 0 3px 6px rgba(29,29,27,.45),0 0 0 3px white,0 0 8px 3px white;background:radial-gradient(ellipse at center,rgba(255,255,255,.8),transparent 75%),linear-gradient(135deg,rgba(255,255,255,.35),transparent 40%),var(--skill-color)}
.together{padding:calc(16px * var(--k)) 0 calc(8px * var(--k))}
.together .label{font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;color:var(--ramp-grey);text-transform:uppercase}
.together p{font-size:calc(17px * var(--k));font-weight:400;letter-spacing:0;line-height:1.4;margin-top:calc(6px * var(--k))}
.skills .sk:first-child{margin-top:0}
.skills .sk .cat{font-weight:800;letter-spacing:.1em}
.skills .sk .ttl>span{letter-spacing:.1em}
.map-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--G)}
.map-category{display:flex;align-items:center;gap:7px;min-height:64px;height:auto;min-width:0;padding:5px;border:1px solid var(--hair);border-radius:6px;background:var(--white);color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer}
.map-category>i{width:36px;height:36px;flex:none;border-radius:4px}
.map-category span{min-width:0}
.skill-map .map-category b,.pop .popb.skill-map .map-category b{display:block;font-family:var(--font);font-size:calc(15px * var(--k));font-weight:800;line-height:1.1;letter-spacing:0;white-space:normal;overflow-wrap:anywhere;margin:0}
.skill-map .map-category small,.pop .popb.skill-map .map-category small{display:block;margin-top:3px;color:var(--ramp-grey);font-family:var(--font);font-size:calc(13px * var(--k));font-weight:400;line-height:1.2;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
.map-category.selected,.map-category:active{background:#E8E6E8;box-shadow:inset 0 3px 6px rgba(29,29,27,.25)}
.map-detail{margin-top:calc(16px * var(--k))}
.map-eyebrow{display:flex;align-items:center;gap:7px;color:var(--ramp-grey);font-size:calc(13px * var(--k));font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.map-eyebrow i{width:20px;height:20px;flex:none;border-radius:4px}
.map-detail p{font-size:calc(15px * var(--k));font-weight:400;line-height:1.4;margin:8px 0}
.map-pads{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin-top:12px}
.map-pad{aspect-ratio:1;padding:0;border:0;border-radius:3px;overflow:hidden;background:var(--white);cursor:pointer}
.map-pad img{width:100%;height:100%;display:block}
.map-pad.faded img{filter:grayscale(1);opacity:.35}
.map-pad:disabled{cursor:default}
.map-detail .map-hint{font-size:calc(13px * var(--k));color:var(--ramp-grey)}
.tcard .tsub{font-size:calc(17px * var(--k));font-weight:400}
.key.tgo{font-weight:400;letter-spacing:0}
.key.tgo b{font-weight:800;letter-spacing:0}
.tbot .key{font-size:calc(15px * var(--k));font-weight:800;letter-spacing:.1em}
.tour-nav-lit .tab{background:radial-gradient(ellipse at center,rgba(255,255,255,.8),transparent 75%),linear-gradient(135deg,rgba(255,255,255,.35),transparent 40%),var(--tab-gel)}
.tour-nav-lit .tab[data-s=home]{--tab-gel:var(--home)}
.tour-nav-lit .tab[data-s=move]{--tab-gel:var(--move)}
.tour-nav-lit .tab[data-s=sing]{--tab-gel:var(--sing)}
.tour-nav-lit .tab[data-s=learn]{--tab-gel:var(--learn)}
.pget span{font-size:calc(15px * var(--k));font-weight:400;letter-spacing:0}
.pget b{font-size:calc(15px * var(--k));font-weight:800;letter-spacing:.1em}
.nw-get-h,.nw-get-mitts .nw-eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ramp-grey)}
.nw-get-cta{font-size:17px;font-weight:800;letter-spacing:0}
.nw-get-mitts b{font-size:15px;font-weight:800;letter-spacing:0}
.nw-get-mitts i.nw-plus{font-size:17px;font-weight:400}
.nw-get-mitts,.nw-get-why p,.nw-get-row,.nw-get-row b{font-size:15px;font-weight:400;letter-spacing:0}
.nw-get-was{font-size:15px;font-weight:400}
.nw-get-now{font-size:17px;font-weight:800}
.nw-get-price{font-size:17px;font-weight:800}
.nw-get-note{font-size:15px;font-weight:400}
.nw-get-why .nw-get-cta{font-size:15px;font-weight:800;letter-spacing:.1em}
input.tf,textarea.tf,select.tf,.mcap input.tf{font-size:max(16px,calc(15px * var(--k)));min-height:44px;-webkit-user-select:text;user-select:text}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* The iframe defines the public player's viewport; title/pads never shrink. */
html,body{min-height:0}
.app.embed{height:100%;min-height:0}
.app.embed.homemode{min-height:0}
.app.embed .hero{display:none;min-height:0;padding:0}
.embed .gp.down,.embed .gp:active{transform:translateY(1px)}
.embed .pad.down{transform:none}
.public-error{position:absolute;inset:auto 12px 12px;z-index:60;background:var(--paper);padding:12px;border:1px solid var(--hair);border-radius:6px}
.public-error p{margin-bottom:8px}
.gtour .garr,.nav.gstep .tab{transition:none}