:root{--bg:#071D23;--bg2:#0B282F;--surface:#112E36;--surface2:#173841;--line:#31505A;--text:#F6FAF2;--muted:#B5CBC6;--green:#BAF56D;--green2:#82CF85;--gold:#FFD569;--red:#FF977B;--radius:23px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:radial-gradient(ellipse at 10% 0%,#164339 0,transparent 34%),linear-gradient(160deg,#081F26 20%,#071A23 100%);color:var(--text);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #D5FFAA;outline-offset:3px}a{color:inherit}h1,h2,h3,p{margin-top:0}[hidden]{display:none!important}.app-shell{max-width:1440px;margin:0 auto;padding:0 32px 24px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #31505A70;padding:19px 0}.brand{display:flex;align-items:center;text-decoration:none;gap:12px}.brand-mark{width:47px;height:47px;display:grid;place-items:center;background:#B7F47720;border:1px solid #A1EA7140;border-radius:15px}.brand-mark svg{width:38px}.brand-text{font-size:23px;line-height:1;font-weight:850;letter-spacing:-1.2px}.brand-text>span{color:var(--green)}.brand-text small{display:block;font-weight:500;letter-spacing:.8px;font-size:9px;text-transform:uppercase;color:#B5CBC6;margin-top:5px}.header-actions{display:flex;align-items:center;gap:9px}.live-chip{display:flex;gap:8px;align-items:center;color:#B5CBC6;font-size:12px;margin-right:9px}.live-dot{width:8px;height:8px;border-radius:50%;background:#6C8790}.live-chip.live .live-dot{background:var(--green);box-shadow:0 0 0 4px #B9FF7420}.live-chip.demo .live-dot{background:var(--gold)}.nav-button{border:1px solid #385862;background:#12313B;color:#E8F1EC;padding:12px 15px;border-radius:13px;font-size:13px;font-weight:600}.nav-button:hover,.secondary-button:hover{background:#1D444B}.nav-account{background:#B8F17B;color:#153128;border-color:transparent;font-weight:780}.nav-account:hover{background:#D5FFA0}.welcome{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:38px 1px 25px}.eyebrow,.panel-eyebrow{font-size:11px;color:#B7F47B;letter-spacing:1.4px;font-weight:800}.eyebrow{display:flex;align-items:center;gap:8px}.sparkle{font-size:15px}.welcome h1{margin:9px 0 8px;font-size:clamp(28px,3.1vw,45px);letter-spacing:-1.8px;font-weight:870;line-height:1.15}.welcome h1 em{font-style:normal;color:#B9EF91}.welcome p{color:#B6CDCA;font-size:14px;line-height:1.5;margin-bottom:0}.plan-tag{background:#182E34;border:1px solid #526147;color:#E6F5D3;display:flex;gap:10px;align-items:center;border-radius:40px;white-space:nowrap;padding:12px 16px;font-size:12px;font-weight:740}.plan-tag span:first-child{color:#FFC95F}.dashboard{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(380px,.84fr);gap:18px;align-items:stretch}.pet-stage{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius);border:1px solid #42695885;min-height:642px;background:radial-gradient(ellipse at 49% 51%,#185B4E 0%,#0D3F3C 38%,#0B252E 85%);display:flex;align-items:center;flex-direction:column}.pet-stage.loud{background:radial-gradient(ellipse at 49% 51%,#655225 0%,#3D402C 39%,#0B252E 86%)}.stage-specks{position:absolute;inset:0;pointer-events:none}.stage-specks span{position:absolute;width:4px;height:4px;background:#9DFBBE;border-radius:50%;box-shadow:0 0 18px 2px #A7FFC8;opacity:.38;animation:twinkle 4s ease-in-out infinite}.stage-specks span:nth-child(1){top:17%;left:20%}.stage-specks span:nth-child(2){top:27%;left:77%;animation-delay:-1s}.stage-specks span:nth-child(3){top:57%;left:8%;animation-delay:-2s}.stage-specks span:nth-child(4){top:76%;left:73%;animation-delay:-3s}.stage-specks span:nth-child(5){top:42%;left:90%;animation-delay:-1.5s}.stage-specks span:nth-child(6){top:73%;left:27%;animation-delay:-2.5s}.stage-specks span:nth-child(7){top:10%;left:54%;animation-delay:-.5s}@keyframes twinkle{50%{opacity:.1;transform:scale(.5)}}.stage-top{position:relative;z-index:3;width:100%;display:flex;justify-content:space-between;gap:8px;padding:20px}.classroom-pill,.pet-chip{background:#082F31A8;border:1px solid #638B6F75;display:flex;align-items:center;gap:8px;padding:8px 13px;font-size:11px;border-radius:30px;color:#E9F7EA;font-weight:700}.pet-chip span{color:#B9F16D}.green-spot{background:#B7F277;border-radius:50%;width:7px;height:7px}.speech-area{position:relative;z-index:3;margin-top:10px;min-height:91px}.speech-bubble{background:#0B2632;border:1px solid #315561;box-shadow:0 8px 38px #05242D88;border-radius:21px;padding:13px 25px;max-width:300px;text-align:center;position:relative}.speech-bubble:after{content:"";position:absolute;bottom:-9px;left:calc(50% - 9px);width:17px;height:17px;transform:rotate(45deg);background:#0B2632;border-right:1px solid #315561;border-bottom:1px solid #315561}.speech-bubble strong{display:block;font-size:24px;font-weight:880;letter-spacing:-.7px;line-height:1.15}.speech-bubble small{display:block;margin-top:5px;font-size:11px;color:#BACAC8}.pet-halo{position:absolute;top:30%;left:17%;width:66%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#9BFFAC36 0%,#58C99C1B 45%,transparent 70%);filter:blur(5px)}.pet-art{z-index:2;position:relative;width:min(70%,390px);margin:auto 0 43px;filter:drop-shadow(0 20px 15px #061D1C88);animation:pet-float 3.7s ease-in-out infinite}.pet-art svg{width:100%;display:block}.pet-stage.loud .pet-art{animation:pet-wobble 1.1s ease-in-out infinite}@keyframes pet-float{50%{transform:translateY(-8px)}}@keyframes pet-wobble{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.stage-ground{position:absolute;bottom:79px;width:54%;height:31px;background:#041B2080;border-radius:50%;filter:blur(13px)}.stage-bottom{position:absolute;bottom:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:20px 22px;background:linear-gradient(transparent,#09292BC0)}.stage-hint{display:flex;align-items:center;gap:8px;color:#CDE4D4;font-size:12px}.stage-hint span{color:#C3F29F}.stage-focus{border:0;background:#1B4145AA;border-radius:13px;padding:9px 11px;color:#EAF6EC;font-size:12px}.control-panel{border:1px solid #385762;border-radius:var(--radius);padding:24px;background:linear-gradient(145deg,#17343E,#0F2A35);box-shadow:0 18px 45px #03161C38}.panel-heading,.goal-header,.goal-footer,.noise-heading,.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading{align-items:start;margin-bottom:16px}.panel-heading h2{font-size:22px;letter-spacing:-.7px;margin:6px 0 0}.running-tag{background:#33434A;border:1px solid #4E656D;border-radius:40px;white-space:nowrap;font-size:10px;font-weight:700;padding:7px 9px;color:#E3E9E9}.running-tag.active{color:#BDF887;border-color:#A1E96A80;background:#2D5239}.running-tag.demo{color:#FFE1A0;border-color:#B9A66E;background:#4C432C}.goal-card{border:1px solid #55736280;background:linear-gradient(160deg,#12272B,#132E33);border-radius:20px;padding:20px 20px 16px}.goal-header{font-size:12px;color:#CFE2D7}.goal-header strong{color:#B5F381;font-size:12px}.timer{font-size:clamp(51px,5.7vw,75px);text-align:center;color:#FFD76E;font-weight:880;letter-spacing:-3px;font-variant-numeric:tabular-nums;line-height:1.1;margin-top:8px}.timer-sub{text-align:center;color:#B2C9C2;font-size:11px;margin:7px 0 17px}.progress-track{height:10px;border-radius:20px;background:#304A4A;position:relative;overflow:hidden}.progress-track span{width:0;height:100%;border-radius:20px;display:block;background:linear-gradient(90deg,#6BCDA4,#BFFF77);transition:width .4s}.goal-footer{color:#AFCAC2;font-size:10px;margin-top:11px}.goal-footer span:last-child{color:#FFDA8D}.noise-card{margin-top:14px;border:1px solid #46657282;border-radius:18px;background:#0F2933;padding:17px 17px 13px}.noise-label{color:#9CB8B6;letter-spacing:1.25px;font-size:10px;font-weight:850}.noise-heading strong{display:block;font-size:14px;margin-top:6px;color:#E3F4E7}.noise-number{font-size:31px;font-weight:800;color:#D0F5B2;font-variant-numeric:tabular-nums}.noise-number small{font-size:10px;color:#8FAAAB}.meter-track{height:15px;border-radius:20px;position:relative;margin-top:13px;background:linear-gradient(90deg,#246947 0%,#397B54 35%,#88732F 65%,#804139 100%);overflow:visible}.meter-fill{height:100%;width:0;display:block;background:linear-gradient(90deg,#81EEA6,#C8F782);box-shadow:0 1px 9px #BAF77A70;border-radius:20px;transition:width .18s}.meter-marker{position:absolute;top:-5px;height:25px;border-left:2px dashed #FCF9E9;left:55%;transition:left .3s}.meter-marker:after{content:"";position:absolute;top:-3px;left:-4px;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #FFF5CD}.noise-foot{display:flex;justify-content:space-between;margin-top:9px;color:#9CB7B1;font-size:10px}.meter-footnote{font-size:9px;color:#7FA19E;margin-top:10px}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.metric{display:flex;align-items:center;gap:12px;border-radius:15px;border:1px solid #3C5C63;background:#14333C;padding:15px}.metric-icon{border-radius:12px;width:42px;height:42px;display:grid;place-items:center;font-size:24px;font-weight:800}.metric-icon.gold{background:#B17C3126;color:#FFD474}.metric-icon.mint{background:#89CFA126;color:#A9F0B5}.metric>div>span{font-size:11px;color:#B0C5C5;display:block}.metric strong{font-size:24px;line-height:1.2;display:block;margin-top:3px}.controls{display:flex;gap:9px}.primary-button,.secondary-button{border:0;border-radius:13px;padding:16px 17px;font-weight:820;font-size:14px;transition:background .2s}.primary-button{background:#BAF479;color:#153729;flex:1;box-shadow:0 5px 17px #80F56922}.primary-button:hover{background:#D4FFA0}.secondary-button{background:#294851;color:#EEF5F3;flex:0 0 31%}.under-controls{display:flex;justify-content:center;gap:30px;margin-top:13px}.under-controls button{color:#A8C3BE;background:none;border:0;font-size:11px;text-decoration:underline;text-decoration-color:#668580;text-underline-offset:4px}.demo-control{margin-top:15px;border:1px solid #7C784D;background:#3B3A2A;border-radius:14px;padding:13px}.demo-intro{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:11px;margin-bottom:12px}.demo-intro span{color:#D3CA9B}.demo-control input{width:100%;accent-color:#BDF478}.demo-control small{color:#E4D8A1;font-size:10px}.secondary-section{display:grid;grid-template-columns:1fr .8fr;gap:18px;margin-top:18px}.reward-card,.insight-card{border-radius:20px;border:1px solid #35565C;background:#102D35;padding:22px}.section-head h3{font-size:20px;margin:5px 0 0}.section-side{font-size:11px;color:#A8BEBA}.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:19px}.badge-item{display:flex;gap:7px;align-items:center;flex-direction:column;justify-content:center;background:#173A40;border:1px solid #365B5F;border-radius:15px;padding:12px 7px;min-width:0;filter:saturate(.35);opacity:.6}.badge-item.earned{filter:none;opacity:1;border-color:#9FEA9070;background:#1D453C}.badge-emoji{font-size:30px}.badge-item strong{font-size:11px;text-align:center}.badge-item small{font-size:9px;color:#B0C8C3;text-align:center}.trend-chart{height:92px;margin-top:12px}.trend-chart svg{width:100%;height:100%}.insight-card p{font-size:11px;color:#94B4AD;line-height:1.5;margin-bottom:0}.site-footer{display:flex;justify-content:space-between;gap:20px;margin-top:23px;color:#8CAEA8;font-size:11px}.site-footer span{color:#D8F094}.modal-backdrop{position:fixed;inset:0;z-index:100;background:#020F14BF;backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;overflow:auto}.modal{width:min(100%,610px);max-height:min(90vh,880px);overflow:auto;background:#122F38;border:1px solid #54716D;border-radius:23px;padding:24px;box-shadow:0 24px 90px #02181DE0}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:19px}.modal-header h2{font-size:26px;letter-spacing:-1px;margin:5px 0 0}.close-button{width:37px;height:37px;border:1px solid #44626B;border-radius:12px;background:#284752;color:white;font-size:15px}.field{margin-bottom:17px}.field>label{display:flex;justify-content:space-between;color:#E2F1E9;font-weight:720;font-size:13px;margin-bottom:8px}.field>label span{color:#B7F57E}.field input:not([type=range]),.field select{display:block;width:100%;border:1px solid #47666D;border-radius:12px;background:#09242D;color:#F2F9F1;padding:13px 14px;outline:none;font-size:14px}.field input[type=range]{width:100%;accent-color:#B5F275;cursor:pointer}.field-help,.modal-intro{color:#B5CFC7;font-size:12px;line-height:1.55;margin-top:8px}.modal-intro{margin-bottom:17px}.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modal-divider{height:1px;background:#3F5F66;margin:22px 0}.pet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.pet-option{position:relative;border:1px solid #4B6C70;background:#193740;border-radius:15px;color:#EAF7F0;text-align:center;padding:10px 8px;min-width:0}.pet-option.selected{border:2px solid #B9EE82;background:#234A43}.pet-option svg{display:block;width:min(100%,88px);margin:0 auto}.pet-option strong{font-size:11px;display:block}.pet-option small{color:#A5BDB6;font-size:10px}.pet-option.locked:after{content:"✦ Premium";position:absolute;top:6px;right:6px;color:#FFF1BC;background:#61512C;border-radius:6px;font-size:8px;padding:3px 5px}.modal-actions{display:flex;gap:10px;margin-top:19px}.modal-actions button{flex:1}.muted-note{font-size:11px;color:#9FB9B1;line-height:1.5}.notice{border:1px solid #776F4E;background:#3E3827;color:#F2DEA5;padding:12px 13px;border-radius:12px;margin:13px 0;font-size:12px;line-height:1.6}.success-note{border-color:#587E67;background:#204437;color:#D9FFDC}.auth-tabs{display:flex;gap:8px;margin-bottom:19px}.auth-tabs button{background:#22404A;border:1px solid #365861;color:#CFE3DA;padding:11px 14px;border-radius:10px;flex:1;font-size:13px;font-weight:700}.auth-tabs button.selected{background:#B6F27C;color:#16372D}.auth-form button[type=submit]{width:100%}.history-entry{border-bottom:1px solid #36565D;padding:14px 2px;display:flex;justify-content:space-between;gap:12px}.history-entry strong{font-size:13px}.history-entry p{font-size:11px;color:#A9C4BA;margin:6px 0 0}.history-entry .right{text-align:right;white-space:nowrap}.history-entry .right strong{font-size:17px;color:#FFE18B}.history-empty{text-align:center;padding:38px 13px;color:#C1D8CF}.history-empty div{font-size:36px}.big-plan{border:1px solid #709275;background:linear-gradient(130deg,#1F453D,#17414B);border-radius:17px;padding:18px}.big-plan h3{font-size:22px;margin:0 0 6px}.big-plan p{color:#C7E7D6;font-size:12px;line-height:1.5}.feature-list{margin:16px 0;padding:0;list-style:none;display:grid;gap:11px}.feature-list li{display:flex;gap:10px;align-items:center;font-size:13px}.feature-list li span{color:#B4F17C;font-weight:800}.toast{position:fixed;bottom:23px;left:50%;transform:translateX(-50%);background:#E0FAC7;color:#142B24;padding:12px 20px;z-index:500;border-radius:14px;max-width:min(90vw,560px);font-size:13px;font-weight:650;box-shadow:0 10px 35px #0007;text-align:center}.toast.error{background:#FFE2CE;color:#623E2D}.celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:90}.confetti{position:absolute;top:-20px;font-size:27px;animation:confetti-fall 2.9s ease-in forwards}@keyframes confetti-fall{to{transform:translateY(105vh) rotate(550deg);opacity:0}}.projector .welcome,.projector .secondary-section,.projector .site-footer,.projector .site-header{display:none}.projector .app-shell{max-width:1800px;padding:8px}.projector .pet-stage{min-height:calc(100vh - 16px)}.projector .dashboard{grid-template-columns:1.45fr .55fr;gap:8px}.projector .stage-top{padding:29px}.projector .pet-art{width:min(70%,520px)}.projector .control-panel{padding:18px}.projector .stage-focus span{display:none}@media(max-width:1050px){.app-shell{padding:0 18px 22px}.welcome h1{font-size:34px}.dashboard{grid-template-columns:minmax(0,1fr) minmax(340px,.88fr)}.pet-stage{min-height:595px}.panel-heading h2{font-size:20px}.control-panel{padding:18px}.stage-top{padding:15px}.metrics-grid{gap:6px}.metric{padding:10px}.timer{font-size:58px}}@media(max-width:780px){.site-header{gap:8px}.brand-text{font-size:19px}.brand-mark{width:40px;height:40px}.header-actions{gap:5px}.nav-button{padding:10px;font-size:12px}.desktop-label{display:none}.live-chip{display:none}.welcome{padding:28px 0 20px;align-items:flex-start}.welcome h1{font-size:32px}.welcome p{max-width:540px}.plan-tag{font-size:11px;padding:9px 11px}.dashboard{grid-template-columns:1fr}.pet-stage{min-height:520px}.pet-art{width:min(60%,360px);margin:auto 0 20px}.secondary-section{grid-template-columns:1fr}.projector .dashboard{grid-template-columns:1fr}.projector .pet-stage{min-height:72vh}.projector .control-panel{display:none}}@media(max-width:520px){.app-shell{padding:0 12px 18px}.site-header{padding:14px 0}.brand{gap:7px}.brand-text{font-size:17px}.brand-text small{letter-spacing:.1px;font-size:8px}.nav-account{font-size:10px;padding:9px 8px}.welcome{display:block}.welcome h1{font-size:30px}.welcome p{font-size:13px}.plan-tag{margin-top:16px}.pet-stage{min-height:440px}.pet-art{width:68%;margin:auto 0 14px}.speech-area{margin-top:0;min-height:72px}.speech-bubble{padding:11px 18px}.speech-bubble strong{font-size:20px}.speech-bubble small{font-size:10px}.stage-bottom{padding:12px}.stage-top{padding:12px}.stage-hint{font-size:10px}.stage-focus span{display:none}.control-panel{padding:14px}.goal-card{padding:15px}.panel-heading h2{font-size:19px}.panel-heading{gap:7px}.running-tag{font-size:9px}.timer{font-size:62px}.badges{grid-template-columns:repeat(2,1fr)}.reward-card,.insight-card{padding:17px}.modal{padding:18px}.modal-row{grid-template-columns:1fr;gap:0}.pet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{display:grid}.secondary-section{gap:12px}.metrics-grid{gap:8px}.metric strong{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Cinematic character stage: responsive single artwork viewport. */
.pet-art{z-index:2;position:relative;width:100%;height:410px;max-width:none;margin:auto 0 36px;filter:none;animation:none!important;transform:none!important;isolation:isolate;touch-action:pan-y}
.pet-stage.loud .pet-art{animation:none}
.pet-art svg{width:min(70%,390px);height:100%;margin:auto;display:block}
.pet-halo{top:31%;width:54%;left:23%;background:radial-gradient(circle,#9BFFAC33,#58C99C0E 50%,transparent 72%)}
.pet-stage.loud .pet-halo{background:radial-gradient(circle,#FFD17A44,#E7B3530A 53%,transparent 76%)}
.pet-stage:after{content:'';position:absolute;z-index:1;bottom:98px;left:19%;right:19%;height:23px;border-radius:50%;background:#0008;filter:blur(21px)}
.stage-ground{display:none}
@media (max-width:780px){.pet-art{height:360px;margin-bottom:24px}}
@media (max-width:520px){.pet-art{width:100%;height:282px;margin-bottom:19px}.pet-stage:after{bottom:62px}}
.projector .pet-art{width:100%;height:calc(100vh - 265px);min-height:420px;margin-bottom:0}
@media(max-width:780px){.projector .pet-art{height:calc(72vh - 138px);min-height:290px}}

/* Cinematic artwork: high-resolution 3D-rendered characters with responsive motions. */
.cinematic-character{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;isolation:isolate;pointer-events:none}
.cinematic-light{position:absolute;z-index:0;top:5%;left:20%;width:60%;height:80%;border-radius:50%;background:radial-gradient(ellipse,#A3FFE233 0,#76CBAA15 42%,transparent 70%);filter:blur(16px);transition:background .6s ease}
.cinematic-floor{position:absolute;bottom:6%;left:25%;width:50%;height:6%;background:#04182099;filter:blur(17px);border-radius:50%;z-index:1}
.cinematic-pet-image{position:relative;z-index:2;display:block;width:auto;height:100%;max-width:86%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 15px 18px #02151B75);animation:cinematic-breathe 3.7s ease-in-out infinite;transform-origin:50% 85%;user-select:none;-webkit-user-drag:none}
.cinematic-character[data-pet=fox] .cinematic-pet-image{max-height:95%}
.cinematic-character[data-pet=bunny] .cinematic-pet-image{max-height:96%}
.cinematic-pet-image.concept-crop{height:77%;max-width:73%;border-radius:20px;mask-image:linear-gradient(to bottom,#000 65%,transparent 100%);object-fit:contain}
.cinematic-particles{position:absolute;inset:0;z-index:3;pointer-events:none}
.cinematic-particles span{position:absolute;left:calc(18% + (var(--i) * 9%));top:calc(23% + (var(--i) * 5%));font-size:calc(13px + var(--i)*1px);color:#D9FFAE;opacity:.3;filter:drop-shadow(0 0 8px #8BF5BB);animation:twinkle 3.4s ease-in-out infinite;animation-delay:calc(-.53s * var(--i))}
.cinematic-character[data-mood=loud] .cinematic-pet-image{animation:cinematic-alert .82s ease-in-out infinite;filter:drop-shadow(0 9px 24px #DCA04775) saturate(.96)}
.cinematic-character[data-mood=loud] .cinematic-light{background:radial-gradient(ellipse,#FFE08A4F 0,#C8A15D21 45%,transparent 72%)}
.cinematic-character[data-mood=loud] .cinematic-particles span{color:#FFD084}
.cinematic-character[data-mood=complete] .cinematic-pet-image{animation:cinematic-celebrate .8s ease-in-out infinite;filter:drop-shadow(0 11px 20px #A2F69C77)}
.cinematic-character[data-mood=complete] .cinematic-particles span{opacity:.85;color:#FFF0A0;animation:cinematic-sparkle .85s ease-in-out infinite;animation-delay:calc(-.11s * var(--i))}
@keyframes cinematic-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.013)}}
@keyframes cinematic-alert{0%,100%{transform:rotate(-1.2deg) translateY(1px)}50%{transform:rotate(1.2deg) translateY(-4px)}}
@keyframes cinematic-celebrate{0%,100%{transform:translateY(0) rotate(-2deg)}45%{transform:translateY(-29px) rotate(2deg)}}
@keyframes cinematic-sparkle{0%,100%{opacity:.15;transform:translateY(6px) scale(.7)}50%{opacity:1;transform:translateY(-16px) scale(1.5)}}
.pet-option img{display:block;width:100%;height:88px;object-fit:contain;object-position:center;margin:0 auto 5px;filter:drop-shadow(0 5px 4px #001D2280)}
.pet-option img[src*=axolotl],.pet-option img[src*=panda],.pet-option img[src*=owl]{border-radius:10px}
@media (max-width:520px){.cinematic-pet-image{max-width:76%}.pet-option img{height:73px}}
@media (prefers-reduced-motion:reduce){.cinematic-pet-image,.cinematic-particles span{animation:none!important}}
@media (min-width:781px){.pet-stage{min-height:705px}.pet-art{height:445px;margin: auto 0 30px}}
@media (min-width:781px){.pet-art{height:430px;margin:0 auto 0}}
.cinematic-character{display:flex;align-items:center;justify-content:center}
.cinematic-pet-image{height:100%!important;max-height:100%!important;width:auto!important;max-width:86%!important;min-width:0;object-fit:contain}

/* Pet Animation Studio — cinematic movement controls only. */
.pet-stage{min-height:760px;padding-bottom:0}
.pet-art{margin-bottom:0!important;animation:none!important;flex:1 1 auto;min-height:230px;width:min(86%,530px);display:flex;align-items:center;justify-content:center;filter:none}
.pet-art .pet-3d-canvas{display:block;width:100%;height:100%;outline:none;touch-action:pan-y}
.pet-stage.loud .pet-art{animation:none!important}
.pet-halo{pointer-events:none}
.stage-ground{bottom:177px}
.animation-tools{width:calc(100% - 34px);margin:0 17px 63px;position:relative;z-index:4;background:linear-gradient(160deg,#0C2A33ED,#143A43EB);border:1px solid #688C8466;border-radius:18px;padding:12px;box-shadow:0 10px 35px #031E24A6;backdrop-filter:blur(10px)}
.animation-tools-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px}
.animation-title{font-size:13px;font-weight:840;white-space:nowrap;color:#E9F7E2}
.animation-title small{display:block;font-size:10px;margin-top:3px;font-weight:500;color:#B5D3CD}
.view-switch{display:flex;gap:3px;background:#09232B;border:1px solid #35535E;border-radius:11px;padding:3px}
.view-switch button{border:0;background:transparent;padding:7px 10px;border-radius:8px;color:#C4D7D6;font-size:11px;font-weight:740;white-space:nowrap}
.view-switch button.selected{background:#B7F27D;color:#14392B}
.action-switch{display:flex;flex-wrap:wrap;gap:6px}
.action-switch button{background:#214752;border:1px solid #3B6970;border-radius:11px;padding:9px 11px;color:#EEF7F4;font-size:11px;font-weight:680;flex:1 1 auto;white-space:nowrap}
.action-switch button:hover{background:#316370}
.action-switch button.selected{background:#46653C;border-color:#B9EE8E;color:#E7FFC7}
.animation-note{margin:9px 2px 0;font-size:10px;color:#AFC8C6;line-height:1.35}
.pet-stage .speech-area{margin-top:3px;min-height:82px}
.pet-stage .stage-bottom{padding:16px 21px}
@media(max-width:780px){.pet-stage{min-height:640px}.pet-art{min-height:250px;width:min(90%,470px);height:310px}.animation-tools{margin-bottom:64px}.stage-ground{bottom:170px}}
@media(max-width:480px){.pet-stage{min-height:690px}.pet-art{min-height:250px;width:92%}.view-switch button{padding:7px 8px;font-size:10px}.animation-title{font-size:11px}.animation-tools{width:calc(100% - 22px);margin-left:11px;margin-right:11px;padding:9px}.action-switch button{padding:8px 7px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.pet-art{animation:none!important}}

/* Cinematic pets retain detailed artwork while responding to action buttons. */
.cinematic-props{position:absolute;z-index:4;inset:0;pointer-events:none;overflow:hidden}
.cinematic-book{position:absolute;width:clamp(112px,41%,188px);left:50%;bottom:10%;transform:translate(-50%,28px) rotateX(25deg) scale(.72);opacity:0;filter:drop-shadow(0 10px 6px #071D24A8);transition:opacity .35s,transform .4s ease}
.cinematic-book svg{display:block;width:100%;overflow:visible}
.cinematic-message{position:absolute;right:10%;top:23%;padding:9px 15px;background:#F9ECCC;color:#63492D;font-weight:850;font-size:19px;border-radius:19px 19px 19px 5px;box-shadow:0 12px 32px #101C2970;opacity:0;transform:translateY(16px) scale(.75);transition:opacity .26s,transform .34s;letter-spacing:.2px}
.cinematic-wave{position:absolute;right:17%;top:35%;font-size:25px;color:#FFF2A1;text-shadow:0 0 18px #FFDC8D;opacity:0;transform:translateY(15px) scale(.6);transition:opacity .25s}
.cinematic-character[data-action=read] .cinematic-book,
.cinematic-character[data-action=auto][data-mood=calm] .cinematic-book{opacity:1;transform:translate(-50%,0) rotateX(7deg) scale(1);animation:book-gentle-page 3.7s ease-in-out infinite}
.cinematic-character[data-action=read] .cinematic-pet-image{animation:cinematic-read 3.1s ease-in-out infinite}
.cinematic-character[data-action=shush] .cinematic-message,
.cinematic-character[data-action=auto][data-mood=loud] .cinematic-message{opacity:1;transform:translateY(0) scale(1);animation:cinematic-message-nod 2.6s ease-in-out infinite}
.cinematic-character[data-action=shush] .cinematic-pet-image{animation:cinematic-alert 1.5s ease-in-out infinite}
.cinematic-character[data-action=wave] .cinematic-pet-image{animation:cinematic-wave-body 1.3s ease-in-out infinite}
.cinematic-character[data-action=wave] .cinematic-wave{opacity:1;animation:cinematic-wave-stars 1.3s ease-in-out infinite}
.cinematic-character[data-action=celebrate] .cinematic-pet-image{animation:cinematic-celebrate .8s ease-in-out infinite}
.cinematic-character[data-action=celebrate] .cinematic-particles span{opacity:1;color:#FFF1A0;animation:cinematic-sparkle .9s ease-in-out infinite;animation-delay:calc(-.11s * var(--i))}
@keyframes cinematic-read{0%,100%{transform:rotate(1.4deg) translateY(2px)}50%{transform:rotate(-1.4deg) translateY(-4px)}}
@keyframes book-gentle-page{0%,100%{transform:translate(-50%,0) rotateX(7deg) rotateZ(-1deg)}50%{transform:translate(-50%,-4px) rotateX(13deg) rotateZ(1deg)}}
@keyframes cinematic-message-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes cinematic-wave-body{0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-10px) rotate(5deg)}}
@keyframes cinematic-wave-stars{0%,100%{transform:translateY(7px) rotate(-10deg)}50%{transform:translateY(-23px) rotate(14deg)}}
@media(max-width:520px){.cinematic-book{bottom:9%;width:38%}.cinematic-message{top:18%;right:2%;font-size:14px;padding:7px 11px}}
@media(prefers-reduced-motion:reduce){.cinematic-book,.cinematic-message,.cinematic-wave{animation:none!important;transition:none!important}}

/* Public cinematic-only release v1.2: the exact detailed artwork keeps the
 * original lightweight motions, props and gentle floating behavior. */
.cinematic-only-pill{border:1px solid #A0EB7970;background:#264A3A;color:#D8FFBE;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:750;white-space:nowrap}
.cinematic-character[data-action=listen] .cinematic-pet-image{animation:cinematic-listen 3s ease-in-out infinite}
.cinematic-character[data-action=listen] .cinematic-particles span{color:#A7E9D8;opacity:.55}
@keyframes cinematic-listen{0%,100%{transform:translateY(0) rotate(0deg)}45%{transform:translateY(-6px) rotate(-1deg)}65%{transform:translateY(-5px) rotate(1.3deg)}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:500px){.cinematic-only-pill{padding:6px 8px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.cinematic-character[data-action=listen] .cinematic-pet-image{animation:none!important}}