.lab-latte{--latte-foam:#f9f2eb;--latte-halo:#985b2d;--latte-matcha-lt:#c6dc91;--latte-matcha-deep:#6a8e34;--latte-filter:#451a0b;--latte-filter-lt:#823b15;--latte-ease:cubic-bezier(.23, 1, .32, 1);--latte-ease-io:cubic-bezier(.77, 0, .175, 1);--latte-hero-h:calc(100svh - var(--lab-nav-h) - var(--lab-bar-h));--cup:clamp(190px, min(78vw, calc((var(--latte-hero-h) - 250px) / 1.5)), 620px)}@media (min-width:1024px){.lab-latte{--cup:clamp(300px, min(40vw, calc(var(--latte-hero-h) * .54)), 640px)}}@layer base{.lab-latte h1{text-wrap:balance}}@layer components{.lab-latte .latte-hero{position:relative;overflow:clip}.lab-latte .latte-hero-grid{max-width:1280px;padding:var(--sp-6) var(--sp-4) var(--sp-12);min-height:var(--latte-hero-h);grid-template-rows:auto auto 1fr;margin-inline:auto;display:grid}.lab-latte .latte-head{z-index:3;position:relative}.lab-latte .latte-title{margin-top:var(--sp-2);font-family:var(--font-display);font-size:var(--fs-h2);font-weight:500;line-height:var(--lh-display);letter-spacing:var(--track-display)}.lab-latte .latte-slot{z-index:1;height:calc(var(--cup) * 1.5);margin-block:var(--sp-2);position:relative}.lab-latte .latte-stage{width:calc(var(--cup) * 2.05);height:calc(var(--cup) * 2.05);margin:calc(var(--cup) * -1.025) 0 0 calc(var(--cup) * -1.025);pointer-events:none;position:absolute;top:50%;left:50%}.lab-latte .latte-img,.lab-latte .latte-canvas{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block;position:absolute;inset:0}.lab-latte .latte-canvas{opacity:0;transition:opacity .5s var(--latte-ease)}.lab-latte[data-gl=on] .latte-canvas{opacity:1}.lab-latte .latte-still,.lab-latte[data-gl=off] .latte-poster,.lab-latte[data-gl=off] .latte-canvas{display:none}.lab-latte[data-gl=off] .latte-still-espresso{display:block}.lab-latte[data-gl=off][data-base=matcha] .latte-still-espresso{display:none}.lab-latte[data-gl=off][data-base=matcha] .latte-still-matcha{display:block}.lab-latte .latte-surface{width:var(--cup);height:var(--cup);margin:calc(var(--cup) * -.5) 0 0 calc(var(--cup) * -.5);touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;border-radius:50%;position:absolute;top:50%;left:50%}.lab-latte[data-gl=off] .latte-surface{display:none}@media (hover:hover) and (pointer:fine){.lab-latte[data-gl=on] .latte-surface{cursor:none}}.lab-latte .latte-pitcher{z-index:2;pointer-events:none;opacity:0;transition:opacity .18s;position:absolute;top:0;left:0}.lab-latte .latte-pitcher.is-on{opacity:1}.lab-latte .latte-pitcher-ring{border:1.5px solid var(--jd-paper);width:28px;height:28px;box-shadow:0 0 0 1px color-mix(in oklab, var(--jd-ink) 35%, transparent);transition:transform .26s var(--latte-ease);border-radius:50%;position:absolute;top:-14px;left:-14px}.lab-latte .latte-pitcher.is-pouring .latte-pitcher-ring{transform:scale(.55)}.lab-latte .latte-pitcher-label{border-radius:var(--radius-pill);background:var(--jd-ink);color:var(--jd-oat);white-space:nowrap;padding:2px 8px;position:absolute;top:-30px;left:20px}.lab-latte .latte-note{display:none}.lab-latte .latte-body{z-index:3;gap:var(--sp-6);padding-top:var(--sp-2);flex-direction:column;display:flex;position:relative}.lab-latte .latte-lede{max-width:30ch;font-family:var(--font-display);font-size:var(--fs-lead);order:4;line-height:1.3}.lab-latte .latte-hint{order:2;max-width:44ch}.lab-latte .latte-controls{align-items:center;gap:var(--sp-4) var(--sp-6);flex-wrap:wrap;order:1;display:flex}.lab-latte .latte-live{order:3}.lab-latte .latte-hint-touch{display:none}@media (hover:none),(pointer:coarse){.lab-latte .latte-hint-pointer{display:none}.lab-latte .latte-hint-touch{display:inline}}.lab-latte [data-still-only],.lab-latte[data-gl=off] [data-live-only]{display:none}.lab-latte[data-gl=off] [data-still-only]{display:inline}.lab-latte .latte-actions{gap:var(--sp-3);flex-wrap:wrap;display:flex}.lab-latte .latte-btn{min-height:48px;padding-inline:var(--sp-6);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;transition:background-color .4s var(--latte-ease), color .4s var(--latte-ease), border-color .4s var(--latte-ease), transform .16s var(--latte-ease);align-items:center;font-weight:500;display:inline-flex}.lab-latte .latte-btn:active{transform:scale(.97)}.lab-latte .latte-btn-main{background:var(--jd-red);color:var(--jd-paper)}.lab-latte .latte-btn-ghost{background:var(--jd-oat);color:var(--jd-ink);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--jd-ink) 35%, transparent)}@media (hover:hover) and (pointer:fine){.lab-latte .latte-btn-main:hover{background:var(--jd-red-deep)}.lab-latte .latte-btn-ghost:hover{background:var(--jd-paper)}}.lab-latte .latte-btn-main:focus-visible{outline-color:var(--jd-ink)}.lab-latte .latte-toggle{align-items:center;gap:var(--sp-3);display:flex}.lab-latte .latte-toggle-track{border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--jd-ink) 35%, transparent);background:var(--jd-oat);padding:3px;display:inline-flex}.lab-latte .latte-toggle-track button{min-height:42px;padding-inline:var(--sp-4);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--jd-ink);transition:background-color .4s var(--latte-ease), color .4s var(--latte-ease);font-weight:500}.lab-latte .latte-toggle-track [data-base-to=espresso][aria-pressed=true]{background:var(--jd-ink);color:var(--jd-oat)}.lab-latte .latte-toggle-track [data-base-to=matcha][aria-pressed=true]{background:var(--jd-matcha);color:var(--jd-ink)}.lab-latte .latte-readouts{gap:var(--sp-6);border-top:1px solid var(--jd-sand);padding-top:var(--sp-3);grid-template-columns:auto auto minmax(0,1fr);display:grid}.lab-latte .latte-readouts dt{color:var(--jd-clay)}.lab-latte .latte-readouts dd{margin-top:var(--sp-1);font-family:var(--font-mono);font-size:var(--fs-lead);font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.1}.lab-latte .latte-unit{font-size:var(--fs-label);color:var(--jd-clay);margin-left:.2em}.lab-latte .latte-status{align-items:center;gap:0 var(--sp-3);margin-top:var(--sp-2);min-height:44px;color:var(--jd-clay);flex-wrap:wrap;display:flex}.lab-latte .latte-link{min-height:44px;color:var(--jd-ink);text-underline-offset:4px;text-decoration:underline;-webkit-text-decoration-color:color-mix(in oklab, var(--jd-ink) 40%, transparent);text-decoration-color:color-mix(in oklab, var(--jd-ink) 40%, transparent);align-items:center;display:inline-flex}.lab-latte .latte-link[hidden]{display:none}.lab-latte[data-base=matcha] .latte-btn-main{background:var(--jd-ink);color:var(--jd-oat)}.lab-latte[data-base=matcha] .latte-btn-main:focus-visible{outline-color:var(--jd-ink)}.lab-latte .lab-nav a[aria-label]{transition:color .4s var(--latte-ease)}.lab-latte[data-base=matcha] .lab-nav a[aria-label]{color:var(--jd-ink)}@media (hover:hover) and (pointer:fine){.lab-latte[data-base=matcha] .latte-btn-main:hover{background:var(--jd-clay)}}.lab-latte .latte-wrap{max-width:1280px;padding-inline:var(--sp-4);margin-inline:auto}.lab-latte .latte-w{vertical-align:top;margin:-.04em -.06em -.12em;padding:.04em .06em .12em;display:inline-block;overflow:clip}.lab-latte .latte-wi{will-change:transform;display:inline-block}.lab-latte .latte-cup-shadow{background:radial-gradient(closest-side, color-mix(in oklab, var(--jd-ink) 30%, transparent) 72%, transparent 100%);filter:blur(6px);border-radius:50%;position:absolute;inset:12%;transform:translate(3.5%,4.5%)}.lab-latte .latte-cup-img{transform-origin:50%;width:100%;height:auto;display:block;position:relative}.lab-latte .latte-coffees{padding-block:var(--sp-16) var(--sp-24)}.lab-latte .latte-sechead{gap:var(--sp-4);display:grid}.lab-latte .latte-sechead h2{max-width:14ch}.lab-latte .latte-cards{gap:var(--sp-4);margin-top:var(--sp-12);display:grid}.lab-latte .latte-card{border-radius:var(--radius-card);background:var(--jd-paper);align-content:start;display:grid;overflow:clip}.lab-latte .latte-card-cup{width:min(86%,380px);margin-block:var(--sp-4) calc(var(--sp-2) * -1);justify-self:center;position:relative}.lab-latte .latte-card-body{padding:var(--sp-6);flex-direction:column;display:flex}.lab-latte .latte-pill{border-radius:var(--radius-pill);padding:2px var(--sp-3);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--jd-ink) 30%, transparent)}.lab-latte .latte-card-title{margin-top:var(--sp-6)}.lab-latte .latte-notes{gap:var(--sp-1) var(--sp-4);margin-top:var(--sp-4);flex-wrap:wrap;display:flex}.lab-latte .latte-specs{margin-top:var(--sp-6);border-bottom:1px solid var(--jd-sand)}.lab-latte .latte-spec{justify-content:space-between;align-items:baseline;gap:var(--sp-4);border-top:1px solid var(--jd-sand);padding-block:var(--sp-2);display:flex}.lab-latte .latte-spec dt{flex:none}.lab-latte .latte-spec dd{text-align:right}.lab-latte .latte-foot{margin-top:var(--sp-6);max-width:60ch}.lab-latte .latte-matcha{padding-block:var(--sp-16) var(--sp-24);overflow:clip}.lab-latte .latte-matcha-grid{gap:var(--sp-8);display:grid}.lab-latte .latte-matcha-copy h2{margin-top:var(--sp-4);max-width:13ch}.lab-latte .latte-matcha-body{margin-top:var(--sp-6);max-width:48ch}.lab-latte .latte-matcha-facts{margin-top:var(--sp-8);border-top:1px solid color-mix(in oklab, var(--jd-ink) 25%, transparent);padding-top:var(--sp-3);gap:var(--sp-2);display:grid}.lab-latte .latte-matcha-facts>div{gap:var(--sp-4);grid-template-columns:7rem 1fr;align-items:baseline;display:grid}.lab-latte .latte-matcha-cup{justify-self:center;width:min(92%,460px);margin:0;position:relative}.lab-latte .latte-matcha-cup figcaption{margin-top:var(--sp-2);text-align:center;position:relative}.lab-latte .latte-matcha-photo{justify-self:end;width:min(64%,300px)}.lab-latte .latte-diff{padding-block:var(--sp-24) var(--sp-32);position:relative;overflow:clip}.lab-latte .latte-rings{aspect-ratio:1;pointer-events:none;width:max(900px,120vw);height:auto;position:absolute;top:0;left:50%;overflow:visible;transform:translate(-30%,-38%)}.lab-latte .latte-rings circle{fill:none;stroke:var(--jd-clay-lt);stroke-width:1.2px;opacity:.25;vector-effect:non-scaling-stroke}.lab-latte .latte-diff-grid{gap:var(--sp-12);display:grid;position:relative}.lab-latte .latte-diff-list{margin-top:var(--sp-8)}.lab-latte .latte-diff-list>li{gap:var(--sp-4);border-top:1px solid color-mix(in oklab, var(--jd-clay-lt) 30%, transparent);padding-block:var(--sp-6);grid-template-columns:2.5rem 1fr;display:grid}.lab-latte .latte-diff-n{font-family:var(--font-display);font-size:var(--fs-lead);color:var(--jd-clay-lt);line-height:1.2}.lab-latte .latte-diff-body{margin-top:var(--sp-3);max-width:46ch;color:var(--jd-clay-lt)}.lab-latte .latte-diff-photo{width:100%}.lab-latte .latte-marble{height:64px;margin-top:calc(var(--sp-8) * -1);position:relative}.lab-latte .latte-marble svg{width:100%;height:100%;display:block;position:absolute;inset:0}.lab-latte .latte-edge{fill:var(--jd-red)}.lab-latte .latte-thread{fill:none;stroke:var(--jd-red);stroke-width:1.4px;vector-effect:non-scaling-stroke}.lab-latte .latte-marble+footer{margin-top:-1px}@media (min-width:768px){.lab-latte .latte-hero-grid{padding:var(--sp-8) var(--sp-8) var(--sp-16)}.lab-latte .latte-wrap{padding-inline:var(--sp-8)}.lab-latte .latte-body{gap:var(--sp-6) var(--sp-8);grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;display:grid}.lab-latte .latte-controls{grid-column:1/-1}.lab-latte .latte-hint{grid-column:1}.lab-latte .latte-live{grid-area:2/2/span 2}.lab-latte .latte-lede{grid-column:1}.lab-latte .latte-coffees{padding-block:var(--sp-24) var(--sp-32)}.lab-latte .latte-sechead{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}.lab-latte .latte-sechead>p{grid-column:1/span 4}.lab-latte .latte-sechead>h2{grid-column:5/span 8}.lab-latte .latte-cards{gap:var(--sp-6);margin-top:var(--sp-16);grid-template-columns:repeat(2,minmax(0,1fr))}.lab-latte .latte-card.is-wide{grid-column:1/-1;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}.lab-latte .latte-card.is-wide .latte-card-cup{width:88%;margin:var(--sp-6) 0}.lab-latte .latte-card.is-wide .latte-card-body{padding:var(--sp-8)}.lab-latte .latte-matcha-grid{column-gap:var(--sp-8);grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}.lab-latte .latte-matcha-copy{grid-area:1/1/span 2/span 6}.lab-latte .latte-matcha-cup{grid-area:1/7/auto/span 6}.lab-latte .latte-matcha-photo{grid-area:2/9/auto/span 4}.lab-latte .latte-diff-grid{column-gap:var(--sp-12);grid-template-columns:repeat(12,minmax(0,1fr))}.lab-latte .latte-diff-copy{grid-column:1/span 7}.lab-latte .latte-diff-photo{grid-column:9/span 4;align-self:center}.lab-latte .latte-diff-list>li{padding-block:var(--sp-8);grid-template-columns:4rem 1fr}.lab-latte .latte-marble{height:96px}}@media (min-width:1024px){.lab-latte .latte-hero-grid{padding:var(--sp-8) var(--sp-12);column-gap:var(--sp-8);grid-template-rows:1fr auto auto 1fr;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.lab-latte .latte-head{grid-area:2/1}.lab-latte .latte-body{padding-top:var(--sp-8);gap:var(--sp-6);grid-area:3/1;display:flex}.lab-latte .latte-lede{order:1}.lab-latte .latte-controls{order:2}.lab-latte .latte-hint{order:3}.lab-latte .latte-live{order:4}.lab-latte .latte-slot{height:auto;min-height:calc(var(--cup) * 1.8);grid-area:1/2/-1;margin:0}.lab-latte .latte-note{z-index:2;left:calc(50% + var(--cup) * .2);top:calc(50% - var(--cup) * .86);width:calc(var(--cup) * .3);height:calc(var(--cup) * .58);pointer-events:none;display:block;position:absolute}.lab-latte .latte-note-line{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.lab-latte .latte-note-line path{fill:none;stroke:var(--jd-ink);stroke-width:1px;vector-effect:non-scaling-stroke;opacity:.55}.lab-latte .latte-note-line circle{fill:var(--jd-paper);stroke:var(--jd-ink);stroke-width:1px;vector-effect:non-scaling-stroke}.lab-latte .latte-note-text{left:calc(100% + var(--sp-2));white-space:nowrap;color:var(--jd-clay);position:absolute;top:0;transform:translateY(-50%)}.lab-latte .latte-cards{grid-template-columns:repeat(12,minmax(0,1fr))}.lab-latte .latte-card.is-wide{grid-column:span 7}.lab-latte .latte-card:not(.is-wide){grid-column:span 5}.lab-latte .latte-card.is-wide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media (min-width:1024px) and (max-height:700px){.lab-latte .latte-note{display:none}}}