:root{--paper:#fffdf4;--ink:#151914;--red:#fa584f;--green:#b5ef55;--line:3px solid var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.8}
a{color:inherit;text-underline-offset:5px}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid #2676e6;outline-offset:6px}
p,h1,h2,figure{margin:0}
.topbar{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px 36px;border-bottom:var(--line)}
.brand{font-size:32px;font-weight:900;letter-spacing:-2px;text-decoration:none}
.topbar span,.eyebrow,.micro{font-family:"Courier New",monospace;font-size:14px;font-weight:700;letter-spacing:.05em}
.topbar a:last-child{font-size:14px;font-weight:800}
.page{max-width:1280px;margin:auto}
.hero{display:grid;grid-template-columns:1.2fr 1fr;border-bottom:var(--line)}
.hero-copy{padding:45px 38px 48px}
.eyebrow{display:flex;align-items:center;gap:14px}
.eyebrow:before{content:"";width:28px;height:3px;background:var(--ink)}
h1{font-size:clamp(100px,13vw,176px);font-weight:900;letter-spacing:-.08em;line-height:1.04;margin:4px 0 14px}
.role{display:inline-block;background:var(--green);border:2px solid var(--ink);padding:3px 12px;font-size:14px;font-weight:800;transform:rotate(-2deg)}
.catchphrase{font-size:clamp(26px,3.2vw,42px);font-weight:900;line-height:1.55;letter-spacing:-.04em;margin-top:30px}
.catchphrase em{font-style:normal;background:linear-gradient(transparent 64%,var(--red) 64%,var(--red) 91%,transparent 91%)}
.hero-note{font-size:16px;max-width:440px;margin-top:18px}
.hero-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--red);border-left:var(--line);padding:54px 30px 45px;overflow:hidden}
.art-label{align-self:flex-start;font-family:"Courier New",monospace;font-size:14px;font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:5px}
.portrait{margin:32px 0 22px;width:min(100%,310px);background:var(--green);border:var(--line);box-shadow:12px 12px 0 var(--ink);transform:rotate(6deg);padding:20px 38px 14px}
.portrait img{display:block;width:100%;height:auto;min-height:180px;object-fit:contain}
.portrait figcaption{text-align:center;font-size:14px;font-weight:900;letter-spacing:.1em;margin-top:8px}
.sticker{align-self:flex-end;background:var(--paper);border:var(--line);padding:8px 17px;font-weight:900;transform:rotate(-7deg);box-shadow:4px 4px 0 var(--ink)}
.ribbon{background:var(--green);border-bottom:var(--line);padding:16px 24px;display:flex;justify-content:space-around;gap:20px;flex-wrap:wrap;font-family:"Courier New",monospace;font-size:16px;font-weight:900}
.section-title{padding:46px 36px 20px;display:flex;gap:20px;align-items:baseline}
.section-title h2{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-.04em}
.profile-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:0 36px 48px}
.section{border:var(--line);padding:26px 28px;background:white;box-shadow:6px 6px 0 var(--ink)}
.section h2{font-size:18px;font-weight:900;margin-bottom:16px}
.section:nth-child(2){background:var(--green)}
.section:nth-child(4){background:#fceaa8}
.section.wide{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;box-shadow:none;background:transparent}
.section.wide h2{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.tags li{background:var(--paper);border:2px solid var(--ink);padding:5px 10px;font-size:14px;font-weight:700}
.section:nth-child(n+6){box-shadow:none;background:transparent}
.section:nth-child(7){background:var(--red);transform:rotate(-1deg)}
.section:nth-child(7) p{font-size:24px;font-weight:900;line-height:1.6}
.section:nth-child(6) p,.section:nth-child(8) p{font-size:32px;font-weight:900}
.ai-area{border-top:var(--line);background:var(--ink);color:var(--paper);padding:48px 36px 45px}
.ai-area .micro{color:var(--green)}
.ai-area h2{font-size:clamp(28px,4.5vw,54px);line-height:1.5;letter-spacing:-.035em;margin:12px 0}
.ai-area>p:not(.micro):not(.privacy-note){max-width:700px}
.question-examples{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}
.question-examples li{font-size:14px;border:1px solid #8a9185;padding:5px 10px}
.ai-buttons{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ai-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:78px;padding:20px 24px;border:2px solid var(--ink);border-radius:0;background:var(--green);color:var(--ink);font:inherit;font-size:20px;font-weight:900;cursor:pointer;box-shadow:5px 5px 0 var(--paper);transition:transform .15s,box-shadow .15s}
.ai-button.claude{background:var(--red)}
.ai-button:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--paper)}
.ai-button:active{transform:translate(5px,5px);box-shadow:none}
.privacy-note{font-size:13px;color:#cbd0c5;margin-top:24px}
.footer{padding:24px 36px;display:flex;justify-content:space-between;align-items:center;border-top:var(--line)}
.footer strong{font-size:30px;letter-spacing:-2px}
.footer span{font-family:"Courier New",monospace;font-size:12px;font-weight:700}
@media(min-width:1281px){.page,.topbar{border-left:var(--line);border-right:var(--line)}}
@media(max-width:760px){.topbar{padding:16px 22px}.topbar span{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:30px 24px 36px}h1{font-size:120px}.hero-art{border-left:0;border-top:var(--line);padding:25px 28px 32px}.portrait{width:240px;margin:20px 0 18px;padding:12px 32px}.portrait img{min-height:0}.sticker{font-size:14px}.ribbon{font-size:12px;gap:10px;padding:13px}.section-title{padding:32px 24px 18px;gap:12px}.micro{font-size:12px}.profile-body{grid-template-columns:1fr;padding:0 22px 38px;gap:18px}.section{padding:22px}.section.wide{display:block}.section.wide h2{margin-bottom:12px}.ai-area{padding:35px 24px}.ai-buttons{grid-template-columns:1fr;gap:18px}.ai-button{min-height:68px;font-size:18px}.footer{padding:20px 24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ai-button{transition:none}}
.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:28px;padding:32px 36px 42px;border-bottom:var(--line)}
.intro h1{font-size:clamp(90px,11vw,140px);margin:0}
.intro-copy h2{font-size:clamp(30px,4vw,48px);line-height:1.4;font-weight:900;letter-spacing:-.04em;margin-bottom:15px}
.intro-copy>p{font-weight:700}
.intro-copy .demo-note{font-size:13px;font-weight:400;margin-top:8px}
.melon-grid{padding:30px 36px 48px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.melon-card{background:var(--green);border:var(--line);box-shadow:7px 7px 0 var(--ink);overflow:hidden}
.melon-card:nth-child(2),.melon-card:nth-child(3){background:var(--red)}
.melon-card summary{cursor:pointer;list-style:none;position:relative;padding:22px 22px 18px;text-align:center}
.melon-card summary::-webkit-details-marker{display:none}
.melon-card summary:focus-visible{outline:4px solid #2676e6;outline-offset:-7px}
.question{display:flex;align-items:center;gap:14px;text-align:left;font-size:18px;font-weight:900;min-height:54px}
.question .micro{border:2px solid var(--ink);padding:1px 7px;background:var(--paper);flex-shrink:0}
.melon-visual{display:block;position:relative;height:210px;width:100%;margin:7px auto 0}
.half{position:absolute;width:160px;height:186px;object-fit:contain;top:8px;left:calc(50% - 80px);pointer-events:none;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.half.left{clip-path:polygon(0 0,51% 0,47% 20%,54% 38%,46% 55%,53% 74%,49% 100%,0 100%)}
.half.right{clip-path:polygon(51% 0,100% 0,100% 100%,49% 100%,53% 74%,46% 55%,54% 38%,47% 20%)}
.melon-card summary:hover .half.left{transform:rotate(-4deg)}
.melon-card summary:hover .half.right{transform:rotate(4deg)}
.melon-card[open] .half.left{transform:translate(-95px,18px) rotate(-24deg)}
.melon-card[open] .half.right{transform:translate(95px,18px) rotate(24deg)}
.tap,.close-hint{font-size:14px;font-weight:800;display:inline-block;border-bottom:2px solid var(--ink)}
.close-hint{display:none}
.melon-card[open] .tap{display:none}
.melon-card[open] .close-hint{display:inline-block}
.answer{position:relative;background:var(--paper);border:var(--line);margin:0 20px 24px;padding:24px 20px;text-align:center;box-shadow:4px 4px 0 var(--ink);animation:pop-answer .5s ease-out both}
.answer>p{font-size:clamp(22px,2.5vw,30px);font-weight:900;line-height:1.6}
.answer .answer-detail{font-size:16px;margin-top:12px;font-weight:500}
.ai-area h2{margin-bottom:24px}
@keyframes pop-answer{from{opacity:0;transform:translateY(-70px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){.intro{padding:28px 24px;gap:24px;grid-template-columns:1fr}.intro h1{font-size:100px}.intro-copy h2 br{display:none}.intro-copy h2{font-size:30px}.melon-grid{padding:25px 22px 38px;grid-template-columns:1fr;gap:22px}.melon-card summary{padding:18px}.half{width:140px;height:163px;left:calc(50% - 70px)}.melon-visual{height:180px}.melon-card[open] .half.left{transform:translate(-75px,10px) rotate(-24deg)}.melon-card[open] .half.right{transform:translate(75px,10px) rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.half{transition:none}.answer{animation:none}}

/* Display individual poses from the supplied illustration without altering it. */
.girl-visual{height:265px}
.pose{position:absolute;display:block;left:50%;top:8px;width:var(--pw);height:var(--ph);transform:translateX(-50%)}
.pose-piece{position:absolute;inset:0;display:block;background-image:url("mimi-poses.png");background-size:var(--sheet);background-position:var(--offset);background-repeat:no-repeat;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.melon-card summary:hover .pose{filter:drop-shadow(3px 4px 0 rgba(21,25,20,.2))}
.writing{--pw:211.705px;--ph:230.000px;--sheet:798.727px 530.568px;--offset:-228.955px -300.568px}
.hugging{--pw:207.742px;--ph:230.000px;--sheet:755.785px 502.043px;--offset:-283.914px -9.892px}
.thinking{--pw:220.000px;--ph:200.676px;--sheet:757.117px 502.928px;--offset:0.000px -302.252px}
.cheering{--pw:210.123px;--ph:230.000px;--sheet:867.753px 576.420px;--offset:-478.741px -312.346px}
@media(prefers-reduced-motion:reduce){.pose-piece{transition:none}}
.character-art{transform-origin:50% 85%;animation:idle-float 4.8s ease-in-out infinite;mix-blend-mode:multiply}
.hugging .character-art{animation-name:idle-hug;animation-duration:5.5s}
.thinking .character-art{animation-name:idle-think;animation-duration:6s}
.cheering .character-art{animation-name:idle-cheer;animation-duration:4.2s}
.melon-card summary:hover .character-art,.melon-card summary:focus-visible .character-art{animation:hello-bob .8s ease-in-out both}
.melon-card[open] .character-art{animation:happy-hop .85s ease-out both}
.motion-toggle{justify-self:start;border:2px solid var(--ink);background:var(--paper);padding:7px 13px;cursor:pointer;font:inherit;font-size:14px;font-weight:700}
.intro{position:relative}.motion-toggle{grid-column:1/-1}
@keyframes idle-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes idle-hug{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) scale(1.018)}}
@keyframes idle-think{0%,40%,100%{transform:rotate(0)}60%,75%{transform:rotate(-3deg) translateY(-2px)}}
@keyframes idle-cheer{0%,35%,70%,100%{transform:translateY(0)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes hello-bob{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg) translateY(-5px)}65%{transform:rotate(4deg) translateY(-3px)}}
@keyframes happy-hop{0%{transform:scale(1)}18%{transform:scale(1.025,.975)}43%{transform:translateY(-18px) rotate(-4deg)}70%{transform:translateY(0) rotate(2deg)}100%{transform:translateY(-3px)}}
body.motion-paused .character-art{animation:none!important;transform:none!important}
body.motion-paused .answer{animation:none}
@media(prefers-reduced-motion:reduce){.character-art,.melon-card[open] .character-art,.melon-card summary:hover .character-art,.melon-card summary:focus-visible .character-art{animation:none!important;transform:none!important}}
.girl-visual{width:244px;max-width:100%;height:auto;aspect-ratio:1;margin:18px auto 22px;border:3px solid var(--ink);border-radius:50%;overflow:hidden;background:#fff;isolation:isolate;box-shadow:5px 5px 0 var(--ink)}
.girl-visual .pose{width:210px;height:210px;top:14px}
.girl-visual .character-art{background-image:url("mimi-girls-only.png");background-size:420px 420px;mix-blend-mode:normal}
.writing .character-art{background-position:0 0}
.hugging .character-art{background-position:-210px 0}
.thinking .character-art{background-position:0 -210px}
.girl-visual.thinking .pose{height:176px;margin-top:-88px}
.girl-visual.thinking .character-art{background-image:url("mimi-expressions.png");background-size:1285.68px 844.8px;background-position:-853px -219px}
.cheering .character-art{background-position:-210px -210px}
.melon-card summary:hover .pose{filter:none}

/* A fixed circular frame, with independently animated character art inside. */
.flip-card{padding:22px 18px 20px;text-align:center}
.flip-card .question{margin:0;font-size:18px}
.flip-button{display:block;position:relative;width:min(100%,330px);aspect-ratio:1;margin:22px auto 20px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);font:inherit;cursor:pointer;perspective:1100px;-webkit-tap-highlight-color:transparent}
.flip-button:focus-visible{outline:4px solid #2468d7;outline-offset:9px}
.flip-disc{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.flip-button.is-flipped .flip-disc{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;display:flex;width:100%;height:100%;margin:0;border:3px solid var(--ink);border-radius:50%;background:#fff;box-shadow:5px 5px 0 var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.flip-front{isolation:auto}
.flip-front .pose{top:50%;margin-top:-105px}
.flip-back{transform:rotateY(180deg);flex-direction:column;align-items:center;justify-content:center;padding:25px 30px;gap:6px}
.fruit-art{display:block;width:132px;height:103px;flex-shrink:0}
.fruit-art svg{width:100%;height:100%;display:block}
.fruit-label{font-family:monospace;font-size:9px;font-weight:800;letter-spacing:.08em}
.flip-answer{display:block;max-width:245px;font-size:20px;font-weight:900;line-height:1.6;text-wrap:balance}
.flip-detail{display:block;font-size:13px;line-height:1.6}
.flip-hint{font-size:13px;font-weight:800}
.is-flipped .character-art{animation-play-state:paused}
body.motion-paused .flip-disc{transition:none}
@media(max-width:380px){.flip-card{padding:18px 12px}.flip-back{padding:20px 23px;gap:3px}.fruit-art{width:100px;height:78px}.flip-answer{font-size:17px}.flip-detail{font-size:11px}.fruit-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.flip-disc{transition:none}}

/* View each supplied frame through a fixed window, excluding titles and numbers. */
.girl-visual.writing .pose{width:195.8px;height:264px;top:50%;margin-top:-132px}
.girl-visual.writing .character-art{background-image:url("mimi-circle-hover.png");background-size:1783.1px 1047.2px;background-position:-52.8px -71.5px;animation:none;transform:none;transition:none}
.girl-visual .character-art{clip-path:circle(50% at 50% 50%)}
.girl-visual.writing .character-art{clip-path:circle(97.9px at 50% 105px)}
.circle-trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px #ffaaaa);opacity:0}
.circle-trail circle{transition:stroke-dashoffset 140ms linear}
body.motion-paused .circle-trail circle{transition:none}
@media(prefers-reduced-motion:reduce){.circle-trail circle{transition:none}}

/* Decorative rain never intercepts links, taps, or page scrolling. */
.melon-rain{position:fixed;inset:0;z-index:10;overflow:hidden;pointer-events:none;user-select:none;contain:strict}
.melon-drop{position:absolute;top:-80px;left:var(--left);display:block;width:var(--size);height:var(--size);opacity:0;animation:melon-fall var(--duration) linear var(--delay) infinite}
.melon-drop svg{display:block;width:100%;height:100%}
@keyframes melon-fall{0%{transform:translate3d(0,0,0) rotate(var(--angle));opacity:0}8%{opacity:var(--opacity)}45%{transform:translate3d(var(--sway),calc(45dvh + 72px),0) rotate(calc(var(--angle) + var(--turn) * .45))}88%{opacity:var(--opacity)}100%{transform:translate3d(var(--drift),calc(100dvh + 160px),0) rotate(calc(var(--angle) + var(--turn)));opacity:0}}
body.motion-paused .melon-drop,.melon-rain.is-inactive .melon-drop{animation-play-state:paused}
@media(max-width:760px){.melon-drop:nth-child(n+17){display:none}.melon-drop{width:calc(var(--size) * .8);height:calc(var(--size) * .8)}}
@media(prefers-reduced-motion:reduce){.melon-rain{display:none}.melon-drop{animation:none}}