:root{font-family:ui-rounded,'SF Pro Rounded',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#F7F3EB;color:#343a40;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid #1689ba;outline-offset:5px}button{font:inherit;color:inherit;cursor:pointer}header,main,footer{max-width:1300px;margin:auto}header{padding:15px 6% 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px}.brand{width:110px;height:auto;opacity:.83}.support{font-size:14px;justify-self:end}img{display:block;max-width:100%}.intro{padding:40px 6% 60px;text-align:center}h1{font-size:clamp(48px,6.2vw,80px);line-height:1.06;letter-spacing:-.055em;margin:0 0 23px;font-weight:700}h1 span{color:#7b956b}.copy>p{font-size:19px;line-height:1.55;margin:0 0 27px}.button{display:inline-flex;align-items:center;gap:38px;padding:17px 24px;background:#343a40;color:#fff;border-radius:40px;font-size:17px;font-weight:600;transition:transform .2s}.button:hover{transform:translateY(-2px)}.button span{font-size:23px;font-weight:400}.copy .note{font-size:11px;opacity:.65;margin:13px 0 0}.drawing{width:190px;min-width:0}.canvas-wrap{position:relative;aspect-ratio:1;mix-blend-mode:multiply;transform:rotate(3deg)}.canvas-wrap img,.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%}.canvas-wrap canvas{opacity:0}.canvas-wrap.playing canvas{opacity:1}.canvas-wrap.playing img{opacity:0}.drawing-controls{display:flex;justify-content:center;align-items:center;gap:15px;white-space:nowrap}.drawing-controls button{min-height:44px;min-width:44px;background:transparent;border:0;padding:5px 0;border-bottom:1px solid #343a402e;font-size:10px}.drawing-controls button:disabled{opacity:.4;cursor:wait}.peek{padding:0 6% 65px}.screens{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.screens figure{margin:0;border-radius:23px;padding:26px 26px 20px;overflow:hidden;display:flex;flex-direction:column;gap:18px}.screens figure.listen{background:#b8d2d7}.screens figure.sketch{background:#ebcb82}.screens figure.flock{background:#bac6a5}.screens img{width:100%;height:auto;border-radius:29px;box-shadow:0 5px 18px #343a4014}.screens figcaption{text-align:center;font-size:13px;font-weight:600}footer{padding:28px 6%;border-top:1px solid #343a4022;display:flex;align-items:center;flex-wrap:wrap;gap:25px;font-size:12px}footer nav{display:flex;gap:24px}footer small{width:100%;font-size:10px;opacity:.6}@media(max-width:760px){header{padding:10px 6% 0;gap:8px}.brand{width:73px}.support{font-size:11px;max-width:62px;text-align:right;line-height:1.5}.drawing{width:135px}.drawing-controls{gap:10px}.drawing-controls button{font-size:9px}.intro{padding:35px 6% 40px}h1{font-size:55px;max-width:360px;margin:0 auto 24px}.copy>p{font-size:17px}.peek{padding:0 0 40px}.screens{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:6%;padding:0 6% 16px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.screens figure{flex:0 0 77%;scroll-snap-align:center;padding:22px 22px 18px;border-radius:22px;gap:16px}.screens img{border-radius:26px}.screens figcaption{font-size:12px}footer{gap:20px}footer nav{gap:20px}}@media(prefers-reduced-motion:reduce){.button{transition:none}}

.screens:focus-visible{outline:3px solid #1689ba;outline-offset:4px}
/* Keep the drawing and title together as the hero changes shape. */
header{display:flex;justify-content:space-between;padding:25px 6% 0}.intro{display:grid;grid-template-columns:.95fr 1.05fr;grid-template-areas:"title drawing" "copy drawing";column-gap:25px;row-gap:24px;padding:42px 6% 65px;text-align:left;align-items:start}.intro h1{grid-area:title;align-self:end;font-size:clamp(62px,7vw,88px);max-width:420px;line-height:1.02;margin:0}.intro h1 span{display:block}.copy{grid-area:copy;align-self:start}.copy>p{margin-bottom:27px}.drawing{grid-area:drawing;align-self:center;width:100%;max-width:565px;justify-self:center}.drawing-controls{gap:25px}.drawing-controls button{font-size:12px}.canvas-wrap{transform:rotate(3deg)}
@media(min-width:701px) and (max-width:1000px){.intro{padding-top:35px;column-gap:10px;row-gap:22px}.intro h1{font-size:64px}.copy>p{font-size:16px}.drawing-controls{gap:20px}.drawing-controls button{font-size:11px}}
@media(max-width:700px){header{padding:18px 6% 0}.brand{width:85px}.support{font-size:12px;max-width:none}.intro{grid-template-columns:1fr;grid-template-areas:"title" "drawing" "copy";gap:0;padding:27px 6% 42px;text-align:center}.intro h1{font-size:clamp(44px,11.5vw,58px);line-height:1.01;max-width:360px;justify-self:center;margin:0}.drawing{width:min(100%,290px);margin:0 auto 14px}.canvas-wrap{margin:0}.drawing-controls{gap:24px;margin-top:-5px}.drawing-controls button{font-size:11px}.copy>p{font-size:16px;margin-bottom:20px}.button{padding:15px 23px;font-size:16px}.copy .note{font-size:11px;margin-top:11px}}
.support{display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;min-height:44px}.button{gap:0;min-height:52px}.screens figure{padding:0!important;border-radius:0;background:transparent!important;overflow:visible;gap:16px}.screen-frame{padding:26px;border-radius:60px;overflow:hidden}.listen .screen-frame{background:#b8d2d7}.sketch .screen-frame{background:#ebcb82}.flock .screen-frame{background:#bac6a5}.screens img{border-radius:14.09% / 6.49%;box-shadow:none}.screens figcaption{padding:0 8px}.screens:focus-visible{outline-offset:-3px}@media(max-width:760px){.screen-frame{padding:22px}}
.intro h1{word-spacing:.12em}
@media(max-width:700px){.intro{grid-template-areas:"drawing" "title" "copy"}.intro h1{margin-bottom:20px}}
.drawing-controls{gap:8px}.bird-pages{display:flex;align-items:center}.drawing-controls .bird-dot{width:44px;height:44px;min-width:44px;padding:0;border:0;display:grid;place-items:center}.bird-dot span{width:6px;height:6px;border-radius:50%;background:#343a4045;transition:background .2s,transform .2s}.bird-dot[aria-current="true"] span{background:#343a40;transform:scale(1.3)}.drawing-controls #pause{width:44px;border:0;font-size:17px}.drawing-controls #pause[hidden]{display:none}@media(prefers-reduced-motion:reduce){.bird-dot span{transition:none}}
.brand{width:94px}.button{gap:8px}@media(max-width:700px){.brand{width:72px}}
.screen-frame{padding:18px}.screens figcaption{font-size:15px;color:#676c6f;font-weight:400}.drawing-controls .bird-dot.complete span{width:20px;height:20px;border-radius:0;background:transparent;display:grid;place-items:center;font-size:21px;line-height:1;transform:none}@media(max-width:760px){.screen-frame{padding:16px}.screens figcaption{font-size:14px}}
.intro h1{color:#676c6f}.intro h1 span{color:#343a40}.button{background:#859F76;color:#26342b}.button:hover{background:#7c966d}
/* Compact pagination, with a larger completed-sketch replay target. */
.drawing-controls .bird-dot{width:32px;min-width:32px;height:44px}.bird-dot span{display:grid;place-items:center;color:transparent;transition:width .22s cubic-bezier(.2,.8,.2,1.15),height .22s cubic-bezier(.2,.8,.2,1.15),background-color .2s,color .15s,transform .22s}.drawing-controls .bird-dot.complete span{width:28px;height:28px;background:#343a40;border-radius:50%;color:#fff;font-size:20px;line-height:1;transform:none}@media(prefers-reduced-motion:reduce){.bird-dot span{transition:none}}
.drawing-controls{gap:7px}.drawing-controls .bird-dot{width:22px;min-width:22px}.bird-dot span{width:8px;height:8px}.drawing-controls .bird-arrow{width:44px;height:44px;min-width:44px;border:0;padding:0;display:grid;place-items:center}.bird-arrow span{display:grid;place-items:center;width:32px;height:32px;background:#343a4014;border-radius:50%;font-size:19px;color:#343a40}.bird-arrow:hover span{background:#343a4023}.button{color:#fff}.screen-frame{padding:14px}@media(max-width:760px){.screen-frame{padding:12px}}

/* Three paper cards; navigation stays outside the deck. */
.sketch-deck{position:relative;isolation:isolate;margin:20px 26px 25px;aspect-ratio:1}
.canvas-wrap,.rear-card{position:absolute;inset:0;background:#fff;border-radius:24px;box-shadow:0 8px 24px #343a4016,0 1px 3px #343a400d;overflow:hidden}
.canvas-wrap{mix-blend-mode:normal;transform:none;z-index:3}
.rear-card img{width:100%;height:100%;object-fit:contain}
.rear-near{z-index:2;transform:translate(11px,-3px) rotate(5deg)}
.rear-far{z-index:1;transform:translate(-10px,-7px) rotate(-6deg)}
.drawing-controls{position:relative;margin-top:0}
.button{background:#5F7F4E;color:#fff}.button:hover{background:#547243}
@media(max-width:700px){.sketch-deck{margin:15px 16px 18px}.canvas-wrap,.rear-card{border-radius:19px}.drawing{width:min(100%,290px)}}

body{overflow-x:clip}
/* Pin each indicator to its fixed button center as the replay circle grows. */
.drawing-controls .bird-dot{position:relative;flex:0 0 22px}
.bird-dot span{position:absolute;left:50%;top:50%;translate:-50% -50%;transform-origin:center}
.drawing-controls .bird-dot.complete span{width:22px;height:22px;font-size:15px}
.sketch-deck{touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}.sketch-deck:active{cursor:grabbing}.sketch-deck img{-webkit-user-drag:none;pointer-events:none}

/* Rear artwork stays quiet while its white paper remains fully opaque. */
.rear-card img{opacity:.15}

/* Fixed-size circles scale around an invariant center, including first paint. */
.drawing-controls .bird-dot span{width:22px;height:22px;translate:none;transform:translate(-50%,-50%) scale(.363636);font-size:15px;transition:transform .22s cubic-bezier(.2,.8,.2,1.15),background-color .2s,color .15s}
.drawing-controls .bird-dot[aria-current="true"] span{transform:translate(-50%,-50%) scale(.472727)}
.drawing-controls .bird-dot.complete span{transform:translate(-50%,-50%) scale(1)}
.download{display:inline-flex;flex-direction:column;align-items:center}.copy .download .note{font-size:12px;text-align:center}
@media(prefers-reduced-motion:reduce){.drawing-controls .bird-dot span{transition:none}}

.about{max-width:820px;margin:0 auto;padding:0 6% 62px;font-size:26px;line-height:1.45;color:#676c6f}.about p{margin:0 0 22px}.about p:last-child{margin-bottom:0}@media(max-width:700px){.about{font-size:22px;padding-bottom:42px;line-height:1.45}}

.inline-wordmark{display:inline-block;height:1.05em;width:auto;vertical-align:-.13em;opacity:.72}

.inline-wordmark{opacity:1}
.screens{gap:30px}.screen-frame{padding:10px}@media(max-width:760px){.screens{gap:21px}.screen-frame{padding:9px}}

.inline-brand{position:relative;display:inline-block;width:2.264em;height:1.05em;vertical-align:-.13em;color:transparent;white-space:nowrap}.inline-brand .inline-wordmark{position:absolute;inset:0;width:100%;height:100%;vertical-align:baseline;pointer-events:none;user-select:none;-webkit-user-select:none}

.species-label{position:absolute;bottom:16px;left:18px;right:18px;z-index:1;font-size:13px;line-height:1.3;color:#93979a;pointer-events:none}.rear-card .species-label{opacity:.5}@media(max-width:700px){.species-label{font-size:12px;bottom:13px;left:16px;right:16px}}
.about{padding-top:24px;padding-bottom:86px}@media(max-width:700px){.about{padding-top:16px;padding-bottom:58px}}
.species-label{text-align:left}

.word-wave{display:inline-block;white-space:nowrap;font-style:italic}.word-wave>span{display:inline-block}

.canvas-wrap{transform:rotate(var(--card-angle,-2deg))}.rear-near{transform:translate(11px,-3px) rotate(6.5deg)}.rear-far{transform:translate(-10px,-7px) rotate(-7deg)}

.bird-arrow span{width:28px;height:28px}.drawing-controls .bird-dot span{transform:translate(-50%,-50%) scale(.454545)}.drawing-controls .bird-dot[aria-current="true"] span{transform:translate(-50%,-50%) scale(.545455)}.drawing-controls .bird-dot.complete span{transform:translate(-50%,-50%) scale(1)}
.button{background:#E29A3B}.button:hover{background:#d99132}

.word-wave>span{will-change:transform;backface-visibility:hidden}@media(prefers-reduced-motion:reduce){.word-wave>span{will-change:auto}}

.inline-app-link{color:#343a40;white-space:nowrap}.word-wave{color:#93979a}
@media(min-width:701px){.about{padding-top:48px;padding-bottom:110px}}
.brand{width:84px}@media(max-width:700px){.brand{width:64px}}
header{padding-inline:min(6vw,78px)}
@media(max-width:700px){.drawing{padding-block:16px}}
.about,.copy>p{font-weight:500}

.screens{gap:38px}.screenshot-controls{display:none}@media(max-width:760px){.screens{gap:28px;scrollbar-width:none}.screens::-webkit-scrollbar{display:none}.screenshot-controls{display:flex;gap:0;margin-top:6px}}
.button{font-weight:700}.copy .download .note{font-weight:500}@media(max-width:700px){.drawing{padding-block:24px}.copy>p{margin-bottom:26px}}
.screens figcaption{font-weight:500}
.species-label{color:#b0b3b5}
.button{background:#E8892F}.button:hover{background:#dc7e25}
/* Warm supporting tones echo Gull without competing with the orange accent. */
:root{--text-secondary:#746A60;--text-tertiary:#A19587;--text-quaternary:#B9B0A5}
.about,.screens figcaption,.intro h1{color:var(--text-secondary)}.intro h1 span{color:#343a40}
.word-wave{color:var(--text-tertiary)}.species-label{color:var(--text-quaternary)}
.copy .download .note,footer small{color:var(--text-secondary)}
.bird-dot span{background:#95867666}.bird-arrow span{background:#746a6014}.bird-arrow:hover span{background:#746a6023}
/* Consistent supporting links and a little more breathing room at the CTA. */
.support,footer,footer small{font-size:14px}footer nav a{display:inline-flex;align-items:center;min-height:44px}footer small{font-size:14px}
.intro{row-gap:32px}
.species-label{top:16px;bottom:auto;text-align:center}
@media(max-width:700px){.intro{row-gap:0}.intro h1{margin-bottom:28px}.species-label{top:13px;bottom:auto;text-align:center}}
.intro{row-gap:48px}@media(max-width:700px){.intro{row-gap:0}.intro h1{margin-bottom:44px}}
.species-label,.rear-card .species-label{opacity:1}

/* Original little birds perched on selectable words, with room reserved for every wrap. */
.perched-word{position:relative;display:inline-block;padding-top:1.4em;white-space:nowrap}
.perched-bird{position:absolute;top:.16em;left:50%;width:1.6em;height:auto;max-width:none;transform:translateX(-50%);pointer-events:none;user-select:none;-webkit-user-select:none}
.perched-bird.hopping{animation:perch-hop 9s ease-in-out infinite;transform-origin:50% 100%}
@keyframes perch-hop{0%,83%,100%{transform:translateX(-50%) translateY(0)}88%{transform:translateX(-50%) translateY(-5px)}93%{transform:translateX(-50%) translateY(0)}}
@media(prefers-reduced-motion:reduce){.perched-bird.hopping{animation:none}}
.perched-bird{animation:perch-stroll 11s ease-in-out infinite;transform-origin:50% 100%}.perched-bird[src*="long-neck"]{animation-duration:13s;animation-delay:-5s}.perched-bird.hopping{animation-name:perch-stroll;animation-duration:9s;animation-delay:-2s}
@keyframes perch-stroll{0%,15%,75%,100%{transform:translateX(calc(-50% - var(--perch-travel,0px))) translateY(0)}25%{transform:translateX(-50%) translateY(-4px)}35%,55%{transform:translateX(calc(-50% + var(--perch-travel,0px))) translateY(0)}65%{transform:translateX(-50%) translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.perched-bird,.perched-bird.hopping{animation:none;transform:translateX(-50%)}}

/* Stable link hit areas: hover color changes without moving the CTA under the pointer. */
a[href],a[href] *{cursor:pointer}.button{transition:background-color .2s}.button:hover{transform:none}.button>span{pointer-events:none}
footer nav{gap:8px;align-items:center}.footer-separator{color:var(--text-quaternary);pointer-events:none}.support{color:var(--text-secondary)}
.species-label{top:22px;font-weight:500}@media(max-width:700px){.species-label{top:19px}}

.perched-bird,.perched-bird.hopping{top:calc(.28em + 3px);animation:none;will-change:transform}@media(prefers-reduced-motion:reduce){.perched-bird{will-change:auto}}

/* Birds perch on the warm footer boundary; copy remains ordinary inline text. */
footer{max-width:none;border:0;background:#EEE7DC;padding:0;margin-top:58px;display:block}
.footer-inner{position:relative;max-width:1300px;margin:auto;padding:28px min(6vw,78px) calc(28px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* Keep 44px link targets around 20px text rows without adding visible row spacing. */
.footer-inner nav a{line-height:20px;margin-block:-12px}.footer-inner small{line-height:20px}
.footer-perches{position:absolute;inset:0 min(6vw,78px) auto;display:flex;justify-content:space-around;pointer-events:none}
.perch-lane{position:relative;width:100px;height:0}
.footer-perches .perched-bird{top:auto;bottom:-3px;width:42px}
@media(max-width:760px){footer{margin-top:52px}.perch-lane{width:76px}.footer-perches .perched-bird{width:36px}.footer-inner{padding-block:24px calc(24px + env(safe-area-inset-bottom,0px))}}

.footer-perches{left:0;right:0;display:block}.footer-perches .perch-lane{position:absolute;left:0;width:100%;height:0}.footer-perches .perched-bird{left:0;transform:none}

.footer-perches button.perched-bird{pointer-events:auto;cursor:pointer;width:44px;height:44px;padding:0;border:0;background:transparent;display:flex;align-items:flex-end;justify-content:center;border-radius:6px}.footer-perches button.perched-bird img{width:42px;max-width:none;pointer-events:none}@media(max-width:760px){.footer-perches button.perched-bird img{width:36px}}

/* Keep transformed cards inside the hero's viewport-wide stage. Root clipping alone
   can still contribute their overflow to Safari's visual viewport while dragging. */
.intro{overflow:hidden}
@supports(overflow:clip){.intro{overflow:clip}html{overflow-x:clip}}
.sketch-deck{touch-action:pan-y pinch-zoom}

/* Consistent tracking for small supporting text, including navigation links. */
.copy .download .note,.species-label,.support,.screens figcaption,footer nav,footer small{letter-spacing:.02em}

/* Keep sketch credits legible over both white paper and colored strokes. */
.species-label,.rear-card .species-label{color:#fff;mix-blend-mode:difference;opacity:.55}