.home{--s:min(calc(100vw / 1920), calc(100svh / 1080));--book-w:calc(480 * var(--s));--book-h:calc(596 * var(--s));--flip:.9s;--cloth:url(/art/cloth.webp) 0 0 / 180px 180px;touch-action:pinch-zoom;height:100svh;position:fixed;inset:0 0 auto;overflow:hidden}html:has(.home){overscroll-behavior:none;height:100%;overflow:hidden}html:has(.home) body{overscroll-behavior:none;height:100%;overflow:hidden}@media (prefers-reduced-motion:no-preference){.is-splash :is(.book-wrap,.desktop-note,.pills,.bg-lines){visibility:hidden}.is-splash .open-tab{animation:none}}.after-splash .open-tab{animation-delay:.8s}.bg-lines{pointer-events:none;z-index:0;width:100%;height:100%;position:fixed;inset:0}.stage{z-index:1;width:calc(1920 * var(--s));height:calc(1080 * var(--s));margin:calc((100svh - 1080 * var(--s)) / 2) auto 0;position:relative}.name{left:calc(410 * var(--s));width:calc(1100 * var(--s));margin:0;position:absolute;top:0}.name svg{width:100%;height:auto;display:block;overflow:visible}.name .name-en use{opacity:0}.name .name-ur use{fill:#0000;stroke:var(--teal);stroke-width:.014px;stroke-dasharray:7;stroke-dashoffset:7px}.book-wrap{left:calc(720 * var(--s));top:calc(317 * var(--s));width:var(--book-w);height:var(--book-h);transition:transform var(--flip) var(--ease);position:absolute}.book-wrap.is-open{transform:translateX(calc(var(--book-w) / 2))}.book-wrap.is-closed-back{transform:translateX(var(--book-w))}.book{perspective:calc(2600 * var(--s));transform-style:preserve-3d;position:absolute;inset:0}.book:before,.book:after{content:"";height:100%;transition:opacity .3s;position:absolute;top:0}.book:before{left:calc(10 * var(--s));background:var(--cloth), var(--teal);border-radius:calc(6 * var(--s)) calc(28 * var(--s)) calc(28 * var(--s)) calc(6 * var(--s));width:100%;box-shadow:calc(8 * var(--s)) calc(18 * var(--s)) calc(30 * var(--s)) #1f06ac1f}.book:after{left:0;top:calc(9 * var(--s));height:calc(100% - 18 * var(--s));width:calc(100% + 5 * var(--s));background:var(--paper);border-radius:0 calc(22 * var(--s)) calc(22 * var(--s)) 0}.is-closed-back .book:before{left:calc(-100% - 10 * var(--s));border-radius:calc(28 * var(--s)) calc(6 * var(--s)) calc(6 * var(--s)) calc(28 * var(--s))}.is-closed-back .book:after{left:calc(-100% - 5 * var(--s));border-radius:calc(22 * var(--s)) 0 0 calc(22 * var(--s))}.leaf{transform-origin:0;transform-style:preserve-3d;will-change:transform;position:absolute;inset:0}.face{backface-visibility:hidden;position:absolute;inset:0;overflow:hidden}.face.back{transform:rotateY(180deg)}.face:after{content:"";pointer-events:none;opacity:0;transition:opacity calc(var(--flip) / 2);background:linear-gradient(90deg,#00000024,#0000 40%);position:absolute;inset:0}.leaf.is-turning .face:after{opacity:1}.endpaper{background:var(--teal)}.cover-front,.cover-back-outside{--groove:transparent calc(16 * var(--s)), #0116271a calc(16 * var(--s)), #0116271a calc(18 * var(--s)), #ffffff29 calc(18 * var(--s)), #ffffff29 calc(20 * var(--s)), transparent calc(20 * var(--s));box-shadow:inset 0 0 0 calc(2 * var(--s)) #ffffff29, inset 0 0 calc(22 * var(--s)) #ffffff1a}.cover-front{background:linear-gradient(90deg, var(--groove)), var(--cloth), var(--teal)}.cover-back-outside{background:linear-gradient(270deg, var(--groove)), var(--cloth), var(--teal)}.cover-front,.endpaper.right{border-radius:calc(6 * var(--s)) calc(26 * var(--s)) calc(26 * var(--s)) calc(6 * var(--s))}.cover-back-outside,.endpaper.left{border-radius:calc(26 * var(--s)) calc(6 * var(--s)) calc(6 * var(--s)) calc(26 * var(--s))}.cover-front{overflow:visible}.sticker{transform-origin:50% 60%;height:auto;rotate:var(--r,0deg);-webkit-user-select:none;user-select:none;transition:scale .18s cubic-bezier(.3,1.6,.5,1),filter .18s;display:block;position:absolute}.sticker.is-draggable{cursor:grab;touch-action:none}.sticker.is-lifted{cursor:grabbing;filter:drop-shadow(calc(6 * var(--s)) calc(10 * var(--s)) calc(8 * var(--s)) #0116274d);scale:1.12}.page{background:var(--paper);border:calc(6 * var(--s)) solid var(--teal)}.page.right{border-left:calc(2 * var(--s)) solid var(--gutter);border-radius:0 calc(24 * var(--s)) calc(24 * var(--s)) 0}.page.left{border-right:calc(2 * var(--s)) solid var(--gutter);border-radius:calc(24 * var(--s)) 0 0 calc(24 * var(--s))}.page-link{z-index:1;position:absolute;inset:0}.cards{height:60%;position:absolute;top:8%;left:12%;right:12%}.card{border-radius:calc(12 * var(--s));transition:transform .45s cubic-bezier(.3,1.4,.5,1);position:absolute}.card:first-child{background:color-mix(in srgb, var(--pop) 14%, #eef2f1);inset:0 4% 20%}.card:nth-child(2){background:color-mix(in srgb, var(--pop) 34%, white);inset:8% 0 10% 8%;transform:rotate(4deg)}.card:nth-child(3){background:color-mix(in srgb, var(--pop) 52%, white);inset:22% 6% 0 0;transform:rotate(-3.5deg)}.card{overflow:hidden}.card-image{border-radius:0;position:absolute;inset:0}.page:hover .card:first-child{transform:translate(-4%,-3%)rotate(-5deg)}.page:hover .card:nth-child(2){transform:translate(4%,-4%)rotate(7deg)}.page:hover .card:nth-child(3){transform:translateY(-4%)rotate(-1deg)scale(1.02)}.page-title{font:600 calc(42 * var(--s))/1 var(--font-head);color:var(--pop);letter-spacing:.01em;margin:0;position:absolute;top:74%;left:8%;right:8%}.page-tag{left:8%;top:calc(74% + 50 * var(--s));font:600 calc(15.5 * var(--s))/1 var(--font-head);color:color-mix(in srgb, var(--pop) 80%, black);position:absolute}.page-num{font:600 calc(18 * var(--s))/1 var(--font-head);color:var(--gutter);position:absolute;top:3.5%}.page.right .page-num{right:6%}.page.left .page-num{left:6%}.arrow{z-index:2;width:calc(44 * var(--s));height:calc(44 * var(--s));font:700 calc(34 * var(--s))/1 var(--font-head);color:var(--teal);border-radius:50%;place-items:center;transition:transform .2s,background .2s;display:grid;position:absolute;bottom:4.5%}.arrow:hover{background:color-mix(in srgb, var(--teal) 18%, white);transform:scale(1.1)}.page.right .arrow.next{right:5%}.page.right .arrow.prev{display:none;left:5%}.page.left .arrow.prev{left:5%}.cover-back-outside{padding-top:calc(146 * var(--s));text-align:center;color:var(--night);flex-direction:column;align-items:center;display:flex}.bye-title{color:var(--snow);flex-direction:column;align-items:center;margin:0;display:flex}.bye-yay{font:calc(72 * var(--s))/1 var(--font-display)}.bye-sub{margin-top:calc(20 * var(--s));font:calc(35 * var(--s))/1.08 var(--font-display)}.bye-copy{margin:calc(40 * var(--s)) 0 0;font:600 calc(14 * var(--s))/1.2 var(--font-head)}.bye-mail{margin-top:calc(16 * var(--s));font:600 calc(15 * var(--s))/1 var(--font-head);color:var(--night);background:var(--lime-bright);padding:calc(15 * var(--s)) calc(19 * var(--s));box-shadow:calc(3 * var(--s)) calc(3 * var(--s)) 0 var(--paper);border-radius:999px;text-decoration:none;transition:transform .2s;transform:rotate(-2deg)}.bye-mail:hover{transform:rotate(1deg)scale(1.06)}.bye-sticker{width:17%;position:absolute;top:79.5%;left:74%;transform:rotate(-8deg)}.bye-again{font:600 calc(15 * var(--s))/1 var(--font-head);color:var(--night);text-underline-offset:.2em;text-decoration:underline;position:absolute;bottom:6%;left:9%}.open-tab{z-index:-1;left:calc(100% - 6 * var(--s));width:calc(88 * var(--s));height:calc(156 * var(--s));padding-left:calc(30 * var(--s));background:var(--lime-bright);color:var(--night);border-radius:0 calc(14 * var(--s)) calc(14 * var(--s)) 0;box-shadow:calc(4 * var(--s)) calc(4 * var(--s)) 0 var(--night);font:calc(36 * var(--s))/1 var(--font-display);writing-mode:vertical-rl;transform:translateX(calc(-14 * var(--s)));place-items:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .25s;animation:.6s cubic-bezier(.3,1.6,.5,1) 2.2s backwards open-tab-in;display:grid;position:absolute;top:16%}.open-tab:hover,.open-tab:focus-visible{transform:translate(0)}.open-tab:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}.book-wrap:not(.is-closed) .open-tab{opacity:0;pointer-events:none}@keyframes open-tab-in{0%{transform:translateX(calc(-60 * var(--s)))}}.tabs{top:calc(30 * var(--s));bottom:calc(30 * var(--s));left:calc(100% + 4 * var(--s));gap:calc(6 * var(--s));opacity:0;pointer-events:none;flex-direction:column;transition:opacity .4s;display:flex;position:absolute}.is-open .tabs{opacity:1;pointer-events:auto;transition-delay:calc(var(--flip) * .6)}.tab{width:calc(22 * var(--s));background:var(--pop);border-radius:0 calc(10 * var(--s)) calc(10 * var(--s)) 0;transform:translateX(calc(-8 * var(--s)));transition:transform .25s var(--ease);flex:1}.tab:hover,.tab.is-here{transform:translate(0)}.tab.is-here{width:calc(30 * var(--s))}.desktop-note{display:none}.pills{left:0;right:0;top:calc(1000 * var(--s));justify-content:center;gap:calc(22 * var(--s));display:flex;position:absolute}.pill{font:600 calc(24 * var(--s))/1 var(--font-head);color:var(--indigo);padding:calc(16 * var(--s)) calc(34 * var(--s));border:calc(3 * var(--s)) solid var(--indigo);background:var(--cream);border-radius:999px;text-decoration:none;transition:background .2s,color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}.pill-shop:hover{background:var(--yellow);transform:rotate(-4deg)}.pill-about:hover{background:var(--teal);transform:rotate(3deg)}.pill-contact:hover{background:var(--lime-bright);transform:rotate(-3deg)}.pill-world:hover{background:var(--pink);color:var(--cream);border-color:var(--pink);transform:rotate(2deg)}@media (max-aspect-ratio:1){.home{--s:min(calc(100vw * .76 / 480), calc((100svh - 30vw - 195px) / 596))}.stage{flex-direction:column;justify-content:space-evenly;align-items:center;width:100vw;height:100svh;margin:0;display:flex}.name,.book-wrap,.pills{position:relative;top:auto;left:auto}.name{width:94vw}.book-wrap{margin-top:calc(20 * var(--s));flex:none}.book-wrap.is-open,.book-wrap.is-closed-back{transform:none}.tabs{display:none}.desktop-note{margin:calc(14 * var(--s)) 0 0;font:600 13px/1 var(--font-head);color:var(--indigo);display:block}.pills{grid-template-columns:1fr 1fr;gap:8px;width:min(84vw,360px);margin-top:3svh;display:grid}.pill{text-align:center;border-width:2px;padding:10px 14px;font-size:15px}.book{transition:transform var(--flip) var(--ease)}.leaf{transform-origin:top}.is-closed-back .book{transform:rotateY(180deg)}.open-tab{width:calc(82 * var(--s));height:calc(170 * var(--s));font-size:calc(38 * var(--s));padding-left:calc(24 * var(--s))}.cover-front,.cover-back-outside,.endpaper.left,.endpaper.right,.page.right,.page.left{border-radius:calc(10 * var(--s)) calc(10 * var(--s)) calc(24 * var(--s)) calc(24 * var(--s))}.page.right,.page.left{border:calc(6 * var(--s)) solid var(--teal)}.cover-front,.cover-back-outside{background:var(--cloth), var(--teal)}.page.right .arrow.prev{display:grid}.book:before,.is-closed-back .book:before{left:0;top:calc(12 * var(--s));border-radius:calc(10 * var(--s)) calc(10 * var(--s)) calc(26 * var(--s)) calc(26 * var(--s));width:100%;height:100%}.book:after,.is-closed-back .book:after{left:calc(8 * var(--s));width:calc(100% - 16 * var(--s));height:calc(100% + 6 * var(--s));border-radius:0 0 calc(22 * var(--s)) calc(22 * var(--s));top:0}.spiral{z-index:200;left:7%;right:7%;top:calc(-16 * var(--s));pointer-events:none;justify-content:space-between;display:flex;position:absolute;transform:translateZ(8px)}.spiral span{width:calc(9 * var(--s));height:calc(34 * var(--s));background:linear-gradient(90deg, var(--night), #2c3e55 45%, var(--night));border-radius:999px;position:relative}.spiral span:before{content:"";z-index:-1;left:calc(-2 * var(--s));bottom:calc(-4 * var(--s));width:calc(13 * var(--s));height:calc(13 * var(--s));background:var(--cream);border-radius:50%;position:absolute}}