/* CloverHug portal v3: a picture book garden.
   Layout: one cozy scene up top, then a few quiet sections with lots of air; mascots do the decorating.
   Colour = warm paper + brown crayon + each friend's soft colour. No black ink, no hard boxes. */
:root{
  --paper:#fbf5ea; --paper-2:#f5ebda; --card:#fffbf4;
  --ink:#5e4334; --ink-2:#86695a; --ink-3:#a8917f;
  --crayon:#8b5e47; --crayon-soft:#c9a68f;
  --pink:#ec8fa3; --pink-ink:#b4536b; --pink-soft:#fbe3e8;
  --leaf:#86b46a; --leaf-ink:#55803f; --leaf-soft:#dfecca;
  --sun:#f8d27a; --sky:#e3edf3; --cloud:#ffffff;
  --shadow:rgba(120,80,50,.13);
  --tint:100%; --dk:0%;
  --f-head:"Fredoka","Huninn",ui-rounded,system-ui,sans-serif;
  --f-body:"Nunito","Huninn",system-ui,sans-serif;
  --f-cs:"Nunito","Noto Sans TC",system-ui,sans-serif;
  --wrap:1040px;
  --gut-l:max(20px,env(safe-area-inset-left,0px)); --gut-r:max(20px,env(safe-area-inset-right,0px));
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#2a221d; --paper-2:#33291f; --card:#382d25;
  --ink:#f3e6d7; --ink-2:#d6c2ae; --ink-3:#c6b09c;
  --crayon:#e3c3a6; --crayon-soft:#8a6f5c;
  --pink:#e98aa0; --pink-ink:#f4b3c2; --pink-soft:#4a2f35;
  --leaf:#88b56c; --leaf-ink:#b5d69c; --leaf-soft:#34402b;
  --sun:#f2cf7f; --sky:#2f3640; --cloud:#4a4048;
  --shadow:rgba(0,0,0,.35); --tint:22%; --dk:100%; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#2a221d; --paper-2:#33291f; --card:#382d25;
  --ink:#f3e6d7; --ink-2:#d6c2ae; --ink-3:#c6b09c;
  --crayon:#e3c3a6; --crayon-soft:#8a6f5c;
  --pink:#e98aa0; --pink-ink:#f4b3c2; --pink-soft:#4a2f35;
  --leaf:#88b56c; --leaf-ink:#b5d69c; --leaf-soft:#34402b;
  --sun:#f2cf7f; --sky:#2f3640; --cloud:#4a4048;
  --shadow:rgba(0,0,0,.35); --tint:22%; --dk:100%; color-scheme:dark}
html[lang="zh-Hant"]{--f-head:"LXGW Marker Gothic","Huninn",sans-serif;--f-body:"Huninn","Noto Sans TC",sans-serif}
html[lang="ja"]{--f-head:"Kiwi Maru","Zen Maru Gothic",sans-serif;--f-body:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;font-synthesis:none;line-break:strict}
.ph{word-break:keep-all}
.lang button[lang="ja"]{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",var(--f-head)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--paper);z-index:60}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-head);font-weight:600;margin:0;line-height:1.3;text-wrap:balance;color:var(--ink)}
html[lang="zh-Hant"] h1,html[lang="zh-Hant"] h2,html[lang="zh-Hant"] h3{font-weight:400;letter-spacing:.03em}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* crayon kit */
:where([data-cr]){position:relative;isolation:isolate}
.cr{position:absolute;left:0;top:0;pointer-events:none;overflow:hidden;z-index:-1}
.crl{stroke-dasharray:1 0}
.drawn .crl{animation:crdraw 1.1s cubic-bezier(.55,.1,.35,1) both}
.drawn .crl2{animation-delay:.25s}
.drawn .crfill{animation:crfill .6s ease-out both}
@keyframes crdraw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes crfill{from{opacity:0}to{opacity:1}}

/* buttons: soft crayon pills that squish */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 28px;border:0;background:none;cursor:pointer;text-decoration:none;
  font-family:var(--f-head);font-size:18px;line-height:1.1;color:var(--ink);border-radius:999px;transition:transform .35s var(--spring)}
html[lang="zh-Hant"] .btn{font-size:19px}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn:active{transform:scale(.94);transition-duration:.1s}
.btn.pri{color:#fff}
.btn svg{width:20px;height:20px;flex:none}
.btn.sm{min-height:44px;padding:9px 20px;font-size:16px}
.tlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:17px;text-decoration:none;color:var(--pink-ink);padding:6px 2px;background:none;border:0;cursor:pointer}
.tlink svg{width:18px;height:18px;transition:transform .3s var(--spring)}
.tlink:hover svg{transform:translateX(4px)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .wrap{display:flex;align-items:center;gap:18px;height:70px}
.logo{display:flex;align-items:center;margin-right:auto;transition:transform .4s var(--spring)}
.logo:hover{transform:rotate(-3deg) scale(1.04)}
.logo img{height:34px;width:auto}
.nav{display:flex;gap:4px}
.nav a{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;text-decoration:none;font-family:var(--f-head);font-size:17px;color:var(--ink-2);transition:background .2s,color .2s,transform .35s var(--spring)}
.nav a svg{width:22px;height:22px;flex:none}
.nav a:hover{color:var(--ink);transform:translateY(-2px)}
.nav a[aria-current]{color:var(--ink);background:var(--paper-2)}
.nav a:hover svg{animation:wig .5s ease}
.lang{display:flex;background:var(--paper-2);border-radius:999px;padding:3px}
.lang button{border:0;background:none;border-radius:999px;padding:5px 12px;font-family:var(--f-head);font-size:14px;cursor:pointer;color:var(--ink-3)}
.lang button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 2px 6px var(--shadow)}
.door{font-size:14px;color:var(--ink-3);text-decoration:none;font-family:var(--f-head)}
.door:hover{color:var(--ink)}
.tabbar{display:none}
@media (max-width:860px){
  .nav,.door{display:none}
  .top .wrap{height:60px}
  .logo img{height:30px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:45;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));
    background:var(--card);border-radius:26px;padding:6px;box-shadow:0 6px 22px var(--shadow)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 0 4px;border-radius:20px;text-decoration:none;font-family:var(--f-head);font-size:12px;color:var(--ink-3)}
  html[lang="zh-Hant"] .tabbar a{font-size:13px}
  .tabbar a svg{width:26px;height:26px;transition:transform .35s var(--spring)}
  .tabbar a[aria-current]{color:var(--ink);background:var(--paper-2)}
  .tabbar a[aria-current] svg{transform:translateY(-2px) scale(1.08)}
  main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
}

/* section rhythm */
.sec{padding-block:clamp(44px,6vw,84px)}
.sec-h{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:clamp(22px,3vw,38px)}
.sec-h h2{font-size:clamp(27px,3.3vw,38px)}
.sec-h h2 .doo{width:.9em;height:.9em;display:inline-block;vertical-align:-.08em;margin-right:.3em}
.sec-h p{color:var(--ink-2);max-width:32em}
.sec-h .ul{display:block;width:120px;height:14px;margin-top:-4px}
.more{display:flex;justify-content:center;margin-top:clamp(20px,3vw,32px)}

/* ======== HOME: the garden (friends wander in 2.5D, see js/garden.js) ======== */
.garden{position:relative;overflow:hidden;height:clamp(540px,calc(100svh - 70px),900px);background:#dfe9e4;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:default;isolation:isolate}
.g-plate{position:absolute;max-width:none;user-select:none;pointer-events:none;will-change:transform}
.g-world{position:absolute;inset:0;z-index:2;will-change:transform}
.garden::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(120% 90% at 50% 60%,transparent 62%,rgba(90,60,35,.16));mix-blend-mode:multiply}
.wk{position:absolute;left:0;top:0;width:0;height:0;padding:0;border:0;background:none;cursor:pointer;outline:none}
.wk .bd{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.wk img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none;
  filter:drop-shadow(0 1px 0 rgba(255,250,240,.35))}
.wk .shd,.turn .shd,.rest .shd{position:absolute;left:0;top:0;width:100px;height:100px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(70,46,26,.34),rgba(70,46,26,.16) 55%,rgba(70,46,26,0))}
.wk:focus-visible .shd{box-shadow:0 0 0 6px var(--pink)}
.gprop,.gclover,.gemo{position:absolute;left:0;top:0;pointer-events:none;max-width:none;user-select:none}
.gemo{filter:drop-shadow(0 3px 3px rgba(80,50,30,.2))}
.gclover{filter:drop-shadow(0 4px 3px rgba(60,40,20,.22))}
.g-say{position:absolute;left:0;top:0;z-index:100000;max-width:min(270px,72vw);padding:12px 16px 13px;border-radius:18px;
  background:#fffdf7 url(../quiz/love/props/paper_tile.webp) center/256px;color:#5e4334;font-size:15.5px;line-height:1.55;
  box-shadow:0 0 0 1.6px rgba(122,86,62,.7),0 14px 26px -12px rgba(70,45,25,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.g-say.on{opacity:1;pointer-events:auto}
.g-say.on .tx,.g-say.on .go{animation:sayin .45s var(--spring) both}
@keyframes sayin{from{opacity:0;transform:translateY(6px) scale(.92)}}
.g-say .go{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-family:var(--f-head);font-size:14.5px;color:#b4536b;text-decoration:none}
.g-say .go svg{width:15px;height:15px}
.g-say .tx{display:block}
.g-say .tl{position:absolute;bottom:-7px;left:var(--tx,50%);width:14px;height:14px;margin-left:-7px;transform:rotate(45deg);background:#fffdf7;
  box-shadow:1.6px 1.6px 0 0 rgba(122,86,62,.7);border-bottom-right-radius:3px}
.g-copy{position:absolute;left:0;right:0;top:clamp(26px,5vh,56px);z-index:4;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.g-copy .hello{font-family:var(--f-head);color:#a24c64;font-size:clamp(17px,1.7vw,21px);background:rgba(255,251,243,.78);padding:2px 14px;border-radius:999px}
.g-copy h1{font-size:clamp(30px,4vw,54px);max-width:11em;color:#4f3829;text-shadow:0 2px 0 rgba(255,250,240,.6),0 0 22px rgba(255,250,240,.75)}
.g-tip{position:absolute;z-index:4;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13.5px;color:#5e4334;background:rgba(255,251,243,.82);padding:5px 14px 5px 10px;border-radius:999px;box-shadow:0 4px 14px -6px rgba(70,45,25,.4);pointer-events:none}
.g-tip svg{width:17px;height:17px}
.g-fall{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.g-fall img{position:absolute;top:-40px;width:var(--s,20px);height:auto;opacity:.9;animation:fall var(--d,16s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes fall{0%{transform:translate(0,0) rotate(-30deg)}50%{transform:translate(calc(var(--x,60px) * .5),55vh) rotate(80deg)}100%{transform:translate(var(--x,60px),110vh) rotate(200deg)}}
/* v4: view blend, text emotes, clover fetch, clover jar, group-hug burst */
.wk img.out{z-index:1;animation:vout .09s linear forwards}
/* a drawn friend holding a clover out to you glows softly: tap me */
.wk.offer .bd img:not([hidden]){animation:wkglow 1.4s ease-in-out infinite}
@keyframes wkglow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,250,220,.95)) drop-shadow(0 0 16px rgba(255,214,110,.35))}50%{filter:drop-shadow(0 0 10px rgba(255,250,220,1)) drop-shadow(0 0 34px rgba(255,214,110,.75))}}
@media (prefers-reduced-motion:reduce){.wk.offer .bd img:not([hidden]){animation:none;filter:drop-shadow(0 0 8px rgba(255,250,220,.95))}}
@keyframes vout{to{opacity:0}}
.gtx{display:grid;place-items:center;border-radius:50%;background:#fffaf0;color:#b4536b;font:700 20px/1 var(--f-head);
  box-shadow:0 0 0 1.6px rgba(122,86,62,.7),0 4px 8px -3px rgba(70,45,25,.35)}
.gthink{background:#f4f6fa;color:#4f5b75;box-shadow:0 0 0 1.6px rgba(79,91,117,.55),0 4px 8px -3px rgba(40,50,70,.3)}
.gthink::after{content:'';position:absolute;left:8%;bottom:-14%;width:22%;height:22%;border-radius:50%;background:#f4f6fa;box-shadow:0 0 0 1.4px rgba(79,91,117,.55)}
.gclover.take{pointer-events:auto;cursor:pointer;animation:glow 1.3s ease-in-out infinite}
@keyframes glow{50%{filter:drop-shadow(0 0 7px rgba(255,236,150,1)) drop-shadow(0 0 2px rgba(255,255,255,.9))}}
.g-jar{position:absolute;z-index:5;right:clamp(10px,1.8vw,22px);top:12px;display:flex;align-items:center;gap:6px;padding:4px 11px 4px 5px;
  border:0;border-radius:999px;background:rgba(255,251,243,.5);color:#5e4334;font-family:var(--f-body);cursor:pointer;opacity:.82;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity .3s,background .3s;
  box-shadow:0 0 0 1.2px rgba(122,86,62,.18),0 4px 12px -8px rgba(70,45,25,.35);-webkit-tap-highlight-color:transparent}
.g-jar:hover,.g-jar.pop,.g-jar.full,.garden.party .g-jar{opacity:1;background:rgba(255,251,243,.82)}
.g-jar.compact{padding:4px 9px 4px 4px}
.g-jar.compact .jl b{display:none}
.g-jar.compact .jl i{font-size:12.5px;font-weight:700;color:#5e4334}
.g-jar.low{top:auto;bottom:14px}
.garden .g-tip{transition:opacity .5s}
.garden.party .g-tip{opacity:0}
.g-jar svg{width:32px;height:32px;overflow:visible}
.g-jar .stem{fill:none;stroke:#6c8f45;stroke-width:2.2;stroke-linecap:round}
.g-jar .lf{fill:rgba(255,255,255,.7);stroke:rgba(108,143,69,.7);stroke-width:1.3;stroke-dasharray:2.4 2;transition:fill .4s,stroke .4s}
.g-jar .lf.on{fill:var(--c);stroke:rgba(70,40,20,.45);stroke-dasharray:none}
.g-jar .lf.new{animation:leafpop .7s var(--spring)}
@keyframes leafpop{0%{transform:scale(.3)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.g-jar.pop{animation:jarpop .5s var(--spring)}
@keyframes jarpop{40%{transform:scale(1.12) rotate(-3deg)}}
.g-jar.full{box-shadow:0 0 0 2px rgba(196,90,122,.55),0 0 0 6px rgba(255,220,230,.55),0 6px 16px -8px rgba(70,45,25,.45)}
.g-jar .jl{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.15}
.g-jar .jl b{font-size:12px;font-weight:700}
.g-jar .jl i{font-style:normal;font-size:11px;color:#86695a}
.g-burst{position:absolute;left:0;top:0;width:0;height:0;z-index:99990;pointer-events:none}
.g-burst img{position:absolute;left:0;top:0;width:var(--s);max-width:none;opacity:0;animation:burst 1.9s cubic-bezier(.2,.7,.3,1) var(--dl) forwards}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}12%{opacity:1}
  55%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(calc(var(--r) * .6)) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx) * 1.15),calc(-50% + var(--dy) + 130px)) rotate(var(--r)) scale(.9)}}
@media (max-width:700px){
  .garden{height:clamp(520px,calc(100svh - 150px),760px)}
  /* phones (Jeff 8 Nov): the big title covered the garden, so it is kept only for screen readers;
     "welcome home" sits small in the top-left corner, the clover jar stays top-right */
  .garden .g-copy{top:12px;align-items:flex-start;text-align:left;padding-left:10px;padding-right:10px}
  .g-copy .hello{font-size:14.5px;padding:2px 12px}
  .g-copy h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .g-tip{font-size:12.5px;bottom:12px}
  .g-jar,.g-jar.low{top:10px;bottom:auto;padding:3px 9px 3px 3px;gap:4px}
  .g-jar svg{width:27px;height:27px}
  .g-jar .jl b{display:none}
  .g-jar .jl i{font-size:13px;font-weight:700;color:#5e4334}
}
.scene-cta{padding:clamp(22px,3vw,32px) var(--gut-r) clamp(10px,2vw,20px) var(--gut-l);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  background:linear-gradient(#e7ecd6,transparent)}
.scene-cta p{color:var(--ink-2);max-width:28em;text-wrap:balance}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px}
@media (max-width:480px){.scene-cta .ctas{gap:10px}.scene-cta .btn{min-height:46px;padding:10px 18px;font-size:16px}}

/* friend page: drag to turn the friend around */
.fhero .stage{position:relative;height:clamp(300px,38vw,470px);display:flex;justify-content:center}
.turn{position:absolute;left:50%;bottom:clamp(36px,4.5vw,56px);width:0;height:calc(clamp(230px,30vw,380px) * var(--h,1));padding:0;border:0;background:none;cursor:grab;touch-action:pan-y}
.turn:active{cursor:grabbing}
.turn .bd{position:absolute;left:0;bottom:0;top:auto;height:0;transform-origin:0 0;will-change:transform}
.turn .bd img{position:absolute;max-width:none;user-select:none;-webkit-user-drag:none}
.turn .shd{left:0;top:auto;bottom:0;transform:translate(-50%,50%) scale(1.9,.36)}
.turn-tip{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;font-size:13.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center}
.turn-tip svg{width:17px;height:17px}
.t-say{position:absolute;left:50%;top:0;transform:translateX(-50%);max-width:min(260px,80vw);padding:11px 16px;border-radius:18px;background:#fffdf7;color:#5e4334;font-size:15px;line-height:1.5;
  box-shadow:0 0 0 1.6px rgba(122,86,62,.7),0 12px 22px -12px rgba(70,45,25,.45);opacity:0;transition:opacity .25s;pointer-events:none;z-index:3}
.t-say.on{opacity:1;animation:sayin .45s var(--spring)}

/* footer nap */
/* footer: all four friends resting together on the hill (Jeff 4 Nov). One sprite, drawn frames only; motion is CSS. */
.foot{--rw:min(calc(100vw - 20px),420px);--rb:clamp(8px,1.6vw,20px)}
@media (min-width:640px){.foot{--rw:clamp(420px,46vw,610px)}}
.rest{position:absolute;left:50%;bottom:var(--rb);width:var(--rw);aspect-ratio:1545/470;transform:translateX(-50%);pointer-events:none}
.rest .rf{position:absolute;bottom:0;transform-origin:50% 100%}
.rest .rb{position:absolute;inset:0;overflow:hidden;transform-origin:50% 100%;animation:rbr 4s ease-in-out infinite}
.rest .rb img{position:absolute;max-width:none;height:auto;user-select:none}
.rest .shd{position:absolute;bottom:0;top:auto;height:9%;transform:translateY(45%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,46,26,.3),rgba(70,46,26,.14) 55%,rgba(70,46,26,0))}
/* Gami (Jeff 5 Nov): a tired flop on his tummy; every 16s he rolls onto his back, wiggles four paws up, rolls back */
.rest .r-g{z-index:3;opacity:0;animation:gv1 16s step-end infinite,groll 16s ease-in-out infinite} .rest .r-g .rb{animation-duration:3.6s}
.rest .g1{opacity:1}.rest .g2{animation-name:gv2,groll}.rest .g3{animation-name:gv3,groll}.rest .g4{animation-name:gv4,groll}
@keyframes gv1{0%{opacity:1}46%{opacity:0}92%{opacity:1}100%{opacity:1}}
@keyframes gv2{0%{opacity:0}46%{opacity:1}52%{opacity:0}76%{opacity:1}80%{opacity:0}100%{opacity:0}}
@keyframes gv3{0%{opacity:0}52%{opacity:1}76%{opacity:0}100%{opacity:0}}
@keyframes gv4{0%{opacity:0}80%{opacity:1}92%{opacity:0}100%{opacity:0}}
@keyframes groll{0%,44%{transform:none}46%{transform:translateY(-7%) rotate(-5deg)}48.5%,49.5%{transform:none}52%{transform:translateY(-7%) rotate(5deg)}54.5%{transform:none}56%{transform:rotate(-3deg)}58%{transform:rotate(3deg)}60%{transform:rotate(-3deg)}62%{transform:rotate(3deg)}64%{transform:none}67%{transform:rotate(-2.5deg)}69%{transform:rotate(2.5deg)}71%,74%{transform:none}76%{transform:translateY(-7%) rotate(-5deg)}78.5%,79.5%{transform:none}80%{transform:translateY(-6%) rotate(3deg)}82.5%,100%{transform:none}}
/* Caeli (Jeff 6 Nov): on Gami's 16s beat she wakes, turns to watch him roll and wiggle, smiles, then settles */
.rest .r-c,.rest .r-c2,.rest .r-cl{z-index:2} .rest .r-c .rb,.rest .r-c2 .rb,.rest .r-cl .rb{animation-duration:4.6s;animation-delay:-1.2s}
.rest .r-c2,.rest .r-cl{opacity:0}
.rest .r-c{animation:cv0 16s step-end infinite,cbob 16s ease-in-out infinite}.rest .r-c2{animation:cv1 16s step-end infinite,cbob 16s ease-in-out infinite}
.rest .cl1{animation:cv2 16s step-end infinite,cbob 16s ease-in-out infinite}.rest .cl2{animation:cv3 16s step-end infinite,cbob 16s ease-in-out infinite}
.rest .cl3{animation:cv4 16s step-end infinite,cbob 16s ease-in-out infinite}.rest .cl4{animation:cv5 16s step-end infinite,cbob 16s ease-in-out infinite}
@keyframes cv0{0%{opacity:1}40%{opacity:0}92%{opacity:1}100%{opacity:1}}
@keyframes cv1{0%{opacity:0}40%{opacity:1}47%{opacity:0}86%{opacity:1}92%{opacity:0}100%{opacity:0}}
@keyframes cv2{0%{opacity:0}47%{opacity:1}52%{opacity:0}81%{opacity:1}86%{opacity:0}100%{opacity:0}}
@keyframes cv3{0%{opacity:0}52%{opacity:1}57%{opacity:0}76%{opacity:1}81%{opacity:0}100%{opacity:0}}
@keyframes cv4{0%{opacity:0}57%{opacity:1}64%{opacity:0}69%{opacity:1}76%{opacity:0}100%{opacity:0}}
@keyframes cv5{0%{opacity:0}64%{opacity:1}69%{opacity:0}100%{opacity:0}}
@keyframes cbob{0%,45%{transform:none}47%{transform:translateY(-3%)}49%,55%{transform:none}57%{transform:translateY(-4%) rotate(-2deg)}59.5%,62%{transform:none}64%{transform:translateY(-3%)}66%,67%{transform:none}69%{transform:translateY(-3%) rotate(1.5deg)}71.5%,84%{transform:none}86%{transform:translateY(-2.5%)}88%,100%{transform:none}}
/* Amori contact shadow (Jeff 6 Nov) */
.rest .shc{height:5%;transform:translateY(30%);background:radial-gradient(closest-side,rgba(60,38,20,.34),rgba(60,38,20,.12) 60%,rgba(60,38,20,0))}
/* end shadow */
/* Amori (Jeff 6 Nov): rests his paws on his tummy, sways, smiles with closed eyes, looks over when Gami tips, cheers while he wiggles */
.rest .r-a{z-index:1;opacity:0} .rest .r-a .rb{animation-duration:3.9s;animation-delay:-.6s} .rest .a1{opacity:1}
.rest .a1{animation:av1 16s step-end infinite,asway 16s ease-in-out infinite}.rest .a2{animation:av2 16s step-end infinite,asway 16s ease-in-out infinite}
.rest .a3{animation:av3 16s step-end infinite,asway 16s ease-in-out infinite}.rest .a4{animation:av4 16s step-end infinite,asway 16s ease-in-out infinite}
@keyframes av1{0%{opacity:1}20%{opacity:0}28%{opacity:1}44%{opacity:0}86%{opacity:1}100%{opacity:1}}
@keyframes av2{0%{opacity:0}50%{opacity:1}77%{opacity:0}100%{opacity:0}}
@keyframes av3{0%{opacity:0}20%{opacity:1}28%{opacity:0}100%{opacity:0}}
@keyframes av4{0%{opacity:0}44%{opacity:1}50%{opacity:0}77%{opacity:1}86%{opacity:0}100%{opacity:0}}
@keyframes asway{0%{transform:rotate(-2deg)}12%{transform:rotate(2deg)}25%{transform:rotate(-2deg)}37%{transform:rotate(2deg)}47%{transform:none}50%{transform:none}52%{transform:translateY(-5%)}54.5%{transform:none}57.5%{transform:translateY(-5%) rotate(-2deg)}60%{transform:none}64%{transform:translateY(-4%) rotate(2deg)}66.5%{transform:none}69.5%{transform:translateY(-4%)}72%{transform:none}77%{transform:none}88%{transform:rotate(2deg)}100%{transform:rotate(-2deg)}}
/* end Amori */
/* Tazumi (Jeff 6 Nov): keeps reading and turns a page twice in every 16s loop */
.rest .r-t{z-index:2;opacity:0} .rest .r-t .rb{animation-duration:4.9s;animation-delay:-2s} .rest .t1{opacity:1}
.rest .t1{animation:tv1 16s step-end infinite,rnod 6.4s ease-in-out infinite}.rest .t2{animation:tv2 16s step-end infinite,rnod 6.4s ease-in-out infinite}
.rest .t3{animation:tv3 16s step-end infinite,rnod 6.4s ease-in-out infinite}.rest .t4{animation:tv4 16s step-end infinite,rnod 6.4s ease-in-out infinite}
@keyframes tv1{0%{opacity:1}18%{opacity:0}30%{opacity:1}84%{opacity:0}96%{opacity:1}100%{opacity:1}}
@keyframes tv2{0%{opacity:0}18%{opacity:1}21%{opacity:0}84%{opacity:1}87%{opacity:0}100%{opacity:0}}
@keyframes tv3{0%{opacity:0}21%{opacity:1}24%{opacity:0}87%{opacity:1}90%{opacity:0}100%{opacity:0}}
@keyframes tv4{0%{opacity:0}24%{opacity:1}30%{opacity:0}90%{opacity:1}96%{opacity:0}100%{opacity:0}}
/* end Tazumi */
.rest .tea{position:absolute;bottom:0;z-index:3}
.rest .tea img{display:block;width:100%;height:auto;max-width:none}
.rest .tea .st{position:absolute;width:13%;bottom:86%;opacity:0;animation:rsteam 3.6s ease-out infinite}
.rest .tea .st1{left:30%} .rest .tea .st2{left:45%;animation-delay:-1.2s} .rest .tea .st3{left:60%;animation-delay:-2.4s}
@keyframes rbr{50%{transform:scale(1.008,1.018)}}

@keyframes rpeek{0%,62%{opacity:0}63%,86%{opacity:1}87%{opacity:0}}
@keyframes rpeek2{0%,62%{opacity:1}63%,86%{opacity:0}87%{opacity:1}}
@keyframes rsway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes rnod{0%,100%{transform:rotate(0)}40%{transform:rotate(1.4deg)}70%{transform:rotate(-.6deg)}}
@keyframes rsteam{0%{opacity:0;transform:translateY(20%) scale(.8)}25%{opacity:.75}100%{opacity:0;transform:translateY(-70%) scale(1.15)}}

/* ======== friends ======== */
.friends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,30px)}
.fr{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;text-decoration:none;color:inherit}
.fr .pic{width:min(100%,210px);aspect-ratio:1;margin-bottom:4px}
.fr .pic{display:block;position:relative}
.fr .pic img{position:absolute;left:50%;bottom:9%;translate:-50% 0;height:calc(var(--fh,.8) * 100%);width:auto;max-width:90%;object-fit:contain;transition:transform .5s var(--spring);filter:drop-shadow(0 6px 4px rgba(120,80,50,.12))}
.fr-go:hover .pic img{transform:translateY(-8px) rotate(-3deg) scale(1.04)}
.fr-go:hover .pic .cr{animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.03)}}
.fr-go>b{font-family:var(--f-head);font-weight:600;font-size:clamp(22px,2.2vw,26px);color:var(--fname);line-height:1.2}
html[lang="zh-Hant"] .fr b{font-weight:400}
.fr .en{font-size:14px;color:var(--ink-3);font-family:var(--f-head)}
.fr p{font-size:15px;color:var(--ink-2);max-width:14em;margin-bottom:6px}
.fr-go{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit;border-radius:20px}
/* leaf close-up button: sits at the bottom of the card, so the 4 line up whatever the motto length */
.leafbtn{margin-top:auto;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font:inherit;text-align:left;color:var(--fname);
  background:var(--fbg);border-radius:999px;padding:3px 13px 3px 4px;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--fc) 28%,transparent);transition:transform .35s var(--spring),box-shadow .2s}
.leafbtn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 0 2px color-mix(in srgb,var(--fc) 45%,transparent),0 6px 14px -8px var(--shadow)}
.leafbtn .lc{width:38px;height:38px;flex:none;animation:leafnod 6s ease-in-out infinite;animation-delay:var(--ld,0s)}
.leafbtn b{display:block;font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1.25;white-space:nowrap}
html[lang="zh-Hant"] .leafbtn b{font-weight:400}
.leafbtn i{display:block;font-style:normal;font-size:11.5px;line-height:1.25;color:var(--ink-3);white-space:nowrap}
.lc path,.lfd .big path{stroke:var(--crayon);stroke-width:2.2;stroke-linejoin:round;opacity:.3;transition:opacity .3s,transform .45s var(--spring)}
.lc path.on,.lfd .big path.on{opacity:1}
.lc path:not(.on){display:none}   /* the close-up shows just this friend's quarter */
@keyframes leafnod{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-9deg) scale(1.08)}88%{transform:rotate(7deg) scale(1.08)}92%{transform:rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){.leafbtn .lc{animation:none}}
/* leaf meaning sheet */
dialog.lfd{border:0;padding:0;background:transparent;width:min(440px,92vw);max-height:92vh;overflow:visible}
dialog.lfd::backdrop{background:rgba(60,40,30,.55);backdrop-filter:blur(3px)}
dialog.lfd[open]{animation:lbin .35s var(--spring)}
.lfd .sheet{position:relative;background:linear-gradient(var(--fbg),var(--card) 46%);color:var(--ink);border-radius:26px;padding:22px 22px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;max-height:92vh;overflow:auto;box-shadow:0 20px 50px -20px rgba(40,25,15,.5)}
.lfd .x{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.lfd .big{width:min(150px,40vw);height:auto;overflow:visible;margin-top:4px}
.lfd .big path{cursor:pointer}
.lfd .big path.on{transform:scale(1.1)}
.lfd .who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);font-family:var(--f-head)}
.lfd .who img{width:34px;height:34px;object-fit:contain}
.lfd h3{font-size:clamp(26px,7vw,32px);color:var(--fname);line-height:1.2}
.lfd .lesson{font-family:var(--f-head);font-size:18px;color:var(--ink)}
.lfd .body{font-size:15.5px;color:var(--ink-2);line-height:1.8;max-width:24em}
.lfd .four{font-size:13.5px;color:var(--ink-3);line-height:1.7;border-top:1.5px dashed var(--crayon-soft);padding-top:10px;margin-top:4px;max-width:26em}
.lfd .nav{display:flex;align-items:center;gap:14px}
.lfd .nav button{border:0;background:var(--paper-2);color:var(--ink);border-radius:999px;width:44px;height:44px;font-family:var(--f-head);font-size:18px;cursor:pointer}
.lfd .dots{display:flex;gap:7px}.lfd .dots i{width:8px;height:8px;border-radius:50%;background:var(--crayon-soft);transition:transform .3s}
.lfd .dots i.on{background:var(--fc);transform:scale(1.35)}
.lfd .draft{font-style:normal;font-size:11.5px;color:var(--ink-3);background:var(--paper-2);border-radius:999px;padding:1px 10px}
@media (max-width:760px){.friends{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}.fr .pic{width:min(100%,136px)}.fr p{font-size:14px}}

/* bands with crayon wave edges */
.band{position:relative}
.band-in{background:color-mix(in srgb,var(--bg,var(--pink-soft)) var(--tint),var(--paper))}
.edge{display:block;height:34px;width:100%}
.edge.top{margin-bottom:-1px}.edge.bot{margin-top:-1px;transform:scaleY(-1)}
.band .sec{padding-block:clamp(26px,4vw,56px)}

/* quizzes */
.quizzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,36px);align-items:stretch}
.qc{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,32px);gap:14px;text-decoration:none;color:inherit;transition:transform .45s var(--spring)}
.qc:hover{transform:translateY(-6px) rotate(-.6deg)}
.qc:nth-child(2):hover{transform:translateY(-6px) rotate(.6deg)}
.qc .art{min-height:clamp(150px,19vw,210px);display:flex;align-items:flex-end;justify-content:center;gap:1%}
.qc .art>img{width:29%;height:auto;min-width:0;transition:transform .5s var(--spring)}
.qc .art>img:nth-child(2){width:18%}.qc .art>img:nth-child(3){width:22%}.qc .art>img:nth-child(4){width:22%}
.qc:hover .art img{animation:hop .6s var(--spring) both}
.qc:hover .art img:nth-child(2){animation-delay:.06s}.qc:hover .art img:nth-child(3){animation-delay:.12s}.qc:hover .art img:nth-child(4){animation-delay:.18s}
@keyframes hop{40%{transform:translateY(-14px)}}
.qc h3{font-size:clamp(24px,2.4vw,29px)}
.qc .q{color:var(--ink-2)}
.qc .meta{font-size:14px;color:var(--ink-3)}
.qc .act{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.polas{display:flex;align-items:flex-end;justify-content:center;height:100%;gap:0}
.pola{width:26%;max-width:118px;background:var(--card);padding:7px 7px 0;box-shadow:0 4px 12px var(--shadow);border-radius:6px;transform:rotate(var(--r,0deg));transition:transform .45s var(--spring);margin:0 -6px}
.pola img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
.pola b{display:block;text-align:center;font-family:var(--f-head);font-size:14px;letter-spacing:.2em;color:var(--ink-3);padding:5px 0 7px}
.qc:hover .pola{transform:rotate(calc(var(--r,0deg) * -1)) translateY(-6px)}
.badge{position:absolute;right:18px;top:16px;z-index:2;font-family:var(--f-head);font-size:13px;color:var(--leaf-ink);background:var(--leaf-soft);padding:3px 12px;border-radius:999px;transform:rotate(4deg)}
@media (max-width:760px){.quizzes{grid-template-columns:minmax(0,1fr)}.qc{gap:10px}.qc .art{min-height:118px}.qc .art>img{width:22%}.qc .art>img:nth-child(2){width:14%}.qc .art>img:nth-child(3),.qc .art>img:nth-child(4){width:17%}}

/* stickers: a scrapbook page */
.scrap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,1.4vw,16px);padding:clamp(14px,2.4vw,28px)}
.st{--s:120px;width:var(--s);height:var(--s);display:block;border:0;padding:0;background-color:transparent;background-repeat:no-repeat;background-size:calc(var(--s)*6) auto;cursor:pointer;flex:none}
.scrap .st{--s:100%;width:100%;height:auto;aspect-ratio:1;background-size:600% auto;background-position:calc(var(--c) * 20%) calc(var(--r) * var(--rs));transform:rotate(var(--rot,0deg));animation:sway 5s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes sway{50%{transform:rotate(calc(var(--rot,0deg) * -1)) translateY(-3px)}}
.st.pop{animation:jelly .6s var(--spring)!important}
@keyframes jelly{0%{transform:scale(1)}30%{transform:scale(1.18,.86)}50%{transform:scale(.9,1.12)}70%{transform:scale(1.05,.97)}100%{transform:scale(1)}}
.st:hover{filter:drop-shadow(0 6px 8px var(--shadow))}
.packs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.pk{display:flex;align-items:center;gap:6px;padding:5px 16px 5px 6px;border-radius:999px;background:var(--card);border:0;cursor:pointer;font-family:var(--f-head);font-size:15.5px;color:var(--ink-2);box-shadow:0 2px 8px var(--shadow);text-decoration:none;transition:transform .35s var(--spring),background .2s}
.pk:hover{transform:translateY(-3px)}
.pk .st{--s:38px;pointer-events:none}
.pk small{font-size:12px;color:var(--ink-3);font-family:var(--f-body)}
.pk[aria-pressed="true"]{background:var(--pink-soft);color:var(--ink)}
.apps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:20px;font-size:15px;color:var(--ink-3)}
.app{text-decoration:none;display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;background:var(--card);border:0;cursor:pointer;font-family:var(--f-head);font-size:15px;color:var(--ink);box-shadow:0 2px 8px var(--shadow);transition:transform .35s var(--spring)}
.app:hover{transform:translateY(-3px)}
.app i{width:10px;height:10px;border-radius:50%;background:var(--ac)}
.app .aic{width:20px;height:20px;flex:none;fill:var(--ac)}
.pkc .app .aic{width:18px;height:18px}
.app.soon{opacity:.6;cursor:default;box-shadow:none;background:var(--paper-2)}
.app.soon:hover{transform:none}
.app em{font-style:normal;font-size:12px;color:var(--ink-3)}
.st-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin-top:clamp(18px,2.6vw,28px);color:var(--ink-3);font-size:15px}
/* sticker page: a peek at each pack + download buttons */
.pkcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,22px);max-width:980px;margin-inline:auto}
.pkc{display:flex;flex-direction:column;gap:12px;padding:clamp(14px,1.8vw,20px)}
.pkc.wide{grid-column:1/-1}
.pkc.solo{max-width:760px;margin-inline:auto}
.pkh{display:flex;align-items:center;gap:8px;font-family:var(--f-head)}
.pkh .st{--s:40px;pointer-events:none}
.pkh b{font-weight:400;font-size:19px}
.pkh small{margin-left:auto;font-size:13px;color:var(--ink-3);font-family:var(--f-body)}
.peek{display:grid;grid-template-columns:repeat(var(--k),minmax(0,1fr));gap:clamp(4px,1vw,10px)}
.peek .st{--s:100%;width:100%;height:auto;aspect-ratio:1;background-size:600% auto;background-position:calc(var(--c) * 20%) calc(var(--r) * var(--rs));transition:transform .35s var(--spring)}
.peek .st:hover{transform:rotate(-4deg) scale(1.06)}
.st-more{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:22px;background:var(--paper-2);color:var(--ink-2);font-family:var(--f-head);font-size:clamp(15px,1.6vw,19px);text-decoration:none;align-self:center}
a.st-more:hover{background:var(--pink-soft)}
.pkc .apps{margin-top:auto;justify-content:flex-start;gap:8px}
.apps .lbl{font-size:14px;color:var(--ink-3)}
.olang{margin-top:12px;text-align:center;font-size:13.5px;color:var(--ink-3)}
.olang summary{cursor:pointer;display:inline-block;padding:6px 10px;border-radius:999px;list-style:none}
.olang summary::-webkit-details-marker{display:none}
.olang summary::after{content:' ▾'}
.olang[open] summary::after{content:' ▴'}
.olang summary:focus-visible{outline:2px solid var(--leaf-ink);outline-offset:2px}
.olang p{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;align-items:center}
.olang p b{font-weight:600;color:var(--ink-2)}
.olang a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
.pkc .app{padding:7px 14px;font-size:14.5px}
.soon-row{margin-top:clamp(18px,2.4vw,26px)}
/* LINE animated corner: a sunny crayon card with one moving sticker from each LINE pack, plus a small label that leads to it */
.lnpill-row{display:flex;justify-content:center;margin:calc(clamp(22px,3vw,38px) * -.45) 0 clamp(20px,2.8vw,30px)}
.lnpill-row.home{margin:clamp(18px,2.4vw,24px) 0 0}
.lnpill{--lngreen:#06c755;--lnfill:color-mix(in srgb,#06c755 10%,var(--card));display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:5px 18px 5px 8px;border:0;background:none;cursor:pointer;font-family:var(--f-head);font-size:15.5px;line-height:1.35;color:var(--ink);text-decoration:none;text-align:left;transition:transform .35s var(--spring)}
.lnpill:hover{transform:translateY(-3px) rotate(-1deg)}
.lnpill .lnp-pic{flex:none}
.lnpill>span{text-wrap:balance}
.lnpill .lnp-pic img{width:42px;height:42px}
.lnpill svg:not(.cr){flex:none;width:18px;height:18px;color:#05a648}
button.lnpill svg:not(.cr){transform:rotate(90deg)}
.lnc{--lnbg:color-mix(in srgb,var(--sun) calc(6% + var(--tint) * .2),var(--card));--lnhatch:color-mix(in srgb,var(--sun) calc(var(--tint) * .6),transparent);max-width:980px;margin:clamp(30px,4vw,44px) auto 0;padding:clamp(30px,3.6vw,42px) clamp(12px,2.4vw,30px) clamp(18px,2.4vw,26px);text-align:center;scroll-margin-top:90px}
.lnbadge{position:absolute;left:clamp(14px,2.4vw,28px);top:-16px;z-index:2;font-family:var(--f-head);font-size:15.5px;color:#5e4334;padding:7px 18px;transform:rotate(-5deg)}
.spk{position:absolute;z-index:1;width:26px;height:26px;fill:var(--sun);stroke:var(--crayon);stroke-width:1.3;stroke-linejoin:round;animation:twk 2.8s ease-in-out infinite}
.spk.s1{right:clamp(16px,3vw,40px);top:14px}
.spk.s2{right:clamp(44px,6vw,78px);top:34px;width:16px;height:16px;animation-delay:-1.1s}
.spk.s3{left:clamp(12px,2vw,26px);bottom:22px;width:18px;height:18px;animation-delay:-2s}
@keyframes twk{50%{transform:scale(.72) rotate(18deg);opacity:.7}}
.lnh h3{font-size:clamp(22px,2.6vw,27px)}
.lnh p{margin-top:4px;color:var(--ink-2);font-size:15px}
.lnrow{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(4px,1.6vw,18px);margin-top:clamp(14px,2vw,22px)}
.lnt{flex:0 1 158px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:none;cursor:pointer;color:inherit;font:inherit;text-decoration:none}
.lnt .pad{display:block;width:100%;aspect-ratio:1;padding:9%;transform:rotate(var(--r));transition:transform .35s var(--spring)}
.lnt .pad img{width:100%;height:auto}
.lnt:hover .pad{transform:rotate(calc(var(--r) * -1)) translateY(-4px) scale(1.04)}
.lnt.pop .pad{animation:jelly .6s var(--spring)}
.lnt b{font-family:var(--f-head);font-weight:400;font-size:16px;color:var(--nm)}
.lnt em{font-style:normal;font-size:13px;color:var(--leaf-ink)}
.lnt:focus-visible{outline:3px solid var(--pink);outline-offset:4px;border-radius:18px}
.lnapps{margin-top:clamp(12px,1.8vw,18px)}
@media (max-width:600px){.spk.s2{display:none}.lnt{flex-basis:calc((100% - 16px) / 3)}.lnrow{gap:8px}.lnpill{font-size:14.5px;padding-right:14px}.lnpill .lnp-pic img{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.spk{animation:none}.lnt.pop .pad{animation:none}}
@media (max-width:600px){.pkc.solo .peek{--k:3!important}.pkcards{grid-template-columns:minmax(0,1fr)}.pkc.wide .peek{--k:4!important}.pkc .app{min-height:40px}.st-more{border-radius:16px}}
.stgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1.4vw,16px);margin-top:28px}
.stgrid .st{--s:100%;width:100%;height:auto;aspect-ratio:1;background-size:600% auto;background-position:calc(var(--c) * 20%) calc(var(--r) * var(--rs));transition:transform .35s var(--spring)}
.stgrid .st:hover{transform:rotate(-4deg) scale(1.06)}
@media (max-width:900px){.stgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.scrap{grid-template-columns:repeat(3,minmax(0,1fr))}
  .packs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gut-l) * -1) calc(var(--gut-r) * -1);padding:4px var(--gut-r) 10px var(--gut-l);scroll-snap-type:x proximity}.packs::-webkit-scrollbar{display:none}.pk{flex:none;scroll-snap-align:start}.stgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* comics */
.cm-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:center;max-width:980px;margin-inline:auto}
.cm-row>.cpage{max-width:460px;width:100%;justify-self:center}
.cpage{display:block;padding:clamp(12px,1.6vw,18px);border:0;background:none;cursor:pointer;text-align:left;transition:transform .45s var(--spring);transform:rotate(var(--r,-1deg))}
.cpage:hover{transform:rotate(0deg) translateY(-6px)}
.cpage img{width:100%;height:auto;border-radius:14px}
.cpage b{display:block;font-weight:700;font-size:17px;padding:10px 4px 2px}
.cside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.cside .cpage b{font-size:15px}
.cm-note{display:flex;flex-direction:column;gap:10px}
.cm-note p{color:var(--ink-2)}
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px)}
.cgrid .cpage:nth-child(2n){--r:1.2deg}
.cgrid .cpage p{font-size:14px;color:var(--ink-2);padding:2px 4px 4px;white-space:pre-line}
@media (max-width:760px){.cm-row{grid-template-columns:minmax(0,1fr)}.cm-row>.cpage{max-width:330px}.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cgrid{grid-template-columns:minmax(0,1fr)}}
dialog.lb{border:0;padding:0;background:transparent;max-width:min(920px,94vw);max-height:94vh;overflow:visible}
dialog.lb::backdrop{background:rgba(60,40,30,.6);backdrop-filter:blur(3px)}
dialog.lb[open]{animation:lbin .35s var(--spring)}
@keyframes lbin{from{transform:scale(.9) rotate(-2deg);opacity:0}}
.lb .sheet{background:var(--card);border-radius:22px;padding:12px;display:flex;flex-direction:column;gap:10px}
.lb img{max-height:calc(94vh - 90px);width:auto;max-width:100%;border-radius:14px;margin:0 auto}
.lb .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px 4px}
.lb .bar b{font-weight:700;font-size:17px}
.lb .bar span{display:flex;gap:6px}
.lb .bar button{border:0;background:var(--paper-2);border-radius:999px;min-width:44px;height:44px;padding:0 14px;cursor:pointer;font-family:var(--f-head);font-size:16px}

/* footer: a small hill where someone naps */
.foot{position:relative;margin-top:clamp(10px,3vw,40px)}
.foot .hill{height:calc(var(--rw) * 0.3042 + var(--rb) + 52px);position:relative}
.foot .low{background:var(--leaf-soft);padding:8px var(--gut-r) calc(28px + env(safe-area-inset-bottom,0px)) var(--gut-l);margin-top:-1px}
.foot .low .in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--f-head);font-size:15.5px}
.foot nav a{text-decoration:none;color:var(--ink-2)}
.foot nav a:hover{color:var(--ink)}
.foot small{color:var(--ink-3);font-size:13px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mockpill{background:var(--pink-soft);color:var(--pink-ink);border-radius:999px;padding:1px 10px}
@media (max-width:860px){.foot .low{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}}

/* ======== friend page ======== */
.fhero{position:relative;background:var(--fbg);overflow:hidden}
.fhero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,3vw,40px);align-items:end;min-height:clamp(420px,46vw,540px);padding-top:30px}
.fhero .hillbit{position:absolute;left:0;right:0;bottom:0;height:clamp(90px,11vw,140px)}
.fhero .wrap{position:relative}

.fhero .who{padding-bottom:clamp(60px,8vw,110px);display:flex;flex-direction:column;gap:12px}
.fhero .kicker{font-family:var(--f-head);color:var(--fname);font-size:16px;display:flex;align-items:center;gap:6px}
.fhero .kicker svg{width:18px;height:18px}
.fhero h1{font-size:clamp(46px,7vw,86px);line-height:1;color:var(--fname);font-family:"Fredoka",var(--f-head);font-weight:600;letter-spacing:0}
.fhero .nick{font-family:var(--f-head);font-size:clamp(22px,2.4vw,28px)}
.fhero .nick small{font-size:15px;color:var(--ink-3);margin-left:6px}
.fhero .motto{font-size:clamp(19px,2vw,23px);color:var(--ink);font-weight:700}
.fhero .ess{color:var(--ink-2);max-width:26em}
@media (max-width:760px){.fhero .wrap{grid-template-columns:minmax(0,1fr);min-height:0}.fhero .stage{order:2;height:300px}.fhero .who{padding-bottom:0}}
.notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.note{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;transform:rotate(var(--r,0deg));transition:transform .45s var(--spring)}
.note:hover{transform:rotate(0) translateY(-4px)}
.note h3{font-size:15px;color:var(--fname);font-family:var(--f-head)}
.note ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:15px}
.note li{display:flex;gap:8px}
.note li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--fc);margin-top:.7em;opacity:.7}
.note .big{font-family:var(--f-head);font-size:22px;line-height:1.3}
.note .small{font-size:14px;color:var(--ink-2)}
@media (max-width:900px){.notes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.notes{grid-template-columns:minmax(0,1fr)}}
.looks{display:flex;justify-content:center;gap:clamp(10px,2.4vw,30px);flex-wrap:wrap}
.looks .pola{width:clamp(130px,19vw,200px);max-width:none;margin:0;animation:sway 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
.pairline{display:flex;align-items:center;gap:18px;max-width:640px;margin:0 auto;padding:22px 26px;text-decoration:none;color:inherit;transition:transform .45s var(--spring)}
.pairline:hover{transform:translateY(-4px)}
.pairline .faces{display:flex;flex:none}
.pairline .faces img{width:64px;height:64px;object-fit:contain}
@media (max-width:480px){.pairline{gap:12px;padding:16px 18px}.pairline .faces img{width:46px;height:46px}.pairline .faces img+img{margin-left:-12px}.pairline b{font-size:17px}.pairline p{font-size:14px}}
.pairline .faces img+img{margin-left:-14px}
.pairline b{font-family:var(--f-head);font-weight:400;font-size:19px;display:block}
.pairline p{font-size:15px;color:var(--ink-2)}
.pairline svg.ar{width:22px;height:22px;flex:none;color:var(--pink-ink);margin-left:auto}
.fnav{display:flex;justify-content:space-between;gap:12px;padding-block:10px 40px}
.fnav a{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:15.5px;color:var(--ink-2);padding:6px 16px 6px 6px;border-radius:999px;background:var(--card);box-shadow:0 2px 10px var(--shadow);transition:transform .35s var(--spring)}
.fnav a:hover{transform:translateY(-3px)}
.fnav a.nx{flex-direction:row-reverse;padding:6px 6px 6px 16px}
.fnav img{width:42px;height:42px;object-fit:contain}

/* quiz player */
/* full screen over the page (Jeff 6 Nov 15:18): no header or tab bar; the pill top left goes back home, the quiz keeps its own 上一題 */
.player{display:flex;flex-direction:column;position:fixed;inset:0;z-index:80;max-width:none;background:var(--paper);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
body:has(.player){overflow:hidden}
.player .pbar{padding:6px 14px!important}
.player .pbar a:first-child{background:var(--card);padding:6px 14px 6px 10px;border-radius:999px;box-shadow:0 2px 8px var(--shadow);color:var(--ink)}
.player .pbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:6px 10px}
.player .pbar a{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:15.5px;text-decoration:none;color:var(--ink-2);white-space:nowrap}
.player .pbar a svg{width:18px;height:18px}
.player .pbar b{font-family:var(--f-head);font-weight:400;font-size:18px;white-space:nowrap}
@media (max-width:560px){.player .pbar b{display:none}}
.player .frame{flex:1;min-height:0;border-radius:20px 20px 0 0;overflow:hidden;background:var(--card);box-shadow:0 -2px 18px var(--shadow)}
.player iframe{width:100%;height:100%;border:0;display:block}
.player .fallback{display:none;padding:40px 20px;text-align:center;gap:16px;flex-direction:column;align-items:center}
.player.failed .fallback{display:flex}.player.failed iframe{display:none}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:70;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:999px;font-size:15px;transition:all .35s var(--spring);pointer-events:none;max-width:calc(100vw - 40px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* scroll reveal (transform only: content is always visible) */
@supports (animation-timeline:view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes rise{from{translate:0 34px;scale:.97}to{translate:none;scale:none}}
}

/* page change */
::view-transition-old(root){animation:vtout .22s ease-in both}
::view-transition-new(root){animation:vtin .38s var(--spring) both}
@keyframes vtout{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtin{from{opacity:0;transform:translateY(14px)}}

@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(8deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .g-say.on,.t-say.on{opacity:1}
}

/* privacy + terms pages */
.legal{max-width:760px;display:flex;flex-direction:column;gap:16px}
.legal .sec-h{margin-bottom:0}
.legal .upd{text-align:center;color:var(--ink-2);font-size:14px;margin:0 0 6px}
.legal .note{transform:none}
.legal .note p{margin:0;font-size:16px;line-height:1.75}
.legal .note h3{font-size:17px}
.legal .other{text-align:center;margin:8px 0 0}
.foot small a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* dark mode: small grey labels one step lighter */
@media (prefers-color-scheme:dark){.nick small,.turn-tip{color:var(--ink-2)}}

/* "Did you know?" under the four friends: a small tap that opens a hand-drawn DNA fact (Jeff: only for the curious) */
.dyk{max-width:760px;margin:clamp(18px,3vw,28px) auto 0;text-align:center}
.dyk summary{list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:var(--f-head);font-size:15px;color:var(--ink-2);
  padding:6px 14px 6px 10px;border-radius:999px;border:1.5px dashed var(--crayon-soft);background:transparent;transition:background .2s,transform .3s var(--spring)}
.dyk summary::-webkit-details-marker{display:none}
.dyk summary:hover{background:var(--paper-2);transform:translateY(-1px)}
.dyk summary .mini{width:20px;height:20px;fill:none;stroke:var(--crayon);stroke-width:1.8;stroke-linecap:round}
.dyk summary i{font-style:normal;transition:transform .3s;display:inline-block}
.dyk[open] summary i{transform:rotate(90deg)}
.dyk[open] .dna{animation:dykin .45s var(--spring) both}
@keyframes dykin{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.dna{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(12px,3vw,26px);align-items:center;text-align:left;margin-top:14px;padding:16px 18px;border-radius:22px;background:var(--paper-2)}
.dna p{color:var(--ink-2);font-size:15px;line-height:1.7}
.dna p+p{margin-top:6px}
.dna .big{font-family:var(--f-head);font-size:17.5px;color:var(--ink)}
.dna .tiny{font-size:13.5px;color:var(--ink-3)}
.dna .end{font-family:var(--f-head);color:var(--ink)}
.dna-sk{width:100%;height:auto;max-width:230px;margin:0 auto;overflow:visible}
.dna-sk .bb{fill:none;stroke:var(--crayon);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.dna-sk .ru{fill:none;stroke-width:5;stroke-linecap:round}
.dna-sk .bond{stroke:var(--crayon);stroke-width:2.2;stroke-linecap:round}
.dna-sk circle{stroke:var(--crayon);stroke-width:2.2}
.dna-sk text{font-family:"Fredoka",var(--f-head);font-weight:700;font-size:14px;text-anchor:middle}
@media (max-width:640px){.dna{grid-template-columns:minmax(0,1fr)}.dna-sk{max-width:210px}}