/* Section 5 · L’application — scroll-told product tour.
   Desktop: steps scroll on the left, a sticky phone (drawn in CSS) on the right swaps between faithful
   recreations of the real app screens ("Brasserie moderne", light). A brass dial behind the phone turns
   to the active step. Mobile (< 900px): each step shows its own phone under its text (cloned by app.js).
   Every class is prefixed "app-" and scoped under #app. */

#app { overflow: clip; }
#app .app-head { max-width: 50rem; }
#app .app-lead { margin-top: 4px; }

/* ------------------------------------------------------------------ steps (mobile first) */
#app .app-tour { position: relative; margin-top: clamp(40px, 7vw, 96px); }
#app .app-rail { display: none; }
#app .app-steps { list-style: none; margin: 0; padding: 0; }
#app .app-step { position: relative; padding: 44px 0 52px; border-top: 1px solid var(--night-line); }
#app .app-step:first-child { border-top: 0; padding-top: 8px; }
#app .app-k { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--brass-light); }
#app .app-n { font-style: normal; font-size: 15px; letter-spacing: .04em; color: var(--brass-light); transition: color .5s; }
#app .app-kl { display: inline-flex; align-items: center; gap: 14px; }
#app .app-kl::before { content: ""; width: 32px; height: 1px; background: var(--brass-deco); opacity: .7; }
#app .app-h3 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 400; line-height: 1.06; letter-spacing: -.025em; margin: 0 0 16px; }
#app .app-p { margin: 0; max-width: 28em; font-size: 18px; line-height: 1.65; color: var(--on-night-muted); }
#app .app-tags { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#app .app-tags .pill { font-weight: 550; color: var(--on-night); }
#app .app-note { margin: 36px 0 0; font-size: 14px; line-height: 1.5; color: var(--on-night-muted); }

/* mobile phone under each step */
#app .app-mob { --s: .6886; display: flex; justify-content: center; margin-top: 34px; position: relative; }
#app .app-mob:empty { display: none; }
#app .app-mob::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 164, 92, .16), rgba(138, 28, 53, .08) 60%, rgba(20, 16, 15, 0)); }
#app .app-stage { display: none; }

/* ------------------------------------------------------------------ the device (shared by desktop and mobile) */
#app .app-device { position: relative; width: calc(395px * var(--s)); height: calc(832px * var(--s)); flex: none; }
#app .app-phone { position: absolute; left: 0; top: 0; width: 395px; height: 832px; padding: 10px; border-radius: 62px; transform: scale(var(--s)); transform-origin: 0 0;
  background: linear-gradient(150deg, var(--night-line) 0%, var(--night-2) 20%, var(--night) 52%, var(--night-3) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(245, 238, 231, .16), inset 0 0 0 5px var(--night), 0 0 0 1px rgba(0, 0, 0, .55),
    0 70px 120px -30px rgba(0, 0, 0, .75), 0 40px 80px -40px rgba(138, 28, 53, .45); }
#app .app-phone::before { content: ""; position: absolute; right: -3px; top: 210px; width: 4px; height: 96px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--night-3), var(--night-line)); }
#app .app-phone::after { content: ""; position: absolute; left: -3px; top: 172px; width: 4px; height: 58px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, var(--night-line), var(--night-3)); box-shadow: 0 74px 0 var(--night-3); }
#app .app-screen { position: relative; width: 375px; height: 812px; border-radius: 52px; overflow: hidden; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); font: 400 16px/1.45 var(--sans); text-align: left; -webkit-font-smoothing: antialiased; }
#app .app-glare { position: absolute; inset: 10px; border-radius: 52px; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 24%, rgba(255, 255, 255, 0) 42%); }
#app .app-screen b { font-weight: 650; }
#app .app-screen p { margin: 0; }

/* status bar + app bar */
#app .app-sb { position: relative; flex: none; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 36px; font: 600 15px/1 var(--sans); }
#app .app-sb::after { content: ""; position: absolute; left: 50%; top: 11px; width: 114px; height: 33px; margin-left: -57px; border-radius: 20px; background: var(--night); }
#app .app-sb-ic { display: flex; gap: 6px; align-items: center; }
#app .app-sb-ic svg { width: 17px; height: 12px; fill: currentColor; }
#app .app-sb-ic svg + svg { width: 26px; }
#app .app-ab { flex: none; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
#app .app-logo { display: flex; align-items: center; gap: 8px; }
#app .app-wm { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
#app .app-wm em { font-style: italic; font-weight: 500; color: var(--wine); margin-right: 2px; }
#app .app-ch { width: 15px; height: 15px; border-radius: 3px; background: #DA291C; position: relative; flex: none; }
#app .app-ch::before, #app .app-ch::after { content: ""; position: absolute; background: #fff; }
#app .app-ch::before { left: 6px; top: 3px; width: 3px; height: 9px; }
#app .app-ch::after { left: 3px; top: 6px; width: 9px; height: 3px; }
#app .app-acts { display: flex; gap: 4px; }
#app .app-ib { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#app .app-ib svg { width: 21px; height: 21px; }
#app .app-en { width: auto; min-width: 48px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; font: 600 13px/1 var(--sans); }

/* tab bar with a sliding pill */
#app .app-tb { position: relative; flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 10px 26px; background: var(--paper); border-top: 1px solid var(--line); }
#app .app-tb::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ink); opacity: .85; }
#app .app-tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .01em; transition: color .5s; }
#app .app-tab svg { width: 22px; height: 22px; }
#app .app-tabpill { position: absolute; left: 26.4px; top: 10px; width: 56px; height: 30px; border-radius: 999px; background: var(--wine-soft);
  transform: translateX(calc(var(--t, 1) * 88.75px)); transition: transform .7s var(--ease-out); }
#app .app-phone[data-tab="0"] { --t: 0; } #app .app-phone[data-tab="1"] { --t: 1; } #app .app-phone[data-tab="2"] { --t: 2; } #app .app-phone[data-tab="3"] { --t: 3; }
#app .app-phone[data-tab="0"] .app-tab-0, #app .app-phone[data-tab="1"] .app-tab-1,
#app .app-phone[data-tab="2"] .app-tab-2, #app .app-phone[data-tab="3"] .app-tab-3 { color: var(--wine); }

/* the six views: crossfade + slide, direction follows the scroll */
#app .app-views { position: relative; flex: 1; overflow: hidden; }
#app .app-views::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; z-index: 2; pointer-events: none; background: linear-gradient(rgba(251, 248, 244, 0), var(--paper)); }
#app .app-scr { position: absolute; inset: 0; padding: 18px 20px 24px; opacity: 0; transform: translate3d(0, 40px, 0) scale(.985);
  transition: opacity .4s var(--ease), transform .8s var(--ease-out); }
#app .app-scr.is-before { transform: translate3d(0, -40px, 0) scale(.985); }
#app .app-scr.is-on { opacity: 1; transform: none; transition: opacity .6s var(--ease) .1s, transform .9s var(--ease-out) .05s; }

/* shared screen parts */
#app .app-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(60, 30, 20, .04), 0 8px 24px rgba(60, 30, 20, .06); }
#app .app-ltop { display: flex; align-items: center; gap: 12px; margin-top: -6px; }
#app .app-x { width: 44px; height: 44px; margin-left: -10px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
#app .app-x svg { width: 20px; height: 20px; }
#app .app-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--linen); overflow: hidden; }
#app .app-bar i { display: block; height: 100%; border-radius: 4px; background: var(--wine); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 1s var(--ease-out) .15s; }
#app .app-kick { font-family: var(--serif); font-style: italic; font-size: 14.5px; letter-spacing: .01em; color: var(--brass); margin: 16px 0 6px !important; }
#app .app-lbody { margin-top: 8px; padding: 16px 18px 18px; }
#app .app-pic { height: 132px; border-radius: 20px; background: var(--wine-soft); display: flex; align-items: center; justify-content: center; margin: 0 0 18px; }
#app .app-pic svg { width: 196px; height: auto; transition: transform 1s var(--ease-out), opacity .8s; }
#app .app-pw { stroke: var(--wine); }
#app .app-pb { stroke: var(--brass); }
#app .app-ltext { font-size: 21px; line-height: 1.45; font-weight: 450; }
#app .app-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 14px; }
#app .app-links > span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 6px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
#app .app-links > span:first-child { margin-left: -6px; }
#app .app-links svg { width: 17px; height: 17px; }
#app .app-main { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; margin-top: 22px; border-radius: 14px; background: var(--wine); color: #fff; font-size: 17px; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 20px rgba(138, 28, 53, .22); transition: background-color .4s, color .4s, box-shadow .4s; }
#app .app-h1 { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 4px 0 6px !important; }
#app .app-q { font-size: 20px; line-height: 1.35; font-weight: 750; margin: 2px 0 10px !important; }
#app .app-opt { display: flex; gap: 12px; align-items: center; margin: 10px 0; padding: 12px 14px; min-height: 58px; border-radius: 18px; border: 1.5px solid var(--line-strong); background: var(--card); font-size: 17px; line-height: 1.3;
  transition: border-color .35s, background-color .35s, box-shadow .35s; }
#app .app-key { flex: none; width: 30px; height: 30px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--paper-2); font-family: var(--serif); font-weight: 600; transition: background-color .35s, color .35s; }
#app .app-key svg { width: 15px; height: 15px; }
#app .app-mk { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; background: var(--ok); color: #fff; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
#app .app-mk svg { width: 13px; height: 13px; }
#app .app-hist { font-size: 14px; color: var(--muted); }

/* "answered" look (the final state, also the no-JS state) */
#app .app-ans { border-color: var(--ok); background: var(--ok-soft); }
#app .app-ans .app-key { background: var(--ok); color: #fff; }

/* 1 · lesson: the bar fills and the picture settles */
#app .app-scr[data-ph="0"] .app-bar i { transform: scaleX(0); }
#app .app-scr[data-i="0"][data-ph="0"] .app-pic svg { transform: scale(.9) translateY(6px); opacity: .3; }

/* 2 · law opened: the quote unfolds and the screen scrolls up */
#app .app-scroll { transform: translateY(-112px); transition: transform 1.1s var(--ease-out) .2s; }
#app .app-scr[data-i="1"][data-ph="0"] .app-scroll { transform: none; }
#app .app-law { margin: 10px 0 0; padding: 12px 14px; border-left: 3px solid var(--brass-deco); background: var(--paper-2); border-radius: 0 18px 18px 0; font-family: var(--serif); font-size: 15px; line-height: 1.5;
  transform-origin: 0 0; transition: opacity .7s var(--ease), transform .9s var(--ease-out); }
#app .app-law cite { display: block; margin-top: 6px; font-style: italic; font-size: 13.5px; color: var(--brass); }
#app .app-scr[data-i="1"][data-ph="0"] .app-law { opacity: 0; transform: translateY(-10px) scaleY(.96); }
#app .app-open { color: var(--wine) !important; }

/* 3 · question: pick B, then "Juste" */
#app .app-fb { margin-top: 8px; padding: 12px 14px; border-radius: 18px; background: var(--ok-soft); font-size: 15.5px; line-height: 1.45; transition: opacity .5s var(--ease), transform .7s var(--ease-out); }
#app .app-fb > b:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 700; margin-right: 4px; }
#app .app-mk-i { width: 22px; height: 22px; margin: 0; }
#app .app-l1 { display: none; }
#app .app-s3[data-ph="0"] .app-l1, #app .app-s3[data-ph="1"] .app-l1 { display: inline; }
#app .app-s3[data-ph="0"] .app-l2, #app .app-s3[data-ph="1"] .app-l2 { display: none; }
#app .app-s3[data-ph="0"] .app-main { background: var(--paper-2); color: var(--muted); box-shadow: none; }
#app .app-s3[data-ph="0"] .app-ans, #app .app-s3[data-ph="1"] .app-ans { border-color: var(--line-strong); background: var(--card); }
#app .app-s3[data-ph="0"] .app-ans .app-key { background: var(--paper-2); color: var(--ink); }
#app .app-s3[data-ph="1"] .app-ans { border-color: var(--wine); background: var(--wine-soft); box-shadow: 0 0 0 3px rgba(138, 28, 53, .22); }
#app .app-s3[data-ph="1"] .app-ans .app-key { background: var(--wine); color: #fff; }
#app .app-s3[data-ph="0"] .app-ans .app-mk, #app .app-s3[data-ph="1"] .app-ans .app-mk { transform: scale(0); opacity: 0; }
#app .app-s3[data-ph="0"] .app-fb, #app .app-s3[data-ph="1"] .app-fb { opacity: 0; transform: translateY(8px); }

/* 4 · exam result: grade counts up, the scale fills to the pass line and beyond */
#app .app-sub { color: var(--muted); font-size: 14.5px; margin: 0 0 14px !important; }
#app .app-grade { text-align: center; padding: 20px 18px 18px; background: linear-gradient(165deg, var(--card) 0%, var(--paper) 55%, var(--paper-2) 100%); }
#app .app-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 12px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 700; letter-spacing: .02em;
  transition: opacity .5s, transform .7s cubic-bezier(.34, 1.56, .64, 1); }
#app .app-badge svg { width: 14px; height: 14px; }
#app .app-big { font-family: var(--serif); font-weight: 400; font-size: 84px; line-height: 1; letter-spacing: -.04em; margin: 10px 0 4px; color: var(--ok); font-variant-numeric: lining-nums tabular-nums; }
#app .app-big small { font-size: 24px; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
#app .app-gsub { font-size: 15px; color: var(--muted); margin: 0 0 18px !important; }
#app .app-gsub b { color: var(--ink); }
#app .app-scale { position: relative; margin: 0 6px; height: 38px; text-align: left; }
#app .app-sc-tr { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--bad-soft) 0%, var(--bad-soft) 60%, var(--ok-soft) 60%, var(--ok-soft) 100%); }
#app .app-sc-fill { position: absolute; left: 0; top: 0; width: 100%; height: 8px; border-radius: 4px; background: var(--ok); transform-origin: 0 50%; transform: scaleX(.8); transition: transform 1.2s var(--ease-out) .1s; }
#app .app-sc-min { position: absolute; top: -6px; left: 60%; width: 2px; height: 20px; background: var(--ink); opacity: .55; }
#app .app-sc-run { position: absolute; left: 0; top: 0; width: 100%; height: 8px; transform: translateX(80%); transition: transform 1.2s var(--ease-out) .1s; }
#app .app-sc-dot { position: absolute; top: -5px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 4px solid var(--ok); }
#app .app-sc-lbl { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--muted); }
#app .app-sc-lbl b { position: absolute; left: 60%; top: 18px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
#app .app-gnote { font-size: 14px; line-height: 1.45; color: var(--muted); margin: 16px 0 0 !important; }
#app .app-s4[data-ph="0"] .app-sc-fill { transform: scaleX(0); }
#app .app-s4[data-ph="0"] .app-sc-run { transform: translateX(0); }
#app .app-s4[data-ph="0"] .app-badge { opacity: 0; transform: scale(.7); }
#app .app-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 2px 10px; }
#app .app-sec-h { font-family: var(--serif); font-weight: 500; font-size: 21px; }
#app .app-sec > span:last-child { font-size: 13px; font-weight: 600; color: var(--muted); }
#app .app-it { padding: 14px 16px; }
#app .app-itq { font-size: 15px; font-weight: 600; line-height: 1.45; margin: 0 0 8px !important; }
#app .app-a { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; margin: 6px 0 0 !important; }
#app .app-a i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
#app .app-a i svg { width: 12px; height: 12px; }
#app .app-no i { background: var(--bad-soft); color: var(--bad); }
#app .app-no span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--bad); }
#app .app-yes i { background: var(--ok-soft); color: var(--ok); }

/* 5 · "Mes erreurs": the right answer is found, the question leaves the list */
#app .app-ecard { margin-top: 10px; padding: 18px; }
#app .app-s5 .app-q { font-size: 19px; font-weight: 700; margin: 4px 0 10px !important; }
#app .app-s5 .app-opt { margin: 8px 0; min-height: 54px; font-size: 16.5px; }
#app .app-s5 .app-ans .app-kl1 { display: none; }
#app .app-s5[data-ph="0"] .app-ans { border-color: var(--line-strong); background: var(--card); }
#app .app-s5[data-ph="0"] .app-ans .app-key { background: var(--paper-2); color: var(--ink); }
#app .app-s5[data-ph="0"] .app-ans .app-kl1 { display: inline; }
#app .app-s5[data-ph="0"] .app-ans .app-key svg { display: none; }
#app .app-efb { margin-top: 10px; line-height: 1.45; transition: opacity .6s var(--ease), transform .8s var(--ease-out); }
#app .app-efb > b { color: var(--ok); font-size: 17px; }
#app .app-efb p { margin: 6px 0 0 !important; font-size: 15px; }
#app .app-main-s { margin-top: 14px; }
#app .app-s5[data-ph="0"] .app-efb { opacity: 0; transform: translateY(10px); }

/* 6 · progress: figures, bars that grow, medals that land */
#app .app-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }
#app .app-kpi { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(60, 30, 20, .04), 0 8px 24px rgba(60, 30, 20, .06); }
#app .app-v { display: block; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -.02em; }
#app .app-v small { font-size: 15px; color: var(--muted); letter-spacing: 0; }
#app .app-kl2 { display: block; margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--muted); }
#app .app-kl2 b { color: var(--ink); font-weight: 600; }
#app .app-pcard { padding: 14px 16px; margin-bottom: 12px; }
#app .app-ph2 { font-family: var(--serif); font-size: 18px; font-weight: 600; margin: 0 0 8px !important; }
#app .app-cnt { float: right; margin-top: 3px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--muted); }
#app .app-chart { display: block; width: 100%; height: auto; overflow: visible; }
#app .app-chart text { font-family: var(--sans); font-size: 13px; fill: var(--muted); }
#app .app-chart .app-today { fill: var(--ink); font-weight: 700; }
#app .app-ax { stroke: var(--line); stroke-width: 1; }
#app .app-okb { fill: var(--ok); stroke: var(--card); stroke-width: 1.5; }
#app .app-ko { fill: var(--bad); stroke: var(--card); stroke-width: 1.5; }
#app .app-zero { fill: var(--line-strong); }
#app .app-cb { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .8s var(--ease-out); transition-delay: calc(var(--k) * 45ms); }
#app .app-s6[data-ph="0"] .app-cb { transform: scaleY(0); }
#app .app-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
#app .app-legend span { display: inline-flex; align-items: center; gap: 6px; }
#app .app-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#app .app-lg-ok { background: var(--ok); } #app .app-lg-ko { background: var(--bad); }
#app .app-tro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#app .app-tr { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
#app .app-tr b { font-size: 11.5px; line-height: 1.2; font-weight: 650; color: var(--muted); }
#app .app-tr.is-won b { color: var(--ink); }
#app .app-md { width: 50px; height: 55px; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; transition-delay: calc(var(--k) * 110ms); }
#app .app-disc { fill: var(--paper-2); stroke: var(--line-strong); stroke-width: 1.5; }
#app .app-rib { fill: var(--line-strong); }
#app .app-sym { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#app .app-tr.is-won .app-disc { fill: var(--brass-deco); stroke: var(--brass); }
#app .app-tr.is-won .app-rib { fill: var(--wine); }
#app .app-tr.is-won .app-sym { stroke: var(--ink); }
#app .app-pb2 { display: block; width: 50px; height: 4px; border-radius: 2px; background: var(--linen); overflow: hidden; }
#app .app-pb2 i { display: block; width: 60%; height: 100%; background: var(--brass); }
#app .app-s6[data-ph="0"] .app-md, #app .app-s6[data-ph="1"] .app-md { transform: scale(.4) translateY(14px); opacity: 0; }

/* ------------------------------------------------------------------ desktop: sticky phone, dial, rail */
@media (min-width: 900px) {
  #app .app-tour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 540px); column-gap: clamp(32px, 5vw, 80px); }
  #app .app-mob { display: none; }
  #app .app-rail { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--night-line); }
  #app .app-rail-fill { position: absolute; left: 0; top: 0; width: 1px; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--rp, 0));
    background: linear-gradient(180deg, var(--brass-deco), var(--rose)); }
  #app .app-steps { --pad: clamp(40px, 4.4vw, 64px); padding: 0 0 0 var(--pad); }
  #app .app-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; border-top: 0; opacity: .7; transition: opacity .6s var(--ease); }
  #app .app-step:first-child { padding-top: 48px; }
  #app .app-step.is-active { opacity: 1; }
  #app .app-step.is-active .app-n { color: var(--rose); }
  #app .app-k { position: relative; }
  #app .app-k::before { content: ""; position: absolute; left: calc(-1 * var(--pad) - 5px); top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; box-sizing: border-box;
    background: var(--night); border: 1px solid var(--brass-deco); transition: transform .5s var(--ease-out), background-color .5s, border-color .5s; }
  #app .app-step.is-active .app-k::before { background: var(--rose); border-color: var(--rose); transform: scale(1.25); box-shadow: 0 0 0 6px rgba(240, 163, 179, .12); }
  #app .app-note { padding-left: clamp(40px, 4.4vw, 64px); }

  #app .app-stage { --s: .8608; --i: 0; display: block; position: relative; }
  #app .app-sticky { position: sticky; top: max(24px, calc(50vh - (832px * var(--s) + 70px) / 2)); display: flex; flex-direction: column; align-items: center; }
  #app .app-glow { position: absolute; left: 50%; top: calc(416px * var(--s)); width: calc(720px * var(--s)); height: calc(720px * var(--s)); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(201, 164, 92, .17), rgba(138, 28, 53, .10) 55%, rgba(20, 16, 15, 0)); }
  #app .app-dial { position: absolute; left: 50%; top: calc(416px * var(--s)); width: calc(660px * var(--s)); height: calc(660px * var(--s)); transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
  #app .app-dial-o { fill: none; stroke: var(--night-line); stroke-width: 1; }
  #app .app-dial-i { fill: none; stroke: var(--brass-deco); stroke-width: 1; stroke-dasharray: 1 7; opacity: .45; }
  #app .app-dial-rot { transform: rotate(calc(var(--i) * -60deg)); transition: transform 1.4s var(--ease-out); }
  #app .app-dial-t { fill: none; stroke: var(--brass-deco); stroke-width: 1.3; stroke-linecap: round; opacity: .6; }
  #app .app-dial-n text { font-family: var(--serif); font-style: italic; font-size: 17px; fill: var(--brass-light); opacity: .55; text-anchor: middle; dominant-baseline: middle; transition: fill .6s, opacity .6s; }
  #app .app-stage[data-i="0"] .app-dial-n text:nth-child(1), #app .app-stage[data-i="1"] .app-dial-n text:nth-child(2),
  #app .app-stage[data-i="2"] .app-dial-n text:nth-child(3), #app .app-stage[data-i="3"] .app-dial-n text:nth-child(4),
  #app .app-stage[data-i="4"] .app-dial-n text:nth-child(5), #app .app-stage[data-i="5"] .app-dial-n text:nth-child(6) { fill: var(--rose); opacity: 1; }
  #app .app-dial-m { fill: var(--rose); }
  #app .app-tilt { position: relative; z-index: 1; transform: perspective(1600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .9s var(--ease-out); }

  /* counter under the phone */
  #app .app-count-wrap { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin-top: 30px; height: 30px; }
  #app .app-cn { display: inline-block; height: 28px; overflow: hidden; font-size: 28px; line-height: 28px; color: var(--brass-light); }
  #app .app-cn .app-cn-roll { display: flex; flex-direction: column; transform: translateY(calc(var(--i) * -28px)); transition: transform .8s var(--ease-out); }
  #app .app-cn .app-cn-roll span { display: block; height: 28px; }
  #app .app-cn-of { font-size: 15px; color: var(--on-night-muted); }
  #app .app-cn-lbl { display: inline-block; height: 24px; overflow: hidden; min-width: 8.2em; margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--night-line); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 24px; color: var(--on-night); }
  #app .app-cn-lbl .app-cn-roll { display: flex; flex-direction: column; transform: translateY(calc(var(--i) * -24px)); transition: transform .8s var(--ease-out) .06s; }
  #app .app-cn-lbl .app-cn-roll span { display: block; height: 24px; white-space: nowrap; }
}
@media (min-width: 900px) and (max-height: 900px) { #app .app-stage { --s: .78; } }
@media (min-width: 900px) and (max-height: 800px) { #app .app-stage { --s: .7; } }
@media (min-width: 900px) and (max-height: 700px) { #app .app-stage { --s: .6; } }
@media (min-width: 900px) and (max-height: 600px) { #app .app-stage { --s: .5; } #app .app-count-wrap { display: none; } }

/* very narrow phones: keep the mobile device inside 360px */
@media (max-width: 340px) { #app .app-mob { --s: .62; } }

@media (prefers-reduced-motion: reduce) {
  #app .app-tilt { transform: none !important; }
}