/* zippr.to's homepage: its screens, each the words beside one picture or film, and the pictures drawn around real
   screenshots of the zippr app. Uses the homepage's own tokens (home.css). No inline styles. */
.story-fields{gap:.5rem;margin-bottom:10px;color:inherit;}
.story-label{font-size:var(--step--1);font-weight:700;color:inherit;}
.story-label span{font-weight:400;opacity:.8;}
.story-job{min-height:52px;padding:0 1rem;border:0;border-radius:12px;background:var(--field-bg);color:var(--field-ink);box-shadow:inset 0 0 0 1px var(--line-strong);font:inherit;font-size:var(--step-0);}
.story-job::placeholder{color:var(--placeholder);}
.story-job:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent);}
.story-team{display:flex;align-items:center;gap:.6rem;min-height:44px;font-size:var(--step-0);font-weight:600;color:inherit;cursor:pointer;}
.story-team input{flex:none;width:20px;height:20px;accent-color:var(--accent);}
.is-done .story-fields{opacity:.75;}
@media (prefers-reduced-motion:reduce){.sp-clip{box-shadow:0 0 0 1px rgba(var(--ink-rgb),.08);}}
.pp-scr{position:relative;padding-block:clamp(2.75rem,8vh,5.5rem);}
.pp-in{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;width:100%;max-width:90rem;margin-inline:auto;padding-inline:var(--hx,var(--gutter));}
.pp-words{min-width:0;}
.pp-title{font-size:clamp(2.6rem,calc(1.2rem + 3.6vw),4.5rem);letter-spacing:-.035em;line-height:1.02;max-width:13ch;}
.pp-title span{margin-top:.08em;color:var(--two-tone);}
.pp-say{margin-top:clamp(1rem,2.4vh,1.4rem);max-width:31ch;font-size:var(--step-1);line-height:1.55;color:var(--ink);text-wrap:pretty;}
.pp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;margin-top:clamp(1.3rem,3vh,1.9rem);}
.pp-pic{position:relative;min-width:0;}
.pp-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 clamp(.75rem,2vw,24px);padding-block:0;border-radius:36px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);}
.pp-hero .pp-in{padding:clamp(1.5rem,4vh,3rem) clamp(1.5rem,3vw,3rem) clamp(1.8rem,4.5vh,2.8rem) clamp(1.5rem,5vw,4.45rem);}
.pp-word{position:absolute;z-index:-1;left:clamp(1.5rem,5vw,4.45rem);top:clamp(.25rem,1.5vh,1rem);pointer-events:none;font:700 clamp(7rem,min(17vw,28vh),18rem)/.9 var(--display);letter-spacing:-.07em;color:var(--word);white-space:nowrap;user-select:none;}
.pp-hero .kicker{margin:0 0 clamp(1.1rem,2.6vh,1.6rem);padding:.5rem .9rem;border-radius:30px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;letter-spacing:.02em;font-weight:600;color:var(--ink);}
.pp-hero .pp-title{font-size:clamp(2.6rem,calc(.9rem + 3.1vw),4rem);max-width:17ch;}
.pp-hero .pp-say{max-width:30ch;}
.pp-wide .pp-in{display:block;}
.pp-wide .pp-title{max-width:none;}
@media (min-width:861px){.pp-in{grid-template-columns:minmax(0,44fr) minmax(0,56fr);}.pp-hero .pp-in{grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:end;
    min-height:calc(100svh - var(--top-h,82px) - 24px);}}
.pc{position:relative;padding:clamp(1.1rem,2.4vw,2rem);border-radius:32px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line),0 30px 60px -44px rgba(var(--shadow-rgb),.45);}
.pc-blue{background:var(--tile-1);}
.pc-win{position:relative;overflow:hidden;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px rgba(var(--ink-rgb),.1),0 24px 48px -28px rgba(var(--shadow-rgb),.55);}
.pc-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F3F5F9;box-shadow:inset 0 -1px 0 rgba(var(--ink-rgb),.08);font:600 12.5px/1 var(--body);color:var(--muted-own);}
.pc-bar i{width:11px;height:11px;border-radius:50%;background:#D5DAE3;}
.pc-bar b{margin-left:auto;margin-right:auto;padding-right:51px;font-weight:600;}
.pc-shot{display:block;width:100%;height:auto;}
.pc-you{max-width:26rem;padding:.75rem 1rem;border-radius:18px 18px 6px 18px;background:var(--ink-surface);color:var(--on-ink);font:600 clamp(15px,1.25vw,18px)/1.35 var(--display);letter-spacing:-.01em;}
.pc-zip{max-width:26rem;padding:.75rem 1rem;border-radius:18px 18px 18px 6px;background:var(--sheet);color:var(--ink);box-shadow:0 0 0 1px var(--line);font:600 clamp(15px,1.25vw,18px)/1.35 var(--display);letter-spacing:-.01em;}
.pc-who{display:block;margin-bottom:.2rem;font:700 13px/1.2 var(--body);letter-spacing:.02em;color:var(--ai-ink-own);}
.pc-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;background:var(--sheet);box-shadow:0 0 0 1px var(--line),0 10px 24px -14px rgba(var(--shadow-rgb),.45);font:700 15px/1.2 var(--body);color:var(--ink);white-space:nowrap;}
.pc-chip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.pc-chip.is-ai::before{background:var(--ai-ink-own);}
.pc-way{display:inline-block;padding:.14rem .6rem;border-radius:999px;font:700 13px/1.4 var(--body);white-space:nowrap;}
.pc-way-code{background:var(--code);color:var(--on-code);}
.pc-way-ai{background:var(--ai-bg);color:var(--ai-ink-own);box-shadow:inset 0 0 0 1px var(--ai-line);}
.pc-dot{position:absolute;z-index:3;width:clamp(76px,8vw,118px);height:auto;pointer-events:none;filter:drop-shadow(0 14px 18px rgba(var(--shadow-rgb),.22));}
@media (prefers-reduced-motion:reduce){.pc,.pc-win{box-shadow:inset 0 0 0 1px var(--card-line);}}
.pc1{position:relative;max-width:min(100%,33rem);margin-left:auto;padding:3.1rem 0 2.4rem clamp(.5rem,2vw,1.5rem);}
.pc1-you{position:absolute;z-index:2;top:0;right:clamp(.5rem,4%,2rem);max-width:none;white-space:nowrap;}
.pc1-win{position:relative;z-index:1;}
.pc1-chip{position:absolute;z-index:2;left:0;bottom:.6rem;padding:.75rem 1.15rem;font-size:17px;}
.pc1-dot{right:-.6rem;bottom:-.2rem;width:clamp(90px,9vw,132px);}
.pc2{overflow:hidden;padding:clamp(4.4rem,8vw,5.6rem) clamp(1.4rem,4vw,3.4rem);}
.pc2-cloud{position:absolute;inset:0;}
.pc2-cloud li{position:absolute;padding:.42rem .85rem;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px var(--line);font:700 14px/1.2 var(--body);color:var(--muted-own);white-space:nowrap;}
.pc2-cloud li:nth-child(1){left:5%;top:5.5%;rotate:-6deg;}
.pc2-cloud li:nth-child(2){left:23%;top:2.5%;rotate:3deg;}
.pc2-cloud li:nth-child(3){left:43%;top:5%;rotate:-3deg;}
.pc2-cloud li:nth-child(4){right:20%;top:2%;rotate:5deg;}
.pc2-cloud li:nth-child(5){right:4%;top:6.5%;rotate:-4deg;}
.pc2-cloud li:nth-child(6){left:4%;bottom:5%;rotate:5deg;}
.pc2-cloud li:nth-child(7){left:27%;bottom:2.5%;rotate:-4deg;}
.pc2-cloud li:nth-child(8){left:44%;bottom:6%;rotate:3deg;}
.pc2-cloud li:nth-child(9){right:19%;bottom:2.5%;rotate:-6deg;}
.pc2-cloud li:nth-child(10){right:4%;bottom:6%;rotate:4deg;}
.pc2-win{position:relative;z-index:1;max-width:29rem;margin-inline:auto;}
.pc2-chat{display:flex;flex-direction:column;gap:.55rem;padding:1rem;}
.pc2-chat .pc-you,.pc2-chat .pc-zip{font-size:15px;max-width:85%;}
.pc2-r{align-self:flex-end;}
.pc2-chat .pc-zip{align-self:flex-start;background:#F1F3F7;box-shadow:none;}
.pc2-later{align-self:center;margin:.2rem 0;font:600 14px/1.3 var(--body);color:var(--muted-own);}
.pc2-box{display:flex;align-items:center;justify-content:space-between;margin-top:.3rem;padding:.6rem .6rem .6rem 1rem;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);font-size:15px;color:var(--placeholder);}
.pc2-box i{width:28px;height:28px;border-radius:50%;background:var(--ink-surface);}
.pc2-dot{left:-.6rem;top:40%;}
.pc3{display:grid;gap:clamp(.8rem,1.6vw,1.1rem);}
.pc3-lane{padding:clamp(1rem,2vw,1.35rem) clamp(1rem,2vw,1.4rem);border-radius:22px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);}
.pc3-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.8rem;}
.pc3-head b{font:700 var(--step-2)/1.1 var(--display);letter-spacing:-.025em;}
.pc3-head span{font-size:15px;font-weight:600;color:var(--muted-own);text-align:right;}
.pc3-asks{display:flex;flex-wrap:wrap;gap:6px;}
.pc3-asks span{padding:.3rem .65rem;border-radius:12px 12px 4px 12px;background:var(--ink-surface);color:var(--on-ink);font:600 13.5px/1.25 var(--display);letter-spacing:-.005em;white-space:nowrap;}
.pc3-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.45rem;}
.pc3-what{font:600 17px/1.3 var(--display);letter-spacing:-.01em;}
.pc3-win{margin-top:.7rem;border-radius:10px;}
.pc3-meter{position:relative;height:10px;margin-top:1rem;overflow:hidden;border-radius:999px;background:#E6EAF1;}
.pc3-fill{position:absolute;top:0;bottom:0;left:0;border-radius:inherit;background:var(--ai-ink-own);}
.pc3-fill-full{width:94%;}
.pc3-fill-low{width:12%;}
.pc3-note{margin-top:.45rem;font-size:14px;font-weight:700;color:var(--muted-own);}
.pc4{padding:clamp(1.2rem,2.6vw,2rem) clamp(1.2rem,2.6vw,2rem) clamp(1.2rem,2.6vw,2rem) clamp(5rem,9vw,7.5rem);}
.pc4-win{position:relative;z-index:1;}
.pc4-steps{position:absolute;z-index:2;left:-1.4rem;top:50%;translate:0 -42%;display:grid;gap:6px;padding:.8rem;border-radius:20px;background:var(--sheet);box-shadow:0 0 0 1px var(--line),0 24px 44px -24px rgba(var(--shadow-rgb),.5);}
.pc4-steps li{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:.35rem .5rem;font:600 16px/1.2 var(--display);letter-spacing:-.01em;}
.pc4-dot{right:-.8rem;top:-1.8rem;}
.pc5{display:grid;gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(1.6rem,4vh,2.6rem);}
.pc5-card{padding:clamp(1rem,2vw,1.6rem);border-radius:32px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);}
.pc5-words{padding:clamp(1rem,2vw,1.4rem) .3rem .2rem;}
.pc5-name{font-size:var(--step-3);letter-spacing:-.03em;}
.pc5-say{margin-top:.5rem;max-width:40ch;font-size:var(--step-0);line-height:1.5;color:var(--muted-own);}
.pc5-price{display:inline-block;margin-top:1rem;padding:.4rem .85rem;border-radius:999px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:700;}
.pc5-free{background:var(--code);color:var(--on-code);box-shadow:none;}
@media (min-width:861px){.pc5{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pc6{display:grid;grid-template-columns:minmax(0,64fr) minmax(0,36fr);gap:clamp(.7rem,1.4vw,1rem);align-items:start;overflow:hidden;padding:clamp(1.2rem,2.6vw,2rem);}
.pc6-win{position:relative;z-index:1;}
.pc6-more{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 98%);mask-image:linear-gradient(to bottom,#000 30%,transparent 98%);}
.pc6-more i{aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line);}
.pc6-more i:nth-child(4n+3){opacity:.8;}
.pc6-more i:nth-child(4n){opacity:.6;}
.pc6-more .pc6-yours{display:grid;place-items:center;grid-column:1 / -1;aspect-ratio:auto;min-height:3.4rem;opacity:1;border-radius:14px;background:var(--sheet);box-shadow:inset 0 0 0 2px var(--accent);font:700 15px/1.2 var(--body);font-style:normal;color:var(--accent-own);}
.pc6-ask{position:absolute;z-index:2;right:clamp(1rem,3vw,2.4rem);top:clamp(5.6rem,9vw,7rem);font-size:15px;}
.pc6-dot{left:-.6rem;bottom:-.6rem;width:clamp(70px,7vw,100px);}
.p-ask-acts{margin-top:clamp(1.2rem,3vh,1.8rem);}
.pc5 .pc-shot{aspect-ratio:16/10;object-fit:cover;object-position:top left;}
.pp-wide .pp-title{font-size:clamp(2.4rem,calc(1rem + 3vw),3.9rem);}
.pv{padding-bottom:clamp(2rem,6vh,4rem);}
.pv-scr + .pv-scr{border-top:0;}
.pv-film{display:grid;place-items:center;padding:clamp(1rem,2.4vw,1.8rem);}
.pv-video{display:block;width:auto;height:auto;max-width:100%;max-height:min(72vh,46rem);border-radius:18px;background:var(--screen);object-fit:contain;box-shadow:0 0 0 1px var(--tile-line),0 30px 60px -36px rgba(var(--shadow-rgb),.6);}
.pv-frame .pc-win{height:min(70vh,40rem);}
.pv-iframe{display:block;width:100%;height:calc(100% - 30px);border:0;background:var(--sheet);}
.pv-crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.4rem,1.4vw,1rem);align-items:end;padding:clamp(2rem,5vw,3.4rem) clamp(1rem,3vw,2.4rem);}
.pv-mate{position:relative;display:block;}
.pv-mate img{width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(var(--shadow-rgb),.22));}
.pv-mate i{position:absolute;right:8%;bottom:8%;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:700 15px/1 var(--body);font-style:normal;box-shadow:0 0 0 2px var(--ground);}
.pv-mate:nth-child(2){translate:0 -10%;}
.pv-mate:nth-child(4){translate:0 -6%;}
.pv-tiles{padding:clamp(1.2rem,2.6vw,2rem);}
.pv-tiles-job{display:inline-block;margin-bottom:1rem;}
.pv-tiles-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.pv-tiles-list li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);font:600 16px/1.2 var(--display);letter-spacing:-.01em;}
.pv-tiles-dot{right:-.6rem;bottom:-1rem;}
.pv-items{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(1.6rem,4vh,2.6rem);}
@media (min-width:861px){.pv-items{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pv-item{display:flex;flex-direction:column;padding:clamp(1.1rem,2.2vw,1.6rem);border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);}
.pv-item-t{font-size:var(--step-2);letter-spacing:-.03em;line-height:1.15;}
.pv-k{margin-top:1rem;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-own);}
.pv-prompt-box{margin-top:.35rem;padding:.8rem 1rem;border-radius:14px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);}
.pv-prompt{font-size:15px;line-height:1.5;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden;}
.pv-tools{display:grid;gap:4px;margin-top:.35rem;}
.pv-tools li{font-size:15px;line-height:1.45;color:var(--muted-own);}
.pv-tools b{margin-right:.4rem;color:var(--ink);font-weight:700;}
.pv-steps{display:grid;gap:4px;margin-top:.35rem;counter-reset:pv;}
.pv-steps li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-size:15px;line-height:1.35;color:var(--ink);}
.pv-step::before{counter-increment:pv;content:counter(pv) ". ";color:var(--muted-own);}
.pv-way-you{background:var(--sheet);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);}
.pv-out{margin-top:.45rem;}
.pv-out-video{display:block;width:auto;height:auto;max-width:100%;max-height:30rem;margin-inline:auto;border-radius:14px;background:var(--screen);object-fit:contain;}
.pv-out-img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px var(--line);}
/* the work items' folds: a short preview, then home.css's small fold line opens the whole part, as the install page's
   "Check your download" does; opened, the preview gives way to it */
.pv-prompt.pv-lead{-webkit-line-clamp:3;}
.pv-fold summary{font-size:15px;color:var(--ink);}
.pv-prompt-box .pv-fold summary{min-height:40px;margin-top:.15rem;}
.pv-fold .pv-prompt{display:block;-webkit-line-clamp:unset;overflow:visible;}
.pv-prompt-box:has(> .pv-fold[open]) > .pv-lead,.pv-part:has(> .pv-fold[open]) > .pv-lead{display:none;}
.pv-fold[open] .pv-fold-shut,.pv-fold:not([open]) .pv-fold-open{display:none;}
.pv-why{margin-top:.9rem;font:600 var(--step-0)/1.4 var(--display);letter-spacing:-.01em;color:var(--ink);}
.pv-gets{display:grid;gap:clamp(.8rem,1.6vw,1.1rem);margin-top:clamp(1.4rem,3.4vh,2.2rem);}
@media (min-width:861px){.pv-gets{grid-template-columns:repeat(2,minmax(0,1fr));}}
.pv-get{padding:clamp(1rem,2vw,1.4rem);border-radius:22px;background:var(--sheet);box-shadow:0 0 0 1px var(--line);}
.pv-get-do{font:700 var(--step-1)/1.25 var(--display);letter-spacing:-.02em;}
.pv-get-get{margin-top:.3rem;font-size:var(--step-0);line-height:1.5;color:var(--muted-own);}
.pv-card-film video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--screen);}
.pv-fields{display:grid;}
.ask-panel > .pic.pv-ask-pic{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.4rem,2vw,1.2rem);height:auto;min-height:clamp(8.5rem,24vw,12rem);padding:1.2rem 1rem .8rem;}
.pv-ask-pic img{flex:none;width:clamp(58px,9vw,110px);height:auto;filter:drop-shadow(0 12px 16px rgba(var(--shadow-rgb),.2));}
@media (min-width:861px){.pv .pp-hero .pp-in{min-height:min(calc(100svh - var(--top-h,82px) - 24px),694px);}}
/* the foot on a phone: the making-of, prompt and check-up links show, as on a wide screen */
@media (max-width:768px){.foot-made,.foot-try{display:block;}}
/* one column (up to 860 px): the faint zippr sits above the pill and the heading, with room between, as the install page
   draws it on a phone */
@media (max-width:860px){.pp-hero .pp-in{padding-top:134px;}.pp-word{top:12px;left:0;right:0;text-align:center;font-size:109px;line-height:1;}}
/* two columns (861 px and wider): in a short window (a tablet held sideways, 1024 x 768) the words started under the faint
   zippr; their column now starts below it (the word's own top and size, the whole glyph), so a short window grows the
   first screen instead */
@media (min-width:861px){.pp-hero .pp-words{padding-top:max(0px,calc(clamp(.25rem,1.5vh,1rem) + clamp(7rem,min(17vw,28vh),18rem) - clamp(1.5rem,4vh,3rem)));}}
/* the community section on the narrowest phones (under 360 px): its button's long label wraps inside the page's gutter, with the
   values stage.css gives a long label in a tile, instead of running to the screen's edge */
@media (max-width:359px){#community .pp-acts .pill{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:.7rem;}}