:root{
  --eazo-safe-area-top: max(56px, env(safe-area-inset-top, 0px));
  --eazo-safe-area-bottom: max(34px, env(safe-area-inset-bottom, 0px));
  --paper:#f0e2d8;
  --paper-2:#ead8d0;
  --wall:#b9ada5;
  --ink:#332926;
  --muted:#6f615b;
  --rose:#d9868c;
  --rose-soft:#f0b2b0;
  --oat:#d7bea0;
  --warm:#f1c991;
  --blue:#bfcfda;
  --blue-soft:#d9e5eb;
  --shadow:rgba(68,45,38,.22);
  --aura:rgba(238,176,118,.38);
  color-scheme: light;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS","Kaiti SC","STKaiti",cursive;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:0;min-height:100%;overflow-x:hidden;background:#c7bbb3;color:var(--ink)}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(circle at 18% 12%, rgba(246,215,189,.46) 0 18%, transparent 33%),
    radial-gradient(circle at 83% 23%, rgba(208,219,204,.20) 0 17%, transparent 35%),
    linear-gradient(180deg,#bdb1aa 0%,#d9cac0 46%,#eeded2 100%);
}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
.app{
  position:relative;
  min-height:100dvh;
  width:100%;
  overflow:hidden;
  padding-top:var(--eazo-safe-area-top);
  padding-bottom:var(--eazo-safe-area-bottom);
  isolation:isolate;
}
.grain,.room-light,.door-line,.floor-shadow{position:absolute;inset:0;pointer-events:none;z-index:-3}
.grain{opacity:.36;background-image:radial-gradient(rgba(71,46,37,.11) .7px, transparent .9px);background-size:7px 9px;mix-blend-mode:multiply}
.room-light{background:radial-gradient(ellipse at 23% 6%, rgba(255,222,169,.56) 0 10%, rgba(255,211,159,.24) 22%, transparent 48%)}
.door-line:before{content:"";position:absolute;top:9%;left:50%;width:1.5px;height:71%;background:linear-gradient(180deg,transparent,rgba(81,62,55,.16),transparent);transform:translateX(-50%)}
.door-line:after{content:"";position:absolute;top:16%;right:18%;width:22px;height:22px;border-radius:50%;border:1px solid rgba(82,65,58,.18);box-shadow:inset 0 0 9px rgba(255,236,213,.25)}
.shell{width:min(100%,480px);min-height:calc(100dvh - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom));margin:0 auto;display:flex;flex-direction:column;align-items:center;padding:10px 18px 0;gap:10px;min-width:0}
.topbar{width:100%;display:flex;justify-content:flex-end;align-items:center;min-height:44px;flex:0 0 auto}
.lang{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(70,53,46,.22);border-radius:999px;background:rgba(240,226,216,.48);box-shadow:0 10px 30px rgba(55,35,30,.06);backdrop-filter:blur(5px)}
.lang button{min-width:48px;min-height:36px;border:0;border-radius:999px;background:transparent;color:rgba(51,41,38,.58);font-size:15px;white-space:nowrap}
.lang button.active{background:rgba(255,246,235,.74);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(216,134,140,.22)}
.live{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 auto;min-height:0}
.stage{position:relative;width:100%;flex:1 1 360px;min-height:315px;max-height:560px;display:grid;place-items:center;padding:4px 48px 0 22px}
.lamp{position:absolute;top:-3px;left:29px;width:58px;height:88px;border-radius:0 0 38px 38px;background:linear-gradient(180deg,rgba(248,222,177,.70),rgba(236,187,140,.16));filter:blur(.2px);opacity:.9;pointer-events:none}
.lamp:before{content:"";position:absolute;top:-14px;left:18px;width:22px;height:18px;border-radius:50% 50% 16% 16%;background:rgba(241,213,178,.32)}
.quiet-line{position:absolute;left:12px;right:12px;bottom:4px;text-align:center;color:rgba(91,73,66,.72);font-size:15px;line-height:1.25;min-height:20px;opacity:0;transition:opacity .8s ease;pointer-events:none}
.quiet-line.show{opacity:1}
.hoodie-wrap{position:relative;width:min(68vw,270px);height:min(62vw,310px);max-height:320px;display:grid;place-items:center;transform-origin:50% 8%;animation:breath 4.8s ease-in-out infinite;transition:filter .5s ease, transform .42s cubic-bezier(.2,.8,.2,1)}
.hoodie-wrap:before{content:"";position:absolute;z-index:-1;width:84%;height:79%;border-radius:48% 52% 45% 50%;background:radial-gradient(circle, var(--aura) 0 36%, rgba(238,176,118,.14) 48%, transparent 72%);filter:blur(15px);opacity:var(--aura-opacity,.68);transform:scale(var(--aura-scale,1));transition:transform .7s ease, opacity .7s ease, background .7s ease}
.hook{position:absolute;top:1px;left:50%;width:38px;height:30px;border:2px solid rgba(58,47,43,.42);border-bottom:0;border-radius:34px 34px 0 0;transform:translateX(-50%);z-index:2}
.hook:after{content:"";position:absolute;left:18px;top:-8px;width:1.5px;height:12px;background:rgba(58,47,43,.34)}
svg.hoodie{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 23px 17px rgba(68,45,38,.15));transition:transform .42s ease, opacity .5s ease}
.hoodie-body,.hoodie-sleeve,.hoodie-hood,.hoodie-pocket{transition:fill .7s ease, d .4s ease, opacity .5s ease}
.fold{transition:stroke .7s ease, opacity .7s ease}
.hem-wear{transition:opacity .7s ease}
.washed .hoodie-body,.washed .hoodie-sleeve,.washed .hoodie-hood,.washed .hoodie-pocket{fill:var(--blue-soft)}
.washed .fold{stroke:#9bb0bc;opacity:.52}
.washed .hem-wear{opacity:.30}
.washed svg.hoodie{transform:scaleX(1.035) scaleY(.965)}
.holding .hoodie-wrap{animation:none;transform:scaleX(1.11) scaleY(.92) translateY(8px);filter:drop-shadow(0 0 18px rgba(216,134,140,.26))}
.holding .hoodie-wrap:after{content:"";position:absolute;width:58%;height:47%;border:2px solid rgba(216,134,140,.34);border-radius:50%;animation:pulse .9s ease-out infinite;pointer-events:none}
.smelling{background:radial-gradient(circle at 50% 36%,rgba(251,205,156,.32),transparent 42%)}
.smelling .hoodie-wrap:before{--aura-scale:1.28;--aura-opacity:1}
.washing .hoodie-wrap{animation:rinse .62s ease-in-out 2}
.washing .suds{opacity:1}
.washing .sud{animation:sudrise 1.35s ease-out forwards}
.meter{position:absolute;right:15px;top:16%;display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(51,41,38,.68)}
.meter-track{width:12px;height:min(38vh,214px);min-height:130px;border-radius:999px;background:rgba(255,248,239,.38);border:1px solid rgba(51,41,38,.16);padding:2px;display:flex;align-items:flex-end;box-shadow:inset 0 2px 8px rgba(83,61,52,.12)}
.meter-fill{width:100%;height:100%;border-radius:999px;background:linear-gradient(180deg,#f1c991,#d9868c);transition:height .7s ease, background .7s ease}
.meter-label{font-size:13px;writing-mode:vertical-rl;line-height:1;letter-spacing:.02em;max-height:92px;color:rgba(51,41,38,.62)}
html[lang="zh"] .meter-label{letter-spacing:0;line-height:1.15}
.memory{width:100%;min-height:48px;display:grid;place-items:center;text-align:center;padding:0 8px;color:#8d5960;font-size:18px;line-height:1.28;opacity:0;transform:translateY(4px);transition:opacity .45s ease,transform .45s ease}
.memory.show{opacity:1;transform:translateY(0)}
.actions{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;flex:0 0 auto}
.actions button{min-height:58px;min-width:44px;border:1px solid rgba(74,55,48,.22);border-radius:999px;background:rgba(244,231,220,.62);box-shadow:0 13px 26px rgba(69,47,40,.12), inset 0 1px 0 rgba(255,255,255,.48);font-size:17px;white-space:nowrap;transition:transform .16s ease,background .25s ease}
.actions button:active{transform:scale(.96);background:rgba(249,237,225,.82)}
.instruction{margin:0;width:100%;text-align:center;color:rgba(55,43,39,.73);font-size:16px;line-height:1.32;padding:1px 4px 0;flex:0 0 auto}
.suds{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s ease;overflow:hidden}
.sud{position:absolute;bottom:-32px;border-radius:50%;background:rgba(236,246,249,.52);border:1px solid rgba(173,195,207,.28);box-shadow:inset 0 0 18px rgba(255,255,255,.45)}
.modal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:var(--eazo-safe-area-top) 20px var(--eazo-safe-area-bottom);background:rgba(62,48,44,.32);backdrop-filter:blur(4px)}
.modal.show{display:flex}
.confirm{width:min(100%,340px);border-radius:34px;padding:22px 18px;background:rgba(245,231,219,.94);box-shadow:0 24px 70px rgba(48,35,31,.22);text-align:center}
.confirm .mini{height:110px;margin:2px auto 8px;opacity:.9}
.confirm p{font-size:18px;line-height:1.35;margin:8px 0 16px}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-actions button,.result-actions button,.details-toggle{min-height:46px;border-radius:999px;border:1px solid rgba(74,55,48,.23);background:rgba(255,247,236,.72);white-space:nowrap;font-size:16px}
.danger{color:#8d4d56!important;background:rgba(240,178,176,.35)!important}
.result{width:100%;min-height:calc(100dvh - var(--eazo-safe-area-top) - var(--eazo-safe-area-bottom));display:none;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;padding:10px 18px 0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.result.show{display:flex}
.result-inner{width:min(100%,430px);margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:14px}
.card{width:100%;border-radius:36px;background:rgba(243,229,217,.72);border:1px solid rgba(255,255,255,.32);box-shadow:0 24px 70px rgba(51,35,30,.18), inset 0 0 0 1px rgba(90,65,55,.06);padding:22px 18px 18px;text-align:center}
.final-hoodie{height:150px;margin:-3px auto 6px;position:relative}
.final-hoodie .hoodie-wrap{width:130px;height:150px;margin:auto;animation:none;--aura-opacity:.3}
.result-title{font-size:31px;line-height:1.1;margin:2px 0 8px;font-weight:400;color:#4b3732}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:12px 0}
.stat{border-radius:22px;padding:9px 4px;background:rgba(255,248,239,.38);min-width:0}
.stat b{display:block;font-weight:400;font-size:24px;line-height:1;color:#8d5960}
.stat span{display:block;margin-top:4px;font-size:13px;color:rgba(51,41,38,.62);line-height:1.1}
.closing{font-size:18px;line-height:1.35;margin:8px 0 0;color:rgba(75,55,50,.86)}
.result-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.details-toggle{width:100%}
.details{width:100%;display:none;margin-bottom:8px}
.details.show{display:block}
.details ul{list-style:none;margin:0;padding:6px 4px;display:flex;flex-direction:column;gap:9px}
.details li{background:rgba(255,248,239,.42);border-radius:18px;padding:10px 14px;font-size:16px;line-height:1.3;color:#7a5158}
.toast{position:fixed;left:50%;bottom:calc(var(--eazo-safe-area-bottom) + 18px);transform:translateX(-50%) translateY(12px);z-index:40;max-width:min(90%,360px);padding:11px 18px;border-radius:999px;background:rgba(60,46,42,.9);color:#f6eadd;font-size:15px;line-height:1.3;text-align:center;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
[hidden]{display:none!important}
@keyframes breath{0%,100%{transform:rotate(-.7deg) translateY(0) scale(1)}50%{transform:rotate(.8deg) translateY(5px) scale(1.012)}}
@keyframes pulse{0%{transform:scale(.74);opacity:.55}100%{transform:scale(1.28);opacity:0}}
@keyframes rinse{0%,100%{transform:rotate(0) scale(1)}33%{transform:rotate(-2.5deg) scaleX(1.04) scaleY(.98)}66%{transform:rotate(2.2deg) scaleX(.98) scaleY(1.02)}}
@keyframes sudrise{0%{transform:translateY(0) scale(.7);opacity:0}18%{opacity:1}100%{transform:translateY(-92vh) scale(1.25);opacity:0}}
@media (min-width:700px){.shell{max-width:620px}.stage{max-height:580px}.hoodie-wrap{width:300px;height:345px}.actions{max-width:470px}.instruction{max-width:520px}.result-inner{max-width:520px}}
@media (max-height:700px){.shell{gap:6px;padding-inline:14px}.topbar{min-height:38px}.stage{min-height:265px;flex-basis:285px}.hoodie-wrap{width:min(55vw,210px);height:min(55vw,245px)}.actions button{min-height:50px;font-size:15px}.instruction{font-size:14px}.memory{font-size:16px;min-height:36px}.meter-track{height:132px}.result-title{font-size:26px}.final-hoodie{height:124px}.final-hoodie .hoodie-wrap{height:126px;width:110px}.card{padding:18px 14px}.stats{margin:8px 0}.closing{font-size:16px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.hoodie-wrap{transform:none!important}}