/* SnapOS v2 — devices section (generated by scripts/build-v2.js from the new site's sections.css; edit there) */
.v2-dev {
  --blue-50: #eaf3ff; --blue-400: #4da3ff; --blue-500: var(--blue, #007bff); --blue-600: var(--blue-600, #0066d6); --blue-700: #0a3d8f;
  --green-500: var(--green, #1ed53e); --ink-2: #22324d; --ink-3: #5b6b82; --bg: #f5f8fc;
  --grad-brand: var(--grad); --shadow-sm: 0 1px 2px rgba(10,20,48,.06), 0 2px 8px rgba(10,20,48,.04);
  --shadow: 0 10px 30px -12px rgba(10,40,100,.18), 0 2px 6px rgba(10,20,48,.05); --radius-xl: 28px;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --font-latin: "Readex Pro", system-ui, "Segoe UI", sans-serif; --font: "Readex Pro", system-ui, sans-serif;
  margin-top: 8px;
}
.v2-dev svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-dev ul { list-style: none; margin: 0; padding: 0; }
.v2-dev .btn-sm { min-height: 44px; padding: 0 18px; font-size: .92rem; }
.v2-dev .dev-shell { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.v2-dev .dev-tabs { display: flex; flex-direction: column; gap: 6px; }
.v2-dev .dev-tab { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 1px solid transparent; background: transparent; text-align: start; cursor: pointer; font-weight: 600; color: var(--ink-2); transition: background-color 250ms, color 250ms, border-color 250ms, box-shadow 250ms; position: relative; overflow: hidden; }
.v2-dev .dev-tab .d-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blue-50); color: var(--blue-600); flex: none; transition: background-color 250ms, color 250ms; }
.v2-dev .dev-tab .d-ic svg { width: 18px; height: 18px; }
.v2-dev .dev-tab:hover { background: rgba(10,124,255,.06); color: var(--ink); }
.v2-dev .dev-tab[aria-selected="true"] { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.v2-dev .dev-tab[aria-selected="true"] .d-ic { background: var(--blue-500); color: #fff; }
.v2-dev .dev-tab .t-progress { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 100%; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .v2-dev .dev-tab .t-progress { transform-origin: right; }
.v2-dev .dev-tab[aria-selected="true"] .t-progress.run { animation: vd-tabProgress var(--auto, 6000ms) linear forwards; }
.v2-dev .dev-panel { display: grid; grid-template-columns: 1fr 1.05fr; gap: 26px; align-items: center; padding: 28px; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 400px; }
.v2-dev .dev-copy .d-sub { display: inline-block; font-size: 13px; font-weight: 700; color: var(--blue-600); margin-bottom: 8px; }
.v2-dev .dev-copy h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.3; }
.v2-dev .dev-copy > p { margin-top: 10px; color: var(--ink-2); }
.v2-dev .dev-copy .check-list { margin-top: 16px; }
.v2-dev .dev-copy .d-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.v2-dev .d-badge { padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.v2-dev .dev-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #EAF3FF, #F7FAFF 60%, #fff); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.v2-dev .dev-stage::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(10,124,255,.18), transparent 65%); animation: vd-breathe 5s ease-in-out infinite; }
@keyframes vd-breathe { 50% { transform: scale(1.12); opacity: .7; } }
.v2-dev .dev-stage img { position: absolute; inset: 0; margin: auto; max-width: 86%; max-height: 86%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(5,20,60,.25)); animation: vd-floatY 6s ease-in-out infinite; }
.v2-dev .dev-stage.wide img { max-width: 94%; border-radius: 12px; filter: drop-shadow(0 18px 24px rgba(5,20,60,.18)); }
@keyframes vd-floatY { 50% { transform: translateY(-10px); } }
.v2-dev .dev-stage .big-ic { position: relative; display: grid; place-items: center; width: 140px; height: 140px; border-radius: 36px; background: linear-gradient(140deg, var(--blue-500), #19B3FF 60%, var(--green-500)); color: #fff; box-shadow: 0 30px 50px -20px rgba(10,124,255,.7); animation: vd-floatY 6s ease-in-out infinite; }
.v2-dev .dev-stage .big-ic svg { width: 64px; height: 64px; stroke-width: 1.6; }
.v2-dev .dev-stage .orbit-dots { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed #C4D6EE; animation: vd-spin 24s linear infinite; }
.v2-dev .dev-stage .orbit-dots::before, .v2-dev .dev-stage .orbit-dots::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--green-500); top: -6px; left: 50%; box-shadow: 0 0 12px var(--green-500); }
.v2-dev .dev-stage .orbit-dots::after { top: auto; bottom: -6px; background: var(--blue-500); box-shadow: 0 0 12px var(--blue-500); }
.v2-dev .printer-stage { align-items: end; }
.v2-dev .printer-rig { position: relative; height: 56%; aspect-ratio: 320 / 450; margin-bottom: 9%; animation: vd-floatY 6s ease-in-out infinite; }
.v2-dev .printer-stage .printer-rig img { position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; max-height: none; animation: none; }
.v2-dev .paper-clip { position: absolute; z-index: 2; left: 19%; width: 59%; bottom: 59.5%; height: 112%; overflow: hidden; pointer-events: none; }
.v2-dev .receipt {
  position: absolute; inset-inline: 4%; bottom: 0; padding: 10px 10px 8px;
  background: #fff; color: #1a1f2b; font-size: 9px; line-height: 1.35; font-family: var(--font);
  box-shadow: 0 6px 14px rgba(5,20,60,.18);
  transform: translateY(100%);
  animation: vd-receiptFeed 6s steps(1) infinite, vd-receiptMove 6s cubic-bezier(.4,0,.2,1) infinite;
}
.v2-dev .receipt::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: linear-gradient(135deg, transparent 50%, #fff 50%) 0 0 / 8px 6px repeat-x, linear-gradient(225deg, transparent 50%, #fff 50%) 0 0 / 8px 6px repeat-x; }
.v2-dev .receipt p { margin: 0; }
.v2-dev .r-brand { text-align: center; font-family: var(--font-latin); font-weight: 800; font-size: 11px; color: var(--blue-600); }
.v2-dev .r-sub { text-align: center; color: #5E6A85; font-size: 8px; }
.v2-dev .r-sep { border-top: 1px dashed #c9d1de; margin: 5px 0 !important; }
.v2-dev .r-row { display: flex; justify-content: space-between; gap: 6px; }
.v2-dev .r-row b { font-family: var(--font-latin); }
.v2-dev .r-total { font-weight: 700; font-size: 10px; }
.v2-dev .r-qr { display: grid; place-items: center; margin-top: 6px !important; }
.v2-dev .r-qr i { width: 26px; height: 26px; background: conic-gradient(#1a1f2b 25%, #fff 0 50%, #1a1f2b 0 75%, #fff 0) 0 0 / 6px 6px; outline: 2px solid #1a1f2b; outline-offset: 1px; }
.v2-dev .r-thanks { text-align: center; color: #5E6A85; font-size: 8px; margin-top: 4px !important; }
@keyframes vd-receiptMove {
  0% { transform: translateY(100%); opacity: 1; }
  8% { transform: translateY(88%); } 14% { transform: translateY(72%); } 20% { transform: translateY(58%); }
  26% { transform: translateY(42%); } 32% { transform: translateY(28%); } 38% { transform: translateY(14%); } 44% { transform: translateY(0); }
  80% { transform: translateY(0); opacity: 1; }
  92% { transform: translateY(-14%) rotate(-4deg); opacity: 0; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes vd-receiptFeed { 0%, 100% { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
.v2-dev .receipt { animation: none; transform: none; }
.v2-dev .printer-rig { animation: none; }
}
.v2-dev .fx-stage { padding: 0; }
.v2-dev .dev-frame { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 94%; container-type: inline-size; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 34px -16px rgba(5,20,60,.35); background: #fff; direction: ltr; animation: vd-floatY 7s ease-in-out infinite; }
.v2-dev .fx-stage .k-toast img { position: static; width: 2.8cqw; height: 2.8cqw; max-width: none; max-height: none; margin: 0; filter: none; animation: none; flex: none; }
.v2-dev .fx-stage .dev-frame > img { position: static; display: block; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; filter: none; animation: none; border-radius: 0; }
.v2-dev .fx-layer { position: absolute; inset: 0; pointer-events: none; }
.v2-dev .fx-layer i, .v2-dev .fx-layer b, .v2-dev .fx-layer span { font-style: normal; }
.v2-dev .fx-wipe { position: absolute; background: #F9FAFC; transform-origin: right; animation: vd-wipe 6s cubic-bezier(.65,0,.35,1) infinite; }
.v2-dev .fx-wipe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue-500); box-shadow: 0 0 8px var(--blue-400); }
@keyframes vd-wipe { 0% { transform: scaleX(1); } 35%, 85% { transform: scaleX(0); } 86%, 100% { transform: scaleX(1); opacity: 0; } }
.v2-dev .fx-peak { position: absolute; width: 1.6cqw; height: 1.6cqw; translate: -50% -50%; border-radius: 50%; background: rgba(10,124,255,.25); animation: vd-peakPing 6s ease-out infinite; }
@keyframes vd-peakPing { 0%, 30% { transform: scale(.2); opacity: 0; } 36% { opacity: 1; } 60%, 100% { transform: scale(2.6); opacity: 0; } }
.v2-dev .fx-sheen { position: absolute; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(255,255,255,.75) 86%, transparent 94%); -webkit-mask: radial-gradient(circle, transparent 46%, #000 47%); mask: radial-gradient(circle, transparent 46%, #000 47%); animation: vd-spin 3.5s linear infinite; }
.v2-dev .fx-live { position: absolute; right: 1.2%; top: 1.4%; padding: .3cqw .9cqw; border-radius: 99px; background: #E8F9EA; color: #1FAE30; font: 800 1.1cqw/1 var(--font-latin); letter-spacing: .1em; display: inline-flex; align-items: center; gap: .5cqw; }
.v2-dev .fx-live::before { content: ""; width: .8cqw; height: .8cqw; border-radius: 50%; background: #2FCF3F; animation: vd-ping 1.6s infinite; }
.v2-dev .kds-fx > * { position: absolute; }
.v2-dev .k-new-ring { left: 1.1%; top: 1.9%; width: 5.9%; height: 8.6%; border-radius: 8px; box-shadow: 0 0 0 0 rgba(14,165,255,.6); animation: vd-kRing 8s infinite; }
@keyframes vd-kRing { 0%, 4% { box-shadow: 0 0 0 0 rgba(14,165,255,.7); } 12% { box-shadow: 0 0 0 1.2cqw rgba(14,165,255,0); } 13%, 100% { box-shadow: none; } }
.v2-dev .k-card { left: 58.4%; top: 6.4%; width: 23.9%; height: 56.4%; border-radius: 10px; border: .25cqw solid #0EA5FF; box-shadow: 0 0 2cqw rgba(14,165,255,.45); opacity: 0; animation: vd-kCard 8s infinite; }
@keyframes vd-kCard { 0% { opacity: 0; transform: scale(1.04); } 5%, 34% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; } }
.v2-dev .k-badge { position: absolute; top: -1.4cqw; right: 1cqw; padding: .35cqw .9cqw; border-radius: 99px; background: #0EA5FF; color: #fff; font: 700 1.05cqw/1.2 var(--font); white-space: nowrap; }
.v2-dev .k-timer { position: absolute; left: 1.2cqw; top: 1cqw; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; border: .2cqw solid #0EA5FF; border-top-color: transparent; animation: vd-spin 1s linear infinite; }
.v2-dev .k-btn { left: 59.5%; top: 57.2%; width: 21.8%; height: 3.9%; border-radius: 4px; background: #2FCF3F; opacity: 0; animation: vd-kBtn 8s infinite; }
@keyframes vd-kBtn { 0%, 33% { opacity: 0; } 35%, 42% { opacity: .85; } 50%, 100% { opacity: 0; } }
.v2-dev .k-tap { left: 70.4%; top: 59.1%; width: 3cqw; height: 3cqw; translate: -50% -50%; border-radius: 50%; background: rgba(5,20,60,.25); border: .25cqw solid #fff; opacity: 0; animation: vd-kTap 8s infinite; }
@keyframes vd-kTap { 0%, 26% { opacity: 0; transform: translate(4cqw, 6cqw) scale(1); } 32% { opacity: 1; transform: none; } 35% { transform: scale(.75); } 38% { opacity: 1; transform: scale(1); } 44%, 100% { opacity: 0; transform: scale(1.4); } }
.v2-dev .k-done { left: 58.4%; top: 6.4%; width: 23.9%; height: 56.4%; border-radius: 10px; background: rgba(47,207,63,.16); border: .25cqw solid #2FCF3F; display: grid; place-items: center; opacity: 0; animation: vd-kDone 8s infinite; }
.v2-dev .k-done span { padding: .7cqw 1.6cqw; border-radius: 99px; background: #2FCF3F; color: #fff; font: 800 1.5cqw/1.2 var(--font); }
@keyframes vd-kDone { 0%, 40% { opacity: 0; transform: scale(.98); } 45%, 80% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translateY(-2%); } }
.v2-dev .k-toast { right: 1.4%; top: 2%; display: flex; align-items: center; gap: .9cqw; padding: .9cqw 1.3cqw; border-radius: 1.2cqw; background: #fff; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(5,20,60,.45); border: 1px solid #E2E8F3; opacity: 0; animation: vd-kToast 8s var(--ease-out) infinite; }
.v2-dev .k-toast img { width: 2.8cqw; height: 2.8cqw; }
.v2-dev .k-toast b { display: block; font: 700 1.25cqw/1.3 var(--font); color: #0A1430; }
.v2-dev .k-toast small { display: block; font: 500 1cqw/1.3 var(--font); color: #5E6A85; }
@keyframes vd-kToast { 0%, 46% { opacity: 0; transform: translateY(-1.5cqw); } 52%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-1.5cqw); } }
.v2-dev .qds-fx { right: auto; width: 70.5%; background: linear-gradient(162deg, #E4E4E4 0%, #F6F6F6 30%, #DADADA 52%, #F8F8F8 70%, #EDEDED 100%); }
.v2-dev .q-left { position: absolute; left: 0; top: 0; width: 41.6%; height: 100%; }
.v2-dev .q-title { position: absolute; left: 2.2%; top: .5%; color: #F2C200; font: 800 2.65cqw/1.25 "Manrope", "IBM Plex Sans Arabic", sans-serif; white-space: nowrap; direction: ltr; }
.v2-dev .q-serving { position: absolute; left: 2.6%; top: 14%; width: 75%; display: grid; gap: 1cqw; }
.v2-dev .q-box { position: relative; display: grid; place-items: center; height: 4.6cqw; border-radius: .4cqw; background: #0B0B0B; color: #F2C200; font: 800 3.6cqw/1 "Manrope", sans-serif; box-shadow: 0 .2cqw .5cqw rgba(0,0,0,.25); }
.v2-dev .q-box.now { margin-left: 14%; }
.v2-dev .q-box.now::before { content: ""; position: absolute; left: -16%; top: 50%; translate: 0 -50%; border: .9cqw solid transparent; border-left: 1.3cqw solid #F2C200; animation: vd-qArrow 1s ease-in-out infinite; }
@keyframes vd-qArrow { 50% { translate: .5cqw -50%; } }
.v2-dev .q-box.enter { animation: vd-qIn 700ms var(--ease-out) both; }
@keyframes vd-qIn { from { opacity: 0; transform: translateX(10cqw) scale(.9); background: #1b4d14; } 60% { background: #0B0B0B; } }
.v2-dev .q-mid { position: absolute; left: 41.6%; top: 0; bottom: 0; right: 0; border-left: .15cqw solid #222; height: 97%; top: 3%; }
.v2-dev .q-title2 { position: absolute; left: 5.6%; top: .5%; color: #C9C9C9; font: 800 2.9cqw/1.4 "Manrope", sans-serif; white-space: nowrap; }
.v2-dev .q-process { position: absolute; left: 0; top: 13%; width: 49%; display: grid; justify-items: center; gap: 1.2cqw; }
.v2-dev .q-num { color: #C3C3C3; font: 800 2.9cqw/1 "Manrope", sans-serif; }
.v2-dev .q-num.enter { animation: vd-qNum 700ms var(--ease-out) both; }
@keyframes vd-qNum { from { opacity: 0; transform: translateY(-1.5cqw); color: #F2C200; } }
.v2-dev .cd-wide .cd-frame { container-type: inline-size; }
.v2-dev .cd-glass { position: absolute; left: 4.4%; top: 9.95%; width: 45.3%; height: 36.9%; clip-path: polygon(21.6% .6%, 100% 0, 87.6% 100%, 0 100%); pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 60%) no-repeat, radial-gradient(70% 60% at 55% 45%, rgba(10,124,255,.35), transparent 75%);
  background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; opacity: 0; animation: vd-cdGlass 8s ease-in-out infinite; }
@keyframes vd-cdGlass { 0%, 8% { opacity: 0; background-position: 150% 0, 0 0; } 14% { opacity: 1; } 30% { background-position: -50% 0, 0 0; } 42% { opacity: 1; } 50%, 100% { opacity: 0; background-position: -50% 0, 0 0; } }
.v2-dev .cd-pop { position: absolute; z-index: 2; left: -2cqw; top: 47%; width: 60cqw; padding: 3cqw; border-radius: 2.6cqw; background: rgba(255,255,255,.96); border: 1px solid var(--line); box-shadow: 0 3cqw 6cqw -2cqw rgba(5,20,60,.3); display: grid; grid-template-columns: 1fr auto; gap: 2.6cqw; align-items: center; opacity: 0; transform-origin: 60% 0; animation: vd-cdPop 8s var(--ease-out) infinite; }
@keyframes vd-cdPop { 0%, 12% { opacity: 0; transform: translate(8cqw,-14cqw) scale(.6); } 18%, 44% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: translateY(2cqw) scale(.96); } }
.v2-dev .cdp-items { display: grid; gap: 1.8cqw; font-size: 3.1cqw; color: #1a1f2b; min-width: 0; }
.v2-dev .cdp-items > b { font: 800 3.9cqw/1 var(--font-latin); color: var(--blue-600); }
.v2-dev .cdp-r { display: flex; justify-content: space-between; gap: 1.6cqw; opacity: 0; animation: cdRow 8s var(--ease-out) infinite; }
.v2-dev .cdp-r i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-dev .cdp-r em { font-style: normal; font-family: var(--font-latin); font-weight: 700; }
.v2-dev .r1 { animation-name: vd-cdRow1; }
.v2-dev .r2 { animation-name: vd-cdRow2; }
.v2-dev .cdp-total { animation-name: vd-cdRow3; border-top: 1px dashed #c9d1de; padding-top: 1.4cqw; font-weight: 700; color: var(--blue-700); font-size: 3.4cqw; }
@keyframes vd-cdRow1 { 0%, 20% { opacity: 0; transform: translateX(-2cqw); } 23%, 100% { opacity: 1; transform: none; } }
@keyframes vd-cdRow2 { 0%, 24% { opacity: 0; transform: translateX(-2cqw); } 27%, 100% { opacity: 1; transform: none; } }
@keyframes vd-cdRow3 { 0%, 28% { opacity: 0; } 31%, 100% { opacity: 1; } }
.v2-dev .cdp-qr { display: grid; justify-items: center; gap: 1cqw; opacity: 0; animation: vd-cdRow3 8s infinite; }
.v2-dev .cdp-qr .qr { width: 18cqw; padding: 1cqw; border-radius: 1cqw; }
.v2-dev .cdp-qr .qr-scan { height: 1.4cqw; }
.v2-dev .cdp-qr small { font: 700 2.7cqw/1.2 var(--font); color: #128C3F; white-space: nowrap; }
.v2-dev .cdp-paid { position: absolute; inset-inline-end: 2.6cqw; bottom: -3cqw; display: flex; align-items: center; gap: .8cqw; padding: 1cqw 2cqw; border-radius: 99px; background: var(--green-500); color: #fff; font: 700 2.8cqw/1 var(--font); box-shadow: 0 1cqw 2cqw -1cqw rgba(20,140,60,.6); opacity: 0; animation: vd-cdPaid 8s var(--ease-out) infinite; }
.v2-dev .cdp-paid svg { width: 2.6cqw; height: 2.6cqw; stroke-width: 3.2; }
@keyframes vd-cdPaid { 0%, 36% { opacity: 0; transform: scale(.5); } 39%, 45% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.v2-dev .cd-glass { display: none; }
.v2-dev .cd-pop, .v2-dev .cdp-r, .v2-dev .cdp-qr { animation: none; opacity: 1; transform: none; }
.v2-dev .cdp-paid { display: none; }
}
.v2-dev .qr { position: relative; width: 40cqw; aspect-ratio: 1; padding: 2.5cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 0 0 1px #E2E8F3; overflow: hidden; }
.v2-dev .qr svg { display: block; width: 100%; height: 100%; stroke: none; fill: #111; }
.v2-dev .qr-scan { position: absolute; left: 0; right: 0; height: 3cqw; top: 0; background: linear-gradient(180deg, transparent, rgba(37,211,102,.75), transparent); animation: vd-qrScan 2.2s ease-in-out infinite; }
@keyframes vd-qrScan { 50% { top: calc(100% - 3cqw); } }
@media (prefers-reduced-motion: reduce) {
.v2-dev .dev-frame, .v2-dev .fx-wipe, .v2-dev .fx-peak, .v2-dev .fx-sheen, .v2-dev .kds-fx *, .v2-dev .qr-scan, .v2-dev .q-box, .v2-dev .q-num { animation: none !important; }
.v2-dev .fx-wipe, .v2-dev .fx-peak { display: none; }
}
.v2-dev .msr-stage, .v2-dev .cd-stage { background: #fff; }
.v2-dev .msr-stage::before, .v2-dev .cd-stage::before { display: none; }
.v2-dev .msr-frame { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 92%; aspect-ratio: 1; container-type: inline-size; animation: vd-floatY 6s ease-in-out infinite; }
.v2-dev .msr-stage .msr-frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; mix-blend-mode: multiply; filter: none; animation: none; }
.v2-dev .msr-card { position: absolute; z-index: 2; left: 45.7%; top: 18.4%; width: 30%; height: 20%; border-radius: 1.6cqw; padding: 1.6cqw 2cqw; background: linear-gradient(135deg, #0A7CFF, #19B3FF 55%, #2FCF3F); color: #fff; box-shadow: 0 1.5cqw 3cqw -1.5cqw rgba(5,20,60,.5); transform: skewY(-27deg); opacity: 0; display: grid; align-content: start; animation: vd-msrSwipe 5s cubic-bezier(.45,0,.25,1) infinite; }
.v2-dev .msr-card b { font: 800 3.4cqw/1 var(--font-latin); }
.v2-dev .msr-card small { font: 600 2.2cqw/1.3 var(--font); opacity: .9; margin-top: .6cqw; }
.v2-dev .msr-card i { position: absolute; left: 0; right: 0; bottom: 34%; height: 2.6cqw; background: rgba(5,12,34,.7); }
.v2-dev .msr-card { clip-path: inset(0 0 24% 0 round 1.6cqw 1.6cqw 0 0); }
@keyframes vd-msrSwipe {
  0% { opacity: 0; transform: translate(0, -7cqw) skewY(-28deg); }
  12%, 20% { opacity: 1; transform: translate(0, 0) skewY(-28deg); }
  48%, 60% { opacity: 1; transform: translate(-22.7cqw, 12cqw) skewY(-28deg); }
  72%, 100% { opacity: 0; transform: translate(-22.7cqw, 5cqw) skewY(-28deg); }
}
.v2-dev .msr-led { position: absolute; z-index: 2; left: 79.1%; top: 27%; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #2a2f38; animation: vd-msrLed 5s steps(1) infinite; }
@keyframes vd-msrLed { 0%, 46% { background: #2a2f38; box-shadow: none; } 48%, 80% { background: #3BE04A; box-shadow: 0 0 1.4cqw 0.5cqw rgba(59,224,74,.7); } 82%, 100% { background: #2a2f38; box-shadow: none; } }
.v2-dev .msr-toast { position: absolute; z-index: 3; left: 50%; bottom: 4%; translate: -50% 0; display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.2cqw; border-radius: 2cqw; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); white-space: nowrap; opacity: 0; animation: vd-msrToast 5s var(--ease-out) infinite; }
.v2-dev .msr-toast svg { width: 4.4cqw; height: 4.4cqw; padding: .8cqw; border-radius: 50%; background: var(--green-500); color: #fff; stroke-width: 3; flex: none; }
.v2-dev .msr-toast b { display: block; font: 700 2.6cqw/1.3 var(--font); color: var(--ink); }
.v2-dev .msr-toast small { display: block; font: 500 2cqw/1.3 var(--font); color: var(--ink-3); }
@keyframes vd-msrToast { 0%, 50% { opacity: 0; transform: translateY(2cqw); } 56%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.v2-dev .msr-card, .v2-dev .msr-led, .v2-dev .msr-toast, .v2-dev .msr-frame { animation: none; }
.v2-dev .msr-toast { opacity: 1; }
}
.v2-dev .pay-rig { position: absolute; inset: 7% 0 7%; left: 50%; translate: -50% 0; height: 86%; aspect-ratio: 9 / 16; animation: vd-floatY 6s ease-in-out infinite; }
.v2-dev .pay-stage .pay-rig img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; animation: none; }
.v2-dev .nfc-waves { position: absolute; left: 50%; top: 30%; translate: -50% -50%; width: 60%; aspect-ratio: 1; pointer-events: none; }
.v2-dev .nfc-waves i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(10,124,255,.6); opacity: 0; animation: vd-nfcWave 5s ease-out infinite; }
.v2-dev .nfc-waves i:nth-child(2) { animation-delay: .25s; }
.v2-dev .nfc-waves i:nth-child(3) { animation-delay: .5s; }
@keyframes vd-nfcWave { 0%, 34% { opacity: 0; transform: scale(.3); } 38% { opacity: 1; } 58%, 100% { opacity: 0; transform: scale(1.2); } }
.v2-dev .pay-ok { position: absolute; left: 50%; top: 32%; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 12px 30px -10px rgba(5,20,60,.45); opacity: 0; animation: vd-payOk 5s var(--ease-out) infinite; white-space: nowrap; }
.v2-dev .pay-ok svg { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--green-500); color: #fff; stroke-width: 3; }
.v2-dev .pay-ok b { font-size: 13px; color: var(--green-600); }
.v2-dev .pay-ok small { font-family: var(--font-latin); font-weight: 800; font-size: 13px; color: var(--ink); }
@keyframes vd-payOk { 0%, 50% { opacity: 0; transform: scale(.7); } 56%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
.v2-dev .pay-card {
  position: absolute; z-index: 3; top: 18%; left: 50%; width: 38%; max-width: 190px; aspect-ratio: 1.586; border-radius: 12px; padding: 10px 12px;
  background: linear-gradient(135deg, #0A7CFF, #19B3FF 55%, #2FCF3F); color: #fff; box-shadow: 0 18px 30px -12px rgba(5,20,60,.55);
  display: flex; align-items: flex-end; justify-content: space-between; font-family: var(--font-latin); font-size: 11px; letter-spacing: .08em;
  animation: vd-cardTap 5s cubic-bezier(.65,0,.35,1) infinite;
}
.v2-dev .pay-card .chip { position: absolute; top: 24%; left: 12%; width: 20%; aspect-ratio: 1.3; border-radius: 4px; background: linear-gradient(135deg, #FFE08A, #D4A73C); }
.v2-dev .pay-card .nfc { position: absolute; top: 22%; right: 12%; width: 14%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.8); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); }
.v2-dev .pay-card b { margin-inline-start: auto; }
@keyframes vd-cardTap {
  0% { transform: translate(140%, 30%) rotate(18deg); opacity: 0; }
  12% { opacity: 1; }
  32% { transform: translate(-50%, 0) rotate(-6deg); }
  38% { transform: translate(-50%, 6%) rotate(-6deg) scale(.97); }
  46% { transform: translate(-50%, 0) rotate(-6deg); }
  62% { transform: translate(120%, -10%) rotate(14deg); opacity: 1; }
  70%, 100% { transform: translate(140%, -10%) rotate(14deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.v2-dev .pay-card, .v2-dev .nfc-waves i, .v2-dev .pay-rig { animation: none; }
.v2-dev .pay-card { transform: translate(-50%, 0) rotate(-6deg); }
.v2-dev .pay-ok { animation: none; opacity: 1; }
}
.v2-dev .cd-stage { background: radial-gradient(120% 90% at 50% 0%, #EEF4FD, #fff 70%); }
.v2-dev .cd-slide { position: absolute; inset: 6% 8% 12%; margin: 0; display: grid; place-items: center; opacity: 0; animation: vd-cdFade 8s ease-in-out infinite; }
.v2-dev .cd-frame { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1000 / 864; }
.v2-dev .cd-slide img { position: relative; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(5,20,60,.18)); animation: none; mix-blend-mode: multiply; }
.v2-dev .cd-pole { animation-delay: -4s; }
.v2-dev .cd-slide figcaption { position: absolute; bottom: -9%; left: 50%; translate: -50% 0; padding: 5px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
@keyframes vd-cdFade { 0%, 5% { opacity: 0; transform: translateY(10px) scale(.97); } 12%, 45% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translateY(-6px) scale(.98); } }
.v2-dev .cd-pole .vfd { position: absolute; left: 11.5%; top: 22.5%; width: 34%; height: 10%; direction: ltr; display: flex; align-items: center; justify-content: space-between; padding: 0 3%; font-family: ui-monospace, Consolas, monospace; font-weight: 700; color: #7DF9FF; text-shadow: 0 0 6px rgba(125,249,255,.9); font-size: clamp(9px, 1.3vw, 15px); letter-spacing: .08em; pointer-events: none; }
.v2-dev .cd-pole .vfd-amt { animation: vd-vfdBlink 1.6s steps(2) infinite; }
@keyframes vd-vfdBlink { 50% { opacity: .55; } }
.v2-dev .cd-dots { position: absolute; bottom: 4%; left: 50%; translate: -50% 0; display: flex; gap: 6px; }
.v2-dev .cd-dots i { width: 7px; height: 7px; border-radius: 50%; background: #C9D6EA; animation: vd-cdDot 8s infinite; }
.v2-dev .cd-dots i:nth-child(2) { animation-delay: -4s; }
@keyframes vd-cdDot { 0%, 48% { background: var(--blue-500); width: 18px; border-radius: 4px; } 52%, 100% { background: #C9D6EA; width: 7px; } }
@media (prefers-reduced-motion: reduce) {
.v2-dev .cd-slide { animation: none; }
.v2-dev .cd-wide { opacity: 1; }
.v2-dev .cd-pole, .v2-dev .cd-dots { display: none; }
}
.v2-dev .dev-copy.anim, .v2-dev .dev-stage.anim { animation: vd-swapIn 520ms var(--ease-out) both; }
.v2-dev .dev-stage.anim { animation-name: vd-shotIn; animation-duration: 700ms; }
@media (max-width: 980px) {
.v2-dev .dev-shell { grid-template-columns: 1fr; }
.v2-dev .dev-tabs { flex-direction: row; overflow-x: auto; margin-inline: -16px; padding: 4px 16px 10px; scrollbar-width: none; }
.v2-dev .dev-tabs::-webkit-scrollbar { display: none; }
.v2-dev .dev-tab { flex: none; border-color: var(--line); background: #fff; }
.v2-dev .dev-panel { grid-template-columns: 1fr; padding: 20px; }
.v2-dev .dev-stage { order: -1; }
}
.v2-dev .check-list { display: grid; gap: 10px; }
.v2-dev .check-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.v2-dev .check-list li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7CFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
@keyframes vd-swapIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes vd-spin { to { transform: rotate(1turn); } }
@keyframes vd-ping { 70% { box-shadow: 0 0 0 10px rgba(47,207,63,0); } 100% { box-shadow: 0 0 0 0 rgba(47,207,63,0); } }
@keyframes vd-shotIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes vd-tabProgress { to { transform: scaleX(1); } }