.coffee-demo { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:56px; align-items:center; max-width:1192px; margin:0 auto 100px; padding:48px; border:1px solid #e6e8ee; border-radius:28px; background:linear-gradient(135deg,#f7f8ff,#fffaf3); color:#202839; }
.landing-hero h1, .landing-hero h1 strong { word-break:keep-all; overflow-wrap:normal; }
.coffee-demo-kicker { color:#4967be; font-size:11px; font-weight:800; letter-spacing:.13em; }
.coffee-demo h2 { margin:18px 0; font-size:clamp(28px,3vw,42px); letter-spacing:-.055em; line-height:1.25; word-break:keep-all; }
.coffee-demo h2 strong { color:#376cfb; }
.coffee-demo-copy>p { line-height:1.8; color:#606a7d; word-break:keep-all; }
.coffee-demo ol { list-style:none; display:grid; gap:14px; padding:0; margin:26px 0; font-size:14px; font-weight:650; }
.coffee-demo li span { display:inline-grid; place-items:center; width:28px; height:28px; margin-right:10px; border-radius:9px; color:#376cfb; background:#e9efff; font-size:11px; }
.coffee-demo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.coffee-demo-actions button { min-height:44px; padding:12px 16px; border:1px solid #d3dcf0; border-radius:12px; background:#fff; color:#283b62; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.coffee-demo-actions button:first-child { background:#376cfb; color:#fff; border-color:#376cfb; }
.coffee-demo-actions button:focus-visible { outline:3px solid #7498ff; outline-offset:3px; }
.coffee-demo-copy .coffee-demo-status { margin-top:12px; font-size:12px; }
.coffee-demo-copy>small { display:block; margin-top:18px; font-size:11px; line-height:1.7; color:#798296; word-break:keep-all; }
.coffee-demo-credit { display:inline-block; margin-top:12px; color:#63728c; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.coffee-demo-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0; }
.coffee-demo figure { margin:0; padding:10px; min-width:0; border:1px solid #e0e4eb; border-radius:20px; background:#fff; box-shadow:0 12px 30px #2235530a; }
.coffee-demo figure.coffee-demo-result { border-color:#abc1ff; box-shadow:0 12px 35px #376cfb14; }
.coffee-demo figcaption { display:flex; flex-direction:column; gap:4px; padding:5px 3px 12px; font-size:11px; color:#738097; }
.coffee-demo figcaption b { color:#485268; font-size:12px; letter-spacing:.08em; }
.coffee-demo-result figcaption b { color:#376cfb; }
.coffee-demo video { display:block; width:100%; aspect-ratio:9/16; border-radius:12px; background:#16191e; object-fit:contain; }
.coffee-demo figure>p { margin:10px 0 2px; text-align:center; font-size:10px; color:#788196; }
html[data-theme="dark"] .coffee-demo { background:linear-gradient(135deg,#171e2d,#242222); border-color:#354054; color:#f0f3fa; }
html[data-theme="dark"] .coffee-demo-copy>p,html[data-theme="dark"] .coffee-demo-copy>small,html[data-theme="dark"] .coffee-demo-credit { color:#b0bdd2; }
html[data-theme="dark"] .coffee-demo figure { background:#202838; border-color:#414e64; }
html[data-theme="dark"] .coffee-demo figcaption b { color:#a8c1ff; }
@media(max-width:1100px) { .coffee-demo { margin-left:24px; margin-right:24px; gap:28px; padding:30px; } }
@media(max-width:800px) { .coffee-demo { grid-template-columns:1fr; } .coffee-demo-pair { width:min(100%,550px); margin:0 auto; } }
@media(max-width:480px) { .coffee-demo { margin:0 18px 70px; padding:26px 18px; border-radius:20px; } .coffee-demo-pair { grid-template-columns:1fr; max-width:270px; gap:22px; } .coffee-demo h2 { font-size:29px; } }