:root{
  --bg:#ece5d8; --surface:#f7f2e8; --card:#fffdf7; --border:#1f1c16;
  --soft:#e4dccb; --ink:#1f1c16; --muted:#8a8270; --accent:#1f7a4d; --green:#25d366;
  --display:"Space Grotesk",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  /* WhatsApp tokens */
  --wa-android-head:#008069; --wa-ios-head:#f5f2eb;
  --wa-chat:#efe7dd; --wa-them:#ffffff; --wa-me:#d9fdd3;
  --wa-meta:#667781; --wa-tick:#53bdeb; --wa-link:#027eb5;
  /* frosted-glass bars (iOS) */
  --glass-ios:rgba(246,243,236,.62); --glass-blur:blur(22px) saturate(180%);
  /* Deliberately NOT an OS-system-font stack (used to be -apple-system,
     BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif): that looks
     like a real phone on whatever OS is previewing it, but means the
     LIVE PREVIEW and the RENDERED VIDEO can never match each other —
     each machine substitutes whatever it locally has (real Segoe UI on
     Windows, San Francisco on macOS, Liberation-then-tofu-boxes on the
     Linux render container, which has none of those). An explicit web
     font loaded the same way everywhere (index.html's Google Fonts
     <link>, same mechanism already used for Inter/Space Grotesk) is
     guaranteed identical in the editor and in the final video,
     regardless of which OS either one runs on — WYSIWYG over
     platform-authenticity. */
  --sysfont:"Noto Sans Hebrew","Noto Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  height:100dvh;display:flex;flex-direction:column;overflow:hidden}
button{font-family:inherit;cursor:pointer}
img.emoji{height:1.18em;width:1.18em;vertical-align:-0.2em;margin:0 .5px;object-fit:contain;display:inline-block}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cdc4b1;border-radius:9px;border:2px solid var(--bg)}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--t-line,var(--border));
  background:var(--t-card,var(--card));color:var(--t-ink,var(--ink));padding:8px 13px;
  border-radius:var(--t-radius-md,11px);font-size:13px;font-weight:600;
  box-shadow:var(--t-shadow-sm,none);transition:transform .1s,box-shadow .1s}
.btn:hover{box-shadow:var(--t-shadow-md,none)}
.btn:active{transform:scale(.97)}
.btn.accent{background:var(--t-gradient,var(--accent));color:#fff;border-color:transparent}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn svg{width:16px;height:16px}

.disclaimer{font-size:10px;color:var(--muted);text-align:center;letter-spacing:.04em;padding:6px}