@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#20251e;background:#f6f7f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.page{max-width:1600px;margin:auto;padding:0 5%}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #47652a;outline-offset:6px}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d8dcd2}.brand{font-size:36px;font-weight:700;letter-spacing:-4px}.brand span{font-size:12px;vertical-align:top;letter-spacing:0;display:inline-block;margin:8px 0 0 6px}.header-note{font-size:14px;color:#626a5b}.soundless{background:transparent;border:0;padding:12px 0 12px 20px;font-size:14px}.soundless span{margin-left:24px}.title-line{display:flex;align-items:flex-start;position:relative;padding:20px 0 0}h1{font-size:clamp(100px,19.7vw,310px);letter-spacing:-.085em;line-height:.95;margin:0;font-weight:550;white-space:nowrap}.period{color:#96b854}.domain{font-size:14px;border:1px solid #b6beac;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;margin:24px 0 0 auto}.hero{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;padding:32px 0 60px}.intro{padding:15px 0 0 5%}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:650}h2{font-size:clamp(27px,3.2vw,47px);line-height:1.1;font-weight:500;letter-spacing:-.055em;margin:26px 0 18px}.intro p{color:#6a7164;font-size:16px;line-height:1.65;margin:0 0 26px}.boop-button{display:flex;align-items:center;justify-content:space-between;gap:36px;background:#d5f58a;color:#26321c;border:0;border-radius:40px;padding:17px 23px;font-size:15px;font-weight:600;transition:transform .2s,background .2s}.boop-button:hover{background:#c5ed6a;transform:translateY(-3px)}.boop-status{font-size:13px;color:#707967;margin-top:15px;min-height:18px}.portrait-wrap{position:relative;width:100%;max-width:440px;justify-self:center;padding-top:8px}.portrait{position:relative;aspect-ratio:1.13;overflow:hidden;border-radius:48% 48% 43% 43%;background:#cce984;transform:rotate(-5deg);isolation:isolate;transition:transform .3s}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 41%;display:block}.portrait:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px #0000000a;border-radius:inherit;pointer-events:none}.orbit-label{position:absolute;z-index:2;left:-22px;top:35px;transform:rotate(-20deg);font-size:11px;letter-spacing:.14em;background:#f6f7f2;border:1px solid #d8dcd2;padding:10px 16px;border-radius:24px}.nose{position:absolute;left:16%;top:56%;width:25%;height:23%;border:0;border-radius:50%;background:transparent;cursor:pointer}.nose span{position:absolute;top:-25px;left:30%;border-radius:30px;background:#d5f58a;padding:7px 12px;font-size:13px;opacity:0;transition:opacity .15s}.nose:hover span,.nose:focus-visible span{opacity:1}.photo-caption{display:flex;justify-content:center;gap:12px;font-size:14px;margin-top:25px}.photo-caption>span{color:#72786c}.sticker{position:absolute;right:-7px;bottom:44px;background:#d5f58a;border:5px solid #f6f7f2;width:105px;height:105px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:23px;line-height:1.1;letter-spacing:-.05em;transform:rotate(12deg)}.sticker span{font-size:13px;letter-spacing:0;margin-top:4px}.portrait.boop{animation:bounce .45s ease}#hearts{position:absolute;inset:0;pointer-events:none}.heart{position:absolute;left:32%;top:65%;color:#d5f58a;font-size:32px;text-shadow:0 1px 6px #0003;animation:float 1.2s ease-out forwards}footer{border-top:1px solid #d8dcd2;display:flex;align-items:center;gap:44px;padding:28px 0 32px}.footer-label{font-size:11px;letter-spacing:.1em;color:#6a7164}.footer-label span{margin-left:15px}nav{display:flex;gap:32px}nav a{font-size:15px;padding:10px 0}nav a span{font-size:14px;margin-left:18px;color:#707967}nav a:hover{text-decoration:underline;text-underline-offset:6px}.footnote{margin-left:auto;text-align:right;font-size:12px;line-height:1.6;color:#72786c}@keyframes bounce{0%,100%{transform:rotate(-5deg) scale(1)}40%{transform:rotate(-2deg) scale(1.025)}70%{transform:rotate(-7deg) scale(.995)}}@keyframes float{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),-170px) rotate(var(--r)) scale(1.4)}}@media(min-width:1500px){.hero{padding-top:45px}.portrait-wrap{max-width:480px}}@media(max-width:700px){.page{padding:0 6%}header{height:75px}.header-note{display:none}.brand{font-size:30px}.title-line{padding-top:26px}h1{font-size:20.5vw}.domain{width:30px;height:30px;font-size:11px;margin-top:5px}.hero{grid-template-columns:1fr;gap:30px;padding:26px 0 36px}.intro{padding:0;text-align:center;order:2}.eyebrow{font-size:11px}h2{font-size:34px;margin:18px 0 13px}.intro p{margin-bottom:20px}.boop-button{margin:auto}.portrait-wrap{max-width:320px;width:85%;order:1;margin-top:5px}.orbit-label{font-size:10px;left:-20px;top:18px}.sticker{width:85px;height:85px;font-size:20px;right:-15px}.photo-caption{font-size:12px;margin-top:18px}footer{gap:12px;flex-wrap:wrap;padding:23px 0}.footer-label{width:100%;font-size:10px}nav{gap:24px}.footnote{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.heart{display:none}}
.domain{background:transparent;font-family:inherit;transition:background .2s,transform .2s}.domain:hover{background:#d5f58a;transform:rotate(12deg)}.wag-trigger{background:none;border:0;padding:0;color:inherit;font-size:inherit;text-underline-offset:4px}.wag-trigger:hover{text-decoration:underline}.wag-surprise{position:fixed;bottom:0;left:50%;transform:translate(-50%,110%);z-index:5;display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.3,1);width:280px}.wag-surprise.visible{transform:translate(-50%,0)}.tail-window{height:160px;width:240px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end}.wag-tail{height:160px;width:160px;object-fit:contain;transform-origin:50% 94%;animation:tail-wag .32s ease-in-out infinite alternate;animation-play-state:paused}.visible .wag-tail{animation-play-state:running}.wag-surprise>span{background:#20251e;color:#d5f58a;font-size:13px;padding:10px 16px;border-radius:14px 14px 0 0;text-align:center}@keyframes tail-wag{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}dialog{padding:0;border:1px solid #d8dcd2;border-radius:25px;background:#f6f7f2;color:#20251e;width:min(780px,90vw);max-height:90dvh;overflow:auto;box-shadow:0 30px 100px #0003}dialog[open]{display:grid;grid-template-columns:1fr 1fr}dialog::backdrop{background:#20251e80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:13px;top:10px;width:38px;height:38px;z-index:2;border:0;background:#f6f7f2e8;border-radius:50%;color:#20251e;font-size:26px}.io-photo{min-height:470px;position:relative;overflow:hidden;background:#e6e9df}.io-photo img{width:100%;height:100%;position:absolute;inset:0;display:block;object-fit:cover}.shot-io{object-position:46% 45%}.shot-both{object-position:50% 57%;opacity:0;transition:opacity .35s ease}.io-photo.together .shot-both{opacity:1}.io-copy{padding:66px 30px 36px}.io-copy h2{font-size:34px;margin-top:22px}.io-copy p{font-size:16px;color:#6a7164;line-height:1.6}.io-copy .boop-button{margin-top:24px;gap:18px;font-size:14px}.io-copy .meeting-caption{font-size:12px;margin-top:18px}@media(max-width:700px){dialog[open]{grid-template-columns:1fr}.io-photo{min-height:0;height:300px}.shot-io{object-position:50% 35%}.shot-both{object-position:50% 58%}.io-copy{padding:28px}.io-copy h2{font-size:30px}.io-copy .boop-button{margin-left:0}.tail-window{height:125px}.wag-tail{height:125px;width:125px}}@media(prefers-reduced-motion:reduce){.wag-surprise{transition:none}.wag-tail{animation:none}}
.header-right{display:flex;align-items:center;gap:16px}.header-doodle{height:78px;width:auto;flex:none;display:block;align-self:flex-end;transform:translateY(1px);pointer-events:none}@media(max-width:700px){.header-doodle{height:56px}.header-right{gap:8px}.soundless{padding-left:0}}@media(max-width:340px){.header-doodle{display:none}}
/* --- iOS / touch refinements --- */
.domain{position:relative}
.domain:after{content:'';position:absolute;inset:-9px;border-radius:50%}
.dialog-close{position:absolute}
.dialog-close:after{content:'';position:absolute;inset:-5px;border-radius:50%}
.wag-surprise{padding-bottom:env(safe-area-inset-bottom,0px)}
@media(hover:none){
 .boop-button:hover{background:#d5f58a;transform:none}
 .domain:hover{background:transparent;transform:none}
 nav a:hover{text-decoration:none}
 .wag-trigger:hover{text-decoration:none}
}
/* --- doodle trigger + all-time boop count --- */
.doodle-trigger{background:none;border:0;padding:0;line-height:0;flex:none;border-radius:14px;transition:transform .2s}
.doodle-trigger:focus-visible{outline:3px solid #47652a;outline-offset:4px}
@media(hover:hover){.doodle-trigger:hover{transform:rotate(-4deg) scale(1.04)}}
.boop-total{font-size:12px;color:#8a9180;margin-top:5px}

/* --- doodle collection dialog --- */
#doodles-dialog{width:min(1040px,92vw);max-height:90dvh}
#doodles-dialog[open]{display:block;grid-template-columns:none}
.doodles-head{padding:34px 34px 0}
.doodles-head h2{font-size:30px;margin:14px 0 0}
.doodles-body{padding:24px 34px 34px}
.doodles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px}
.doodle-tile{background:#fff;border:1px solid #e2e6db;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;transition:transform .2s,border-color .2s}
.doodle-tile img{width:100%;height:170px;object-fit:contain;display:block}
.doodle-tile span{font-size:12px;color:#6a7164;text-align:center;line-height:1.4}
@media(hover:hover){.doodle-tile:hover{transform:translateY(-3px);border-color:#b6beac}}
.doodles-note{font-size:15px;color:#6a7164;margin:0;line-height:1.6}
.doodle-viewer{padding:22px 34px 34px}
.doodle-back{background:#d5f58a;color:#26321c;border:0;border-radius:40px;padding:11px 20px;font-size:14px;font-weight:600;margin-bottom:18px}
.doodle-viewer img{max-width:100%;max-height:60dvh;object-fit:contain;display:block;margin:0 auto}
.doodle-caption{font-size:14px;color:#6a7164;margin:16px 0 0;text-align:center}
@media(max-width:700px){
 #doodles-dialog{width:94vw}
 .doodles-head{padding:24px 20px 0}
 .doodles-head h2{font-size:25px}
 .doodles-body{padding:18px 20px 24px}
 .doodles-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:14px}
 .doodle-tile{padding:10px;border-radius:14px}
 .doodle-tile img{height:126px}
 .doodle-viewer{padding:18px 20px 24px}
}