*{margin:0;padding:0}html,body{touch-action:manipulation;background:#040503;overflow:hidden}.webgl{outline:none;position:fixed;top:0;left:0}:root{--oot-font:"Jersey 10", ui-monospace, monospace;--oot-ink:#1c1e38;--oot-gold:#ffd83d;--oot-gold-shade:#7a4b00;--oot-stone-top:#a1a8d8;--oot-stone-bottom:#7c83ba;--oot-stone-edge:#2b2e4f;--oot-key:#06060adb;--oot-key-edge:#c9cad4;--n64-a:#2e6ae0;--n64-c:#f4c20d;--corner-margin:16px;--corner-step:72px}@media (hover:none) and (pointer:coarse){:root{--corner-step:64px}}:root{--oot-magic:linear-gradient(#b6ffab 0 3px, #33dc4f 3px calc(100% - 4px), #129a2e calc(100% - 4px));--oot-backdrop:radial-gradient(ellipse at center, #080a0459, #080a04d1);--oot-backdrop-filter:blur(4px) saturate(.85);--stone-shade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .13 0 0 0 0 .3 2.6 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--stone-speck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .92 0 0 0 0 1 1.8 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.oot-text{color:#fff;text-shadow:2px 0 var(--oot-ink), -2px 0 var(--oot-ink), 0 2px var(--oot-ink), 0 -2px var(--oot-ink), 2px 2px var(--oot-ink), -2px 2px var(--oot-ink), 2px -2px var(--oot-ink), -2px -2px var(--oot-ink), 0 4px var(--oot-ink)}.oot-key{box-sizing:border-box;border:2px solid var(--oot-key-edge);background:var(--oot-key);color:#fff;min-width:28px;height:28px;font:19px / 1 var(--oot-font);border-radius:6px;place-items:center;padding:0 7px;display:inline-grid;box-shadow:0 2px #00000073}.n64{width:34px;height:34px;box-shadow:inset 0 -3px 0 #00000040, inset 0 2px 0 #ffffff59, 0 0 0 2px var(--oot-ink);color:#fff;font:24px / 1 var(--oot-font);text-shadow:0 2px #00000059;border-radius:50%;flex:none;place-items:center;display:inline-grid;position:relative}.n64--a{background:var(--n64-a)}.n64--c{--turn:0deg;background:var(--n64-c)}.n64--c:after{content:"";clip-path:polygon(50% 12%,95% 85%,5% 85%);rotate:var(--turn);background:#5c3d00;position:absolute;inset:9px}.n64--c-right{--turn:90deg}.n64--c-down{--turn:180deg}.n64--c-left{--turn:270deg}.pixel-art{shape-rendering:crispedges;display:block}.pixel-icon{overflow:visible}.pixel-icon__outline path{fill:var(--oot-ink);stroke:var(--oot-ink);stroke-width:4px;stroke-linejoin:miter;vector-effect:non-scaling-stroke}.pixel-icon__light{fill:color-mix(in srgb, currentColor 55%, #fff)}.pixel-icon__shade{fill:color-mix(in srgb, currentColor 62%, #000)}.pixel-button{--edge:#1b1d24;--shade:#5f6473;--face:#a3a7b3;--light:#dfe2e8;--glyph:#2c2f3a;cursor:pointer;filter:drop-shadow(0 3px #00000059);-webkit-tap-highlight-color:transparent;background:0 0;border:none;width:60px;height:60px;padding:0}.pixel-button--close{--edge:#2b0906;--shade:#9a2317;--face:#e2462b;--light:#ff9e63;--glyph:#3d0c06}.pixel-button--about{--edge:#2a1800;--shade:#7a4b00;--face:#d2921a;--light:#f7d270;--glyph:#5a3a00}.pixel-button--a{--edge:#0b1533;--shade:#173c8c;--face:#2e6ae0;--light:#7fa6f5;--glyph:#fff}.pixel-button--c{--edge:#2b1d00;--shade:#a87a00;--face:#f4c20d;--light:#ffe98a;--glyph:#5c3d00}.pixel-button>svg{width:100%;height:100%}.pixel-button svg{overflow:visible}.pixel-button__glyph{color:var(--glyph)}.pixel-button__glyph-shade{transform:translate(3.4px,3.4px)}.pixel-button__glyph-shade .pixel-button__glyph{color:var(--light)}.pixel-button.is-hovered .pixel-button__cap,.pixel-button:focus-visible .pixel-button__cap{transform:translateY(7px)}.pixel-button:active .pixel-button__cap,.pixel-button.is-pressed .pixel-button__cap{transform:translateY(15px)}.pixel-button:focus-visible{outline:3px dashed var(--oot-gold);outline-offset:4px}.menu{box-sizing:border-box;color:#fff;width:100%;max-width:none;height:100%;max-height:none;font-family:var(--oot-font);font-synthesis:none;opacity:0;transition:opacity .22s ease, overlay .22s allow-discrete, display .22s allow-discrete;background:0 0;border:none;place-items:center;margin:0;padding:92px 16px;position:fixed;inset:0;overflow-y:auto}.menu[open]{opacity:1;display:grid}.menu::backdrop{background:var(--oot-backdrop);-webkit-backdrop-filter:var(--oot-backdrop-filter);backdrop-filter:var(--oot-backdrop-filter);opacity:0;transition:opacity .22s ease, overlay .22s allow-discrete, display .22s allow-discrete}.menu[open]::backdrop{opacity:1}.menu__panel{flex-direction:column;gap:18px;width:min(580px,100%);transition:transform .22s;display:flex;transform:translateY(12px)scale(.98)}.menu[open] .menu__panel{transform:none}@starting-style{.menu[open],.menu[open]::backdrop{opacity:0}.menu[open] .menu__panel{transform:translateY(12px)scale(.98)}}.menu__title{color:var(--oot-gold);letter-spacing:.04em;text-align:center;text-shadow:3px 0 var(--oot-ink), -3px 0 var(--oot-ink), 0 3px var(--oot-ink), 0 -3px var(--oot-ink), 3px 3px var(--oot-ink), -3px 3px var(--oot-ink), 3px -3px var(--oot-ink), -3px -3px var(--oot-ink), 0 6px var(--oot-gold-shade), 3px 6px var(--oot-ink), -3px 6px var(--oot-ink), 0 9px var(--oot-ink);margin:0;font-size:56px;font-weight:400;line-height:1}.menu__rows{flex-direction:column;gap:14px;margin:0;padding:0 8px;list-style:none;display:flex}.slab{box-sizing:border-box;border:3px solid var(--oot-stone-edge);background:var(--stone-shade) 0 0 / 260px 260px, var(--stone-speck) 0 0 / 180px 180px, linear-gradient(to bottom, var(--oot-stone-top), var(--oot-stone-bottom));cursor:default;border-radius:12px;outline:none;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;min-height:66px;padding:12px 22px;transition:border-color .15s;display:flex;position:relative;box-shadow:inset 0 2px #ffffff59,inset 0 -3px #0000002e,0 4px #00000059}.slab.is-selected{border-color:#eceeff}.slab,.cursor-frame{--corner:20px;--thickness:5px;--cursor-inset:-9px;--cursor-pulse:-5px}.slab:after,.cursor-frame:after{content:"";inset:var(--cursor-inset);background:linear-gradient(var(--oot-gold) 0 0) top left / var(--corner) var(--thickness), linear-gradient(var(--oot-gold) 0 0) top left / var(--thickness) var(--corner), linear-gradient(var(--oot-gold) 0 0) top right / var(--corner) var(--thickness), linear-gradient(var(--oot-gold) 0 0) top right / var(--thickness) var(--corner), linear-gradient(var(--oot-gold) 0 0) bottom left / var(--corner) var(--thickness), linear-gradient(var(--oot-gold) 0 0) bottom left / var(--thickness) var(--corner), linear-gradient(var(--oot-gold) 0 0) bottom right / var(--corner) var(--thickness), linear-gradient(var(--oot-gold) 0 0) bottom right / var(--thickness) var(--corner);filter:drop-shadow(0 0 1px var(--oot-gold-shade)) drop-shadow(0 1px 0 var(--oot-gold-shade));opacity:0;pointer-events:none;will-change:transform;background-repeat:no-repeat;position:absolute}.slab.is-selected:after,.cursor-frame.is-selected:after,:is(.slab,.cursor-frame):is(.is-hovered,:focus-visible):after{opacity:1;animation:.9s ease-in-out infinite alternate cursor-pulse}.menu .cursor-frame:after{animation:none}@keyframes cursor-pulse{to{inset:var(--cursor-pulse)}}.slab__label{font-size:30px;line-height:1}.switch{font:30px / 1 var(--oot-font);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;gap:6px;padding:0;display:flex}.switch__choice{opacity:.4;padding:6px 10px;transition:opacity .15s}.switch__choice.is-active{opacity:1}.switch__choice:not(.is-active):hover{opacity:.7}.menu__close{bottom:var(--corner-margin);left:var(--corner-margin);position:fixed}@media (width<=480px){.slab{padding:12px 16px}.slab__label,.switch{font-size:26px}.menu__title{font-size:46px}}@media (prefers-reduced-motion:reduce){.menu,.menu::backdrop,.menu__panel{transition:none}.slab.is-selected:after,.cursor-frame.is-selected:after,:is(.slab,.cursor-frame):is(.is-hovered,:focus-visible):after{animation:none}}@media (hover:none) and (pointer:coarse){.menu{padding:calc(92px + env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom))}.menu__close{top:calc(var(--corner-margin) + env(safe-area-inset-top));bottom:auto}}.about-toggle{--corner:9px;--thickness:4px;--cursor-inset:-5px -7px;--cursor-pulse:-3px -5px;right:var(--corner-margin);bottom:calc(var(--corner-margin) + 4px);color:#fff;font:22px / 1 var(--oot-font);font-synthesis:none;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;padding:4px 2px;position:fixed}.about-toggle__label{opacity:.55}.about-toggle.is-hovered,.about-toggle:focus-visible{color:var(--oot-gold)}.about-toggle.is-hovered .about-toggle__label,.about-toggle:focus-visible .about-toggle__label{opacity:1}.about-toggle__by{opacity:.8;font-size:18px}.about-button{bottom:var(--corner-margin);left:calc(var(--corner-margin) + var(--corner-step) * 2);position:fixed}.about a{-webkit-tap-highlight-color:transparent;outline:none;text-decoration:none;position:relative}.about__made-by{flex-wrap:wrap;align-items:baseline;gap:0 10px;margin:0;font-size:30px;line-height:1;display:flex}.about__name{--corner:10px;--thickness:4px;--cursor-inset:-6px -8px;--cursor-pulse:-4px -6px;color:var(--oot-gold)}.about__socials{gap:14px;display:flex}.about__social{--corner:10px;--thickness:4px;--cursor-inset:-7px;--cursor-pulse:-4px;color:#fff;display:block}.about__social svg{height:41px;display:block}.about__action-row{padding:0}.about__action{color:var(--oot-gold);flex:1;align-self:stretch;place-items:center;padding:12px 22px;font-size:30px;line-height:1;transition:color .15s;display:grid}.about__action.is-selected{color:#fff}.about__credits{flex-direction:column;align-items:stretch;gap:10px;padding-bottom:16px}.about__credit-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.about__credit{--corner:10px;--thickness:4px;--cursor-inset:-2px -8px;--cursor-pulse:0 -6px;flex-wrap:wrap;justify-content:space-between;gap:0 16px;padding:4px 0;font-size:24px;line-height:1;display:flex}.about__who{color:var(--oot-gold)}.about__footer{text-align:center;padding-top:6px}.about__dedication{color:var(--oot-gold);margin:0 0 8px;font-size:26px;line-height:1.1}.about__disclaimer{opacity:.75;margin:0;font-size:20px;line-height:1.1}.about__disclaimer span{display:block}@media (width<=480px){.about__made-by,.about__action{font-size:26px}.about__social svg{height:35px}.about__credit{flex-direction:column;gap:2px;font-size:22px}.about__dedication{font-size:22px}.about__disclaimer{font-size:18px}}@media (hover:none) and (pointer:coarse){.about-toggle{top:calc(var(--corner-margin) + env(safe-area-inset-top));right:calc(var(--corner-margin) + env(safe-area-inset-right));bottom:auto}.about-button{top:calc(var(--corner-margin) + var(--corner-step) * 2 + env(safe-area-inset-top));bottom:auto;left:var(--corner-margin)}.about-toggle__label{opacity:.7}}.toast{z-index:1;width:max-content;max-width:calc(100% - 32px);min-height:0;font-family:var(--oot-font);font-synthesis:none;opacity:0;visibility:hidden;pointer-events:none;flex-wrap:nowrap;justify-content:flex-start;transition:opacity .22s,translate .22s,visibility 0s .22s;position:fixed;top:24px;left:50%;translate:-50% -12px}.toast.is-visible{opacity:1;visibility:visible;transition:opacity .22s,translate .22s;translate:-50%}.toast__body{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.toast__share{--corner:10px;--thickness:4px;--cursor-inset:-4px -8px;--cursor-pulse:-2px -6px;color:#fff;font:24px / 1 var(--oot-font);font-synthesis:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:0 0;border:none;outline:none;padding:2px 4px;position:relative}.toast__share.is-copied{color:var(--oot-gold)}@media (width<=480px){.toast__share{font-size:22px}}@media (prefers-reduced-motion:reduce){.toast,.toast.is-visible{transition:none}}.completion{gap:14px;padding:10px 22px 12px 16px}.completion.is-visible{pointer-events:auto}.completion__triforce{color:var(--oot-gold);flex:none}.completion__triforce svg{width:68px;height:auto;display:block}.completion.is-visible .completion__triforce svg{animation:.5s steps(5,end) .1s backwards completion-triforce}@keyframes completion-triforce{0%{opacity:0;scale:.3}}.completion__text{color:var(--oot-gold);text-wrap:balance;margin:0;font-size:30px;line-height:1}@media (hover:none) and (pointer:coarse){.completion{top:calc(var(--corner-margin) + var(--corner-step) * 3 + env(safe-area-inset-top))}}@media (width<=480px){.completion{gap:10px;padding:8px 16px 10px 12px}.completion__triforce svg{width:51px;height:auto}.completion__text{font-size:26px}}@media (prefers-reduced-motion:reduce){.completion.is-visible .completion__triforce svg{animation:none}}.menu-toggle{bottom:var(--corner-margin);left:var(--corner-margin);position:fixed}.volume{cursor:pointer;outline:none;align-items:flex-end;gap:6px;height:40px;padding:0 2px 4px;display:flex}.volume__bar{width:22px;height:calc(12px + var(--level) * 6px);box-sizing:border-box;border:3px solid var(--oot-ink);background:#14162c8c;box-shadow:0 3px #0000004d}.volume__bar.is-lit{background:var(--oot-magic)}.volume__bar:not(.is-lit):hover{background:#33dc4f59}.progress-erase:not(.is-confirming) [data-choice=yes],.progress-erase:not(.is-confirming) [data-choice=no],.progress-erase.is-confirming [data-choice=erase]{display:none}.progress-erase[aria-disabled=true]{cursor:default}.progress-erase[aria-disabled=true] .switch__choice:hover{opacity:.4}.slab--controls{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:16px}.note-keys{grid-template-columns:repeat(5,1fr);gap:8px;margin:0;padding:0;list-style:none;display:grid}.note-keys__item{flex-direction:column;align-items:center;gap:10px;display:flex}.note-keys__keys{gap:4px;display:flex}@media (width<=480px){.note-keys__keys{flex-direction:column;align-items:center}}@media (hover:none) and (pointer:coarse){.menu-toggle{top:calc(var(--corner-margin) + env(safe-area-inset-top));bottom:auto}.slab--controls{display:none}}.song-note{display:block;position:relative}.song-note--white{color:#eef0f8}.song-note--green{color:#3fce4a}.song-note--red{color:#e8432c}.song-note--blue{color:#3f86f2}.song-note--orange{color:#f28a1f}.song-note--purple{color:#a85de6}.song-note--yellow{color:#f5d63a}.song-note--pink{color:#f47fc0}@keyframes song-note-reveal{0%{filter:brightness(.4);scale:.3}60%{filter:brightness(2.5);scale:1.3}to{filter:none;scale:1}}.song-book-toggle{bottom:var(--corner-margin);left:calc(var(--corner-margin) + var(--corner-step));position:fixed}.song-book-toggle__badge{border:3px solid var(--oot-ink);background:var(--oot-gold);width:12px;height:12px;box-shadow:inset -3px -3px 0 var(--oot-gold-shade);pointer-events:none;animation:1s step-end infinite badge-blink;position:absolute;top:-4px;right:-4px}.song-book-toggle__badge[hidden]{display:none}@keyframes badge-blink{50%{background:#fff}}.slab--centered{justify-content:center}.song-book__games{flex-wrap:wrap;justify-content:center}.song-book__book{flex-direction:column;align-items:stretch;gap:12px;padding-top:20px}.song-book__shelves{outline:none;flex-direction:column;gap:10px;display:flex}.song-book__shelf{justify-content:center;gap:12px;display:flex}.song-book__shelf .song-note{--corner:10px;--thickness:4px;--cursor-inset:-6px;--cursor-pulse:-3px;cursor:pointer}.song-book__shelf svg{width:auto;height:52px}.song-note.is-locked{color:#6b71a6}.song-note.is-new svg{animation:song-note-reveal .5s steps(5) var(--reveal-delay,0s) backwards}.song-note.is-new:before{content:"";background:var(--oot-gold);width:6px;height:6px;box-shadow:0 -34px var(--oot-gold), 0 34px var(--oot-gold), -30px 0 var(--oot-gold), 30px 0 var(--oot-gold), -22px -24px #fff, 22px -24px #fff, -22px 24px #fff, 22px 24px #fff;opacity:0;animation:song-note-sparkle .6s steps(4) calc(var(--reveal-delay,0s) + .2s);pointer-events:none;position:absolute;top:50%;left:50%;translate:-50% -50%}@keyframes song-note-sparkle{0%{opacity:1;scale:.4}to{opacity:0;scale:1.2}}.song-book__name{text-align:center;margin:4px 0 0;font-size:30px;line-height:1}.staff{--line-gap:16px;--bottom-line:85.5px;height:124px;position:relative}.staff__lines{height:calc(4 * var(--line-gap) + 3px);background:repeating-linear-gradient(to bottom, var(--oot-ink) 0 3px, transparent 3px var(--line-gap));position:absolute;top:20px;left:0;right:0}.staff__clef{color:#fff;position:absolute;top:16px;left:7px}.staff__clef svg{width:auto;height:98px}.staff__notes{justify-content:space-evenly;margin:0;padding:0;list-style:none;display:flex;position:absolute;inset:0 0 0 58px}.staff__note{width:28px;position:relative}.staff__note .n64{top:calc(var(--bottom-line) - var(--step) * var(--line-gap) / 2 - 14px);width:28px;height:28px;font-size:23px;position:absolute;left:0}.staff__note .n64--c:after{inset:7px}.staff__note.is-playing .n64{box-shadow:inset 0 -3px 0 #00000040, inset 0 2px 0 #ffffff59, 0 0 0 2px var(--oot-ink), 0 0 0 4px var(--oot-gold);scale:1.25}@media (width<=480px){.song-book__games{flex-direction:column;align-items:center;gap:0}.song-book__games .switch__choice{padding:4px 10px}.song-book__shelf{gap:4px}.song-book__name{font-size:26px}.staff__notes{left:50px}}@media (prefers-reduced-motion:reduce){.song-book-toggle__badge,.song-note.is-new svg,.song-note.is-new:before{animation:none}}@media (hover:none) and (pointer:coarse){.song-book-toggle{top:calc(var(--corner-margin) + var(--corner-step) + env(safe-area-inset-top));bottom:auto;left:var(--corner-margin)}}.song-hint{bottom:var(--corner-margin);left:calc(var(--corner-margin) + var(--corner-step) * 3);z-index:1;min-height:60px;max-width:calc(100% - var(--corner-margin) * 2 - var(--corner-step) * 3);font-family:var(--oot-font);font-synthesis:none;opacity:0;visibility:hidden;cursor:pointer;flex-wrap:nowrap;justify-content:center;padding:6px 18px;transition:opacity .22s,translate .22s,visibility 0s .22s;position:fixed;translate:-10px}.song-hint.is-visible{opacity:1;visibility:visible;transition:opacity .22s,translate .22s;translate:0}.song-hint__text{white-space:nowrap;font-size:26px;line-height:1}.song-book-toggle.is-nudging .pixel-button__cap{animation:1.8s ease-in-out infinite song-hint-press}@keyframes song-hint-press{0%,72%,to{transform:translateY(0)}82%,90%{transform:translateY(7px)}}@media (width<=480px){.song-hint__text{font-size:22px}}@media (prefers-reduced-motion:reduce){.song-hint,.song-hint.is-visible{transition:none}.song-book-toggle.is-nudging .pixel-button__cap{animation:none}}@media (hover:none) and (pointer:coarse){.song-hint{top:calc(var(--corner-margin) + var(--corner-step) + env(safe-area-inset-top));bottom:auto;left:calc(var(--corner-margin) + var(--corner-step));max-width:calc(100% - var(--corner-margin) * 2 - var(--corner-step))}}.song-learned{gap:10px;padding:6px 16px 6px 12px}.song-learned__note{flex:none}.song-learned__note svg{width:auto;height:35px}.song-learned.is-visible .song-learned__note svg{animation:.5s steps(5,end) .15s backwards song-note-reveal}.song-learned__text{text-wrap:balance;margin:0;font-size:24px;line-height:1}.song-learned__text strong{color:var(--oot-gold);font-weight:400}@media (width<=480px){.song-learned__text{font-size:22px}}@media (prefers-reduced-motion:reduce){.song-learned.is-visible .song-learned__note svg{animation:none}}@media (hover:none) and (pointer:coarse){.song-learned{top:calc(var(--corner-margin) + env(safe-area-inset-top))}.song-learned__text span{display:block}}.title-screen{z-index:10;padding:calc(24px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));box-sizing:border-box;color:#fff;font-family:var(--oot-font);font-synthesis:none;text-align:center;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:var(--oot-backdrop);-webkit-backdrop-filter:var(--oot-backdrop-filter);grid-template-rows:1fr auto auto 1fr auto;justify-items:center;gap:48px;transition:opacity .6s;display:grid;position:fixed;inset:0}.title-screen:before{content:"";z-index:-1;background:radial-gradient(#15170d,#040503);transition:opacity .8s;position:absolute;inset:0}.title-screen.is-ready{cursor:pointer}.title-screen.is-ready:before{opacity:0}.title-screen.is-started{opacity:0;pointer-events:none}.title-screen__controls{visibility:hidden;flex-direction:column;grid-row:4;align-self:center;align-items:center;gap:14px;display:flex}.title-screen.is-ready .title-screen__controls{visibility:visible}.title-screen__controls-label{opacity:.7;margin:0;font-size:24px;line-height:1}.title-screen__keys{align-items:flex-end;gap:18px;margin:0;padding:0;list-style:none;display:flex}.title-screen__key{flex-direction:column;align-items:center;gap:8px;display:flex}.title-screen>*{opacity:0;transition:opacity .3s}.title-screen.is-font-ready>*{opacity:1}.title-screen__logo{flex-direction:column;grid-row:2;align-items:center;display:flex}.title-screen__triforce{color:var(--oot-gold);margin-bottom:18px}.title-screen__triforce svg{width:136px;height:auto}.title-screen__title{font-size:104px}.title-screen__subtitle{letter-spacing:.04em;margin:18px 0 0;font-size:36px;line-height:1}.title-screen__action{grid-row:3;place-items:center;min-height:56px;display:grid}.title-screen__action>*{grid-area:1/1}.title-screen__gauge{box-sizing:border-box;border:3px solid var(--oot-ink);width:min(280px,70vw);height:24px;box-shadow:0 0 0 3px #e8e9f2, 0 0 0 6px var(--oot-ink), 0 9px 0 #0000004d;background:#14162cb3;transition:opacity .15s .35s,visibility 0s .5s}.title-screen__gauge-fill{width:calc(var(--progress,0) * 100%);background:var(--oot-magic);height:100%;transition:width .2s steps(4,end);display:block}.title-screen.is-ready .title-screen__gauge{opacity:0;visibility:hidden}.title-screen__start{color:var(--oot-gold);font:48px / 1 var(--oot-font);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;visibility:hidden;background:0 0;border:none;outline:none;padding:4px 16px}.title-screen.is-ready .title-screen__start{visibility:visible;transition:visibility 0s .5s;animation:1.1s step-end .5s infinite title-screen-blink}.title-screen__start:focus-visible{outline:3px dashed var(--oot-gold);outline-offset:4px}@keyframes title-screen-blink{50%{opacity:.2}}.title-screen__start-label--touch{display:none}.title-screen__sound{flex-wrap:wrap;grid-row:5;justify-content:center;align-items:center;gap:6px 10px;margin:0;font-size:24px;line-height:1;display:flex}.title-screen.is-font-ready .title-screen__sound{opacity:.7}.title-screen__headphones{color:#eef0f8}.title-screen__headphones svg{width:32px;height:auto}.menu-toggle,.song-book-toggle,.about-button,.about-toggle,.touch-controls{transition:opacity .4s .2s}:root.is-title-screen :is(.menu-toggle,.song-book-toggle,.about-button,.about-toggle,.touch-controls){opacity:0;visibility:hidden}@media (width<=480px),(height<=560px){.title-screen{gap:32px}.title-screen__triforce svg{width:102px;height:auto}.title-screen__title{font-size:80px}.title-screen__subtitle{margin-top:12px;font-size:30px}.title-screen__start{font-size:40px}.title-screen__sound{font-size:22px}.title-screen__keys{gap:10px}.title-screen__controls-label{font-size:22px}}@media (width>=760px){.title-screen__controls,.title-screen__sound{bottom:calc(28px + env(safe-area-inset-bottom));grid-row:auto;position:absolute}.title-screen__controls{align-items:flex-start;gap:10px;left:16px}.title-screen__sound{flex-wrap:nowrap;right:16px}}@media (prefers-reduced-motion:reduce){.title-screen,.title-screen:before,.title-screen>*,.title-screen__gauge,.title-screen__gauge-fill,.menu-toggle,.song-book-toggle,.about-toggle,.touch-controls{transition:none}.title-screen.is-ready .title-screen__start{transition:none;animation:none}}@media (hover:none) and (pointer:coarse){.title-screen__controls,.title-screen__start-label--pointer{display:none}.title-screen__start-label--touch{display:inline}}.touch-controls{display:none}@media (hover:none) and (pointer:coarse){.touch-controls{display:block}}.touch-controls__pad{bottom:calc(40px + env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:fixed}.touch-controls__pad--a{bottom:calc(35px + env(safe-area-inset-bottom));left:calc(20px + env(safe-area-inset-left))}.touch-controls__pad--c{right:calc(16px + env(safe-area-inset-right));grid-template:repeat(2,66px)/repeat(3,66px);display:grid}.touch-controls__button{-webkit-tap-highlight-color:transparent;place-items:center;width:100%;height:100%;display:grid}.touch-controls__pad--a .touch-controls__button{width:96px;height:96px}.touch-controls .pixel-button{pointer-events:none;cursor:auto;display:block}.touch-controls__pad--a .pixel-button{filter:drop-shadow(0 4px #00000059);width:80px;height:80px}.touch-controls .pixel-button>svg{transition:opacity .2s,filter .2s}.touch-controls__button.is-pressed .pixel-button__cap{transform:translateY(15px)}.touch-controls__button[data-button=CUp]{grid-area:1/2}.touch-controls__button[data-button=CLeft]{grid-area:2/1}.touch-controls__button[data-button=CDown]{grid-area:2/2}.touch-controls__button[data-button=CRight]{grid-area:2/3}.touch-controls .pixel-button__glyph path{transform-box:fill-box;transform-origin:50%}[data-button=CUp] .pixel-button__glyph path{rotate:-90deg}[data-button=CLeft] .pixel-button__glyph path{rotate:180deg}[data-button=CDown] .pixel-button__glyph path{rotate:90deg}.touch-controls.is-disabled .pixel-button>svg{opacity:.55;filter:grayscale()brightness(.8)}@media (prefers-reduced-motion:reduce){.touch-controls .pixel-button>svg{transition:none}}