@font-face{font-family:Source Code Pro Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-code-pro-cyrillic-ext-wght-normal-BODHZjil.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Source Code Pro Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-code-pro-cyrillic-wght-normal-aqTvhEeI.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Source Code Pro Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(data:font/woff2;base64,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) format("woff2-variations");unicode-range:U+1F00-1FFF}@font-face{font-family:Source Code Pro Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-code-pro-greek-wght-normal-BvT6WsG1.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Source Code Pro Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-code-pro-vietnamese-wght-normal-B6x53GZG.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Source Code Pro Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-code-pro-latin-ext-wght-normal-0UZNSh4u.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Source Code Pro Variable;font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-code-pro-latin-wght-normal-BP8Zz55n.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Dosis Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/dosis-vietnamese-wght-normal-DD5t4dbF.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Dosis Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/dosis-latin-ext-wght-normal-CWB30aBi.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Dosis Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(/assets/dosis-latin-wght-normal-CvOn4Vwj.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body,body:fullscreen::backdrop{margin:0;background-color:var(--background);transition-timing-function:cubic-bezier(.19,1,.22,1);transition:background-color .2s cubic-bezier(.19,1,.22,1)}button,body,input{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Dosis Variable,Arial,Helvetica,sans-serif;line-height:1em;font-weight:600;font-size:15px;letter-spacing:1.2px}.polytronome{display:grid;grid-template-columns:1fr 1fr 1fr;color:var(--accent);-webkit-user-select:none;user-select:none;overflow:hidden;max-height:100vh;opacity:0;transition:opacity 1s cubic-bezier(.19,1,.22,1),color 1s cubic-bezier(.19,1,.22,1)}.polytronome .header{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%}.polytronome .header .logo{display:flex;align-items:center;height:4em}.polytronome .header .logo svg{transform:scale(.8);margin-right:10px}.polytronome .header .logo h1{margin:0;font-size:2.2em;line-height:1em;color:var(--clicks-on)}.polytronome .header .logo p{font-size:1em;margin:0}.polytronome .header .tutorial{position:absolute;display:flex;align-items:center;justify-content:space-between;font-weight:600;height:8em;padding:0 2em;border-radius:20px;min-width:20em;background-color:var(--menu);z-index:3}.polytronome .header .tutorial .dialog{font-size:1.2em;line-height:1.2em;margin-right:2em;max-width:16em}.polytronome .header .tutorial .interactions{display:flex;flex-direction:column}.polytronome .clicks{width:100%;height:10em;display:flex;align-items:center;transition:opacity .12s}.polytronome .clicks .segment,.polytronome .clicks .layers{width:100%}.polytronome .clicks .click-row{display:flex;width:100%;max-height:2em;overflow:hidden;transition:max-height .8s cubic-bezier(.19,1,.22,1)}.polytronome .clicks .click-row.off{max-height:0px}.polytronome .clicks .click-row .click{margin:.3em;width:100%;height:1.2em;border-radius:.6em;background-color:var(--clicks-off);will-change:transform;transition:transform .15s cubic-bezier(.19,1,.22,1),margin .2s cubic-bezier(.19,1,.22,1),background-color .15s cubic-bezier(.19,1,.22,1),width .3s;transform:translate(0) scaleY(.6)}.polytronome .clicks .click-row .click.on{background-color:var(--clicks-on);transform:scale(1)}.polytronome .clicks .click-row .click.off{margin:.3em 0;width:0}.polytronome .clicks .segment .click-row{max-height:7em}.polytronome .clicks .segment .click-row .click{transform:scale(1);height:6em}.polytronome .clicks .block{width:80%;margin:auto}.polytronome .clicks .block .click-row{max-height:7em}.polytronome .clicks .block .click-row .click{transform:scale(1);height:6em;transition:none}.polytronome .layers-table{display:flex;justify-content:center;width:100%;margin:2em 0}.polytronome .layers-table .ls-row{display:flex;flex-direction:column;align-items:center;background-color:var(--layers);border:2px solid transparent;justify-content:space-evenly;border-radius:20px;padding:1em;margin:1em;transition:opacity 1s cubic-bezier(.19,1,.22,1),filter 1s cubic-bezier(.19,1,.22,1),background-color 1s cubic-bezier(.19,1,.22,1)}.polytronome .layers-table .ls-row button{margin:.2em;padding:.2em 1em;text-align:left;background-color:transparent}.polytronome .layers-table .ls-row button:hover{border-color:transparent;background-color:var(--buttons)}.polytronome .layers-table .ls-row button:active{border-color:transparent;background-color:var(--dim)}.polytronome .layers-table .ls-row>div{margin:.6em}.polytronome .layers-table .ls-row.selected{border:2px solid var(--accent)}.polytronome .layers-table .ls-row.off{opacity:.4}.polytronome .layers-table .ls-row.off .ls-note,.polytronome .layers-table .ls-row.off .ls-type,.polytronome .layers-table .ls-row.off .ls-effects,.polytronome .layers-table .ls-row.off .ls-volume{opacity:0;cursor:default;pointer-events:none;transition:opacity .4s cubic-bezier(.19,1,.22,1)}.polytronome .layers-table .notes-wrap{display:flex;align-items:center;position:relative}.polytronome .layers-table .notes-wrap pre.octave{position:absolute;margin:0;right:-.5em;bottom:-.3em;padding:.2em .5em;border-radius:.5em;background-color:transparent;transition:background-color .2s cubic-bezier(.19,1,.22,1)}.polytronome .layers-table .notes-wrap:hover pre.octave{background-color:var(--layers)}.polytronome .layers-table .notes-wrap .immovable_wheel{text-align:left}.polytronome .layers-table .ls-type{text-align:center;background-color:transparent;border-radius:1em}.polytronome .layers-table .ls-type svg{width:4em;height:4em;cursor:pointer}.polytronome .layers-table .ls-type svg path{stroke:var(--accent);transition:stroke 1s cubic-bezier(.19,1,.22,1)}.polytronome .layers-table .ls-effects{text-align:center}.polytronome .layers-table .ls-effects svg{width:1em;margin-right:.8em}.polytronome .layers-table .ls-effects button{min-width:7em;margin:.2em;padding:.2em 1em}.polytronome .layers-table .ls-volume{display:flex;align-items:center}.polytronome .layers-table .ls-volume .mute{width:1em;padding-right:.8em;cursor:pointer}.polytronome .layers-table .ls-volume .mute svg{width:1.2em;height:1.2em}.polytronome .layers-table .ls-volume .range-wrap{display:inline-block;width:5em;height:.8em;border-radius:5px;overflow:hidden;-webkit-user-select:none;user-select:none;cursor:pointer;background-color:var(--buttons);transition:opacity .3s cubic-bezier(.19,1,.22,1),background-color 1s cubic-bezier(.19,1,.22,1)}.polytronome .layers-table .ls-volume .range-wrap.muted{opacity:.1;filter:grayscale(1)}.polytronome .layers-table .ls-volume .range-wrap .inner-range{height:.8em;background-color:var(--accent);transition:background-color 1s cubic-bezier(.19,1,.22,1)}.polytronome .tempo{display:flex;align-items:center;justify-content:flex-end;z-index:2}.polytronome .tempo .immovable_wheel{margin-right:.5em}.polytronome .tempo .tap{width:120px;margin:0%}.polytronome .tempo .tempo-buttons{display:flex}.polytronome .menu{padding-top:10vh}.polytronome .menu>button{margin-left:2em;margin-bottom:2em}.polytronome .menu>button svg{margin-right:1em;vertical-align:bottom}.polytronome aside{display:flex;flex-direction:column;overflow:hidden;margin:0 6em 0 2em;width:25em;transition:width .6s cubic-bezier(.19,1,.22,1),opacity .6s cubic-bezier(.19,1,.22,1)}.polytronome aside hr{opacity:0;height:2em}.polytronome aside a{transition:opacity .6s cubic-bezier(.19,1,.22,1)}.polytronome aside a,.polytronome aside button{display:flex;align-items:center;justify-content:space-between;text-align:left;overflow:hidden;font-size:1.1em;padding-left:1em;padding-right:1em;text-decoration:none;background-color:transparent}.polytronome aside a .option-icon,.polytronome aside button .option-icon{width:2em;display:inline-block;text-align:center;line-height:1.8em}.polytronome aside a .option-text,.polytronome aside button .option-text{margin-left:.5em}.polytronome aside a p,.polytronome aside button p{margin:0}.polytronome aside button .optionState{border-radius:.5em;padding:.3em .6em;background-color:#0000000a}.polytronome aside button.on .optionState{background-color:var(--buttons)}.polytronome aside .theme-list{display:flex;flex-wrap:wrap;max-height:0;margin:0 2em;overflow:hidden;transition:width .3s,margin .3s,max-height .3s}.polytronome aside .theme-list span{width:auto;margin:.2em;font-size:1em;padding:.5em 1em;border-radius:15px;cursor:pointer;overflow:hidden;transition:filter .1s,border-radius .3s}.polytronome aside .theme-list span:hover{filter:brightness(.9)}.polytronome aside .theme-list.opened{max-height:7em;margin:2em}.polytronome aside.closed{width:5.2em}.polytronome aside.closed a{opacity:0;cursor:default;pointer-events:none}.polytronome aside.closed button.on{background-color:var(--buttons)}.polytronome.testBeats .menu,.polytronome.testBeats .tempo,.polytronome.testBeats .clicks,.polytronome.testBeats .bottom-buttons,.polytronome.testBeats .layers-table .ls-row>div:not(:first-child),.polytronome.explainWheel .menu,.polytronome.explainWheel .tempo,.polytronome.explainWheel .clicks,.polytronome.explainWheel .bottom-buttons,.polytronome.explainWheel .layers-table .ls-row>div:not(:first-child){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.testLaunch .start{opacity:1}.polytronome.testLaunch .menu,.polytronome.testLaunch .tempo,.polytronome.testLaunch .clicks,.polytronome.testLaunch .layers-table,.polytronome.testLaunch .bottom-buttons .randomize{opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showTempo .tempo{opacity:1}.polytronome.showTempo .menu,.polytronome.showTempo .clicks,.polytronome.showTempo .bottom-buttons,.polytronome.showTempo .layers-table{opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.clickMenu aside,.polytronome.clickMenu .tempo,.polytronome.clickMenu .clicks,.polytronome.clickMenu .bottom-buttons,.polytronome.clickMenu .layers-table{opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showBeats aside,.polytronome.showBeats .tempo,.polytronome.showBeats .logo,.polytronome.showBeats .clicks,.polytronome.showBeats .bottom-buttons,.polytronome.showBeats .layers-table .ls-row>div:not(.ls-beats),.polytronome.showBeats .layers-table .ls-row>button:not(.ls-beats){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showNotes aside,.polytronome.showNotes .tempo,.polytronome.showNotes .logo,.polytronome.showNotes .clicks,.polytronome.showNotes .bottom-buttons,.polytronome.showNotes .layers-table .ls-row>div:not(.ls-note),.polytronome.showNotes .layers-table .ls-row>button:not(.ls-note){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showWaveType aside,.polytronome.showWaveType .tempo,.polytronome.showWaveType .logo,.polytronome.showWaveType .clicks,.polytronome.showWaveType .bottom-buttons,.polytronome.showWaveType .layers-table .ls-row>div:not(.ls-type),.polytronome.showWaveType .layers-table .ls-row>button:not(.ls-type){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.beatsAgain aside,.polytronome.beatsAgain .tempo,.polytronome.beatsAgain .logo,.polytronome.beatsAgain .clicks,.polytronome.beatsAgain .bottom-buttons,.polytronome.beatsAgain .layers-table .ls-row>div:not(.ls-beats),.polytronome.beatsAgain .layers-table .ls-row>button:not(.ls-beats){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showDuration aside,.polytronome.showDuration .tempo,.polytronome.showDuration .logo,.polytronome.showDuration .clicks,.polytronome.showDuration .bottom-buttons,.polytronome.showDuration .layers-table .ls-row>div:not(.ls-effects),.polytronome.showDuration .layers-table .ls-row>button:not(.ls-effects){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showRelease aside,.polytronome.showRelease .tempo,.polytronome.showRelease .logo,.polytronome.showRelease .clicks,.polytronome.showRelease .bottom-buttons,.polytronome.showRelease .layers-table .ls-row>div:not(.ls-effects),.polytronome.showRelease .layers-table .ls-row>button:not(.ls-effects){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showVolume aside,.polytronome.showVolume .tempo,.polytronome.showVolume .logo,.polytronome.showVolume .clicks,.polytronome.showVolume .bottom-buttons,.polytronome.showVolume .layers-table .ls-row>div:not(.ls-volume),.polytronome.showVolume .layers-table .ls-row>button:not(.ls-volume){opacity:.1;filter:grayscale(1);pointer-events:none}.polytronome.showDuration .ls-effects button:last-child,.polytronome.showRelease .ls-effects button:first-child{opacity:.1;filter:grayscale(1)}.polytronome .spacer{min-width:200px}.polytronome main{display:grid;grid-template-areas:"header tempo" "clicks clicks" "layers layers" "buttons buttons";flex-direction:column;align-items:center;margin:0 auto;padding-top:10vh}.polytronome .header{grid-area:header}.polytronome .tempo{grid-area:tempo}.polytronome .clicks{grid-area:clicks}.polytronome .layers-table{grid-area:layers}.polytronome .bottom-buttons{grid-area:buttons}.polytronome a,.polytronome button{color:var(--accent);background:var(--buttons);width:auto;margin:.2em;padding:.5em 2em;border:2px solid transparent;border-radius:2em;font-size:1em;font-weight:600;white-space:pre;cursor:pointer;transition:background-color .2s cubic-bezier(.19,1,.22,1),color .3s cubic-bezier(.19,1,.22,1),border .2s cubic-bezier(.19,1,.22,1)}.polytronome a svg,.polytronome button svg{width:1em;height:1em;vertical-align:text-bottom}.polytronome a:active,.polytronome button:active{background-color:var(--clicks-off)}.polytronome a:hover,.polytronome button:hover{border:2px solid var(--clicks-off)}.polytronome .immovable_wheel{position:relative;overflow:hidden;padding:.1em .2em .1em .8em;border-radius:.3em;transition:opacity .5s cubic-bezier(.19,1,.22,1),background-color .5s cubic-bezier(.19,1,.22,1);font-size:3em;line-height:1.2em;height:1em}.polytronome .immovable_wheel:hover{background-color:var(--buttons)}.polytronome .immovable_wheel p{margin:0;font-weight:500;font-family:Source Code Pro Variable,Arial,Helvetica,sans-serif}.polytronome .immovable_wheel .arrows{position:absolute;display:flex;flex-direction:column;justify-content:center;margin-left:-.6em;height:1em;z-index:2}.polytronome .immovable_wheel .arrows div{display:flex;width:.35em;text-align:center;cursor:pointer;opacity:.2;transition:opacity .5s cubic-bezier(.19,1,.22,1)}.polytronome .immovable_wheel .arrows div:first-child{transform:rotate(180deg)}.polytronome .immovable_wheel .arrows div:hover{opacity:.5}.polytronome .immovable_wheel .arrows div:focus,.polytronome .immovable_wheel .arrows div:active{opacity:1}.polytronome .immovable_wheel .arrows div svg path{transition:stroke 1s cubic-bezier(.19,1,.22,1)}.polytronome .immovable_wheel .wheel{cursor:grab;touch-action:none;text-align:center;margin-top:-.1em}.polytronome .bottom-buttons,.polytronome .bottom-buttons button{display:flex;justify-content:center;align-items:center}.polytronome .bottom-buttons svg{margin-right:1em}.polytronome .bottom-buttons .start{width:22em}.polytronome .keylog{position:fixed;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;bottom:2em;right:2em;text-align:right;z-index:7}.polytronome .keylog code{background-color:var(--dim);border-radius:20px;padding:2px 10px;margin-left:20px}.polytronome .keylog small{margin:5px}.polytronome.easy main{padding-top:15vh}.polytronome.easy .layers-table{flex-direction:row;margin:4em 0;width:auto}.polytronome.easy .ls-row{background-color:transparent;padding:0}.polytronome.easy .ls-row .immovable_wheel{width:1.6em}.polytronome.performance{transition:opacity 1s}.polytronome.performance *{transition:none!important}@media only screen and (min-width: 1500px){.polytronome.easy .clicks{min-width:1100px}}@media only screen and (max-width: 1600px){.polytronome .spacer,.polytronome .menu{min-width:auto}}@media only screen and (min-height: 900px) and (max-width: 1300px){.polytronome .layers-table{width:auto;flex-direction:column}.polytronome .layers-table .ls-row{flex-direction:row;margin:.5em;padding:.5em 1em}.polytronome .menu,.polytronome main{padding-top:5vh}.polytronome.easy .menu{padding-top:10vh}.polytronome.easy .layers-table .ls-row{padding:0}}@media only screen and (max-height: 900px) and (max-width: 1440px){body{font-size:13px}}@media only screen and (max-height: 750px) and (max-width: 1200px){body{font-size:12px}}@media only screen and (max-width: 1000px) and (max-height: 780px){body{font-size:11px}}@media only screen and (max-width: 500px){body{font-size:11px}.polytronome main{padding-top:5vh;width:100vw}.polytronome main .header{margin-bottom:0}.polytronome main .header .logo{width:100%;justify-content:center;transform:translate(-10px)}.polytronome main .header .logo svg{transform:scale(.6)}.polytronome main .clicks{width:90vw;margin:2em}.polytronome .bottom-buttons{flex-wrap:wrap}.polytronome .bottom-buttons .start{width:16em}.polytronome .layers-table{font-size:11px}.polytronome .layers-table .ls-row{padding:0 1.5em;margin:.5em 1em}.polytronome .layers-table .ls-row>div{margin:.5em 0}.polytronome .layers-table .ls-row .arrows{margin-left:-.5em}.polytronome .layers-table .ls-row .ls-type{padding:0 .5em}.polytronome .layers-table .ls-row .ls-type svg{width:3.2em;height:3.2em;padding:0}.polytronome .layers-table .ls-row .ls-effects{text-align:left;flex-direction:column;max-width:7em}.polytronome .layers-table .ls-row .ls-volume{flex-direction:column}.polytronome .layers-table .ls-row .ls-volume .mute{padding:0;margin-bottom:1em}.polytronome .tempo{display:flex;align-items:center;justify-content:center;margin-bottom:80px;width:100%}.polytronome .tempo .tap{margin-left:10px}.polytronome.easy .header{margin-bottom:0}.polytronome.easy .layers-table{margin:6em 0;justify-content:center}.polytronome.easy .layers-table .ls-row{margin:0;padding:0}.polytronome.easy .layers-table .ls-row .ls-beats{margin:0 .5em}.polytronome.easy .layers-table .ls-row .ls-beats .immovable_wheel{padding-left:.5em;padding-right:0}.polytronome.easy .layers-table .ls-row .ls-beats .immovable_wheel .arrows{margin-left:-.3em}}@media only screen and (max-width: 400px){.polytronome .layers-table{font-size:10px}}.polytronome.mobile{overflow-y:auto}.polytronome.mobile main{padding-top:10vh;grid-template-areas:"header" "clicks" "buttons" "layers" "tempo"}.polytronome.mobile main .ls-row{background-color:transparent}.polytronome.mobile.easy main{padding-top:10vh}.polytronome.mobile.easy main .layers-table{flex-direction:row}.polytronome.mobile.easy main .layers-table .ls-beats{margin:0}.polytronome.mobile.easy .header .tutorial{top:-2em}.polytronome.mobile .layers-table{flex-direction:column}.polytronome.mobile .layers-table .ls-row{flex-direction:row}.polytronome.mobile .header .tutorial{top:0;position:absolute;height:auto;width:50%;padding:2em;left:calc(25% - 2em);flex-direction:column;z-index:6}.polytronome.mobile .header .tutorial .dialog{max-width:90%;margin:0}.polytronome.mobile .header .tutorial .interactions{flex-direction:row}.polytronome.mobile .menu{position:fixed;top:0;left:0;margin:0;padding-top:0;font-size:13px;z-index:5}.polytronome.mobile .menu>button{position:fixed;margin:2em;padding:.6em 1.6em;z-index:6}.polytronome.mobile .menu>button svg{margin:0}.polytronome.mobile .menu aside{position:fixed;display:none;z-index:5;margin:0;top:0;left:0;padding:8vh 0}.polytronome.mobile .menu aside .theme-list.opened{max-height:10em}.polytronome.mobile .menu aside.extended{display:flex;width:calc(100vw - 4em);padding:8em 2em 0;height:100vh;background-color:var(--background);overflow-y:auto;opacity:1}