/* A Mac screen drawn in HTML: menu bar, windows, Dock and the Pekivo panel. Scales with its width.
   Used by the home page, the blog and post demos. */
article .demo{margin:18px 0 34px}
.dm-mac{border-radius:14px;padding:8px;background:#0b0d14;box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.12)}
.dm-screen{isolation:isolate;text-align:left;position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;container-type:inline-size;user-select:none;color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  background:radial-gradient(120% 90% at 15% 0%,#6fa8ff 0%,transparent 55%),radial-gradient(90% 80% at 90% 100%,#5fd0c8 0%,transparent 60%),linear-gradient(160deg,#1f4fa8,#3a7fd0 55%,#1d4a7a)}
.dm-bar{position:absolute;inset:0 0 auto;z-index:8;height:3.6cqw;display:flex;align-items:center;gap:2.2cqw;padding:0 2cqw;font-size:1.6cqw;color:#fff;background:rgba(16,18,40,.32);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.dm-bar b{font-weight:700}.dm-bar .r{margin-left:auto;display:flex;align-items:center;gap:1.8cqw}.dm-bar img{width:2.2cqw;height:2.2cqw;border-radius:.5cqw;padding:.2cqw;transition:background .2s}
.dm-screen[data-step="2"] .dm-bar img{background:rgba(255,255,255,.35)}
.dm-win{position:absolute;z-index:2;border-radius:1.3cqw;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2.5cqw 6cqw rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.1)}
.dm-tb{flex:none;height:3.2cqw;display:flex;align-items:center;gap:.7cqw;padding:0 1.4cqw;background:#ececf0;border-bottom:1px solid rgba(0,0,0,.07);font-size:1.4cqw;font-weight:600;color:#666}
.dm-tb i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#ff5f57}.dm-tb i:nth-child(2){background:#febc2e}.dm-tb i:nth-child(3){background:#28c840}.dm-tb span{margin:0 auto;transform:translateX(-3cqw)}
.dm-wb{flex:1;display:flex;min-height:0;font-size:1.45cqw}
.dm-side{width:22%;padding:1.6cqw 1.3cqw;display:grid;gap:1cqw;align-content:start}.dm-side i{height:.9cqw;border-radius:.45cqw;background:rgba(255,255,255,.3)}
.dm-side.light{background:#f3f3f6}.dm-side.light i{background:rgba(0,0,0,.1)}
.dm-main{flex:1;min-width:0;padding:1.6cqw 1.8cqw}
.dm-msg{display:flex;gap:1.1cqw;margin-bottom:1.4cqw}.dm-msg>div{flex:1;min-width:0}
.dm-av{flex:none;width:3cqw;height:3cqw;border-radius:.8cqw}
.dm-who{font-weight:700;font-size:1.45cqw;color:#222;margin-bottom:.4cqw}.dm-who.big{font-size:1.9cqw}
.dm-txt{color:#444}.dm-from{font-size:1.3cqw;color:#888;margin-bottom:1.2cqw}
.dm-code{font:1.3cqw/1.6 ui-monospace,"SF Mono",Menlo,monospace;color:#333;background:#f6f6f8;border:1px solid #e3e3e8;border-radius:.7cqw;padding:.8cqw 1cqw;white-space:pre;overflow:hidden}
.dm-code .e{color:#d1242f}.dm-code .w{color:#b35900}
.dm-url{height:2.6cqw;border-radius:1.3cqw;background:#eef0f4;margin-bottom:1.2cqw;display:flex;align-items:center;padding:0 1.2cqw;font-size:1.3cqw;color:#666}
.dm-tabs{display:flex;gap:1.8cqw;padding:.8cqw 0;color:#888;border-bottom:1px solid #eee;font-size:1.3cqw}.dm-tabs b{color:#1a73e8;font-weight:600}
.dm-row{display:grid;grid-template-columns:1fr 6cqw 5cqw 6cqw;gap:.8cqw;padding:.75cqw .6cqw;border-bottom:1px solid #f0f0f3;color:#444;border-radius:.4cqw;font-size:1.3cqw}.dm-row.head{color:#999;font-weight:600}
.dm-img{display:block;width:80%;height:auto;border-radius:.6cqw;border:1px solid #e3e3e8}
.dm-src{transition:background .25s,box-shadow .25s}
.dm-screen:is([data-step="1"],[data-step="2"]) .dm-src{background:#cfe1ff;box-shadow:0 0 0 .22cqw #5b8cff}
.dm-ctx{position:absolute;z-index:9;width:21cqw;padding:.6cqw;border-radius:1cqw;background:rgba(246,246,248,.97);box-shadow:0 2cqw 5cqw rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.1);font-size:1.4cqw;opacity:0;transform:translateY(-.6cqw);transition:opacity .2s,transform .2s}
.dm-ctx div{padding:.5cqw 1cqw;border-radius:.5cqw}.dm-ctx div.hi{background:#2f7bf0;color:#fff}.dm-ctx hr{border:0;border-top:1px solid rgba(0,0,0,.1);margin:.4cqw 0}
.dm-screen[data-step="1"] .dm-ctx{opacity:1;transform:none}
.dm-dock{position:absolute;z-index:6;left:50%;bottom:1.4cqw;transform:translateX(-50%);display:flex;gap:1.1cqw;padding:1cqw 1.1cqw;border-radius:2.2cqw;background:rgba(255,255,255,.22);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3)}
.dm-dock img{width:5cqw;height:5cqw;display:block}
.dm-keys{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);display:flex;gap:1.1cqw;padding:1.4cqw 2cqw;border-radius:2.2cqw;background:rgba(20,22,32,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.dm-keys kbd{font:600 3.2cqw/1 -apple-system,sans-serif;padding:1cqw 1.7cqw;border-radius:1cqw;min-width:6cqw;text-align:center;background:linear-gradient(#fff,#e3e5ea);color:#1d2233;box-shadow:0 .5cqw 0 #8d96a6;border:0}
.dm-screen[data-step="2"] .dm-keys{opacity:1;transform:translate(-50%,-50%)}
.dm-panel{position:absolute;z-index:10;left:50%;top:6cqw;transform:translate(-50%,-1.5cqw) scale(.97);opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 2.5cqw 5cqw rgba(0,0,0,.45));pointer-events:none}
.dm-panel img{display:block;width:100%;height:auto;border-radius:1.2cqw}
.dm-screen[data-step="3"] .dm-panel{opacity:1;transform:translate(-50%,0)}
.dm-cap{display:flex;justify-content:center;align-items:center;gap:10px;min-height:28px;margin:14px 0 0;font-size:15px;color:var(--text);text-align:center}
.dm-cap b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand,#2563EB);color:#fff;font-size:12.5px}
.dm-steps{display:flex;justify-content:center;gap:6px;margin-top:10px}
.dm-steps button{position:relative;width:6px;height:6px;padding:0;border:0;border-radius:3px;background:var(--dot,rgba(15,23,42,.2));cursor:pointer;transition:width .25s,background .25s}
.dm-steps button::before{content:"";position:absolute;inset:-9px -4px}
.dm-steps button.on{width:18px;background:var(--text)}.dm-steps button:focus-visible{outline:2px solid var(--brand,#2563EB);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.dm-ctx,.dm-keys,.dm-panel,.dm-src{transition:none}}
/* MacBook frame for still previews: bezel, screen and base. */
.mt{position:relative;padding:0 4% 2.6%}
.mt-lid{position:relative;border-radius:18px 18px 10px 10px;padding:1.4% 1.4% 2.2%;background:linear-gradient(#202228,#0d0e12);box-shadow:0 0 0 1px rgba(15,23,42,.25),0 30px 60px -20px rgba(15,23,42,.35),0 18px 40px rgba(15,23,42,.12)}
.mt-lid::before{content:"";position:absolute;left:50%;top:.55%;width:.8%;aspect-ratio:1;border-radius:50%;background:#2b2e36;transform:translateX(-50%)}
.mt-lid .dm-screen{border-radius:6px}
.mt-base{position:absolute;left:0;right:0;bottom:0;height:2.6%;min-height:10px;border-radius:0 0 18px 18px/0 0 60% 60%;background:linear-gradient(#e9ebef,#c3c7cf 70%,#a9adb6);box-shadow:0 14px 26px -10px rgba(15,23,42,.35)}
.mt-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;border-radius:0 0 10px 10px;background:linear-gradient(#c9ccd3,#b4b8c0);transform:translateX(-50%)}
.mt .dm-bar img.on{background:rgba(255,255,255,.35)}
.mt .dm-panel{opacity:1;transform:translate(-50%,0)}