:root{color-scheme:light;--bg:#f5f2f9;--ink:#3f354e;--muted:#71637e;--shell-top:#f2e9fb;--shell-bottom:#d9c6ee;--button:#f7effe;--screen:#fcfaf4;--screen-ink:#4e5550;--panel:#fffcff;--line:#e9e0f0;--accent:#78618f;--accent-on:#fff;--scrim:rgb(39 29 52 / .4);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.5;background:var(--bg);color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:disabled{cursor:default;opacity:.4}button,dialog{-webkit-user-select:none;user-select:none}button{touch-action:manipulation}[hidden]{display:none!important}
.stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:22px}
.pet-machine{position:relative;width:min(100%,450px);padding:20px 22px 25px;background:linear-gradient(148deg,var(--shell-top),var(--shell-bottom));border-radius:88px 88px 100px 100px / 80px 80px 110px 110px;box-shadow:inset 0 2px 2px rgb(255 255 255 / .95),inset 0 -5px 7px rgb(127 87 161 / .14),inset -2px 0 3px rgb(142 114 170 / .14),0 20px 50px rgb(87 64 111 / .14),0 5px 9px rgb(87 64 111 / .07);border:1px solid rgb(173 150 192 / .17)}
.machine-top{height:57px;display:flex;align-items:center;justify-content:center;position:relative;margin:0 3px 12px}.brand{font-size:min(1.375rem,6vw);font-weight:700;letter-spacing:-1.1px;color:#70607f;display:flex;align-items:baseline;gap:5px}
.icon-button{border:0;background:transparent;color:var(--ink);width:44px;height:44px;display:grid;place-items:center;border-radius:50%;position:absolute;right:0}.icon-button svg{width:22px;fill:currentColor}.icon-button:active{background:rgb(99 64 130 / .09)}
.display-bezel{padding:8px;border-radius:33px;background:linear-gradient(135deg,#cfc0df,#f9f2ff 80%);box-shadow:inset 0 1px 3px rgb(112 76 140 / .19),0 2px 0 rgb(255 255 255 / .65)}
.display{aspect-ratio:1;position:relative;overflow:hidden;border-radius:25px;background:var(--screen);box-shadow:inset 0 3px 8px rgb(52 41 29 / .1);color:var(--screen-ink)}
#screen{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;object-fit:contain}.display[data-mode="black"]{background:#c8d3b3}.display[data-mode="black"] #screen{width:100%;height:calc(100% - 46px);margin-top:30px}
.paused-overlay{position:absolute;inset:0;background:rgb(39 36 41 / .64);display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;backdrop-filter:blur(3px)}.paused-overlay svg{width:36px;height:36px;fill:currentColor}
.controls{display:flex;align-items:center;justify-content:center;gap:clamp(24px,8vw,38px);padding:29px 0 22px}.pet-key{width:70px;height:70px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgb(155 128 179 / .18);background:linear-gradient(140deg,#fdf8ff,var(--button));color:#897298;box-shadow:inset 0 2px 2px white,inset 0 -2px 3px rgb(137 100 168 / .12),0 5px 0 #c9b3dd,0 8px 10px rgb(100 69 126 / .13);transition:box-shadow 100ms ease,background 100ms ease;color:var(--accent);font-weight:500;font-size:0.8125rem}.pet-key:nth-child(2){background:linear-gradient(140deg,#fff4f6,#f8dfeb);box-shadow:inset 0 2px 2px white,inset 0 -2px 3px rgb(153 92 122 / .1),0 5px 0 #d2b0c6,0 8px 10px rgb(100 69 126 / .13);color:#9d708c}.pet-key[aria-pressed="true"],.pet-key:active{box-shadow:inset 0 2px 5px rgb(105 75 130 / .14),0 2px 0 #c9b3dd,0 3px 6px rgb(100 69 126 / .1);background:var(--shell-bottom)}
.machine-bottom{display:flex;justify-content:center;align-items:center;padding:0 24px;font-size:0.5625rem;letter-spacing:1px;color:#867295;gap:12px}.speaker{display:flex;gap:3px}.speaker i{height:8px;width:2px;border-radius:1px;background:rgb(126 98 148 / .24);box-shadow:0 1px 0 rgb(255 255 255 / .35)}
.sheet{width:min(440px,calc(100% - 24px));max-height:calc(100svh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:24px;border:1px solid var(--line);border-radius:28px;background:var(--panel);color:var(--ink);box-shadow:0 24px 90px rgb(33 22 44 / .25);overscroll-behavior:contain}.sheet::backdrop{background:var(--scrim);backdrop-filter:blur(6px)}.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.sheet-header small{font-size:0.5625rem;letter-spacing:1.8px;color:var(--muted)}.sheet-header h1{font-size:1.312rem;font-weight:600;margin:4px 0 0;letter-spacing:.2px}.close-button{font-size:1.688rem;line-height:1;width:44px;height:44px;border:0;background:var(--bg);border-radius:50%;color:var(--muted)}
.menu-row{width:100%;min-height:57px;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;gap:14px;text-align:left;padding:10px 0;font-size:0.875rem}.menu-row>svg{width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.menu-row>span:nth-child(2){flex:1}.menu-row>b{font-weight:400;color:var(--muted);font-size:1.5rem}.row-detail{display:block;font-size:0.625rem;color:var(--muted);margin-top:3px}.row-value{font-size:0.6875rem;color:var(--muted)}.menu-divider{height:1px;background:var(--line);margin:9px 0}.text-button{display:block;margin:14px auto 0;border:0;min-height:44px;background:transparent;color:var(--accent);font-size:0.75rem}.stepper{display:flex;align-items:center;gap:4px}.stepper button{border:0;background:var(--bg);border-radius:50%;width:44px;height:44px;color:var(--accent)}.stepper>span{min-width:30px;text-align:center;font-size:0.75rem}
.primary-button{width:100%;min-height:48px;border:0;border-radius:15px;background:var(--accent);color:var(--accent-on);font-size:0.875rem;padding:12px;margin-top:16px}.primary-button:active{opacity:.85}.sheet-footnote{color:var(--muted);font-size:0.6875rem;line-height:1.8;margin:16px 0 2px}.empty-library{text-align:center;color:var(--muted);padding:28px 0 22px}.empty-library strong{display:block;font-size:0.9375rem;font-weight:500;color:var(--ink)}.empty-library p{font-size:0.75rem}.pet-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.pet-item>.pet-thumb{width:44px;height:52px;border-radius:16px;background:var(--shell-bottom);display:grid;place-items:center;font-size:0.875rem;color:var(--accent)}.pet-item>.pet-info{flex:1;min-width:0}.pet-info strong{font-size:0.875rem;font-weight:500;display:block;overflow-wrap:anywhere}.pet-info small{font-size:0.625rem;color:var(--muted)}.pet-item button{min-width:44px;min-height:44px;border:0;border-radius:12px;background:var(--bg);color:var(--accent);font-size:0.75rem;padding:8px}.pet-item .pet-more{min-width:44px;font-size:16px;background:transparent}.import-filename{font-size:0.75rem;color:var(--muted);overflow-wrap:anywhere;background:var(--bg);padding:12px;border-radius:12px}.device-options{display:grid;gap:8px}.device-option{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;min-height:60px;cursor:pointer}.device-option:has(input:checked){border-color:var(--accent);background:var(--bg)}.device-option input{accent-color:var(--accent);width:18px;height:18px;flex-shrink:0}.device-option strong{font-size:0.875rem;font-weight:500}.device-option small{display:block;font-size:0.625rem;color:var(--muted);margin-top:2px}.help-copy p{font-size:0.8125rem;line-height:1.9;color:var(--muted)}.help-copy b{color:var(--ink)}.help-copy h2{font-size:0.875rem;font-weight:600;margin:20px 0 4px}.toast{position:fixed;z-index:100;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:13px 18px;border-radius:16px;background:#44364f;color:white;box-shadow:0 5px 20px rgb(35 24 44 / .2);font-size:0.75rem;text-align:center;pointer-events:none}
@media(min-width:700px){.pet-machine{width:430px}.stage{padding:42px;gap:28px}}
@media(max-width:340px){.pet-machine{padding:15px 16px 22px;border-radius:65px 65px 85px 85px}.controls{gap:20px}.pet-key{width:64px;height:64px}.machine-bottom{padding:0 13px}.sheet{padding:18px}}
@media(max-height:600px) and (orientation:landscape){.stage{padding:20px}.pet-machine{width:360px}.machine-top{height:36px;margin-bottom:7px}.controls{padding-top:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#211c29;--ink:#f0e8f6;--muted:#b8a7c7;--shell-top:#635074;--shell-bottom:#44354f;--button:#897397;--panel:#2d2536;--line:#47384f;--accent:#c8abd9;--accent-on:#2c1e37;--scrim:rgb(12 8 17 / .65)}.brand{color:#e5d5f2}.display-bezel{background:linear-gradient(135deg,#392c44,#796584)}.pet-key{background:linear-gradient(145deg,#907d9d,#685375);color:#f2e7fa;border-color:#8e76a0;box-shadow:inset 0 1px 2px #a48db2,inset 0 -2px 3px rgb(13 5 17 / .12),0 5px 0 #312339,0 8px 10px rgb(5 2 10 / .3)}.pet-key:nth-child(2){background:linear-gradient(145deg,#a58398,#896679);color:#fff0f7;box-shadow:inset 0 1px 2px #bea0b1,0 5px 0 #533447,0 8px 10px rgb(5 2 10 / .3)}.machine-bottom{color:#bba5ca}.speaker i{background:#aa91b6}}

.menu-row{flex-wrap:wrap}.row-value{overflow-wrap:anywhere}.sheet-header>div{min-width:0}.sheet-header h1{overflow-wrap:anywhere}.close-button{flex-shrink:0}.device-option span{min-width:0;overflow-wrap:anywhere}