/* A self-contained material studio. Surface and swatch use the identical texture. */
.navigation.studio-nav,.cinema-enabled .navigation.studio-nav{background:linear-gradient(#e7e3dbfa,#e7e3dbdf 75%,#e7e3db00);color:#20231f}.navigation.studio-nav .logo{filter:brightness(0)}.navigation.studio-nav .edition{color:#62665c}
.material-studio[data-wall=dark] .ms-stage{background-image:radial-gradient(ellipse at var(--light-x) 30%,#aab19426,transparent 70%)}
.material-studio{--paper:#e7e3db;--studio-ink:#20231f;--line:#22251f29;--light-x:50%;--light-shift:0%;background:var(--paper);color:var(--studio-ink);padding:100px var(--gutter) 32px;position:relative;overflow:hidden;scroll-margin-top:70px}
.ms-header{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:32px}.ms-kicker{font-size:13px;letter-spacing:.16em;line-height:1.5}.ms-kicker>span{margin-left:22px}.ms-header h2{font-size:clamp(54px,6.3vw,112px);line-height:.91;letter-spacing:-.065em;margin-top:28px}.ms-header h2 em{color:#7e776a}.ms-intro{width:335px;padding-bottom:3px}.ms-intro>p{font-size:19px;letter-spacing:-.03em}.ms-intro>span{display:block;font-size:16px;line-height:1.65;color:#696c63;margin:10px 0 26px}.ms-materials{display:flex;border-bottom:1px solid var(--line);gap:25px}.ms-materials button{font-size:16px;position:relative;padding:0 0 12px;display:flex;align-items:center;gap:22px;color:#73766e;min-height:42px}.ms-materials button small{font-size:12px}.ms-materials button[aria-pressed=true]{color:#20231f}.ms-materials button:after{content:'';height:2px;position:absolute;bottom:-1px;left:0;right:0;background:#855132;transform:scaleX(0);transform-origin:left;transition:transform .35s}.ms-materials button[aria-pressed=true]:after{transform:scaleX(1)}
.ms-stage{height:clamp(340px,31vw,590px);position:relative;perspective:1500px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:radial-gradient(ellipse at var(--light-x) 30%,#fff9,transparent 65%);transition:background-color .65s,color .65s;touch-action:pan-y}.ms-stage-top,.ms-stage-bottom{position:absolute;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;z-index:3;pointer-events:none}.ms-stage-top{top:14px;font-size:12px;letter-spacing:.16em;color:#6e7066}.ms-stage-bottom{bottom:14px;color:#6e7066;font-size:14px}.ms-stage-bottom p{max-width:70%}.ms-stage-bottom button{pointer-events:auto;font-size:14px;color:inherit;display:flex;align-items:center;gap:20px;padding:0}.ms-stage-bottom button span{font-size:18px}.ms-wall{pointer-events:auto;display:flex;gap:4px}.ms-wall button{width:32px;min-height:32px;border:1px solid transparent;border-radius:50%;padding:7px}.ms-wall button[aria-pressed=true]{border-color:currentColor}.ms-wall i{display:block;aspect-ratio:1;border-radius:50%;background:#efede7;border:1px solid #8885}.ms-wall button:last-child i{background:#292c28}
.ms-watermark{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);text-align:center;font-size:clamp(100px,19vw,360px);letter-spacing:-.07em;line-height:1;color:#78796f0d;pointer-events:none;font-weight:400;user-select:none}
.ms-product-space{position:absolute;inset:56px 8% 65px;display:grid;place-items:center;perspective:1400px}.ms-product{width:min(80%,870px);position:relative;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:width .75s cubic-bezier(.2,.7,.2,1),transform .35s ease;isolation:isolate}.ms-product:after{content:'';position:absolute;inset:auto 3% -28%;height:20%;background:#2427213b;filter:blur(20px);border-radius:50%;transform:rotateX(50deg);z-index:-1;transition:opacity .5s}.ms-panel{padding:6px;border-radius:6px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;aspect-ratio:3/1;position:relative;background:linear-gradient(125deg,#70736b,#161914 9%,#4a4b45 50%,#141711 92%,#5f6259);border:1px solid #8c8e83;box-shadow:0 4px 0 #151811,0 6px 0 #65675d,0 26px 35px #26291e3b,inset 0 0 0 2px #171a14;transform-style:preserve-3d;transition:box-shadow .5s}
.ms-column{display:grid;grid-template-rows:1fr 1fr;gap:5px;min-width:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ms-face{position:relative;border-radius:2px;overflow:hidden;background-image:var(--surface);background-size:110% 110%;background-position:center;box-shadow:inset 0 0 0 1px #ffffff24;isolation:isolate;transition:box-shadow .4s}
.ms-legends{position:absolute;inset:13% 9%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:start;justify-content:space-between;color:var(--ink);font-size:clamp(11px,1.15vw,18px);line-height:1.2;z-index:2}.ms-legends span:nth-child(even){text-align:right}.ms-legends span:nth-child(n+3){align-self:end}
.ms-reflection{position:absolute;inset:-40%;pointer-events:none;transform:translateX(var(--light-shift));transition:transform .4s ease;opacity:.12;background:linear-gradient(108deg,transparent 34%,#fff8 50%,transparent 66%)}
.material-studio[data-material=glass] .ms-reflection{opacity:.65;background:linear-gradient(117deg,transparent 33%,#fff0 38%,#ffffff08 38.1%,#fffd 45%,#fff3 46%,transparent 56%)}
.material-studio[data-material=glass] .ms-face{box-shadow:inset 0 1px 2px #fffd,inset 0 0 0 1px #fff7,0 0 0 1px #050705}.material-studio[data-material=pc] .ms-reflection{opacity:0}.material-studio[data-material=pc] .ms-face{box-shadow:inset 0 1px 1px #ffffff1c,inset 0 0 0 1px #0002}
.ms-display{padding:3%;background:#070b0b;box-shadow:inset 0 0 0 1px #92989048;min-width:0;overflow:hidden;border-radius:2px;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.ms-display svg{width:100%;height:100%;display:block;aspect-ratio:358/363}.ms-backplate{position:absolute;inset:1px;border-radius:5px;background:linear-gradient(130deg,#373c35,#10140f);border:1px solid #909587;box-shadow:inset 0 0 0 10px #1c211a;opacity:0;transition:opacity .6s,transform .8s;transform:translateZ(-2px)}
.material-studio[data-format="4"] .ms-product{width:min(57%,580px)}.material-studio[data-format="4"] .ms-panel{grid-template-columns:1fr 1fr;aspect-ratio:2/1}.material-studio[data-format="4"] .ms-secondary{display:none}.material-studio[data-format="2"] .ms-product{width:min(30%,280px)}.material-studio[data-format="2"] .ms-panel{grid-template-columns:1fr;aspect-ratio:1}.material-studio[data-format="2"] .ms-display,.material-studio[data-format="2"] .ms-secondary{display:none}
.ms-exploded .ms-product{transform:rotateX(14deg) rotateY(-13deg) scale(.87)}.ms-exploded .ms-backplate{opacity:1;transform:translate3d(24px,25px,-35px)}.ms-exploded .ms-primary{transform:translate3d(-15px,-30px,85px)}.ms-exploded .ms-secondary{transform:translate3d(15px,-30px,85px)}.ms-exploded .ms-display{transform:translate3d(0,-12px,45px)}.ms-exploded .ms-panel{box-shadow:0 4px 0 #151811,0 26px 35px #26291e3b}.ms-exploded .ms-product:after{opacity:.6}
.material-studio[data-wall=dark] .ms-stage{background-color:#151914;color:#ecebe3}.material-studio[data-wall=dark] .ms-stage-top,.material-studio[data-wall=dark] .ms-stage-bottom{color:#bdc1b3}.material-studio[data-wall=dark] .ms-watermark{color:#c5ceb108}.material-studio[data-wall=dark] .ms-product:after{background:#0009}
.ms-tools{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:75px;border-bottom:1px solid var(--line)}.ms-formats{display:flex;gap:6px}.ms-formats button{min-width:65px;padding:7px 12px;min-height:34px;border:1px solid transparent;border-radius:20px;color:#71746a;font-size:15px}.ms-formats button[aria-pressed=true]{border-color:#272e29;color:#20231f}.ms-light{display:flex;align-items:center;gap:16px;font-size:12px;letter-spacing:.12em}.ms-light input{width:130px;accent-color:#665846;cursor:ew-resize;height:25px}.ms-light>span{font-size:20px}.ms-format-note{font-size:14px;color:#74776b}
.ms-palette{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr) auto;align-items:center;gap:35px;padding:35px 0 15px}.ms-selection .ms-kicker{font-size:12px;color:#72776b}.ms-selection h3{font-size:clamp(25px,2.7vw,46px);letter-spacing:-.045em;margin:7px 0}.ms-selection>p:last-child{font-size:15px;color:#73776e;max-width:245px;line-height:1.55}.ms-swatches{display:flex;gap:clamp(7px,1.2vw,20px);justify-content:center}.ms-swatch{width:clamp(35px,4vw,64px);min-height:64px;padding:5px 0;position:relative;flex:none}.ms-swatch i{display:block;width:100%;aspect-ratio:1;border-radius:50%;background-position:center;background-size:110% 110%;box-shadow:inset 0 0 0 1px #0002;transition:transform .3s,outline-color .3s;outline:1px solid transparent;outline-offset:5px}.ms-swatch:hover i{transform:translateY(-4px)}.ms-swatch[aria-pressed=true] i{outline-color:#313b2e}.ms-swatch>span{position:absolute;bottom:100%;left:50%;transform:translate(-50%,4px);white-space:nowrap;pointer-events:none;font-size:13px;opacity:0;transition:opacity .2s,transform .2s;color:#262c23;background:#eeeae2;padding:4px 7px;border-radius:3px}.ms-swatch:hover>span,.ms-swatch:focus-visible>span{opacity:1;transform:translate(-50%,-3px)}.ms-save{font-size:14px;display:flex;gap:25px;align-items:center;border-bottom:1px solid #76796c;padding:0;white-space:nowrap}.ms-save span{font-size:19px}.ms-footnote{font-size:13px;color:#7e8377;margin-top:10px}.material-studio button:focus-visible,.material-studio input:focus-visible{outline:2px solid #926642;outline-offset:6px}
@media(max-width:1000px){.material-studio{padding-top:70px}.ms-header h2{font-size:65px}.ms-intro{width:290px}.ms-palette{grid-template-columns:1fr auto;gap:24px}.ms-swatches{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:22px}.ms-swatch{width:48px}.ms-format-note{display:none}.ms-product-space{inset:55px 4% 65px}.ms-product{width:90%}}
@media(max-width:600px){.material-studio{padding:60px 20px 30px}.ms-header{display:block;margin-bottom:24px}.ms-header h2{font-size:58px;margin-top:20px}.ms-intro{width:100%;margin-top:25px}.ms-intro>p{font-size:17px}.ms-intro>span{font-size:16px;margin-bottom:18px}.ms-materials{gap:34px}.ms-stage{height:320px;margin-inline:-5px}.ms-stage-top,.ms-stage-bottom{left:10px;right:10px}.ms-stage-top{font-size:12px}.ms-stage-bottom{align-items:flex-end;font-size:12px}.ms-stage-bottom p{max-width:160px;line-height:1.5}.ms-stage-bottom button{font-size:12px;gap:7px}.ms-product-space{inset:65px 3% 75px}.ms-product{width:100%}.ms-panel{padding:3px;gap:3px;border-radius:4px}.ms-column{gap:3px}.ms-legends{font-size:11px;inset:14% 8%}.material-studio[data-format="4"] .ms-product{width:80%}.material-studio[data-format="2"] .ms-product{width:43%}.ms-watermark{font-size:25vw}.ms-tools{gap:10px;min-height:68px}.ms-formats{gap:0}.ms-formats button{min-width:46px;padding:5px 9px;font-size:12px}.ms-light{font-size:12px;gap:7px}.ms-light input{width:60px}.ms-light>span{display:none}.ms-palette{padding-top:24px;column-gap:14px}.ms-selection h3{font-size:30px}.ms-save{font-size:13px;gap:12px}.ms-swatches{gap:14px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%}.ms-swatch{width:100%;min-height:40px}.ms-footnote{font-size:12px;margin-top:22px}.ms-exploded .ms-primary{transform:translate3d(-7px,-20px,35px)}.ms-exploded .ms-secondary{transform:translate3d(7px,-20px,35px)}.ms-exploded .ms-display{transform:translate3d(0,-8px,20px)}}
@media(prefers-reduced-motion:reduce){.material-studio *,.material-studio *:before,.material-studio *:after{animation:none!important;transition:none!important}.ms-product{transform:none!important}}