/* Generated from the playbook by scripts/extract-social.mjs */
.art{  --p-milk:#F4F6F8; --p-ink:#1E2536; --p-accent:#C7B5F5; --p-line:#8A6FD6; --p-soft:#F0EAFE; --p-text:#4B3A8C; --p-leaf:#2F7A52; --p-leafsoft:#E3F2EA; --p-muted:#667085; --p-rule:#DFE3E9;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --text:"Figtree","Helvetica Neue",system-ui,sans-serif;
}
/* Artwork */
.art{container-type:inline-size;position:relative;overflow:hidden;font-family:var(--display);color:var(--p-ink);background:var(--p-milk)}
.r45{aspect-ratio:4/5}
.r916{aspect-ratio:9/16}
.art.slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory}
.art.slides>.frame{scroll-snap-align:start}
.frame{position:relative;container-type:inline-size;padding:8cqi;display:flex;flex-direction:column;justify-content:space-between;gap:4cqi;overflow:hidden;height:100%}
.r45 .frame,.r916 .frame{aspect-ratio:inherit}
.ink{background:var(--p-ink);color:#fff}
.purple{background:var(--p-accent);color:var(--p-ink)}
.soft{background:var(--p-soft)}
.milk{background:var(--p-milk)}
.bigtype{font-weight:800;font-size:calc(10cqi * var(--ts,1));line-height:.98;letter-spacing:-.03em;text-wrap:balance;position:relative;z-index:1}
.midtype{font-weight:700;font-size:calc(6.6cqi * var(--ts,1));line-height:1.08;letter-spacing:-.02em;text-wrap:balance;position:relative;z-index:1}
.body{text-wrap:balance;font:600 calc(4.2cqi * var(--ts,1))/1.35 var(--text);position:relative;z-index:1}
.foot{display:flex;align-items:baseline;justify-content:space-between;gap:2cqi;font:600 3.4cqi var(--text);position:relative;z-index:1}
/* on navy, the small copy is purple like the mark (Victoria, Post 4) */
.ink .body{color:var(--p-accent)}
/* a UI card on its own sits exactly between the headline and the footer */
.frame > .ui{margin:auto 0}
/* The Doddily wordmark, text only. Navy on the light backgrounds, lilac on navy. Its letters sit on the footer's baseline (the y hangs below). */
.brand{display:inline-flex;align-items:flex-end;line-height:0}
.brand .wm{display:block;height:6.8cqi;width:auto;fill:var(--p-ink)}
.foot .brand .wm{margin-bottom:-1.98cqi}
.ink .brand .wm{fill:var(--p-accent)}
.bloom{position:absolute;right:-11cqi;bottom:-11cqi;width:44cqi;height:44cqi;fill:var(--p-accent);opacity:.9;pointer-events:none}
.soft .bloom,.purple .bloom{fill:#fff;opacity:.55}
.dots{display:flex;gap:1.3cqi}
.dots i{width:1.7cqi;height:1.7cqi;border-radius:50%;background:currentColor;opacity:.3;display:block}
.dots i.on{opacity:1}
.swipe{font:600 3.2cqi var(--text);opacity:.65}
.step{font:800 20cqi/0.8 var(--display);color:var(--p-line);letter-spacing:-.04em}
.stat{display:grid;gap:.4cqi}
.stat b{font:800 12cqi/0.95 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{font:600 3.6cqi var(--text)}
.cropframe{justify-content:flex-start;gap:3cqi;padding-bottom:0}
.croptop{display:flex;align-items:center;justify-content:space-between;gap:2cqi;min-height:6.2cqi;font:600 3.4cqi var(--text);position:relative;z-index:2}
.phonecrop{position:relative;z-index:1;margin:1cqi auto -2cqi;width:74cqi;border-radius:11cqi 11cqi 0 0;padding:1cqi 1cqi 0;background:linear-gradient(145deg,#6b7385,#20252f 30%,#12161e 62%,#4a5162);box-shadow:inset 0 0 0 .2cqi rgba(255,255,255,.16),0 6cqi 16cqi rgba(30,37,54,.42);overflow:hidden}
.phonecrop img{display:block;width:100%;border-radius:9.8cqi 9.8cqi 0 0}
.phoneshot{position:relative;z-index:1;margin:0 auto;width:72cqi;border-radius:9.6cqi;padding:1cqi;background:linear-gradient(145deg,#6b7385,#20252f 30%,#12161e 62%,#4a5162);box-shadow:inset 0 0 0 .2cqi rgba(255,255,255,.16),0 5cqi 12cqi rgba(30,37,54,.35)}
.phoneshot img{display:block;width:100%;border-radius:8.8cqi}
/* Mini app UI */
.ui{background:#fff;border-radius:3.6cqi;padding:3.4cqi;display:grid;gap:2.2cqi;box-shadow:0 2cqi 6cqi rgba(30,37,54,.14);font-family:var(--text);color:var(--p-ink);position:relative;z-index:1}
.chips{display:flex;gap:1.5cqi;flex-wrap:wrap}
.chipx{font:600 3cqi var(--text);border:.3cqi solid var(--p-rule);border-radius:99px;padding:1.1cqi 2.4cqi;background:#fff}
.chipx.on{background:var(--p-ink);border-color:var(--p-ink);color:#fff}
.chipx.leaf{background:var(--p-leaf);border-color:var(--p-leaf);color:#fff}
.chipx.acc{background:var(--p-accent);border-color:var(--p-accent);color:var(--p-ink)}
.uirow{display:grid;grid-template-columns:auto 1fr auto;gap:2.2cqi;align-items:start;padding-top:2cqi;border-top:.3cqi solid var(--p-rule)}
.uirow:first-of-type{border-top:0;padding-top:0}
.uirow .e{font-size:4.6cqi;line-height:1}
.uirow .n{font:700 3.4cqi/1.2 var(--text)}
.uirow .v{font:400 2.8cqi/1.3 var(--text);color:var(--p-muted)}
.uirow .t{font:700 3.1cqi var(--text);font-variant-numeric:tabular-nums}
.minitag{display:inline-block;font:600 2.5cqi var(--text);border-radius:99px;padding:.5cqi 1.7cqi;margin-top:.9cqi;background:var(--p-leafsoft);color:var(--p-leaf)}
.search{display:flex;align-items:center;gap:2cqi;background:#fff;border-radius:99px;padding:2.6cqi 3.4cqi;font:400 3.4cqi var(--text);color:var(--p-muted);box-shadow:0 1.4cqi 4cqi rgba(30,37,54,.12)}
.search svg{width:3.6cqi;height:3.6cqi;fill:none;stroke:var(--p-muted);stroke-width:2.4}
/* Story safe area: Instagram covers roughly the top 250px and bottom 280px of 1080x1920 */
.r916 .frame{padding:19cqi 8cqi 25cqi;gap:0;justify-content:flex-start}
.r916 .frame > div:first-child{flex:none}
.r916 .phoneshot{width:58cqi;margin-top:4cqi}
.r916 .bigtype{font-size:8.4cqi}
.r916 .sticker{margin-top:auto;margin-bottom:auto}
.r916 .foot{margin-top:auto}
/* Story furniture */
.bars{display:flex;gap:1cqi}
.bars i{height:.9cqi;flex:1;border-radius:99px;background:currentColor;opacity:.3;display:block}
.bars i.on{opacity:.95}
.sticker{background:#fff;border-radius:4cqi;padding:3.4cqi;display:grid;gap:2.2cqi;box-shadow:0 2cqi 6cqi rgba(30,37,54,.18);font-family:var(--text);color:var(--p-ink);position:relative;z-index:1}
.sticker .q{font:700 4cqi/1.25 var(--text)}
.opts{display:grid;gap:1.6cqi}
.opt{border:.36cqi solid var(--p-rule);border-radius:99px;padding:2.2cqi 3cqi;font:600 3.4cqi var(--text);text-align:center}
.opt.pick{background:var(--p-accent);border-color:var(--p-accent)}
.slider{display:flex;align-items:center;gap:2cqi;font:600 3.4cqi var(--text)}
.slider .track{flex:1;height:1.6cqi;border-radius:99px;background:var(--p-rule);position:relative}
.slider .track::after{content:"";position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:99px;background:var(--p-accent)}
.linkchip{justify-self:center;background:#fff;color:var(--p-ink);border-radius:99px;padding:2.2cqi 4cqi;font:700 3.4cqi var(--text);box-shadow:0 1.6cqi 5cqi rgba(30,37,54,.2)}
/* Reels */
.reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:22px}
.reel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start}
.phone{aspect-ratio:9/16;border-radius:16px;background:var(--p-ink);color:#fff;container-type:inline-size;padding:9cqi 8cqi;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--display)}
.phone .hook{font:800 12cqi/1 var(--display);letter-spacing:-.02em;text-wrap:balance}
.phone .len{font:600 8.5cqi var(--text);color:var(--p-accent)}
.shots{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;line-height:1.45}
.shots li{display:grid;grid-template-columns:50px 1fr;gap:10px}
.shots time{font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
@media (max-width:430px){.reel{grid-template-columns:1fr}.phone{max-width:150px}}
/* Panels */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:14px;align-content:start}
.rules{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:15px;line-height:1.5}
.rules li{display:grid;grid-template-columns:20px 1fr;gap:8px}
.rules li::before{content:"";width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--accent-line)}
.check{display:grid;gap:10px}
.check label{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.45;cursor:pointer}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent-line)}
.check input:checked+span{color:var(--muted);text-decoration:line-through}
.measure{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.metric{border-top:2px solid var(--line);padding-top:12px;display:grid;gap:4px}
.metric b{font:700 17px var(--display)}
footer{padding-block:64px 0;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}}
.uishot{border-radius:3.6cqi;overflow:hidden;box-shadow:0 2cqi 6cqi rgba(30,37,54,.14);background:#fff;position:relative;z-index:1}
.uishot img{width:100%;display:block}
.r916 .uishot{margin-top:auto;margin-bottom:auto}
.uipanel{background:var(--p-milk);border-radius:3.6cqi;padding:3.4cqi;display:grid;gap:2.6cqi;box-shadow:0 2cqi 6cqi rgba(30,37,54,.14);font-family:var(--text);color:var(--p-ink);position:relative;z-index:1}
.uiptitle{font:700 4.8cqi var(--display)}
.uipcard{background:#fff;border-radius:3cqi;padding:3cqi;display:grid;gap:2.2cqi;border:.26cqi solid var(--p-rule)}
.uipfield{display:flex;align-items:center;justify-content:space-between;gap:2.4cqi}
.uipfield span{flex:1;background:var(--p-milk);border:.26cqi solid var(--p-rule);border-radius:2.4cqi;padding:2.2cqi 2.6cqi;font:400 3.6cqi var(--text)}
.uipfield b{font:600 3.6cqi var(--text);color:#A5452B}
.uipask{font:400 3.2cqi var(--text);color:var(--p-muted)}
.uipopts{display:flex;flex-wrap:wrap;gap:1.8cqi}
.uipopt{background:var(--p-milk);border-radius:2.4cqi;padding:1.8cqi 2.4cqi;display:grid;gap:.3cqi;font:700 3.2cqi var(--text)}
.uipopt i{font:400 2.7cqi var(--text);color:var(--p-muted);font-style:normal}
.uipopt.on{background:var(--p-ink);color:#fff}
.uipopt.on i{color:rgba(255,255,255,.72)}
.uipadd{border:.3cqi dashed var(--p-rule);border-radius:2.6cqi;padding:2.6cqi;text-align:center;font:700 3.4cqi var(--text)}
.asbadge{position:absolute;left:8cqi;bottom:21.5cqi;height:10.5cqi;width:auto;display:block;z-index:3}
.r916 .asbadge{bottom:39.5cqi}
/* phone frames: the phone owns the bottom, so the badge sits centred between the copy and the phone */
.cropframe .asbadge{position:static;order:2;margin:0 auto}
.cropframe .phonecrop{order:3}
.cropframe .bigtype,.cropframe .body{text-align:center}
.cropframe .body{margin-inline:auto}

/* no indicator dots on the artwork (Marcos, 4 Oct): Instagram draws its own */
.frame .dots{display:none}
/* the playbook's global reset, so the artwork has no browser paragraph margins wherever it is rendered */
.art p,.art h1,.art h2,.art h3{margin:0}