/* Animated guides on the Help page: the same scenes as the app's tour.
   Alle's design tokens, scoped to .help-scene so they don't touch the site. */
.help-scene {
  /* ---- Base palette ------------------------------------------------------ */
  --color-background: #FDFDFC;   /* white, warm tint — cards, sheets        */
  --color-surface:    #F6F4EC;   /* beige — tray, rating active, inactive    */
  --color-surface-deep: #E8E5DA; /* beige-200 — rating container            */
  --color-foreground: #0C0C0C;   /* near-black — primary text               */

  --grey-500: #0C0C0C;
  --grey-400: #585858;
  --grey-300: #9F9F9F;
  --grey-200: #DDDDDD;

  --lime-100: #DCFB42;
  --lime-200: #C3DF22;

  --color-danger: #E5484D;

  /* ---- Deck palette (rotates) -------------------------------------------- */
  --deck-lime:   #E6F7A3;  --deck-lime-deep:   #CBE86F;  /* pastel lime, matches the family */
  --deck-purple: #CDC9FD;  --deck-purple-deep: #B5B1FC;
  --deck-pink:   #FEBDDA;  --deck-pink-deep:   #F1ADCA;
  --deck-blue:   #BDDDFE;  --deck-blue-deep:   #ADCFF1;
  --deck-green:  #CBFEBD;  --deck-green-deep:  #AEECB6;
  --deck-yellow: #FFF4AB;  --deck-yellow-deep: #EFDC8F;
  --deck-red:    #FEBDBD;  --deck-red-deep:    #EFA1A1;
  --deck-beige:  #F6F4EC;  --deck-beige-deep:  #E8E5DA;

  /* Monochrome mode swaps every deck to these */
  --deck-mono:      var(--color-background);
  --deck-mono-deep: var(--grey-200);

  /* ---- Verdict tags ------------------------------------------------------- */
  --tag-correct-bg: var(--deck-green);   --tag-correct-border: var(--deck-green-deep);
  --tag-almost-bg:  var(--deck-yellow);  --tag-almost-border:  var(--deck-yellow-deep);
  --tag-wrong-bg:   var(--deck-red);     --tag-wrong-border:   var(--deck-red-deep);

  /* ---- Semantic roles ---------------------------------------------------- */
  --page-bg:           var(--color-surface);      /* screen background      */
  --card-bg:           var(--color-background);   /* study card, sheets     */
  --text-primary:      var(--color-foreground);
  --text-secondary:    var(--grey-400);
  --text-tertiary:     var(--grey-300);
  --text-placeholder:  var(--grey-200);
  --deck-meta-color:   var(--grey-400);           /* "Column A → Column B"  */
  --deck-count-color:  var(--grey-400);
  --border-subtle:     var(--grey-200);
  --border-selected:   var(--grey-400);           /* chosen chip / choice */
  --size-border-selected: 1.5px;
  --cta-bg:            var(--color-foreground);   /* primary button fill */
  --cta-fg:            var(--color-background);   /* white on black (dark mode: black on white) */
  --progress-track:    rgb(12 12 12 / 0.2);
  --progress-fill:     var(--color-foreground);
  --scrim:             rgb(12 12 12 / 0.32);
  --press-overlay:     rgb(12 12 12 / 0.05);
  --start-tile-bg:     color-mix(in srgb, var(--color-surface-deep) 45%, var(--color-surface)); /* empty-home tiles */
  --start-tile-border: var(--color-surface-deep);
  --tab-light-track:   var(--color-surface);      /* segmented control + prompt box on white */
  --choice-bg:         var(--color-surface);      /* builder choices and chips */
  --search-field-bg:   var(--color-surface-deep);  /* expanded search: reads as an input */
  --inner-button-bg:   var(--color-surface);      /* icon buttons inside a card/sheet (on white)     */
  --outer-button-bg:   var(--color-surface-deep); /* icon buttons on the beige page: darker beige   */
  --secondary-bg:      var(--color-surface);      /* secondary buttons                               */
  --picture-frame:     var(--grey-200);           /* outline on flags so white edges show */
  --mark-wrong-bg:     var(--deck-red);           /* letters typed wrong                    */
  --mark-fix-bg:       var(--deck-green);         /* letters that fix them                  */

  /* ---- Typography -------------------------------------------------------- */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* Type scale, aligned with iOS text styles (Large Title 34 · Title 1 28 ·
     Title 3 20 · Body 17 · Subhead 15 · Footnote 13) so Alle reads like a
     native app. One step below the Figma brief (34/24/18/15), on purpose. */
  --font-size-display:     64px;  /* Done score                           */
  --font-size-large-title: 28px;  /* deck names, card text, auth title    */
  --font-size-small-title: 20px;  /* section, sheet and tile titles       */
  --font-size-deck-title:  24px;  /* deck names on the home cards         */
  --font-size-button:      17px;  /* body text, buttons, inputs           */
  --font-size-small:       15px;  /* secondary text                       */
  --font-size-caption:     13px;  /* labels, hints, meta                  */

  /* Steps the study card falls back through when text doesn't fit */
  --font-size-fit-1: 24px;
  --font-size-fit-2: 21px;
  --font-size-fit-3: 18px;
  --font-size-fit-4: 16px;
  --font-size-fit-5: 14px;

  --line-height-tight: 120%;
  --line-height-body:  140%;
  --letter-spacing-title: -0.02em;

  /* ---- Spacing ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --gutter:        var(--space-4);   /* screen side margin                 */
  --card-padding:  var(--space-6);   /* study card + deck card             */

  /* ---- Radii ------------------------------------------------------------- */
  --radius-button:   25px;
  --radius-card:     28px;   /* study card                                  */
  --radius-deck:     24px;   /* deck card on home                           */
  --radius-tab:      24px;   /* rating container                            */
  --radius-tab-item: 20px;   /* active segment                              */
  --radius-tag:      18.5px;
  --radius-menu:     24px;
  --radius-field:    16px;
  --radius-sheet:    28px;
  --radius-pill:     999px;
  --radius-mark:     4px;
  --radius-confetti: 8px;

  /* ---- Component sizes --------------------------------------------------- */
  --size-button:      50px;
  --size-tab:         58px;
  --size-tab-inset:   4px;
  --size-tag:         37px;
  --tag-padding-x:    19.5px;
  --size-icon-button: 44px;
  --size-icon:        20px;
  --size-progress:    4px;
  --size-deck-card:   164px;
  --size-shape-w:     80px;
  --size-shape-h:     80px;
  --shape-opacity:    0.35;
  --size-field:       50px;
  --size-header:      56px;
  --size-card-control: 40px;  /* Skip pill, speaker circle        */
  --size-icon-small:  18px;
  --screen-max:       520px;
  --home-max:         960px;  /* wider home on desktop/iPad/Duo for 2 columns */
  --size-logo:        32px;
  --size-menu-min:    250px;
  --size-controls:    124px;  /* bottom area: tab (58) + gap (16) + button (50) */
  --size-swatch:      44px;
  --size-confetti-w:  48px;   /* celebration cards */
  --size-confetti-h:  64px;
  --size-search-pill: 98px;   /* [search ···] pill: 2 × 44 + padding + border */
  --size-popup:       480px;  /* desktop popup width */
  --size-quiz-option: 50px;
  --size-edge-fade:   14px;  /* blur fade where sheet content meets header/buttons */
  --size-reorder-row: 64px;
  --size-card-picture: 120px; /* signs and flags on a study card */
  --size-sample-card: 112px;
  --size-sample-shape: 70px;
  --size-mini-card-w: 220px;
  --size-mini-card-h: 140px;
  --size-prompt-box:  220px;
  --size-toggle-w:    44px;
  --size-toggle-h:    26px;

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-card:   0 18px 48px rgb(12 12 12 / 0.10), 0 2px 6px rgb(12 12 12 / 0.04);
  --shadow-card-behind: 0 8px 24px rgb(12 12 12 / 0.05);
  --shadow-menu:   0 20px 50px rgb(12 12 12 / 0.16), 0 2px 8px rgb(12 12 12 / 0.06);
  --shadow-button-soft: 0 1px 2px rgb(12 12 12 / 0.06);

  /* ---- Card stack -------------------------------------------------------- */
  --stack-scale-step: 0.03;   /* each card behind is ~3% smaller           */
  --stack-offset:     8px;    /* and peeks this far below the one above    */
  --stack-depth:      3;
  --card-perspective: 1400px; /* depth for the card flip */
  --card-ratio:       1.25;   /* width ÷ height — card + stack fit above the keyboard on iPhone SE */
  --card-max-h:       560px;  /* cap on very short/wide screens (open Duo) */

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;

  /* Text on pastel surfaces (deck cards, verdict chips, answer marks) stays
     dark on the light pastels; dark mode swaps both for deeper colours with light text. */
  --ink:   #0C0C0C;
  --ink-2: #585858;
  --on-danger: #FDFDFC;

  color-scheme: light;

  /* ---- Layers ------------------------------------------------------------ */
  --z-sticky: 10;
  --z-menu:   40;
  --z-sheet:  50;
}
.help-scene {
  margin: 22px 0 26px; border-radius: 24px; background: #F6F4EC;
  display: flex; align-items: center; justify-content: center; min-height: 340px; overflow: hidden;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.4; color: #0C0C0C;
}
.help-scene * { box-sizing: border-box; }
.help-scene p, .help-scene small { margin: 0; }
.help-scene .icon { width: 20px; height: 20px; flex: none; display: block; }
.help-scene .deck-shape { display: block; }
@media (max-width: 520px) { .help-scene .sc { transform: scale(0.9); } }
/* shared scene bits */
.sc { position: relative; width: 300px; height: 260px; }
.sc small { font-size: 11px; color: var(--text-tertiary); }
.mini-deck {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  height: 64px; padding: 0 16px; border-radius: 16px;
  background: var(--deck-fill); color: var(--ink);
}
.mini-deck__meta { font-size: 10px; color: var(--ink-2); }
.mini-deck__title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; position: relative; z-index: 1; }
.mini-deck__shape { position: absolute; right: 10px; top: 50%; translate: 0 -50%; width: 40px; height: 40px; }
.mini-deck__shape .deck-shape { position: static; width: 100%; height: 100%; opacity: 1; color: var(--deck-deep); }

/* 1 · welcome: a card turns over to the answer */
.sc-welcome { perspective: 900px; }
.sc-card, .sc-face {
  position: absolute; left: 30px; right: 30px; height: 180px; top: 20px;
  border-radius: 24px; background: var(--card-bg); box-shadow: var(--shadow-card);
}
.sc-card--back1 { transform: translateY(14px) scale(0.95); opacity: 0.9; box-shadow: var(--shadow-card-behind); }
.sc-card--back2 { transform: translateY(26px) scale(0.9); opacity: 0.7; box-shadow: var(--shadow-card-behind); }
.sc-flip { position: absolute; inset: 0; transform-style: preserve-3d; animation: scFlip 6s var(--ease-out) infinite; }
.sc-face { backface-visibility: hidden; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.sc-face b { font-size: 28px; letter-spacing: -0.03em; margin-top: 14px; }
.sc-face--back { transform: rotateY(180deg); }
.sc-type { font-size: 15px; font-weight: 600; color: var(--text-placeholder); }
.sc-tag { align-self: flex-start; font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.sc-tag--ok { background: var(--tag-correct-bg); color: var(--ink); }
@keyframes scFlip { 0%, 38% { transform: rotateY(0); } 50%, 88% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

/* 2 · ready-made: decks slide into the list */
.sc-ready { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sc-ready .mini-deck { opacity: 0; animation: scSlideIn 6s var(--ease-out) infinite; }
.sc-ready .mini-deck:nth-child(2) { animation-delay: 0.35s; }
.sc-ready .mini-deck:nth-child(3) { animation-delay: 0.7s; }
@keyframes scSlideIn { 0% { opacity: 0; transform: translateX(30px); } 12%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.sc-tap {
  position: absolute; width: 34px; height: 34px; border-radius: 50%; left: 60%; top: 46%;
  background: color-mix(in srgb, var(--text-primary) 18%, transparent);
  border: 2px solid color-mix(in srgb, var(--text-primary) 35%, transparent);
  opacity: 0; animation: scTap 6s ease-in-out infinite;
}
@keyframes scTap { 0%, 40% { opacity: 0; transform: scale(1.3); } 50% { opacity: 1; transform: scale(1); } 56% { transform: scale(0.85); } 64%, 100% { opacity: 0; transform: scale(1); } }

/* 3 · the sheet fills in, then spins over: its back is the blue deck */
.sc-sheet { display: flex; align-items: center; justify-content: center; perspective: 1000px; animation: scSheetFade 7s ease-in-out infinite; }
@keyframes scSheetFade { 0% { opacity: 0; } 5%, 88% { opacity: 1; } 95%, 100% { opacity: 0; } }
.sc-spin { position: relative; width: 240px; height: 150px; transform-style: preserve-3d; animation: scSpin 7s cubic-bezier(.45,.05,.25,1) infinite; will-change: transform; }
.sc-gsheet, .sc-spin__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sc-gsheet { border-radius: 14px; background: var(--card-bg); box-shadow: var(--shadow-card-behind); overflow: hidden; font-size: 12px; }
.sc-gsheet__bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-weight: 600; border-bottom: 1px solid var(--border-subtle); }
.sc-gsheet__bar i { width: 12px; height: 12px; border-radius: 3px; background: #1E8E3E; }
.sc-gsheet__row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border-subtle); }
.sc-gsheet__row span { padding: 6px 10px; }
.sc-gsheet__row span + span { border-left: 1px solid var(--border-subtle); }
.sc-gsheet__head { font-weight: 600; color: var(--text-secondary); }
/* each row has its own timing (no delays), so nothing shows early */
.sc-row1 span { animation: scRow1 7s steps(1) infinite; }
.sc-row2 span { animation: scRow2 7s steps(1) infinite; }
.sc-row3 span { animation: scRow3 7s steps(1) infinite; }
@keyframes scRow1 { 0%, 11% { opacity: 0; } 12%, 100% { opacity: 1; } }
@keyframes scRow2 { 0%, 19% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes scRow3 { 0%, 27% { opacity: 0; } 28%, 100% { opacity: 1; } }
.sc-spin__back { transform: rotateY(180deg); }
.big-deck {
  position: relative; overflow: hidden; height: 100%; border-radius: 18px; padding: 16px 18px;
  display: flex; flex-direction: column; background: var(--deck-fill); color: var(--ink); box-shadow: var(--shadow-card);
}
.big-deck__title { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; margin-top: 8px; position: relative; z-index: 1; }
.big-deck__count { font-size: 11px; color: var(--ink-2); margin-top: auto; }
.big-deck__shape { position: absolute; right: 14px; bottom: 14px; width: 64px; height: 64px; }
.big-deck__shape .deck-shape { position: static; width: 100%; height: 100%; opacity: 1; color: var(--deck-deep); }
/* transform only: opacity on this element would flatten the 3D and show the sheet mirrored */
@keyframes scSpin {
  0%, 40% { transform: rotateY(0) scale(1); }
  52%  { transform: rotateY(180deg) scale(1.05); }
  58%, 95% { transform: rotateY(180deg) scale(1); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* 4 · AI: prompt out, reply back, then the same deck; all leave together */
.sc-ai { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sc-bubble { max-width: 230px; padding: 10px 14px; border-radius: 18px; font-size: 13px; line-height: 1.4; }
.sc-bubble--me { align-self: flex-end; background: var(--cta-bg); color: var(--cta-fg); border-bottom-right-radius: 6px; animation: scAiMe 7s var(--ease-out) infinite; }
.sc-bubble--ai { align-self: flex-start; background: var(--card-bg); box-shadow: var(--shadow-card-behind); border-bottom-left-radius: 6px; position: relative; min-height: 20px; animation: scAiReply 7s var(--ease-out) infinite; }
.sc-dots { position: absolute; left: 14px; top: 14px; display: inline-flex; gap: 4px; animation: scDotsHide 7s infinite; }
.sc-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); animation: scBlink 1s infinite; }
.sc-dots i:nth-child(2) { animation-delay: 0.15s; } .sc-dots i:nth-child(3) { animation-delay: 0.3s; }
.sc-csv { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; opacity: 0; animation: scCsvShow 7s infinite; }
@keyframes scAiMe    { 0% { opacity: 0; transform: translateY(8px); } 8%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes scAiReply { 0%, 12% { opacity: 0; transform: translateY(8px); } 20%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes scBlink { 50% { opacity: 0.3; } }
@keyframes scDotsHide { 0%, 32% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes scCsvShow { 0%, 36% { opacity: 0; } 44%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
.sc-ai__deck { opacity: 0; animation: scAiDeck 7s var(--ease-out) infinite; }
@keyframes scAiDeck { 0%, 54% { opacity: 0; transform: translateY(10px); } 62%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }

/* 5 · study: the right option lights up */
.sc-study { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.sc-qcard { height: 118px; border-radius: 20px; background: var(--card-bg); box-shadow: var(--shadow-card); padding: 10px 16px; display: flex; flex-direction: column; align-items: stretch; }
.sc-sign { width: 78px; height: 78px; margin: -2px auto 0; display: block; }
.sc-opts { display: grid; gap: 7px; }
.sc-opt { padding: 9px 14px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border-subtle); font-size: 13.5px; }
.sc-opt--right { animation: scRight 6s ease-in-out infinite; }
@keyframes scRight { 0%, 40% { background: var(--card-bg); border-color: var(--border-subtle); } 50%, 88% { background: var(--tag-correct-bg); border-color: var(--tag-correct-border); color: var(--ink); } 100% { background: var(--card-bg); } }

/* 6 · Home Screen: Alle in Safari → Share → Add to Home Screen → the icon joins the apps */
.sc-home { display: flex; align-items: center; justify-content: center; }
.iphone {
  position: relative; width: 132px; height: 272px; border-radius: 36px;
  background: #0d0d0f; padding: 4px;
  box-shadow: 0 0 0 1.5px #4a4a4f, 0 0 0 2.5px #1b1b1d, 0 20px 40px -12px rgba(0,0,0,0.35);
}
.iphone__island { position: absolute; z-index: 5; left: 50%; top: 10px; translate: -50% 0; width: 38px; height: 11px; border-radius: 8px; background: #000; }
.iphone__screen { position: absolute; inset: 4px; border-radius: 32px; overflow: hidden; }
.scr-status { position: absolute; left: 0; right: 0; top: 0; height: 30px; padding: 11px 16px 0; font-size: 8px; color: #111; }
.scr-status--light { color: #fff; }
/* Safari with Alle */
.scr-safari { background: #F6F4EC; animation: scSafari 7s ease-in-out infinite; }
.scr-page { position: absolute; left: 10px; right: 10px; top: 34px; display: flex; flex-direction: column; gap: 6px; }
.scr-page__logo { display: flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; color: #111; margin-bottom: 2px; }
.scr-page__logo i { width: 3px; height: 9px; border-radius: 1px; background: #111; }
.scr-page__logo i + i { margin-right: 2px; }
.scr-page__deck { height: 34px; border-radius: 9px; }
.scr-toolbar {
  position: absolute; left: 6px; right: 6px; bottom: 8px; height: 26px; border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 10px;
  background: rgba(255,255,255,0.86); box-shadow: 0 2px 8px rgba(0,0,0,0.08); backdrop-filter: blur(8px);
}
.scr-url { font-size: 7.5px; color: #333; }
.sc-share { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #0A84FF; animation: scShareTap 7s ease-in-out infinite; }
.sc-share .icon { width: 12px; height: 12px; }
@keyframes scShareTap { 0%, 12% { background: transparent; } 17% { background: rgba(10,132,255,0.2); } 24%, 100% { background: transparent; } }
.sc-sheetmenu { position: absolute; left: 6px; right: 6px; bottom: 6px; border-radius: 16px; background: rgba(250,250,250,0.97); color: #111; box-shadow: 0 -6px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column; font-size: 8.5px; transform: translateY(130%); animation: scMenu 7s cubic-bezier(.22,1,.36,1) infinite; }
.sc-sheetmenu span { padding: 7px 11px; border-bottom: 0.5px solid #e2e2e2; }
.sc-sheetmenu span:last-child { border-bottom: 0; }
.sc-sheetmenu__hl { animation: scHl 7s infinite; font-weight: 600; }
@keyframes scMenu { 0%, 20% { transform: translateY(130%); } 28%, 46% { transform: none; } 50%, 100% { transform: translateY(130%); } }
@keyframes scHl { 0%, 34% { background: transparent; } 38%, 46% { background: #e9e9ec; } 50%, 100% { background: transparent; } }
@keyframes scSafari { 0%, 46% { opacity: 1; } 52%, 94% { opacity: 0; } 100% { opacity: 1; } }
/* The home screen */
.scr-home { background: radial-gradient(130% 90% at 20% 0%, #6A4BC0 0%, #3A2580 50%, #1C1240 100%); opacity: 0; animation: scHome 7s ease-in-out infinite; }
@keyframes scHome { 0%, 46% { opacity: 0; transform: scale(1.04); } 54%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sc-apps { position: absolute; left: 9px; right: 9px; top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 4px; }
.sc-app { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sc-app small { font-size: 7px; color: #fff; opacity: 0.95; letter-spacing: 0.01em; }
.sc-app__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.sc-app__icon svg { width: 15px; height: 15px; }
.scr-dock {
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 40px; border-radius: 20px;
  display: flex; align-items: center; justify-content: space-evenly;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sc-appicon { opacity: 0; animation: scIcon 7s cubic-bezier(.34,1.56,.64,1) infinite; }
.sc-appicon__img { background: var(--deck-lime); gap: 2px; display: flex; align-items: center; justify-content: center; }
.sc-appicon__img i { width: 4px; height: 13px; border-radius: 1.5px; background: #0C0C0C; }
@keyframes scIcon { 0%, 58% { opacity: 0; transform: scale(0.3); } 66%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .onb *, .onb *::before { animation: none !important; }
  .sc-ready .mini-deck, .sc-ai__deck, .sc-appicon, .sc-bubble--ai, .sc-csv, .sc-gsheet__row span, .scr-home { opacity: 1; }
  .sc-spin { transform: rotateY(180deg); } .sc-dots, .scr-safari { display: none; }
  .sc-sheetmenu { transform: none; }
}
@media (max-height: 700px) { .onb__stage { height: 220px; } .sc { transform: scale(0.85); } .onb__slide { gap: var(--space-5); } }