.m-roast-study{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #bfb3a3;background:#eee9df;color:#211b16;--roast:0}
.ma-at .m-roast-art{position:relative;min-height:460px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 43%,#f6f2e9 0%,#e4dac8 65%,#c7b8a1 100%)}
.m-roast-art:after{content:"";position:absolute;width:190px;height:24px;bottom:74px;background:#352619;opacity:.23;filter:blur(15px);border-radius:50%;transform:scaleX(calc(1 + var(--roast)*.08))}
.ma-at .m-roast-bean{position:relative;z-index:1;width:230px;height:300px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) sepia(.55) saturate(.9) brightness(1.04);transform:scale(1);transition:filter .12s linear,transform .12s linear}
.m-roast-halo{position:absolute;width:330px;height:330px;border:1px solid #8a756044;border-radius:50%}
.m-roast-halo:after{content:"";position:absolute;inset:18px;border:1px solid #8a756022;border-radius:50%}
.m-roast-art-index,.m-roast-art-word{position:absolute;top:24px;left:26px;font:10px/1.4 var(--m-font-mono);letter-spacing:.13em;text-transform:uppercase}
.m-roast-art-word{top:auto;bottom:24px}
.ma-at .m-roast-panel{padding:30px 32px;background:#171410;color:#f1eadd}
.m-roast-kicker,.m-roast-change,.m-roast-instruction{font:10px/1.5 var(--m-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#c8af8f}
body #MainContent .m-roast-panel h3{font:400 clamp(24px,2.3vw,34px)/1.2 var(--m-font-heading)!important;letter-spacing:.025em!important;margin:10px 0 24px!important;text-transform:none}
.m-roast-texts{display:grid;min-height:230px}
.m-roast-texts article{grid-area:1/1;opacity:0;transform:translateY(5px);transition:opacity .35s ease,transform .35s ease;pointer-events:none}
.m-roast-texts article:not([aria-hidden="true"]){opacity:1;transform:none}
body #MainContent .m-roast-texts h4{font:400 23px/1.25 var(--m-font-heading);color:#f1eadd;letter-spacing:.035em;text-transform:uppercase;margin:8px 0 10px}
.ma-at .m-roast-texts p{font:13px/1.65 var(--m-font-sans);max-width:440px;color:#d4c9b9}
.m-roast-texts dl{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;border-top:1px solid #f2e7d528;padding-top:15px;margin-top:18px}
.m-roast-texts dt{font:10px var(--m-font-mono);letter-spacing:.1em;text-transform:uppercase;color:#c8af8f}
.m-roast-texts dd{font:12px/1.55 var(--m-font-sans);margin:7px 0 0}
.m-roast-study input[type=range]{display:block;width:100%;height:22px;margin:14px 0 8px;accent-color:#c6a87e;cursor:ew-resize;touch-action:pan-y}
.m-roast-stops{display:flex;justify-content:space-between;gap:5px}
.ma-at .m-roast-stops button{flex:1;color:#b6aa98;background:none;border:0;border-top:1px solid #756653;padding:10px 2px;font:9px/1.4 var(--m-font-mono);text-transform:uppercase;cursor:pointer;text-align:left}
.m-roast-stops button span{display:block;margin-bottom:5px}
.ma-at .m-roast-stops button[aria-pressed=true]{color:#f2e9da;border-top-color:#d0b38b}
.ma-at [data-roast-play]{font:10px var(--m-font-mono);letter-spacing:.08em;text-transform:uppercase;background:none;border:0;border-bottom:1px solid #ad9370;color:#edddc8;margin-top:20px;padding:0 0 7px;cursor:pointer}
.ma-at .m-roast-note{font:10px/1.6 var(--m-font-sans);color:#aa9b87;margin-top:14px;max-width:440px}
.m-roast-study :is(button,input):focus-visible{outline:2px solid #e2bd81;outline-offset:4px}
.m-roast-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:800px){.m-roast-study{grid-template-columns:1fr}.ma-at .m-roast-art{min-height:300px}.ma-at .m-roast-bean{height:225px;width:180px}.m-roast-halo{width:245px;height:245px}.m-roast-art:after{bottom:35px;width:150px}.ma-at .m-roast-panel{padding:25px 22px}.m-roast-texts{min-height:230px}.m-roast-stops button{font-size:8px!important}.m-roast-art-word{display:none}}
@media(prefers-reduced-motion:reduce){.ma-at .m-roast-bean,.m-roast-texts article{transition:none}}

.m-roast-finish{grid-column:1/-1;display:grid;min-height:178px;border-top:1px solid #bfb3a3;background:#ece4d6}
.m-roast-finish-prompt,.m-roast-product{grid-area:1/1;transition:opacity .35s ease;align-self:center}
.m-roast-finish-prompt{padding:26px 32px}.ma-at .m-roast-finish-prompt p{font:18px/1.5 var(--m-font-heading);margin-top:10px;max-width:650px;color:#372c20}
.m-roast-finish .m-roast-kicker{color:#796044}
.m-roast-product{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:24px;padding:20px 32px;opacity:0;pointer-events:none}
.ma-at .m-roast-product-photo{height:130px;background:#f3ede3;display:block;border:0;margin:0;padding:0}
.ma-at .m-roast-product-photo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
body #MainContent .m-roast-product h4{font:400 26px/1.2 var(--m-font-heading);letter-spacing:.03em;text-transform:uppercase;margin:7px 0}
.ma-at .m-roast-product p{font:13px/1.6 var(--m-font-sans);color:#5b4935;margin:5px 0}
.ma-at .m-roast-product .m-roast-product-profile{font:11px/1.6 var(--m-font-mono)}
.ma-at .m-roast-product-link{color:#2c2117;font:11px/1.6 var(--m-font-mono);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid #8a7052;padding-bottom:8px}
.m-roast-product-link>span:last-child{display:block;font-size:12px;margin-top:7px}
.m-roast-study[data-complete=true] .m-roast-product{opacity:1;pointer-events:auto}
.m-roast-study[data-complete=true] .m-roast-finish-prompt{opacity:0;pointer-events:none}
@media(max-width:650px){.m-roast-finish{min-height:250px}.m-roast-product{grid-template-columns:95px 1fr;padding:20px;gap:15px}.ma-at .m-roast-product-photo{height:110px}.m-roast-product-link{grid-column:2}.m-roast-finish-prompt{padding:22px}.m-roast-product h4{font-size:22px!important}}
@media(prefers-reduced-motion:reduce){.m-roast-finish-prompt,.m-roast-product{transition:none}}

.ma-at .m-roast-bean-stack{position:relative;z-index:1;width:230px;height:300px;display:grid;isolation:isolate}.ma-at .m-roast-bean-stack :is(.m-roast-bean,.m-roast-bean-raw){grid-area:1/1;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:none;transform:none;transition:opacity .15s linear,filter .15s linear}.ma-at .m-roast-bean-stack .m-roast-bean{opacity:0}.ma-at .m-roast-bean-raw{opacity:1}@media(max-width:800px){.ma-at .m-roast-bean-stack{width:180px;height:225px}}@media(prefers-reduced-motion:reduce){.ma-at .m-roast-bean-stack :is(.m-roast-bean,.m-roast-bean-raw){transition:none}}



.ma-at .m-roast-bean-stack .m-roast-bean-raw{height:100%;max-height:none;align-self:stretch;filter:none!important;border-radius:0;transform:rotate(-70deg) scale(2.15);transform-origin:50% 50%}
.ma-at .m-roast-bean-stack .m-roast-bean{transform:scale(.96);transform-origin:50% 50%}
.ma-at .m-roast-study input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:calc(80% + 18px);height:44px;margin:6px 0 0 calc(10% - 9px);padding:0;background:transparent;border:0;box-shadow:none;border-radius:0;cursor:ew-resize}
.m-roast-study input[type=range]::-webkit-slider-runnable-track{height:4px;border:0;border-radius:2px;background:linear-gradient(to right,#c6a87e 0%,#c6a87e calc(var(--roast)*100%),#5a5146 calc(var(--roast)*100%),#5a5146 100%)}
.m-roast-study input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7px;border:2px solid #e8d3b2;border-radius:50%;background:#c6a87e;box-shadow:0 0 0 3px #171410}
.m-roast-study input[type=range]::-moz-range-track{height:4px;border:0;border-radius:2px;background:#5a5146}
.m-roast-study input[type=range]::-moz-range-progress{height:4px;background:#c6a87e}
.m-roast-study input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2px solid #e8d3b2;border-radius:50%;background:#c6a87e;box-shadow:0 0 0 3px #171410}
.m-roast-stops{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.ma-at .m-roast-stops button{min-width:0;border-top:0;padding:6px 3px 10px;text-align:center;position:relative}
.ma-at .m-roast-stops button:before{content:"";display:block;width:1px;height:6px;background:#756653;margin:0 auto 9px}
.ma-at .m-roast-stops button[aria-pressed=true]:before{background:#e8d3b2}

.ma-at .m-roast-art>.m-roast-bean{width:230px;height:300px;object-fit:contain;mix-blend-mode:normal;transform:none;opacity:1;transition:filter .15s linear}@media(max-width:800px){.ma-at .m-roast-art>.m-roast-bean{width:180px;height:225px}}@media(prefers-reduced-motion:reduce){.ma-at .m-roast-art>.m-roast-bean{transition:none}}