/* Animated marketing scenes. The Rewrite panel is drawn at TRUE app scale (620pt wide; every padding, size and
   colour taken from Sources/Retype/UI/*.swift as of cf92c45) and scaled into a desktop composition, so the site
   stays proportionally honest to the shipping app. The app renders in the system font (it asks for Inter but
   doesn't bundle it), so the scenes do too.
   scene.js builds the panel and plays each scene's timeline; Scripts/render-scenes.sh renders stills (#still). */

:root {
  --accent: #6E5BFF;
  --accent-soft: #F0EDFF;
  --accent-border: #D9D2FF;
  --border: #E3E3EA;
  --alt: #F5F5F8;
  --text: #1D1D21;
  --text2: #6E6E78;
  --text3: #A2A2AC;
  --placeholder: #BFBFC4;
  --green: #2E9E5B;
  --green-soft: #E9F7EF;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; }
body { font-family: var(--sys); -webkit-font-smoothing: antialiased; color: var(--text); }
svg { display: block; flex: none; }
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }

/* ---------- desktop ---------- */
.canvas { position: relative; overflow: hidden; transform-origin: 0 0;
          background: linear-gradient(155deg, #F1F2F7 0%, #E9EBF1 52%, #E1E4EC 100%); }

/* ---------- host app window ---------- */
.win { position: absolute; background: #fff; border-radius: 14px; overflow: hidden;
       box-shadow: 0 26px 64px rgba(22, 24, 42, .10), 0 3px 10px rgba(22, 24, 42, .05); }
.win .bar { position: relative; display: flex; align-items: center; justify-content: center; padding: 15px 18px;
            border-bottom: 1px solid #F0F0F4; font-size: 13.5px; font-weight: 600; color: var(--text2); }
.win .dots { position: absolute; left: 18px; display: flex; gap: 7px; }
.win .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.win .dots i:nth-child(1) { background: #FF5F57; }
.win .dots i:nth-child(2) { background: #FEBC2E; }
.win .dots i:nth-child(3) { background: #28C840; }
.win .to { display: flex; align-items: baseline; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #F2F2F6; font-size: 17px; }
.win .to .lbl { color: var(--text3); }
.win .body { padding: 18px; font-size: 17.5px; line-height: 1.6; transition: opacity .25s ease; }
.win .body p { margin: 0 0 14px; }
.win .body p:last-child { margin-bottom: 0; }
.win .body .ph { color: var(--text3); }
.win .body.out { opacity: 0; }
.tcaret { display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--text);
          animation: blink 1.06s step-end infinite; }
.sel { background-image: linear-gradient(#BBD4F7, #BBD4F7); background-repeat: no-repeat; background-size: 0% 100%;
       transition: background-size .55s cubic-bezier(.3, 0, .2, 1); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sel.on { background-size: 100% 100%; }
.ins { border-radius: 3px; transition: background-color 1.4s ease; background-color: transparent; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ins.flash { background-color: var(--accent-soft); transition: none; }
@keyframes blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- the Rewrite panel, at true app scale ---------- */
.stage { position: absolute; transform-origin: 0 0; }
.panel { position: relative; width: 620px; border-radius: 14px; border: 1px solid var(--border);
         /* .popover material (light) + the 70% white wash */
         background: linear-gradient(rgba(255, 255, 255, .70), rgba(255, 255, 255, .70)), rgba(232, 232, 237, .62);
         -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
         box-shadow: 0 18px 44px rgba(0, 0, 0, .19), 0 2px 6px rgba(0, 0, 0, .08);
         transform-origin: 18% 0; transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .3, 1.15); }
.panel.hide { opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }

.p-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.p-logo { display: flex; align-items: center; gap: 1.743px; font-size: 21px; font-weight: 800; letter-spacing: -.588px; line-height: 1; }
.p-logo i { display: block; width: 3.36px; height: 22.26px; border-radius: .5px; background: var(--accent); animation: blink 1.06s step-end infinite; }
.p-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--green-soft);
           color: var(--green); font-size: 10px; font-weight: 500; white-space: nowrap; transition: opacity .25s ease; }
.p-badge[hidden] { display: none; }
.p-spacer { flex: 1; min-width: 12px; }
.p-provider { display: flex; align-items: center; gap: 8px; width: 208px; height: 32px; padding: 6px 8px; border: 1px solid var(--border);
              border-radius: 10px; background: var(--alt); }
.p-provider .name { font-size: 12px; font-weight: 600; }
.p-provider .gap { flex: 1; }
.p-provider .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.p-provider .chev { margin-right: 2px; color: var(--text3); }
.p-close { color: var(--text3); }

.p-tabs { display: flex; gap: 18px; padding: 0 12px; }
.p-tab { font-size: 12.5px; font-weight: 500; color: var(--text3); }
.p-tab u { display: block; height: 2px; margin-top: 7px; background: transparent; }
.p-tab.on { color: var(--accent); font-weight: 600; }
.p-tab.on u { background: var(--accent); }
.p-rule { height: 1px; background: var(--border); }

.p-body { padding: 12px; }
.p-card { border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.p-instr { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.p-instr .pencil { color: var(--text3); }
.p-instr .pl { flex: 1; min-width: 150px; font-size: 12px; color: var(--placeholder); }
.p-send { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--accent-border); border-radius: 8px;
          background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 600; box-shadow: 0 1px 4px rgba(110, 91, 255, .12);
          transition: opacity .2s ease, transform .12s ease; }
.p-send .k, .p-btn .k { font-size: 11px; font-weight: 500; }
.p-send.off { opacity: .55; }

.p-out { padding: 9px 10px 10px; }
.o-stack { display: grid; }
.o-stack > * { grid-area: 1 / 1; transition: opacity .28s ease-out; }
.o-stack > .gone { opacity: 0; }
.o-text { margin: 0; font-size: 12.5px; line-height: 20px; white-space: pre-wrap; }
.tint { color: var(--accent); background: rgba(240, 237, 255, .6); }
.o-notes { min-height: 72px; }
.o-lead { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--accent); }
.o-guide { margin: 0; font-size: 12.5px; line-height: 20px; color: var(--text3); }
.o-skel { min-height: 40px; padding-top: 4px; display: grid; gap: 6px; align-content: start;
          -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.4) 0%, #000 50%, rgba(0,0,0,.4) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.4) 0%, #000 50%, rgba(0,0,0,.4) 100%);
          -webkit-mask-size: 200% 100%; mask-size: 200% 100%; animation: sweep 1.1s linear infinite; }
.o-skel i { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, #F5F5F8, #F0EDFF, #F5F5F8); }
.o-skel i:nth-child(2) { width: 70%; }
@keyframes sweep { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: -100% 0; mask-position: -100% 0; } }

.p-chips { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.p-chips[hidden] { display: none; }
.p-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; background: var(--green-soft);
          color: var(--green); font-size: 10.5px; font-weight: 500; white-space: nowrap; animation: chip-in .3s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes chip-in { from { opacity: 0; transform: translateY(3px) scale(.92); } }

.p-foot { display: flex; align-items: center; gap: 10px; padding: 0 12px 12px; min-height: 46px; }
.p-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600; transition: transform .1s ease, filter .1s ease; }
.p-btn.pri { padding: 8px 16px; background: var(--accent); color: #fff; }
.p-btn.pri .k { font-size: 10.5px; color: var(--accent-border); }
.p-btn.gh { padding: 8px 14px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent); font-size: 12px; }
.p-btn.down, .p-send.down { transform: scale(.95); filter: brightness(.92); }
.p-revert { font-size: 11.5px; color: var(--text3); white-space: pre; }
[hidden] { display: none !important; }

/* progress capsule: live badge (breathing sparkle + ripple), glinting label, phase messages slide in */
.cap { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px 0 4px; border-radius: 13px;
       background: var(--accent-soft); border: 1px solid var(--accent-border); }
.cap-badge { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.cap-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent);
                    animation: ripple 1.6s ease-out infinite; }
.cap-spin { animation: spin 3.2s linear infinite; }
.cap-spin svg { animation: breathe .9s ease-in-out infinite alternate; }
@keyframes ripple { from { transform: scale(1); opacity: .45; } to { transform: scale(1.5); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { from { transform: scale(.82); opacity: .6; } to { transform: scale(1.12); opacity: 1; } }
.cap-lbl { position: relative; height: 16px; overflow: hidden; transition: width .42s cubic-bezier(.34, 1.3, .5, 1); }
.cap-txt { position: absolute; left: 0; top: 0; line-height: 16px; white-space: nowrap; font-size: 11.5px; font-weight: 600;
           color: transparent; -webkit-background-clip: text; background-clip: text;
           background-image: linear-gradient(90deg, var(--accent) 0 40%, rgba(255,255,255,.85) 50%, var(--accent) 60% 100%);
           background-size: 300% 100%; animation: glint 2.2s ease-in-out infinite;
           transition: transform .32s cubic-bezier(.2, .8, .3, 1), opacity .32s ease; }
.cap-txt.below { transform: translateY(100%); opacity: 0; }
.cap-txt.above { transform: translateY(-100%); opacity: 0; }
@keyframes glint { 0% { background-position: 100% 0; } 82%, 100% { background-position: 0% 0; } }

/* copied toast (respond) — white pill like the app's status pill */
.toast { position: absolute; left: 50%; top: calc(100% + 12px); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
         padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 10px 32px rgba(0, 0, 0, .14); font-size: 12px; font-weight: 500;
         transform: translate(-50%, 6px); opacity: 0; transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast .kbd { font-weight: 600; }

/* keystroke HUD — shows what the user pressed */
.hud { position: absolute; left: 50%; bottom: 24px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 8px;
       border-radius: 14px; background: rgba(29, 29, 33, .88); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); color: #D6D6DE;
       font-size: 13px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translate(-50%, 8px);
       transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.2); }
.hud.on { opacity: 1; transform: translate(-50%, 0); }
.hud .kc { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; background: #3A3A43;
           box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); color: #fff; font-size: 16px; font-weight: 500;
           transition: transform .08s ease, background-color .08s ease, box-shadow .08s ease; }
.hud .kc.down { transform: translateY(2px); background: var(--accent); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 0 14px rgba(110, 91, 255, .7); }
.hud .lbl { margin-left: 4px; }