.tlj-material-playground{--tlj-material-ink: #202020;--tlj-material-blush: #ffe0e0;--tlj-material-gold: #e3b64b;position:relative;display:block;overflow:hidden;padding:clamp(3rem,6vw,7rem);border-radius:clamp(2.8rem,5vw,5.6rem);color:#fff;background:var(--tlj-material-ink);isolation:isolate}.tlj-material-playground:before{position:absolute;top:-18rem;right:-15rem;width:42rem;height:42rem;border-radius:50%;background:var(--tlj-material-blush);opacity:.12;content:""}.tlj-material-playground:after{position:absolute;bottom:-12rem;left:-10rem;width:28rem;height:28rem;border:1px solid rgba(255,255,255,.12);border-radius:50%;content:""}.tlj-material-playground__heading{position:relative;z-index:2;max-width:80rem;margin-bottom:clamp(4rem,7vw,8rem)}.tlj-material-playground__eyebrow{margin:0 0 1.4rem;color:var(--tlj-material-blush);font-size:1.05rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}.tlj-material-playground__heading h2{max-width:78rem;margin:0;color:#fff;font-size:clamp(3.6rem,6vw,7.2rem);font-weight:400;letter-spacing:-.055em;line-height:.98;text-wrap:balance}.tlj-material-playground__heading>p:last-child{max-width:58rem;margin:2rem 0 0;color:#ffffffb8;font-size:clamp(1.45rem,1.8vw,1.7rem);line-height:1.6}.tlj-material-playground__layout{position:relative;z-index:2;display:grid;gap:clamp(4rem,7vw,8rem);align-items:center;min-width:0}.tlj-material-playground__visual{position:relative;display:grid;min-width:0;min-height:clamp(30rem,40vw,42rem);place-items:center;isolation:isolate}.tlj-material-playground__cross-section{position:relative;z-index:2;width:min(28rem,70vw);aspect-ratio:1;padding:1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:#ffffff0a;box-shadow:0 0 8rem #e1ae422e}.tlj-material-playground__outer{display:grid;width:100%;height:100%;padding:4rem;border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff7bc 0 2%,transparent 3%),linear-gradient(135deg,#f7dc7a,#ad7410 55%,#ffe9a4);place-items:center;transition:padding .5s cubic-bezier(.22,1,.36,1),background .5s ease}.tlj-material-playground__core{display:grid;width:100%;height:100%;border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#383b3c;background:linear-gradient(135deg,#fff,#aeb2b4 58%,#f1f2f2);box-shadow:inset -1rem -1rem 2rem #272b2c29,inset 1rem 1rem 2rem #ffffffb3;place-items:center;transition:color .5s ease,background .5s ease}.tlj-material-playground__core span{font-size:2rem;font-weight:500;letter-spacing:.12em}.tlj-material-playground__visual[data-mode=plated] .tlj-material-playground__outer{padding:1.2rem}.tlj-material-playground__visual[data-mode=plated] .tlj-material-playground__core{color:#5f442c;background:linear-gradient(135deg,#d4b58c,#795c3e 62%,#c6a378)}.tlj-material-playground__visual[data-mode=solid] .tlj-material-playground__outer{padding:0}.tlj-material-playground__visual[data-mode=solid] .tlj-material-playground__core{color:#6c4706;background:radial-gradient(circle at 32% 25%,#fff7bc 0 2%,transparent 3%),linear-gradient(135deg,#f7dc7a,#ad7410 55%,#ffe9a4)}.tlj-material-playground__layer-label{position:absolute;z-index:3;right:max(0rem,5%);bottom:2rem;max-width:18rem;padding:1rem 1.4rem;border-radius:999px;color:var(--tlj-material-ink);background:var(--tlj-material-blush);box-shadow:0 .8rem 2.4rem #0000002e;font-size:1.15rem;font-weight:500;text-align:center;transform:rotate(3deg)}.tlj-material-playground__orbit{position:absolute;z-index:1;border:1px solid rgba(255,255,255,.14);border-radius:50%;animation:tlj-material-orbit 16s linear infinite}.tlj-material-playground__orbit:after{position:absolute;top:-.7rem;left:50%;color:var(--tlj-material-gold);font-size:1.3rem;content:"\2726"}.tlj-material-playground__orbit--one{width:min(34rem,84vw);height:min(20rem,50vw);transform:rotate(24deg)}.tlj-material-playground__orbit--two{width:min(22rem,54vw);height:min(36rem,88vw);animation-direction:reverse;animation-duration:22s;transform:rotate(-35deg)}.tlj-material-playground__tabs{display:grid;gap:1rem;min-width:0}.tlj-material-playground__tabs button{display:grid;gap:1.2rem;width:100%;min-width:0;min-height:4.4rem;padding:clamp(1.6rem,2.3vw,2.2rem);border:1px solid rgba(255,255,255,.16);border-radius:1.8rem;color:#ffffffa6;background:transparent;font:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease}.tlj-material-playground__tabs button:hover,.tlj-material-playground__tabs button:focus-visible,.tlj-material-playground__tabs button[aria-pressed=true]{border-color:var(--tlj-material-blush);color:#fff;background:#ffe0e01a;transform:translate(.5rem)}.tlj-material-playground__tabs button:focus-visible{outline:.2rem solid var(--tlj-material-blush);outline-offset:.2rem}.tlj-material-playground__tab-label{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;min-width:0}.tlj-material-playground__tab-label>span{font-size:1.4rem;font-weight:500}.tlj-material-playground__tabs button small{color:inherit;font-size:1.05rem;text-align:right}.tlj-material-playground__tabs button>strong{color:#fff;font-size:clamp(2rem,2.5vw,2.8rem);font-weight:400;line-height:1.1;overflow-wrap:normal;word-break:normal}.tlj-material-playground__tab-copy{color:#ffffffb8;font-size:1.3rem;font-weight:400;line-height:1.55}@keyframes tlj-material-orbit{to{rotate:360deg}}@media screen and (min-width:990px){.tlj-material-playground__layout{grid-template-columns:minmax(32rem,.82fr) minmax(0,1.18fr)}}@media screen and (max-width:749px){.tlj-material-playground{padding:3.4rem 2.2rem;border-radius:2.8rem}.tlj-material-playground__heading{margin-bottom:2.8rem}.tlj-material-playground__heading h2{font-size:clamp(3.4rem,12vw,5rem)}.tlj-material-playground__visual{min-height:30rem}.tlj-material-playground__cross-section{width:min(23rem,68vw)}.tlj-material-playground__outer{padding:3.2rem}.tlj-material-playground__layer-label{right:0;bottom:1rem}.tlj-material-playground__tabs button:hover,.tlj-material-playground__tabs button:focus-visible,.tlj-material-playground__tabs button[aria-pressed=true]{transform:none}.tlj-material-playground__tab-label{align-items:flex-start;flex-direction:column}.tlj-material-playground__tabs button small{text-align:left}}@media(prefers-reduced-motion:reduce){.tlj-material-playground__orbit{animation:none}.tlj-material-playground__tabs button,.tlj-material-playground__outer,.tlj-material-playground__core{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/33/assets/material-comparison-playground.css.map */