*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#EFEBE4;overflow-x:hidden;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
a{color:inherit}
.dev{display:block;margin:0 auto}
.dev.sp{display:none;max-width:640px}
@media (max-width:1023px){.dev.pc{display:none}.dev.sp{display:block}}
.scr{position:relative;width:100%;container-type:inline-size;overflow:hidden}
.scr .plate{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.anc{position:absolute;left:0;width:1px;height:1px}
.tx{text-decoration:none}
.ln{position:absolute;white-space:nowrap;line-height:1;z-index:2;font-feature-settings:"palt";font-kerning:normal;visibility:hidden}
.fitted .ln{visibility:visible}
.ln[data-m="v"]{writing-mode:vertical-rl;text-orientation:upright;font-feature-settings:normal}
.isun{display:inline-block;width:1em;height:1em;vertical-align:-.12em}
.isun svg{display:block;width:100%;height:100%}
a.tx{cursor:pointer}
a.tx .ln{transition:opacity .2s}
a.tx:hover .ln{opacity:.55}
a.tx:focus-visible{outline:none}
a.tx:focus-visible .ln{outline:2px solid #2E6F6A;outline-offset:3px}
.btn{position:absolute;z-index:3;display:block;border-radius:999px;text-decoration:none;background:var(--fill);
  transition:background .25s,transform .25s,box-shadow .25s,filter .25s}
.btn .ln{color:var(--tc)}
.btn.outline{border:max(1.5px,.11cqw) solid var(--bc)}
a.btn::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:max(100% + 12px,48px);transform:translateY(-50%)}
a.tx .ln::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:max(100% + 16px,44px);transform:translateY(-50%)}
a.btn.primary:hover{filter:brightness(.88);box-shadow:0 .5cqw 1.2cqw rgba(30,70,70,.22)}
a.btn.outline:hover{background:var(--bc)}
a.btn.outline:hover .ln{color:#fff}
a.btn:focus-visible{outline:3px solid #E9B23C;outline-offset:3px}
.deco{position:absolute;z-index:2;display:block}
.deco.sun svg{width:100%;height:100%;display:block}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* --- cafe anim --- */
.anim-cup{position:absolute;z-index:1;pointer-events:none;display:block}
.anim-fog{position:absolute;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;mix-blend-mode:screen;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;overflow:hidden}
.anim-fog.on{opacity:.62}
.anim-fog canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important}
.deco.sun.spin svg{animation:cafeSpin 48s linear infinite;transform-origin:50% 50%}
@keyframes cafeSpin{to{transform:rotate(360deg)}}
.fitted .dev>.scr:first-child h1 .ln{animation:cafeIn 1.6s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes cafeIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.deco.sun.spin svg,.fitted .dev>.scr:first-child h1 .ln{animation:none}}