/* The cards — the Editor's six styles, the crates of looks, captions and
   transitions, and the stickers. The artwork is the apps' own picker art
   (Cuts 2.8, 26/09/2026), theme-invariant; anything written over it is
   white on a dark capsule, as the apps name a card. Everything moves with
   the scroll (cards.js); Reduce Motion lands every state in place. */

/* ---------------------------------------------------------------- shared */
.cd{position:relative;display:block;aspect-ratio:1672/941;border-radius:12px;overflow:hidden;background:var(--scene);
  box-shadow:0 14px 34px rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.06)}
.cd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;color:transparent;font-size:0}
.cd .nm{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font:600 12px/1 var(--sans);color:#fff;
  background:rgba(0,0,0,.78);padding:.46em .9em;border-radius:999px;white-space:nowrap}
.cd .pro{position:absolute;left:8px;top:8px}
.pro{display:inline-flex;align-items:center;font:500 9px/1 var(--mono);letter-spacing:.12em;padding:3px 6px 3px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 16%,transparent);color:var(--ink);vertical-align:1px}
.cd .pro{background:rgba(0,0,0,.6);color:#fff;z-index:1}

/* ---------------------------------------------------------------- the Editor */
.editor .ed-head{max-width:620px;margin-bottom:40px}
.ed-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media (min-width:960px){.ed-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:44px}}
.ed-fan{position:relative;perspective:1400px;perspective-origin:50% 30%}
.ed-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;transform-style:preserve-3d}
.ed-card{position:relative;padding:8px 8px 12px;border:0;border-radius:16px;background:transparent;cursor:pointer;text-align:left;transform-style:preserve-3d;will-change:transform;
  transition:opacity var(--tick) ease,filter var(--tick) ease,background var(--tick-fill) ease-out,box-shadow var(--tick) ease}
.ed-card.on{background:var(--surface);box-shadow:0 14px 34px rgba(0,0,0,.1)}
.ed-nm{display:block;margin:10px 2px 2px;font:600 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.ed-ds{display:block;margin:0 2px;font:400 12.5px/1.35 var(--sans);color:var(--ink-3)}
.ed-card .cd{container-type:inline-size}
/* the caption samples, in each style's burned-in look (CutsCore SubtitleBurnSpec, as the promo kit transcribes it) */
.ecap{position:absolute;left:4%;right:4%;bottom:7%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:7.4cqw;line-height:1.15}
.ecap.modern{font-family:var(--sans);font-weight:600;color:#fff;text-shadow:1px 1px 3px rgba(0,0,0,.9)}
.ecap.bold{font-family:var(--sans);font-weight:900;color:#fff;text-shadow:0 0 6px #000,0 0 2px #000}
.ecap.editorial{font-family:var(--serif);font-weight:400;color:#fff;font-size:8.2cqw;text-shadow:0 0 8px rgba(0,0,0,.55)}
.ecap.block{left:auto;right:auto;width:max-content;max-width:92%;margin:0 auto;inset-inline:0;font-family:var(--sans);font-weight:500;color:#fff;background:rgba(0,0,0,.88);padding:0 .2em;border-radius:3px}
.ecap.neon{font-family:var(--sans);font-weight:700;color:#33D9FF;letter-spacing:.02em;text-shadow:0 0 8px #33D9FF,0 0 3px #33D9FF}
.ecap.handwritten{font-family:'Snell Roundhand','Segoe Script',cursive;font-weight:400;color:#FA8CA6;font-size:8.6cqw;text-shadow:1px 1px 2px rgba(0,0,0,.55)}
.ed-card .cd{transition:box-shadow var(--tick) ease}
.ed-card.receded{opacity:.72;filter:saturate(.7)}
.ed-card.on .cd{box-shadow:0 26px 60px rgba(0,0,0,.26),0 0 0 1px rgba(0,0,0,.08)}
.ed-card .sug{position:absolute;right:16px;top:16px;font:500 8.5px/1 var(--mono);letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.66);
  padding:4px 6px;border-radius:999px;opacity:0;transform:translateY(-4px);transition:opacity var(--tick) ease,transform var(--tick) ease-out}
.ed-card.sugd .sug{opacity:1;transform:none}
.ed-card:focus-visible{outline:2px solid var(--azure);outline-offset:4px;border-radius:14px}

/* the recipe: what the picked style sets, as the app would print it */
.recipe{padding:22px 22px 18px}
.recipe .rh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.recipe .rn{font-family:var(--serif);font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.recipe .rw{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--ink-3);margin-bottom:16px;min-height:3em}
.rrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.rrow .k{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.rrow .v{font:500 11px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-align:right}
.lv{display:inline-flex;gap:1px;padding:2px;background:var(--surface2);border-radius:7px}
.lv i{font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.08em;padding:4px 6px;border-radius:5px;color:var(--ink-4);
  transition:background var(--tick-fill) ease-out,color var(--tick-settle) var(--settle)}
.lv i.on{background:var(--ink);color:var(--paper)}
.rrow .v .tint{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:0}
.recipe .undo{margin-top:14px}

/* where it goes: the destination row, and the style it suggests */
.dests{margin-top:34px}
.dests .lbl{display:block;margin-bottom:12px}
.dest-row{display:flex;flex-wrap:wrap;gap:6px}
.dest-row button{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:9px 11px;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ink-2);border:1px solid var(--line);
  transition:background var(--tick-fill) ease-out,color var(--tick-settle) var(--settle),border-color var(--tick) ease,transform var(--press) ease-out}
.dest-row button:hover{border-color:var(--ink-4)}
.dest-row button:active{transform:scale(.97)}
.dest-row button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dest-says{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:34px}
.dest-says .facts{font-family:var(--sans);font-size:14.5px;color:var(--ink-3)}
.dest-says .take{display:none}
.dest-says.has .take{display:inline-flex}
.ed-foot{margin-top:30px;max-width:60ch;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-3)}

/* ---------------------------------------------------------------- the crates */
.crates-row{display:grid;grid-template-columns:1fr;gap:56px;margin-top:10px}
@media (min-width:980px){.crates-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.crate-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.crate-head .count{color:var(--ink-3)}
.crate{position:relative;height:clamp(250px,26vw,300px);perspective:1100px;perspective-origin:50% -10%;cursor:pointer;touch-action:pan-y;
  -webkit-user-select:none;user-select:none}
.crate .box{position:absolute;left:4%;right:4%;bottom:0;height:44%;border-radius:10px;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--ink) 6%,var(--surface2)),var(--surface2));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent),0 18px 40px rgba(0,0,0,.08);z-index:0}
.crate .deck{position:absolute;inset:0;transform-style:preserve-3d}
.crate .cd{position:absolute;left:10%;width:80%;bottom:12%;transform-origin:50% 100%;will-change:transform}
.crate .cd .nm{font-size:11px}
.crate-now{margin-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-height:40px}
.crate-now .n{font-family:var(--serif);font-size:24px;line-height:1.1;color:var(--ink);letter-spacing:-.015em}
.crate-now .d{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);text-align:right;max-width:24ch}
.crate-now .i{font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- the stickers */
.stk-words{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 12px;align-items:center;justify-items:center;margin:14px 0 36px}
@media (min-width:760px){.stk-words{grid-template-columns:repeat(7,1fr)}}
.stk-words img{color:transparent;font-size:0;width:100%;max-width:150px;height:auto;transform-origin:50% 60%;will-change:transform}
.stk-all{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;align-items:center;justify-items:center}
@media (min-width:760px){.stk-all{grid-template-columns:repeat(12,1fr)}}
.stk-all img{color:transparent;font-size:0;width:100%;max-width:74px;height:auto;transition:transform .3s var(--settle)}
.stk-all img:hover{transform:scale(1.18) rotate(-6deg)}
.stk-words img:hover{animation:wob .5s ease-out}
@keyframes wob{25%{transform:rotate(-7deg) scale(1.06)}55%{transform:rotate(5deg) scale(1.04)}80%{transform:rotate(-2deg)}}

@media (prefers-reduced-motion:reduce){
  .ed-card,.crate .cd,.stk-words img{transition:none;animation:none}
}

/* ---------------------------------------------------------------- every day: the three edits, drawn in code */
.dw-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.dw-panel{margin:0}
.dw-box{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#F2E5D1;
  box-shadow:0 14px 34px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.05)}
.dw-panel figcaption{margin-top:12px}
.dw-panel figcaption b{color:var(--ink-3);font-weight:500}
@media (max-width:760px){
  .dw-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:8px -22px 0;padding:0 22px 6px;scrollbar-width:none}
  .dw-row::-webkit-scrollbar{display:none}
  .dw-panel{flex:0 0 76%;scroll-snap-align:center}
}
.dw-frame{position:absolute;left:0;top:0;width:1080px;height:1920px;transform-origin:0 0}
.dw-l{position:absolute;left:0;top:0;width:1080px;height:1920px}
.dw-grain{background:url('drawn/paper.jpg') 0 0/540px 540px;mix-blend-mode:overlay;opacity:.55}
.dw-frame .state{position:absolute;left:0;top:0;white-space:pre;opacity:0}
.dw-frame .caret{display:inline-block;width:.075em;height:1.02em;margin:0 -.037em;vertical-align:-.18em;background:#0D8FF0;border-radius:0;animation:none}
.dw-frame .sel{background:rgba(13,143,240,.26);border-radius:.06em;position:relative}
.dw-frame .st{color:#BE4F2F;text-decoration:line-through;text-decoration-thickness:.075em}
.dw-frame .sq{background:radial-gradient(circle at .09em .09em,#BE4F2F .055em,transparent .07em) 0 100%/.19em .18em repeat-x;padding-bottom:.12em}
.dw-mail{position:absolute;left:104px;top:454px;width:872px;height:536px;overflow:hidden;color:#2D2D2F;font-family:'Inter',sans-serif}
.dw-mail .bar{position:absolute;left:0;top:0;width:872px;height:58px;background:#EADFCB}
.dw-mail .bar i{position:absolute;top:21px;width:16px;height:16px;border-radius:50%}
.dw-mail .row{position:absolute;left:44px;font:500 30px/40px 'Inter',sans-serif;white-space:pre}
.dw-mail .row b{font-weight:500;color:rgba(45,45,47,.45)}
.dw-mail .rule{position:absolute;left:0;width:872px;height:2px;background:rgba(45,45,47,.12)}
.dw-mail .body{position:absolute;left:44px;top:262px;width:800px;font:400 40px/56px 'Inter',sans-serif}
.dw-chat{position:absolute;left:230px;top:320px;width:620px;height:1360px;overflow:hidden;color:#2D2D2F;font-family:'Inter',sans-serif}
.dw-chat .stamp{position:absolute;left:0;top:232px;width:620px;text-align:center;font:500 24px/30px 'Inter',sans-serif;color:rgba(45,45,47,.45)}
.dw-chat .them{position:absolute;left:30px;top:276px;padding:16px 26px;border-radius:32px 32px 32px 10px;background:#345384;color:#F2E5D1;font:400 34px/42px 'Inter',sans-serif;white-space:pre}
.dw-chat .field{position:absolute;left:22px;top:732px;width:516px;height:72px;border-radius:36px;border:2.5px solid #CDBBA2;box-sizing:border-box}
.dw-chat .ftext{position:absolute;left:48px;top:747px;width:470px;font:400 33px/42px 'Inter',sans-serif}
.dw-chat .send{position:absolute;left:552px;top:738px;width:60px;height:60px;border-radius:50%;background:#BE4F2F}
.dw-chat .send:after{content:'';position:absolute;left:21px;top:22px;width:14px;height:14px;border-left:4.5px solid #F2E5D1;border-top:4.5px solid #F2E5D1;transform:rotate(45deg)}
.dw-chat .bar{position:absolute;left:0;top:816px;width:620px;height:62px}
.dw-chat .bar .state{width:620px;display:flex}
.dw-chat .bar .state span{flex:1;text-align:center;font:400 31px/62px 'Inter',sans-serif;color:#2D2D2F}
.dw-chat .bar .state span+span{border-left:2px solid rgba(45,45,47,.14)}
.dw-chat .bar .state span.pick{font-weight:600}
.dw-frame .sel.h .hl,.dw-frame .sel.h .hr{position:absolute;top:-.1em;width:.06em;height:1.24em;background:#0D8FF0}
.dw-frame .sel.h .hl{left:-.03em}.dw-frame .sel.h .hr{right:-.03em}
.dw-frame .sel.h .hl:before,.dw-frame .sel.h .hr:after{content:'';position:absolute;left:-.075em;width:.21em;height:.21em;border-radius:50%;background:#0D8FF0}
.dw-frame .sel.h .hl:before{top:-.18em}.dw-frame .sel.h .hr:after{bottom:-.18em}

/* ---------------------------------------------------------------- try it: the real take, with its sound */
.try{display:grid;grid-template-columns:1fr;overflow:hidden;padding:0}
@media (min-width:880px){.try{grid-template-columns:minmax(0,310px) minmax(0,1fr)}}
.try-film{position:relative;background:var(--scene);aspect-ratio:4/5;max-height:62vh}
@media (min-width:880px){.try-film{aspect-ratio:9/16;max-height:none}}
.try-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.try-page{padding:20px 22px 22px;display:flex;flex-direction:column}
.try-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.try-title{font:600 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.try-tools{display:flex;align-items:center;gap:6px}
.tgl{--tone:var(--ink-3);width:38px;height:34px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--tone);cursor:pointer;
  transition:background var(--tick-fill) ease-out,color var(--tick-settle) var(--settle),transform var(--press) ease-out}
.tgl svg{width:17px;height:17px}
.tgl[data-pass="filler"]{--tone:var(--red)} .tgl[data-pass="retake"]{--tone:var(--indigo)}
.tgl:hover{background:var(--surface2)}
.tgl:active{transform:scale(.94)}
.tgl[aria-pressed="true"]{background:var(--tone);color:#fff}
.try-reset{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:var(--ink-3);cursor:pointer;margin-left:4px}
.try-reset:hover{color:var(--ink);background:var(--surface2)}
.try-reset svg{width:16px;height:16px}
.try-tel{min-height:12px;margin-bottom:10px}
.try-body{font:500 16.5px/2 var(--sans);letter-spacing:-.005em;color:var(--ink);flex:1}
.try-body .w{cursor:pointer;padding:2px 1px;border-radius:3px;transition:background var(--tick) ease,color var(--tick) ease}
.try-body .w:hover{background:color-mix(in srgb,var(--red) 10%,transparent)}
.try-body .w.cut{color:var(--red);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:currentColor}
.try-body .w.cut.rt{color:var(--indigo)}
.try-body .w.now{background:color-mix(in srgb,var(--azure) 18%,transparent)}
.try-body .pz{display:flex;width:max-content;align-items:center;gap:3px;height:18px;padding:0 6px;margin:5px 0;border-radius:5px;background:var(--surface2);
  box-shadow:inset 0 0 0 1px var(--line-2);font:500 9.5px/1 var(--mono);color:var(--ink-3);white-space:nowrap;transition:opacity var(--tick) ease}
.try-body .pz i{display:block;width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.try-body .pz b{font-weight:500;margin-left:2px}
.try-body .pz.cut{opacity:.4;text-decoration:line-through}
.try-hint{margin:12px 0 0}
.try-hint::before{content:'['} .try-hint::after{content:']'}
.try-pill{display:flex;align-items:center;gap:10px;height:48px;margin-top:14px;padding:0 16px 0 6px;border-radius:999px;background:var(--raised);
  box-shadow:0 8px 24px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06)}
.try-play{width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:999px;background:var(--ink);color:var(--paper);cursor:pointer;transition:transform var(--press) ease-out}
.try-play:active{transform:scale(.92)}
.try-play svg{width:16px;height:16px}
.try-play .ic-pause{display:none}
.tryit.playing .try-play .ic-play{display:none}
.tryit.playing .try-play .ic-pause{display:block}
.try-wave{flex:1;display:flex;align-items:center;gap:2px;height:30px}
.try-wave i{flex:1;display:block;background:var(--line-2);border-radius:1px}
.try-wave i.on{background:var(--azure)}
.try-clock{font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}