/* The bird has somewhere to be in every chapter. All space is reserved in flow. */
.results-demonstration{align-self:center;width:100%}
.canary-perch{--perch-ink:var(--ink);--perch-ground:#a8d4c3;position:relative;isolation:isolate;container-type:inline-size;max-width:390px;margin-top:22px;color:var(--perch-ink)}
.perch-copy{position:absolute;z-index:4;right:0;top:20px;width:155px;pointer-events:none;transform:rotate(3deg)}
.perch-bubble{display:inline-block;position:relative;padding:11px 14px;background:#fff9e8;border:2px solid var(--perch-ink);box-shadow:3px 3px 0 var(--perch-ink);border-radius:15px 15px 15px 3px;font-size:14px;font-weight:750;line-height:1.35}
.perch-bubble::after{content:"";position:absolute;width:8px;height:8px;background:#fff9e8;left:11px;bottom:-6px;border-right:2px solid var(--perch-ink);border-bottom:2px solid var(--perch-ink);transform:rotate(45deg)}
.perch-hint{display:block;margin:12px 0 0 7px;font-size:11px;font-weight:650;line-height:1.5}
.canary-perch:not([data-perch-ready=true]) .perch-hint{visibility:hidden}
.canary-perch:focus-within .perch-hint{text-decoration:underline;text-underline-offset:3px}
.perch-scene{position:relative;height:224px;max-width:370px}
.perch-travel{position:absolute;z-index:2;bottom:-15px;left:0;width:228px;height:228px;transform:translate(var(--perch-x,0px),var(--perch-y,0px));will-change:auto}
.perch-bird{display:block;width:100%;height:100%;padding:0;border:0;background:none;transform-origin:52% 86%;transition:transform .25s ease}
.perch-bird:disabled{cursor:default;opacity:1}
.perch-bird:enabled:active{transform:translateY(3px) rotate(2deg)}
.perch-bird>svg{width:100%;height:100%;overflow:visible}
.perch-bird[data-perch-action]:focus-visible{outline:3px dashed var(--perch-ink);outline-offset:-12px;border-radius:45%}
.perch-listen .perch-bird[data-perch-action]:focus-visible{outline-color:var(--mint)}
.perch-ground{position:absolute;bottom:9px;left:8px;width:231px;height:20px;border-radius:50%;background:var(--perch-ground);transform:rotate(-3deg);z-index:0}
.perch-trail{position:absolute;bottom:14px;left:26px;right:30px;height:26px;z-index:0;opacity:.55}
.perch-trail i{position:absolute;left:0;top:0;width:7px;height:5px;box-shadow:3px 7px 0 currentColor;background:currentColor;transform:rotate(-25deg);color:var(--mint-dark)}
.perch-trail i:nth-child(2){left:28px;top:4px}.perch-trail i:nth-child(3){left:58px;top:8px}
.perch-book{position:absolute;z-index:3;bottom:17px;left:184px;width:71px;height:53px;border:2px solid #236b63;border-radius:3px 8px 8px 3px;background:#fff9e8;box-shadow:3px 4px 0 #276c63;transform:rotate(-9deg);pointer-events:none}
.perch-book span{position:absolute;inset:-2px -2px 4px -2px;display:grid;place-items:center;background:#5a9786;border:2px solid #236b63;border-radius:3px 8px 8px 3px;color:white;font-size:17px;font-weight:800;transform-origin:left center;transition:transform .35s}
.perch-book i{position:absolute;left:9px;bottom:0;width:7px;height:17px;background:var(--coral)}
.perch-bonus{position:absolute;z-index:3;bottom:71px;left:243px;font-size:24px;font-weight:800;color:var(--mint-dark);transform:rotate(8deg);opacity:0}
.perch-docs[data-perch-mood=proud] .perch-bonus{opacity:1}
.perch-docs[data-perch-mood=proud] .perch-book span{transform:perspective(250px) rotateY(-37deg)}
.perch-listen{--perch-ink:#30243f;--perch-ground:#20152d;max-width:100%;margin:0 0 -7px}
.perch-listen .perch-copy{left:0;right:auto;top:39px;width:175px;transform:rotate(-3deg)}
.perch-listen .perch-hint{color:var(--mint)}
.perch-listen .perch-scene{max-width:none;height:171px}
.perch-listen .perch-travel{left:auto;right:3%;width:200px;height:200px;bottom:-22px;z-index:3}
.perch-listen .perch-ground{left:auto;right:0;bottom:3px;width:210px;background:#a8d4c3;height:12px;transform:none}
.perch-listen .perch-trail{display:none}
.perch-notes{position:absolute;right:8px;top:26px;color:#e3c4ff;font-size:30px;font-weight:800;pointer-events:none}
.perch-notes i{position:absolute;right:0;top:14px;opacity:0;font-style:normal}
.perch-notes i:nth-child(2){right:43px;top:-15px;font-size:22px}.perch-notes i:nth-child(3){right:172px;top:30px;font-size:24px}
.perch-listen[data-perch-mood=listening] .perch-notes i{opacity:1}
.listening-scene:has(.perch-listen){padding-top:0;transform:none}
.listening-scene:has(.perch-listen) .listening-caption{text-align:left;margin:18px 0 17px;color:#d4c6e5}
.perch-code{--perch-ground:#ded3f0;margin-top:13px;max-width:390px}
.perch-code .perch-scene{height:218px}
.perch-code .perch-copy{top:11px}
.perch-code .perch-trail i{color:#b3a1d7}
.perch-code .perch-travel{left:4px}
.perch-pixels{position:absolute;z-index:3;left:214px;bottom:5px;width:90px;height:85px;color:var(--violet-dark);pointer-events:none}
.perch-pixels i{position:absolute;bottom:0;left:0;width:23px;height:23px;background:var(--coral);box-shadow:inset -4px -4px 0 #c86455;border:2px solid #30243f22}
.perch-pixels i:nth-child(2){left:25px;background:#9474df;box-shadow:inset -4px -4px 0 #7152ae}.perch-pixels i:nth-child(3){left:25px;bottom:25px;background:#b69ae9;box-shadow:inset -4px -4px 0 #9474cb}.perch-pixels i:nth-child(4){left:50px;background:#d5b2e1;box-shadow:inset -4px -4px 0 #b484c4}
.perch-pixels>span{position:absolute;left:57px;top:-3px;font:800 18px/1 monospace;transform:rotate(10deg)}
.perch-secret{--perch-ink:#57382f;--perch-ground:#d88d75;margin-top:23px;max-width:385px}
.perch-secret .perch-copy{top:12px;right:0;width:135px;transform:rotate(5deg)}
.perch-secret .perch-scene{height:192px;overflow:hidden}
.perch-secret .perch-travel{left:6px;width:245px;height:245px;bottom:-42px;transform:none}
.perch-secret .perch-ground,.perch-secret .perch-trail{display:none}
.perch-wall{position:absolute;z-index:3;left:0;right:0;bottom:0;height:48px;border-top:3px solid #ba735e;background:#f3b59e;pointer-events:none}
.perch-wall span{position:absolute;left:13px;top:14px;letter-spacing:.15em;font-size:10px;font-weight:800;color:#764435}
.perch-wall i{position:absolute;right:6px;top:10px;width:20px;height:20px;background:#c7826c;box-shadow:inset -4px -4px 0 #b16d58}.perch-wall i:nth-child(3){right:31px}.perch-wall i:nth-child(4){right:56px;background:#e49b81}
.perch-question{position:absolute;z-index:1;left:10px;top:3px;color:#ae6652;font-size:33px;font-weight:850;transform:rotate(-17deg)}
.identity-signature{margin-top:15px}
.canary-perch[data-perch-visible=false] *{animation-play-state:paused!important}
.canary-perch.is-suspended *{animation-play-state:paused!important}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.perch-bird:enabled:hover{transform:translateY(-5px) rotate(-3deg)}}
@media(prefers-reduced-motion:no-preference){
  .canary-perch.is-arriving .perch-bird{animation:perch-waddle 1.15s ease-out both}
  .canary-perch.is-arriving .perch-copy{animation:perch-bubble-in .65s ease-out .2s both}
  .canary-perch.is-arriving .perch-trail i{animation:perch-footstep .8s ease-out both}.canary-perch.is-arriving .perch-trail i:nth-child(2){animation-delay:.18s}.canary-perch.is-arriving .perch-trail i:nth-child(3){animation-delay:.36s}
  .canary-perch.is-reacting .perch-bird{animation:perch-proud .65s ease-out both}
  .perch-secret.is-reacting .perch-bird>svg{animation:perch-proud .65s ease-out both}
  .perch-docs.is-reacting .perch-bonus{animation:perch-two .9s ease-out both}
  .perch-code.is-reacting .perch-pixels i:nth-child(3){animation:perch-place .75s ease-out both}
  .perch-listen[data-perch-mood=listening] .perch-bird{animation:perch-listen 2.2s ease-in-out infinite}
  .perch-listen[data-perch-mood=listening] .perch-notes i{animation:perch-note 2.4s ease-in-out infinite}.perch-listen[data-perch-mood=listening] .perch-notes i:nth-child(2){animation-delay:.7s}.perch-listen[data-perch-mood=listening] .perch-notes i:nth-child(3){animation-delay:1.3s}
  @keyframes perch-waddle{0%{transform:translate(-34px,0) rotate(-7deg)}22%{transform:translate(-25px,-7px) rotate(5deg)}44%{transform:translate(-15px,0) rotate(-5deg)}66%{transform:translate(-6px,-5px) rotate(3deg)}85%{transform:translate(0,1px) rotate(-1deg)}100%{transform:none}}
  @keyframes perch-bubble-in{from{opacity:.35;translate:0 8px}to{opacity:1;translate:0 0}}
  @keyframes perch-footstep{0%,25%{opacity:0}55%,100%{opacity:.65}}
  @keyframes perch-proud{0%,100%{transform:none}36%{transform:translateY(-9px) rotate(-4deg)}70%{transform:translateY(1px) rotate(2deg)}}
  @keyframes perch-two{0%{transform:translateY(6px) rotate(8deg);opacity:0}30%,75%{transform:translateY(-6px) rotate(8deg);opacity:1}100%{transform:rotate(8deg);opacity:1}}
  @keyframes perch-place{0%{transform:translate(0,-23px) rotate(-16deg)}60%{transform:translate(0,2px) rotate(2deg)}100%{transform:none}}
  @keyframes perch-listen{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-3px)}}
  @keyframes perch-note{0%,100%{opacity:0;transform:translateY(9px) rotate(-9deg)}28%,65%{opacity:1}85%{opacity:0;transform:translateY(-17px) rotate(7deg)}}
}
@media(max-width:1050px) and (min-width:681px){.perch-copy{width:138px;right:-5px;top:0}.perch-bubble{font-size:12px;padding:9px 10px}.perch-docs .perch-scene{height:225px}.perch-travel{width:207px;height:207px}.perch-book{left:169px}.perch-bonus{left:231px}.perch-listen .perch-copy{width:145px;top:10px}.perch-code .perch-pixels{left:177px}.perch-secret .perch-copy{right:0}}
@media(max-width:680px){
  .canary-perch{max-width:390px;margin-inline:auto;width:100%}
  .perch-docs{margin-top:17px;margin-bottom:-8px}
  .perch-docs .perch-scene{height:214px}
  .perch-copy{right:3px;top:16px;width:153px}
  .perch-travel{width:222px;height:222px;left:0}
  .perch-listen{margin-top:-9px;max-width:none}
  .perch-listen .perch-scene{height:177px}.perch-listen .perch-copy{top:16px;width:155px}
  .perch-listen .perch-travel{right:-3px;width:192px;height:192px;bottom:-13px}
  .perch-code{margin-top:19px}.perch-code .perch-scene{height:206px}
  .perch-secret{margin-top:27px;margin-left:0;max-width:390px}.perch-secret .perch-copy{right:5px;top:13px}
  .identity-signature{margin-top:16px}
}
@media(max-width:365px){.perch-copy{width:127px;right:0}.perch-bubble{font-size:12px;padding:10px 11px}.perch-hint{font-size:10px}.perch-listen .perch-copy{width:131px}.perch-listen .perch-travel{width:178px;height:178px;right:-5px;bottom:-7px}.perch-secret .perch-copy{width:117px;right:0}.perch-pixels{left:202px}.perch-book{left:178px}}
/* The identity column stays split at tablet widths. Reserve room above its face. */
@container (max-width:300px){
  .perch-secret .perch-copy{position:relative;top:auto;right:auto;width:155px;height:auto;margin-left:auto}
  .perch-secret .perch-scene{margin-top:-15px}
}
@media(prefers-reduced-motion:reduce){.perch-travel{transform:none!important;transition:none!important}.perch-bird{transform:none!important}.canary-perch *{animation:none!important;transition:none!important}.perch-notes i{display:none}}

/* Animate the illustration, never the repeated-click target or its invitation. */
.canary-perch.perch-secret .perch-bird{transform:none;animation:none}
.canary-perch.perch-secret .perch-copy{animation:none}
.perch-secret .perch-bubble{display:block;min-height:calc(2.7em + 26px)}

/* The invitation itself is an action, and every tap uncovers a sourced clue. */
.perch-copy .investigate-button{pointer-events:auto;min-height:44px;margin-top:11px;margin-left:0;padding:8px 9px;border:1px solid #8d5641;border-radius:9px;background:#fff0df;color:#57382f;text-align:left;font-size:11px;line-height:1.35;font-weight:750;box-shadow:0 2px 0 #ba735e}
.investigate-button:hover{background:#fff8ed}
.investigate-button:active{translate:0 2px;box-shadow:none}
.investigate-button:focus-visible,.clue-next:focus-visible{outline:3px solid #57382f;outline-offset:4px}
.perch-secret .perch-copy{width:145px}
.investigation{margin-top:25px;min-width:0}
.investigation-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.investigation-heading h3{font-size:19px;letter-spacing:-.45px;line-height:1.3}
.clue-count{flex:none;font-size:12px;font-weight:800;letter-spacing:.1em;color:#714635;font-variant-numeric:tabular-nums}
.identity-clues{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.identity-clue{display:grid;grid-template-columns:75px minmax(0,1fr);gap:20px;padding:22px;background:#fff5e9;box-shadow:0 4px 0 #ca866f;border:1px solid #d3947a;border-radius:14px;scroll-margin-block:24px}
.clue-copy{min-width:0}
.clue-number{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#925b45;margin-bottom:9px}
.clue-copy h4{font-size:19px;line-height:1.16;letter-spacing:-.4px;margin:0 0 10px}
.clue-copy p{font-size:14px;line-height:1.65;color:#78503f;margin:0}
.clue-copy a{display:inline-block;font-size:12px;font-weight:750;line-height:1.5;text-decoration:underline;text-underline-offset:3px;margin-top:13px}
.clue-art{position:relative;margin:15px auto 0;flex:none;align-self:start;color:#57382f}
.clue-phone{width:49px;height:88px;border:4px solid #57382f;border-radius:9px;background:#e5d6fb;box-shadow:5px 5px 0 #d3b5ce;transform:rotate(-9deg)}
.clue-phone i{position:absolute;top:5px;left:11px;right:11px;height:3px;border-radius:3px;background:#8b699a}
.clue-phone b{position:absolute;left:10px;top:25px;font-size:28px;line-height:1;font-weight:800}
.clue-phone>span{position:absolute;right:-15px;top:19px;font-size:16px;font-weight:800}
.clue-browser{width:74px;height:62px;border:3px solid #57382f;border-radius:6px;background:#ffe49b;box-shadow:5px 5px 0 #d5a459;transform:rotate(6deg)}
.clue-browser::before{content:"";position:absolute;inset:11px 0 auto;height:2px;background:#57382f}
.clue-browser i{position:absolute;left:5px;top:4px;width:3px;height:3px;background:#57382f}.clue-browser i:nth-child(2){left:11px}.clue-browser i:nth-child(3){left:17px}
.clue-browser b{position:absolute;left:6px;top:23px;font-size:12px;letter-spacing:-.4px}.clue-browser>span{position:absolute;right:5px;bottom:3px;font-weight:800;font-size:17px}
.clue-mystery{width:70px;height:83px;border:2px dashed #ae755f;border-radius:8px;transform:rotate(-5deg);background:#f1d1c4;text-align:center}
.clue-mystery b{font-size:45px;font-weight:800;display:block;line-height:1.3}.clue-mystery span{display:block;font-size:7px;font-weight:800;letter-spacing:.08em}
.clue-envelope{position:relative;border:2px dashed #b87d64;border-radius:15px;background:#edb59f;padding:24px 24px 22px;display:grid;grid-template-columns:64px 1fr;gap:17px 22px;align-items:center;scroll-margin-block:24px}
.clue-seal{display:grid;place-items:center;width:61px;height:66px;border:2px solid #8d5641;border-radius:7px;background:#ffdf8b;font-size:42px;line-height:1;font-weight:850;transform:rotate(-9deg);box-shadow:4px 4px 0 #cb8f57}
.clue-envelope p{font-size:21px;font-weight:750;line-height:1.2;letter-spacing:-.5px}
.clue-envelope .clue-next{grid-column:1/-1;justify-self:start}
.clue-next{min-height:44px;padding:10px 15px;border:0;border-radius:9px;background:#57382f;color:#fff5e9;font-size:12px;font-weight:750;line-height:1.4;cursor:pointer;box-shadow:0 3px 0 #3b251e;transition:background .2s}
.clue-next:hover{background:#704d40}.clue-next:active{translate:0 2px;box-shadow:0 1px 0 #3b251e}
.clue-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:21px}
.clue-progress{display:flex;gap:6px;padding-left:3px}
.clue-progress i{width:10px;height:10px;background:#d69478;border:1px solid #a46d54;transition:background .2s;transform:rotate(-6deg)}
.clue-progress i.is-found{background:#ffe49b;box-shadow:0 2px 0 #ab714d}
@media(prefers-reduced-motion:no-preference){.identity-clue.is-new{animation:clue-uncover .36s ease-out both}@keyframes clue-uncover{from{opacity:.15;transform:translateY(12px) rotate(-1deg)}to{opacity:1;transform:none}}}
@media(max-width:1000px){.identity-clue{grid-template-columns:59px minmax(0,1fr);gap:15px;padding:18px 16px}.clue-art{scale:.85;transform-origin:top center}.clue-copy h4{font-size:17px}.clue-copy p{font-size:13px}.clue-envelope{padding:20px;grid-template-columns:54px 1fr;gap:18px}.clue-envelope p{font-size:19px}.clue-seal{width:51px;height:57px}}
@media(max-width:540px){.identity-clue{grid-template-columns:61px minmax(0,1fr);gap:15px;padding:21px 17px}.clue-copy h4{font-size:18px}.clue-copy p{font-size:14px}.clue-number{font-size:9px;letter-spacing:.035em}.clue-copy a{font-size:12px}.investigation-heading h3{font-size:19px}.perch-secret .perch-copy{width:145px}.clue-envelope{padding:23px 20px}}
@media(max-width:365px){.identity-clue{grid-template-columns:48px minmax(0,1fr);gap:15px;padding:20px 14px}.clue-art{scale:.7;transform-origin:top left;margin-left:0}.clue-copy h4{font-size:17px}.clue-copy p{font-size:13px}.clue-copy a{font-size:11px}.perch-secret .perch-copy{width:127px}}