@font-face{font-family:Hand;src:url('assets/fonts/hand.woff2') format('woff2');font-display:swap}
@font-face{font-family:Readable;src:url('assets/fonts/body.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* White paper and fixed source-illustration coordinates. */
:root{--paper:#f5f5f2;--ink:#1b1815;--quiet:#67665f;--silhouette:#1b1815;--change:90s;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0}body{background:var(--paper);color:var(--ink);font-family:Hand,Readable,sans-serif;transition:background-color var(--change) linear,color var(--change) linear;-webkit-font-smoothing:antialiased}body.night{--paper:#354145;--ink:#e9e9df;--quiet:#bbc3be;color-scheme:dark}body.manual-theme{--change:3s}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}::selection{background:#d04336;color:white}
.page{position:relative;isolation:isolate;min-height:850px;height:100svh;overflow:clip}.sky{position:absolute;inset:0;z-index:-4;pointer-events:none}.pale-disc{position:absolute;width:620px;aspect-ratio:1;right:-100px;top:-280px;border-radius:50%;background:#d2d2ce;opacity:.6;transition:background-color var(--change) linear,opacity var(--change) linear}.night .pale-disc{background:#939d94;opacity:.25}.haze{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 40%,#ffffff0d,transparent 65%);animation:air 39s ease-in-out infinite alternate}.sky:after{content:'';position:absolute;inset:0;background:url('assets/grain.png');opacity:.045;pointer-events:none}
header{position:absolute;top:22px;right:4.5%;z-index:10}.controls{display:flex;align-items:center;gap:13px}.languages{display:flex;align-items:center;gap:3px;font-size:24px}.languages button{min-width:43px;min-height:44px;border:0;background:none;padding:0 6px;position:relative}.languages button[aria-pressed=true]:after{content:'';position:absolute;bottom:5px;left:8px;right:7px;height:1px;background:currentColor;transform:rotate(-5deg)}.languages>span{opacity:.45}.small-control{width:40px;height:44px;border:0;background:none;font-size:30px;line-height:1}.pause{font-family:Readable,sans-serif;font-size:17px;opacity:.65}
.note{position:relative;z-index:5;margin-left:8%;width:46%;max-width:590px;padding:93px 0 120px}.note h1{position:relative;font-size:clamp(90px,9vw,132px);line-height:1.1;font-weight:400;letter-spacing:.04em;transform:rotate(-3deg);margin:0 0 4px -7px}.note h1:before{content:'';position:absolute;left:-20px;top:21%;height:65%;width:3px;background:#c9362b;transform:rotate(3deg)}.note h1 span{font-size:24px;letter-spacing:.1em;display:inline-block;margin-left:15px;vertical-align:baseline}.intro{font-size:26px;margin:4px 0 29px;letter-spacing:.05em}.note section{margin-top:25px}.note h2{font-size:24px;font-weight:400;line-height:1.45;margin:0 0 9px;display:inline-block;position:relative}.note h2:after{content:'';position:absolute;left:-3px;right:-10px;bottom:0;border-bottom:1px solid currentColor;opacity:.5;transform:rotate(-1.6deg)}.note p{font-size:22px;line-height:1.65;letter-spacing:.025em;margin:0;overflow-wrap:anywhere}.note .intro{font-size:26px;margin:4px 0 26px}.credits p{margin:0 0 10px}.credits a{display:inline;border-bottom:1px solid #74746a6b;padding-bottom:2px}.credits a:hover,.socials a:hover{opacity:.65}.external{font-family:Readable,sans-serif;font-size:15px;display:inline-block;margin-left:9px;vertical-align:2px}.credits .kletka{margin-top:13px}.kletka small{display:block;font-size:19px;color:var(--quiet);line-height:1.7;transition:color var(--change) linear}.socials{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:29px;font-size:24px;line-height:1.5}.socials a{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid #77776c66}.socials>span{opacity:.4}.note .address{font-size:17px;margin-top:17px;letter-spacing:.13em;color:var(--quiet);transition:color var(--change) linear}
.scene{position:absolute;z-index:-1;right:-4vw;top:-9%;width:min(56vw,740px);aspect-ratio:3/5;pointer-events:none}.scene-base,.scene-parts{position:absolute;inset:0;width:100%;height:100%;display:block}.scene-base{user-select:none}.sign{position:absolute;top:18%;right:calc(4vw - 12px);width:190px;color:#efeee5;font-size:42px;line-height:1.35;letter-spacing:.04em;transform:rotate(-2deg);white-space:nowrap}.sign span{display:block}.sign span+span{font-size:48px;margin-left:calc(100% - 36px);margin-top:8px}.wire{transform-origin:0 0}.wire-top{animation:wire-top 11s ease-in-out infinite alternate}.wire-front{animation:wire-front 13s ease-in-out infinite alternate}.wire-back{animation:wire-back 15s ease-in-out infinite alternate;animation-delay:-7s}#flag{transform-origin:490px 1860px}.lamp .beam{opacity:.06;transition:opacity .08s}.lamp .bulb{opacity:.18;transition:opacity .06s}.lamp .bulb-halo{opacity:0;transition:opacity .08s}.night .lamp .beam{opacity:.48}.night .lamp .bulb{opacity:.65}.night .lamp .bulb-halo{opacity:.25}.lamp.lit .beam{opacity:1}.lamp.lit .bulb{opacity:1}.lamp.lit .bulb-halo{opacity:.9}.lamp.dark .beam,.lamp.dark .bulb,.lamp.dark .bulb-halo{opacity:0}
/* The opaque cat pixels and hill both use RGB 27,24,21. The hill is in front. */
.hill{position:absolute;z-index:4;background:var(--silhouette);width:138%;height:260px;left:-19%;bottom:-165px;border-radius:48% 63% 0 0;transform:rotate(2deg);pointer-events:none}.cat-place{position:absolute;z-index:3;left:56%;bottom:42px;width:140px;height:140px}.cat{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;transform-origin:50% 80%;transition:transform .65s}.cat img{position:absolute;inset:0;width:100%;height:100%;display:block}.cat .gaze{position:absolute;inset:0;transition:transform .7s}.eye{transition:transform 95ms ease-in-out}.eye-left{clip-path:inset(25% 55% 42% 15%);transform-origin:31.5% 43.25%}.eye-right{clip-path:inset(38% 20% 28% 50%);transform-origin:64.25% 55.5%}.cat.blink .eye{transform:rotate(20.5deg) scaleY(.055) rotate(-20.5deg)}.cat.hello{transform:translateY(-5px) rotate(-3deg)}
@keyframes air{from{transform:translateX(-2%)}to{transform:translateX(3%)}}@keyframes wire-top{to{transform:matrix(1,0,0,1.016,0,-11.7)}}@keyframes wire-front{to{transform:matrix(1.004,.002,-.002,1,-.4,-.1)}}@keyframes wire-back{to{transform:matrix(1.006,.001,-.001,1,-2,-.6)}}
.paused *,.scene-idle .scene *,.scene-idle .sky *{animation-play-state:paused!important}.paused .eye,.paused .gaze,.paused .cat{transition:none}.paused .lamp .beam{opacity:.1}.paused.night .lamp .beam{opacity:.35}
html[lang=en] .note{max-width:610px}html[lang=en] .note p{letter-spacing:0}html[lang=en] .credits h2{font-size:24px}
@media(min-width:1600px){.note{margin-left:12%;padding-top:125px}.scene{width:820px}.sign{font-size:46px;width:205px}.sign span+span{font-size:52px;margin-left:calc(100% - 38px)}}
@media(min-width:701px) and (max-width:1050px){.note{margin-left:7%;width:49%;padding-top:105px}.note h1{font-size:94px}.note p{font-size:21px}.note h2{font-size:23px}.note .intro{font-size:25px}.scene{width:560px;top:5%;right:-65px}.sign{right:53px;font-size:28px;width:128px}.sign span+span{font-size:44px;margin-left:calc(100% - 34px)}.cat-place{left:54%;bottom:43px}.socials{gap:10px;font-size:22px}.kletka small{font-size:17px}.pale-disc{width:480px;right:-170px;top:-160px}}
@media(max-width:700px){.page{height:auto;min-height:0}header{top:14px;right:20px}.controls{gap:6px}.languages{font-size:23px}.small-control{font-size:27px;width:36px}.pause{font-size:16px}.note{margin-left:8%;width:86%;padding-top:85px;padding-bottom:530px;max-width:none}.note h1{font-size:91px;margin-left:-4px;letter-spacing:.02em}.note h1:before{left:-13px;width:2px}.note h1 span{font-size:21px;margin-left:10px}.note .intro{font-size:24px;margin-top:1px;margin-bottom:18px}.note h2{font-size:22px;margin-bottom:8px}.note section{margin-top:20px}.note p{font-size:20px;line-height:1.6}.credits .kletka{margin-top:11px}.kletka small{font-size:17px}.external{font-size:13px;margin-left:5px}.socials{margin-top:20px;gap:12px;font-size:23px}.note .address{font-size:15px;margin-top:11px}.scene{width:420px;right:-36px;top:auto;bottom:-105px}.sign{top:17.5%;right:24px;width:115px;font-size:26px}.sign span+span{font-size:43px;margin-left:calc(100% - 33px);margin-top:7px}.hill{height:175px;bottom:-95px;width:160%;left:-30%;border-radius:50% 70% 0 0;transform:rotate(2deg)}.cat-place{width:125px;height:125px;left:27%;bottom:36px}.pale-disc{width:330px;top:510px;right:-125px}.sky{overflow:clip}html[lang=en] .note p{font-size:20px}html[lang=en] .note h2{font-size:22px}html[lang=en] .note h1 span{font-size:21px}}
@media(max-width:360px){.note{margin-left:8%;width:86%}.note h1{font-size:82px}.note p{font-size:19px}.note h2{font-size:21px}.kletka small{font-size:16px}.socials{gap:10px;font-size:21px}.scene{top:auto;right:-36px}.pale-disc{top:535px}.cat-place{left:21%}html[lang=en] .note p{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}body{--change:0s}.haze{display:none}}

/* The card's dipping horizon, and a smaller building with room for its flag. */
.page{min-height:980px}
.note{width:47%;max-width:570px;padding-top:90px;padding-bottom:0}
.social-section{margin-top:30px!important}.socials{margin-top:4px;display:flex;align-items:flex-start;flex-direction:column;gap:0;font-size:23px}
.socials a{border:0;gap:10px;min-height:44px}.socials svg{width:23px;height:23px;flex:none}.socials a span{font-size:18px;color:var(--quiet)}
.other-links nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:20px}.other-links a{min-height:36px;line-height:36px}
.credits{position:absolute;z-index:6;right:2.3%;bottom:172px;width:25%;max-width:330px;color:#eeece3;transform:rotate(-1.1deg)}
.credits h2{font-size:23px;font-weight:400;margin:0 0 13px}.credits p{font-size:20px;line-height:1.55;margin:0 0 13px;overflow-wrap:anywhere}.credits small{font-size:16px;color:#c3c0b7}.credits a{border-color:#eeece366}.credits .kletka{margin-top:19px}
.scene{width:min(45vw,580px);right:0;top:auto;bottom:85px;z-index:1}
.sign{top:17.5%;right:6px;width:31%;font-size:clamp(27px,2.8vw,36px)}.sign span+span{font-size:38px;margin-left:calc(100% - 69px);margin-top:7px}
.hill{left:0;bottom:0;width:100%;height:330px;background:none;border-radius:0;transform:none;fill:var(--silhouette)}
.cat-place{left:55.5%;bottom:112px;width:140px;height:140px;z-index:3}
.cat-speech{position:absolute;left:50%;bottom:105%;width:max-content;max-width:230px;transform:translateX(-50%) rotate(-4deg);font-size:21px;background:var(--paper);color:var(--ink);padding:9px 16px;border:1px solid currentColor;border-radius:48% 43% 46% 38%;opacity:0;transition:opacity .2s;pointer-events:none}
.cat-speech.visible{opacity:1}.cat-speech:after{content:'';position:absolute;bottom:-10px;left:45%;height:11px;border-left:1px solid currentColor;transform:rotate(-20deg)}
.ground-footer{position:absolute;bottom:19px;left:6%;right:6%;z-index:7;color:#dedcd4;display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.copyright{font-size:16px;letter-spacing:.07em;margin:0;order:2}
.radio{width:470px;max-width:100%}.radio-heading{display:flex;align-items:baseline;gap:18px;font-size:21px}.track-name{font-size:16px;color:#bfbdb5}
.player{display:flex;gap:12px;align-items:center;min-height:44px}.player button{border:0;background:none;width:32px;height:44px;padding:0;font-size:30px;flex:none}
.player input{accent-color:#d7d3c5;min-width:0;height:30px;cursor:pointer;background:transparent}
#music-seek{flex:1;width:130px}#music-time{font:12px Readable,sans-serif;white-space:nowrap;color:#bfbdb5}
.volume-label{display:flex;align-items:center;gap:5px}.volume-label svg{width:19px;height:19px}.volume-label input{width:65px}
.music-credit{font:10px/1.5 Readable,sans-serif;margin:0;color:#aaa89f}.music-credit a{text-decoration:underline;text-underline-offset:3px}
#music-status{font-size:16px;margin:0}
.cloud{position:absolute;left:-45%;width:48%;height:40px;opacity:.23;border-radius:50%;background:linear-gradient(transparent,#b6b7b0aa,transparent);filter:blur(8px);animation:cloud-pass 130s linear infinite;pointer-events:none}
.cloud:after{content:'';position:absolute;inset:-12px 23% 0 15%;border-radius:50%;background:inherit}
.cloud-one{top:16%;animation-delay:-42s}.cloud-two{top:37%;width:31%;height:24px;animation-duration:180s;animation-delay:-105s}.cloud-three{top:8%;width:24%;height:20px;animation-duration:160s;animation-delay:-130s}
@keyframes cloud-pass{to{transform:translateX(320vw)}}
body:not(.night) .lamp .beam,body:not(.night) .lamp .bulb,body:not(.night) .lamp .bulb-halo{opacity:0!important}
.tv-static,.tv-secret{opacity:0}.tv-static{transform-origin:820px 1140px}.tv-noise .tv-static{opacity:.8;animation:tv-snow .12s steps(2,end) infinite}.tv-noise .tv-secret{opacity:1}
@keyframes tv-snow{to{transform:translate(4px,-3px)}}
#tv-button{position:absolute;left:48%;top:42.5%;width:16%;height:6.5%;min-width:44px;min-height:44px;pointer-events:auto;background:none;border:0;cursor:pointer}
#tv-button:focus-visible{outline-color:#a99c7d}
@media(min-width:1600px){.scene{width:650px}.note{padding-top:100px;margin-left:10%}.credits{right:3%;width:25%}.sign{width:31%;font-size:38px}.sign span+span{font-size:43px;margin-left:calc(100% - 72px)}}
@media(min-width:701px) and (max-width:1050px){.page{min-height:1080px}.note{width:52%;margin-left:6%;padding-top:96px}.scene{width:470px;right:-45px;bottom:110px;top:auto}.credits{width:26%;right:2%;bottom:190px}.credits p{font-size:18px}.credits h2{font-size:21px}.credits small{font-size:15px}.cat-place{left:50%;bottom:126px}.sign{right:44px;width:105px;font-size:25px}.sign span+span{font-size:34px;margin-left:calc(100% - 68px)}.radio{width:420px}}
@media(max-width:700px){
.page{min-height:0;height:auto;padding-bottom:700px}
.note{padding-top:85px;padding-bottom:0;width:86%;margin-left:8%}
.socials{font-size:22px;gap:0}.socials a span{font-size:17px}.other-links nav{font-size:19px}
.credits{position:relative;right:auto;bottom:auto;margin:39px 6% 0 18%;width:76%;max-width:none;color:var(--ink);transform:rotate(-1deg)}
.credits h2{font-size:22px}.credits p{font-size:20px}.credits small{font-size:16px;color:var(--quiet)}
.credits a{border-color:#74746a6b}
.scene{width:350px;right:-12px;top:auto;bottom:150px}
.sign{top:17.5%;right:12px;width:104px;font-size:24px}.sign span+span{font-size:32px;margin-left:calc(100% - 65px)}
.hill{height:285px;left:0;bottom:0;width:100%;transform:none;border-radius:0}
.cat-place{left:30%;bottom:157px;width:125px;height:125px}
.cat-speech{font-size:18px;max-width:195px}
.ground-footer{bottom:17px;left:7%;right:7%;gap:14px}.radio{width:100%}
.radio-heading{gap:11px;font-size:19px}.track-name{font-size:14px}.player{flex-wrap:wrap;gap:7px}
#music-seek{flex:1}#music-time{font-size:10px}.volume-label input{width:56px}.volume-label svg{width:16px}
.music-credit{font-size:9px}.copyright{font-size:14px}
.pale-disc{top:auto;bottom:620px;width:270px}.cloud-one{top:12%}.cloud-two{top:46%}
}
@media(max-width:360px){.scene{width:330px;right:-20px}.cat-place{left:24%;bottom:157px}.credits{margin-left:12%;width:82%}.player{gap:6px}.volume-label{width:100%;justify-content:flex-end}.radio-heading{flex-wrap:wrap;gap:4px 12px}.ground-footer{bottom:14px}.sign{right:20px;width:94px;font-size:23px}.sign span+span{margin-left:calc(100% - 64px)}}

@media(min-width:1051px){.note{padding-top:65px}.note section{margin-top:20px}.social-section{margin-top:24px!important}.credits{width:23%}}

/* Detail pass: keep the established composition. */
:root{--change:18s}
body.dusk{--paper:#cfc1b4;--ink:#302b28;--quiet:#625c56;color-scheme:light}
.dusk .pale-disc{background:#dbaf85;opacity:.48}
body.rainy .sky:before{content:'';position:absolute;inset:0;background:#64737c;opacity:.15;transition:opacity 4s}
.world-settings{position:absolute;right:0;top:54px;width:230px;padding:19px 22px;background:var(--paper);color:var(--ink);border:1px solid currentColor;border-radius:3px 7px 3px 5px;box-shadow:3px 5px 0 #1b18150d;font-size:20px;transform:rotate(.6deg)}
.world-settings[hidden]{display:none}.world-settings label{display:block;margin-bottom:5px}.world-settings select{width:100%;font:18px Hand,Readable,sans-serif;background:transparent;color:inherit;border:0;border-bottom:1px solid #8886;padding:7px 3px;margin-bottom:13px;min-height:40px}.world-settings option{background:var(--paper);color:var(--ink)}#world-status{font-size:16px;line-height:1.5;margin:0;min-height:24px}.clock-control{font-size:27px}
#rain-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;opacity:0;transition:opacity 3s}.rainy #rain-canvas{opacity:1}
.cat-speech{min-width:128px;max-width:280px;padding:20px 30px;line-height:1.65;text-align:center;letter-spacing:.04em;border-radius:46% 42% 44% 37%;bottom:106%;overflow-wrap:anywhere}
.other-links nav{gap:5px}.other-links a{display:flex;align-items:baseline;gap:17px;min-height:38px;line-height:38px}.link-label{min-width:82px;font-size:22px}.other-links a>span+span{font-size:19px}
.credits{text-align:center}.credits .work-category{display:block;font-size:18px;margin-bottom:2px}.credits p{line-height:1.6}.credits .kletka{margin-top:17px}
.tv-secret{font-family:monospace!important;font-weight:900;paint-order:stroke fill}
.tv-tear{opacity:0}.tv-glitch .tv-tear{opacity:.9;animation:tv-tear .28s steps(3,end) both}.tv-glitch .tv-static{opacity:.3;animation:tv-snow .09s steps(2,end) infinite}
@keyframes tv-tear{0%{transform:translateY(-34px) skewX(-9deg);transform-origin:820px 1140px}35%{transform:translateY(1px) skewX(12deg);transform-origin:820px 1140px}65%{transform:translateY(12px) skewX(-6deg);transform-origin:820px 1140px}100%{transform:translateY(48px);opacity:0}}
.cloud{background:none;border-radius:0;fill:#9ca1a1;filter:blur(1.3px);opacity:.27;height:auto;width:clamp(190px,29vw,430px);left:-45%;animation:cloud-travel 155s linear infinite}
.cloud:after{display:none}.cloud-1{top:14%;animation-delay:-39s}.cloud-2{top:32%;width:clamp(120px,17vw,240px);animation-duration:210s;animation-delay:-115s;opacity:.20}.cloud-3{top:6%;width:clamp(230px,35vw,510px);animation-duration:185s;animation-delay:-133s}.cloud-4{top:46%;width:clamp(160px,23vw,330px);animation-duration:170s;animation-delay:-61s;opacity:.18}.cloud-5{top:24%;width:clamp(100px,12vw,180px);animation-duration:230s;animation-delay:-186s;opacity:.25}
@keyframes cloud-travel{to{transform:translateX(190vw)}}
.rainy .cloud{fill:#77838b;opacity:.36}
.track-name{font-size:17px}.radio-heading{flex-wrap:wrap;gap:3px 18px}
@media(max-width:700px){.cat-speech{min-width:118px;max-width:min(250px,75vw);padding:18px 24px;font-size:18px}.other-links a{gap:11px;flex-wrap:wrap;row-gap:0;line-height:30px;min-height:38px}.link-label{font-size:20px;min-width:74px}.other-links a>span+span{font-size:17px}.world-settings{width:215px;padding:17px 20px}.credits .work-category{font-size:18px}.track-name{font-size:16px}.cloud-4{top:60%}}
@media(max-width:360px){.other-links a{gap:2px 10px}.other-links a>span+span{font-size:16px}.link-label{min-width:66px;font-size:19px}.controls{gap:3px}.small-control{width:33px}}
@media(prefers-reduced-motion:reduce){.tv-glitch .tv-tear,.tv-glitch .tv-static{animation:none}.tv-tear{opacity:0!important}#rain-canvas{transition:none}}

@media(max-width:700px){.cat-place{bottom:145px}}

/* Responsive scene: artwork and wall lettering share one coordinate system. */
.page{--scene-width:min(45vw,600px,max(396px,calc((100svh - 120px)*.6)));--scene-bottom:100px;min-height:780px}
.scene{width:var(--scene-width);right:0;top:auto;bottom:var(--scene-bottom);container-type:inline-size}
.scene:after{content:'';position:absolute;left:42%;right:0;top:99.8%;height:var(--scene-bottom);background:var(--silhouette);z-index:-1}
.scene .credits{position:absolute;left:43%;right:2%;top:61%;bottom:auto;width:auto;max-width:none;margin:0;pointer-events:auto;text-align:center;color:#eeece3;transform:rotate(-1.1deg)}
.scene .credits h2,html[lang=en] .scene .credits h2{font-size:clamp(21px,4.7cqw,28px);line-height:1.4;margin:0 0 16px}
.scene .credits p{font-size:clamp(19px,4.5cqw,27px);line-height:1.5;margin:0 0 17px}
.scene .credits small{font-size:clamp(15px,3.5cqw,21px);color:#c3c0b7}
.scene .credits .work-category{font-size:clamp(17px,3.8cqw,23px)}
.scene .credits a{border-color:#eeece366}
.scene .credits .kletka{margin-top:18px}
.cat-place{left:auto;right:calc(var(--scene-width)*.6 + 14px);bottom:132px;width:140px;height:140px}
.sign{right:6px;width:31%;font-size:clamp(24px,6.1cqw,38px)}
.sign span+span{font-size:clamp(31px,6.8cqw,43px);margin-left:calc(100% - 69px)}
.cat.hello{transform:translateY(-4px) rotate(var(--greeting-angle,-3deg))}
.ear{transition:transform .22s ease-out}
.ear-left{clip-path:inset(0 50% 0 0);transform-origin:30% 43%}
.ear-right{clip-path:inset(0 0 0 50%);transform-origin:68% 58%}
.cat.ear-twitch .ear-left{animation:ear-left .7s ease-in-out}
.cat.ear-twitch .ear-right{animation:ear-right .7s .1s ease-in-out}
@keyframes ear-left{25%,65%{transform:rotate(-5deg)}45%,100%{transform:rotate(0)}}
@keyframes ear-right{25%,65%{transform:rotate(5deg)}45%,100%{transform:rotate(0)}}
@media(min-width:1051px) and (max-height:820px){
 .note{padding-top:55px}.note h1{font-size:104px}.note section{margin-top:15px}
 .note .intro{margin-bottom:17px}.note p{font-size:20px}
 .social-section{margin-top:17px!important}.other-links a{min-height:33px;line-height:33px}
}
@media(min-width:701px) and (max-width:1050px){
 .page{--scene-width:440px;--scene-bottom:95px;min-height:1000px}
 .note{width:52%}.cat-place{width:125px;height:125px;bottom:130px}
 .scene .credits h2,html[lang=en] .scene .credits h2{font-size:21px}
 .scene .credits p{font-size:19px}
}
@media(max-width:700px){
 .page{--scene-width:min(100%,430px);--scene-bottom:135px;height:auto;min-height:100svh;padding-bottom:740px}
 .scene{right:0;bottom:var(--scene-bottom)}
 .scene .credits{top:61%;left:42%;right:3%;margin:0}
 .scene .credits h2,html[lang=en] .scene .credits h2{font-size:20px;margin-bottom:12px}
 .scene .credits p{font-size:18px;line-height:1.55;margin-bottom:12px}
 .scene .credits small{font-size:14px}.scene .credits .work-category{font-size:16px}
 .scene .credits .kletka{margin-top:13px}
 .cat-place{right:calc(var(--scene-width)*.6 + 5px);left:auto;bottom:172px;width:110px;height:110px}
 .cat-speech{left:60%;max-width:190px;padding:18px 23px}
 .sign{right:6px;width:31%;font-size:24px}.sign span+span{font-size:32px;margin-left:calc(100% - 62px)}
 .hill{height:285px}
}
@media(max-width:360px){
 .page{padding-bottom:670px;--scene-bottom:175px}
 .cat-place{width:92px;height:92px;bottom:205px}
 .scene .credits{top:60%;left:41%;right:2%}
 .scene .credits h2,html[lang=en] .scene .credits h2{font-size:17px}
 .scene .credits p{font-size:16px}.scene .credits small{font-size:12px}
 .scene .credits .work-category{font-size:14px}
 .cat-speech{left:75%;max-width:165px;font-size:17px}
}

@media(max-width:360px){.cat-place{bottom:170px}.scene .credits{top:58%}.scene .credits p{line-height:1.45}}

@media(max-width:360px){.scene .credits .external{display:none}}
/* Keep wall lettering above the foreground slope at shallow desktop heights. */
.scene{z-index:auto;container-type:normal}
.scene-parts,.scene:after,.sign,#tv-button{z-index:1}
.scene .credits{z-index:6}
@media(min-width:1051px){
 .scene .credits h2,html[lang=en] .scene .credits h2{font-size:clamp(21px,1.45vw,28px)}
 .scene .credits p{font-size:clamp(19px,1.3vw,25px)}
 .scene .credits small{font-size:clamp(15px,1vw,19px)}
 .scene .credits .work-category{font-size:clamp(17px,1.1vw,21px)}
}
.sign{font-size:clamp(24px,2vw,38px)}.sign span+span{font-size:clamp(31px,2.25vw,43px)}
@media(max-width:1050px){.scene .credits small{font-size:15px}.scene .credits .work-category{font-size:17px}}
@media(max-width:700px){.scene .credits small{font-size:14px}.scene .credits .work-category{font-size:16px}}
@media(max-width:360px){.scene .credits small{font-size:12px}.scene .credits .work-category{font-size:14px}}

/* Replaceable letterbox, grounded on the same curve as the cat. */
.postbox{position:absolute;left:46%;bottom:230px;width:120px;aspect-ratio:2/3;z-index:3;display:block;transform-origin:44% 91%;outline-offset:-15px}
.postbox img{display:block;width:100%;height:100%;object-fit:contain}
.postbox-hint{position:absolute;left:50%;top:6%;transform:translate(-50%,-100%) rotate(-4deg);white-space:nowrap;font-size:18px;background:var(--paper);color:var(--ink);padding:7px 13px;border:1px solid currentColor;border-radius:45% 38% 41% 43%;opacity:0;transition:opacity .2s;pointer-events:none}
.postbox:hover .postbox-hint,.postbox:focus-visible .postbox-hint{opacity:1}
.cat-place{right:calc(var(--scene-width)*.6 + 100px)}
#music-play.is-playing{position:relative;font-size:0}
#music-play.is-playing:before,#music-play.is-playing:after{content:'';position:absolute;top:13px;width:5px;height:19px;background:currentColor;border-radius:1px}
#music-play.is-playing:before{left:8px}#music-play.is-playing:after{right:8px}
/* The second line deliberately exits the physical sign after half of 建. */
.sign{left:68%;right:auto;width:32%;font-size:clamp(31px,2.6vw,50px);line-height:1.25;overflow:hidden;transform:rotate(-2deg)}
.sign span+span{font-size:clamp(40px,3.2vw,61px);margin-left:calc(100% - .85em);margin-top:10px}
@media(min-width:701px) and (max-width:1050px){
 .cat-place{right:calc(var(--scene-width)*.6 + 45px)}
 .postbox{left:35%;width:105px}
 .sign{font-size:32px}.sign span+span{font-size:43px}
}
@media(max-width:700px){
 .cat-place{right:calc(var(--scene-width)*.6 + 18px)}
 .postbox{left:-8px;width:100px}
 .postbox-hint{left:68%;font-size:16px}
 .sign{font-size:29px}.sign span+span{font-size:40px}
}
@media(max-width:360px){
 .cat-place{right:calc(var(--scene-width)*.6 + 12px)}
 .postbox{left:-10px;width:85px}
 .sign{font-size:25px}.sign span+span{font-size:35px}
}

/* The transparent canvas is not clickable: only the letterbox and its post are. */
.postbox{pointer-events:none}
.postbox img{pointer-events:none}
.postbox-hit{position:absolute;inset:0;z-index:1;pointer-events:auto;
 clip-path:polygon(33% 11%,65% 14%,71% 20%,64% 42%,51% 43%,47% 93%,40% 93%,44% 43%,30% 40%)}
.postbox:focus-within .postbox-hint{opacity:1}
.postbox:focus-within:after{content:'';position:absolute;left:30%;top:11%;width:42%;height:33%;border:1px dashed var(--ink);transform:rotate(8deg)}

/* Above the invisible profile layout rectangle, with only the clipped link accepting clicks. */
.postbox{z-index:5}

/* Visitors and small interactions. Keep the existing sign and composition. */
.cat-speech{white-space:pre-line}
#debug-bird{border:0;background:none;font-size:18px;width:32px;height:44px;opacity:.7;padding:0}
.postbox-hit{clip-path:polygon(33% 11%,65% 14%,71% 20%,64% 42%,30% 40%)}
.postbox-stem{position:absolute;inset:0;z-index:2;padding:0;border:0;background:none;pointer-events:auto;clip-path:polygon(44% 42%,52% 42%,47% 94%,39% 94%)}
.postbox:has(.postbox-stem:hover) .postbox-hint{opacity:0}
.postbox.wobbling img{animation:post-wobble .8s ease-in-out;transform-origin:44% 91%}
@keyframes post-wobble{15%{transform:rotate(4deg)}35%{transform:rotate(-3deg)}55%{transform:rotate(2deg)}75%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.antenna-hit{position:absolute;z-index:2;border:0;background:none;pointer-events:auto;padding:0;min-width:32px;min-height:32px}
.antenna-mesh{left:45%;top:12.5%;width:11%;height:7%}
.antenna-left{left:35%;top:25%;width:13%;height:7%}
.antenna-right{left:46%;top:29%;width:13%;height:7%}
.signal{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;pointer-events:none}
.signal path{opacity:0}
.signal.sending path{animation:signal-out 1.5s ease-out}
.signal.sending path:nth-child(2){animation-delay:.18s}.signal.sending path:nth-child(3){animation-delay:.36s}
@keyframes signal-out{0%{opacity:0}25%,50%{opacity:.65}100%{opacity:0}}
#visiting-bird{position:absolute;width:43px;height:38px;padding:0;border:0;background:none;color:#1b1815;z-index:8;cursor:pointer;touch-action:manipulation}
#visiting-bird[hidden],#fallen-letter[hidden],.puddle[hidden]{display:none}
#visiting-bird svg{width:100%;height:100%;overflow:visible;fill:currentColor;pointer-events:none}
#visiting-bird .owl,#visiting-bird .carried-letter{display:none}
#visiting-bird.is-owl .owl,#visiting-bird.has-letter .carried-letter{display:block}
#visiting-bird.is-owl .sparrow{display:none}
#visiting-bird.is-owl{width:46px;height:42px}
#visiting-bird .wing{transform-origin:30px 30px}
#visiting-bird.flying .wing{animation:wingbeat .18s ease-in-out infinite alternate}
@keyframes wingbeat{to{transform:rotate(70deg) scaleY(.5)}}
#fallen-letter{position:absolute;width:44px;height:40px;border:0;background:none;padding:0;z-index:8}
#fallen-letter svg{width:100%;height:100%;overflow:visible;fill:#eeece3;stroke:#524d45;stroke-width:1.5;pointer-events:none}
.letter-paper,.envelope-back{opacity:0;transition:opacity .3s,transform .5s}
#fallen-letter.opened .letter-paper,#fallen-letter.opened .envelope-back{opacity:1}
#fallen-letter.opened .letter-paper{transform:translateY(-8px)}
.puddle{position:absolute;width:165px;height:48px;z-index:6;padding:0;border:0;background:none;color:#a5a79f;opacity:.65}
.puddle svg{width:100%;height:100%;pointer-events:none}
.puddle .water{fill:#777d785c;stroke:#9a9e9255;stroke-width:.6}
.puddle .reflection{fill:none;stroke:#cecab555;stroke-width:2}
.night .puddle .reflection{stroke:#e7dfbb99}
.puddle i{position:absolute;left:35%;top:40%;width:25%;height:20%;border:1px solid #cbcbbc;border-radius:50%;opacity:0;pointer-events:none}
.puddle.rippling i{animation:water-ripple 1.4s ease-out}
.puddle.rippling i:nth-of-type(2){animation-delay:.18s}.puddle.rippling i:nth-of-type(3){animation-delay:.36s}
@keyframes water-ripple{from{transform:scale(.2);opacity:.8}to{transform:scale(2.8);opacity:0}}
#letter-dialog{border:0;background:transparent;padding:16px;max-width:min(620px,94vw);width:620px;color:#302b28}
#letter-dialog::backdrop{background:#101411b3;backdrop-filter:blur(3px)}
.letter-sheet{position:relative;background:#efede4;padding:35px 35px 22px;border-radius:2px 7px 3px 5px;box-shadow:3px 6px 25px #0004;transform:rotate(-.6deg)}
#letter-title{font-size:28px;font-weight:400;margin:0 30px 20px 0}
#letter-close{position:absolute;right:10px;top:5px;width:44px;height:44px;background:none;border:0;font-size:32px}
.letter-window{height:min(50svh,380px);overflow:auto;scrollbar-width:thin;mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
#letter-message{white-space:pre-wrap;font-size:23px;line-height:1.9;padding:90px 4px 180px;overflow-wrap:anywhere}
#letter-scroll-toggle{display:block;margin:14px auto 0;border:0;border-bottom:1px solid #827c6c;background:none;padding:7px;font-size:17px;min-height:40px}
@media(max-width:700px){#debug-bird{font-size:16px;width:25px}.controls{gap:2px}#visiting-bird{width:35px;height:32px}#visiting-bird.is-owl{width:39px;height:36px}.puddle{width:130px;height:40px}.letter-sheet{padding:30px 20px 18px}#letter-title{font-size:25px}#letter-message{font-size:21px}.antenna-hit{min-width:26px;min-height:26px}}
@media(prefers-reduced-motion:reduce){.signal.sending path{opacity:.6}.postbox.wobbling img{animation:none!important}}

.antenna-mesh{left:35.5%;top:14%;width:12%;height:6%}.antenna-left{left:30.5%;top:27%;width:12%;height:6%}.antenna-right{left:42%;top:30.5%;width:12%;height:6%}

#visiting-bird.is-owl .carried-letter{transform:translate(-18px,7px)}
.postbox:has(.postbox-stem:focus-visible) .postbox-hint{opacity:0}

/* Birds face their velocity and bank into the flight curve. */
#visiting-bird svg{transform:rotate(var(--bird-tilt,0deg)) scaleX(var(--bird-facing,1));transform-origin:50% 85%}
#visiting-bird:not(.flying) .sparrow .wing{opacity:0}
#visiting-bird.flying .wing-near{transform-origin:31px 31px;animation:small-wing .24s ease-in-out infinite alternate}
#visiting-bird.flying .wing-far{transform-origin:33px 30px;animation:small-wing-far .24s -.08s ease-in-out infinite alternate}
#visiting-bird.flying .owl-wing-left{transform-origin:22px 30px;animation:owl-flap-left .34s ease-in-out infinite alternate}
#visiting-bird.flying .owl-wing-right{transform-origin:44px 30px;animation:owl-flap-right .34s ease-in-out infinite alternate}
@keyframes small-wing{from{transform:rotate(-18deg) scaleY(1)}to{transform:rotate(65deg) scaleY(.3)}}
@keyframes small-wing-far{from{transform:rotate(18deg) scaleY(.85)}to{transform:rotate(-55deg) scaleY(.35)}}
@keyframes owl-flap-left{from{transform:rotate(60deg)}to{transform:rotate(-25deg)}}
@keyframes owl-flap-right{from{transform:rotate(-60deg)}to{transform:rotate(25deg)}}
/* Visible water and hit region share the pool outline; ripples start at the tap. */
.puddle{opacity:0}
.puddle{clip-path:polygon(3% 48%,12% 31%,33% 29%,47% 18%,69% 15%,88% 31%,97% 40%,99% 66%,88% 80%,65% 82%,45% 94%,23% 79%,6% 76%)}
.puddle svg{transform:scale(var(--water-scale,1));transform-origin:center}
.puddle i{left:var(--ripple-x,50%);top:var(--ripple-y,50%);margin-left:-12.5%;margin-top:-5%}

/* Only the pool outline receives taps, above the footer's transparent layout area. */
.puddle{z-index:8}

/* Separate pupils: white outlines stay fixed, with clipped black pupils. */
.cat-eyes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cat-eyes .eye{clip-path:none;transform-box:view-box}
.cat-eyes .pupil{transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform .45s ease-out}
.bird-tracking .cat-eyes .pupil{transition:transform .09s linear}
.puddle-small{height:25px}.fish-cloud{position:absolute;left:-250px;width:clamp(120px,16vw,220px);fill:#9ca1a1;opacity:0;filter:blur(1.7px)}
.fish-cloud.passing{animation:fish-drift 70s linear both}
@keyframes fish-drift{0%{opacity:0;transform:translateX(0)}8%,88%{opacity:.24}100%{opacity:0;transform:translateX(calc(100vw + 500px))}}
/* MOBILE COMPOSITION: airy card-like scene; text and controls sized independently. */
@media(max-width:700px){
.page{--scene-width:clamp(215px,56vw,310px);--scene-bottom:155px;height:100svh;min-height:900px;padding-bottom:0}
.note,html[lang=en] .note{margin-left:7%;width:88%;padding:83px 0 0;max-width:none}
.note h1{font-size:65px}.note h1 span,html[lang=en] .note h1 span{font-size:19px}
.note .intro{font-size:19px;margin-bottom:19px}
.note p,html[lang=en] .note p{font-size:17px;line-height:1.6}
.note h2,html[lang=en] .note h2{font-size:19px;margin-bottom:4px}
.note section{margin-top:17px}.social-section{margin-top:20px!important}
.socials{font-size:19px;gap:0}.socials a{min-height:38px}.socials svg{width:19px;height:19px}.socials a span{font-size:15px}
.other-links nav{gap:1px}.other-links a{min-height:34px;line-height:28px;gap:10px;flex-wrap:nowrap}.link-label{font-size:17px;min-width:65px}.other-links a>span+span{font-size:15px}
.scene{right:0;bottom:var(--scene-bottom);width:var(--scene-width)}
.scene .credits{left:42%;right:3%;top:59%;width:auto}.scene .credits h2,html[lang=en] .scene .credits h2{font-size:16px;margin-bottom:10px}.scene .credits p{font-size:15px;line-height:1.5;margin-bottom:8px}.scene .credits .work-category{font-size:15px}.scene .credits small{font-size:12px}.scene .credits .kletka{margin-top:12px}.scene .credits .external{font-size:10px;margin-left:3px}
.cat-place{width:86px;height:86px;right:calc(var(--scene-width)*.6 + 9px);bottom:180px;left:auto}
.hill{height:245px}.postbox{left:20%;width:85px}
.sign{font-size:22px}.sign span+span{font-size:30px}
.pale-disc{top:-95px;bottom:auto;right:-100px;width:260px}
header{right:4%;top:10px}.controls{gap:1px}.languages{font-size:23px}.languages button{min-width:37px;padding:0 4px}.small-control{width:38px;height:44px}#debug-bird{width:31px;font-size:18px}
.ground-footer{left:6%;right:6%;bottom:15px;gap:8px}.radio{width:100%}.radio-heading{font-size:18px;gap:12px}.track-name{font-size:15px}.player{gap:7px;flex-wrap:nowrap}.player button{width:32px}#music-time{font-size:10px}.volume-label{width:auto;flex-basis:auto;margin:0}.volume-label input{width:53px}.volume-label svg{width:18px}#music-seek{width:70px}.music-credit{font-size:9px}.copyright{font-size:14px}
.cat-speech{font-size:17px;max-width:min(250px,75vw);padding:17px 22px}.puddle{width:110px;height:34px}.puddle-small{height:23px}
}
@media(max-width:370px){.page{min-height:910px}.note p,html[lang=en] .note p{font-size:16px}.scene .credits h2,html[lang=en] .scene .credits h2{font-size:15px}.scene .credits p{font-size:14px}.player{gap:5px}.volume-label input{width:43px}#music-time{font-size:9px}}

@media(max-width:700px){.page{--scene-width:clamp(265px,68vw,340px);min-height:1040px}.scene .credits h2,html[lang=en] .scene .credits h2{font-size:15px}.scene .credits p{font-size:14px}.scene .credits .work-category{font-size:14px}.scene .credits small{font-size:11px}.sign{font-size:22px}.cat-place{right:calc(var(--scene-width)*.6 + 6px)}}

@media(max-width:700px){.page{min-height:1100px}}

@media(max-width:700px){html[lang=en] .scene .credits h2{font-size:14px}html[lang=en] .scene .credits p{font-size:13px}.scene .credits a{overflow-wrap:anywhere}}
/* Mobile: separate the speech layer from the cat behind the hill. */
@media(max-width:700px){
 .cat-place{z-index:auto;pointer-events:none}
 .cat-place .cat{z-index:3;pointer-events:auto}
 .cat-place .cat-speech{z-index:9}
 .postbox{left:8%}
 /* Explicit canvas dimensions keep the button's polygon aligned with the image. */
 .postbox-stem{width:100%;height:100%;margin:0;box-sizing:border-box;clip-path:polygon(34% 43%,64% 43%,59% 95%,29% 95%)}
}