.box--two-faced{--lid:var(--yellow);--lid-ink:var(--ink)}.tf{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:100%;max-width:560px;min-width:0}.tf-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding-right:120px}.tf-dots{width:calc(var(--n) * 30px + 7px);height:auto}.tf-status{font-family:var(--label);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.tf-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr)minmax(0,1fr);gap:12px}.tf-stage--gradient{gap:0}.tf-side{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0}.tf-field{position:absolute;inset:0;z-index:0;pointer-events:none}.tf-field canvas{position:absolute;inset:0;width:100%;height:100%}.tf-field__wax{filter:drop-shadow(5px 5px 0 var(--ink))}.tf-stage:not(.tf-stage--gradient)>.tf-field--strip,.tf-stage--gradient .tf-field--side{display:none}.tf-veil{opacity:0;transition:opacity .7s ease .15s}.tf-chip{position:relative;z-index:2;width:40%;aspect-ratio:1;filter:url(#crayon-edge)drop-shadow(1.5px 0 0 var(--ink))drop-shadow(-1.5px 0 0 var(--ink))drop-shadow(0 1.5px 0 var(--ink))drop-shadow(0 -1.5px 0 var(--ink));transition:transform .6s cubic-bezier(.3,1.3,.5,1).6s}.tf-chip__face{position:absolute;inset:0;clip-path:polygon(3% 2%,52% 0,98% 3%,100% 50%,97% 98%,48% 100%,2% 97%,0 48%)}.tf-chip__face::after{content:'';position:absolute;inset:0;background:var(--grain);mix-blend-mode:soft-light;opacity:.3}.tf-tag{position:absolute;z-index:3;left:10px;bottom:10px;padding:1px 8px;border:2px solid var(--ink);border-radius:999px 900px 999px 800px;background:var(--cream);font-family:var(--label);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;rotate:-3deg}.tf-side--you .tf-tag{rotate:2deg}.tf-stage.is-reveal .tf-veil{opacity:1}.tf-stage.is-reveal .tf-side--ref .tf-chip{transform:translateX(calc(75% + 6px))}.tf-stage.is-reveal .tf-side--you .tf-chip{transform:translateX(calc(-75% - 6px))}.tf-stage--gradient.is-reveal .tf-side--ref .tf-chip{transform:translateX(calc(75% + 1px))}.tf-stage--gradient.is-reveal .tf-side--you .tf-chip{transform:translateX(calc(-75% - 1px))}.tf-result{position:absolute;z-index:4;top:-46px;right:-22px;width:150px;padding:0 26px;rotate:9deg;filter:drop-shadow(3px 3px 0 var(--ink));animation:tf-pop .4s cubic-bezier(.3,1.6,.5,1)1s both}.tf-result small{font-size:13px;letter-spacing:.06em}.tf-result b{font-family:var(--display);font-variation-settings:'SOFT' 100;font-size:36px;font-weight:900;line-height:1}.tf-result span{font-size:12px;line-height:1;letter-spacing:.02em}.tf-result[hidden]{display:none}@keyframes tf-pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}.tf-controls{display:grid;gap:2px}.tf-slider{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:end;gap:10px}.tf-slider__name{padding-bottom:3px;font-family:var(--label);font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.tf-slider:has(.tf-slider__input:focus-visible) .tf-slider__name{text-decoration:underline wavy var(--blue)2px;text-underline-offset:4px}.tf-slider__rail{position:relative;height:74px;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.tf-slider__wax{position:absolute;left:0;bottom:0;width:100%;height:30px}.tf-slider__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}.tf-slider__crayon{position:absolute;bottom:11px;left:calc(14px + (100% - 28px) * var(--t,.5));width:22px;height:62px;margin-left:-11px;transform-origin:50% 100%;rotate:var(--tilt,0deg);filter:var(--crayon-edge);pointer-events:none;transition:rotate .2s cubic-bezier(.3,1.6,.5,1),translate .2s ease}.tf-slider__body{--cone:22%;display:block;height:100%;background:var(--grain),linear-gradient(0deg,transparent 0 calc(var(--cone) + 8%),rgba(42,31,26,.32) 0 calc(var(--cone) + 8% + 3px),transparent 0 86%,rgba(42,31,26,.32) 0 calc(86% + 3px),transparent 0),linear-gradient(0deg,rgba(42,31,26,.16) 0 var(--cone),transparent 0),var(--c,#fff);background-blend-mode:soft-light,normal,normal,normal;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cone)),58% 100%,42% 100%,0 calc(100% - var(--cone)))}.tf-slider__rail.is-drag .tf-slider__crayon{rotate:calc(var(--tilt,0deg) * 2);translate:0 2px}.tf-slider__input:focus-visible~.tf-slider__crayon{outline:3px solid var(--blue);outline-offset:4px;border-radius:4px}.tf-slider.is-off .tf-slider__rail{cursor:default;opacity:.5}.tf-lock{justify-self:center;min-width:200px;margin-top:8px}@media(max-width:560px){.tf{gap:12px}.tf-top{padding-right:84px}.tf-stage{gap:8px}.tf-field__wax{filter:drop-shadow(3px 3px 0 var(--ink))}.tf-tag{left:7px;bottom:7px;font-size:12px;padding:0 6px}.tf-stage.is-reveal .tf-side--ref .tf-chip{transform:translateX(calc(75% + 4px))}.tf-stage.is-reveal .tf-side--you .tf-chip{transform:translateX(calc(-75% - 4px))}.tf-result{width:118px;padding:0 20px;top:-40px;right:-12px}.tf-result small{font-size:11px}.tf-result b{font-size:26px}.tf-result span{font-size:10px}.tf-slider{grid-template-columns:48px minmax(0,1fr);gap:8px}.tf-slider__rail{height:66px}.tf-slider__crayon{height:54px;width:20px;margin-left:-10px}}.tf-stage.is-snap .tf-chip,.tf-stage.is-snap .tf-veil{transition:none}@media(prefers-reduced-motion:reduce){.tf-chip,.tf-veil{transition-duration:.01s;transition-delay:0s}.tf-slider__crayon{transition:none}.tf-result{animation:none}}.preview .tf{padding:16px}.preview .tf-top,.preview .tf-status,.preview .tf-controls,.preview .tf-lock,.preview .tf-tag{display:none}