/* The shared demo player — the look every how-to demo uses (CLAUDE.md "HOW-TO DEMO VIDEOS").
   The app fills the frame (540×1097 CSS px = a 720×1426 phone screenshot at .75 + a 27px status bar);
   no captions over the app — a gold ring marks each tap and a logo watermark sits in the status bar.
   A demo page links this file, loads player.js, and describes itself in window.DEMO. */
@font-face{font-family:Montserrat;font-weight:400;src:url(fonts/Montserrat-Regular.ttf)}
@font-face{font-family:Montserrat;font-weight:500;src:url(fonts/Montserrat-Medium.ttf)}
@font-face{font-family:Montserrat;font-weight:600;src:url(fonts/Montserrat-SemiBold.ttf)}
@font-face{font-family:Montserrat;font-weight:700;src:url(fonts/Montserrat-Bold.ttf)}
@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;src:url(fonts/Fraunces.woff2) format('woff2')}
@font-face{font-family:Fraunces;font-style:italic;font-weight:100 900;src:url(fonts/Fraunces-Italic.woff2) format('woff2')}

:root{
  --paper:#FBF7EF;--ink:#1C1B19;--ink2:#46423B;--line:#E7DDCB;--skyInk:#176E92;--clay:#B4471F;
  --brand100:#DBE2F3;--brand700:#1040AD;--brand900:#08255F;--appText:#1F2937;--appText2:#4B5563;--appMuted:#64748B;
  --appBg:#F8FAFC;--appLine:#E2E8F0;--success:#16A34A;--successLight:#DCFCE7;--error:#E11D48;--errorLight:#FEE2E2;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#2a2925;overflow:hidden;font-family:Montserrat,Arial,sans-serif}
#fit{position:absolute;left:50%;top:0;transform-origin:top center}
#stage{position:relative;width:540px;height:1097px;overflow:hidden;background:linear-gradient(180deg,#FBF7EF,#F4ECDD)}
.layer{position:absolute;opacity:0;visibility:hidden}

/* the app */
#phone{position:absolute;left:0;top:0;width:540px;height:1097px;background:var(--appBg)}
.sbar{position:relative;height:27px;background:#fff;display:flex;align-items:flex-end;justify-content:space-between;padding:0 18px 4px;font:600 12px/1 Montserrat;color:var(--appText);z-index:2}
#mark{position:absolute;left:50%;top:3px;height:21px;transform:translateX(-50%);z-index:3}
#app{position:absolute;left:0;top:27px;width:720px;height:1426px;transform:scale(.75);transform-origin:0 0;overflow:hidden}
.scr{position:absolute;inset:0;opacity:0;visibility:hidden;background:var(--appBg)}
.scr > img{display:block;width:720px;height:1426px}
.ov{position:absolute}

/* drawn app parts (720px = 360dp, so the app's sizes ×2) */
.a-title{font:700 40px/1.2 Montserrat;color:var(--appText);text-align:center}
.a-sub{font:500 28px/1.45 Montserrat;color:var(--appMuted);text-align:center}
.a-label{font:600 28px/1 Montserrat;color:var(--appText)}
.a-field{height:84px;border:2px solid #CBD5E1;border-radius:16px;background:#fff;display:flex;align-items:center;padding:0 26px;font:500 29px/1 Montserrat;color:var(--appText)}
.a-field.focus{border-color:var(--brand700)}
.a-btn{height:84px;border-radius:16px;display:flex;align-items:center;justify-content:center;font:600 30px/1 Montserrat}
.a-btn.primary{background:var(--brand700);color:#fff}
.a-btn.outline{border:2px solid var(--brand700);color:var(--brand700);background:#fff}
.a-link{font:600 27px/1 Montserrat;color:var(--brand700);text-decoration:underline}
.a-pin{display:flex;gap:16px;justify-content:center}
.a-pin div{width:88px;height:104px;border:2px solid #CBD5E1;border-radius:16px;background:#fff;display:grid;place-items:center;font:700 44px/1 Montserrat;color:var(--appText)}
.a-card{background:#fff;border:2px solid var(--appLine);border-radius:24px;padding:36px}
.a-ok{width:150px;height:150px;border-radius:50%;background:var(--successLight);display:grid;place-items:center;margin:0 auto}

/* the highlighter + the finger */
#ring{position:absolute;z-index:54;border:3px solid #F2B233;border-radius:16px;box-shadow:0 0 0 6px rgba(242,178,51,.25);opacity:0;visibility:hidden}
#finger{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:rgba(255,255,255,.55);border:3px solid rgba(28,27,25,.8);box-shadow:0 6px 14px rgba(0,0,0,.25);opacity:0;z-index:60}
#ripple{position:absolute;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;border:3px solid var(--ink);opacity:0;z-index:59}

/* floating cards (an email, a note) — the website's .day-ui */
.ui{left:50%;width:470px;margin-left:-235px;background:#fff;border-radius:18px;padding:18px 20px;z-index:50;
    box-shadow:0 1px 1px rgba(28,27,25,.05),0 24px 44px -18px rgba(40,25,5,.42),0 0 0 1px rgba(28,27,25,.05)}
.ui .from{font:600 12px/1 Montserrat;color:var(--appMuted);text-transform:uppercase;letter-spacing:.06em}
.ui b{display:block;font:700 17px/1.3 Montserrat;color:var(--ink);margin-top:6px}
.ui p{font:500 14px/1.5 Montserrat;color:var(--ink2);margin-top:6px}
.ui .code{font:700 34px/1 Montserrat;letter-spacing:.2em;color:var(--brand700);margin-top:10px}

/* title, outro, problems — the website's "See it work" look, centred */
.full{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px;background:var(--paper)}
.full img{height:150px}
.full h1{font-family:Fraunces,Georgia,serif;font-weight:500;font-variation-settings:"SOFT" 50;letter-spacing:-.02em;font-size:46px;line-height:1.04;color:var(--ink);margin-top:34px}
.full h1 em{font-style:italic;color:var(--skyInk)}
.full p{font:500 16px/1.6 Montserrat;color:var(--ink2);margin-top:16px;max-width:24em}
#probHead{left:0;right:0;top:40px;text-align:center}
#probHead img{height:50px}
#probHead h2{font:500 28px/1.1 Fraunces,Georgia,serif;font-variation-settings:"SOFT" 50;color:var(--ink);margin-top:8px}
#probHead h2 em{color:#A8431F}
.prob{left:20px;right:20px;background:#fff;border-radius:16px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;
      box-shadow:0 1px 1px rgba(28,27,25,.05),0 18px 34px -20px rgba(40,25,5,.38),0 0 0 1px rgba(28,27,25,.05)}
.prob .pi{width:40px;height:40px;border-radius:50%;background:#FBE3DA;display:grid;place-items:center;flex-shrink:0;font:700 18px/1 Montserrat;color:var(--clay)}
.prob .said{font:700 14.5px/1.3 Montserrat;color:var(--clay)}
.prob .fix{font:500 13.5px/1.45 Montserrat;color:var(--ink);margin-top:3px}
#spine{position:absolute;left:0;top:0;z-index:40;height:4px;width:540px;transform-origin:left;
       background:linear-gradient(90deg,#45AED6 0%,#59C330 16%,#F2B233 30%,#EE8A2E 44%,#D9643A 56%,#6D5BA6 68%,#9FD3EA 80%,#F4E6B8 92%,#F9C04E 100%)}

#controls{position:fixed;left:0;right:0;bottom:0;height:44px;background:#111827;color:#e5e7eb;display:flex;gap:12px;align-items:center;padding:0 16px;font-size:13px}
#controls button{background:#1f2937;color:#fff;border:1px solid #374151;border-radius:6px;padding:5px 12px;font-weight:600;cursor:pointer}
#controls input{flex:1}
body.recording #controls, body.embed #controls{display:none}