:root{font-family:DM Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f5ecd7;background:#0e0703;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button{font:inherit}.app-shell{min-height:100vh;background:radial-gradient(ellipse 90% 55% at 50% 0%,rgba(200,145,74,.09),transparent 70%),#0e0703;color:#f5ecd7}.hero-section{display:flex;flex-direction:column;align-items:center;padding:80px 24px 60px;text-align:center;animation:fade-up .75s ease forwards}.hero-section h1{margin:28px 0 18px;color:#f5ecd7;font-family:Playfair Display,Georgia,serif;font-size:clamp(52px,9vw,96px);font-weight:700;line-height:1;letter-spacing:0}.hero-section em{color:#c8914a;font-style:italic}.hero-section p{max-width:420px;margin:0;color:#f5ecd785;font-size:17px;font-weight:300;line-height:1.8}.content-divider{max-width:1176px;height:1px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(200,145,74,.22),transparent)}.filter-section{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:48px 40px 52px}.filter-button{min-height:42px;border:1px solid rgba(200,145,74,.22);border-radius:999px;padding:10px 28px;background:#c8914a12;color:#f5ecd79e;cursor:pointer;font-size:14px;letter-spacing:.03em;transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease}.filter-button:hover{transform:translateY(-2px);border-color:#c8914a75;color:#f5ecd7}.filter-button.active{border-color:#c8914a;background:#c8914a;color:#0e0703;font-weight:600}.coffee-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;max-width:1240px;margin:0 auto;padding:0 28px 100px}.coffee-card{display:flex;min-height:100%;flex-direction:column;overflow:hidden;border:1px solid rgba(200,145,74,.13);border-radius:8px;background:#160803;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.coffee-card:hover{transform:translateY(-9px);border-color:#c8914a52;box-shadow:0 32px 72px #000000b3,0 0 0 1px #c8914a52}.cup-panel{position:relative;display:flex;min-height:230px;flex-direction:column;align-items:center;padding:36px 0 0;background:#100603}.steam{position:absolute;top:8px;left:50%;width:48px;margin-left:-12px;pointer-events:none}.steam svg{width:48px;height:36px;overflow:visible}.steam path{fill:none;stroke:#f5ecd72b;stroke-linecap:round;stroke-width:1.8;animation:steam 2.4s ease-in infinite}.steam path:nth-child(2){animation-delay:.6s}.steam path:nth-child(3){animation-delay:1.2s}.coffee-cup{width:112px;height:148px;margin-top:6px;animation:float-cup 4.5s ease-in-out infinite}.cup-shadow{fill:#00000073}.saucer-fill{fill:#1e0b05}.saucer-line,.cup-line{fill:none;stroke:#c8914a;stroke-linejoin:round}.saucer-line{stroke-opacity:.4;stroke-width:.8}.cup-line{stroke-width:1.6}.cup-handle{fill:none;stroke:#c8914a;stroke-linecap:round;stroke-width:2.2}.layer-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;padding:14px 18px 22px}.layer-item{display:inline-flex;align-items:center;gap:5px;color:#f5ecd759;font-size:10px;letter-spacing:.04em}.layer-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;box-shadow:0 0 0 1px #ffffff1a}.card-body{display:flex;flex:1;flex-direction:column;padding:18px 22px 26px}.card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:16px}.temperature-badge{border-radius:999px;padding:4px 14px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.temperature-badge.hot{background:#dc643224;color:#e87a50}.temperature-badge.cold{background:#468cdc24;color:#70a8df}.serve-size{color:#f5ecd747;font-size:11px;font-weight:300}.card-body h2{margin:0 0 3px;color:#f5ecd7;font-family:Playfair Display,Georgia,serif;font-size:22px;font-weight:700;line-height:1.2}.tagline{margin:0 0 18px;color:#b8906a;font-family:Playfair Display,Georgia,serif;font-size:13px;font-style:italic;line-height:1.4}.strength-row{display:flex;align-items:center;gap:10px;margin-bottom:15px}.strength-row>span{color:#f5ecd74d;font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.strength-meter{display:flex;gap:4px}.strength-dot{width:9px;height:9px;border-radius:50%;background:#c8914a2e}.strength-dot.active{background:#c8914a}.flavor-list{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:18px}.flavor-list span{border:1px solid rgba(200,145,74,.2);border-radius:999px;padding:3px 11px;background:#c8914a12;color:#c8914a;font-size:10px;letter-spacing:.04em}.description{margin:auto 0 0;color:#f5ecd78f;font-size:13px;line-height:1.8}.app-footer{border-top:1px solid rgba(200,145,74,.07);padding:36px 40px;color:#f5ecd72e;font-size:11px;letter-spacing:.1em;text-align:center;text-transform:uppercase}@keyframes fade-up{0%{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@keyframes steam{0%{opacity:.45;transform:translateY(0) scaleX(1)}to{opacity:0;transform:translateY(-20px) scaleX(.8)}}@keyframes float-cup{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@media(max-width:720px){.hero-section{padding:64px 20px 48px}.filter-section{padding:36px 20px 40px}.filter-button{flex:1 1 140px;padding-right:18px;padding-left:18px}.coffee-grid{grid-template-columns:1fr;padding:0 18px 72px}}.title-badge{display:inline-flex;padding:5px 18px;background-color:#c8914a1a;color:#c8914a;align-items:center;justify-content:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(200,145,74,.3)}