:root{--ink:#161712;--paper:#f3f0e8;--lime:#edff67;--pink:#ff7aac;--blue:#6d9dff;--line:rgba(22,23,18,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif}.grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}header{height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--line)}.logo{color:var(--ink);text-decoration:none;font-weight:800;font-size:19px}.logo span{display:inline-grid;place-items:center;background:var(--ink);color:var(--lime);width:34px;height:34px;border-radius:50%;margin-right:8px}.weather{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.06em}.weather i{width:8px;height:8px;border-radius:50%;background:#54aa62;box-shadow:0 0 0 5px rgba(84,170,98,.12)}.key{justify-self:end;width:35px;height:35px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;color:var(--ink);text-decoration:none;transition:.2s}.key:hover{transform:rotate(45deg);background:var(--ink);color:#fff}.hero{min-height:calc(100vh - 78px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:70px clamp(20px,7vw,110px)}.stamp{font-size:11px;letter-spacing:.24em;margin:0 0 20px}.hero h1{font-size:clamp(100px,20vw,300px);line-height:.72;letter-spacing:-.12em;margin:0;font-weight:900;position:relative;z-index:1}.pear{position:relative;display:inline-block}.pear:before{content:"";position:absolute;width:.33em;height:.33em;border-radius:70% 35% 70% 35%;background:var(--lime);right:-.08em;top:-.23em;transform:rotate(-19deg);z-index:-1}.intro{font-size:clamp(18px,2vw,28px);line-height:1.55;margin:70px 0 0 auto;width:min(440px,100%);font-weight:600}.down{position:absolute;bottom:46px;left:clamp(20px,7vw,110px);border:0;background:none;padding:0;display:flex;gap:13px;align-items:center;font:600 12px inherit;cursor:pointer}.down b{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;transition:.2s}.down:hover b{background:var(--ink);color:var(--lime);transform:translateY(4px)}.float-word{position:absolute;font-size:10px;letter-spacing:.18em;padding:8px 12px;border:1px solid var(--ink);border-radius:30px}.word-a{right:9%;top:18%;transform:rotate(8deg);background:var(--pink)}.word-b{left:47%;bottom:14%;transform:rotate(-6deg);background:var(--blue)}.word-c{right:6%;bottom:7%;font-size:24px;border:0}.playground{display:grid;grid-template-columns:1.15fr .85fr;margin:0 clamp(18px,4vw,60px);border:1px solid var(--ink)}.tile{min-height:430px;padding:32px;position:relative;display:flex;flex-direction:column;border-bottom:1px solid var(--ink)}.tile:nth-child(odd){border-right:1px solid var(--ink)}.tile:nth-last-child(-n+2){border-bottom:0}.tile-no{font-size:10px;letter-spacing:.15em}.tile>p{font-size:10px;letter-spacing:.18em;margin:45px 0}.hello{justify-content:space-between;background:var(--lime)}.hello p{font-size:12px;letter-spacing:.12em;margin:0 0 18px}.hello h2{font-size:clamp(42px,5vw,76px);line-height:1.08;letter-spacing:-.055em;margin:0}.scribble{position:absolute;right:9%;top:19%;font-style:normal;border:2px solid var(--ink);border-radius:48% 52% 46% 54%;padding:17px;transform:rotate(9deg);font-size:13px;text-align:center}.now{background:var(--ink);color:white}.now h3{font-size:clamp(28px,3vw,44px);line-height:1.18;margin:auto 0 0}.orbit{width:150px;height:150px;border:1px solid #67695f;border-radius:50%;display:grid;place-items:center;position:absolute;right:12%;top:29%}.orbit span{width:67px;height:67px;background:var(--pink);color:var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:25px}.orbit i{position:absolute;width:13px;height:13px;background:var(--lime);border-radius:50%;top:6px}.orbit b{position:absolute;width:7px;height:7px;background:var(--blue);border-radius:50%;bottom:20px;left:9px}.fortune{background:#ffdfd2}.fortune blockquote{font-size:clamp(29px,3.6vw,52px);font-weight:700;line-height:1.25;letter-spacing:-.04em;margin:auto 0}.fortune button{align-self:flex-start;border:1px solid var(--ink);background:transparent;padding:11px 15px;font:600 12px inherit;cursor:pointer}.fortune button:hover{background:var(--ink);color:white}.fortune button span{margin-left:30px}.counter{background:var(--blue);overflow:hidden}.counter strong{font-size:clamp(46px,7vw,100px);letter-spacing:-.065em;margin:auto 0 0}.counter small{font-size:10px;letter-spacing:.15em;margin-top:5px}.ticker{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--ink);padding:13px;white-space:nowrap;overflow:hidden;font-size:10px;letter-spacing:.12em}.ticker span{display:inline-block;animation:move 14s linear infinite}.ending{min-height:78vh;padding:120px clamp(20px,7vw,110px);display:flex;flex-direction:column;justify-content:center}.ending p{font-size:12px;margin-bottom:30px}.ending h2{font-size:clamp(48px,7vw,105px);line-height:1.02;letter-spacing:-.065em;margin:0}.ending a{align-self:flex-end;margin-top:70px;color:var(--ink);font-weight:600;font-size:12px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:28px clamp(20px,5vw,72px);font-size:10px;letter-spacing:.14em}footer a{color:inherit;text-underline-offset:3px}@keyframes move{to{transform:translateX(140%)}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.ticker span{animation:none}}@media(max-width:760px){header{grid-template-columns:1fr auto}.weather{display:none}.hero{min-height:calc(100svh - 78px);padding-top:35px}.hero h1{font-size:31vw;line-height:.8}.intro{margin-top:50px}.float-word.word-b{left:36%;bottom:18%}.down{bottom:28px}.playground{grid-template-columns:1fr}.tile,.tile:nth-child(odd){border-right:0;border-bottom:1px solid var(--ink)}.tile:last-child{border-bottom:0}.tile{min-height:410px}.ending{min-height:68vh}.ending a{align-self:flex-start}footer{gap:18px;flex-direction:column}}
