/* Would You Rather · Cut & Paste phone skin (owner decision 2026-10-06; the
   canvas's WYR-CutAndPaste Phone and Anim boards). Every rule is scoped to
   #wyr-content.wyr-design.wyrd-cutAndPaste, so no other screen or feature is
   touched; the classic screens (no .wyr-design) never match.

   A photocopied collage zine: off-white copier paper with toner grain, the
   heading on label tape and in ransom letters, the options on halftone paper
   blocks (sky blue #4D8DFF and pink #FF3D9A, black ink; pastel tints until
   picked), a marker loop and a tick sticker on the pick, a torn strip for the
   result. The cuts and tears are the boards' seeded generator, computed by
   cut-and-paste.js into the --wcap-* properties. The paper colour lives on
   this in-flow panel, never on html/body or a fixed element (the iOS 26
   rule). Motion is the boards': pieces pasted down on the paste curve, tape
   fed in, letters flown in one by one. */

@font-face { font-family: 'Sidekick Trivia Archivo'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/sidekick-trivia-archivo-extra-bold-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Archivo'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-archivo-black-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Archivo Condensed'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/sidekick-trivia-archivo-condensed-black-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-anton-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Abril Fatface'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/abril-fatface-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Rubik Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-rubik-mono-regular-v1.woff2') format('woff2'); }
@font-face { font-family: 'Sidekick Trivia Special Elite'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/sidekick-trivia-special-elite-regular-v1.woff2') format('woff2'); }

/* What cut-and-paste.js adds shows only in this design. */
.wcap-only { display: none; }

#wyr-content.wyr-design.wyrd-cutAndPaste {
    --wcap-ink: #111111; --wcap-paper: #EDEAE2; --wcap-white: #FFFFFF;
    --wcap-a: #4D8DFF; --wcap-b: #FF3D9A; --wcap-yellow: #FFE600; --wcap-blue: #2D5BFF;
    --wcap-anton: 'Sidekick Trivia Anton', 'Anton', Impact, sans-serif;
    --wcap-archivo: 'Sidekick Trivia Archivo', 'Archivo', system-ui, sans-serif;
    --wcap-condensed: 'Sidekick Trivia Archivo Condensed', 'Archivo Narrow', system-ui, sans-serif;
    --wcap-elite: 'Sidekick Trivia Special Elite', 'Courier New', monospace;
    --wcap-paste: cubic-bezier(0.3, 1.45, 0.55, 1);
    --wcap-feed: cubic-bezier(0.25, 1.25, 0.5, 1);
    --wcap-feed-soft: cubic-bezier(0.25, 1.2, 0.5, 1);
    --wcap-bump: cubic-bezier(0.34, 1.56, 0.64, 1);
    --wcap-draw: cubic-bezier(0.45, 0, 0.3, 1);
    --wcap-staple: cubic-bezier(0.2, 2.4, 0.5, 1);
    --wcap-dots10: radial-gradient(circle, rgba(0,0,0,0.12) 0 32%, transparent 36%) 0 0 / 10px 10px;
    /* The option height: the board's 150 px where the phone has room, less
       on a short screen, so the whole vote fits with no scrolling. */
    --wcap-opt-h: clamp(92px, calc((100dvh - 410px) / 2), 150px);

    position: relative;
    margin: -8px -14px;
    padding: 14px 16px 18px;
    min-height: calc(100dvh - 24px);
    border-radius: 4px;
    font-family: var(--wcap-archivo);
    font-weight: 900;
    color: var(--wcap-ink);
    text-align: center;
    /* Photocopy paper: toner grain (a seeded fractal noise, seed 8), a faint
       copier band and a darker edge. */
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 -0.21'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23t)'/%3E%3C/svg%3E") 0 0 / 280px 280px,
        linear-gradient(90deg, transparent 0 30%, rgba(0,0,0,0.04) 30.5% 31.2%, transparent 31.7%),
        radial-gradient(ellipse 90% 75% at 50% 40%, transparent 55%, rgba(0,0,0,0.14)),
        var(--wcap-paper);
    overflow: hidden;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-only { display: block; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-sr,
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-question,
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-timer-text,
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-result > .wyr-result-labels,
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-result > .wyr-result-bar,
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-result > .wyr-winner {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Ransom letters (cut-and-paste.js): each pasted down one by one ── */
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-word {
    display: inline-flex; justify-content: center; align-items: center; gap: 3px;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-glyph {
    display: inline-block; flex: 0 0 auto; line-height: 1; white-space: pre;
    transform: translateY(var(--dy)) rotate(var(--rot));
    animation: wcapFly 0.38s var(--wcap-paste) both;
    animation-delay: calc(var(--d0, 0s) + var(--n) * var(--step, 0.07s));
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-glyph.wcap-space,
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-still .wcap-glyph { animation: none; }
@keyframes wcapFly {
    from { transform: translate(var(--fx), var(--fy)) rotate(var(--frot)) scale(1.6); }
    to { transform: translateY(var(--dy)) rotate(var(--rot)); }
}

/* ── Heading: Would You (tape), RATHER (ransom), three paper dots ── */
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-head { text-align: left; margin: 4px 0 0 4px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-would {
    display: inline-block; padding: 6px 16px 9px;
    background: var(--wcap-ink); color: var(--wcap-white);
    font-size: 30px; line-height: 1.05; white-space: nowrap;
    clip-path: var(--wcap-title); transform: rotate(-2deg);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-head { filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2)); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-rather { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 2px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-rather .wcap-word { filter: none; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-dots { display: flex; gap: 7px; align-self: flex-end; margin-bottom: 6px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-dots i { width: 14px; height: 14px; background: var(--wcap-b); clip-path: var(--wcap-dot0); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-dots i:nth-child(2) { background: var(--wcap-yellow); clip-path: var(--wcap-dot1); transform: translateY(-3px); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-dots i:nth-child(3) { background: var(--wcap-blue); clip-path: var(--wcap-dot2); }

/* Paused: a yellow label. */
#wyr-content.wyr-design.wyrd-cutAndPaste .stopped-banner.show {
    display: table; margin: 14px auto 0; padding: 7px 16px 9px;
    background: var(--wcap-yellow); color: var(--wcap-ink); border: 0; border-radius: 0;
    font-family: var(--wcap-archivo); font-weight: 900; font-size: 16px;
    clip-path: var(--wcap-banner); transform: rotate(-1.5deg);
}

/* ── The timer: a thin taped bar and a clock disc that slaps each second ── */
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer.show {
    display: flex; align-items: center; gap: 22px; margin: 6px 4px 0 2px;
    animation: wcapTimerIn 0.5s var(--wcap-feed) both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer-bar {
    flex: 1 1 auto; height: 22px; background: var(--wcap-white);
    border: 3px solid var(--wcap-ink); border-radius: 0; transform: rotate(-1deg);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer-fill {
    border-radius: 0;
    background-color: var(--wcap-yellow) !important;
    background-image: radial-gradient(circle, rgba(0,0,0,0.12) 0 32%, transparent 36%);
    background-size: 8px 8px;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer[data-wcap-level="warn"] .vote-timer-fill,
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer[data-wcap-level="urgent"] .vote-timer-fill { background-color: var(--wcap-b) !important; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-clock {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 66px; height: 66px; background: var(--wcap-yellow); clip-path: var(--wcap-clock);
    font-family: var(--wcap-anton); font-weight: 400; font-size: 36px; line-height: 1; color: var(--wcap-ink);
    font-variant-numeric: tabular-nums;
    transform: rotate(-6deg);
    transition: background-color 0.2s, color 0.2s;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer[data-wcap-level="warn"] .wcap-clock { background: var(--wcap-b); }
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer[data-wcap-level="urgent"] .wcap-clock { background: var(--wcap-ink); color: var(--wcap-yellow); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-clock.wcap-tick-on { animation: wcapSlap 0.34s ease-out; }
#wyr-content.wyr-design.wyrd-cutAndPaste .vote-timer[data-wcap-level="urgent"] .wcap-clock.wcap-tick-on { animation-name: wcapSlapHard; }
@keyframes wcapTimerIn { from { transform: translateX(-520px) rotate(-2deg); } }
@keyframes wcapSlap { 50% { transform: rotate(0deg) scale(1.08); } }
@keyframes wcapSlapHard { 50% { transform: rotate(8deg) scale(1.08); } }

/* ── The options: halftone paper blocks; the pick in full colour with the
   marker loop and a tick sticker ── */
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-options {
    gap: 0; margin: 12px 0 0;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.25));
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn {
    position: relative; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: var(--wcap-opt-h); margin: 0; padding: 0 30px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    color: var(--wcap-ink); opacity: 1;
    font-family: var(--wcap-condensed); font-weight: 900; font-size: 31px; line-height: 1.05;
    text-align: center; text-shadow: none;
    transition: transform 0.09s ease;
    animation: wcapOptA 0.5s var(--wcap-paste) 0.05s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wyr-b { animation-name: wcapOptB; animation-delay: 0.15s; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wcap-len-m { font-size: 26px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wcap-len-l { font-size: 22px; padding: 0 24px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-color: var(--wcap-pastelA);
    background-image: radial-gradient(circle, rgba(0,0,0,0.07) 0 32%, transparent 36%);
    background-size: 10px 10px;
    clip-path: var(--wcap-optA); transform: rotate(-1deg);
    transition: background-color 0.2s;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wyr-b::before {
    background-color: var(--wcap-pastelB); clip-path: var(--wcap-optB); transform: rotate(0.8deg);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.selected::before {
    background-color: var(--wcap-a);
    background-image: radial-gradient(circle, rgba(0,0,0,0.13) 0 32%, transparent 36%);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wyr-b.selected::before { background-color: var(--wcap-b); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn:active:not(:disabled) { transform: scale(0.95); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn:disabled { opacity: 1; cursor: default; transform: none; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-loop {
    display: none; position: absolute; left: -4px; top: 0; width: calc(100% + 8px); height: 101%;
    overflow: visible; fill: none; stroke: var(--wcap-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-loop path {
    stroke-dasharray: var(--wcap-loopLen); stroke-dashoffset: 0;
    animation: wcapDraw 0.4s var(--wcap-draw) 0.05s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-tick {
    display: none; position: absolute; right: -10px; top: -22px; width: 56px; height: 56px;
    background: var(--wcap-white); clip-path: var(--wcap-tick); transform: rotate(8deg);
    animation: wcapStaple 0.22s var(--wcap-staple) 0.3s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-tick svg {
    display: block; width: 56px; height: 56px; fill: none; stroke: var(--wcap-ink); stroke-width: 7;
    stroke-linecap: round; stroke-linejoin: round;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.selected .wcap-loop,
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.selected .wcap-tick { display: block; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wcap-kept .wcap-loop path,
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wcap-kept .wcap-tick { animation: none; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-or {
    display: flex; justify-content: center; align-items: center; height: 70px;
    color: var(--wcap-ink); font-weight: 400;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-or .wcap-word { filter: none; }
/* A snapshot's redraw of the same question rests in place. */
#wyr-content.wyr-design.wyrd-cutAndPaste .wyr-options.wcap-at-rest .wyr-option-btn { animation: none; }
@keyframes wcapOptA { from { transform: translate(-60px, 900px) rotate(-14deg) scale(1.3); } }
@keyframes wcapOptB { from { transform: translate(60px, 900px) rotate(14deg) scale(1.3); } }
@keyframes wcapDraw { from { stroke-dashoffset: var(--wcap-loopLen); } }
@keyframes wcapStaple { from { transform: rotate(8deg) scale(0); } }

/* ── The status: a typed scrap ("Tap your pick", "Got it ✓ …", "Locked in!") ── */
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status {
    position: relative; isolation: isolate;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: fit-content; max-width: 300px; margin: 22px auto 0; padding: 10px 18px 12px;
    color: var(--wcap-ink); opacity: 1;
    font-family: var(--wcap-elite); font-weight: 400; font-size: 20px; line-height: 1.2; text-align: center;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.2));
    transform: rotate(-1.5deg);
}
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status:empty { display: none; }
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--wcap-white); clip-path: var(--wcap-wait);
}
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status[data-wcap-kind="got"] { transform: rotate(1.2deg); }
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status.wcap-bump { animation: wcapStatusBump 0.3s var(--wcap-bump); }
/* "Locked in!" drops in inside the phones' hold for the beat (0.355 s). */
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status.wcap-drop { animation: wcapStatusDrop 0.3s var(--wcap-paste) both; }
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status .wcap-lock { flex: 0 0 auto; width: 24px; height: 24px; }
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status:not([data-wcap-kind="lock"]) .wcap-lock { display: none; }
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status .wcap-lock svg {
    display: block; width: 24px; height: 24px; fill: none; stroke: var(--wcap-ink); stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
}
/* On the result, "Locked in!" sits under the outcome; while held for the
   display's beat or the reveal it waits on the paper alone. */
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status[data-wcap-kind="lock"] { margin-top: 26px; }
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-options[style*="none"] ~ #wyr-result[style*="none"] ~ #wyr-status { margin-top: 34vh; }
@keyframes wcapStatusBump { 40% { transform: rotate(-3deg) scale(1.06); } }
@keyframes wcapStatusDrop { from { transform: translateY(500px) rotate(-6deg) scale(1.3); } }

/* ── The result (cut-and-paste.js's resultIcon): option chips, the torn
   strip, the percentage chips, the winner's tape with WINS! and a crown, or
   TIED! on a torn sheet ── */
#wyr-content.wyr-design.wyrd-cutAndPaste #wyr-result { margin-top: 16px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chips { display: flex; justify-content: space-between; gap: 18px; padding: 0 4px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chip {
    position: relative; isolation: isolate; flex: 1 1 0;
    display: flex; align-items: center; justify-content: center;
    height: 116px; padding: 0 12px; overflow: hidden;
    font-family: var(--wcap-condensed); font-weight: 900; font-size: 23px; line-height: 1.05;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.22));
    transform: rotate(-2deg);
    animation: wcapChipA 0.5s var(--wcap-paste) both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chip::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--wcap-dots10), var(--wcap-a); clip-path: var(--wcap-chipA);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chip.wcap-b { transform: rotate(1.5deg) translateY(4px); animation-name: wcapChipB; animation-delay: 0.1s; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chip.wcap-b::before { background: var(--wcap-dots10), var(--wcap-b); clip-path: var(--wcap-chipB); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chip.wcap-len-m { font-size: 19px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chip.wcap-len-l { font-size: 16px; }

#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-bar {
    position: relative; height: 50px; margin: 24px 0 0;
    animation: wcapFeedIn 0.56s var(--wcap-feed) 0.25s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-bar-paper {
    position: absolute; inset: 0; clip-path: var(--wcap-bar);
    background: var(--wcap-dots10), var(--wcap-b);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-bar { filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.22)); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-bar-a { position: absolute; left: 0; top: 0; bottom: 0; background: var(--wcap-dots10), var(--wcap-a); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-empty .wcap-bar-paper { background: var(--wcap-dots10), var(--wcap-pastelB); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-empty .wcap-bar-a { background: var(--wcap-dots10), var(--wcap-pastelA); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-empty .wcap-pcts { display: none; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-seam {
    position: absolute; top: -12px; width: 14px; height: 74px; margin-left: -7px;
    background: var(--wcap-white); clip-path: var(--wcap-seam); transform: rotate(3deg);
}

#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pcts { display: flex; justify-content: space-between; margin: 22px -4px 0; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct {
    position: relative; isolation: isolate;
    display: flex; align-items: baseline; gap: 8px; padding: 5px 16px 7px 14px;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.22));
    transform: rotate(-2deg);
    animation: wcapPctA 0.5s var(--wcap-feed-soft) 0.45s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--wcap-ink); clip-path: var(--wcap-resA);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct.wcap-b { transform: rotate(1.6deg); animation-name: wcapPctB; animation-delay: 0.55s; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct.wcap-b::before { clip-path: var(--wcap-resB); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct b { font-family: var(--wcap-anton); font-weight: 400; font-size: 42px; line-height: 1; color: var(--wcap-a); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct.wcap-b b { color: var(--wcap-b); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct b i { display: inline-block; width: 0.5em; font-style: normal; text-align: center; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pct em { font-style: normal; font-size: 22px; line-height: 1; color: var(--wcap-white); }

#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-win { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 34px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-wintape {
    position: relative; isolation: isolate; max-width: 300px; padding: 8px 18px 11px;
    color: var(--wcap-white); font-weight: 800; font-size: 24px; line-height: 1.12;
    filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.22));
    transform: rotate(-1.5deg);
    animation: wcapFeedIn 0.56s var(--wcap-feed) 0.55s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-wintape::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: var(--wcap-ink); clip-path: var(--wcap-winTape);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-wintape.wcap-len-l { font-size: 20px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-wins { display: flex; align-items: center; gap: 10px; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-wins .wcap-word { transform: rotate(-3deg); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-crown {
    width: 60px; height: 44px; overflow: visible; filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.2));
    transform: rotate(14deg);
    animation: wcapCrown 0.3s var(--wcap-staple) 1.6s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-crown-body { fill: var(--wcap-yellow); stroke: var(--wcap-ink); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-crown-band { fill: none; stroke: var(--wcap-ink); stroke-width: 7; stroke-linecap: round; }

#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-tie {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 294px; max-width: 100%; height: 150px; margin: 30px auto 0; transform: rotate(2deg);
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-tiesheet {
    position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(0,0,0,0.05) 0 32%, transparent 36%) 0 0 / 8px 8px, var(--wcap-white);
    clip-path: var(--wcap-tieSheet);
    animation: wcapTieSheet 0.52s var(--wcap-paste) 0.45s both;
}
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-tie { filter: drop-shadow(4px 5px 0 rgba(0,0,0,0.22)); }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-tie .wcap-word { position: relative; filter: none; }
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-none {
    display: table; margin: 34px auto 0; padding: 10px 18px 12px; background: var(--wcap-white);
    font-family: var(--wcap-elite); font-weight: 400; font-size: 20px; clip-path: var(--wcap-wait);
    transform: rotate(-1deg);
    animation: wcapStatusDrop 0.42s var(--wcap-paste) 0.6s both;
}
/* A snapshot's redraw of the same result rests in place. */
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-result.wcap-at-rest *,
#wyr-content.wyr-design.wyrd-cutAndPaste .wcap-result.wcap-at-rest *::before { animation: none !important; }
@keyframes wcapChipA { from { transform: translate(-300px, -700px) rotate(-20deg) scale(1.4); } }
@keyframes wcapChipB { from { transform: translate(300px, -700px) rotate(20deg) scale(1.4); } }
@keyframes wcapFeedIn { from { transform: translateX(-520px) rotate(-2deg); } }
@keyframes wcapPctA { from { transform: translateX(-450px); } }
@keyframes wcapPctB { from { transform: translateX(450px); } }
@keyframes wcapCrown { from { transform: rotate(14deg) scale(0); } }
@keyframes wcapTieSheet { from { transform: translate(60px, -900px) rotate(14deg) scale(1.4); } }

/* A short screen (an SE-sized phone with its toolbars): tighter paper. */
@media (max-height: 700px) {
    #wyr-content.wyr-design.wyrd-cutAndPaste { padding-top: 8px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wcap-would { font-size: 24px; padding: 5px 13px 7px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wcap-rather { margin-top: 6px; transform: scale(0.8); transform-origin: 0 50%; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wyr-or { height: 56px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn { font-size: 27px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wcap-len-m { font-size: 22px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wyr-option-btn.wcap-len-l { font-size: 19px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status { margin-top: 16px; font-size: 18px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wcap-chip { height: 96px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wcap-bar { margin-top: 18px; height: 42px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wcap-pcts { margin-top: 16px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wcap-win { margin-top: 20px; gap: 12px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste .wcap-tie { margin-top: 18px; height: 124px; }
    #wyr-content.wyr-design.wyrd-cutAndPaste #wyr-status[data-wcap-kind="lock"] { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #wyr-content.wyr-design.wyrd-cutAndPaste *, #wyr-content.wyr-design.wyrd-cutAndPaste *::before { animation: none !important; transition: none !important; }
}