.phonogram-chart{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin:20px auto 50px;gap:1rem;width:clamp(300px,70%,800px);padding:1rem;position:relative}.phonogram-chart>.phono-card{height:20rem;display:flex;flex-direction:column;box-shadow:.2em .2em .5em #0006;border-radius:.25rem;box-sizing:border-box;padding:.5rem;position:relative;overflow:hidden}.phonogram-chart .phono-card>.phonogram{flex:1 auto;display:flex;justify-content:center;align-items:center;background-color:#fff;font-size:clamp(4rem,3vw,6rem);color:#000}.phonogram-chart>.phono-card .examplewords{overflow-wrap:break-word;text-align:center;display:none;position:absolute;bottom:.5rem;margin:0 auto;width:92%;line-height:2rem}.phonogram-chart>.phono-card .soundmarkings{display:none;position:absolute;top:.5rem;width:92%}.phonogram-chart .phono-card [sound-type=V]{color:#be3a38}.phonogram-chart .phono-card [sound-type=C]{color:#034ea2}.phonogram-chart .phono-card [sound-type=r-controlled]{color:#b21d7b}.phonogram-chart .phono-card [sound-type=VC]{color:#000}.filter-bar{background-color:#fff;column-gap:.25rem;display:grid;grid-template-columns:1fr repeat(5,auto) 1fr;grid-template-rows:auto auto;margin-bottom:2rem;padding:1rem;top:0;z-index:2}.filter-bar button.toggle{align-items:center;background-color:#fff;border:none;box-shadow:none;display:flex;gap:.25rem;grid-column-start:2;margin:0 auto;padding:0}.toggle svg{height:1.2em;width:1.2em;padding-right:.25em}.toggle .rail{flex:1;height:1em;border-radius:.5em;background-color:#ccc;box-shadow:inset .1em .1em .5em #00000080;width:40px}.toggle .rail-button{display:block;height:1em;width:50%;border-radius:.5em;background-color:#398640;transition:transform .2s ease-in-out}.toggle.video .rail-button{transform:translate(100%)}.toggle .video-words,.toggle .audio-words{color:#000;font-weight:400;display:flex}.toggle .video-words{opacity:50%}.toggle .audio-words,.toggle.video .video-words{opacity:100%}.toggle.video .audio-words{opacity:50%}.filter-bar button{width:auto;margin:0 .25em;font-size:100%;color:#000;border:0 solid transparent;font-weight:700;text-align:left;padding:.5em .5em .5em 1.75em;position:relative;border-top:1px solid #ffffff;border-right:1px solid transparent;border-bottom:1px solid transparent;border-left:1px solid #ffffff;border-radius:4px;box-shadow:-2px -2px 4px #fff,2px 2px 4px #0003;background-color:#fafafa}.filter-bar button.on{background-color:#fafafa;box-shadow:inset -2px -2px 4px #fff,inset 2px 2px 4px #0003;border-top:1px solid transparent;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid transparent}.filter-bar .pro-btn{grid-column-start:3;padding-left:.5em}.filter-bar .con-btn{grid-column-start:4;color:#034ea2}.filter-bar .con-btn:after{position:absolute;content:"";display:block;width:1em;height:1em;top:50%;left:.5em;transform:translateY(-50%);background-color:#fff;box-sizing:border-box;border:1px solid #034EA2}.filter-bar .con-btn.on:after{background-color:#034ea2}.filter-bar .vow-btn{grid-column-start:5;color:#be3a38}.filter-bar .vow-btn:after{position:absolute;content:"";display:block;width:1em;height:1em;top:50%;left:.5em;transform:translateY(-50%);background-color:#fff;box-sizing:border-box;border:1px solid #000;border-radius:50%;border:1px solid #be3a38}.filter-bar .vow-btn.on:after{background-color:#be3a38}.filter-bar .rcon-btn{grid-column-start:6;color:#b21d7b;padding-left:3.5rem}.filter-bar .rcon-btn:after{position:absolute;content:"";display:block;width:1em;height:1em;top:50%;left:.75em;transform:translateY(-50%);background-color:#fff;box-sizing:border-box;border:1px solid #000;border:1px solid #b21d7b;transform:translate(-.1em,-50%) rotate(45deg)}.filter-bar .rcon-btn.on:after{background-color:#b21d7b}.phonogram-chart.pro-btn .phono-card .soundmarkings,.phonogram-chart.pro-btn .phono-card .examplewords{display:block}.phonogram-chart.con-btn .phono-card[sound-type=C] .phonogram{color:#034ea2}.phonogram-chart.vow-btn .phono-card[sound-type=V] .phonogram{color:#be3a38}.phonogram-chart.rcon-btn .phono-card[sound-type=r-controlled] .phonogram{color:#b21d7b}.phonogram-chart.con-btn .phono-card[sound-type=C]:after{position:absolute;content:"";display:block;width:1em;height:1em;top:1rem;right:.5rem;transform:translateY(-50%);background-color:#fff;box-sizing:border-box;border:1px solid #034EA2;background-color:#034ea2;border-radius:0;z-index:1}.phonogram-chart.vow-btn .phono-card[sound-type=V]:after{position:absolute;content:"";display:block;width:1em;height:1em;top:1rem;right:.5rem;transform:translateY(-50%);background-color:#fff;box-sizing:border-box;border:1px solid #000;border-radius:50%;border:1px solid #be3a38;background-color:#be3a38;z-index:1}.phonogram-chart.rcon-btn .phono-card[sound-type=r-controlled]:after{position:absolute;content:"";display:block;width:1em;height:1em;top:1.5rem;right:.75rem;transform:translateY(-50%);background-color:#fff;box-sizing:border-box;border:1px solid #000;border:1px solid #b21d7b;transform:translate(-.1em,-50%) rotate(45deg);background-color:#b21d7b;border-radius:0;z-index:1}.phono-card.loading,.phono-card.playing{box-shadow:inset .2em .2em .5em #0006}.phono-card.loading:before{content:"";position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#399953;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#fff,#fff),linear-gradient(#dcaf3c,#dcaf3c),linear-gradient(#fff,#fff),linear-gradient(#dcaf3c,#dcaf3c);animation:rotate 4s linear infinite}.phono-card.loading:after{content:"";position:absolute;z-index:-1;top:6px;width:calc(100% - 14px);height:calc(100% - 12px);background:#fff;border-radius:5px}@keyframes rotate{to{transform:rotate(1turn)}}dialog.video-player{overflow:visible;width:90%;max-width:800px;min-height:200px;position:relative;display:none;flex-direction:column;background-color:#fff;box-sizing:border-box;padding:1em;border-radius:24px;border:none;box-shadow:.2em .2em .5em #0006}dialog.video-player[open]{display:flex;position:fixed}dialog.video-player form{position:absolute;right:0;top:-.25rem}.video-player form button{position:absolute;top:0;right:0;width:48px;height:48px;margin:0;padding:0;box-sizing:border-box;font-size:16px;background-color:#999;color:#fff;border:1px solid #ffffff;border-radius:50%;box-shadow:0 0 8px #00000080;transform:translate(.5em,-.5em);z-index:1}@media screen and (max-width:767px){.filter-bar{display:flex;flex-wrap:wrap;row-gap:1rem;justify-content:center}.filter-bar button{width:45%}.filter-bar .toggle{width:60%!important;margin:0 auto;justify-content:center}.filter-bar .toggle .rail{max-width:40px}}
/*# sourceMappingURL=/cdn/shop/t/23/compiled_assets/styles.css.map?subset=AAAAAAAAgA */