html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}*,*:before,*:after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}*,*:before,*:after{font-family:Manrope;-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}html,body{overscroll-behavior:none}body{background:#e1d6c5;display:flex;align-items:center;justify-self:center;overflow:hidden}.nec-logo{position:absolute;right:40px;bottom:40px;width:75px;height:74px;background:url(nec-logo-dark.svg) no-repeat;background-size:contain}#root{width:1180px;height:820px;background:#eae2d6;overflow:hidden;transform-origin:50% 50%;position:absolute;top:50%;left:50%;margin-left:-590px;margin-top:-410px;touch-action:none}.nav-button{width:240px;height:40px;border-radius:8px;border:solid 2px #000;font-weight:500;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .25s ease-in-out;position:relative}.nav-button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:6px;background-image:url(/pixel-grey.png);background-repeat:no-repeat;background-size:240px 40px;background-position:center;transition:all .25s ease-in-out;transform:scale(0);z-index:-1}.nav-button.active{color:#fff;transition-delay:.8s}.nav-button.active:after{transition-delay:.8s;transform:scale(1)}.nav{position:absolute;top:44px;left:0;width:100%;display:flex;gap:44px;align-items:center;justify-content:center;z-index:10}.screen-switcher{width:100%;height:100%;overflow:hidden;position:relative}.screen-switcher .screen{width:100%;height:100%;position:absolute;left:0;top:0;pointer-events:none}.screen-switcher .screen.active{pointer-events:all}.track-title{background-color:#3d4d60;border:solid 2px #000;border-radius:8px;height:37.5px;padding:0 11px;color:#fff;text-transform:uppercase;gap:22px;display:inline-flex;justify-content:center;align-items:center;font-size:15px;font-weight:700;cursor:pointer}.track-title img{display:block;width:24px;height:24px;transform-origin:50% 50%;transition:transform .05s ease-in-out}.track-title:active img,.track-title.open img{transform:rotate(90deg)}.view{position:absolute;inset:0;overflow:hidden}.view main{display:flex;flex-direction:column;align-items:center;padding-top:105px}.view .nec-logo{position:absolute;right:40px;bottom:40px;width:75px;height:74px;background:url(nec-logo-dark.svg) no-repeat;background-size:contain}.avatar-message{display:block;position:relative;width:100%;pointer-events:none}.avatar-message canvas{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;pointer-events:none}.avatar-message p{position:relative;z-index:2;font-size:14px;line-height:25px;padding:40px;color:#fff}.avatar-message img{display:block;position:absolute;left:0;top:0;z-index:3}.avatar-message.puzzle{height:186px}.avatar-message.view{height:182px}.avatar-message.sandbox{height:186px}.round-button{display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;pointer-events:all}.round-button .pb-button{position:relative;display:block}.round-button .pb-ring{pointer-events:none;position:absolute;left:10px;top:10px}.round-button .pb-inner{border-radius:50%;transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;will-change:transform,background-color,box-shadow}.round-button .pb-icon{display:block;pointer-events:none;-webkit-user-select:none;user-select:none}.round-button .pb-label{margin-top:-12px;font-size:12px;line-height:1;color:#000}.round-button:focus-visible .pb-button{outline:2px solid #000;outline-offset:3px;border-radius:9999px}@media (prefers-reduced-motion: reduce){.play-button .pb-inner{transition:none}}.puzzle-mode{pointer-events:none}.puzzle-mode .play-button{margin-top:20px;pointer-events:all;margin-bottom:26px}.puzzle-mode footer{position:absolute;left:0;bottom:0;right:0;pointer-events:none}.puzzle-mode .target{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:20px;pointer-events:none}.puzzle-mode .target .tile-mat{width:787.5px;height:134px;background:url(/tile-mat.svg) no-repeat;background-size:787.5px 134px}.puzzle-mode .target .round-button{position:absolute;top:0;left:86px;pointer-events:all;margin-top:0}.sandbox-mode{pointer-events:none}.sandbox-mode .play-controls{display:flex;align-items:center;gap:12px;margin-top:10px;height:134px;justify-content:center}.sandbox-mode .play-controls .play-button{pointer-events:all}.sandbox-mode .play-controls .target{height:100%;position:relative;pointer-events:none;display:flex;align-items:center;justify-content:center}.sandbox-mode .play-controls .target .tile-mat{width:787.5px;height:134px;background:url(/tile-mat.svg) no-repeat center center;background-size:contain}.sandbox-mode .play-controls .reset-button{background:none;border:none;cursor:pointer;pointer-events:all}.sandbox-mode .play-controls .reset-button .label{text-align:center;font-size:9px;margin-top:3px}.sandbox-mode .tools{display:flex;justify-content:center;gap:24px;margin:12px 0;pointer-events:all}.sandbox-mode .tile-bank{width:1019px;height:172.5px;background:url(/tile-bank.svg) no-repeat;background-size:1019px 172.5px;margin:40px auto 0}.sandbox-mode footer{position:absolute;left:0;bottom:0;right:0;pointer-events:none}.sandbox-mode .info{width:264.5px;height:151px;background-color:#a2aeb9;position:absolute;left:80px;bottom:33px}.view-mode{pointer-events:none;padding-top:104px}.view-mode .play-button{pointer-events:all;position:absolute;left:40px;top:410px}.view-mode footer{position:absolute;left:250px;right:0;top:240px;pointer-events:none}.view-mode .target{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:280px;pointer-events:none}.view-mode .target .tile-mat{width:787.5px;height:134px;background:url(/tile-mat.svg) no-repeat;background-size:787.5px 134px}.view-mode .info-block{position:absolute;bottom:53px;left:50%;transform:translate(-50%);width:90%;max-width:600px;background:#ab9c85;border-radius:12px;padding:20px 24px;pointer-events:none}.view-mode .info-block h3{margin:0 0 12px;font-size:16px;font-weight:600;color:#fff}.view-mode .info-block p{margin:0;font-size:14px;line-height:1.5;color:#ffffffe6}.tile-canvas{background-color:rgb [.918,.886,.839];position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;image-rendering:optimizeQuality}.tile-listener{position:absolute;inset:0}.menu{position:absolute;inset:0;background:#0003;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease-out,backdrop-filter .3s ease-out;pointer-events:none;z-index:10}.menu.visible{opacity:1;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);pointer-events:all}.menu .items{display:flex;flex-direction:row;gap:24px}.menu a{width:242px;height:93px;border-radius:15px;border:2px solid #000;background:#fff1dd;box-shadow:0 4px 13px -34px #00000040;display:flex;align-items:center;justify-content:center;color:#b32821;text-align:center;font-size:16px;line-height:120%;font-weight:700;text-transform:uppercase;transform-origin:center;text-wrap:balance;padding:16px}.menu a .small{font-size:14px}.menu .close{position:absolute;top:40px;right:80px;width:55px;height:55px;background:url(/close.svg) no-repeat;background-size:contain;cursor:pointer}.menu .nec-logo{background-image:url(/nec-logo-light.svg)}.tool-button{background:none;border:none;display:inline-flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s}.tool-button.is-active .icon *{fill:#fff!important;stroke:transparent!important}.tool-button.is-active .icon .circle{stroke:#3d4d60!important;fill:#3d4d60!important}.tool-button.is-active .icon g.delete *{stroke:#fff!important;fill:transparent!important}.tool-button .icon{width:55px;height:55px;transition:filter .2s;margin-bottom:4px}.tool-button .icon path{transition:stroke .2s,fill .2s}.tool-button .label{font-size:10px;letter-spacing:1px;line-height:1;-webkit-user-select:none;user-select:none;font-weight:500}.tag{background:#f5f5f5;border:solid 1px #A2AEB9;border-radius:4px;height:22px;padding:0 14px;color:#000;font-size:13px;line-height:13px;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase}.tag.build-area{margin-left:250px;margin-top:18px}.tag.tools{position:absolute;left:-84px;top:14px}.tag.bank{position:absolute;left:80px;top:0}.info-block{border-radius:8px;padding:10px 16px}.info-block h3{font-size:14px;line-height:25px;font-weight:700}.info-block p{font-size:12.5px;line-height:20px;font-weight:500}.harmony-mode{--harmony-offset: 44px;display:flex;flex-direction:column;align-items:center;padding-top:67px!important}.harmony-mode .title,.harmony-mode .player{transform:translateY(var(--harmony-offset))}.harmony-mode .player{width:100%;gap:16px;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding-right:69px;margin-top:24px}.harmony-mode .controls{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:30px;margin-top:-16px;margin-left:16px}.harmony-mode .score{--left-rail: 140px;--scroll-x: 0px;flex:1;width:100%;height:256px;border-radius:18px;border:solid 3.5px #A2AEB9;background:#fff;position:relative;overflow:hidden;white-space:nowrap}.harmony-mode .score canvas{width:100%;height:100%}.harmony-mode .score .notes{position:absolute;inset:0 16px;z-index:0}.harmony-mode .score .notes .inner{position:absolute;left:0;top:0;transform:translate(calc(-1 * var(--scroll-x)));will-change:transform}.harmony-mode .score .notes .inner svg .vf-clef,.harmony-mode .score .notes .inner svg .vf-timesig,.harmony-mode .score .notes .inner svg .vf-time-signature,.harmony-mode .score .notes .inner svg .vf-keysignature,.harmony-mode .score .notes .inner svg .vf-staveconnector{opacity:0}.harmony-mode .score .rail{position:absolute;left:16px;top:0;bottom:0;display:flex;flex-direction:row;align-items:stretch;pointer-events:none;z-index:2}.harmony-mode .score .rail .rail-svg{width:var(--left-rail);overflow:hidden}.harmony-mode .score .rail .rail-fade{width:32px;background:linear-gradient(to right,#eee,#eee0)}.harmony-mode .legend{position:absolute;left:72px;bottom:66px}.harmony-mode .legend h3{color:#484646;font-weight:600;font-size:20px;line-height:20px;margin-bottom:24px}.harmony-mode .legend img{width:173px;height:242px}.harmony-mode .avatar-message{position:absolute;right:10px;bottom:80px;height:210px}.harmony-mode .avatar-message img{top:24px}.tonality-mode{display:flex;flex-direction:column;height:100%}.tonality-mode .info{display:grid;grid-template-columns:164px auto 196px;margin:0 24px}.tonality-mode .info .play-button{margin-top:-70px}.tonality-mode p{margin-right:64px;font-size:13px;font-weight:600}.tonality-mode .legend{background-image:url(/tonality-legend.png);background-size:cover;width:196.5px;height:70.5px}.tonality-mode .editor{width:100%;flex:1;padding:16px}.tonality-mode .editor>div{background:#fff8ed;width:100%;height:100%;position:relative}.tonality-mode .editor canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10;pointer-events:none}.tonality-mode .editor .tonality-easter-eggs{position:absolute;inset:0;z-index:12;pointer-events:none}.tonality-mode .editor .tonality-egg{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;--egg-size: 25px;--egg-ring-vb: 16;--egg-gap: 4px;--egg-color: #ED3D31}.tonality-mode .editor .tonality-egg-button{width:var(--egg-size);height:var(--egg-size);border-radius:50%;border:none;padding:0;background:#fff;position:relative;display:grid;place-items:center;cursor:pointer}.tonality-mode .editor .tonality-egg-button .egg-ring{position:absolute;inset:0}.tonality-mode .editor .tonality-egg-button .egg-ring-bg,.tonality-mode .editor .tonality-egg-button .egg-ring-progress{fill:none;stroke:var(--egg-color);stroke-width:var(--egg-ring-vb);transform:rotate(-90deg);transform-origin:50% 50%}.tonality-mode .editor .tonality-egg-button .egg-ring-bg{opacity:.35}.tonality-mode .editor .tonality-egg-button .egg-ring-progress{opacity:1;transition:stroke-dashoffset .2s ease-out;stroke-linecap:round}.tonality-mode .editor .tonality-egg-button .egg-icon{width:18px;height:18px;fill:var(--egg-color);margin-left:2px}.tonality-mode .editor .tonality-egg-popup{position:absolute;left:50%;bottom:calc(100% + var(--egg-gap));transform:translate(-50%,-6px);opacity:0;transition:opacity .2s ease,transform .2s ease;display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none}.tonality-mode .editor .tonality-egg.active .tonality-egg-popup{transform:translate(-50%);opacity:1}.tonality-mode .editor .tonality-egg .egg-performer,.tonality-mode .editor .tonality-egg .egg-title{font-size:12px;font-weight:600;color:#554b45;background:transparent;padding:0;border-radius:0;box-shadow:none;white-space:nowrap;text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,0 0 2px rgba(255,255,255,.9);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}.tonality-mode .editor .tonality-egg.active .egg-performer{opacity:1;transform:translateY(0);transition-delay:0s}.tonality-mode .editor .tonality-egg.active .egg-title{opacity:1;transform:translateY(-2px);transition-delay:.06s}.tonality-mode .editor .tonality-egg .egg-title{font-weight:700}.tonality-mode .editor .tonality-egg .egg-performer{color:#625952;transform:translateY(10px)}.tonality-mode .groups{width:100%;height:100%;display:flex;flex-direction:row;gap:102px;justify-content:center;align-items:center}.tonality-mode .selector{width:100px;height:550px;background-color:#eae2d6;border-radius:11px;display:flex;flex-direction:column;align-items:center}.tonality-mode .selector .labels{display:flex;flex-direction:row;gap:4.5px;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#554b45}.tonality-mode .selector .labels span{display:block;background-color:#fff8ed;padding:1px 4px;border-radius:2.5px;margin-top:6.5px}.tonality-mode .selector .loop{width:47.5px;height:482px;border-radius:12.35px;margin-top:21px;border:solid 7px #fff;position:relative}.tonality-mode .selector .notes{position:absolute;inset:0;z-index:11}.tonality-mode .selector .notes>div{position:absolute;top:0;left:0;width:100%;height:100%}.tonality-mode .selector .notes>div.minor{left:40.5px;top:-18px}.tonality-mode .selector .notes .note{--dist: 1;--color: #ED3D31;display:flex;flex-direction:column;place-items:center;justify-content:center;background-color:var(--color);width:25px;height:25px;border-radius:50%;font-size:15px;font-weight:500;color:#fff;position:relative;left:-50%;position:absolute;top:calc(-14px + (100% - 25px + 28px) * var(--dist));transform:scale(0);opacity:0;transition:all .3s ease-in-out}.tonality-mode .selector .notes .note.visible{transform:scale(1);opacity:1}.tonality-mode .selector .notes .note.active{background:#fff;color:var(--color);box-shadow:0 0 0 4px var(--color)}.tonality-mode .selector .notes .minor .note>span{display:inline-block;transform:translateY(calc((1cap - 1ex)*-.375))}.tonality-mode .flat{display:inline-block;letter-spacing:-2px;font-size:80%}.form-mode .sidebar{width:200px;height:664px;background-color:#16332f;display:flex;flex-direction:column;gap:22px;font-size:13px;color:#fff;padding:48px 20px;border-radius:5px;margin-left:37px;margin-top:12px}.form-mode .sidebar h3{font-size:13px;font-weight:700;margin-bottom:14px}.form-mode .sidebar .input{display:flex;justify-content:space-between;margin-bottom:6px}.form-mode .sidebar .radio{--color: #A2AEB9;width:10px;height:10px;border:solid 1px var(--color);border-radius:50%;display:flex;align-items:center;justify-content:center}.form-mode .sidebar .radio:after{content:"";width:5px;height:5px;border-radius:50%;background-color:var(--color);transform-origin:50% 50%;transform:scale(0);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.form-mode .sidebar .radio.on{--color: #fff}.form-mode .sidebar .radio.on:after{transform:scale(1)}.form-mode .sidebar .slider{--color: #A2AEB9;--on-color: #3D4D60;width:30px;height:15px;background:#fff;border:solid 1.5px #000;border-radius:15px;position:relative;transition:all .2s ease-in-out;background:#ffffff1a}.form-mode .sidebar .slider:after{content:"";position:absolute;left:1.25px;top:1.25px;width:10px;height:10px;background-color:var(--color);border-radius:50%;transition:all .2s ease-in-out}.form-mode .sidebar .slider.on{background:#fff}.form-mode .sidebar .slider.on:after{background-color:var(--on-color);transform:translate(15px)}.form-mode .form-graph{position:absolute;left:237px;top:117px}.form-mode .copy{color:#16332f;font-family:Manrope;font-size:13px;font-style:normal;font-weight:600;line-height:normal;width:642px}.splitting .word,.splitting .char{display:inline-block}.splitting .char{position:relative}.splitting .char:before,.splitting .char:after{content:attr(data-char);position:absolute;top:0;left:0;visibility:hidden;transition:inherit;-webkit-user-select:none;user-select:none}.splitting{--word-center: calc((var(--word-total) - 1) / 2);--char-center: calc((var(--char-total) - 1) / 2);--line-center: calc((var(--line-total) - 1) / 2)}.splitting .word{--word-percent: calc(var(--word-index) / var(--word-total));--line-percent: calc(var(--line-index) / var(--line-total))}.splitting .char{--char-percent: calc(var(--char-index) / var(--char-total));--char-offset: calc(var(--char-index) - var(--char-center));--distance: calc( (var(--char-offset) * var(--char-offset)) / var(--char-center) );--distance-sine: calc(var(--char-offset) / var(--char-center));--distance-percent: calc((var(--distance) / var(--char-center)))}.splitting.cells img{width:100%;display:block}@supports (display: grid){.splitting.cells{position:relative;overflow:hidden;background-size:cover;visibility:hidden}.splitting .cell-grid{background:inherit;position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template:repeat(var(--row-total),1fr) / repeat(var(--col-total),1fr)}.splitting .cell{background:inherit;position:relative;overflow:hidden}.splitting .cell-inner{background:inherit;position:absolute;visibility:visible;width:calc(100% * var(--col-total));height:calc(100% * var(--row-total));left:calc(-100% * var(--col-index));top:calc(-100% * var(--row-index))}.splitting .cell{--center-x: calc((var(--col-total) - 1) / 2);--center-y: calc((var(--row-total) - 1) / 2);--offset-x: calc(var(--col-index) - var(--center-x));--offset-y: calc(var(--row-index) - var(--center-y));--distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );--distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) )}}