/* fix32. One bounded scene; its controls use the same coordinates as the pictures. */
html body.login-mode.lovable-login{background:#f6f5e9;color:#303d32}
html body.login-mode.lovable-login #app{min-height:100svh}
html body.login-mode.lovable-login .login{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,390px);align-items:center;gap:24px;width:100%;min-height:100svh;padding:36px clamp(24px,4vw,72px);background:#f6f5e9;overflow:hidden}
html body.login-mode.lovable-login .cat-visual{position:relative;inset:auto;z-index:0;display:block;min-width:0;min-height:0;width:100%;height:auto;aspect-ratio:1672/941;container-type:inline-size;transform:none;overflow:visible;align-self:center;background:#d3deaa;border-radius:20px}
html body.login-mode.lovable-login .cat-visual picture{display:contents}
html body.login-mode.lovable-login .cat-visual :is(.login-scene-closed,.login-scene-open){position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-width:none;object-fit:fill;object-position:center;mask-image:none;border-radius:20px;transform:none;opacity:1;animation:none;transition:opacity .62s ease,transform .62s ease}
html body.login-mode.lovable-login .cat-visual .login-scene-open{opacity:0;transform:translateY(5px) scale(.992);pointer-events:none}
html body.login-mode.lovable-login .scene-open .login-scene-open{opacity:1;transform:none}
html body.login-mode.lovable-login .scene-open .login-scene-closed{opacity:0}
html body.login-mode.lovable-login .login-form{position:relative;z-index:2;width:100%;max-width:390px;min-width:0;margin:0;padding:30px;background:#fffef9;border:1px solid #e4e3d7;border-radius:16px;box-shadow:0 12px 36px #35432b08;backdrop-filter:none}
html body.login-mode.lovable-login .login-form h1{font-size:26px;line-height:1.4;letter-spacing:0}
html body.login-mode.lovable-login .login-brand{margin-bottom:14px}
html body.login-mode.lovable-login .login-form form{margin-top:16px}
html body.login-mode.lovable-login .login-form label{margin-top:12px}
html body.login-mode.lovable-login .login-help{margin-top:16px}
html body.login-mode.lovable-login .scene-hotspot{position:absolute;z-index:6;display:block;border:0;background:transparent;color:#354730;margin:0;padding:0;box-shadow:none;border-radius:12px;cursor:pointer;min-height:44px;min-width:44px;filter:none;transform:none;-webkit-tap-highlight-color:transparent}
html body.login-mode.lovable-login .scene-hotspot:hover{background:transparent;filter:none}
html body.login-mode.lovable-login .scene-hotspot:focus-visible{outline:2px solid #6b643b;outline-offset:5px}
html body.login-mode.lovable-login .box-hotspot{left:8%;top:25%;width:42%;height:59%}
html body.login-mode.lovable-login .paw-hotspot{left:27.5%;top:24%;width:12%;height:15%}
html body.login-mode.lovable-login .scene-cue{position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:nowrap;width:max-content;padding:10px 14px;background:#fffef2f5;border:1px solid #d7d9bb;border-radius:10px;box-shadow:0 4px 12px #3d492218;font-size:16px;line-height:1.4;pointer-events:none;text-align:left}
html body.login-mode.lovable-login .scene-cue small{font-size:12px;font-weight:400;color:#728065}
html body.login-mode.lovable-login .box-hotspot .scene-cue{left:104%;top:25%}
html body.login-mode.lovable-login .paw-hotspot .scene-cue{left:120%;top:-35%}
html body.login-mode.lovable-login .scene-cue:before{content:'';position:absolute;right:100%;top:24px;width:24px;height:1px;background:#fffdf3}
html body.login-mode.lovable-login .scene-ring{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);border:1.5px solid #fffef4;border-radius:50%;box-shadow:0 0 0 5px #ffffe936;pointer-events:none}
html body.login-mode.lovable-login .scene-hotspot:hover .scene-cue{background:#fffef2;transform:translateY(-2px)}
html body.login-mode.lovable-login .scene-hotspot.is-loading .scene-cue :is(b,small){visibility:hidden}
html body.login-mode.lovable-login .scene-hotspot.is-loading .scene-cue:after{content:'小埋准备中…';font-size:12px;font-weight:400;color:#728065;position:absolute;left:14px;bottom:10px}
html body.login-mode.lovable-login .scene-module-cards{position:absolute;inset:0;z-index:4;pointer-events:none}
/* Small watercolor yarn balls land on the grass; labels sit beside the yarn. */
html body.login-mode.lovable-login .scene-yarn{position:absolute;left:62%;width:11%;height:auto;overflow:visible;pointer-events:none;--yarn-light:#ead6b6;--yarn-base:#c5a47f;--yarn-dark:#947959;--throw-x:-31.9cqw;--throw-y:8cqw;--arc:8cqw;--delay:0ms}
html body.login-mode.lovable-login .scene-yarn[data-yarn=daily]{left:61%;top:10%;width:11.8%}
html body.login-mode.lovable-login .scene-yarn[data-yarn=academic]{left:64%;top:41%;width:10.5%;--yarn-light:#e6e3c6;--yarn-base:#acb791;--yarn-dark:#778764;--throw-x:-34.9cqw;--throw-y:-8.9cqw;--arc:6cqw;--delay:150ms}
html body.login-mode.lovable-login .scene-yarn[data-yarn=fill]{left:61.8%;top:69%;width:11.2%;--yarn-light:#f1d6c8;--yarn-base:#c69d91;--yarn-dark:#9c7168;--throw-y:-25.1cqw;--arc:4cqw;--delay:300ms}
html body.login-mode.lovable-login .scene-module-card{position:absolute;left:75%;display:grid;align-content:center;justify-items:start;gap:.65cqw;width:23%;height:19%;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;pointer-events:none;cursor:default;transform:none;--delay:0ms}
html body.login-mode.lovable-login .scene-module-card[data-scene-module=daily]{top:10%}
html body.login-mode.lovable-login .scene-module-card[data-scene-module=academic]{left:77%;top:41%;--delay:150ms}
html body.login-mode.lovable-login .scene-module-card[data-scene-module=fill]{top:69%;--delay:300ms}
html body.login-mode.lovable-login .scene-module-card strong{font-size:2.5cqw;font-weight:600;line-height:1.2;letter-spacing:.12em;color:#493e25;white-space:nowrap;text-shadow:0 0 8px #fffbe4,0 1px 2px #fffbe4}
html body.login-mode.lovable-login .scene-module-card small{font-family:Georgia,'Times New Roman',serif;font-size:3.8cqw;font-weight:600;line-height:1;letter-spacing:.02em;color:#574326;text-shadow:0 0 8px #fffbe4,0 1px 2px #fffbe4;white-space:nowrap}
html body.login-mode.lovable-login .scene-module-card .scene-count-unit{font-family:inherit;font-size:.45em;margin-left:.35em;letter-spacing:0}
html body.login-mode.lovable-login .scene-catalog-summary{width:100%;margin:0;font:400 clamp(8px,1.35cqw,14px)/1.25 Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#574326;text-shadow:0 0 8px #fffbe4,0 1px 2px #fffbe4;white-space:normal}
html body.login-mode.lovable-login .scene-fallback{grid-column:1;align-self:center;padding:24px;color:#7b8271;text-align:center;font-size:13px}
html body.login-mode.lovable-login .scene-fallback p{margin-bottom:8px}
html body.login-mode.lovable-login .scene-fallback button{font-size:13px;min-height:44px}
html body.login-mode.lovable-login .scene-fallback:not([hidden])~.login-form{grid-column:2;grid-row:1}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@keyframes boxKnock{0%,100%{transform:rotate(0)}25%{transform:rotate(-.5deg)}60%{transform:rotate(.4deg)}}
/* Translation and rolling are separate: captions never travel or rotate. */
html body.login-mode.lovable-login .yarn-ball{transform-box:fill-box;transform-origin:center}
@keyframes cardArrival{from{opacity:0}to{opacity:1}}
@keyframes yarnThrow{0%{opacity:0;transform:translate(var(--throw-x),var(--throw-y)) scale(.45)}9%{opacity:1}46%{transform:translate(calc(var(--throw-x) * .4),calc(var(--throw-y) * .4 - var(--arc))) scale(.93);animation-timing-function:ease-in}70%{transform:translate(-1.3cqw,.15cqw) scale(1.03,.95);animation-timing-function:ease-out}82%{transform:translate(-.7cqw,-1.05cqw) scale(.98,1.02);animation-timing-function:ease-in}92%{transform:translate(-.25cqw,0) scale(1.01,.99)}100%{opacity:1;transform:none}}
@keyframes yarnRoll{0%{transform:rotate(-95deg)}70%{transform:rotate(-20deg)}82%{transform:rotate(-12deg)}100%{transform:rotate(0)}}
@keyframes yarnGround{0%,65%{opacity:0}100%{opacity:.13}}
@keyframes yarnUnwind{from{stroke-dashoffset:1;opacity:0}to{stroke-dashoffset:0;opacity:.56}}
@keyframes cueArrival{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 html body.login-mode.lovable-login [data-scene-state=opening] .login-scene-closed{animation:boxKnock .36s ease both}
 html body.login-mode.lovable-login .scene-ready .scene-module-card{animation:cardArrival .18s ease-out calc(1.05s + var(--delay)) both}
 html body.login-mode.lovable-login .scene-ready .scene-yarn{animation:yarnThrow 1.05s ease-out var(--delay) both}
 html body.login-mode.lovable-login .scene-ready .yarn-ball{animation:yarnRoll 1.05s ease-out var(--delay) both}
 html body.login-mode.lovable-login .scene-ready .yarn-shadow{animation:yarnGround 1.05s linear var(--delay) both}
 html body.login-mode.lovable-login .scene-ready .yarn-tail{stroke-dasharray:1;animation:yarnUnwind .22s ease-out calc(.9s + var(--delay)) both}
  html body.login-mode.lovable-login .scene-hotspot:not([hidden]) .scene-cue{animation:cueArrival .25s ease both;transition:transform .15s ease}
}
@media(max-width:1000px){
 html body.login-mode.lovable-login .login{gap:16px;padding:24px;grid-template-columns:minmax(0,1fr) 330px}
 html body.login-mode.lovable-login .login-form{padding:24px}
 html body.login-mode.lovable-login .scene-cue{font-size:14px;padding:8px 10px}
}
@media(max-width:900px){
 html body.login-mode.lovable-login .login{display:flex;flex-direction:column;min-height:100svh;justify-content:flex-start;gap:14px;padding:16px 16px max(20px,env(safe-area-inset-bottom));overflow:hidden}
 html body.login-mode.lovable-login .cat-visual{width:min(100%,470px);margin:0;flex:none;align-self:center;transform:none}
 html body.login-mode.lovable-login .login-form{width:min(100%,430px);max-width:430px;padding:20px 22px;order:-1}
 html body.login-mode.lovable-login .login-form h1{font-size:24px}
 html body.login-mode.lovable-login .login-brand{font-size:11px;margin-bottom:10px}
 html body.login-mode.lovable-login .login-form .login-welcome{font-size:14px}
 html body.login-mode.lovable-login .login-form form{margin-top:12px}
 html body.login-mode.lovable-login .login-form label{margin-top:10px}
 html body.login-mode.lovable-login .login-help{font-size:11px;margin-top:12px}
 html body.login-mode.lovable-login .scene-cue{font-size:13px;padding:7px 9px;border-radius:8px}
 html body.login-mode.lovable-login .scene-cue small{font-size:10px}
 html body.login-mode.lovable-login .scene-ring{width:18px;height:18px}
 html body.login-mode.lovable-login .paw-hotspot .scene-cue{left:110%;top:-25%}
 html body.login-mode.lovable-login .scene-module-card strong{font-size:clamp(9px,2.5cqw,12px)}
 html body.login-mode.lovable-login .scene-module-card small{font-size:clamp(13px,3.8cqw,18px)}
 html body.login-mode.lovable-login .cat-visual:has(.scene-module-cards:not([hidden])){margin-bottom:8px}
 html body.login-mode.lovable-login .scene-fallback{padding:4px 12px;order:1}
}
@media(max-width:900px) and (max-height:700px){
 html body.login-mode.lovable-login .login{justify-content:flex-start}
 html body.login-mode.lovable-login .login-form{order:-1}
 html body.login-mode.lovable-login .cat-visual{max-width:350px}
}
@media(prefers-reduced-motion:reduce){
 html body.login-mode.lovable-login .cat-visual *{animation:none!important;transition:none!important}
}
/* v1.3: release the previous app max-width and keep the original scene geometry. */
html body.login-mode.lovable-login .login{max-width:none;margin:0}
html body.login-mode.lovable-login #app{padding:0;margin:0;max-width:none}
html body.login-mode.lovable-login .cat-visual{overflow:hidden}
html body.login-mode.lovable-login .login-help{margin-top:20px}
@media(max-width:900px){html body.login-mode.lovable-login .login-form button[type=submit]{margin-top:24px}}