@font-face { font-family: Satoshi; src: url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #e9edf1; }
.list-demo { --panel-time: 320ms; --camera-time: 400ms; position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; }
.list-camera { position: absolute; top: 48px; left: 50%; width: 285px; height: var(--panel-height, 540px); transform-origin: center top; transform: translateX(-50%) scale(var(--open-scale, 1)); }
.list-demo .poi-toggle { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%) scale(var(--trigger-scale, 2)); visibility: visible; transition: opacity .25s, border-bottom-color .3s, visibility 0s var(--camera-time); }
.list-demo.is-open .poi-toggle { visibility: hidden; pointer-events: none; transition-delay: 0s; }
.panel-viewport { position: absolute; inset: 0; overflow: visible; z-index: 35; pointer-events: none; }
.list-demo.is-open .panel-viewport { pointer-events: auto; }
.list-demo .poi-panel { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; pointer-events: none; transform: translateX(calc(50vw / var(--open-scale, 1) + 50% + 1px)); transition: transform var(--panel-time) cubic-bezier(.22,1,.36,1), visibility 0s var(--camera-time); --poi-accent: #9b7aa6; }
.list-demo.is-open .poi-panel { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
.list-demo .poi-mode-text:disabled, .list-demo .poi-mode-text:disabled:hover { opacity: .22; cursor: default; letter-spacing: normal; }
.list-demo .poi-panel-head { padding-top: 14px; }
.list-demo .poi-list { min-height: 0; max-height: var(--list-scroll-height); }
.list-demo .poi-item { cursor: default; }
.list-demo .poi-item:hover { background: none; }
.list-hint { position: absolute; bottom: 16px; left: 50%; z-index: 40; transform: translateX(-50%); padding: 8px 14px; border-radius: 20px; background: #faf7f2eb; color: #000100; font: 13px/1.4 Satoshi, sans-serif; text-align: center; white-space: nowrap; pointer-events: none; opacity: 1; visibility: visible; transition: opacity 160ms ease var(--camera-time), visibility 0s var(--camera-time); }
.list-demo.is-open .list-hint { opacity: 0; visibility: hidden; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .list-camera, .list-demo .poi-panel, .list-hint { transition: none; } }

@media (max-width: 620px) {
  .list-demo .poi-mode-text { font-size: 14px; }
  .list-demo .poi-chip { font-size: 13px; min-height: 36px; }
  .list-demo .poi-item-name { font-size: 14px; }
  .list-demo .poi-item-note, .list-demo .poi-item-rating { font-size: 12px; }
}