:root{--ink:#24324b;--muted:#8590a5;--pink:#f28baf;--purple:#9a8de0;--border:#edf0f5;--shadow:0 14px 48px rgba(74,91,133,.07)}
*{box-sizing:border-box}body{margin:0;background:#f5f8fc;color:var(--ink);font-family:Nunito,system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}
.app-shell{min-height:100vh;background:radial-gradient(ellipse 60% 38% at 83% 7%,#fff1f7 0,transparent 100%),radial-gradient(ellipse 45% 32% at -10% 66%,#e4f4fd 0,transparent 100%),#f6f8fc}.topbar{height:83px;padding:0 clamp(23px,4vw,76px);display:flex;align-items:center;gap:28px;background:#fff;border-bottom:1px solid #edf0f4}.brand{display:flex;align-items:center;gap:11px;font-family:Fredoka,sans-serif;font-size:18px;letter-spacing:-.4px;line-height:1.02}.brand b{color:#ef81a5}.brand small{display:block;font:700 10px Nunito;letter-spacing:1.5px;text-transform:uppercase;color:#b0b6c5;margin-top:7px}.brand-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:#fff1f5;color:#f080a5;font-size:30px}.connection{margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border:1px solid #dbecdd;border-radius:30px;color:#55a57c;background:#f1fbf5;font-size:12px;font-weight:900}.connection-dot,.scene-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#59c999;box-shadow:0 0 0 4px #d8f6e7}.return-link{border-radius:12px;background:#27354e;color:white;padding:11px 18px;font-size:13px;font-weight:900;transition:transform .2s}.return-link:hover{transform:translateY(-2px)}
.workspace{max-width:1550px;padding:40px clamp(22px,4vw,76px) 45px;margin:auto}.intro{margin-bottom:31px}.eyebrow{color:#e38aa8;font-weight:900;letter-spacing:2.5px;font-size:11px}.eyebrow span{font-size:17px;margin-right:7px}.intro h1{font:600 clamp(35px,4vw,54px)/1.12 Fredoka,sans-serif;margin:14px 0 12px;letter-spacing:-1.4px}.intro h1 em{color:#ed84a9;font-style:normal}.sparkle{color:#ebba6f;display:inline-block;margin-left:13px;font-size:30px;vertical-align:top}.intro>p{max-width:680px;margin:0;color:#8691a1;font-size:14px;line-height:1.65}
.workspace-grid{display:grid;grid-template-columns:minmax(215px,260px) minmax(380px,1fr) minmax(210px,258px);gap:20px;align-items:start}.panel{border:1px solid #e9edf3;border-radius:22px;background:white;box-shadow:var(--shadow);overflow:hidden}.selection-panel,.details-panel{padding:21px 16px 17px}.panel-title,.details-heading{display:flex;align-items:center;gap:11px;padding:3px 4px 19px}.tiny-icon{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#ffe8f0;color:#ef7ea9;font-size:23px;flex:none}.tiny-icon.purple{background:#f1ecff;color:#9689cf}.panel-title h2,.details-heading h2{margin:0;font:600 18px Fredoka}.panel-title p,.details-heading p{margin:4px 0 0;color:#a4abbb;font-size:11px;font-weight:700}.counter{margin-left:auto;background:#f5f7fb;color:#a6afc0;border-radius:8px;font-size:11px;font-weight:900;padding:6px 8px}.animal-list{display:grid;gap:9px}.animal-choice{display:flex;align-items:center;gap:12px;width:100%;height:71px;padding:8px 10px;border:2px solid transparent;border-radius:14px;background:#f8fafc;text-align:left;transition:background .17s,border-color .17s,transform .17s}.animal-choice:hover{transform:translateX(2px);background:#f5f5ff}.animal-choice.selected{background:#fff4f8;border-color:#ffc4d9}.animal-choice img{object-fit:contain;width:59px;height:55px;flex:none;filter:drop-shadow(0 5px 5px rgba(80,80,120,.1))}.animal-choice .choice-icon{font-size:32px;width:59px;text-align:center}.choice-copy strong{display:block;font:600 15px Fredoka}.choice-copy small{display:block;color:#a0a8b6;font-size:11px;font-weight:800;margin-top:4px}.choice-check{margin-left:auto;width:19px;height:19px;border:2px solid #d9e0e9;border-radius:50%;flex:none}.selected .choice-check{background:#ed90b2;border-color:#ed90b2;box-shadow:inset 0 0 0 4px white}.aside-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:13px 12px;background:#fff9ec;border-radius:13px}.aside-note span{font-size:20px}.aside-note p{margin:0;color:#ae9171;font-size:11px;line-height:1.6}.aside-note b{color:#a7875f}
.view-panel{position:relative}.viewer-header{display:flex;justify-content:space-between;align-items:center;padding:21px 22px 17px;gap:12px}.scene-label{display:flex;align-items:center;gap:11px;letter-spacing:1.5px;color:#9ba6b6;font-size:10px;font-weight:900}.scene-live{height:7px;width:7px}.render-badge{border:1px solid #ede5ff;background:#f8f4ff;color:#a18dd3;border-radius:20px;padding:7px 11px;font-size:10px;font-weight:900}.viewer{position:relative;height:clamp(345px,43vw,545px);margin:0 20px;border:1px solid #e5edf0;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#ffffff 0%,#edf8fb 67%,#e5eff4 100%);touch-action:none;cursor:grab}.viewer:active{cursor:grabbing}.viewer canvas{display:block;width:100%;height:100%;position:relative;z-index:1}.viewer-decor{position:absolute;color:#dceaf0;font-size:44px;pointer-events:none}.decor-a{top:19%;left:14%}.decor-b{right:16%;top:30%;font-size:26px}.viewer-instruction{position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);border-radius:20px;background:#ffffffd9;backdrop-filter:blur(10px);padding:10px 16px;font-size:10px;color:#8996a6;font-weight:900;white-space:nowrap;pointer-events:none;box-shadow:0 6px 17px #9bb4cc12}.viewer-instruction span{margin:0 8px;color:#bcc5cb}.viewer-number{position:absolute;right:16px;top:17px;color:#a7bbcb;font:600 14px Fredoka;z-index:2}.loading{position:absolute;left:0;right:0;top:48%;text-align:center;color:#98a9b7;font-weight:800;font-size:13px;z-index:2}.animal-summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:23px 29px 18px}.summary-eyebrow{color:#db9baf;font-size:10px;letter-spacing:1.7px;font-weight:900;margin:0 0 6px}.animal-summary h2{font:600 29px Fredoka;margin:0;color:#303953}.animal-summary p:last-child{color:#98a3b2;font-size:12px;margin:7px 0 0;line-height:1.5}.character-stamp{flex:none;display:grid;place-items:center;background:#fff2f6;color:#f6a1b9;width:71px;height:71px;border-radius:50%;font-size:24px;transform:rotate(12deg)}.character-stamp small{display:block;text-align:center;color:#dba0ad;font-size:8px;font-weight:900;line-height:1.1;margin-top:-9px}.viewer-controls{padding:18px 27px 24px;border-top:1px solid var(--border);display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;align-items:end}.control-title{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:900;color:#9ba5b3;margin-bottom:10px}.color-options{display:flex;gap:9px}.color-choice{position:relative;height:28px;width:28px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #e9eaf1;transition:transform .2s}.color-choice.active{box-shadow:0 0 0 2px #ec8fac;transform:scale(1.14)}.action-group{display:flex;gap:8px;flex-wrap:wrap}.control-button{background:#f4f6fa;border:1px solid #edf0f4;border-radius:10px;padding:11px 12px;color:#7b879c;font-size:11px;font-weight:900}.control-button:hover{background:#e9eff7}.control-button.active{color:#a081c8;background:#f5efff;border-color:#e8dfff}.control-button.dark{background:#293954;color:white;border-color:#293954}.control-button.dark:hover{background:#3b5071}
.details-panel{padding:21px 17px 17px}.progress-card{background:linear-gradient(125deg,#f4edff,#faf7ff);padding:17px 14px;border:1px solid #efe7fe;border-radius:15px}.progress-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;color:#7766b2}.progress-top strong{color:#a18dda}.progress-track{height:7px;margin:12px 0;background:#e5dff2;border-radius:20px;overflow:hidden}.progress-track span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ab95eb,#dc92c5);border-radius:20px}.progress-card p{color:#a29abc;font-size:10px;line-height:1.6;margin:0}.timeline{padding:26px 6px 3px}.timeline-entry{position:relative;display:flex;gap:11px;padding:0 0 26px}.timeline-entry:not(:last-child)::before{content:"";position:absolute;left:12px;top:28px;bottom:0;width:1px;background:#e9ebf1}.timeline-dot{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;flex:none;font-size:12px;font-weight:900;z-index:1}.timeline-dot.done{background:#dcf5e8;color:#50b68c}.timeline-dot.next{background:#fff0d9;color:#dda767}.timeline-entry strong{display:block;margin-top:3px;font-size:12px;color:#5e6d7c}.timeline-entry small{display:block;color:#9faaba;margin-top:5px;font-size:10px;line-height:1.5}.preview-tip{display:flex;gap:9px;background:#eaf7fe;border-radius:14px;padding:13px 11px}.preview-tip>span{font-size:20px}.preview-tip b{display:block;font-size:11px;color:#5c9eb5}.preview-tip p{margin:5px 0 0;font-size:10px;line-height:1.65;color:#78a8b8}footer{text-align:center;color:#b3bbca;font-size:11px;font-weight:800;padding:0 10px 24px}
@media(max-width:1160px){.workspace-grid{grid-template-columns:235px minmax(400px,1fr)}.details-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:18px}.details-heading{padding:0}.timeline{display:none}}
@media(max-width:790px){.topbar{height:73px;padding:0 17px;gap:10px}.return-link{padding:10px 11px;font-size:11px}.connection{font-size:0;padding:7px}.connection-dot{width:9px;height:9px}.brand{font-size:15px}.brand-icon{width:36px;height:36px;font-size:24px}.workspace{padding:25px 15px}.intro h1{font-size:36px}.workspace-grid{grid-template-columns:1fr;gap:13px}.selection-panel{padding:13px}.panel-title{padding-bottom:12px}.animal-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.animal-choice{height:auto;min-height:86px;flex-direction:column;gap:3px;padding:6px 2px;text-align:center}.animal-choice img,.animal-choice .choice-icon{width:52px;height:47px}.choice-copy strong{font-size:12px}.choice-copy small,.choice-check,.aside-note{display:none}.view-panel{grid-row:1}.selection-panel{grid-row:2}.details-panel{grid-row:3;display:block}.details-heading{padding-bottom:14px}.viewer{height:clamp(345px,82vw,535px);margin:0 10px}.viewer-header{padding:15px 15px}.animal-summary{padding:18px 19px}.viewer-controls{padding:16px 18px}.details-panel .timeline{display:block}}
@media(max-width:430px){.intro h1{font-size:30px}.intro>p{font-size:12px}.return-link{font-size:0}.return-link::after{content:'↗';font-size:17px}.viewer{height:370px}.scene-label{font-size:8px;letter-spacing:.8px}.render-badge{font-size:9px}.viewer-instruction{font-size:9px}.animal-summary h2{font-size:24px}.action-group{width:100%}.action-group button{flex:1;font-size:10px;padding:9px 6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.connection.disconnected{background:#fff7ec;border-color:#f6e1bf;color:#bc995e}.connection.disconnected .connection-dot{background:#edbc71;box-shadow:0 0 0 4px #fff1d8}