.demo{padding:var(--space-24) 0;text-align:center;scroll-margin-top:var(--layout-header-height)}.demo__inner{width:100%;max-width:44rem;margin:0 auto;padding-left:var(--space-6);padding-right:var(--space-6)}.demo__title{margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--font-size-section-title);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-text)}.demo__subtitle{margin:0 0 var(--space-8);font-family:var(--font-sans);font-size:var(--font-size-section-subtitle);color:var(--color-text-muted)}.demo__form{display:flex;gap:var(--space-3);text-align:left}.demo__form .input{flex:1;min-width:0}.demo__input{font-family:var(--font-mono)}.demo__error{margin:var(--space-4) 0 0;font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-error-text);text-align:left}.demo__deck{--_card: max(30%, 24rem);--_gap: var(--space-6);--_dim: .4;--_dim-hover: .7;--_hold: 15s;width:100%;margin:var(--space-8) auto 0;padding-top:var(--space-4);padding-bottom:var(--space-8);overflow:hidden;touch-action:pan-y}.demo__track{display:grid;grid-template-columns:minmax(0,1fr)}.demo__slide{position:relative;grid-area:1 / 1;justify-self:center;width:var(--_card);transform:translate(calc(var(--_off) * (100% + var(--_gap)))) scale(var(--_scale, 1));transition:transform var(--transition-superslow),opacity var(--transition-superslow)}.demo__slide--centre{--_scale: 1;z-index:2;opacity:1}.demo__slide--near{--_scale: .94;z-index:1;opacity:var(--_dim)}.demo__slide--near:hover{opacity:var(--_dim-hover)}.demo__slide--far{--_scale: .94;z-index:0;opacity:0;pointer-events:none}.demo__pick{position:absolute;inset:0;z-index:1;padding:0;background:none;border:0;border-radius:var(--radius-lg);cursor:pointer}.demo__pick:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.demo__card{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--color-surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:left}.demo__timer{position:absolute;inset:0 0 auto;height:3px;background:var(--color-surface-control);opacity:0;transition:opacity var(--transition-base)}.demo__slide--centre .demo__timer{opacity:1}.demo__timer-fill{display:block;height:100%;background:var(--color-border-subtle);transform:scaleX(0);transform-origin:left center}.demo__slide--centre .demo__timer-fill{animation:demo-hold var(--_hold) linear forwards}.demo__deck--paused .demo__timer-fill{animation-play-state:paused}.demo__deck--pinned .demo__timer{opacity:0}@keyframes demo-hold{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.demo__card-tag{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin:0;padding:var(--space-3) var(--space-4) 0;font-family:var(--font-mono);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted)}.demo__card-subject{text-transform:none;letter-spacing:-.01em}.demo__well{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}.demo__well-water{position:relative;flex:1;min-height:10rem;background-color:var(--color-map-water);border-radius:var(--radius-md)}.demo__well-water:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow-groove)}.demo__well-caption{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-2)}.demo__well-place{font-size:var(--font-size-sm);color:var(--color-text)}.demo__well-coords{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-muted)}.demo__card-footer{margin-top:auto;padding:var(--space-4);text-align:center}.demo__cta{font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);text-decoration:none;transition:color var(--transition-fast)}.demo__cta:hover{color:var(--color-action-text)}@media(prefers-reduced-motion:reduce){.demo__timer{display:none}}.demo__card .geo-map--fill .geo-map__well{min-height:10rem}@media(max-width:75rem){.demo__deck{--_peek: 3rem;--_card: min(calc(100% - 2 * var(--_peek)), 44rem);--_gap: var(--space-2);--_dim: 1;--_dim-hover: 1}}@media(max-width:40rem){.demo{padding:var(--space-16) 0}.demo__deck{--_peek: var(--space-8)}.demo__card .demo__well-water{display:none}.demo__card .passport__page--map .passport__page-label{margin-bottom:var(--space-1)}.demo__card .demo__well-caption{margin-bottom:0}.demo__card .passport__record-body{gap:var(--space-4)}.demo__card .passport__guilloche{margin-top:var(--space-1)}.demo__card-footer{padding:var(--space-3)}}
