:root{--paper:oklch(98% .008 80);--peach:oklch(95% .035 35);--ink:oklch(28% .025 40);--muted:oklch(52% .03 45);--pink:oklch(72% .17 18);--pink-dark:oklch(55% .16 18);--sage:oklch(72% .08 145);--butter:oklch(90% .12 90)}
*{box-sizing:border-box}html{background:var(--peach);scroll-behavior:smooth}body{margin:0;min-height:100svh;color:var(--ink);font-family:"Arial Rounded MT Bold","PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:radial-gradient(circle at 0 0,var(--butter),transparent 35%),var(--peach)}button,summary{font:inherit}.page{width:min(100%,620px);margin:auto;padding:18px 18px calc(48px + env(safe-area-inset-bottom));overflow:hidden}.mast{display:flex;justify-content:space-between;align-items:center;font-size:12px}.logo{font-size:15px;font-weight:900}.date{color:var(--muted);font-weight:700}.hero{padding:52px 0 44px;position:relative}.sticker{display:inline-block;margin-bottom:8px;background:var(--butter);padding:6px 11px;border-radius:999px;transform:rotate(-3deg);font-size:12px;font-weight:900}.hero h1{margin:20px 0 28px;font-size:clamp(2.55rem,12vw,4.35rem);line-height:1.02;letter-spacing:-.04em;text-wrap:balance}.hero h1 em{font-style:normal;color:var(--pink-dark);position:relative}.hero h1 em:after{content:"";position:absolute;left:2%;right:0;bottom:-4px;height:7px;background:var(--sage);border-radius:50%;opacity:.7;transform:rotate(-2deg)}.intro{max-width:33em;margin:0;color:var(--muted);font:500 15px/1.95 system-ui,sans-serif}.doodle{position:absolute;right:4px;top:58px;font-size:32px;transform:rotate(12deg)}.stage{padding:24px 0 0}.photos{position:relative;width:calc(100% + 36px);height:315px;margin:0 -18px}.photo{position:absolute;width:58%;height:300px;background:transparent;isolation:isolate;will-change:transform;transition:transform .4s cubic-bezier(.22,1,.36,1)}.photo:first-child{left:-6%;top:12px;transform:rotate(-3deg)}.photo:last-child{right:-6%;top:0;transform:rotate(3deg)}.photo.spinning:first-child{animation:flip-a .13s steps(2) infinite}.photo.spinning:last-child{animation:flip-b .15s steps(2) infinite}.photo img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 5px oklch(45% .05 30/.14))}.photo:before,.photo:after{content:"";position:absolute;z-index:1;border:3px solid var(--sage);border-right-color:transparent;border-radius:48% 52% 45% 55%;inset:30px 15px 15px;transform:rotate(-9deg)}.photo:after{border-color:var(--pink) transparent var(--pink) var(--pink);inset:52px 1px 2px 28px;transform:rotate(11deg)}.photo:last-child:before{border-color:var(--pink) var(--pink) var(--pink) transparent}.photo:last-child:after{border-color:var(--sage) var(--sage) transparent var(--sage)}.caption{position:absolute;z-index:4;bottom:5px;left:38px;padding:5px 10px;border-radius:999px;background:var(--paper);box-shadow:0 2px 0 oklch(60% .05 35/.15);font-size:12px;font-weight:900}.question{margin:0;text-align:center;color:var(--muted);font:600 13px/1.5 system-ui,sans-serif}.mode-switch{display:flex;justify-content:center;gap:8px;margin:14px 0 0}.mode{min-height:34px;padding:0 13px;border:1px solid oklch(70% .06 35);border-radius:999px;background:var(--paper);color:var(--muted);cursor:pointer;font-size:12px;font-weight:800}.mode.selected{border-color:var(--sage);background:oklch(89% .07 145);color:var(--ink)}.mode:focus-visible,.ask:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.ask{display:block;width:100%;min-height:58px;margin:12px 0 0;border:0;border-radius:14px;background:var(--pink);color:white;box-shadow:0 5px 0 var(--pink-dark);cursor:pointer;font-size:17px;font-weight:900;transition:transform .15s,box-shadow .15s}.ask:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--pink-dark)}.ask:active{transform:translateY(4px);box-shadow:0 1px 0 var(--pink-dark)}.ask:disabled,.mode:disabled{filter:saturate(.4);cursor:wait}.result{display:none;position:relative;margin:22px 7px 0;padding:22px;background:var(--butter);box-shadow:3px 4px 0 oklch(60% .08 80/.22);transform:rotate(-1deg)}.result.show{display:block;animation:note .48s cubic-bezier(.22,1,.36,1)}.result:before{content:"猫神回信";position:absolute;right:14px;top:-13px;padding:5px 10px;border-radius:999px;background:var(--sage);font-size:11px;font-weight:900;transform:rotate(3deg)}.combo{color:var(--pink-dark);font-size:12px;font-weight:900}.result h2{margin:8px 0 6px;font-size:clamp(1.7rem,8vw,2.35rem);letter-spacing:-.035em}.result p{margin:0;color:var(--muted);font:500 14px/1.65 system-ui,sans-serif}.rules{margin-top:38px;border-top:2px solid var(--ink)}summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;cursor:pointer;font-weight:900;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:"＋";color:var(--pink-dark);font-size:22px}details[open] summary:after{content:"－"}.rule{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-top:1px dashed oklch(68% .04 40);font:500 14px/1.45 system-ui,sans-serif}.rule b{color:var(--pink-dark)}footer{margin-top:28px;text-align:center;color:var(--muted);font:500 11px system-ui,sans-serif}@keyframes flip-a{50%{transform:rotate(-2deg) scale(.96) rotateY(22deg)}}@keyframes flip-b{50%{transform:rotate(2deg) scale(.96) rotateY(-22deg)}}@keyframes note{from{opacity:0;transform:translateY(18px) rotate(1deg)}}@media(min-width:600px){.page{padding-top:28px}.photos{height:340px}.hero{text-align:center}.intro{margin-right:auto;margin-left:auto}.doodle{right:50px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}