.interactive-demos{margin:0 0 20px}
.demo-selector{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}
.demo-selector>span{font-size:.9rem;color:var(--muted)}
.demo-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.demo-tabs button{padding:13px 20px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font-size:.9rem}
.demo-tabs button:hover{border-color:#999;color:#fff}
.demo-tabs button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#101820;font-weight:600}
.demo-panel{padding:48px;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:6%;min-width:0;color-scheme:light}
.demo-panel[hidden]{display:none}
.demo-copy{min-width:0}
.demo-copy>p{font-size:.9rem}
.demo-copy h2{font-size:clamp(1.8rem,3vw,2.45rem)}
.demo-panel .data-stage{height:570px;min-width:0}
.demo-panel .data-stage miniature-earth{width:100%;height:100%}
.demo-coffee{background:#edf3e5;color:#393e2d}
.demo-coffee p{color:#59604b}
.demo-coffee a{color:#4c602d}
.demo-country{background:#f2f0ea}
.demo-routes{background:#e8f4fa;color:#203945}
.demo-routes p{color:#526c79}
.coffee-filters{display:flex;flex-wrap:wrap;gap:12px 18px;padding:0;margin:24px 0 18px;border:0}
.coffee-filters label{display:flex;align-items:center;gap:7px;min-height:32px;font-size:.8rem;cursor:pointer}
.coffee-filters input{width:16px;height:16px;margin:0;accent-color:#68783d;color-scheme:light}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.coffee-list{list-style:none;padding:0 6px 0 0;margin:0;max-height:330px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:#a2ad8e transparent;scrollbar-width:thin;position:relative}
.coffee-list li{border:1px solid #ccd5bd;border-radius:9px;margin-bottom:9px;overflow:hidden;background:#ffffff40}
.coffee-list li[hidden]{display:none}
.coffee-list li.is-selected{border-color:#7c8c59;background:#fffdf4}
.coffee-list button{display:block;text-align:left;width:100%;padding:13px 14px;border:0;background:transparent;color:#39402d;line-height:1.5}
.coffee-list button:hover{background:#ffffff70}
.coffee-list strong,.coffee-list small{display:block}
.coffee-list strong{font-size:.85rem;font-weight:600}
.coffee-list small{font-size:.7rem;color:#616a52;margin-top:4px}
.coffee-detail{padding:0 14px 14px}
.coffee-detail p{font-size:.76rem;line-height:1.7;margin:0}
.coffee-detail a{display:inline-block;font-size:.7rem;margin-top:10px}
.route-list{display:grid;gap:12px;list-style:none;padding:0;margin:24px 0}
.route-list button{width:100%;border:1px solid #bfd3df;border-left:4px solid var(--route-color);border-radius:8px;padding:15px 16px;text-align:left;background:#ffffff50;color:#203945;line-height:1.5}
.route-list button:hover{background:#ffffffb0}
.route-list button[aria-pressed=true]{background:#fff;border-color:var(--route-color);box-shadow:0 2px 10px #2746550c}
.route-list strong,.route-list small{display:block}
.route-list strong{font-weight:600;font-size:.86rem}
.route-list small{font-size:.72rem;color:#526c79;margin-top:5px}
.route-list .route-duration{color:var(--route-color);font-weight:600;margin-top:9px}
@media(max-width:1000px){.demo-panel{padding:36px 30px;gap:4%;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}.demo-panel .data-stage{height:530px}.coffee-filters{gap:10px 13px}.demo-tabs button{font-size:.84rem}}
@media(max-width:700px){.demo-selector{gap:12px;margin-bottom:18px}.demo-selector>span{flex-basis:100%;text-align:center;font-size:.8rem}.demo-tabs{gap:6px}.demo-tabs button{padding:11px 8px;font-size:.75rem}.demo-panel{padding:30px 22px;grid-template-columns:minmax(0,1fr);gap:14px}.demo-panel .data-stage{height:440px;margin:0 -12px}.demo-copy h2{font-size:1.9rem}.demo-copy>p{font-size:.84rem}.coffee-list{max-height:290px}.coffee-filters{gap:15px}.route-list{gap:10px;margin:20px 0}.demo-panel .data-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}