@font-face {
  font-family: "IBM Plex Sans Local";
  src: url("./fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Local";
  src: url("./fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans Local";
  src: url("./fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans Local";
  src: url("./fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  background: #05080d;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #05080d; }
body { display: grid; place-items: center; }

.preview-shell {
  position: relative;
  width: min(100vw, calc(100vh * .5625));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 100px rgba(0,0,0,.58);
}

.stage { position: absolute; inset: 0; overflow: hidden; isolation: isolate; user-select: none; background: #000; }
.artboard { display: block; width: 100%; height: 100%; pointer-events: none; }
.artboard text { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: geometricPrecision; }
.scene, .motion-copy, #nameMover, #numberMover, #finalStatusActive, #finalStatusPending, #statusArea, #brandIntro, #excelSourceFocus, #excelResultHalo, #excelQueryBadge, #excelCompleteBadge { will-change: opacity, transform, filter; }

.chip-cloud rect { fill: #fff; fill-opacity: .48; stroke: #fff; stroke-opacity: .82; }
.chip-cloud > g, .number-cloud > text { will-change: opacity, transform, filter; }
.number-cloud .extra-number { font-size: 22px; font-weight: 520; fill: #52637a; }
.summary-grid .label, .final-fields .label { fill: #66768d; font-size: 27px; font-weight: 500; }
.summary-grid .value { fill: #0f1723; font-size: 32px; font-weight: 650; }
.final-fields .final-value { fill: #0b111a; font-size: 37px; font-weight: 680; }
.final-fields line { stroke: #d8e1ec; stroke-width: 2; }

.typed-digits { fill: #0a2b61; font-size: 58px; font-weight: 650; letter-spacing: -1.4px; }
.tc-mover { fill: #0a2b61; font-size: 58px; font-weight: 650; transform-box: fill-box; transform-origin: left center; }
.selection-card { transform-box: fill-box; transform-origin: center; }
.selection-card rect { fill: #fff; stroke: #8bc5ff; stroke-width: 2; filter: drop-shadow(0 10px 22px rgba(39,114,202,.16)); }
.selection-card text { fill: #18395f; font-size: 27px; font-weight: 680; }
.number-selection-card text { fill: #101722; font-size: 27px; font-weight: 650; }
#finalStatusActive { transform-box: fill-box; transform-origin: left center; }
#pendingSpinner, #excelMark { transform-box: fill-box; transform-origin: center; }
#excelMark { filter: drop-shadow(0 7px 14px rgba(16,124,65,.24)); }
#brandIntro { transform-box: fill-box; transform-origin: center; }
.excel-launch, .excel-sheet, .excel-outro { transform-box: fill-box; transform-origin: center; }
.excel-launch image { filter: drop-shadow(0 18px 30px rgba(16,124,65,.2)); }
.excel-sheet text { font-family: "IBM Plex Sans Local", "IBM Plex Sans", "Segoe UI", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.006em; }
#excelLaunchDots circle, #excelSourceFocus, #excelResultHalo, #excelQueryBadge, #excelCompleteBadge { transform-box: fill-box; transform-origin: center; }
.excel-result, .fast-phone { fill: #dc3f3f; font-size: 19px; font-weight: 600; }
.fast-iban { font-size: 18px; }
.excel-rows > g { transform-box: fill-box; transform-origin: center; }
.excel-fast-rows { will-change: opacity, transform; }
.outro-flow, .outro-arrow { transform-box: fill-box; transform-origin: center; }
.outro-arrow { shape-rendering: geometricPrecision; }

.start-experience {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  display: grid;
  grid-template-columns: 3.3cqw auto;
  grid-template-rows: auto auto;
  column-gap: 1.35cqw;
  align-items: center;
  min-width: 31cqw;
  padding: 1.5cqw 2.3cqw;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 2.7cqw;
  color: #fff;
  background: rgba(7,18,34,.74);
  box-shadow: 0 1.4cqw 5cqw rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  transform: translate(-50%,-50%);
  cursor: pointer;
  transition: opacity 220ms ease, transform 220ms ease;
}

.start-experience:hover { transform: translate(-50%,-50%) scale(1.025); }
.start-experience.is-hidden { opacity: 0; transform: translate(-50%,-46%) scale(.96); pointer-events: none; }
.start-experience strong { align-self: end; font: 650 2.35cqw/1.15 inherit; letter-spacing: -.02em; text-align: left; }
.start-experience small { align-self: start; color: #9eb0c7; font: 500 1.35cqw/1.2 inherit; text-align: left; }
.play-icon { grid-row: 1 / 3; width: 3.3cqw; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg,#53b7ff,#1a6ce8); box-shadow: 0 0 2.5cqw rgba(36,140,255,.5); }
.play-icon::after { content: ""; display: block; margin: 30% 0 0 40%; border-top: .7cqw solid transparent; border-bottom: .7cqw solid transparent; border-left: 1.05cqw solid #fff; }

.sound-state { position: absolute; top: 2.1%; right: 2.8%; z-index: 21; padding: .75cqw 1.15cqw; border: 1px solid rgba(91,181,255,.3); border-radius: 999px; color: #bfe1ff; background: rgba(7,18,34,.72); font-size: 1.35cqw; font-weight: 600; opacity: 0; transform: translateY(-.8cqw); transition: opacity 180ms ease, transform 180ms ease; }
.sound-state.is-visible { opacity: 1; transform: translateY(0); }

.debug-guides { display: none; fill: none; stroke: #00e6ff; stroke-width: 2; stroke-dasharray: 9 8; opacity: .38; }
.debug-guides text { display: none; }
.debug-controls { display: none; }
.debug .debug-guides, .debug .debug-controls { display: block; }
.debug .start-experience { display: none; }
.debug-controls { position: absolute; left: 2.2%; right: 2.2%; bottom: 1.2%; z-index: 40; padding: 1.2cqw; border: 1px solid rgba(89,175,255,.45); border-radius: 1.4cqw; background: rgba(4,12,24,.88); backdrop-filter: blur(12px); color: #dcecff; font-size: 1.8cqw; }
.debug-controls button { margin-right: .7cqw; padding: .75cqw 1.25cqw; border: 1px solid rgba(126,193,255,.45); border-radius: .8cqw; background: #10243d; color: #eff7ff; font: inherit; cursor: pointer; }
.debug-controls output { float: right; padding: .75cqw; font-variant-numeric: tabular-nums; }
.debug-controls input { display: block; width: 100%; margin-top: 1cqw; accent-color: #2d91ff; }

@media (prefers-reduced-motion: reduce) { .start-experience, .sound-state { transition: none; } }

.embed-phone { color-scheme: light; background: transparent; }
.embed-phone body { background: transparent; }
.embed-phone .preview-shell { width: 100vw; height: 100vh; aspect-ratio: auto; background: transparent; box-shadow: none; }
.embed-phone .stage { background: transparent; }
.embed-phone #phone { filter: none; }
.embed-phone .stage-backdrop, .embed-phone .phone-ground, .embed-phone .safe-area, .embed-phone .sound-state { display: none; }
.embed-phone .start-experience { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: 0; display: block; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; opacity: 1; transform: none; }
.embed-phone .start-experience:hover, .embed-phone .start-experience.is-hidden { transform: none; }
.embed-phone .start-experience.is-hidden { opacity: 0; pointer-events: none; }
.embed-phone .start-experience > * { display: none; }