:root{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Microsoft YaHei',sans-serif;color:#1c1c1e;background:#f2f2f7;font-synthesis:none;-webkit-font-smoothing:antialiased;--blue:#007aff;--muted:#8e8e93;--separator:#3c3c4320}*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}button,a,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;transition:background .18s,box-shadow .18s,transform .18s}button:disabled{opacity:.4;cursor:wait}button:active:not(:disabled){transform:scale(.98)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #007aff65;outline-offset:4px}a{color:inherit;text-decoration:none}.header{max-width:1120px;margin:auto;padding:42px 28px 30px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:29px;font-weight:700;letter-spacing:-1px}.brand small{font-size:15px;font-weight:400;letter-spacing:-.2px;color:var(--muted);margin-left:9px}.header nav{font-size:14px;color:var(--blue)}.header nav a{padding:10px 14px;border-radius:20px;background:#e5e5ea80}main{max-width:1120px;padding:0 28px;margin:auto}.pet-tabs{display:flex;padding:4px;background:#e5e5ea;border-radius:14px;margin-bottom:24px;width:fit-content;min-width:360px}.pet-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;padding:11px 23px;border:0;border-radius:11px;background:transparent;color:#636366;white-space:nowrap}.pet-tabs strong{font-size:14px;font-weight:600}.pet-tabs span{font-size:11px;opacity:.7}.pet-tabs [aria-selected=true]{background:#fff;color:#1c1c1e;box-shadow:0 2px 6px #00000012,0 0 1px #00000012}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}.preview-panel{display:flex;flex-direction:column;background:#e9edf3;min-height:530px;border-radius:26px;overflow:hidden;box-shadow:inset 0 0 0 1px #fff8;transition:background .2s}.preview-panel.dark{background:#1c1c1e;color:#f2f2f7;box-shadow:inset 0 0 0 1px #ffffff0a}.preview-top,.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px 24px;font-size:12px;color:#8e8e93}.caps{font-size:12px;font-weight:500}.small-button{border:0;padding:7px 11px;border-radius:20px;background:#ffffff80;color:#636366;font-size:12px}.small-button:hover{background:#fff}.dark .small-button{background:#ffffff12;color:#d1d1d6}.dark .small-button:hover{background:#ffffff20}.pet-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:350px}.pet-label{font-size:14px;color:#636366;margin-bottom:14px;font-weight:500}.dark .pet-label{color:#aeaeb2}canvas[role=img]{width:min(300px,85%);height:auto;aspect-ratio:192/208;object-fit:contain}.controls{padding:30px;background:#fff;border-radius:26px;box-shadow:0 3px 20px #1c1c1e03}.section-heading{display:flex;align-items:center;margin-bottom:13px}.section-heading h2{font-size:13px;font-weight:500;color:#8e8e93;margin:0}.forms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:#f2f2f7;padding:4px;border-radius:12px}.form{padding:10px 3px;border:0;border-radius:9px;background:transparent;color:#636366;min-height:40px}.form strong{font-size:13px;font-weight:500}.form:hover{background:#ffffff80}.form.active{background:#fff;color:#1c1c1e;box-shadow:0 1px 5px #00000014,0 0 1px #0000001a}.divider{height:1px;background:var(--separator);margin:25px 0}.colors{display:flex;flex-wrap:wrap;gap:11px;margin:1px 0 12px;padding:3px}.swatch{width:28px;height:28px;border:3px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #e5e5ea;flex-shrink:0}.swatch.selected{box-shadow:0 0 0 2px var(--blue)}.swatch:hover{transform:scale(1.1)}.hint{font-size:12px;color:#8e8e93;line-height:1.6;margin:0}.states{display:flex;flex-wrap:wrap;gap:8px}.states button,.configuration-option{border:0;border-radius:9px;background:#f2f2f7;padding:9px 14px;font-size:13px;color:#636366;min-height:36px}.states button:hover:not(:disabled),.configuration-option:hover:not(:disabled){background:#e5e5ea}.states button.selected,.configuration-option.selected{background:#e8f2ff;color:#007aff}.download-area{margin-top:28px}.install-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.download{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;border:0;border-radius:13px;background:var(--blue);color:white;font-size:14px;font-weight:600;min-height:56px}.download:hover:not(:disabled){background:#006ee6}.command-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;border-radius:13px;background:#e8f2ff;color:var(--blue);padding:10px 8px;font-size:14px;font-weight:500;min-height:56px}.command-action:hover{background:#dcecff}.command-action small{font-size:10px;color:#6a9cd2;font-weight:400}.command-preview{display:block;margin-top:13px;padding:11px 13px;border-radius:10px;background:#f8f8fa;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.7;color:#8e8e93;overflow-wrap:anywhere}.download-meta{display:flex;justify-content:flex-end;margin-top:13px}.text-button{border:0;background:none;color:var(--blue);font-size:12px;padding:2px 0}.text-button:hover{color:#005ec4}.download-status{font-size:12px;color:#8e8e93;line-height:1.6;margin:10px 0 0}.download-status:empty{display:none}.nono-forms{grid-template-columns:repeat(3,minmax(0,1fr))}.install{margin:22px 0 32px;background:#fff;border-radius:18px;overflow:hidden}.install details{width:100%;padding:19px 24px}.install summary{display:flex;align-items:center;justify-content:space-between;font-size:14px;cursor:pointer;color:#636366;list-style:none}.install summary::-webkit-details-marker{display:none}.install summary::after{content:'';width:7px;height:7px;border-right:1.5px solid #aeaeb2;border-bottom:1.5px solid #aeaeb2;transform:rotate(-45deg);margin-right:4px}.install details[open] summary::after{transform:rotate(45deg)}.install-content{max-width:650px;padding-top:25px}.install-content ol{list-style:none;padding:0;margin:0}.install-content li{display:flex;gap:15px;margin-bottom:22px}.install-content li>span{font-size:11px;color:#8e8e93;background:#f2f2f7;border-radius:50%;min-width:23px;height:23px;display:grid;place-items:center}.install h3{font-size:13px;font-weight:500;margin:1px 0 7px}.install p{font-size:12px;color:#8e8e93;line-height:1.9;margin:0}.install code{font-size:12px;background:#f2f2f7;padding:3px 5px;border-radius:5px;overflow-wrap:anywhere}.copy-button{padding:11px 15px;background:#e8f2ff;border:0;border-radius:10px;color:var(--blue);font-size:12px}.install-content .install-note{margin-top:16px}.install-note a{color:var(--blue)}footer{max-width:1120px;margin:auto;padding:0 28px 30px;font-size:11px;color:#aeaeb2}footer p{margin:0}.live-dot{display:none}@media(max-width:800px){.header{padding:28px 20px 24px}.brand{font-size:26px}main{padding:0 20px}.workbench{grid-template-columns:1fr;gap:16px}.preview-panel{min-height:340px;border-radius:24px}.pet-stage{min-height:250px}canvas[role=img]{width:220px}.preview-top,.preview-bottom{padding:16px 20px}.controls{padding:25px;border-radius:24px}.pet-tabs{margin-bottom:20px;width:100%;min-width:0}.pet-tabs button{padding:10px 14px}.install{margin:18px 0 26px}footer{padding:0 20px 26px}}@media(max-width:380px){main{padding:0 14px}.header{padding:24px 16px}.controls{padding:22px 18px}.brand{font-size:24px}.brand small{font-size:12px}.header nav{font-size:12px}.header nav a{padding:8px 10px}.colors{gap:10px}.form strong{font-size:12px}.pet-tabs span{font-size:10px}.pet-tabs button{gap:7px}.command-action,.download{font-size:13px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* A directly actionable terminal snippet, parallel to the ZIP download. */
.install-actions{grid-template-columns:minmax(105px,.72fr) minmax(0,1.65fr);align-items:stretch}
.command-action{display:flex;align-items:stretch;justify-content:flex-start;gap:10px;text-align:left;padding:12px 14px;background:#f2f2f7;color:#1c1c1e;border:1px solid #e5e5ea;border-radius:13px;min-width:0;cursor:copy}
.command-action:hover{background:#eaeaf0;border-color:#d1d1d6}.command-action:active{transform:scale(.99)}
.command-header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#8e8e93;font-weight:400}.terminal-title{display:flex;gap:6px;align-items:baseline}.terminal-title small{font-size:9px;color:#aeaeb2}.copy-feedback{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#8e8e93}.copy-icon{flex-shrink:0}.command-line{display:flex;gap:8px;align-items:baseline}.shell-prompt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#8e8e93;user-select:none}.command-line code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.7;font-weight:400;overflow-wrap:anywhere;min-width:0;color:#3a3a3c}.command-action.copied .copy-feedback{color:#248a3d}.command-action.copied{border-color:#34c75970}.install-actions .download{height:100%}
@media(max-width:380px){.install-actions{grid-template-columns:minmax(90px,.65fr) minmax(0,1.5fr);gap:8px}.command-action{padding:11px 10px}.terminal-title small{font-size:8px}}
/* Nine actions: balanced five/four rows with aligned, equal-width buttons. */
.states{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.states button,.configuration-option{padding:9px 2px;min-width:0;white-space:nowrap}

/* Keep installation controls quiet and compact. */
.install-actions{grid-template-columns:minmax(0,1fr);gap:10px}
.command-action{padding:12px 14px;background:#eaf3ff;border:1px solid #007aff30;border-radius:10px;gap:8px;box-shadow:none;font-weight:400}
.command-action:hover{background:#dfedff;border-color:#007aff60}
.command-header{font-size:12px}.terminal-title{gap:8px;color:#636366;font-weight:400;flex-wrap:wrap}.terminal-title small{font-size:10px;font-weight:400;color:#8e8e93}

.command-line{gap:8px}.command-line code{font-size:12px;line-height:1.6;color:#636366;font-weight:400}.shell-prompt{font-size:12px;color:var(--blue)}.copy-feedback{color:var(--blue);font-size:11px}.copy-icon{width:15px;height:15px}
.install-actions .download{background:#fff;color:#636366;border:1px solid #e5e5ea;min-height:40px;padding:10px;font-size:12px;font-weight:400;border-radius:10px;box-shadow:none}
.install-actions .download:hover:not(:disabled){background:#f2f2f7}
@media(max-width:380px){.install-actions{grid-template-columns:minmax(0,1fr)}.command-action{padding:11px 12px}.command-line code{font-size:12px}.terminal-title small{font-size:9px}}

/* Types control which variants are available; all options stay visible. */
.configuration-group + .configuration-group{margin-top:24px}
.configuration-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.type-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.variant-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.configuration-option:disabled{cursor:default}

/* Keep pet navigation alongside the brand and installation guide. */
.header{gap:24px}
.header .pet-tabs{margin:0;min-width:0;flex-shrink:0}
.header nav{flex-shrink:0;white-space:nowrap}
@media(max-width:800px){.header{gap:12px}.header .pet-tabs{width:auto}.header .pet-tabs button{padding:10px 12px}}
@media(max-width:600px){.header{gap:8px}.brand{font-size:22px;letter-spacing:-.5px}.brand small{display:none}.header .pet-tabs{flex:1}.header .pet-tabs button{flex-direction:column;gap:2px;padding:7px 8px}.header .pet-tabs strong{font-size:12px}.header .pet-tabs span{font-size:10px}.header nav{font-size:12px}.header nav a{padding:8px 0;background:none}}

/* Borderless color choices; a check identifies the current color. */
.swatch{position:relative;border:0;box-shadow:none;padding:0}
.swatch.selected{box-shadow:none}
.swatch.selected::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px;font-weight:600;text-shadow:0 1px 2px #0009}
#nono-colors{display:grid;grid-template-columns:repeat(12,minmax(20px,1fr));gap:5px;overflow-x:auto;flex-wrap:nowrap;padding:3px 0}
#nono-colors .swatch{width:100%;max-width:28px;height:auto;aspect-ratio:1;justify-self:center}
#nono-colors .swatch[data-color="original"]{background:linear-gradient(145deg,#fff,#e9e9ed)}

/* Share the same segmented-control treatment with NoNo. */
.type-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.variant-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.form.selected{background:#fff;color:#1c1c1e;box-shadow:0 1px 5px #00000014,0 0 1px #0000001a}

.action-library-link{margin-left:auto;font-size:12px;font-weight:400;color:var(--blue);padding:3px 0}