.preview-context{color:var(--muted);font-size:.77rem;margin-top:2px}
.demo{
  container-type:inline-size;
  --base:#3a2722;--secondary:#b5c0aa;--pop:#f59eba;
  --on-base:#fff;--on-secondary:#171717;--on-pop:#171717;
  color:var(--on-base);background:var(--base);font-family:Geist,sans-serif;
  overflow:hidden;position:relative;perspective:1000px
}
.sample-inner{padding:clamp(13px,3cqw,30px);transform-origin:left center}
.sample-nav{
  display:flex;justify-content:space-between;align-items:center;gap:9px;
  padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,currentColor,transparent 72%)
}
.roaster-brand{color:inherit;text-decoration:none;font:700 clamp(22px,3.8cqw,36px)/1 var(--display,Geist),sans-serif;letter-spacing:-.055em}
.roaster-brand span{color:var(--pop)}
.sample-nav nav{display:flex;gap:clamp(8px,2cqw,16px);align-items:center;flex-wrap:wrap}
.sample-nav button{background:none;color:inherit;border:0;padding:6px 0;font-size:clamp(10px,1.45cqw,13px)}
.sample-nav button:hover{text-decoration:underline;text-underline-offset:3px}
#roaster-menu{display:none}
.demo[data-mode="perspective-nav"] #roaster-menu{display:block}
.demo[data-mode="perspective-nav"] .sample-nav{position:relative}
.demo[data-mode="perspective-nav"] .sample-nav nav{
  display:none;position:absolute;z-index:3;top:100%;right:0;
  padding:8px 14px;background:var(--secondary);color:var(--on-secondary);border:1px solid currentColor
}
.demo[data-mode="perspective-nav"][data-menu="true"] .sample-nav nav{display:flex}
.sample-hero{
  display:grid;grid-template-columns:var(--columns,minmax(0,1fr) minmax(0,1fr));
  align-items:center;gap:clamp(12px,3cqw,32px);padding:clamp(14px,3cqw,28px) 0;
  position:relative;isolation:isolate
}
.sample-copy{min-width:0;order:var(--copy-order,0)}
.sample-kicker{font:500 clamp(9px,1.3cqw,12px)/1.35 "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.11em;margin-bottom:8px}
.sample-copy h3{
  font:var(--weight,650) clamp(28px,var(--headline,7cqw),76px)/.93 var(--display,Geist),sans-serif;
  letter-spacing:var(--tracking,-.055em);text-transform:var(--casing,none);text-wrap:balance;overflow-wrap:break-word
}
#sample-description{margin-top:9px;max-width:34ch;font-size:clamp(11px,1.75cqw,15px);line-height:1.42}
#sample-action,#finish{
  font:700 clamp(10px,1.5cqw,13px)/1.2 Geist,sans-serif;
  background:var(--pop);color:var(--on-pop);border:1px solid transparent;
  border-radius:var(--action-radius,5px);padding:9px 12px;margin-top:12px
}
#sample-action:hover,#finish:hover{border-color:currentColor}
#sample-action span{margin-left:3px}
.sample-art{
  position:relative;isolation:isolate;min-width:0;overflow:hidden;
  background:var(--secondary);border:var(--art-line,1px solid transparent);
  border-radius:var(--art-radius,8px);aspect-ratio:var(--art-ratio,1.44)
}
.sample-art img,.sample-art canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.coffee-photo{object-fit:cover;object-position:58% center}
.sample-art canvas{object-fit:contain}
.demo :focus-visible{outline:2px solid currentColor;outline-offset:3px}
#scene-controls{position:absolute;right:7px;bottom:7px;display:flex;gap:5px}
#scene-controls button,#hotspot{background:var(--pop);color:var(--on-pop);border:1px solid currentColor;border-radius:50%;width:34px;height:34px;padding:0}
#hotspot{position:absolute;top:42%;left:57%;font-weight:700}
#hotspot-note,#finish{position:absolute;left:8px;bottom:8px}
#hotspot-note{background:var(--base);color:var(--on-base);max-width:70%;padding:6px 8px;font-size:.72rem}
.pour-line{
  display:none;position:absolute;z-index:1;top:-8%;left:69%;height:58%;width:clamp(3px,.7cqw,8px);
  border-radius:0 0 80% 35%;background:linear-gradient(90deg,#8c4926,#2c1109 75%,#ca8551);
  transform:scaleY(0);transform-origin:top;pointer-events:none
}
.demo[data-mode="coffee-pour"] .pour-line{display:block}
.sample-collection{padding-top:10px;border-top:1px solid color-mix(in srgb,currentColor,transparent 72%)}
.collection-heading{display:flex;justify-content:space-between;align-items:baseline;gap:7px;margin-bottom:8px}
.collection-heading h4,.sample-story h4{margin:0;font:var(--weight,650) clamp(17px,3.1cqw,29px)/1 var(--display,Geist),sans-serif;letter-spacing:-.035em}
.collection-heading span{font:400 clamp(9px,1.4cqw,12px) "IBM Plex Mono",monospace}
.sample-cards{display:grid;grid-template-columns:var(--cards,repeat(3,minmax(0,1fr)));gap:7px}
.sample-cards>div{
  display:grid;gap:3px;padding:clamp(7px,1.45cqw,13px);min-width:0;
  background:var(--card-bg,var(--secondary));color:var(--card-ink,var(--on-secondary));
  border:var(--card-line,1px solid transparent);border-radius:var(--card-radius,5px);box-shadow:var(--card-shadow,none)
}
.sample-cards strong{font:var(--card-weight,650) clamp(13px,2.5cqw,25px)/1.1 var(--card-font,Geist),sans-serif}
.sample-cards small{font-size:clamp(9px,1.4cqw,12px)}.sample-cards b{font:500 11px "IBM Plex Mono",monospace}
#extra-surfaces{margin-top:7px}
.sample-story{border-top:1px solid currentColor;margin-top:14px;padding-top:12px}
.sample-story p{max-width:49ch;margin-top:6px;font-size:clamp(11px,1.6cqw,15px)}

/* Lead styles change the page's composition. Supporting styles dress the product cards. */
.demo[data-layout="masthead"] .sample-hero{grid-template-columns:1fr;text-align:center;gap:12px}
.demo[data-layout="masthead"] .sample-copy{order:-1}
.demo[data-layout="masthead"] #sample-description{margin-inline:auto}
.demo[data-layout="masthead"] .sample-art{aspect-ratio:2.85}
.demo[data-layout="masthead"] .coffee-photo{object-position:center 56%}
.demo[data-layout="cinema"] .sample-hero{display:flex;align-items:end;min-height:clamp(248px,43cqw,392px);padding:clamp(11px,2cqw,18px);margin:12px 0}
.demo[data-layout="cinema"] .sample-art{position:absolute;inset:0;aspect-ratio:auto;z-index:-1}
.demo[data-layout="cinema"] .sample-copy{background:var(--base);padding:clamp(10px,2cqw,20px);max-width:61%;border-radius:var(--action-radius,5px)}
.demo[data-layout="cinema"] .sample-copy h3{font-size:clamp(27px,7.8cqw,67px)}
.demo[data-lead="cinematic-editorial"] .sample-copy h3{font-style:italic}
.demo[data-layout="grid"] .sample-hero{align-items:stretch;gap:7px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.demo[data-layout="grid"] .sample-copy{padding:clamp(8px,2cqw,21px);border:1px solid currentColor;align-content:center}
.demo[data-layout="grid"] .sample-art{aspect-ratio:1.4}
.demo[data-layout="grid"] .sample-cards{--cards:1.45fr 1fr 1fr}
.demo[data-layout="grid"] .sample-cards>div:first-child{background:var(--pop);color:var(--on-pop)}
.demo[data-layout="framed"] .sample-hero{border-bottom:1px solid currentColor;margin-bottom:8px}
.demo[data-layout="framed"] .sample-copy{border-left:4px solid var(--pop);padding-left:clamp(7px,2cqw,16px)}
.demo[data-layout="framed"] .sample-art{border-width:2px;border-style:solid}
.demo[data-layout="framed"] .sample-nav{border-bottom:2px solid}
.demo[data-layout="feature"] .sample-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.demo[data-layout="feature"] .sample-art{order:-1}
.demo[data-lead="aurora"] .sample-inner{background:radial-gradient(ellipse at 64% -32%,color-mix(in srgb,var(--pop),transparent 55%),transparent 73%)}
.demo[data-lead="retro-design"] .coffee-photo,.demo[data-lead="victorian"] .coffee-photo{filter:sepia(.42)}
.demo[data-lead="cyberpunk"] .coffee-photo,.demo[data-lead="technical-modern"] .coffee-photo{filter:saturate(.58) contrast(1.18)}
.demo[data-lead="pixel-art"] .sample-art canvas,.demo[data-support="pixel-art"] .sample-art canvas{image-rendering:pixelated}
.sample-cards>div[data-treatment="retro-design"]{border-radius:20px 20px 4px 4px}
.sample-cards>div[data-treatment="bohemian"]{border-radius:27px 9px 24px 12px}
.sample-cards>div[data-treatment="art-deco"]{border-radius:20px 20px 0 0}
.sample-cards>div[data-treatment="surreal"]{border-radius:32% 20% 26% 10%}
.sample-cards>div[data-treatment="bauhaus"]{border-left:6px solid var(--pop)}
.sample-cards>div[data-treatment="graffiti"] strong,.sample-cards>div[data-treatment="handwritten"] strong{font-style:italic}
.sample-cards>div[data-treatment="victorian"]{border:3px double currentColor}
.sample-cards>div[data-treatment="pop-art"],.sample-cards>div[data-treatment="comic-book"]{
  background-image:radial-gradient(color-mix(in srgb,currentColor,transparent 86%) 1px,transparent 1px);background-size:6px 6px
}
.sample-cards>div[data-treatment="collage"]{border-style:dashed}
@container(max-width:430px){
  .sample-inner{padding:11px}
  .demo .sample-hero,.demo[data-layout="grid"] .sample-hero,.demo[data-layout="feature"] .sample-hero{grid-template-columns:minmax(0,1fr);gap:9px;padding:10px 0}
  .sample-copy,.demo[data-layout="feature"] .sample-art{order:0}
  .sample-copy h3{font-size:clamp(25px,9cqw,41px)}
  #sample-description{margin-top:5px}#sample-action{margin-top:8px;padding:7px 9px}
  .demo[data-layout="cinema"] .sample-hero{padding:9px;min-height:220px}
  .demo[data-layout="cinema"] .sample-copy{max-width:75%}
  .demo[data-layout="cinema"] .sample-copy h3{font-size:clamp(23px,7.5cqw,35px)}
  .sample-art,.demo[data-layout="grid"] .sample-art{aspect-ratio:2.2}
  .sample-cards{gap:4px}
}
.sample-art canvas{cursor:grab;touch-action:pan-y}.sample-art canvas:active{cursor:grabbing}
@container(max-width:430px){
  .demo[data-layout="feature"] .sample-art{order:-1}
  .demo[data-layout="masthead"] .sample-art{aspect-ratio:2.65}
  .demo[data-layout="grid"] .sample-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo[data-layout="grid"] .sample-cards>div:first-child{grid-column:1/-1}
}