main.app-interactions { max-width: 760px; }
main.app-interactions { margin: 0 auto; }
main.app-interactions { padding: 2.5rem 1.5rem; }
.ix-eyebrow { text-transform: uppercase; }
.ix-eyebrow { letter-spacing: .08em; }
.ix-eyebrow { font-size: .8rem; }
.ix-eyebrow { opacity: .7; }
.ix-tagline { font-size: 1.05rem; }
.ix-tagline { opacity: .85; }
.ix-tagline { margin-top: .5rem; }
.ix-panel { margin: 1.5rem 0; }
.ix-panel { padding: 1.5rem; }
.ix-panel h2 { margin-top: 0; }
.ix-note { margin-top: 1rem; }
.ix-note { font-size: .9rem; }
.ix-note { opacity: .7; }
.readout { margin-top: .75rem; }
.readout { font-size: 1.1rem; }
input[type=range] { width: 100%; }
input[type=range] { accent-color: var(--accent); }
.sortlist .row { display: flex; }
.sortlist .row { align-items: center; }
.sortlist .row { gap: .6rem; }
.sortlist .row { padding: .7rem .9rem; }
.sortlist .row { margin: .4rem 0; }
.sortlist .row { border: 1px solid var(--line); }
.sortlist .row { border-radius: 10px; }
.sortlist .row { background: var(--paper); }
.sortlist .row { cursor: grab; }
.sortlist .row { user-select: none; }
.sortlist .row[data-wd-dragging] { opacity: .6; }
.sortlist .row[data-wd-dragging] { cursor: grabbing; }
.sortlist .row:focus-visible { outline: 2px solid var(--accent); }
.sortlist .row:focus-visible { outline-offset: 2px; }
.grip { color: var(--muted); }
.grip { font-size: 1.1rem; }
.wd-carousel { position: relative; }
.wd-carousel { margin-top: .5rem; }
.wd-carousel-track { display: flex; }
.wd-carousel-track { overflow-x: auto; }
.wd-carousel-track { scroll-snap-type: x mandatory; }
.wd-carousel-track { scroll-behavior: smooth; }
.wd-carousel-track { gap: 1rem; }
.wd-carousel-track .slide { flex: 0 0 100%; }
.wd-carousel-track .slide { scroll-snap-align: start; }
.wd-carousel-track .slide { border: 1px solid var(--line); }
.wd-carousel-track .slide { border-radius: 12px; }
.wd-carousel-track .slide { padding: 1.75rem; }
.wd-carousel-track .slide { background: var(--paper); }
.wd-carousel-prev, .wd-carousel-next { position: absolute; }
.wd-carousel-prev, .wd-carousel-next { top: 40%; }
.wd-carousel-prev, .wd-carousel-next { border: 1px solid var(--line); }
.wd-carousel-prev, .wd-carousel-next { background: var(--paper); }
.wd-carousel-prev, .wd-carousel-next { color: var(--ink); }
.wd-carousel-prev, .wd-carousel-next { border-radius: 999px; }
.wd-carousel-prev, .wd-carousel-next { width: 2.25rem; }
.wd-carousel-prev, .wd-carousel-next { height: 2.25rem; }
.wd-carousel-prev, .wd-carousel-next { cursor: pointer; }
.wd-carousel-prev { left: -.5rem; }
.wd-carousel-next { right: -.5rem; }
.wd-carousel-dots { display: flex; }
.wd-carousel-dots { justify-content: center; }
.wd-carousel-dots { gap: .5rem; }
.wd-carousel-dots { margin-top: .75rem; }
.wd-carousel-dot { width: .6rem; }
.wd-carousel-dot { height: .6rem; }
.wd-carousel-dot { padding: 0; }
.wd-carousel-dot { border: 0; }
.wd-carousel-dot { border-radius: 999px; }
.wd-carousel-dot { background: var(--line); }
.wd-carousel-dot { cursor: pointer; }
.wd-carousel-dot[aria-current=true] { background: var(--accent); }