:root{--pet-ink:#30344e;--pet-muted:#788099;--pet-purple:#7460be;--pet-tint:#eeebfa;--pet-line:#e5e5ef;--pet-white:#fff;--pet-canvas:#f0f5f4;--pet-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:#f7f8fc;color:var(--pet-ink);font:14px/1.6 var(--pet-font)}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--pet-purple);outline-offset:4px}[hidden]{display:none!important}button{border:0}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}.pet-header{max-width:1280px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid var(--pet-line)}.pet-brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;letter-spacing:1px}.brand-dot{display:grid;place-items:center;background:var(--pet-purple);color:#fff;width:43px;height:43px;font-size:38px;border-radius:15px;line-height:1}.pet-brand small{display:block;font:8px/1.6 var(--pet-font);letter-spacing:2px;color:var(--pet-muted);margin-top:2px}.pet-header nav{display:flex;align-items:center;gap:10px}.quiet-button,.home-link{background:transparent;padding:9px 12px;border-radius:20px;font-size:12px}.quiet-button:hover,.home-link:hover{background:var(--pet-tint)}.quiet-button[aria-pressed=true]{color:var(--pet-purple);background:var(--pet-tint)}.home-link{margin-left:8px;border:1px solid var(--pet-line)}.pet-workshop{max-width:1280px;margin:auto;padding:31px 32px 18px}.workshop-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--pet-purple);font-weight:700;margin:0 0 7px}.workshop-heading h1{font-size:34px;line-height:1.3;letter-spacing:-1px;margin:0;font-weight:750}.heading-note{font-size:12px;line-height:1.9;color:var(--pet-muted);margin:0;text-align:right}.workshop-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}.play-panel{min-width:0}.pet-stage{height:560px;position:relative;overflow:hidden;border:1px solid #dce9e4;border-radius:28px;background:radial-gradient(ellipse at 48% 38%,#fff 0%,#f1f6f1 43%,#e5eeeb 100%)}.pet-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#c0d2cc 1px,transparent 1px);background-size:24px 24px;opacity:.26}.stage-heading{position:absolute;z-index:2;top:22px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.live-label{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:#637f74;letter-spacing:1px}.live-label i{width:6px;height:6px;background:#81ae9a;border-radius:50%}.stage-button{pointer-events:auto;background:#ffffffba;border:1px solid #dce8e0;border-radius:20px;padding:6px 15px;color:#657b74;font-size:11px}#pet-canvas{display:block;position:relative;width:100%;height:100%;touch-action:none;user-select:none;cursor:default}#pet-canvas[data-hit=true]{cursor:grab}#pet-canvas[data-grabbing=true]{cursor:grabbing}.pet-caption{position:absolute;bottom:18px;left:16px;right:16px;display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none;min-height:28px}.pet-caption>span:first-child{font-size:13px;font-weight:700;color:#536b61;border-right:1px solid #c9d8d0;padding-right:10px;max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#pet-status{font-size:11px;color:#74877e}.play-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.play-tools button{display:grid;grid-template-columns:28px 1fr;align-items:center;text-align:left;padding:14px 10px;background:#fff;border:1px solid var(--pet-line);border-radius:15px;transition:background .15s,border-color .15s,transform .15s;min-width:0}.play-tools button:hover{transform:translateY(-2px)}.play-tools button[aria-pressed=true]{background:var(--pet-tint);border-color:#b8aadf;color:#6551a8}.play-tools button>span{grid-row:span 2;font-size:24px;text-align:center;line-height:1}.play-tools strong{font-size:12px;font-weight:650}.play-tools small{font-size:9px;color:var(--pet-muted);white-space:nowrap}.play-help{font-size:10px;color:var(--pet-muted);text-align:center;margin:15px 0 0}.customizer{background:#fff;border:1px solid var(--pet-line);border-radius:24px;padding:24px;box-shadow:0 12px 35px #30344e04}.customizer-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.customizer-heading h2{font-size:19px;margin:0;letter-spacing:-.3px}.customizer-heading .eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:3px}.step-mark{color:#aaa3c3;font-size:10px;white-space:nowrap}.customizer fieldset{border:0;padding:0;margin:23px 0 0;min-width:0}.customizer legend{padding:0;font-size:12px;font-weight:650;margin-bottom:12px}.customizer legend>span{font-size:9px;font-weight:500;color:#aaa4bd;margin-right:8px;font-variant-numeric:tabular-nums}.shape-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.shape-options button{background:#f7f7fb;border:1px solid transparent;padding:7px 2px;font-size:10px;border-radius:12px;display:grid;gap:4px;place-items:center}.shape-options svg{width:30px;height:29px;fill:#e5e0f5;stroke:#a79cce;stroke-width:1.4;stroke-linejoin:round}.shape-options button[aria-pressed=true]{background:var(--pet-tint);border-color:#b9abde;color:#6652a8}.shape-options button[aria-pressed=true] svg{fill:#c5b7f0;stroke:#8a74c1}.color-options{display:flex;align-items:center;justify-content:space-between;gap:7px}.color-options button{width:31px;height:31px;border:3px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #e8e7ef;position:relative;flex:none}.color-options button[aria-pressed=true]{box-shadow:0 0 0 2px var(--pet-purple)}.color-options button[aria-pressed=true]::after{content:"";position:absolute;width:7px;height:7px;background:#fff;top:9px;left:9px;border-radius:50%}.custom-color{width:31px;height:31px;position:relative;display:grid;place-items:center;border:1px dashed #b6accb;border-radius:50%;overflow:hidden;cursor:pointer;flex:none}.custom-color input{position:absolute;inset:0;width:100%;height:100%;opacity:.01;cursor:pointer}.custom-color span{pointer-events:none;font-size:18px;color:var(--pet-purple)}.sliders>label{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:10px}.sliders output{font-size:10px;color:var(--pet-purple)}input[type=range]{display:block;width:100%;height:18px;margin:7px 0 0;accent-color:var(--pet-purple);cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#959aad;margin-bottom:9px}.face-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.face-options button{background:#f8f8fb;border:1px solid transparent;padding:8px 1px;border-radius:9px;font-size:10px}.face-options button[aria-pressed=true]{background:var(--pet-tint);color:var(--pet-purple);border-color:#c9bce9}.name-field{white-space:nowrap;margin-top:12px;display:flex;align-items:center;gap:12px;font-size:11px}.name-field input{min-width:0;width:100%;background:#fafafd;border:1px solid var(--pet-line);border-radius:9px;padding:8px 10px;color:var(--pet-ink);font-size:12px}.customizer-actions{display:flex;gap:8px;margin-top:22px}.primary-button{background:var(--pet-purple);color:#fff;border-radius:11px;padding:11px 12px;font-size:12px;flex:1;box-shadow:0 4px 10px #7460be20}.primary-button:hover{background:#6550af}.reset-button{border:1px solid var(--pet-line);border-radius:11px;padding:10px;background:#fff;font-size:11px}.save-note{margin:12px 0 0;text-align:center;font-size:9px;line-height:1.7;color:#9196a8}.pet-footer{display:flex;justify-content:space-between;gap:20px;margin-top:25px;padding:18px 0 0;border-top:1px solid var(--pet-line);color:#969bae;font-size:10px}.pause-cover{position:absolute;inset:0;z-index:3;background:#eef4edc7;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:17px;color:#51695d}.pause-cover button{background:var(--pet-purple);color:white;padding:11px 25px;border-radius:30px}.pet-workshop details{font-size:11px;color:var(--pet-muted)}.pet-workshop pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto}body[data-reduced=true] *{scroll-behavior:auto;transition:none!important}
@media(max-width:1050px){.pet-header{padding:20px 24px}.pet-workshop{padding:26px 24px 18px}.workshop-grid{grid-template-columns:minmax(0,1fr) 286px;gap:16px}.customizer{padding:20px}.pet-stage{height:536px}.play-tools{gap:6px}.play-tools button{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:10px 3px}.play-tools button>span{font-size:22px}.play-tools small{font-size:8px}.color-options{gap:5px}.color-options button,.custom-color{width:29px;height:29px}.color-options button[aria-pressed=true]::after{top:8px;left:8px}}
@media(max-width:740px){.pet-header{padding:16px 18px}.pet-brand{font-size:17px;gap:8px}.brand-dot{width:33px;height:33px;border-radius:11px;font-size:30px}.pet-brand small{font-size:6px;letter-spacing:1.4px}.pet-header nav{gap:0}.quiet-button{font-size:10px;padding:8px}.home-link{font-size:10px;margin-left:3px;padding:7px 9px}.pet-workshop{padding:24px 16px 20px}.workshop-heading{margin-bottom:20px}.workshop-heading h1{font-size:28px}.eyebrow{font-size:9px}.heading-note{display:none}.workshop-grid{grid-template-columns:1fr;gap:24px}.pet-stage{height:400px;border-radius:22px}.stage-heading{top:17px;left:18px;right:18px}.pet-caption{bottom:15px;gap:8px}#pet-status{font-size:10px}.play-tools button{padding:12px 4px}.play-tools small{font-size:9px}.play-help{font-size:9px;padding:0 5px}.customizer{padding:24px}.customizer fieldset{margin-top:23px}.shape-options svg{width:37px;height:33px}.shape-options button{font-size:11px;padding:9px}.color-options{justify-content:flex-start;gap:16px}.color-options button,.custom-color{width:34px;height:34px}.color-options button[aria-pressed=true]::after{top:10px;left:10px}.face-options button{font-size:11px;padding:10px}.sliders>label{font-size:12px}input[type=range]{height:24px}.pet-footer{flex-direction:column;gap:4px;text-align:center;margin-top:22px;padding-top:18px}}
@media(max-width:370px){.pet-header{padding:14px 12px}.pet-workshop{padding-left:12px;padding-right:12px}.pet-brand{font-size:16px}.pet-stage{height:360px}.color-options{gap:11px}.customizer{padding:20px}.play-tools small{font-size:8px}}