@layer global{:root{--ratio:1.5;--space--4:calc(var(--space--3) / var(--ratio));--space--3:calc(var(--space--2) / var(--ratio));--space--2:calc(var(--space--1) / var(--ratio));--space--1:calc(var(--space-0) / var(--ratio));--space-0:1rem;--space-1:calc(var(--space-0) * var(--ratio));--space-2:calc(var(--space-1) * var(--ratio));--space-3:calc(var(--space-2) * var(--ratio));--space-4:calc(var(--space-3) * var(--ratio));--space-5:calc(var(--space-4) * var(--ratio));--space-6:calc(var(--space-5) * var(--ratio));--space-page-block:var(--space-1);--space-page-inline:var(--space-1);--space-page-maw:64rem}@media screen and (width>=40rem){:root{--space-page-block:var(--space-3);--space-page-inline:var(--space-3)}}:root{--stroke-width:var(--space--3);--unit:min(8vw, 54px);@media screen and (width>600px){--stroke-width:var(--space--2)}}}@layer composition{:root{--teef-slider-width:200px}sketch-teef{align-items:center;column-gap:var(--space-3);padding-block:var(--space-page-block);padding-inline:var(--space-page-inline);row-gap:var(--space-1);display:grid;container:sketch/inline-size;@media screen and (width<900px){grid-template-rows:[top]1fr auto[bottom];grid-template-areas:"mouth""slider";& teef-slider{bottom:var(--space-page-block);margin-block:var(--space-page-block);justify-self:end;inset-inline:0}}@media screen and (width>=900px){grid-template-areas:"slider mouth";grid-template-columns:var(--teef-slider-width) 1fr var(--teef-slider-width);min-height:calc(400px + 2 * var(--space-page-block))}}}@layer utilities;@layer blocks{teef-mouth{--tooth-aspect:3;pointer-events:none;width:calc(7 * var(--unit));grid-area:mouth;margin-inline:auto;display:block;@media screen and (width<900px){grid-row:top/bottom}}teef-lips{z-index:10;border-radius:999px;display:block;position:relative;&:after{box-shadow:0 0 0 var(--stroke-width) black inset, 0 0 0 calc(.75 * var(--unit)) orangered inset, 0 0 0 calc(.75 * var(--unit) + var(--stroke-width)) black inset, 0 0 0 calc(1 * var(--unit) + var(--stroke-width)) lightpink inset, 0 0 0 calc(1 * var(--unit) + 2 * var(--stroke-width)) black inset;content:"";inset:calc(-1 * var(--unit) - var(--stroke-width));border-radius:999px;position:absolute}}teef-teeth{--_column-gap:var(--space--3);column-gap:var(--_column-gap);row-gap:calc(var(--space--2) + var(--gap-coefficient,0) * .5cqb);background-color:#000;border-radius:999px;grid-template-columns:repeat(10,1fr);display:grid;overflow:hidden;@media screen and (width>900px){--_column-gap:var(--space--2);row-gap:calc(var(--space--2) + var(--gap-coefficient,0) * .475cqb)}}teef-tooth{--radius:var(--space--1);aspect-ratio:var(--tooth-aspect) / 2;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);background-color:linen;grid-column-end:span 2;@media screen and (width>900px){--radius:var(--space-0)}&:nth-child(n+7){--tooth-aspect:6;border-radius:0;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}&:first-child,&:nth-child(6),&:nth-child(7),&:nth-child(12){aspect-ratio:initial;grid-column-end:span 1}&:first-child{border-bottom-left-radius:0}&:nth-child(6){border-bottom-right-radius:0}&:nth-child(7){border-top-left-radius:0}&:nth-child(12){border-top-right-radius:0}&[data-chipped=true]{border-bottom-left-radius:90%}&[data-gold=true]{background-color:#daa520}}teef-slider{grid-area:slider;align-self:stretch;place-items:center stretch;width:100%;display:grid;& input{--_thumb-height:calc(var(--unit) * 4/3);--_thumb-width:calc(var(--unit) * 3/4);--_track-height:var(--space-1);-webkit-appearance:none;background-color:#0000;border:none;width:100%;margin:0;display:block;@media screen and (width<900px){justify-self:center}@media screen and (width>=900px){--_thumb-height:calc(var(--unit) * 4/3);--_thumb-width:calc(var(--unit) * 1/2);--_width:min(calc(2 * var(--teef-slider-width)), 100vh);transform-origin:50%;height:20px;rotate:-90deg;translate:calc(var(--_width) / -4) 0;width:var(--_width);align-self:center}&::-webkit-slider-thumb{-webkit-appearance:none;box-shadow:0 0 0 var(--stroke-width) #000;cursor:pointer;height:var(--_thumb-height);margin-top:calc((-2 * var(--stroke-width)) - (var(--_thumb-height) - var(--_thumb-width)) / 2);margin-top:calc(var(--_track-height));margin-top:calc((var(--_thumb-height) - var(--_track-height)) / -2);width:var(--_thumb-width);background:bisque;border:none;border-radius:99px}&::-moz-range-thumb{box-shadow:0 0 0 var(--stroke-width) #000;cursor:pointer;height:var(--_thumb-height);width:var(--_thumb-width);background:bisque;border:none;border-radius:99px}&::-webkit-slider-runnable-track{box-shadow:0 0 0 var(--stroke-width) #000;cursor:pointer;height:var(--_track-height);background:#b0e0e6;border-radius:99px;width:100%}&::-moz-range-track{box-shadow:0 0 0 var(--stroke-width) #000;cursor:pointer;height:var(--_track-height);background:#b0e0e6;border-radius:99px;width:100%}}}}:root{--sketch-background-color:seagreen;--sketch-foreground-color:white;--sketch-tint-color:gold;--sketch-tint-opacity:.25;--sketch-ui-background-color:powderblue;--sketch-ui-foreground-color:black}