:root{--green-2:#647e4a;--green-3:#1c7d67;--green-5:#0c6850;--header-height:97px;--grid-w:62px;--gridh:44px}*{box-sizing:border-box}#root,body,button,html,input,p{font-family:mikado}body,html{margin:0;padding:0;height:100%}body{background-color:#eef7f2}body,p{color:var(--green-3);font-style:normal;font-weight:400;line-height:normal;font-size:24px;line-height:150%}#root{min-height:100%;display:flex;flex-direction:column;position:relative}h1{font-family:moomin;color:var(--green-3);font-size:48px;font-style:normal;font-weight:500}h1,h2{line-height:120%;margin-bottom:0}h2{font-size:28px}.Link,a,h2{font-weight:600}.Link,a{cursor:pointer;text-decoration:underline;color:var(--green-3)}.Dropwdown{z-index:250}.Modal{z-index:200}.ModalDimm{z-index:100}.Header{z-index:30}.StartScreen .MainContent{z-index:19}.SongScreen .Story{z-index:20}.ADMSnufkin,.Leafs,.MoominHouse,.Sun,.Tree{z-index:10}.ScrollArrowHelper{z-index:50}.App .LogoWrapper{z-index:15}.ADMMenu,.Controls,.Looper,.SongMachine{z-index:20}.ADMSnufkin{height:400px;width:400px;position:absolute;bottom:0}.ADMSnufkin>div{position:absolute;margin-top:80px}.Header{height:var(--header-height);background:#ffffff;justify-content:space-between;padding:0 16px;width:100%;align-self:flex-start;justify-self:flex-start}.ADMMenu,.Header{display:flex;align-items:center;position:relative}.ADMMenu{flex-direction:row;gap:8px;margin:16px}.ADM h1{margin:15px;min-width:1000px}.ADM p{font-size:20px;margin-top:8px;margin-bottom:8px}.ADM button{color:var(--green-3)}.ADM .TextContent{width:1200px;align-items:center}.ADM .SongMachine{justify-content:start;margin-top:16px}.ADM .RefreshButton{font-family:Mikado;font-weight:600;font-size:20px;margin-left:16px;margin-right:16px}.ADM .LanguageSelector .CurrentLanguage{font-size:20px}.Header>.LanguageSelector,.Header>.Logo{width:210px;height:auto}.Header h1{font-size:32px;margin:0;padding:0}.LanguageSelector{display:flex;justify-content:flex-end;height:45px}.CurrentLanguage,.Dropwdown{border-radius:5px;border:2px solid var(--green-3);background:#ffffff;padding:8px 16px;line-height:normal}.CurrentLanguage{color:var(--green-3);font-size:18px;display:flex;align-items:center;cursor:pointer;font-weight:600}.Dropwdown{display:flex;flex-direction:column;position:absolute;margin:47px 0 0;text-align:left}.Dropwdown>*{color:var(--green-3);font-size:16px;line-height:140%;text-decoration:none;margin:4px 0}.Dropwdown>:hover{text-decoration:underline}.SongScreen,.StartScreen{text-align:center;justify-content:flex-start;width:100%;margin:0 auto;min-height:100%}.SongScreen,.SongScreenContent,.StartScreen{display:flex;flex-direction:column;align-items:center;flex:1 1 auto}.SongScreenContent{justify-content:center;max-height:800px;width:80%;position:relative;top:-40px}.SongScreenContent .SnufkinHarmonica{width:500px;max-width:100%;transform:translateY(30%)}.StartScreenContent{display:flex;flex-direction:column;align-items:center;width:100%}.MainContent{max-width:800px;width:80%;padding:0;margin:10px 0}.MainContent p{margin:24px 0}.Story{display:flex;align-items:center;width:100%;max-width:1200px;position:relative}.Story>*{margin:50px 20px;flex:1 1 auto;max-width:50%}.Quote{background:var(--green-2);color:#ffffff;border-radius:15px;padding:24px;text-align:left}.Quote h2{font-family:moomin;font-size:32px;line-height:46px}.Quote a,.Quote h2,.Quote p{color:#ffffff}.Notes{display:flex;height:110px;justify-content:center;align-items:center;width:100%}.Notes>:first-child{align-self:flex-end;justify-self:flex-start;margin:10px}.Snufkin{margin:80px 0 20px;flex:0 1 auto;position:relative;width:auto;justify-self:center}.Snufkin img{max-width:100%;height:auto}.SnufkinNoNotes{width:100%;height:auto}.Snufkin .SnuflkinNote{position:absolute;opacity:0;animation:note-pop 2s linear infinite}.Snufkin .SnuflkinNote.note-0{animation-delay:1.1s;top:-10px;left:60%}.Snufkin .SnuflkinNote.note-1{animation-delay:1.5s;top:50px;left:5%}.Snufkin .SnuflkinNote.note-2{animation-delay:.2s;top:0;left:80%}.Sun{position:absolute;left:5%;top:10%}.MoominHouse{position:absolute;right:0;top:300px}.Tree{left:-60px;top:110px}.Leafs,.Tree{position:absolute}.Leafs{right:0;top:-40px}.StartScreen .Sun img{animation:sun-rotate 20s ease infinite}.Start{display:block;width:120px;margin:10px auto;animation:shake 4s infinite}.App{max-height:100vh;min-height:400px;width:100%;margin:0 auto;padding:40px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 auto;position:relative}.App .LogoWrapper{position:absolute;left:0;top:0;padding:19px 16px;width:210px}.App .TextContent{text-align:center;width:80%;max-width:800px}.Rows{flex-direction:column;position:relative}.Col,.Row,.Rows{display:flex}.Col{width:var(--grid-w);height:var(--gridh);border:1px solid #80b7a6;border-width:0 2px 2px 0;cursor:pointer;color:#999999;align-items:center;justify-content:center;font-size:12px;text-transform:uppercase;flex:0 0 auto;overflow:hidden}.Row>.Col:last-child{border-right-width:0}.Col.LowestNote{border-bottom-width:0}.Col.active{background:rgba(244,0,0,.2)}.Col.added{align-items:flex-start;justify-content:flex-start}.Block{position:absolute;height:38px;margin:2px;pointer-events:none;background:#fdf8bb;color:#918c51;border:1px solid #1d5134;border-radius:5px 5px 5px 5px;opacity:0}.Block svg{position:absolute;width:17px;height:17px;left:50%;top:50%;transform:translate(-50%,-50%)}.NoteCol{color:var(--green-3);font-size:20px;font-style:normal;font-weight:500;line-height:normal;border-width:0;border-right:2px solid #80b7a6;justify-content:flex-start;padding-left:20px;font-weight:600}.Tracker{border:2px solid rgba(0,0,0,.5);background:rgba(0,0,0,.8);width:1px;height:100%}#canvas,.Tracker{position:absolute}#canvas{pointer-events:none;top:0}.SongMachine{-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative}.Looper,.SongMachine{max-width:100%;flex:1 1 auto}.Looper{border-radius:15px;background-color:#e5f1e5;border:4px solid var(--green-5);overflow:auto;margin:4px 0}.BottomSection:before,.Looper:before{content:"";height:4px;width:80%;left:10%;border-radius:5px;position:absolute}.Looper:before{border-top:7px solid var(--green-3);margin:-10px 0 0}.BottomSection:before{border-bottom:7px solid var(--green-3);margin:-20px 0 0}.ScrollArrowHelper{position:absolute;right:0;top:44%;animation:blink 2s 3;height:100%;opacity:0;height:auto}.Controls{display:flex;align-items:center;justify-content:space-between;font-size:18px;max-width:100%;margin:0 auto;text-align:center;flex:0 0 auto;height:62px}.Controls>*{margin:0 10px}.Mode,.Playback,.Tempo{display:flex}.PlaybackButton{margin:0 16px 0 0}a.button,button{background:transparent;border:none;cursor:pointer;font-size:20px;font-family:moomin;padding:0}.BlockButton span,.Button span,a.button,button{display:flex;align-items:center;justify-content:center}.BlockButton span,.Button span{white-space:no-break;color:#ffffff;background-color:var(--green-3);height:44px;white-space:nowrap;padding:0 1px}.BlockButton>img:first-child,.Button>img:first-child{margin-right:-1px}.BlockButton>img:last-child,.Button>img:last-child{margin-left:-1px}.ButtonTransparent{color:var(--green-3);background-color:transparent;padding:0 24px}.BlockButton>span{padding:0 20px}.IconButton{cursor:pointer}.Playback,.Tempo{align-items:center;justify-content:center}.Tempo p{margin:-8px 0 0;padding:0;line-height:100%;font-size:18px;font-weight:600}.Tempo .TempoButton{margin:0 8px;cursor:pointer}.BottomSection{margin:10px 0 0}.BottomSection .BlockButton{display:none}.TopShare{display:block}.ModalDimm{content:"";background-color:rgba(0,0,0,.1);width:100vw;min-height:100vh;position:fixed;top:0;left:0;right:0;bottom:0}.Modal{background-color:#ffffff;position:fixed;width:80%;max-height:80%;max-width:800px;padding:40px;border-radius:25px;text-align:center;display:flex;flex-direction:column;box-shadow:0 0 22px 0 rgba(0,0,0,.15);transform:translate3d(-50%,-50%,0);top:50vh;left:50%}.ModalContent{overflow:auto}.CloseButton{cursor:pointer;align-self:flex-end;position:absolute;margin:-10px -10px 0 0}.HelpModal h2{text-align:center}.HelpModal{margin-top:50px;text-align:left}.Flex{display:flex;align-items:center}.ShareModal button{margin-left:16px}.ShareModal p{font-size:20px}.ShareModal a{font-weight:600}.ShareModal .UrlRow{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-wrap:wrap}.UrlRow .BlockButton{margin:8px}.ShareModal .LinkCopied{margin:0;padding:0;font-size:16px}.ShareModal .LinkWithIcon{display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:100%}.ShareModal .LinkWithIcon span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}.ShareModal .LinkWithIcon img{margin-left:8px;flex:0 0 auto}.MusicPlayer img{margin-left:8px}@media screen and (max-height:800px){.ADMSnufkin{display:none}}@media screen and (min-height:500px){.BottomSection .BlockButton{display:flex}.TopShare{display:none}}@media screen and (max-width:650px){.BottomSection .BlockButton{display:flex}.TopShare{display:none}}.App .TextContent .Notes{display:none}.App .Leafs{right:-80px}.App .TextContent{display:none;flex-direction:column;justify-content:flex-end}.SongMachine{justify-content:center}.App .LogoWrapper{display:none}@media screen and (min-height:700px) and (min-width:1400px){.App .LogoWrapper{display:block}.SongMachine{justify-content:flex-start}.App .TextContent .Notes{display:flex}.App .Leafs{right:0;top:-100px}.App .TextContent{display:flex}.ScrollArrowHelper{display:none}}@media screen and (max-width:1300px){.StartScreen .Sun{display:none}}@media screen and (max-width:1200px){.Leafs,.MoominHouse,.Tree{opacity:.2}.Tree{left:-120px}.MoominHouse{right:-60px}}@media screen and (max-width:1000px){.Story{flex-direction:column}.Story>*{margin:10px;max-width:100%}}@media screen and (max-width:840px){.App{padding:16px}}@media screen and (max-width:680px){.TempoValue{display:none}.Controls>*{margin:2px}.PlaybackButton{margin-right:0}.Modal{width:100%;max-width:calc(100% - 20px);max-height:calc(100svh - 120px)}.MainContent{width:80%}.MoominHeader,.MoominHouse{display:none}h1{font-size:32px}h2{font-size:24px}body,p{font-size:20px}.ShareModal p{font-size:18px}.Quote h2{font-size:26px;line-height:37px}}.Controls .ControlsLogoWrapper{display:none;margin:4px 0}@media screen and (max-width:480px){.Controls{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;height:auto;margin:10px;padding:0 20px}.Controls .ControlsLogoWrapper{display:block}.Controls>:first-child{order:7}.Controls>:nth-child(2){order:6}.Controls>:nth-child(3){order:4;margin-top:10px}.Controls>:nth-child(4){order:5}.TempoValue{display:inline}.App{padding:8px}}@keyframes blink{0%{opacity:0;transform:translateX(-25px)}50%{opacity:1}to{opacity:0;transform:translateX(-10px)}}@keyframes sun-rotate{0%{transform:rotate(0deg)}50%{transform:rotate(-45deg)}to{transform:rotate(0deg)}}@keyframes note-pop{0%{opacity:0;transform:translateZ(0)}40%{opacity:1}80%{transform:translate3d(7px,-20px,0);opacity:0}to{opacity:0}}@keyframes shake{0%{transform:rotate(0deg)}5%{transform:rotate(5deg)}10%{transform:rotate(-5deg)}15%{transform:rotate(5deg)}20%{transform:rotate(-5deg)}25%{transform:rotate(0deg)}to{transform:rotate(0deg)}}.note-enter{opacity:0}.Col.added .Block:not(.note-enter-done),.note-enter-active,.note-enter-done{opacity:1}@font-face{font-family:mikado;src:url(/_next/static/media/1448c25c83e3986e-s.p.woff2) format("woff2");font-display:swap;font-weight:600;font-style:normal}@font-face{font-family:mikado;src:url(/_next/static/media/010ba1eb58926bb9-s.p.woff2) format("woff2");font-display:swap;font-weight:900;font-style:normal}@font-face{font-family:mikado;src:url(/_next/static/media/7387eff0e17c58b8-s.p.woff2) format("woff2");font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:mikado Fallback;src:local("Arial");ascent-override:95.42%;descent-override:31.00%;line-gap-override:0.00%;size-adjust:99.23%}.__className_7fd586{font-family:mikado,mikado Fallback}@font-face{font-family:moomin;src:url(/_next/static/media/649731298dc51d97-s.p.woff2) format("woff2");font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:moomin Fallback;src:local("Arial");ascent-override:112.53%;descent-override:36.07%;line-gap-override:0.00%;size-adjust:114.12%}.__className_c2cd4d{font-family:moomin,moomin Fallback;font-weight:400;font-style:normal}