/* The tap-through device story uses the app's supplied tokens and screen layouts. */
.device-flow { padding-top: 64px; padding-bottom: 80px; overflow: clip; }
.df-topline { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--divider); }
.df-topline > span { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--text-muted); }
.df-motion { padding: 12px 0; min-height: 44px; background: transparent; border: 0; color: var(--text-muted); font-size: .875rem; display: flex; align-items: center; gap: 12px; }
.df-motion > span { color: var(--pink); }
.df-motion:disabled { opacity: 1; cursor: default; }
.df-stage { --scene-height: clamp(520px, calc(100svh - 225px), 710px); position: relative; min-height: var(--scene-height); }
.df-stage-copy { position: absolute; width: 32%; left: 0; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; }
.df-step-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); letter-spacing: .12em; margin-bottom: 24px; }
.df-stage-copy h2 { font-size: clamp(40px,4.5vw,64px); line-height: 1.02; letter-spacing: -.045em; }
.df-stage-copy > p { font-size: 1.125rem; color: var(--text-muted); margin-top: 24px; max-width: 280px; }
.df-scene { position: relative; width: 68%; height: var(--scene-height); margin-left: auto; }
.df-stage[data-step="create"] .df-stage-copy { width: 100%; top: 56px; transform: none; text-align: center; }
.df-stage[data-step="create"] .df-stage-copy h2 { font-size: clamp(42px,5vw,68px); }
.df-stage[data-step="create"] .df-stage-copy h2 br { display: none; }
.df-stage[data-step="create"] .df-stage-copy > p { max-width: none; margin-top: 20px; }
.df-stage[data-step="create"] .df-scene { width: 100%; padding-top: 220px; }
.df-composer { max-width: 900px; margin: 0 auto; padding: 36px 24px 0; }
.df-input-wrap { position: relative; }
#df-bet-input, .df-typing-preview { width: 100%; min-height: 168px; padding: 0; font-family: var(--sf); font-size: clamp(30px,4.3vw,60px); font-weight: 900; line-height: 1.12; letter-spacing: -.04em; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
#df-bet-input { resize: none; border: 0; border-radius: 0; background: transparent; caret-color: var(--pink); outline: none; overflow: auto; display: block; }
#df-bet-input:focus-visible { outline: none; }
.df-input-wrap:focus-within { box-shadow: 0 2px 0 var(--pink); }
.df-typing-preview { display: none; position: absolute; inset: 0; pointer-events: none; }
.df-input-wrap.is-autotyping #df-bet-input { color: transparent; }
.df-input-wrap.is-autotyping .df-typing-preview { display: block; }
.df-text-caret { display: inline-block; height: .86em; width: 3px; background: var(--pink); margin-left: 5px; vertical-align: -.03em; animation: wg-blink 1s step-end infinite; }
.df-composer-bottom { border-top: 1px solid var(--divider); margin-top: 24px; padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; color: var(--text-dim); font-size: .875rem; }
.df-composer-bottom > span { color: var(--pink); font-size: 22px; }
.df-input-error { color: var(--record-red); font-size: .875rem; margin-top: 12px; min-height: 21px; }
.df-viewport { position: absolute; inset: 24px 0; overflow: hidden; isolation: isolate; border-radius: 24px; mask-image: linear-gradient(to bottom, transparent, black 12px, black calc(100% - 12px), transparent); }
.df-rig { --df-scale: 1; --df-y: 0px; position: absolute; left: 50%; top: 0; width: 414px; height: 900px; transform: translateX(-50%) translateY(var(--df-y)) scale(var(--df-scale)); transform-origin: top center; opacity: 1; will-change: transform,opacity; }
.df-handset { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: perspective(1800px) rotateX(var(--df-pitch,0deg)) rotateY(var(--df-turn,0deg)) rotateZ(var(--df-roll,0deg)); }
.df-chassis-layer { position: absolute; inset: 1px; border-radius: 56px; background: linear-gradient(105deg,#222124,#666269 35%,#28272c 65%,#858089); box-shadow: inset 0 0 0 1px #8d879080; transform: translateZ(var(--depth)); backface-visibility: visible; pointer-events: none; }
.df-device-rail { position: absolute; top: 58px; bottom: 58px; width: 28px; background: linear-gradient(90deg,#323036,#827c86 42%,#3b383f 70%,#19181b); transform: rotateY(90deg); backface-visibility: visible; pointer-events: none; }
.df-device-rail-left { left: -13px; }
.df-device-rail-right { right: -13px; }
.df-device-rail::after { content: ''; position: absolute; width: 7px; height: 84px; left: 10px; top: 200px; background: linear-gradient(90deg,#242227,#716b76,#242227); border: 1px solid #9e96a2; border-radius: 5px; }
.df-device-rail-left::after { top: 126px; height: 102px; }
.df-device-front, .df-device-back { position: absolute; inset: 0; border-radius: 57px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 7px solid #242424; outline: 1px solid #505050; box-shadow: inset 0 0 0 1px #515151, 0 28px 80px #0008; overflow: hidden; background: var(--bg-black); }
.df-device-front { transform: translateZ(15px); }
.df-device-back { transform: rotateY(180deg) translateZ(15px); background: linear-gradient(130deg,#343234 0%,#1b1a1b 26%,#121112 65%,#272427 100%); }
.df-device-status { position: absolute; top: 17px; left: 27px; right: 27px; height: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-weight: 800; z-index: 10; pointer-events: none; }
.df-island { position: absolute; width: 112px; height: 29px; left: 50%; top: -1px; transform: translateX(-50%); border-radius: 24px; background: #000; }
.df-status-icons { font-size: 12px; letter-spacing: 1px; }
.df-status-battery { display: inline-block; margin-left: 8px; border-radius: 5px; background: var(--text-primary); color: var(--bg-black); padding: 1px 3px; font-size: 11px; letter-spacing: 0; }
.df-device-home { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 118px; height: 4px; border-radius: 8px; background: white; z-index: 12; pointer-events: none; }
.df-agreement-screen { position: absolute; inset: 0; padding: 76px 22px 32px; overflow: auto; scrollbar-width: none; overscroll-behavior: contain; }
.df-screen-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.df-screen-top > span:first-child { color: var(--text-muted); font-size: 33px; line-height: 20px; }
.df-screen-top > span:last-child { color: var(--pink); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.df-phone-claim { font-size: 30px; line-height: 1.06; letter-spacing: -.045em; font-weight: 900; margin-bottom: 24px; overflow-wrap: anywhere; }
.df-phone-claim.df-long-claim { font-size: 23px; }
.df-needs, .df-criteria { background: var(--bg-raised); border: 1px solid var(--divider); border-radius: 24px; margin-top: 18px; overflow: hidden; }
.df-needs { border-top: 3px solid var(--pink); padding-top: 18px; }
.df-app-kicker { font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .19em; color: var(--text-dim); }
.df-needs > .df-app-kicker { padding-inline: 18px; }
.df-outcome { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px 0; }
.df-outcome-icon { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pink); color: white; display: grid; place-items: center; font-size: 18px; font-weight: 700; }
.df-outcome b { color: var(--pink); font-size: 12px; letter-spacing: .16em; }
.df-outcome p { font-size: 15px; line-height: 1.3; font-weight: 700; margin-top: 5px; min-height: 58px; }
.df-outcome-muted { padding-bottom: 14px; }
.df-outcome-muted b { color: var(--text-dim); }
.df-outcome-muted .df-outcome-icon { background: transparent; border: 1px solid var(--text-dim); }
.df-fine-print, .df-edit-criteria { border-top: 1px solid var(--divider); }
.df-fine-print summary { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 14px; font-weight: 700; color: var(--text-muted); }
.df-fine-print b { color: var(--pink); }
.df-fine-print summary > span { margin-left: auto; font-size: 24px; }
.df-fine-print p { padding: 0 18px 18px; font-size: 14px; color: var(--text-muted); }
.df-criteria > .df-app-kicker { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; color: var(--pink); }
.df-criteria > .df-app-kicker > span { border: 1px solid var(--divider); border-radius: 20px; padding: 1px 8px; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text-dim); }
.df-criteria-outcomes { display: grid; grid-template-columns: 1fr 1fr; padding: 0 18px 12px; gap: 8px; }
.df-criteria-outcomes > div { border-radius: 14px; padding: 12px; background: var(--bg-card); }
.df-criteria-outcomes > div:first-child { border: 2px solid var(--pink); background: transparent; padding: 10px; }
.df-criteria-outcomes span { color: var(--text-dim); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.df-criteria-outcomes > div:first-child > span { color: var(--pink); }
.df-criteria-outcomes strong { display: block; font-size: 17px; line-height: 1.15; margin-top: 7px; letter-spacing: -.025em; }
.df-edit-criteria summary { display: flex; align-items: center; gap: 10px; padding: 12px 18px; font-size: 15px; font-weight: 800; }
.df-edit-criteria summary > span:first-child { color: var(--pink); font-size: 24px; }
.df-edit-criteria summary > span:last-child { margin-left: auto; font-size: 24px; }
.df-edit-criteria label { display: block; padding: 8px 18px; font-size: 13px; color: var(--text-muted); }
.df-edit-criteria textarea { display: block; resize: vertical; width: calc(100% - 36px); margin: 0 18px 18px; border: 1px solid var(--divider); border-radius: 10px; font: 14px/1.4 var(--sf); color: white; padding: 10px; background: var(--bg-black); }
.df-stake { padding-top: 20px; }
.df-stake > label { display: block; }
.df-stake-value { display: flex; justify-content: center; align-items: baseline; gap: 1px; margin: 10px 0 18px; color: var(--pink); }
.df-stake-value > span { font-size: 60px; font-weight: 900; letter-spacing: -.04em; }
#df-stake-input { width: 2.2ch; max-width: 100%; padding: 0; border: 0; font: 900 126px/.96 var(--sf); letter-spacing: -.07em; text-align: center; background: transparent; color: var(--pink); appearance: textfield; -moz-appearance: textfield; }
#df-stake-input::-webkit-inner-spin-button, #df-stake-input::-webkit-outer-spin-button { appearance: none; margin: 0; }
#df-stake-input:focus-visible { outline: 1px solid var(--pink-deep); outline-offset: 4px; border-radius: 8px; }
.df-stake-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; }
.df-stake-options button { border: 1px solid var(--divider); border-radius: 32px; min-height: 44px; background: var(--bg-raised); color: var(--text-muted); font-size: 18px; font-weight: 800; }
.df-stake-options button[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--bg-black); }
.df-app-button { display: block; width: 100%; border: 0; border-radius: 22px; min-height: 58px; padding: 14px; font-size: 20px; font-weight: 900; background: var(--pink); color: var(--bg-black); }
.df-app-button:hover { background: #ff79e2; }
.df-app-footnote { margin-top: 10px; text-align: center; font-size: 12px; color: var(--text-dim); }
.df-draft-piece { transition: opacity .3s, transform .4s; }
.df-draft-piece.is-pending { opacity: .12; transform: translateY(12px); }
.df-invite-scrim { position: absolute; inset: 0; z-index: 7; background: #000; opacity: 0; pointer-events: none; }
.df-invite-sheet { position: absolute; z-index: 8; inset: 250px 0 0; padding: 26px 22px 30px; background: var(--bg-raised); border-top: 1px solid var(--divider); border-radius: 30px 30px 0 0; overflow: auto; scrollbar-width: none; will-change: transform; }
.df-sheet-handle { position: absolute; width: 30px; height: 4px; left: calc(50% - 15px); top: 8px; background: var(--divider); border-radius: 4px; }
.df-invite-sheet h3 { font-size: 26px; line-height: 1.1; font-weight: 900; letter-spacing: -.04em; }
.df-invite-sheet > p { color: var(--text-dim); font-size: 15px; margin-top: 8px; }
.df-invite-link { display: flex; align-items: center; gap: 14px; border: 1px solid var(--pink); border-radius: 14px; padding: 14px; margin: 22px 0; background: var(--pink-fill-08); }
.df-invite-link > span { border-radius: 9px; background: var(--pink-fill-18); font-size: 28px; color: var(--pink); padding: 2px 10px; }
.df-invite-link strong { display: block; font-size: 18px; letter-spacing: -.025em; }
.df-invite-link div > span { display: block; font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.df-friends { margin: 8px 0 20px; }
.df-friends button { display: flex; align-items: center; gap: 14px; padding: 10px; width: 100%; min-height: 74px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 14px; }
.df-friends button[aria-pressed="true"] { background: var(--pink-fill-12); border-color: var(--pink); }
.df-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border: 1px solid var(--divider); border-radius: 50%; background: var(--bg-card); color: var(--text-dim); font-size: 22px; font-weight: 900; }
.df-friends strong { display: block; font-size: 20px; font-weight: 800; }
.df-friends small { display: block; font-size: 14px; color: var(--text-dim); }
.df-friends i { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--divider); border-radius: 50%; font-style: normal; margin-left: auto; color: transparent; }
.df-friends button[aria-pressed="true"] .df-avatar, .df-friends button[aria-pressed="true"] i { color: var(--bg-black); background: var(--pink); border-color: var(--pink); }
.df-camera-array { position: absolute; top: 18px; left: 18px; width: 174px; height: 182px; border-radius: 40px; border: 1px solid #494449; box-shadow: 0 6px 10px #0008,inset 0 1px 1px #7774; background: #282528; }
.df-lens { position: absolute; width: 65px; height: 65px; border-radius: 50%; border: 5px solid #403b40; box-shadow: 0 1px 3px #000,0 0 0 1px #080808,inset 0 0 0 6px #0d0d0d; background: radial-gradient(circle at 38% 35%,#756776 0%,#383239 6%,#101014 18%,#020202 48%,#272229 60%,#060606 70%); }
.df-lens-one { top: 16px; left: 12px; }
.df-lens-two { bottom: 16px; left: 12px; }
.df-lens-three { right: 10px; top: 59px; }
.df-camera-flash { position: absolute; right: 31px; top: 16px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid #777; background: #d2cbc2; }
.df-camera-sensor { position: absolute; right: 36px; bottom: 17px; width: 15px; height: 15px; border-radius: 50%; background: #070707; border: 1px solid #343034; }
.df-stage[data-step="capture"] .df-camera-flash { background: white; border-color: white; box-shadow: 0 0 16px 7px #fff9,0 0 70px 35px #ffffff20; }
.df-record-label { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--divider); border-radius: 24px; background: var(--bg-black); font-size: 12px; font-weight: 700; letter-spacing: .08em; white-space: nowrap; }
.df-record-label > span { width: 6px; height: 6px; border-radius: 50%; background: var(--record-red); animation: wg-blink 1.2s infinite; }
.df-record-label > time { margin-left: 10px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.df-judge-screen { position: absolute; inset: 0; background: var(--bg-black); }
.df-judge-screen > .df-app-kicker { position: absolute; z-index: 3; top: 77px; left: 0; right: 0; text-align: center; color: var(--pink); }
.df-judge-sides { position: absolute; inset: 0; }
.df-judge-sides > div { position: absolute; left: 0; right: 0; height: 50%; display: flex; flex-direction: column; justify-content: center; padding: 40px; }
.df-judge-sides > div:first-child { top: 0; color: var(--pink); transform: rotate(180deg); }
.df-judge-sides > div:last-child { bottom: 0; background: var(--pink); color: var(--bg-black); }
.df-judge-sides span { font-size: 12px; letter-spacing: .15em; font-weight: 800; opacity: .7; }
.df-judge-sides p { font-size: 30px; font-weight: 900; line-height: 1.08; letter-spacing: -.035em; margin-top: 18px; overflow-wrap: anywhere; }
.df-judge-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-black); }
.df-judge-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.df-judge-ring circle { fill: none; stroke: var(--divider); stroke-width: 3px; }
.df-judge-ring .df-ring-fill { stroke: var(--pink); stroke-dasharray: 282.744; stroke-dashoffset: 282.744; stroke-linecap: round; }
.df-judge-ring > span { font-size: 25px; font-weight: 900; color: var(--pink); }
.df-judge-message { position: absolute; bottom: 90px; left: 0; right: 0; text-align: center; color: var(--bg-black); font-size: 15px; font-weight: 700; }
.df-payout-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 224px; background: var(--bg-black); }
.df-payout-screen > .df-app-kicker { font-size: 13px; letter-spacing: .25em; }
.df-payout-screen h3 { font-size: 114px; line-height: 1; letter-spacing: -.065em; margin-top: 20px; }
.df-payout-amount { font-size: 64px; line-height: 1.1; color: var(--pink); font-weight: 900; letter-spacing: -.035em; margin-top: 36px; }
.df-payout-screen p { font-size: 22px; font-weight: 700; margin-top: 25px; color: var(--text-muted); }
.df-payout-check { display: grid; place-items: center; width: 50px; height: 50px; border: 2px solid var(--pink); border-radius: 50%; font-size: 28px; color: var(--pink); margin-top: 36px; }
.df-win-flash { position: absolute; inset: 0; z-index: 11; display: grid; place-items: center; background: var(--pink); color: var(--bg-black); font-size: 85px; font-weight: 900; letter-spacing: -.06em; }
.df-confetti { position: absolute; inset: 0; border-radius: 49px; contain: paint; pointer-events: none; z-index: 11; overflow: hidden; }
.df-confetti i { position: absolute; top: -20px; border-radius: 2px; animation: wg-confetti-fall var(--fall-time,6s) var(--fall-delay,0s) linear both; }
.df-stage[data-step="again"] .df-scene { width: 100%; }
.df-again { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; }
.df-again h3 { font-size: clamp(80px,10vw,150px); line-height: .92; letter-spacing: -.065em; }
.df-again p { font-size: 20px; line-height: 1.45; color: var(--text-muted); margin-top: 32px; }
.df-rematch { display: flex; gap: 32px; align-items: center; background: transparent; border: 0; border-bottom: 1px solid var(--pink-deep); padding: 14px 0; color: var(--pink); font-size: 18px; font-weight: 700; margin-top: 28px; }
.df-navigation { display: flex; justify-content: center; align-items: center; gap: 32px; padding: 28px 0 24px; border-top: 1px solid var(--divider); }
.df-arrow { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid var(--divider); border-radius: 50%; font-size: 23px; color: var(--text-muted); background: transparent; }
.df-arrow:hover { border-color: var(--pink); color: var(--pink); }
.df-arrow:disabled { opacity: .25; cursor: default; }
.df-position { width: 186px; }
.df-position p { display: flex; gap: 8px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; margin-top: 9px; }
.df-position p > span:last-child { color: var(--text-muted); margin-left: auto; }
.df-progress { display: flex; gap: 5px; }
.df-progress > span { flex: 1; height: 3px; border-radius: 5px; background: var(--divider); transition: background .2s; }
.df-progress > span.is-current { background: var(--pink); }
.df-progress > span.is-past { background: var(--pink-deep); }
.df-next { display: flex; align-items: center; gap: 24px; min-width: 196px; min-height: 52px; justify-content: space-between; padding: 14px 20px; border: 1px solid var(--divider); border-radius: var(--r-pill); background: var(--bg-raised); color: var(--text-primary); font-size: 16px; font-weight: 700; }
.df-next > span:last-child { color: var(--pink); font-size: 23px; line-height: 1; }
.df-next:hover { border-color: var(--pink); }
.df-next:disabled { cursor: wait; }
.df-bottomline { display: flex; justify-content: space-between; gap: 24px; font-size: 12px; color: var(--text-dim); }
.df-noscript { padding: 24px 0; color: var(--text-muted); font-size: 16px; }
.df-flight { position: fixed; inset: 0; z-index: 90; pointer-events: none; color: var(--text-primary); }
.df-flight-glyph { position: absolute; left: 0; top: 0; margin: 0; white-space: pre; font-family: var(--sf); font-weight: 900; transform-origin: top left; will-change: transform; }
.df-flight-measure { position: fixed; visibility: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sf); font-weight: 900; }
@media (max-width: 1000px) {
  .df-stage-copy { width: 34%; }
  .df-scene { width: 64%; }
  .df-stage-copy h2 { font-size: 42px; }
  .df-stage-copy > p { font-size: 16px; }
}
@media (max-width: 720px) {
  .device-flow { padding-top: 40px; padding-bottom: 56px; }
  .df-topline { gap: 16px; padding-bottom: 16px; }
  .df-topline > span { font-size: 11px; letter-spacing: .11em; }
  .df-motion { font-size: 12px; gap: 8px; }
  .df-stage { min-height: 0; }
  .df-stage-copy { position: relative; top: auto; width: 100%; transform: none; padding-top: 36px; text-align: center; }
  .df-step-label { margin-bottom: 16px; font-size: 11px; }
  .df-stage-copy h2 { font-size: clamp(32px,8vw,46px); }
  .df-stage-copy h2 br { display: none; }
  .df-stage-copy > p { max-width: 320px; margin: 16px auto 0; font-size: 16px; }
  .df-scene { width: 100%; height: clamp(400px, calc(100svh - 440px), 570px); margin-top: 18px; }
  .df-stage[data-step="create"] .df-stage-copy { position: relative; top: auto; padding-top: 46px; }
  .df-stage[data-step="create"] .df-stage-copy h2 { font-size: clamp(36px,9.5vw,50px); }
  .df-stage[data-step="create"] .df-scene { padding-top: 0; height: auto; }
  .df-stage[data-step="create"] { min-height: 600px; }
  .df-composer { padding: 48px 4px 0; }
  #df-bet-input, .df-typing-preview { font-size: clamp(28px,8vw,42px); min-height: 190px; }
  .df-composer-bottom { font-size: 12px; }
  .df-viewport { inset: 0 -8px; }
  .df-stage[data-step="again"] { min-height: 680px; }
  .df-stage[data-step="again"] .df-scene { margin-top: 0; height: 680px; }
  .df-again h3 { font-size: 104px; }
  .df-again p { font-size: 18px; }
  .df-navigation { gap: 16px; padding-block: 24px; }
  .df-position { width: 105px; }
  .df-position p { font-size: 11px; gap: 4px; }
  .df-position p > span:last-child { display: none; }
  .df-arrow { width: 42px; height: 42px; }
  .df-next { min-width: 0; flex: 1; max-width: 210px; gap: 16px; padding: 14px 16px; font-size: 14px; }
  .df-bottomline { font-size: 11px; gap: 16px; }
  .df-bottomline > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .df-handset { transition: none; }
  .df-confetti { display: none; }
}
.df-views { display: flex; align-items: center; gap: 6px; margin-top: 28px; pointer-events: auto; }
.df-views button { border: 1px solid var(--divider); border-radius: 24px; padding: 10px 15px; min-height: 42px; font-size: 12px; font-weight: 700; color: var(--text-muted); background: transparent; }
.df-views button[aria-pressed="true"] { border-color: var(--pink-deep); color: var(--pink); background: #ff4fd80b; }
.df-offscreen .df-confetti i { animation-play-state: paused; }
.motion-paused .df-handset { transition: none; }
@media (max-width: 720px) {
  .df-views { justify-content: center; margin-top: 20px; }
  .df-views button { padding: 8px 16px; }
  .df-navigation { position: sticky; bottom: 0; z-index: 20; background: #0a0a0af5; backdrop-filter: blur(14px); }
}
/* Keep the tap target at hand while the close-up fills the view. */
.df-navigation { position: sticky; bottom: 0; z-index: 20; background: #0a0a0af5; backdrop-filter: blur(14px); }