@font-face{font-family:vt323;src:url(../media/VT323_Regular-s.p.1rqqvv-tpuy10.woff2)format("woff2");font-display:swap}@font-face{font-family:vt323 Fallback;src:local(Arial);ascent-override:91.26%;descent-override:22.82%;line-gap-override:0.0%;size-adjust:87.66%}.Ll8WcW_className{font-family:vt323,vt323 Fallback,ui-monospace,monospace}.Ll8WcW_variable{--font-vt323:"vt323", "vt323 Fallback", ui-monospace, monospace}
:root{--sky:#e6f3ee;--col:420px;--gutter:19px;--tick:.9s;--frame:0 calc(-1 * var(--px)) 0 var(--ink), 0 var(--px) 0 var(--ink), calc(-1 * var(--px)) 0 0 var(--ink), var(--px) 0 0 var(--ink);--hero-full:216px;--hero-play:176px;--band:48px;--play-min:0px}@media (min-width:700px){:root{--hero-full:270px;--hero-play:220px;--band:60px}}@media (min-width:1100px){:root{--hero-full:324px;--hero-play:264px;--band:72px}}*{box-sizing:border-box}[hidden]{display:none!important}html{overflow-x:clip}body{background:var(--soil);color:var(--ink);font:var(--text-read) / var(--line-height) var(--read);letter-spacing:var(--tracking-read);font-synthesis:none;margin:0;overflow-x:clip}b,h1,h2,h3,dt,legend,button,a{font-weight:400!important}canvas{image-rendering:pixelated;display:block}button{font:inherit;color:inherit;letter-spacing:inherit}.trim,.opt .name,.opt .what,.talk .who{text-box:trim-both cap alphabetic}@supports not (text-box:trim-both cap alphabetic){.talk .who{padding-top:4px}}.label{font-size:var(--text-read);line-height:var(--line-height);color:var(--ink-2)}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.col{max-width:var(--col);padding:0 var(--gutter);margin:0 auto}.pixel-art{display:block}.labels{min-height:44px;color:var(--ink-2);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0 4px;text-decoration:underline}.hint{font-size:var(--text-small);color:var(--ink-2);text-align:center;margin:0}h2{margin:0 8px}.row{justify-content:center;align-items:center;gap:12px;display:flex}
.btn{--lip:3px;--l:var(--lip);--edge:var(--ink);--face:var(--button-secondary-face);--hi:var(--button-secondary-highlight);--lo:var(--button-secondary-lip);--spark:var(--button-secondary-spark);--label:var(--button-secondary-label);--icon:var(--button-secondary-icon);--face-up:var(--button-secondary-hover-face);--hi-up:var(--button-secondary-hover-highlight);--face-down:var(--button-secondary-pressed-face);--hi-down:var(--button-secondary-pressed-highlight);--lo-down:var(--button-secondary-pressed-lip);isolation:isolate;min-height:52px;padding:15px 18px calc(15px + var(--lip));color:var(--label);font-size:var(--text-read);cursor:pointer;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;justify-content:center;align-items:center;gap:10px;display:inline-flex;position:relative}.btn:before{content:"";z-index:-1;clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px),0 6px,3px 6px,3px 3px,6px 3px);background:linear-gradient(var(--edge), var(--edge)) left 3px top 3px / 3px 3px no-repeat, linear-gradient(var(--edge), var(--edge)) right 3px top 3px / 3px 3px no-repeat, linear-gradient(var(--edge), var(--edge)) left 3px bottom 3px / 3px 3px no-repeat, linear-gradient(var(--edge), var(--edge)) right 3px bottom 3px / 3px 3px no-repeat, linear-gradient(var(--spark), var(--spark)) left 9px top 9px / 6px 3px no-repeat, linear-gradient(var(--spark), var(--spark)) left 9px top 12px / 3px 3px no-repeat, linear-gradient(var(--hi), var(--hi)) left 3px top 3px / calc(100% - 6px) 3px no-repeat, linear-gradient(var(--lo), var(--lo)) left 3px bottom 3px / calc(100% - 6px) var(--l) no-repeat, linear-gradient(var(--lo), var(--lo)) right 3px top 6px / 3px calc(100% - 9px) no-repeat, linear-gradient(var(--face), var(--face)) left 3px top 3px / calc(100% - 6px) calc(100% - 6px) no-repeat, var(--edge);position:absolute;inset:0}.btn:focus-visible{outline:3px solid var(--pink-press);outline-offset:3px}@media (hover:hover){.btn:not(:disabled):hover{--face:var(--face-up);--hi:var(--hi-up)}}.btn:not(:disabled):active,.btn.is-down{--face:var(--face-down);--hi:var(--hi-down);--lo:var(--lo-down);--spark:var(--face-down)}.btn-primary{--face:var(--button-primary-face);--hi:var(--button-primary-highlight);--lo:var(--button-primary-lip);--spark:var(--button-primary-spark);--label:var(--button-primary-label);--icon:var(--button-primary-icon);--face-up:var(--button-primary-hover-face);--hi-up:var(--button-primary-hover-highlight);--face-down:var(--button-primary-pressed-face);--hi-down:var(--button-primary-pressed-highlight);--lo-down:var(--button-primary-pressed-lip)}.btn-small{min-height:44px;padding:12px 12px calc(12px + var(--lip));gap:8px}.btn-large{padding:23px 20px calc(23px + var(--lip));font-size:var(--text-display);letter-spacing:var(--tracking-display);flex-direction:column;gap:12px}.btn-large small{font-size:var(--text-read);letter-spacing:var(--tracking-read)}.btn-row{align-items:center;gap:12px;display:flex}.btn .trim,.btn small{text-box:trim-both cap alphabetic;display:block}@supports not (text-box:trim-both cap alphabetic){.btn{padding-top:10px;padding-bottom:calc(6px + var(--lip))}.btn-large{padding-top:14px;padding-bottom:calc(12px + var(--lip))}}.btn:disabled{--face:var(--button-disabled-face);--hi:var(--button-disabled-highlight);--lo:var(--button-disabled-lip);--edge:var(--button-disabled-edge);--spark:var(--button-disabled-face);--label:var(--button-disabled-label);--icon:var(--button-disabled-label);cursor:default}.ico{background:var(--icon);clip-path:polygon(0 0,33.34% 0,33.34% 20%,66.67% 20%,66.67% 40%,100% 40%,100% 60%,66.67% 60%,66.67% 80%,33.34% 80%,33.34% 100%,0 100%);flex:none;width:9px;height:15px}.btn-large .ico{width:18px;height:30px}.ico-down{transform:rotate(90deg)}.ico-undo{clip-path:none;width:18px;height:15px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v5H2zM1 1h1v3H1zM0 2h6v1H0z'/%3E%3C/svg%3E") 50%/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v5H2zM1 1h1v3H1zM0 2h6v1H0z'/%3E%3C/svg%3E") 50%/100% 100% no-repeat}.btn-icon{width:44px;padding-left:0;padding-right:0}@media (prefers-reduced-motion:no-preference){.btn-shine:after{content:"";inset:6px 6px calc(6px + var(--lip)) 6px;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#0000 44%,#ffffff5c 44% 54%,#0000 54%) 150% 0/250% 100% no-repeat;animation:6s steps(14,end) infinite shine;position:absolute}@keyframes shine{0%,78%{background-position:150% 0}to{background-position:-50% 0}}}
.skybar{z-index:6;position:relative;overflow:hidden}.bar-row{justify-content:space-between;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px;display:flex;position:relative}.bar-row>*{flex:none}.when{font-size:var(--text-small);white-space:nowrap;justify-items:center;gap:4px;display:grid}.home{margin:-4px;padding:4px;display:block}.home:hover{background:#ffffff59}.home:focus-visible{outline:3px solid var(--pink-press);outline-offset:0}.mark{width:164px;height:44px}@media (max-width:379px){.mark{width:123px;height:33px}}.spk{width:27px;height:21px}@media (max-width:479px){.music{width:44px;padding-left:0;padding-right:0}.music .trim{display:none}}.mini{gap:3px;margin:0;padding:0;list-style:none;display:flex}.mini li{width:18px;height:9px;box-shadow:inset 0 0 0 var(--px) var(--ink)}.mini li.flag{width:9px}.mini li.done{background:var(--pink-press);box-shadow:none}.mini li.now{background:var(--pink-wash);box-shadow:inset 0 0 0 var(--px) var(--pink-press)}.hero{height:var(--hero-full);background:var(--sky);position:relative;overflow:hidden}.playing .hero{height:var(--hero-play)}.hero-inner{height:var(--hero-full);position:absolute;bottom:0;left:0;right:0}.scene{cursor:pointer;background:0 0;border:0;width:100%;height:100%;padding:0;display:block}.scene:focus-visible{outline:3px solid var(--pink-press);outline-offset:-9px}.scene canvas{margin:0 auto}.plant{cursor:pointer;background:0 0;border:0;width:40px;height:44px;padding:0;position:absolute}.plant:focus-visible{outline:3px solid var(--pink-press);outline-offset:-2px}.under{background:var(--soil);position:relative;overflow:hidden}.earth{pointer-events:none;position:absolute;top:0;left:0}.under main{padding-top:var(--band);flex-direction:column;display:flex;position:relative}.playing .under main{min-height:var(--play-min);padding-top:24px;padding-bottom:12px}#veil{z-index:10;width:100%;height:100%;position:fixed;top:0;left:0}.fade-veil{z-index:10;background:var(--soil);opacity:0;pointer-events:none;transition:opacity .16s linear;position:fixed;inset:0}.fade-veil.on{opacity:1;pointer-events:auto}
.box{background:var(--paper);margin-top:32px;position:relative}.box,.screen{border:0 solid #0000;border-image:var(--frame-stone) 9 / 9px / 9px repeat}.frame-wood{border-image-source:var(--frame-wood)}.frame-gem{border-image-source:var(--frame-gem)}.talk{padding:24px 16px 8px}.talk .who{z-index:1;background:var(--ink);color:var(--paper);font-size:var(--text-read);padding:8px;position:absolute;top:-18px;left:12px}.talk p{font-size:var(--text-read);line-height:var(--line-height);margin:8px 0 0}.talk .line{min-height:3.45em}.talk .gline{min-height:2.3em}.tail{top:-21px;left:var(--tail-x,60%);z-index:2;width:21px;height:15px;position:absolute}.talk .next{z-index:1;width:fit-content;margin:8px 0 4px auto;display:flex}.playing .talk{padding:22px 14px 12px}.playing .box{margin-top:18px}.start{width:100%;margin-top:32px}@media (max-width:379px){.start{font-size:36px}}.acct{font-size:var(--text-label);color:var(--on-soil);flex-wrap:wrap;justify-content:center;align-items:center;gap:0 4px;margin:8px 0 0;display:flex}.acct .labels,.foot .labels{color:inherit}.acct-sep{opacity:.7}.menu{border-width:0;min-width:0;margin-left:0;margin-right:0;padding:16px 12px 12px}.menu legend{float:left;width:100%;padding:0 4px 8px}.opt{clear:both;z-index:1;cursor:pointer;text-align:left;grid-template-columns:20px 76px 1fr;align-items:center;min-height:44px;padding:0 4px;display:grid;position:relative}.opt input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.opt .cur{color:var(--pink-press);visibility:hidden;font-size:14px}.opt .name{font-size:var(--text-read)}.opt .what{font-size:var(--text-read);color:var(--ink-2)}.opt:has(input:checked){background:var(--pink-wash)}.opt:has(input:checked) .cur{visibility:visible}.opt:has(input:checked) .what{color:var(--ink)}.opt:has(input:focus-visible){outline:var(--px) solid var(--pink-press);outline-offset:0}.wormbar{flex-wrap:wrap;align-items:center;gap:12px;padding:12px;display:flex}.wormbar h2{flex-basis:100%;margin:0 0 -4px}.wormrow{flex:1;align-items:center;gap:8px;display:flex}.worm{gap:var(--px);padding:var(--px);background:var(--ink);clip-path:polygon(6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px),0 6px,3px 6px,3px 3px,6px 3px);flex:1;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;list-style:none;display:grid}.worm li{min-height:38px;color:var(--ink-2);font-size:var(--text-label);white-space:nowrap;background:#f3e6ee;justify-content:center;align-items:center;gap:4px;display:flex}.worm li.done{background:var(--pink-press);color:var(--white)}.worm li.done:before{content:"✓";letter-spacing:0}.worm li.now{background:var(--pink-wash);color:var(--ink);box-shadow:inset 0 0 0 var(--px) var(--pink-press)}.worm-flag{width:30px;height:30px;box-shadow:var(--frame);flex:none}.worm-flag.done{box-shadow:0 calc(-1 * var(--px)) 0 var(--pink-press), 0 var(--px) 0 var(--pink-press), calc(-1 * var(--px)) 0 0 var(--pink-press), var(--px) 0 0 var(--pink-press)}.card{grid-template-columns:72px 1fr;align-items:center;gap:16px;padding:16px;display:grid}.card .portrait{width:72px;height:72px}.card h3{height:30px;font-size:var(--text-read);white-space:nowrap;margin:0 0 4px}.card dl{font-size:var(--text-read);grid-template-columns:auto 1fr;grid-auto-rows:30px;align-items:center;gap:4px 12px;margin:0;display:grid}.card dt{font-size:var(--text-read);color:var(--ink-2)}.card dt,.card dd{white-space:nowrap;overflow:hidden}.card dd{margin:0}.glow{vertical-align:-1px;gap:3px;margin-right:6px;display:inline-flex}.glow i{width:9px;height:12px;box-shadow:inset 0 0 0 3px var(--ink)}.glow i.on{background:var(--pink-press);box-shadow:none}.foot{color:var(--on-soil);text-align:center;margin-top:150px;padding-bottom:40px;position:relative}.app{font-size:var(--text-read);color:var(--on-soil);text-align:center;text-wrap:balance;margin:0}.start:focus-visible,.foot :focus-visible,.acct :focus-visible{outline-color:var(--white)}@media (prefers-reduced-motion:no-preference){.next .ico{animation:nudge var(--tick) steps(2) infinite}@keyframes nudge{50%{transform:rotate(90deg)translate(3px)}}.worm li.now{animation:glow calc(var(--tick) * 2) steps(2) infinite}@keyframes glow{50%{background:var(--white)}}}
.screen{flex-direction:column;gap:12px;padding:12px;display:flex}.playing .screen{flex:1 0 auto}.screen:focus-visible{outline-color:var(--white)}.round{flex-direction:column;flex:1 0 auto;justify-content:center;align-items:center;gap:12px;padding:16px 0 8px;display:flex}.playing .round{gap:8px;padding:0}.playing .round.score{flex:none}.loading{text-align:center;color:var(--ink-2);padding:24px 0}.practice-tag{text-align:center;color:var(--pink-deep);border:var(--px) dashed var(--pink-press);margin:0;padding:4px 8px}.chordrow{flex:0 auto;justify-content:center;gap:8px;min-width:0;display:flex}.bubble{flex:0 56px;min-width:44px;padding-left:0;padding-right:0}.chord-head.stacked{flex-direction:column}.bubble.given{--face:var(--given);--lo:var(--given-lip)}.bubble.try{--face:var(--pink-wash);--lo:#e79bc0;--edge:var(--pink-press)}.bubble.right{--face:var(--key-right-white-face);--lo:var(--key-right-white-lip);--edge:var(--right-line)}.btn.bubble.gap,.btn.bubble.gap:disabled{--face:var(--white);--hi:var(--white);--lo:var(--white);--spark:var(--white);--edge:var(--pink-press);--label:var(--pink-deep)}.bubble.active{outline:var(--px) dashed var(--pink-press);outline-offset:3px}.keys-head{justify-content:space-between;align-items:center;gap:8px;min-height:44px;display:flex}.keys-head .label{margin:0}.listens{gap:4px;margin:0 0 0 4px;padding:0;list-style:none;display:flex}.listens li{background:var(--pink-press);width:12px;height:12px;box-shadow:inset 0 0 0 var(--px) var(--ink)}.listens li.used{background:0 0}.melody-head{justify-content:flex-start;align-self:stretch;gap:8px}.entry .slots+.btn{flex:none}.melody-head .labels{margin-left:auto}.entry{justify-content:center;align-items:flex-start;gap:8px;width:100%;display:flex}.slots{flex:0 auto;gap:4px;min-width:0;margin:0;padding:0;list-style:none;display:flex}.slots li{flex:0 auto;width:40px;min-width:0}.slot{width:100%;min-width:0;min-height:44px;padding:10px 0 calc(10px + var(--lip));font-size:var(--text-label);flex-wrap:wrap;gap:1px}.slot .mark{font-style:normal;font-size:var(--text-caption);letter-spacing:0}.slot .mark:empty{display:none}.slot small{font-size:var(--text-caption);letter-spacing:0;color:var(--right-line);text-align:center;flex-basis:100%;margin-top:4px;line-height:1}.piano{--black-key-width:max(6.4%, 24px)}.kbd:before,.key-label:before{content:attr(data-text)}.piano{gap:var(--px);padding:var(--px);background:var(--ink);touch-action:manipulation;grid-template-columns:repeat(10,minmax(0,1fr));margin-top:4px;display:grid;position:relative}.key{cursor:pointer;height:136px;color:var(--key-white-label);font-size:var(--text-read);background:linear-gradient(var(--key-white-lip), var(--key-white-lip)) bottom / 100% 6px no-repeat, linear-gradient(var(--key-white-side), var(--key-white-side)) right / 3px 100% no-repeat, var(--key-white-face);-webkit-tap-highlight-color:transparent;border:0;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding:0 0 14px;display:flex;position:relative}.key.black{top:var(--px);z-index:1;width:var(--black-key-width);height:82px;color:var(--key-black-label);font-size:var(--text-caption);letter-spacing:-.08em;box-shadow:0 0 0 var(--px) var(--ink);background:linear-gradient(var(--key-black-lip), var(--key-black-lip)) bottom / 100% 6px no-repeat, linear-gradient(var(--key-black-top), var(--key-black-top)) top / 100% 3px no-repeat, var(--key-black-face);padding-bottom:10px;position:absolute}.key.given{background:linear-gradient(var(--key-given-white-lip), var(--key-given-white-lip)) bottom / 100% 6px no-repeat, var(--key-given-white-face)}.key.black.given{background:linear-gradient(var(--key-given-black-lip), var(--key-given-black-lip)) bottom / 100% 6px no-repeat, var(--key-given-black-face)}.key.right{background:linear-gradient(var(--key-right-white-lip), var(--key-right-white-lip)) bottom / 100% 6px no-repeat, var(--key-right-white-face);box-shadow:inset 0 0 0 var(--px) var(--key-right-white-frame)}.key.black.right{background:linear-gradient(var(--key-right-black-lip), var(--key-right-black-lip)) bottom / 100% 6px no-repeat, var(--key-right-black-face);box-shadow:0 0 0 var(--px) var(--key-right-black-frame)}.key.near{background:linear-gradient(var(--key-near-white-lip), var(--key-near-white-lip)) top / 100% 6px no-repeat, var(--key-near-white-face)}.key.black.near{background:linear-gradient(var(--key-near-black-lip), var(--key-near-black-lip)) top / 100% 6px no-repeat, var(--key-near-black-face)}.key.pressed{background:linear-gradient(var(--key-pressed-white-lip), var(--key-pressed-white-lip)) top / 100% 6px no-repeat, var(--key-pressed-white-face);box-shadow:inset 0 0 0 var(--px) var(--key-pressed-white-frame)}.key.black.pressed{background:linear-gradient(var(--key-pressed-black-lip), var(--key-pressed-black-lip)) top / 100% 6px no-repeat, var(--key-pressed-black-face);box-shadow:0 0 0 var(--px) var(--key-pressed-black-frame)}.key:focus-visible{outline:var(--px) solid var(--pink-press);outline-offset:-6px;z-index:2}.playing .key{height:88px;padding-bottom:8px}.playing .key.black{height:46px;padding-bottom:6px}.kbd{font-size:var(--text-key-cap);letter-spacing:0;color:var(--key-white-computer-key);line-height:1;display:none}.key.black .kbd{color:var(--key-black-computer-key)}.key:not(.black) .kbd{order:2;margin-bottom:-8px}.btn-primary .kbd{color:var(--white)}@media (hover:hover) and (pointer:fine){.kbd{display:block}}.pads{gap:8px;display:flex}.pad{height:104px;font-size:var(--text-display);touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;flex:1;gap:8px}.tap-count{margin:0 0 0 4px}.timeline{background:var(--well);width:100%;box-shadow:var(--frame);position:relative}.timeline .lane{height:48px;position:relative}.timeline .lane+.lane{border-top:var(--px) dotted var(--ink-2)}.timeline i{width:var(--px);height:15px;position:absolute}.timeline .hit{background:var(--ink);top:6px}.timeline .tap{background:var(--pink-press);bottom:6px}.actions{gap:8px;display:flex}.actions .lock{flex:1;min-width:0}.actions .retry{flex:none}.actions .btn{padding-left:12px;padding-right:12px}.scorecard{gap:4px;width:100%;margin:0;padding:0 4px;display:grid}.scorecard div{align-items:baseline;gap:8px;display:flex}.scorecard i{border-bottom:var(--px) dotted var(--ink-2);flex:1}.scorecard dd{margin:0}.scorecard .total{margin-top:4px}.share-text{background:var(--well);font:inherit;font-size:var(--text-small);white-space:pre-wrap;align-self:stretch;margin:0;padding:8px}.score-more{gap:12px;margin-top:4px;display:grid}.save-line,.app-note{font-size:var(--text-small);color:var(--ink-2);text-align:center;text-wrap:balance;margin:0}.save-line .labels{min-height:0;color:var(--ink);padding:0}@media (max-height:760px){.playing .under main{padding-top:10px;padding-bottom:8px}.playing .box{margin-top:10px}.playing .talk{padding:16px 12px 8px}.playing .screen{gap:8px;padding:10px}.playing .key{height:76px}.playing .key.black{height:42px}.playing .pad{height:80px}.playing .slot{padding-top:7px;padding-bottom:calc(7px + var(--lip))}}@media (prefers-reduced-motion:no-preference){.bubble.gap{animation:blink calc(var(--tick) * 2) steps(2) infinite}@keyframes blink{50%{opacity:.35}}.key.pop:after{content:"";border:var(--px) solid var(--ink);background:linear-gradient(var(--ink), var(--ink)) 3px 6px / 3px 3px no-repeat, linear-gradient(var(--ink), var(--ink)) 9px 6px / 3px 3px no-repeat, var(--pink);border-bottom:0;width:18px;height:21px;animation:1.6s steps(6,end) both peek;position:absolute;bottom:48px;left:calc(50% - 9px)}@keyframes peek{0%,to{clip-path:inset(100% 0 0)}30%,70%{clip-path:inset(0)}}.scorecard i:after{content:"";background:var(--pink-press);width:15px;height:6px;animation:inch var(--tick) steps(9) both;margin-bottom:-5px;display:block}.scorecard div:nth-child(2) i:after{animation-delay:calc(var(--tick) * .5)}.scorecard div:nth-child(3) i:after{animation-delay:var(--tick)}.scorecard div:nth-child(4) i:after{animation-delay:calc(var(--tick) * 1.5)}@keyframes inch{0%{margin-left:0}to{margin-left:calc(100% - 15px)}}}
.sheet{width:min(420px,100% - 48px);color:var(--ink);background:var(--paper);border:0 solid #0000;border-image:var(--frame-wood) 9 / 9px / 9px repeat;padding:28px 16px 16px;overflow:visible}.sheet::backdrop{background:#1e1a2499}.sheet h2{font-size:var(--text-read);margin:0 0 8px}.sheet p{font-size:var(--text-read);margin:0 0 12px}.sheet .small{font-size:var(--text-small);color:var(--ink-2)}.age-row{gap:12px;margin-bottom:12px;display:flex}.age-row label{color:var(--ink-2);flex:1;gap:4px;display:grid}.sheet select,.sheet input[type=email],.sheet input[type=text]{min-height:44px;font:inherit;letter-spacing:inherit;color:var(--ink);background:var(--white);border:var(--px) solid var(--ink);border-radius:0}.sheet select{width:100%;padding:0 8px}.sheet input[type=email],.sheet input[type=text]{flex:1;min-width:0;padding:0 8px}.sheet select:focus-visible,.sheet input:focus-visible{outline:3px solid var(--pink-press);outline-offset:3px}.sheet-actions{flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:16px;display:flex}.auth-list{gap:10px;display:grid}.auth-list .btn{width:100%}.auth-apple{--face:#000;--hi:#3a3a3a;--lo:#000;--spark:#3a3a3a;--label:#fff;--face-up:#1c1c1c;--hi-up:#4a4a4a;--face-down:#000;--hi-down:#000;--lo-down:#3a3a3a}.auth-google{--lo:#dadce0;--spark:#fff;--face-up:#f8f9fa;--hi-up:#fff;--face-down:#eef0f2;--hi-down:#dadce0;--lo-down:#fff}.auth-email label{color:var(--ink-2);font-size:var(--text-small);margin:6px 0 4px;display:block}.auth-row{gap:8px;display:flex}.sheet .labels{font-size:inherit}.field-error{min-height:1.15em;color:var(--pink-deep)}
a.btn{text-decoration:none}.tool-intro,.tool-about,.tool-list{padding:16px}.tool-intro h1{font-size:var(--text-display);letter-spacing:var(--tracking-display);text-wrap:balance;margin:0;line-height:1}.tool-intro .eyebrow{color:var(--ink-2);font-size:var(--text-label);flex-wrap:wrap;align-items:center;gap:0 6px;margin:0 0 4px;display:flex}.tool-answer,.tool-copy,.tool-about p,.tool-list p{font-size:var(--text-read);line-height:var(--line-height);margin:12px 0 0}.tool-about h2,.tool-list h2{font-size:var(--text-read);color:var(--ink-2);margin:20px 0 0}.tool-about h2:first-child,.tool-list h2:first-child{margin-top:0}.tool-about a,.tool-list p a,.tool-copy a,.eyebrow a{color:var(--pink-deep);text-underline-offset:3px}.tool-about a:focus-visible,.tool-list p a:focus-visible,.eyebrow a:focus-visible{outline:3px solid var(--pink-press);outline-offset:2px}.facts{font-size:var(--text-label);flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none;display:flex}.facts li{background:var(--well);box-shadow:var(--frame);padding:4px 8px}.screen .label,.screen .tool-copy{margin:0}.start-test{width:100%}.answers{grid-template-columns:1fr 1fr;gap:8px;display:grid}.answers .btn{min-height:72px}.ico-up{transform:rotate(-90deg)}.ico-back{transform:rotate(180deg)}.again{align-self:center}.step{align-items:center;gap:4px;display:flex}.question{text-align:center}.units{min-height:44px;color:var(--ink);text-underline-offset:4px;cursor:pointer;background:0 0;border:0;padding:0 4px;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.units:focus-visible{outline:3px solid var(--pink-press);outline-offset:0}.units.big{font-size:var(--text-display);letter-spacing:var(--tracking-display);color:var(--pink-deep);align-self:center}.result .btn-large{width:100%}.tool-nav{font-size:var(--text-read);flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-bottom:16px;display:flex}.tool-nav a,.foot .tools-link{min-height:44px;color:var(--on-soil);text-underline-offset:3px;align-items:center;display:inline-flex}.foot .tools-link{font-size:var(--text-label)}.listen-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.listen-row .btn{padding-left:8px;padding-right:8px}.tool .piano .key{height:112px}.tool .piano .key.black{height:68px}.options{gap:8px;display:grid}.options .btn{justify-content:space-between}.options .btn small{font-size:var(--text-label);color:inherit}.btn.picked-right{--face:var(--key-right-white-face);--lo:var(--key-right-white-lip);--edge:var(--right-line)}.btn.picked-wrong{--face:var(--pink-wash);--lo:#e79bc0;--edge:var(--pink-press)}.quiz-score{text-align:center;font-size:var(--text-label);color:var(--ink-2);margin:0}.tunes{gap:12px;margin:12px 0 0;padding:0;list-style:none;display:grid}.tunes li{border-left:var(--px) solid var(--given-lip);padding-left:16px}.tunes .tune-year{color:var(--ink-2);font-size:var(--text-label);display:block}.interval-list{gap:8px;margin:12px 0 0;padding:0;list-style:none;display:grid}.interval-list li{align-items:center;gap:8px;display:flex}.interval-list a{color:var(--ink);background:var(--well);box-shadow:var(--frame);flex:1;gap:2px;padding:8px;text-decoration:none;display:grid}.interval-list a:hover{background:var(--pink-wash)}.interval-list a:focus-visible{outline:3px solid var(--pink-press);outline-offset:3px}.interval-list .name{text-underline-offset:3px;text-decoration:underline}.interval-list .what{font-size:var(--text-label);color:var(--ink-2)}.pager{justify-content:space-between;gap:8px;display:flex}.pager .btn{flex:1;min-width:0}.pager .btn .trim{text-overflow:ellipsis;overflow:hidden}@media (max-width:419px){.tool .btn-large{font-size:36px}}