:root{
    --coral:#EB4F31; --coral-deep:#B8331E; --coral-soft:#FFE9E2;
    --ink:#1B1B1F; --muted:#8A8A93; --paper:#F7F7F9; --card:#FFFFFF;
    --line:rgba(20,20,30,.12);
    --mono:'SF Mono',ui-monospace,Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:#E9E9EE;color:var(--ink);font:13px/1.5 -apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;
    min-height:100vh;padding:48px 40px 40px}
  ::selection{background:var(--coral);color:#fff}
  a{color:var(--ink)}

  /* receipt fixed to the left of the screen */
  .layout{display:flex;gap:64px;align-items:flex-start;max-width:1100px;margin:0 auto}   /* the whole block centered */
  @media (max-width:900px){ body{padding:32px 20px} .layout{flex-direction:column;align-items:center;gap:36px} }

  /* ---- left: the app panel as a receipt ---- */
  .panel{width:340px;flex:none;position:sticky;top:48px;background:var(--paper);   /* pinned left on screen */border:1px solid var(--line);border-bottom:none;padding:16px 16px 26px;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),96.4% 100%,92.8% calc(100% - 10px),89.2% 100%,85.7% calc(100% - 10px),82.1% 100%,78.5% calc(100% - 10px),75% 100%,71.4% calc(100% - 10px),67.8% 100%,64.2% calc(100% - 10px),60.7% 100%,57.1% calc(100% - 10px),53.5% 100%,50% calc(100% - 10px),46.4% 100%,42.8% calc(100% - 10px),39.2% 100%,35.7% calc(100% - 10px),32.1% 100%,28.5% calc(100% - 10px),25% 100%,21.4% calc(100% - 10px),17.8% 100%,14.2% calc(100% - 10px),10.7% 100%,7.1% calc(100% - 10px),3.5% 100%,0 calc(100% - 10px));
    box-shadow:0 24px 60px rgba(20,20,30,.18)}
  .hdr{display:flex;align-items:center;gap:7px;margin-bottom:10px}
  .hdr img{width:20px;height:20px;border-radius:5px}
  .hdr b{font-family:var(--mono);font-size:12.5px;letter-spacing:.18em}
  .hdr span{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
  .dash{border:none;border-top:1.5px dashed #C9C9D2;margin:0 -16px}
  .hero{padding:12px 2px 10px}
  .hero h1{font-size:15px;font-weight:700;letter-spacing:-.01em}
  .hero p{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
  .ghostbtn{display:block;width:100%;text-align:center;margin:4px 0 10px;padding:9px;border:1px solid var(--line);border-radius:3px;background:#fff;
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted);cursor:pointer;transition:color .12s,border-color .12s}
  .ghostbtn:hover{color:var(--coral);border-color:var(--coral)}
  .li{display:flex;align-items:flex-end;font-family:var(--mono);font-size:11.5px;margin:6px 0}
  .li i{flex:1;border-bottom:1.5px dotted #C9C9D2;margin:0 5px 3px}
  .li b{font-weight:700}
  .li b.hot{color:var(--coral)}
  .cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--coral);color:#fff;text-decoration:none;
    font-weight:700;font-size:13px;padding:12px;border-radius:3px;margin-top:10px;transition:background .12s ease}
  .cta:hover{background:var(--coral-deep)}
  .cta:active{transform:scale(.98)}
  .sha{font-family:var(--mono);font-size:8.5px;color:var(--muted);text-align:center;margin-top:7px;word-break:break-all}
  .warn{background:var(--coral-soft);border:1px dashed var(--coral);border-radius:6px;padding:8px 10px;font-size:10px;color:var(--ink);margin-top:10px;line-height:1.5}
  .warn b{color:var(--coral-deep)}
  .warn code{font-family:var(--mono);font-size:9px;background:#fff;padding:0 4px;border-radius:3px;border:1px solid var(--line)}
  .perf{position:relative;margin-top:14px}
  .perf::after{content:'✂';position:absolute;right:6px;top:-8px;font-size:10px;color:var(--muted);background:var(--paper);padding:0 4px}
  .thanks{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--muted);text-align:center;margin-top:8px;text-transform:uppercase}

  /* ---- right: the words + the big gif ---- */
  .right{max-width:520px;padding-top:4px}
  .right h1{font-size:34px;line-height:1.12;letter-spacing:-.025em;font-weight:700}
  .right .sub{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.6}
  .meta{margin-top:16px;font-size:12px;color:var(--muted)}
  .meta code{font-family:var(--mono);font-size:11px}
  .demo{margin-top:20px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 14px 36px rgba(20,20,30,.1)}
  .demo img{display:block;width:100%}
  .demo figcaption{font-family:var(--mono);font-size:9.5px;color:var(--muted);padding:7px 11px;border-top:1px solid var(--line)}
  .right h2{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin:30px 0 10px;font-weight:700}
  .right ul{list-style:none}
  .right li{display:flex;gap:10px;padding:5px 0;font-size:14px}
  .right li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--coral);margin-top:7px;flex:none}
  .right li b{font-weight:600}
  .right li span{color:var(--muted)}
  .note{margin-top:26px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:13px 15px;font-size:12.5px;color:var(--muted)}
  .note b{color:var(--ink)}
  .foot{margin-top:26px;font-size:12px;color:var(--muted)}
  .foot a{color:var(--muted)}
  .foot a:hover{color:var(--ink)}
  .foot .sep{margin:0 8px;color:#C9C9D2}

  .lb{position:fixed;inset:0;background:rgba(20,20,26,.55);display:none;align-items:center;justify-content:center;z-index:50;cursor:zoom-out;padding:24px}
  .lb.open{display:flex}
  .lb img{max-width:min(92vw,420px);max-height:86vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}