:root{color-scheme:light;--ink:#482a20;--muted:#8a7063;--blue:#69a0db;--mint:#bce2c8;--paper:#fff8e7;--line:#eadfd1;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 75%,#dff2e9,transparent 60%),radial-gradient(ellipse at 80% 15%,#f6e3dc,transparent 60%),#faf7ef;height:100svh;overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:disabled{cursor:wait;opacity:.6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #548cbb;outline-offset:2px}a{color:inherit}button:active{filter:brightness(.96)}
.prototype-toolbar{height:38px;max-width:445px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:12px}.prototype-toolbar a{text-decoration:none}.prototype-toolbar div{display:flex;gap:8px}.prototype-toolbar button{padding:5px 8px;background:transparent;color:#755e51}.prototype-stage{height:calc(100svh - 38px);display:flex;justify-content:center;align-items:flex-start;padding:0 8px 10px}.phone-shell{position:relative;width:min(100%,430px,calc((100svh - 60px)*768/1376));height:100%;max-height:790px;aspect-ratio:768/1376;background:#fff8e7;border:6px solid #3a3430;border-radius:30px;box-shadow:0 16px 50px #765f4729;overflow:hidden;isolation:isolate}.app-screen{height:100%;overflow:auto;scrollbar-width:none;outline:none;container-type:inline-size;background:#fff8e7}.app-screen::-webkit-scrollbar{display:none}.artboard{position:relative;width:100%;aspect-ratio:768/1376;container-type:inline-size;isolation:isolate}.source-art{position:absolute;inset:0;width:100%;height:100%;user-select:none;pointer-events:none;z-index:-1}.positioned{position:absolute;left:calc(var(--x)/768*100%);top:calc(var(--y)/1376*100%);width:calc(var(--w)/768*100%);height:calc(var(--h)/1376*100%)}.hotspot{padding:0;background:transparent;border-radius:4cqw;text-align:left}.hotspot:hover{box-shadow:inset 0 0 0 1.5px #75b4bb99;background:#b0ebea0c}.hotspot:focus-visible{outline-offset:-3px}.mask{display:flex;align-items:center;background:var(--surface,#fff);padding:.2cqw .5cqw;font-size:3.35cqw;line-height:1.45;overflow:hidden;pointer-events:none}.mask.name{font-size:4.2cqw;font-weight:800}.mask.breed{font-size:3cqw}.mask.pill{border-radius:5cqw;background:#6ecb81;color:#fff;justify-content:center;font-size:3.4cqw}.mask.pill.caution{background:#e2a75c}.pet-name{white-space:nowrap;text-overflow:ellipsis;display:block}.pet-outline{pointer-events:none;border:2px solid #7bbfc6;border-radius:5cqw;box-shadow:0 0 12px #5aabb636}.selected-check{position:absolute;right:6%;top:13%;font-size:3cqw;background:#82bdd6;border:2px solid #f4fcff;border-radius:50%;color:#fff;width:4cqw;height:4cqw;display:grid;place-items:center}.home-art .date-copy{flex-direction:column;align-items:flex-start;justify-content:center;font-weight:700;font-size:3.3cqw}.date-copy small{font-size:2.5cqw;font-weight:400}.nav-art{display:block;position:relative;height:14.6cqw;background:#fff;border-radius:5cqw 5cqw 0 0;box-shadow:0 -2px 14px #bdab9617;container-type:inline-size}.nav-art button{position:absolute;top:0;bottom:0;width:25%;padding:1.3cqw 0 .6cqw;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:3.2cqw;gap:.4cqw}.nav-art button[aria-current=page]{color:#326e82;font-weight:700}.nav-art button[aria-current=page] .nav-icon{background:#edf7f5;border-radius:50%}.nav-icon{width:7.2cqw;height:7.2cqw;display:block;padding:.4cqw}.crop{display:block;width:100%;height:100%;overflow:hidden}.crop svg{width:100%;height:100%;display:block}.pet-portrait{border-radius:50%;overflow:hidden;background:#d7f3f4;box-shadow:0 4px 12px #68554025;border:3px solid #fff;flex-shrink:0}.screen-nav{position:sticky;bottom:0;z-index:5}
.record-art .mask{color:#151918}.record-art .name{font-size:4.3cqw}.record-art .record-subtitle{background:linear-gradient(110deg,#e4f5f7,#e8f6f4);font-size:3.3cqw}.record-art form{margin:0}.field{padding:.1cqw 1.2cqw;background:linear-gradient(120deg,#f5f6f8,#eeeef3);border:1px solid #d1d2d8;border-radius:1.8cqw;font-size:3.2cqw;min-width:0;outline-offset:1px;appearance:auto}.field.food{padding-left:7cqw}.record-art .field-icon{pointer-events:none;z-index:2}.field.amount{padding-left:7cqw;border-color:#7fc499}.field.note{padding-left:1.8cqw;padding-right:5cqw}.small-control{background:#d8f1f3;border-radius:5cqw;font-size:2.5cqw;display:flex;justify-content:center;align-items:center}.type-ring{border:2px solid #76a5d7;box-shadow:0 0 0 3px #ffffffc9;border-radius:50%;pointer-events:none}.type-cover{background:#d6f1f3;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:3.4cqw;color:#192426}.type-cover .crop{width:52%;height:44%;margin-bottom:2cqw}.walk-values{font-size:2.8cqw;display:flex;align-items:center;justify-content:space-between;background:#fff;gap:1cqw}.walk-values select{border:0;background:transparent;width:50%;padding:0;font-size:2.8cqw}.walk-slider{accent-color:var(--blue);padding:0;margin:0;background:transparent;width:100%;height:100%}.symptom-options{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:1cqw;background:#fff;font-size:2.7cqw}.symptom-options label{display:flex;gap:.5cqw;align-items:center;white-space:nowrap}.symptom-options input{width:3cqw;height:3cqw;accent-color:var(--blue);margin:0}.health-status{font-size:2.9cqw;border-radius:1.5cqw;background:#f0f1f5;border:1px solid #d6d7db}.health-note{font-size:2.5cqw;border:0;background:#fff}.upload-input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.photo-tile{background:#f1f2f6;border-radius:2cqw;overflow:hidden;border:1px dashed #bbbfc7;display:grid;place-items:center;text-align:center;color:#85929a}.photo-tile .crop{width:55%;height:55%}.photo-tile img{width:100%;height:100%;object-fit:cover}.photo-tile small{font-size:2.1cqw;position:absolute;bottom:1cqw;background:#fffffff0;padding:.2cqw .8cqw;border-radius:1cqw}.photo-remove{font-size:2.2cqw;background:#f7fafb;color:#536674;border:1px solid #d4e2e5;border-radius:2cqw}.save-art{font-size:4.2cqw;background:#6a9ed6;color:white;border-radius:8cqw;font-weight:800;display:flex;justify-content:center;align-items:center;gap:1cqw;box-shadow:0 5px 12px #5d95ad40}.save-art .crop{width:4.5cqw;height:4.5cqw}.record-heading-link{font-size:3.8cqw;font-weight:700;color:#101514;border-radius:2cqw}.record-heading-link.is-selected{text-decoration:underline;text-decoration-color:#8cb9da;text-underline-offset:1cqw}.mode-back{font-size:2.4cqw;color:#4e7886;background:#ffffffa1;border-radius:4cqw;padding:.6cqw 1.4cqw;text-align:center}.record-help{font-size:2.5cqw;background:#fff;color:#5b7882;justify-content:center}
.profile-art .mask{color:#232623}.profile-title{font-size:3.6cqw;font-weight:700;background:#fcf7e9}.profile-switch{background:#fff;border-radius:8cqw;display:flex;align-items:center;gap:1.5cqw;padding:1cqw 1.5cqw;box-shadow:0 4px 7px #625d4b2e;font-size:3.7cqw}.profile-switch .pet-portrait{width:10cqw;height:10cqw}.profile-switch[aria-pressed=true]{outline:2px solid #8db9c4}.profile-switch strong{display:block;max-width:23cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-switch small{display:block;font-size:2.2cqw;color:#44818d}.profile-main{background:linear-gradient(110deg,#a4cfdf,#bfe3c6);border-radius:4.5cqw;display:flex;align-items:center;padding:3.5cqw;gap:4cqw;box-shadow:0 5px 8px #62684822}.profile-main .pet-portrait{width:20cqw;height:20cqw}.profile-main h1{margin:0 0 .4cqw;font-size:5.3cqw;max-width:43cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-main p{margin:0;font-size:2.9cqw}.profile-main dl{display:flex;gap:4cqw;margin:1.5cqw 0 0}.profile-main dt{font-size:2.5cqw}.profile-main dd{margin:0;font-size:3.1cqw}.edit-round{position:absolute;top:2.7cqw;right:2.7cqw;background:#d7edce;border-radius:50%;width:6.7cqw;height:6.7cqw;font-size:3.8cqw;box-shadow:0 4px 8px #55614221}.profile-section-title{font-size:3.1cqw;font-weight:700}.profile-body{font-size:2.8cqw;display:block;padding:1cqw;line-height:1.8}.profile-body p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-link{background:linear-gradient(90deg,#a8d1e0,#c3e2bf);border-radius:5cqw;font-size:2.7cqw;text-align:center}.profile-art .detail-body{font-size:2.8cqw}
.utility-screen{min-height:calc(100% - 14.6cqw);padding:6cqw 5cqw;background:radial-gradient(ellipse at 0 90%,#d5eddf,transparent 70%),#fff8e7}.utility-head{display:flex;align-items:center;justify-content:space-between;gap:3cqw;margin-bottom:5cqw}.utility-head h1{font-size:5.5cqw;margin:0}.utility-head p{font-size:3cqw;margin:1cqw 0 0;color:var(--muted)}.utility-head .pet-portrait{width:16cqw;height:16cqw}.utility-card{background:#fff;border-radius:5cqw;padding:4cqw;box-shadow:0 5px 14px #93735014;margin:3cqw 0}.utility-card h2{font-size:4.2cqw;margin:0 0 3cqw}.utility-card p{font-size:3.2cqw;line-height:1.7}.utility-button{padding:2.5cqw 3.5cqw;border-radius:4cqw;background:#d5efeb;font-size:3.2cqw}.utility-row{display:flex;align-items:center;gap:3cqw;width:100%;border-top:1px solid #f0eae2;padding:3cqw 0;background:transparent;text-align:left;font-size:3.1cqw}.utility-row span{flex:1}.utility-row strong{display:block}.utility-row small{display:block;color:#8a7567;line-height:1.8;font-size:2.7cqw}.utility-row img{width:14cqw;height:14cqw;object-fit:cover;border-radius:3cqw}.utility-row b{font-size:2.8cqw;color:#60927f}.utility-chips{display:flex;gap:2cqw;margin:3cqw 0;flex-wrap:wrap}.utility-chips button{background:#fff;border:1px solid #cfe2df;border-radius:5cqw;padding:1.5cqw 3cqw;font-size:3cqw}.utility-chips button[aria-pressed=true]{background:#d5efeb}.empty{font-size:3.3cqw;color:#8a7567;line-height:1.7}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}.live-meter{border-radius:99px;background:linear-gradient(90deg,#ef8c9f,#ffd794,#73ca87);border:1px solid #88594d;pointer-events:none}.live-meter>span{position:absolute;width:7cqw;height:7cqw;top:50%;transform:translate(-50%,-50%)}.home-art .date-copy{font-size:3.1cqw}.phone-shell{height:auto;max-height:100%;aspect-ratio:768/1376}.app-screen{position:absolute;inset:0}
@media(max-width:520px){.prototype-toolbar{max-width:100%}.phone-shell{border-width:3px;border-radius:23px}.prototype-stage{padding:0 4px 5px}.phone-shell{width:min(100%,calc((100svh - 48px)*768/1376));max-height:none}}@media(max-height:550px){.phone-shell{width:min(100%,340px);height:100%;max-height:none}.prototype-stage{padding-bottom:3px}}