/* C092 Catch This Yawn: "Giant Sticker Yawn". Fonts self-hosted in fonts/. */
@font-face{font-family:"Titan One";src:url(fonts/titan-one-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
:root{--cy-bg:#FF7A1A;--cy-bg-2:#FF9440;--cy-body:#B9A4FF;--cy-body-dk:#8E74F0;--cy-mouth:#5A1F3A;--cy-tongue:#FF8FA3;--cy-cheek:#FFB3C7;--cy-ink:#2B1630;--cy-cream:#FFF4E6;
 --cy-display:"Titan One","Arial Rounded MT Bold",system-ui,sans-serif;--cy-sans:"Nunito",system-ui,sans-serif;--cy-yawn:4.5s}
.cy{margin:0;min-height:100dvh;overflow:hidden;position:relative;background:var(--cy-bg);color:var(--cy-ink);font-family:var(--cy-sans);
 background-image:radial-gradient(circle at 50% 120%,var(--cy-bg-2) 0 45%,transparent 45.2%)}
.cy-top{position:relative;z-index:3;display:flex;justify-content:space-between;padding:12px 16px;font:800 12px var(--cy-sans);letter-spacing:.12em;text-transform:uppercase}
/* oversized character, cropped by the viewport edges */
.cy-char{position:absolute;left:50%;top:7%;width:min(122vw,96vh);transform:translateX(-50%);z-index:1}
@media(min-width:900px){.cy-char{left:38%;top:auto;bottom:-30%;width:min(70vw,112vh)}}
.cy-char svg{width:100%;height:auto;display:block}
.cy-ui{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:16px;display:grid;gap:10px;justify-items:center;text-align:center}
@media(min-width:900px){.cy-ui{left:auto;right:40px;bottom:40px;width:360px;justify-items:start;text-align:left}}
.cy-call{font:400 clamp(30px,4.6vw,56px)/1 var(--cy-display);color:var(--cy-cream);margin:0;text-shadow:0 4px 0 var(--cy-ink)}
.cy-caption{font:400 15px var(--cy-display);background:var(--cy-cream);border:3px solid var(--cy-ink);border-radius:999px;padding:6px 14px;margin:0}
.cy-card{background:var(--cy-cream);border:3px solid var(--cy-ink);border-radius:22px;padding:14px;box-shadow:0 6px 0 var(--cy-ink);display:grid;gap:10px;width:100%;box-sizing:border-box}
.cy-field{font:700 18px var(--cy-sans);border:2.5px solid var(--cy-ink);border-radius:14px;padding:10px 12px;width:100%;box-sizing:border-box;background:#fff}
.cy-lbl{font:800 13px var(--cy-sans);text-align:left}
.cy-btn{font:400 18px var(--cy-display);padding:13px 22px;min-height:50px;border:3px solid var(--cy-ink);border-radius:999px;background:var(--cy-body);color:var(--cy-ink);box-shadow:0 4px 0 var(--cy-ink);cursor:pointer}
.cy-btn--alt{background:var(--cy-cream)}
.cy-btn:focus-visible,.cy-field:focus-visible{outline:4px solid var(--cy-cream);outline-offset:3px}
.cy-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media(min-width:900px){.cy-row{justify-content:flex-start}}
.cy-fine{font:700 13px/1.4 var(--cy-sans);color:var(--cy-ink);max-width:40ch;margin:0}
/* the yawn (slow): JS/CSS adds .is-yawning; .is-paused pauses; .cy-still = mid-yawn frame for reduced motion */
.cy-mouth,.cy-eye,.cy-head,.cy-tear,.cy-arm{transform-box:fill-box}
.cy-mouth{transform-origin:50% 0}.cy-eye{transform-origin:50% 50%}.cy-head{transform-origin:50% 100%}
.is-yawning .cy-mouth{animation:cy-mouth var(--cy-yawn) ease-in-out infinite}
.is-yawning .cy-eye{animation:cy-eye var(--cy-yawn) ease-in-out infinite}
.is-yawning .cy-head{animation:cy-head var(--cy-yawn) ease-in-out infinite}
.is-yawning .cy-tear{animation:cy-tear var(--cy-yawn) ease-in infinite}
.is-paused *{animation-play-state:paused!important}
@keyframes cy-mouth{0%,8%{transform:scaleY(.12)}40%,62%{transform:scaleY(1)}80%,100%{transform:scaleY(.12)}}
@keyframes cy-eye{0%,10%{transform:scaleY(1)}35%,66%{transform:scaleY(.12)}82%{transform:scaleY(1)}88%{transform:scaleY(.1)}92%,100%{transform:scaleY(1)}}
@keyframes cy-head{0%,8%{transform:none}45%,60%{transform:scale(1.04,.97) rotate(-3deg)}85%,100%{transform:none}}
@keyframes cy-tear{0%,50%{opacity:0;transform:translateY(0)}58%{opacity:1}80%{opacity:1;transform:translateY(26px)}90%,100%{opacity:0}}
.cy-still .cy-mouth{transform:scaleY(1)}.cy-still .cy-eye{transform:scaleY(.12)}.cy-still .cy-head{transform:scale(1.04,.97) rotate(-3deg)}
.cy-idle .cy-mouth{transform:scaleY(.12)}
@media(prefers-reduced-motion:reduce){.is-yawning .cy-mouth,.is-yawning .cy-eye,.is-yawning .cy-head,.is-yawning .cy-tear{animation:none}}
/* Engineer additions (CSP-safe) */
[hidden]{display:none!important}
.cy-top a{color:inherit;text-decoration:none}.cy-top a:focus-visible{outline:3px solid var(--cy-cream)}
.cy-top h1{font:inherit;margin:0}
.cy{overflow-y:auto}.cy-ui{max-height:70dvh;overflow:auto}
.cy-card--ink .cy-call{color:var(--cy-ink);text-shadow:none;font-size:30px}
.cy-msg{font:800 15px var(--cy-sans);margin:0;min-height:1em}
.cy-caption:empty{display:none}
.cy-linkbox input{width:100%;padding:8px;font:13px var(--cy-sans)}
.cy-toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:var(--cy-ink);color:var(--cy-cream);padding:10px 16px;border-radius:999px;font-weight:800;z-index:9}

/* visitor-text wrap: long unbroken words never widen the page */
body{overflow-wrap:anywhere}
input,textarea{min-width:0;max-width:100%}
.cy-stage{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}