:root { color-scheme: light; font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; color: #1f2d2c; background: #f2f3ee; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f2f3ee; }
button { font: inherit; }
.app-shell { width: min(1180px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9ddd7; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 20px; font-weight: 700; }.brand-mark { display: flex; align-items: flex-end; gap: 2px; width: 24px; height: 24px; padding: 4px; border-radius: 6px; background: #254f48; }.brand-mark i { width: 4px; border-radius: 3px; background: #f4c969; }.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 14px; }.brand-mark i:nth-child(3) { height: 10px; }
.local-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #d5d9d0; border-radius: 4px; color: #60716c; font-size: 13px; }.local-chip span, .status-badge span { width: 7px; height: 7px; border-radius: 50%; background: #4b9e74; }
.stage-layout { align-self: center; display: grid; grid-template-columns: minmax(190px, .85fr) minmax(340px, 510px) minmax(170px, .65fr); gap: clamp(28px, 5vw, 86px); align-items: center; padding: 46px 0; }.eyebrow, .panel-kicker { margin: 0 0 14px; color: #638076; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } h1 { margin: 0; color: #244f47; font-size: clamp(36px, 4.2vw, 54px); line-height: 1.12; }.intro-copy { max-width: 250px; margin: 22px 0; color: #63716b; font-size: 15px; line-height: 1.8; }.legend { display: grid; gap: 9px; color: #68756f; font-size: 12px; }.legend span { display: flex; align-items: center; gap: 8px; }.legend b { width: 6px; height: 6px; border-radius: 50%; background: #d9954b; }
.portrait-card { width: 100%; }.portrait-frame { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #d7dbd4; box-shadow: 0 18px 50px rgb(26 48 42 / 15%); }.portrait-video { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; background: #d7dbd4; }.portrait-frame::after { position: absolute; z-index: 4; inset: 0; content: ""; pointer-events: none; box-shadow: inset 0 0 0 1px rgb(26 50 43 / 12%); }.status-badge { position: absolute; z-index: 5; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 3px; background: rgb(250 251 247 / 88%); color: #53645d; font-size: 11px; }.status-badge.is-ready span { background: #4c9f72; }.status-badge.is-error span { background: #d59b50; }
.food-fly { position: absolute; z-index: 3; width: 52px; height: 52px; opacity: 0; transform: translate3d(0, -50%, 0) scale(.7); pointer-events: none; }.portrait-frame.is-feeding .food-fly { animation: fly-in .68s cubic-bezier(.2,.8,.2,1) forwards; }.food-shape { position: relative; display: block; width: 38px; height: 38px; }.food-shape.berry { margin: 7px; border-radius: 48% 48% 56% 56%; background: #e64c4d; transform: rotate(45deg) scale(.73); }.food-shape.berry::before { position: absolute; top: -7px; left: 11px; content: ""; border-style: solid; border-width: 0 6px 10px; border-color: transparent transparent #4f9161; transform: rotate(-45deg); }.food-shape.cookie { margin: 7px; border-radius: 50%; background: #dba664; }.food-shape.cookie::before { position: absolute; top: 8px; left: 7px; width: 5px; height: 5px; border-radius: 50%; background: #955b38; box-shadow: 12px -4px #955b38, 8px 12px #955b38; content: ""; }.food-shape.dumpling { margin: 9px 3px; height: 28px; border-radius: 50% 50% 45% 45%; border-bottom: 3px solid #d0a271; background: #f2d1a0; }.food-shape.dumpling::before { position: absolute; top: -7px; left: 7px; color: #d0a271; content: "⌒⌒⌒"; font-size: 17px; letter-spacing: -6px; }
.result-text { position: absolute; z-index: 3; bottom: 16px; left: 50%; margin: 0; padding: 8px 12px; border-radius: 3px; transform: translateX(-50%) translateY(8px); background: rgb(26 47 42 / 82%); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .2s; }.result-text.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.control-panel { align-self: center; }.person-list, .food-list { display: grid; gap: 8px; margin-bottom: 20px; }.food-list { margin-bottom: 0; }.person-button, .food-button { display: flex; align-items: center; gap: 11px; padding: 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #596862; font-size: 14px; text-align: left; cursor: pointer; }.person-button:hover, .person-button:focus-visible, .food-button:hover, .food-button:focus-visible { background: #e7ebe4; }.person-button.active, .food-button.active { border-color: #b8cbbd; background: #e7eee5; color: #244f47; font-weight: 600; }.person-dot { display: inline-block; width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; }.person-dot.mona { background-image: url("./assets/digital-human/mona.jpg"); }.person-dot.yanz { background-image: url("./assets/digital-human/zxz-face1.jpg"); }.food-icon { position: relative; display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; }.food-icon.berry { border-radius: 45% 45% 55% 55%; background: #e25550; transform: rotate(45deg) scale(.72); }.food-icon.berry::before { position: absolute; top: -5px; left: 5px; content: ""; border-style: solid; border-width: 0 5px 8px; border-color: transparent transparent #4d8a5d; transform: rotate(-45deg); }.food-icon.cookie { border-radius: 50%; background: #dba664; }.food-icon.cookie::before { position: absolute; top: 6px; left: 6px; width: 4px; height: 4px; border-radius: 50%; background: #9f623b; box-shadow: 9px -3px #9f623b, 5px 8px #9f623b; content: ""; }.food-icon.dumpling { margin-top: 4px; height: 19px; border-radius: 50% 50% 45% 45%; border-bottom: 3px solid #d1a677; background: #f2d4a9; }.feed-button { width: 100%; margin-top: 28px; padding: 13px 15px; border: 0; border-radius: 4px; background: #244f47; color: #fff; font-weight: 600; cursor: pointer; }.feed-button:hover, .feed-button:focus-visible { background: #1c4039; }.feed-button:disabled { cursor: wait; opacity: .55; }.feed-button span { margin-left: 10px; }.panel-note { margin: 13px 0 0; color: #829089; font-size: 11px; text-align: center; } footer { display: flex; align-items: center; gap: 10px; height: 64px; border-top: 1px solid #d9ddd7; color: #8b968f; font-size: 12px; } footer span { width: 28px; height: 1px; background: #bfc8bd; }
@keyframes fly-in { 0% { opacity: 0; transform: translate3d(0, calc(-50% + 36px), 0) scale(.7); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translate3d(var(--fly-distance), -50%, 0) scale(.48); } }
@media (max-width: 840px) { .stage-layout { grid-template-columns: minmax(210px, 1fr) minmax(300px, 1.25fr); gap: 34px; }.control-panel { display: grid; grid-column: 1 / -1; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; }.panel-kicker, .panel-note { margin: 0; }.food-list { grid-template-columns: repeat(3, 1fr); }.feed-button { width: auto; margin: 0; white-space: nowrap; }.panel-note { display: none; } }
@media (max-width: 590px) { .app-shell { width: min(100% - 28px, 510px); }.topbar { height: 74px; }.stage-layout { grid-template-columns: 1fr; gap: 25px; padding: 34px 0; }.intro { text-align: center; }.intro-copy { margin-inline: auto; }.legend { display: flex; justify-content: center; flex-wrap: wrap; }.portrait-card { max-width: 440px; margin: 0 auto; }.control-panel { display: block; }.food-list { grid-template-columns: repeat(3, 1fr); }.food-button { flex-direction: column; justify-content: center; gap: 5px; }.feed-button { width: 100%; margin-top: 18px; } footer { height: 55px; } }