:root{--font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;--font-hand: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;--page: #9cba80;--panel: #f3f8ec;--paper: #fbfdf7;--tab: #e6efd8;--mint: #dcebc8;--line: #86a96a;--line-soft: #c5d8b0;--strong: #5f8744;--ink: #40592e;--butter: #fbf0c4;--blush: #f5cfcb;--chrome-h: 104px}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-ui);font-size:15px;line-height:1.65;color:var(--ink);-webkit-font-smoothing:antialiased}h1,h2,p,ul,figure{margin:0}ul{padding:0;list-style:none}button{font:inherit;color:inherit}img{max-width:100%;display:block}:focus-visible{outline:2px solid var(--strong);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity var(--fade) ease}.loader--leaving{opacity:0;pointer-events:none}.loader__logo{width:min(46vw,220px);height:auto;animation:loader-sway 2.4s ease-in-out infinite;transition:transform var(--fade) ease}.loader--leaving .loader__logo{transform:scale(.94)}.loader__dots{display:flex;gap:8px}.loader__dots span{width:7px;height:7px;border-radius:50%;background:var(--dot);animation:loader-dot 1.2s ease-in-out infinite}.loader__dots span:nth-child(2){animation-delay:.15s}.loader__dots span:nth-child(3){animation-delay:.3s}@keyframes loader-sway{0%,to{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-8px) rotate(2.5deg)}}@keyframes loader-dot{0%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}.toast-wrap{position:fixed;left:0;right:0;bottom:24px;display:flex;justify-content:center;pointer-events:none;z-index:60}.toast{background:var(--strong);color:#fff;padding:9px 16px;border-radius:10px;font-size:14px;font-weight:500;animation:toast-in .35s cubic-bezier(.3,1.6,.5,1) both,toast-out .3s ease 1.55s forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(14px) scale(.9)}}@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}.ears{position:absolute;top:-44px;left:50%;margin-left:-70px;padding:0;border:0;background:none;cursor:pointer;line-height:0;transform:translateY(28px)}.ears--in{transform:none;transition:transform .55s cubic-bezier(.3,1.6,.5,1) .8s}.ears__ear{transform-box:fill-box;transform-origin:50% 100%;transition:transform .2s}.ears__ear--l{animation:ear-twitch 7s ease-in-out 3s infinite}.ears__ear--r{animation:ear-twitch 9s ease-in-out 5s infinite}.ears:hover .ears__ear--l{transform:rotate(-9deg);animation:none}.ears:hover .ears__ear--r{transform:rotate(9deg);animation:none}.ears:active .ears__ear--l{transform:rotate(-22deg)}.ears:active .ears__ear--r{transform:rotate(22deg)}@keyframes ear-twitch{0%,90%,to{transform:rotate(0)}93%{transform:rotate(-10deg)}96%{transform:rotate(4deg)}}.sleepy{position:relative;padding:0;border:0;background:none;cursor:pointer;line-height:0;display:block}.sleepy svg{overflow:visible}.sleepy__body{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 3.6s ease-in-out infinite}.sleepy__head{transform-box:fill-box;transform-origin:50% 100%}.sleepy__tail{transform-box:fill-box;transform-origin:0% 100%}.sleepy--awake .sleepy__body{animation:stretch .7s ease-out both}.sleepy--awake .sleepy__head{animation:head-wiggle .5s ease-in-out 2}.sleepy--awake .sleepy__tail{animation:tail-wag .6s ease-in-out infinite}.sleepy__zzz{position:absolute;left:6px;top:-6px;font-family:var(--font-hand);font-style:normal;color:var(--strong);line-height:1}.sleepy__zzz i{position:absolute;font-style:normal;opacity:0;animation:zzz 3.6s ease-in-out infinite}.sleepy__zzz i:nth-child(1){font-size:14px;left:0}.sleepy__zzz i:nth-child(2){font-size:18px;left:12px;animation-delay:1.2s}.sleepy__zzz i:nth-child(3){font-size:22px;left:26px;animation-delay:2.4s}@keyframes breathe{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.04)}}@keyframes stretch{0%{transform:scale(1)}40%{transform:scaleX(1.06) scaleY(.94)}to{transform:scale(1)}}@keyframes head-wiggle{0%,to{transform:rotate(0)}50%{transform:rotate(-6deg)}}@keyframes tail-wag{0%,to{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}@keyframes zzz{0%{opacity:0;transform:translateY(8px)}25%{opacity:1}80%{opacity:0;transform:translate(6px,-22px)}to{opacity:0}}.chrome{position:sticky;top:0;z-index:20;background:var(--panel)}.tabs{display:flex;position:relative;z-index:1;width:max-content;max-width:100%}.tab{display:flex;align-items:center;gap:8px;padding:11px 22px;border:1.5px solid var(--line);border-bottom:0;margin-left:-1.5px;background:var(--tab);color:var(--strong);font-size:14px;font-weight:500;text-decoration:none;transition:background .15s}.tab:first-child{margin-left:0;border-radius:14px 0 0}.tab:last-child{border-radius:0 14px 0 0}.tab:first-child:last-child{border-radius:14px 14px 0 0}.tab:hover{background:var(--mint)}.tab--active{background:var(--panel);color:var(--ink);margin-bottom:-1.5px;padding-bottom:12.5px}.toolbar{display:flex;align-items:center;gap:10px;padding:12px clamp(12px,3vw,36px);border:1.5px solid var(--line);border-radius:0 18px 0 0;background:var(--panel)}.nav-btn{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--strong);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}.nav-btn:hover{background:var(--mint)}.nav-btn:active{transform:scale(.92)}.url{flex:1;min-width:0;height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;color:var(--strong);font-size:14px;font-weight:500}.url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewport{display:block;border:1.5px solid var(--line);border-top:0;border-radius:0 0 18px 18px;background:var(--panel)}@media (max-width: 620px){.tab{padding:10px 14px}.tab--active{padding-bottom:11.5px}.tab span{display:none}.tab--active span{display:inline}.toolbar{gap:6px}.nav-btn{width:32px;height:32px}.url{height:32px;padding:0 12px}}.ph{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--mint) 0 8px,var(--panel) 8px 16px);color:var(--strong);font-family:var(--font-hand);font-size:17px}.ph span{background:var(--panel);padding:1px 10px;border-radius:6px}.ph--rect{min-height:100%}.candle__flame{transform-box:fill-box;transform-origin:50% 100%;animation:flicker .9s ease-in-out infinite}.candle__smoke{opacity:0}.candle--out .candle__flame{display:none}.candle--out .candle__smoke{animation:smoke 1.6s ease-out forwards}@keyframes flicker{0%,to{transform:scale(1) rotate(-2deg)}50%{transform:scale(.92,1.08) rotate(2deg)}}@keyframes smoke{0%{opacity:.9;transform:translateY(2px)}to{opacity:0;transform:translateY(-8px)}}.confetti{position:absolute;left:50%;top:50%;pointer-events:none}.confetti i{position:absolute;border-radius:1px;animation:confetti 1.15s cubic-bezier(.2,.7,.4,1) both}@keyframes confetti{0%{opacity:1;transform:translate(0) rotate(0)}45%{opacity:1;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) * .5))}to{opacity:0;transform:translate(calc(var(--dx) * 1.15),calc(var(--dy) + 150px)) rotate(var(--rot))}}.section{padding:56px clamp(18px,5vw,56px);scroll-margin-top:calc(var(--chrome-h) - 10px)}.section+.section{border-top:1.5px dashed var(--line-soft)}.title{font-family:var(--font-hand);font-weight:400;color:var(--strong);line-height:1.05;font-size:clamp(36px,5.2vw,50px);transform:rotate(-1deg);transform-origin:left}.title--sm{font-size:32px}.home__grid{display:grid;align-items:center;gap:40px;grid-template-columns:minmax(150px,200px) 1fr minmax(210px,250px)}.avatar{width:clamp(150px,18vw,200px);aspect-ratio:1;justify-self:center;border-radius:50%;overflow:hidden;border:2px solid var(--line)}.avatar img{width:100%;height:100%;object-fit:cover}.home__text{max-width:46ch}.scribble{display:block;width:190px;height:10px;margin:6px 0 14px}.home__meta{margin:10px 0 18px;color:var(--strong)}.pill{position:relative;display:inline-flex;align-items:center;gap:10px;padding:9px 26px 9px 20px;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--strong);font-weight:500;cursor:pointer;transition:background .15s,transform .15s}.pill:hover{background:var(--mint)}.pill:active{transform:scale(.97)}.thoughts{align-self:center;border:1.5px solid var(--line);background:var(--paper);font-size:14px}.thoughts__head{background:var(--strong);color:#fff;text-align:center;padding:10px 12px;font-size:14px;font-weight:500}.thoughts label{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;color:var(--strong);border-top:1.5px solid var(--line)}.thoughts li:first-child label{border-top:0}.thoughts input{position:absolute;opacity:0;pointer-events:none}.thoughts .box{flex:none;width:15px;height:15px;border-radius:3px;border:1.5px solid var(--line);background:var(--panel);position:relative;transition:background .15s}.thoughts .box:after{content:"";position:absolute;left:4px;top:.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .2s cubic-bezier(.3,1.8,.5,1)}.thoughts input:checked+.box{background:var(--strong);border-color:var(--strong)}.thoughts input:checked+.box:after{transform:rotate(45deg) scale(1)}.thoughts input:focus-visible+.box{outline:2px solid var(--strong);outline-offset:2px}.thoughts .txt{transition:opacity .2s}.thoughts input:checked~.txt{text-decoration:line-through;opacity:.55}.gallery__grid{display:grid;gap:38px 30px;margin-top:34px;align-items:start;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.photo{--tilt: 0deg;--drop: 0px;--ratio: 1 / 1;position:relative;background:var(--paper);border:1.5px solid var(--line);padding:10px 10px 8px;box-shadow:3px 3px 0 var(--line-soft);transform:rotate(var(--tilt)) translateY(var(--drop));transition:transform .28s cubic-bezier(.3,1.5,.5,1)}.photo:hover{transform:rotate(0) translateY(calc(var(--drop) - 4px))}.photo:before{content:"";position:absolute;top:-11px;left:50%;width:56px;height:20px;margin-left:-28px;background:#86a96a73;transform:rotate(-3deg)}.photo__frame{aspect-ratio:var(--ratio);overflow:hidden}.photo__frame img{width:100%;height:100%;object-fit:cover}.photo figcaption{font-family:var(--font-hand);font-size:19px;color:var(--strong);text-align:center;padding-top:8px;line-height:1.2}.photo:nth-child(1){--tilt: -2.5deg;--ratio: 4 / 5}.photo:nth-child(2){--tilt: 1.8deg;--drop: 18px}.photo:nth-child(3){--tilt: -1deg;--ratio: 5 / 4}.photo:nth-child(4){--tilt: 2.5deg;--drop: 10px;--ratio: 4 / 5}.photo:nth-child(5){--tilt: -1.8deg}.notes__row{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px;align-items:flex-start}.note{position:relative;width:min(100%,235px);padding:20px 18px 16px;border:1.5px solid var(--line);box-shadow:3px 3px 0 var(--line-soft);font-family:var(--font-hand);font-size:19px;line-height:1.35;transform:rotate(var(--tilt));transition:transform .28s cubic-bezier(.3,1.5,.5,1);cursor:pointer}.note:hover{transform:rotate(0) translateY(-3px)}.note--butter{background:var(--butter)}.note--mint{background:var(--mint)}.note--blush{background:var(--blush)}.note__from{margin-top:10px;text-align:right;color:var(--strong)}.note__paw{position:absolute;margin:-13px 0 0 -13px;pointer-events:none;color:var(--ink);opacity:.45;transform:rotate(var(--rot));animation:stamp .3s cubic-bezier(.3,1.8,.5,1) both}@keyframes stamp{0%{opacity:0;transform:rotate(var(--rot)) scale(1.8)}}.credit{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:0}.credit__text{padding-bottom:40px}.credit__text ul{margin-top:10px;color:var(--strong)}@media (max-width: 820px){.section{padding-top:40px;padding-bottom:40px}.home__grid{grid-template-columns:1fr;gap:28px}.home__text{max-width:none}.thoughts{align-self:stretch}.photo{--drop: 0px !important}.credit{padding-bottom:0}.credit__text{padding-bottom:28px}}.page{min-height:100vh;padding:56px clamp(10px,3vw,28px) 40px;background:var(--page);opacity:0;transform:translateY(10px)}.page--in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}.stage{position:relative;max-width:1040px;margin:0 auto}.panel{position:relative;z-index:1;background:var(--panel);border-radius:24px;padding:24px clamp(12px,4vw,44px) 40px}
