@charset "UTF-8";
/* Benefit 03 only. The illustration shows an example of using AI, alongside the service copy. */
#gift-system .gift-ai-break{height:auto;width:100%;max-width:410px;aspect-ratio:400/420;margin:18px auto 14px;isolation:isolate;container-type:inline-size}
#gift-system .gift-ai-break:before{inset:17% 0 3%;background:#fffbf74a;transform:rotate(4deg)}
#gift-system .ai-break-visual{position:absolute;inset:0;pointer-events:none}
#gift-system .ai-desk-scene{position:absolute;left:0;bottom:2%;width:100%;aspect-ratio:552/535;z-index:2;transform-origin:50% 85%}
/* Different atlas windows preserve the complete paper piles and sofa without neighboring sprites. */
#gift-system .ai-desk-pose{position:absolute;top:0;height:100%;opacity:0;background:url('assets/toua-ai-break-atlas.webp') no-repeat;transition:opacity .15s ease}
#gift-system .ai-exhausted{left:0;width:100%;background-size:278.26087% 191.40187%;background-position:0 0}
#gift-system .ai-thinking{left:5.7971%;width:88.4058%;background-size:314.75410% 191.40187%;background-position:52.67176% 0}
#gift-system .ai-pressing{left:5.0725%;width:89.8551%;background-size:309.67742% 191.40187%;background-position:100% 0}
#gift-system .ai-button-ring{position:absolute;left:74%;top:83%;width:13%;height:9%;border:2px solid #d7bc77;border-radius:50%;opacity:0}
#gift-system .ai-overload{position:absolute;inset:0;opacity:0;z-index:4;color:#8a7a91}
#gift-system .ai-overload-scribble{position:absolute;left:11%;top:1%;width:14%;height:auto;transform:rotate(-10deg)}
#gift-system .ai-typing-beats{position:absolute;left:40%;bottom:4%;display:flex;gap:5px}
#gift-system .ai-typing-beats i{width:4px;height:4px;border-radius:50%;background:#968aa1;opacity:.5}
#gift-system .ai-idea-bubble{position:absolute;left:19%;top:0;width:76%;padding:8px 10px;border:1.5px solid #ae98b7;border-radius:49% 44% 48% 42%;background:#fffaf3;z-index:5;font-family:var(--hand);font-size:clamp(15px,4.7cqw,20px);line-height:1.5;color:#78647e;text-align:center;opacity:0;transform-origin:65% 95%;font-style:oblique 6deg;font-weight:400;font-synthesis:style}
#gift-system .ai-idea-bubble:after{content:'';position:absolute;bottom:-8px;left:45%;width:11px;height:11px;border:1.5px solid #ae98b7;background:#fffaf3;border-radius:50%}
#gift-system .ai-idea-bulb{position:absolute;left:-20%;top:20%;font-size:clamp(25px,8cqw,34px);transform:rotate(-15deg)}
#gift-system .ai-click-hint{position:absolute;right:1%;bottom:24%;z-index:5;font-family:var(--hand);font-size:clamp(17px,5.2cqw,23px);color:#8e739c;opacity:0;transform:rotate(-10deg);font-style:oblique 6deg;font-weight:400;font-synthesis:style}
#gift-system .ai-break-reward{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity .2s ease}
#gift-system .ai-auto-computer{position:absolute;left:-4%;top:-1%;width:63%;aspect-ratio:490/410;z-index:1;transform:rotate(-5deg);transform-origin:50% 85%}
#gift-system .ai-auto-computer-art{position:absolute;inset:0;background:url('assets/toua-ai-break-atlas.webp') no-repeat;background-size:313.46939% 249.75610%;background-position:53.34608% 92.01954%}
#gift-system .ai-auto-screen{position:absolute;left:14.694%;top:13.902%;width:70.816%;height:47.805%;overflow:hidden;background:#fffaf0;border-radius:1px;padding:2.5% 3%;color:#786b7b;font-family:Arial,'Noto Sans JP',sans-serif}
#gift-system .ai-screen-title{display:flex;align-items:center;gap:4px;font-size:clamp(7.5px,2.3cqw,10px);line-height:1.3;padding-bottom:3%;border-bottom:1px solid #e6deeb;margin-bottom:3%}
#gift-system .ai-screen-title b{font-weight:600;white-space:nowrap}
#gift-system .ai-work-dot{width:5px;height:5px;border-radius:50%;background:#93b69a;flex-shrink:0}
#gift-system .ai-screen-gear{margin-left:auto;display:block;font-size:1.2em;line-height:1}
#gift-system .ai-screen-task{display:grid;grid-template-columns:1fr 24% 10px;gap:4px;align-items:center;margin:4% 0;font-size:clamp(7px,2.05cqw,9px);line-height:1.2}
#gift-system .ai-task-name{white-space:nowrap}
#gift-system .ai-task-progress{display:block;height:4px;background:#c6d9b9;border-radius:3px;transform-origin:left}
#gift-system .ai-task-check{font:700 11px/1 Arial,sans-serif;color:#78a17b;text-align:right}
#gift-system .task-research{--task-delay:.35s;--check-delay:1.55s}
#gift-system .task-writing{--task-delay:1.1s;--check-delay:2.3s}
#gift-system .task-organize{--task-delay:1.85s;--check-delay:3.05s}
#gift-system .ai-relaxing-toua{position:absolute;left:8%;bottom:2%;width:92%;aspect-ratio:552/476;z-index:2;background:url('assets/toua-ai-break-atlas.webp') no-repeat;background-size:278.26087% 215.12605%;background-position:0 97.81022%;transform-origin:55% 80%}
#gift-system .ai-coffee-break{position:absolute;left:-1%;bottom:-1%;width:27%;aspect-ratio:420/315;z-index:4}
#gift-system .ai-coffee-art{position:absolute;inset:0;background:url('assets/toua-ai-break-atlas.webp') no-repeat;background-size:365.71429% 325.07937%;background-position:97.67025% 91.67842%}
#gift-system .ai-coffee-steam{position:absolute;left:40%;top:0;width:30%;height:28%}
#gift-system .ai-coffee-steam i{position:absolute;bottom:0;left:16%;width:2px;height:100%;border-radius:50%;background:#b7a796;opacity:.45;transform:rotate(12deg)}
#gift-system .ai-coffee-steam i+i{left:60%;height:75%;transform:rotate(-12deg)}
#gift-system .ai-relax-note{position:absolute;right:8%;top:32%;font:30px/1 Georgia,serif;color:#a57c8b;z-index:4;transform:rotate(13deg)}
#gift-system .ai-relax-sparkle{position:absolute;right:1%;top:55%;font-size:22px;line-height:1;color:#d5a843;z-index:4}
#gift-system .ai-break-replay{position:absolute;right:0;bottom:-11px;border:1px solid #bdb0c8;width:27px;height:27px;background:#fffdf5bf;border-radius:50%;color:#8c789d;font:20px/1 Georgia,serif;display:grid;place-items:center;padding:0;z-index:8}
#gift-system .ai-break-replay:hover{background:#fffdf5}
#gift-system .ai-break-replay[hidden]{display:none}
#gift-system [data-ai-state="ready"] .ai-exhausted,#gift-system [data-ai-state="working"] .ai-exhausted,#gift-system [data-ai-state="ready"] .ai-overload,#gift-system [data-ai-state="working"] .ai-overload{opacity:1}
#gift-system [data-ai-state="thinking"] .ai-thinking,#gift-system [data-ai-state="thinking"] .ai-idea-bubble{opacity:1}
#gift-system [data-ai-state="pressing"] .ai-pressing,#gift-system [data-ai-state="pressing"] .ai-click-hint{opacity:1}
#gift-system [data-ai-state="relaxing"] .ai-break-reward,#gift-system [data-ai-state="complete"] .ai-break-reward{opacity:1}
#gift-system [data-ai-state="working"] .ai-desk-scene{animation:ai-keyboard-work .25s ease-in-out 10}
#gift-system [data-ai-state="working"] .ai-overload-scribble{animation:ai-head-spin 1.1s ease-in-out 3 alternate}
#gift-system [data-ai-state="working"] .ai-typing-beats i{animation:ai-typing .42s ease-in-out 6 alternate}
#gift-system [data-ai-state="working"] .ai-typing-beats i:nth-child(2){animation-delay:.14s}
#gift-system [data-ai-state="working"] .ai-typing-beats i:nth-child(3){animation-delay:.28s}
#gift-system [data-ai-state="thinking"] .ai-idea-bubble{animation:ai-bubble-appear .4s ease-out both}
#gift-system [data-ai-state="thinking"] .ai-desk-scene{animation:ai-thought-tilt 1.2s ease-in-out 2}
#gift-system [data-ai-state="pressing"] .ai-desk-scene{animation:ai-button-press .6s ease both}
#gift-system [data-ai-state="pressing"] .ai-button-ring{animation:ai-button-ring .7s ease-out both}
#gift-system [data-ai-state="pressing"] .ai-click-hint{animation:ai-click-pop .35s ease-out both}
#gift-system [data-ai-state="relaxing"] .ai-auto-computer{animation:ai-computer-arrives .5s ease-out both}
#gift-system [data-ai-state="relaxing"] .ai-relaxing-toua{animation:ai-relax-settle .65s .12s ease-out both}
#gift-system [data-ai-state="relaxing"] .ai-screen-gear{animation:ai-repeat-loop 2s linear 2}
#gift-system [data-ai-state="relaxing"] .ai-task-progress{animation:ai-progress 1.2s var(--task-delay) ease-in-out both}
#gift-system [data-ai-state="relaxing"] .ai-task-check{animation:ai-check .22s var(--check-delay) ease-out both}
#gift-system [data-ai-state="relaxing"] .ai-coffee-steam i{animation:ai-steam 1.5s .2s ease-out 3 both}
#gift-system [data-ai-state="relaxing"] .ai-coffee-steam i+i{animation-delay:.6s}
#gift-system [data-ai-state="relaxing"] .ai-relax-note{animation:ai-music-note 1.5s .7s ease-out 2 both}
#gift-system [data-ai-state="relaxing"] .ai-relax-sparkle{animation:ai-check .55s 1.1s ease-out both}
@keyframes ai-keyboard-work{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}}
@keyframes ai-head-spin{from{transform:rotate(-13deg) scale(.97)}to{transform:rotate(8deg) scale(1.06)}}
@keyframes ai-repeat-loop{to{transform:rotate(360deg)}}
@keyframes ai-typing{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-3px)}}
@keyframes ai-bubble-appear{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ai-thought-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-1deg)}}
@keyframes ai-button-press{0%,100%{transform:translateY(0)}35%{transform:translateY(4px) rotate(1deg)}65%{transform:translateY(-1px)}}
@keyframes ai-button-ring{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.8)}}
@keyframes ai-click-pop{from{opacity:0;transform:translateY(5px) rotate(-4deg) scale(.7)}to{opacity:1;transform:translateY(0) rotate(-10deg) scale(1)}}
@keyframes ai-computer-arrives{from{opacity:0;transform:translate(-12px,8px) rotate(-8deg) scale(.85)}to{opacity:1;transform:translate(0,0) rotate(-5deg) scale(1)}}
@keyframes ai-relax-settle{0%{opacity:0;transform:translateY(10px) rotate(2deg)}70%{opacity:1;transform:translateY(-2px) rotate(-1deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes ai-progress{from{transform:scaleX(.05);background:#d9c7b1}to{transform:scaleX(1);background:#c6d9b9}}
@keyframes ai-check{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes ai-steam{0%{opacity:0;transform:translateY(3px) rotate(12deg)}35%{opacity:.45}100%{opacity:0;transform:translateY(-10px) rotate(-6deg)}}
@keyframes ai-music-note{0%{opacity:0;transform:translateY(6px) rotate(5deg)}35%,100%{opacity:1;transform:translateY(0) rotate(13deg)}}
@media(max-width:760px){
 #gift-system .gift-ai-break{height:auto;max-width:350px;margin:17px auto 20px}
 #gift-system .ai-idea-bubble{padding:7px 8px}
 #gift-system .ai-break-replay{width:24px;height:24px;font-size:18px;bottom:-10px}
 #gift-system .ai-screen-task{gap:3px;grid-template-columns:1fr 20% 8px}
 #gift-system .ai-task-check{font-size:9px}
 #gift-system .ai-relax-note{font-size:25px}
}
@media(prefers-reduced-motion:reduce){#gift-system .gift-ai-break:not(.replay-motion) *{animation:none!important;transition:none!important}#gift-system .ai-break-replay{display:none}}