.orientationWarning{display:none}.stylophone button,.stylophone input,.stylophone textarea,.stylophone select{font:700 10px/16px DM Mono,monospace}.stylophone option{color:#000;font: 16px/16px DM Mono,monospace}.stylophone{margin:0 auto;padding:0;width:100%;--c-bg: #121212;--c-border: #3c3c3c;--border-width: 1px;--border-gap-factor: 2;--border-default: var(--border-width) solid var(--c-border);--border-accent: var(--border-width) solid #ffffff;--space-around-default: 8px;font:700 10px/16px DM Mono,monospace;color:#fff;background:#121212}.speaker{position:relative;height:256px;box-sizing:border-box;border:var(--border-default);padding:var(--space-around-default);margin:0 0 var(--space-around-default)}.controls{position:relative;display:grid;list-style:none;padding:0;margin:0;grid-gap:var(--border-width);padding:var(--border-width);grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);width:calc(100% - 2px)!important}.controls:before,.controls:after{content:"";position:absolute;top:100%;left:0;width:100%;height:var(--border-width);background:var(--c-border);opacity:.25}.controls:before{transform:translateY(calc(2 * var(--border-width)))}.controls:after{transform:translateY(calc(5 * var(--border-width)))}#tab{padding:0 var(--space-around-default);grid-area:1 / 1 / 1 / 9}#start{grid-area:2 / 1 / 3 / 3}#rewind{grid-area:2 / 3 / 3 / 5}#forward{grid-area:2 / 5 / 3 / 7}#end{grid-area:2 / 7 / 3 / 9}#start:disabled,#rewind:disabled,#forward:disabled,#end:disabled{color:#ffffff80}#mode-1{grid-column:1}#tabs{grid-area:4 / 1 / 7 / 9;max-height:124px;padding:0;z-index:10}@media(min-width:480px){#tabs{grid-area:1 / 9 / 4 / 25}}.tabs__lines{overflow:auto;height:100%;width:100%;padding:var(--space-around-default);margin:0;box-sizing:border-box}.tabs__line{list-style:none}.tabs__notes{padding:0;display:flex}.tabs__note{list-style:none;padding:calc(var(--space-around-default) / 2) var(--space-around-default)}.hasHover .tabs__note:hover{background:#404}.tabs__note.isCurrent{background:#f0f;z-index:1;box-shadow:0 0 0 1px #000}.stylophone .button,.stylophone .select{background:transparent;border:0;outline:0;color:var(--c-border);text-align:left;min-height:40px;box-sizing:border-box;display:flex;align-items:center;box-shadow:0 0 0 var(--border-width) var(--c-border),0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg);margin:0;padding:0;font-size:16px;justify-content:center}.stylophone .toggle{position:relative}.hasHover .toggle:hover{background:#b6b6b6;box-shadow:0 0 0 var(--border-width) var(--c-border),0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg),inset 0 0 0 calc(var(--border-width)) var(--c-bg)}.stylophone .toggle[aria-pressed=true]{background:#000;z-index:1}.hasHover .toggle[aria-pressed=true]:hover{background:#b6b6b6}.stylophone .toggleNext:before{content:"";position:absolute;top:50%;left:100%;width:calc(2px + var(--border-width));height:calc(100% - 2 * var(--border-width));background:var(--c-bg);z-index:10;transform:translate(-1px,-50%)}.stylophone .buttonSmall{font-size:10px}.stylophone .buttonSVG{pointer-events:none;height:1em;width:1em}.stylophone .title{position:relative;z-index:100;font-size:20px;line-height:40px;opacity:.5;margin:0}#attribution{position:relative;display:flex;flex-direction:column;border:var(--border-default);line-height:36px;margin-top:calc(var(--border-gap-factor) * var(--border-width));color:#fff;text-decoration:none;width:calc(100% - 2px)!important}#authorLink,#contributeLink{box-sizing:border-box;width:100%;padding:0 calc(var(--space-around-default) * 2)}.hide750{display:flex}@media(min-width:480px){#attribution{flex-direction:row}#authorLink,#contributeLink{width:50%}}#contributeLink{display:flex;align-items:center;padding-left:calc(var(--space-around-default) * 2)}#contributeLink:before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;background:transparent 0 0 no-repeat;background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E)}.stylophone .promo{position:relative;display:block;border:var(--border-default);padding:2px calc(var(--space-around-default) * 2) 0;line-height:36px;box-sizing:border-box;border-top:0;color:#fff;text-decoration:none}.stylophone .promo:active{color:#000}.stylophone .promo:before{content:"";position:absolute;top:var(--border-width);right:var(--border-width);bottom:var(--border-width);left:var(--border-width);z-index:-1}.hasHover .promo:hover:before{background:#022}.stylophone .promo:active:before{background:#0ff}.stylophone .keyboard{position:relative;width:100%}#markNext,#markNextNext{position:absolute;top:0;width:84px;transition:left linear .1s,height linear .1s;pointer-events:none}#markNext{z-index:21}#markNextNext{z-index:20}#markNext:before,#markNextNext:before{content:"";position:absolute;left:0;top:0;width:100%;height:var(--border-width)}#markNext:before{background:#f0f;transform:translateY(calc(-3 * var(--border-width)))}#markNextNext:before{background:#088;transform:translateY(calc(-6 * var(--border-width)))}#markNext:after,#markNextNext:after{content:"";position:absolute;left:50%;bottom:81px;border-radius:100%;background:#f0f}#markNext:after{width:12px;height:12px;box-shadow:0 0 0 var(--border-width) var(--c-bg),0 0 8px 8px #ff00ff20;transform:translate(-50%,100%)}#markNextNext:after{width:6px;height:6px;box-shadow:0 0 0 var(--border-width) var(--c-bg);transform:translate(-50%,calc(100% + 3px));background:#088}.stylophone .keys{display:grid;list-style:none;padding:0;margin:0;grid-template-columns:repeat(24,1fr);grid-template-rows:repeat(4,1fr);grid-gap:var(--border-width);padding:var(--border-width);width:calc(100vw - 2 * var(--border-width) - 16px);height:calc((200px - 2 * var(--border-width)) * 2 + var(--border-width) * 3);width:calc(100% - 2px)!important}@media screen and (max-width:749px){.controls{grid-template-columns:repeat(6,1fr);width:calc(100% - 1px)!important}.hide750{display:none!important}}@media(min-width:1000px){.keys{width:calc((80px - 2 * var(--border-width)) * 12 + var(--border-width) * 23);height:calc((80px - 2 * var(--border-width)) * 2 + var(--border-width) * 3)}}.stylophone .key{position:relative;box-shadow:0 0 0 var(--border-width) var(--c-border),0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg);background:var(--c-bg);padding:8px 0;color:var(--c-border);display:flex;flex-direction:column;justify-content:flex-end;align-items:center}@media(min-width:480px){.stylophone .key{padding:8px}}@media(min-width:800px){.stylophone .key{flex-direction:row;justify-content:space-between;align-items:flex-end}}.hasHover .key:not(.isActive):hover{background:#2c2c2c;box-shadow:0 0 0 var(--border-width) var(--c-border),0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg),inset 0 0 0 calc(var(--border-width)) var(--c-bg)}.stylophone .key.isActive{background:#ff007a;color:#000;_box-shadow:0 0 0 var(--border-width) var(--c-border),0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg),inset 0 0 0 calc(var(--border-width)) var(--c-bg);box-shadow:0 0 0 var(--border-width) var(--c-border),0 0 8px 8px #ff00ff20,0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg),inset 0 0 0 calc(var(--border-width)) var(--c-bg),0 0 128px #00ffff80;z-index:1}.stylophone .key:after{content:"";position:absolute;top:calc(var(--border-width) * -1);right:0;bottom:calc(var(--border-width) * -1);left:calc(var(--border-width) * -1)}.stylophone .black:after{right:calc(var(--border-width) * -1)}.stylophone .black{z-index:10;background:var(--c-bg);box-shadow:0 0 0 var(--border-width) var(--c-border),0 0 0 calc(var(--border-gap-factor) * var(--border-width)) var(--c-bg)}.stylophone .label,.stylophone .note,.stylophone .keyCode{pointer-events:none;width:100%;text-align:center}.stylophone .label,.stylophone .note{overflow:hidden}@media(min-width:800px){.stylophone .label,.stylophone .note,.stylophone .keyCode{width:auto}}.stylophone .keyCode{font-size:20px;margin-left:auto}.stylophone .note{display:none}.stylophone .key.isActive>.label{display:none}.stylophone .key.isActive>.note{display:block}.stylophone .keys,.stylophone .key{touch-action:none;-webkit-user-select:none;user-select:none}.stylophone button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/*# sourceMappingURL=/cdn/shop/t/4/assets/stylo-styles.css.map */