.kopi-brew{--kb-ink:#1f1e20;--kb-red:#d23e2e;--kb-paper:#f8f4ec;--kb-line:#dedbd4;color:var(--kb-ink);background:#fff;font-family:var(--font-body-family,inherit);line-height:1.5}.kopi-brew *{box-sizing:border-box}.kopi-brew [hidden]{display:none!important}.kopi-brew__shell{max-width:1240px;margin:auto;padding:42px 20px 96px}.kopi-brew__hero{padding:24px 0 44px;border-bottom:1px solid var(--kb-line)}.kopi-brew__eyebrow,.kopi-brew__number{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.kopi-brew__number{color:var(--kb-red);margin-bottom:16px}.kopi-brew h1,.kopi-brew h2,.kopi-brew h3{color:var(--kb-ink);font-family:var(--font-heading-family,inherit);line-height:1.1;margin:0}.kopi-brew h1{font-size:clamp(48px,8vw,108px);max-width:900px;letter-spacing:-.065em;margin:24px 0}.kopi-brew h2{font-size:clamp(28px,4vw,48px);letter-spacing:-.045em;margin-bottom:24px}.kopi-brew h3{font-size:22px}.kopi-brew p{margin:12px 0}.kopi-brew__hero p{font-size:18px;max-width:540px}.kopi-brew__layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:48px}.kopi-brew__panel{padding:45px 0;border-bottom:1px solid var(--kb-line)}.kopi-brew__aside{position:sticky;top:28px;align-self:start;padding:40px 28px;min-height:320px;background:var(--kb-paper);margin-top:45px;overflow:hidden}.kopi-brew__aside p{font-size:26px;font-weight:600;line-height:1.2}.kopi-brew__aside-mark{position:absolute;bottom:-60px;right:-15px;font-size:180px;font-weight:800;color:#e8e1d5}.kopi-brew__label,.kopi-brew label{display:block;font-size:14px;font-weight:600;margin:18px 0 8px}.kopi-brew input,.kopi-brew textarea,.kopi-brew select{font:inherit;width:100%;border:1px solid #a7a4a0;border-radius:0;background:#fff;color:var(--kb-ink);padding:15px 16px;min-height:52px}.kopi-brew input:focus-visible,.kopi-brew textarea:focus-visible,.kopi-brew select:focus-visible,.kopi-brew button:focus-visible{outline:3px solid var(--kb-red);outline-offset:3px}.kopi-brew__results{max-height:340px;overflow-y:auto;border:1px solid var(--kb-line);margin-top:12px}.kopi-brew__result{width:100%;display:flex;align-items:center;gap:16px;text-align:left;background:white;border:0;border-bottom:1px solid var(--kb-line);color:inherit;padding:10px;cursor:pointer;font:inherit;min-height:76px}.kopi-brew__result:hover{background:var(--kb-paper)}.kopi-brew__result img{width:56px;height:56px;object-fit:cover}.kopi-brew__result strong,.kopi-brew__result small{display:block}.kopi-brew__result small{color:#626263}.kopi-brew__selected{display:flex;align-items:center;gap:24px;padding:24px;background:var(--kb-paper);margin-top:18px}.kopi-brew__selected img{width:120px;height:120px;object-fit:cover}.kopi-brew__selected h3{margin:8px 0}.kopi-brew__muted{color:#626263;font-size:14px}.kopi-brew__choices,.kopi-brew__directions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kopi-brew__option,.kopi-brew__direction{font:inherit;cursor:pointer;text-align:left;color:var(--kb-ink);background:white;border:1px solid var(--kb-line);padding:22px;min-height:76px}.kopi-brew__option[aria-pressed=true],.kopi-brew__direction[aria-pressed=true]{border:2px solid var(--kb-ink)}.kopi-brew__direction{min-height:165px;display:flex;flex-direction:column;justify-content:space-between}.kopi-brew__direction strong{font-size:24px}.kopi-brew__direction--sweet{background:#eee5d8}.kopi-brew__direction--bright{background:#f5eddf;border-top:4px solid var(--kb-red)}.kopi-brew__badge{display:inline-block;font-size:12px;font-weight:700;padding:8px 12px;background:#e7eee7;margin:0 0 28px!important}.kopi-brew__badge--draft{background:#f5e8db}.kopi-brew__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 32px;border-top:1px solid var(--kb-line)}.kopi-brew__stats div{padding:18px 8px 18px 0;border-bottom:1px solid var(--kb-line)}.kopi-brew__stats dt{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#626263}.kopi-brew__stats dd{font-size:18px;font-weight:600;margin:6px 0 0}.kopi-brew__steps{counter-reset:step;list-style:none;padding:0}.kopi-brew__steps li{padding:16px 0;border-bottom:1px solid var(--kb-line);display:flex;gap:16px}.kopi-brew__steps li:before{counter-increment:step;content:counter(step,decimal-leading-zero);font-size:12px;color:var(--kb-red);font-weight:700}.kopi-brew__timer{padding:20px;background:var(--kb-paper);margin-top:24px}.kopi-brew__timer #kopi-clock{font-size:48px;font-variant-numeric:tabular-nums;font-weight:700}.kopi-brew__button{font:inherit;cursor:pointer;border:1px solid var(--kb-ink);background:var(--kb-ink);color:#fff;min-height:48px;padding:11px 20px;margin:10px 10px 0 0}.kopi-brew__button--outline{background:transparent;color:var(--kb-ink)}.kopi-brew__ratings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.kopi-brew__ratings label{margin:0}.kopi-brew__clear{background:none;border:0;padding:10px 0;color:var(--kb-ink);text-decoration:underline;cursor:pointer;font:inherit}.kopi-brew__history{padding:20px;background:var(--kb-paper);margin:22px 0}.kopi-brew__saved{font-weight:600}.kopi-brew__alert{padding:16px 20px;background:#f5e8db;margin-top:20px}@media(max-width:780px){.kopi-brew__layout{display:block}.kopi-brew__aside{display:none}.kopi-brew__shell{padding:20px 18px 70px}.kopi-brew__hero{padding:22px 0 30px}.kopi-brew__hero p{font-size:16px}.kopi-brew__panel{padding:34px 0}.kopi-brew__selected img{width:88px;height:88px}.kopi-brew__ratings{grid-template-columns:1fr}.kopi-brew__directions{gap:8px}.kopi-brew__direction{padding:16px;min-height:160px}.kopi-brew__direction strong{font-size:20px}}@media(max-width:390px){.kopi-brew__selected{padding:14px;gap:12px}.kopi-brew__selected img{width:70px;height:70px}.kopi-brew__stats{grid-template-columns:1fr}}@media(prefers-reduced-motion:no-preference){.kopi-brew__option,.kopi-brew__direction,.kopi-brew__button{transition:background .2s ease,transform .2s ease}.kopi-brew__option:hover,.kopi-brew__direction:hover{transform:translateY(-2px)}}