:root{color-scheme:light;font-family:Inter,ui-rounded,SF Pro Rounded,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#183321;background:#f3eee4;font-synthesis:none;--ink: #183321;--muted: #6e776e;--green: #1f7047;--lime: #c8f15b;--cream: #f8f4eb;--paper: rgba(255, 255, 255, .82);--line: rgba(35, 76, 49, .12);--shadow: 0 20px 60px rgba(46, 69, 42, .12)}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-width:320px;background:radial-gradient(circle at 7% 5%,rgba(206,239,106,.27),transparent 26rem),radial-gradient(circle at 95% 90%,rgba(116,202,184,.22),transparent 28rem),#f3eee4;overflow-x:hidden}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(35,121,78,.34);outline-offset:3px}.app-shell{width:min(1600px,100%);min-height:100vh;margin:0 auto;padding:18px 24px 26px}.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}.brand-mark{display:grid;width:44px;height:44px;place-items:center;border-radius:15px;background:var(--ink);box-shadow:0 7px #1833211a;transform:rotate(-2deg)}.brand-mark svg{width:31px;fill:var(--lime)}.brand-mark .brand-tooth{fill:#fff}.brand b{display:block;font-size:18px;letter-spacing:-.02em}.brand small{display:block;margin-top:2px;color:#758077;font-size:9px;font-weight:800;letter-spacing:.18em}.topbar-actions{display:flex;align-items:center;gap:10px}.icon-button{display:grid;width:40px;height:40px;padding:0;place-items:center;border:1px solid var(--line);border-radius:13px;background:#ffffffad;cursor:pointer}.icon-button svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.game-layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(560px,1fr);min-height:calc(100vh - 112px);gap:16px;align-items:stretch}.side-panel,.stage-card{border:1px solid rgba(45,85,55,.1);box-shadow:var(--shadow)}.side-panel{position:relative;z-index:5;padding:20px;border-radius:26px;background:var(--paper);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}.panel-heading h2{margin:2px 0 0;font-size:20px;letter-spacing:-.035em}.eyebrow{color:#768478;font-size:9px;font-weight:900;letter-spacing:.17em;text-transform:uppercase}.live-badge{display:flex;align-items:center;gap:5px;margin-top:4px;color:var(--green);font-size:9px;font-weight:800;white-space:nowrap}.live-badge i{width:6px;height:6px;border-radius:50%;background:#54b879}.camera-card{position:relative;width:min(100%,330px);aspect-ratio:9 / 16;margin-inline:auto;overflow:hidden;border-radius:19px;background:#17231b;box-shadow:inset 0 0 0 1px #1a422614}.camera-card video,.camera-card canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}.camera-card canvas{transform:none;pointer-events:none}.camera-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#849088;font-size:12px;font-weight:700;background:linear-gradient(145deg,#e8eee6,#dce4dd)}.camera-placeholder svg{width:40px;fill:none;stroke:currentColor;stroke-width:2}.camera-card.has-stream .camera-placeholder{opacity:0;pointer-events:none}.camera-card.camera-hidden video{opacity:0}.camera-card.camera-hidden{background:linear-gradient(145deg,#dfe9df,#cbdacb)}.camera-card.camera-hidden:after{content:"摄像头画面已隐藏\a识别仍在本地进行";position:absolute;inset:0;display:grid;place-items:center;text-align:center;white-space:pre;color:#55705f;font-size:11px;font-weight:750}.camera-frame{position:absolute;inset:10px;pointer-events:none}.camera-frame i{position:absolute;width:18px;height:18px;border-color:#ddff82e6;border-style:solid}.camera-frame i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;border-radius:7px 0 0}.camera-frame i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;border-radius:0 7px 0 0}.camera-frame i:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0;border-radius:0 0 7px}.camera-frame i:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px;border-radius:0 0 0 7px}.privacy-note{display:flex;gap:9px;margin:12px 2px 17px;color:#718078}.privacy-note svg{width:17px;flex:0 0 auto;fill:none;stroke:#4e8b65;stroke-width:1.8}.privacy-note p{margin:0;line-height:1.2}.privacy-note b,.privacy-note span{display:block}.privacy-note b{color:#3b5945;font-size:10px}.privacy-note span{margin-top:3px;font-size:9px}.control-list{border-top:1px solid var(--line)}.control-row{position:relative;display:flex;min-height:59px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);cursor:pointer}.control-row span b,.control-row span small{display:block}.control-row b,.range-row b{font-size:12px}.control-row small{margin-top:3px;color:#889088;font-size:9px}.control-row input{position:absolute;opacity:0}.toggle{position:relative;width:37px;height:22px;flex:0 0 auto;border-radius:999px;background:#c8ceca;transition:.2s ease}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0000002e;transition:.2s ease}.control-row input:checked+.toggle{background:#4cae66}.control-row input:checked+.toggle:after{transform:translate(15px)}.range-row{display:block;padding:14px 0 4px}.range-row>span{display:flex;align-items:center;justify-content:space-between}.range-row output{color:var(--green);font-size:9px;font-weight:800}.range-row input{width:100%;height:4px;margin:14px 0 0;accent-color:#4aae68;cursor:pointer}.stage-card{position:relative;min-height:620px;overflow:hidden;border-radius:29px;background:#bfeae0;isolation:isolate}.stage-card:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(239,255,247,.55) 0,rgba(255,255,255,.08) 27%,transparent 50%,rgba(67,119,35,.08) 100%);pointer-events:none}.stage-sky{display:none;position:absolute;inset:0;overflow:hidden}.sun{position:absolute;right:8%;top:9%;width:74px;height:74px;border-radius:50%;background:#ffe274ba;box-shadow:0 0 0 18px #ffe58221}.cloud{position:absolute;width:100px;height:24px;border-radius:999px;background:#ffffff78;filter:blur(.2px)}.cloud:before,.cloud:after{content:"";position:absolute;bottom:0;border-radius:50%;background:inherit}.cloud:before{left:17px;width:40px;height:40px}.cloud:after{right:16px;width:50px;height:50px}.cloud-one{left:7%;top:19%;transform:scale(.8)}.cloud-two{right:25%;top:29%;transform:scale(.55);opacity:.7}.dino-canvas{position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;touch-action:none}.dino-stage{display:none}.ground{display:none;position:absolute;z-index:1;left:0;right:0;bottom:0;height:25%;background:linear-gradient(160deg,#67a14914,#31744629);clip-path:polygon(0 25%,28% 9%,52% 26%,78% 0,100% 19%,100% 100%,0 100%)}.ground span{position:absolute;width:16px;height:5px;border-radius:50%;background:#2d64372b}.ground span:nth-child(1){left:17%;top:55%}.ground span:nth-child(2){left:72%;top:47%;transform:scale(1.5)}.ground span:nth-child(3){left:87%;top:75%;transform:scale(.7)}.stage-plants{display:none;fill:none;stroke:#609a50;stroke-width:7;stroke-linecap:round;opacity:.52}#dino-rig{transform-box:view-box;transform-origin:472px 440px;transform:translate(var(--dino-x, 0px),var(--dino-y, 0px)) skew(var(--dino-skew, 0deg)) scale(var(--dino-scale, 1)) scaleX(var(--dino-turn, 1));will-change:transform}.legacy-dino{display:none}.generated-dino image{pointer-events:none}.skin-eyelid{fill:#76c83c;stroke:#245c31;stroke-width:8;opacity:0;transition:opacity 60ms linear}.skin-mouth-open{fill:#50272b;stroke:#284f2d;stroke-width:6;opacity:0;transform-box:fill-box;transform-origin:center}.dino-tail,.dino-body,.dino-head,.dino-neck,.limb{fill:url(#bodyGradient);stroke:#367d3f;stroke-width:4;stroke-linejoin:round}.dino-tail-highlight{fill:none;stroke:#d2f47f73;stroke-width:6;stroke-linecap:round}.back-spikes,.head-spikes{fill:#367f51;stroke:#2f7348;stroke-width:3;stroke-linejoin:round}.dino-belly,.dino-muzzle{fill:url(#bellyGradient);stroke:#6ba74e;stroke-width:3}.dino-highlight{fill:none;stroke:#eaffa080;stroke-width:7;stroke-linecap:round}.belly-lines{fill:none;stroke:#57934359;stroke-width:3;stroke-linecap:round}.dino-foot,.dino-hand{fill:#65ba45;stroke:#367d3f;stroke-width:4;stroke-linejoin:round}.claw{fill:none;stroke:#eef2c1;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.dino-eye{fill:#fffdf2;stroke:#357341;stroke-width:3;transition:ry 80ms ease}.dino-pupil{fill:#183321;transition:ry 80ms ease}.eye-glint{fill:#fff}.dino-brow{fill:none;stroke:#285d35;stroke-width:5;stroke-linecap:round;transform-box:fill-box;transform-origin:center}.dino-nostril{fill:#568a42}.dino-cheek{fill:#fa8f69;opacity:.76}.dino-mouth{fill:#7f3640;stroke:#356f3d;stroke-width:3;transition:ry 70ms ease}.dino-smile{fill:none;stroke:#3b693d;stroke-width:4;stroke-linecap:round;opacity:0}.cheek{fill:none;stroke:#e59c79;stroke-width:4;stroke-linecap:round;opacity:.55}#skin-tail,#skin-torso,#skin-head,#skin-left-upper-arm,#skin-left-lower-arm,#skin-right-upper-arm,#skin-right-lower-arm,#skin-left-upper-leg,#skin-left-lower-leg,#skin-right-upper-leg,#skin-right-lower-leg{will-change:transform}.welcome-overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:22px;background:#e7f3e194;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .28s ease,visibility .28s ease}.welcome-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none}.welcome-card{width:min(420px,100%);padding:28px 30px 23px;border:1px solid rgba(32,84,45,.1);border-radius:28px;background:#ffffffe8;box-shadow:0 24px 70px #34582b2e;text-align:center}.welcome-icon{display:grid;width:56px;height:56px;margin:0 auto 12px;place-items:center;border-radius:20px;background:#dff1a2;font-size:31px;transform:rotate(-3deg)}.welcome-card h2{margin:6px 0 10px;font-size:clamp(26px,3vw,34px);line-height:1.05;letter-spacing:-.055em}.welcome-card p{max-width:340px;margin:0 auto 19px;color:#68746b;font-size:12px;line-height:1.7}.primary-button{border:0;cursor:pointer;font-weight:800}.primary-button{display:flex;width:min(300px,100%);min-height:49px;align-items:center;justify-content:center;gap:10px;margin:0 auto;border-radius:15px;background:var(--ink);color:#fff;box-shadow:0 7px #0d2415;transition:transform .15s ease,box-shadow .15s ease}.primary-button:hover{transform:translateY(-2px);box-shadow:0 9px #0d2415}.primary-button:active{transform:translateY(5px);box-shadow:0 2px #0d2415}.primary-button:disabled{cursor:wait;opacity:.68}.button-camera{width:13px;height:10px;overflow:hidden;color:var(--lime);font-size:24px;line-height:6px}.primary-button.is-loading .button-camera{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--lime);border-radius:50%;color:transparent;animation:spin .75s linear infinite}.welcome-card>small{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:15px;color:#7b867d;font-size:9px}.welcome-card>small svg{width:13px;fill:none;stroke:currentColor;stroke-width:1.8}.error-message{margin-top:13px;padding:9px 12px;border-radius:10px;background:#fff0ed;color:#a6453d;font-size:10px;line-height:1.45}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1120px){.game-layout{grid-template-columns:235px minmax(500px,1fr)}}@media(max-width:820px){.app-shell{padding:10px 12px 18px}.topbar{height:58px}.brand-mark{width:38px;height:38px;border-radius:13px}.brand b{font-size:15px}.game-layout{display:flex;flex-direction:column;min-height:0}.stage-card{order:1;min-height:560px}.camera-panel{order:2;display:grid;grid-template-columns:150px 1fr;column-gap:15px}.camera-panel .panel-heading{grid-column:1/-1}.camera-card{grid-row:2/4}.privacy-note{margin-top:0}.control-list{grid-column:2}}@media(max-width:560px){.icon-button{display:none}.game-layout{gap:10px}.side-panel,.stage-card{border-radius:22px}.stage-card{min-height:510px}.welcome-overlay{padding:12px}.welcome-card{padding:23px 18px 20px}.camera-panel{display:block}.camera-card{max-width:250px;margin:0 auto}.control-list{margin-top:10px}.privacy-note{justify-content:center}.brand small{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}