@view-transition{navigation:auto}
.nav-logo{view-transition-name:cope-logo}
.narrator{view-transition-name:cope-narrator}
::view-transition-old(root){animation:cc-dim .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:cc-lid .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes cc-lid{from{transform:translateY(100%)}to{transform:none}}
@keyframes cc-dim{to{filter:brightness(.35)}}
@keyframes cc-out{to{opacity:0}}
@keyframes cc-in{from{opacity:0}}
@keyframes cc-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@supports not (view-transition-name:none){
  body{animation:cc-wipe .32s cubic-bezier(.2,.8,.2,1) both}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root){animation:cc-out .15s linear both}
  ::view-transition-new(root){animation:cc-in .15s linear both}
  body{animation:none!important}
}
.touch-grass body{animation:none!important}

.cc{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto}
.cc-track{position:relative;width:120px;height:28px;flex:none}
.cc-svg{display:block;overflow:visible}
.cc-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cc-svg .cc-ink{stroke:#0A0518;stroke-width:5}
.cc-svg .cc-line{stroke:#3CFF8F;stroke-width:2.5}
.cc-svg .cc-dot{fill:#FFC83D;stroke:#0A0518;stroke-width:1.5}
.cc-rider{position:absolute;left:0;top:0;width:26px;height:26px;pointer-events:none;offset-path:path("M2 22 C12 21 18 16 24 12 S34 3 40 3 S46 6 50 9 S54 8 57 10 S63 18 70 24 S80 26 86 25 S100 20 118 18");offset-anchor:50% 85%;offset-rotate:auto;offset-distance:0%}
.cc-rider img{display:block;width:26px;height:26px;object-fit:contain}
.cc-js .cc-rider{offset-path:none;transform-origin:50% 85%}
@keyframes cc-ride{from{offset-distance:0%}to{offset-distance:100%}}
@supports (animation-timeline:scroll()){
  html:not(.touch-grass) .cc:not(.cc-js) .cc-rider{animation-name:cc-ride;animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto;animation-timeline:scroll(root)}
}
.cc-stage{font-family:var(--mono,'Space Mono',monospace);font-size:11px;line-height:1.1;letter-spacing:.04em;color:#FFC83D;text-transform:uppercase;white-space:nowrap;max-width:11ch;overflow:hidden;text-overflow:ellipsis}
.cc .meter-label,.cc .meter-bar{display:none}
@media (max-width:420px){.cc-stage{display:none}.cc-track{width:96px}.cc-svg{width:96px;height:22px}.cc-rider{display:none}}
@media (prefers-reduced-motion:reduce){.cc-track{display:none}.cc-stage{display:inline}}
.touch-grass .cc-track{display:none}
.touch-grass .cc-stage{display:inline}

.stage-tag{display:inline-block;margin:0 0 8px;padding:2px 8px;border:3px solid currentColor;border-radius:4px;color:#FF5FA2;font-family:var(--mono,'Space Mono',monospace);font-size:12px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-3deg);transform-origin:0 50%;mix-blend-mode:normal;opacity:.92}
.stage-tag.is-now{color:#3CFF8F}

.deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;perspective:1200px;margin-top:24px}
.tcard{position:relative;min-width:0}
.tc-in{position:relative;display:grid;height:100%;transform-style:preserve-3d;transition:transform .36s cubic-bezier(.45,0,.55,1)}
.tc-f,.tc-b{grid-area:1/1;display:flex;flex-direction:column;gap:6px;padding:12px;border:3px solid #0A0518;border-radius:12px;box-shadow:6px 6px 0 #0A0518;backface-visibility:hidden;-webkit-backface-visibility:hidden;min-width:0}
.tc-f{background:#FFF6E0;color:#0A0518}
.tc-f img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#140B2E;border:3px solid #0A0518;border-radius:8px}
.tc-f h3{margin:4px 0 0}
.tc-f p{font-size:14px;line-height:1.4;margin:0}
.tc-b{transform:rotateY(180deg);background:#FF5FA2 repeating-linear-gradient(45deg,transparent 0 8px,rgba(10,5,24,.12) 8px 16px);color:#0A0518;justify-content:center;text-align:center}
.tc-motto{font-family:Bangers,Impact,sans-serif;font-size:22px;letter-spacing:.04em;margin:0 0 6px;padding:6px;border:3px double #0A0518;background:#FFC83D}
.tc-b p{margin:0}
.tc-b a{color:#0A0518;font-weight:700;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.tc-flip{margin-top:auto;min-height:44px;border:3px solid #0A0518;border-radius:8px;background:#3CFF8F;color:#0A0518;font:700 14px 'Space Grotesk',sans-serif;cursor:pointer}
.tc-flip:focus-visible,.tc-b a:focus-visible{outline:3px solid #FFC83D;outline-offset:3px}
.tcard.is-flipped .tc-in{transform:rotateY(180deg)}
.tcard-down{grid-column:1/-1;justify-self:center;width:min(100%,260px);cursor:not-allowed}
.tcard-down .tc-b{transform:none}
.tc-joke{font-weight:700}
@media (min-width:900px){
  .deck{display:flex;justify-content:center;gap:0}
  .tcard{width:220px;margin:0 -10px;transform:rotate(var(--r,0deg));transform-origin:50% 120%;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
  .tcard:hover,.tcard:focus-within{z-index:2}
  .tcard-down{grid-column:auto;width:180px;align-self:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .tc-in{transform:none!important;transition:none}
  .tc-b{transform:none;opacity:0;visibility:hidden;transition:opacity .12s linear,visibility 0s .12s}
  .tcard.is-flipped .tc-b,.tcard-down .tc-b{opacity:1;visibility:visible;transition:opacity .12s linear}
  .tcard.is-flipped .tc-f{opacity:0;visibility:hidden}
}
.touch-grass .tc-in{transform:none!important;transition:none}
.touch-grass .tc-b{transform:none;opacity:0;visibility:hidden}
.touch-grass .tcard.is-flipped .tc-b,.touch-grass .tcard-down .tc-b{opacity:1;visibility:visible}
.touch-grass .tcard.is-flipped .tc-f{opacity:0;visibility:hidden}

.comic{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;list-style:none;margin:24px 0 0}
.comic-panel{scroll-snap-align:start;border:4px solid #0A0518!important;border-radius:6px;background:#FFF6E0;color:#0A0518;transform:none!important;min-width:0}
.comic-panel h3,.comic-panel p{color:#0A0518}
.cp-art img{display:block;width:100%;height:auto;max-height:160px;object-fit:contain}
.cp-rug img{object-fit:cover}
.cp-cap{font-family:'Comic Neue',cursive;font-weight:700;background:#FFC83D;border:3px solid #0A0518;padding:4px 8px;margin-top:8px}
.cp-plank{display:flex;align-items:center;gap:6px;font:700 11px var(--mono,'Space Mono',monospace);min-height:80px}
.cp-plank i{flex:1;height:10px;background:#B07A3C;border:3px solid #0A0518}
.comic.is-armed .comic-panel{clip-path:inset(0 100% 0 0)}
.comic.is-inked .comic-panel{clip-path:inset(0 0 0 0);transition:clip-path .36s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*120ms)}
@media (min-width:900px){.comic{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
@media (prefers-reduced-motion:reduce){.comic .comic-panel{clip-path:none!important}}
.touch-grass .comic .comic-panel{clip-path:none!important}

.narrator-peek{position:absolute;right:0;bottom:100%;width:72px;pointer-events:none}
.narrator-peek img{display:block;width:100%;height:auto}
@media (max-width:599px){.narrator-peek{display:none}}
.narrator-shoo{min-height:44px;min-width:44px;padding:0 10px;border:3px solid #0A0518;border-radius:8px;background:#FFC83D;color:#0A0518;font:700 13px 'Space Grotesk',sans-serif;cursor:pointer}
.narrator-shoo:focus-visible,.cc-again:focus-visible{outline:3px solid #FFC83D;outline-offset:3px}
.cc-again{margin:16px auto 0;min-height:48px}
@media (max-width:899px){body.has-bar .narrator{bottom:calc(var(--bar-h,68px) + 12px + env(safe-area-inset-bottom))}}
@media (max-width:599px){body.has-bar .narrator{max-width:58vw}body.has-bar .narrator .narrator-face img{width:44px;height:44px}body.has-bar .narrator .bubble{font-size:12px;padding:6px 8px}}