:root {
  --ink: #171714;
  --paper: #f7f2e8;
  --paper-deep: #eee6d8;
  --blue: #1558d6;
  --blue-dark: #0d43af;
  --orange: #f26b3f;
  --lime: #b9d957;
  --muted: #6c685f;
  --line: rgba(23, 23, 20, .88);
  --shadow: 5px 6px 0 rgba(23, 23, 20, .13);
  --hand: "STXingkai", "FZShuTi", "STKaiti", "KaiTi", "FZKai-Z03", "DFKai-SB", cursive;
  --body: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); overflow-x: hidden; }
button, input, select { font: inherit; color: inherit; }
button, a, label[for], select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.paper-noise { position: fixed; inset: 0; z-index: 1000; opacity: .22; pointer-events: none; mix-blend-mode: multiply; background-image: repeating-radial-gradient(circle at 20% 30%, rgba(30,24,18,.13) 0 .55px, transparent .8px 4px); background-size: 7px 7px; }

.site-header { height: 88px; border-bottom: 2px solid var(--line); display: flex; align-items: center; padding: 0 clamp(22px, 4vw, 72px); gap: 40px; position: sticky; top: 0; z-index: 100; background: rgba(247, 242, 232, .94); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 9px; min-width: 178px; }
.brand-mark { width: 54px; height: 44px; transform: rotate(-2deg); }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.brand b { display: block; font-family: var(--hand); font-size: 20px; line-height: 1; letter-spacing: .08em; }
.brand small { display: block; font-size: 7px; letter-spacing: .25em; margin-top: 5px; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.5vw, 42px); flex: 1; }
.main-nav a { font-family: var(--hand); font-size: 17px; font-weight: 700; position: relative; white-space: nowrap; }
.main-nav a::after { content: ""; position: absolute; left: 10%; right: 10%; height: 3px; bottom: -11px; background: var(--blue); border-radius: 50%; transform: scaleX(0) rotate(-2deg); transition: .2s; }
.main-nav a:hover::after, .main-nav a.is-active::after { transform: scaleX(1) rotate(-2deg); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.text-button { border: 0; background: none; font-family: var(--hand); font-weight: 700; font-size: 17px; }
.bag-button { position: relative; width: 38px; height: 42px; border: 0; background: transparent; padding: 7px; }
.bag-button svg { width: 100%; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.bag-button span { display: none; position: absolute; right: -3px; top: 0; width: 17px; height: 17px; align-items: center; justify-content: center; color: #fff; background: var(--orange); border-radius: 50%; font-size: 9px; }
.bag-button span.has-items { display: flex; }

.hero { min-height: calc(100vh - 88px); height: 760px; max-height: 870px; position: relative; display: grid; grid-template-columns: minmax(500px, .88fr) 1.12fr; border-bottom: 2px solid var(--line); overflow: hidden; }
.hero-copy { padding: 105px 3vw 90px clamp(28px, 10vw, 164px); position: relative; z-index: 3; }
.eyebrow { font-family: var(--hand); color: var(--blue); font-weight: 800; font-size: 17px; transform: rotate(-1deg); display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 38px; height: 2px; background: var(--blue); transform: rotate(-3deg); }
.hero h1 { font-family: var(--hand); font-size: clamp(58px, 6vw, 94px); letter-spacing: -.05em; line-height: .98; margin: 28px 0 27px; font-weight: 900; }
.hero h1 em, .section-heading h2 em, .inspiration-copy h2 em, .help-section h2 em { font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em::after, .section-heading h2 em::after, .inspiration-copy h2 em::after, .help-section h2 em::after { content: ""; position: absolute; height: 8px; left: 1%; right: 2%; bottom: -5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10'%3E%3Cpath d='M2 6c45-4 87 3 196-3' fill='none' stroke='%231558d6' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero-copy > p { font-family: var(--hand); font-size: 21px; line-height: 1.75; margin: 0 0 30px; color: #46433d; font-weight: 700; }
.scribble-button { position: relative; border: 2px solid #0f48ba; background: var(--blue); color: #fff; font-family: var(--hand); font-weight: 800; font-size: 22px; min-height: 57px; padding: 12px 29px; box-shadow: 4px 5px 0 rgba(19,22,27,.18); clip-path: polygon(1% 8%, 99% 2%, 97% 93%, 4% 100%); transition: transform .16s, background .16s; }
.scribble-button::before { content: ""; position: absolute; inset: 5px 4px 4px 6px; border: 1px solid rgba(255,255,255,.65); clip-path: polygon(0 5%, 98% 0, 100% 94%, 3% 100%); }
.scribble-button:hover { background: var(--blue-dark); transform: rotate(-1deg) translateY(-2px); }
.scribble-button span { margin-left: 20px; }
.hero-proof { display: flex; align-items: center; gap: 14px; margin-top: 34px; font-family: var(--hand); color: #57534c; }
.hero-proof span { white-space: nowrap; }
.hero-proof b { color: var(--ink); font-size: 18px; }
.hero-proof i { width: 4px; height: 4px; background: var(--orange); border-radius: 50%; }
.hero-visual { position: relative; height: 100%; overflow: hidden; }
.hero-visual::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 24%; background: linear-gradient(90deg, var(--paper) 5%, rgba(247,242,232,0)); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; mix-blend-mode: multiply; }
.doodle-note { position: absolute; z-index: 3; display: flex; align-items: center; font-family: var(--hand); font-size: 18px; font-weight: 800; transform: rotate(-4deg); }
.doodle-note svg { width: 90px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.note-dog { top: 22%; left: 2%; }
.note-cat { top: 56%; left: 1%; flex-direction: row-reverse; transform: rotate(2deg); }
.heart-doodle { position: absolute; right: 8%; top: 12%; z-index: 3; color: var(--blue); font-family: var(--hand); font-size: 45px; transform: rotate(18deg); }
.hero-rail { position: absolute; left: 0; top: 0; bottom: 0; z-index: 5; width: 86px; border-right: 2px solid var(--line); background: rgba(247,242,232,.91); display: flex; flex-direction: column; align-items: stretch; }
.rail-title { height: 88px; padding-top: 18px; text-align: center; font-family: var(--hand); font-weight: 900; line-height: 1.08; }
.hero-rail button { min-height: 158px; flex: 1; border: 0; border-top: 1.5px solid var(--line); background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-family: var(--hand); font-size: 17px; }
.hero-rail button:hover { background: rgba(21,88,214,.06); }
.mini-collar { width: 55px; height: 31px; border: 8px solid var(--blue); border-radius: 50%; box-shadow: inset 0 0 0 2px #fff, 1px 2px 0 var(--ink); transform: rotate(-14deg); }
.mini-tag { width: 52px; height: 52px; border: 2px solid var(--ink); border-radius: 50%; background: #eee8db; display: grid; place-items: center; font-size: 13px; position: relative; }
.mini-tag::before { content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; top: -9px; }
.mini-leash { width: 62px; height: 20px; border: 7px solid var(--orange); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(25deg); }
.scroll-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; font-family: var(--hand); font-weight: 700; font-size: 14px; }
.scroll-hint span { color: var(--blue); font-size: 20px; }

.studio-section { padding: 88px clamp(22px, 4vw, 72px) 110px; background: #f1eadf; border-bottom: 2px solid var(--line); position: relative; }
.studio-section::before { content: ""; position: absolute; inset: 0; opacity: .28; pointer-events: none; background-image: linear-gradient(rgba(23,23,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,23,20,.05) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.section-heading { max-width: 1390px; margin: 0 auto 45px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; position: relative; z-index: 1; }
.kicker, .panel-title > span { display: inline-block; color: var(--blue); font: 800 12px/1.4 var(--body); letter-spacing: .17em; }
.section-heading h2 { font-family: var(--hand); font-size: clamp(40px, 4vw, 62px); line-height: 1.1; margin: 10px 0 0; letter-spacing: -.04em; }
.section-heading > p { font-family: var(--hand); font-weight: 700; font-size: 18px; color: #5a554e; line-height: 1.7; margin: 0 0 6px; }
.section-heading > button { border: 0; background: none; color: var(--blue); font-family: var(--hand); font-size: 18px; font-weight: 800; border-bottom: 2px solid var(--blue); padding: 4px 0; }

.customizer-shell { max-width: 1390px; margin: 0 auto; background: var(--paper); border: 2px solid var(--line); border-radius: 22px 18px 25px 17px; box-shadow: 9px 11px 0 rgba(23,23,20,.1); position: relative; z-index: 1; overflow: hidden; }
.stepper { height: 93px; display: flex; align-items: center; justify-content: center; padding: 0 36px; border-bottom: 2px solid var(--line); background: #fbf8f0; }
.stepper .step { border: 0; background: none; display: grid; grid-template-columns: 34px auto; grid-template-rows: 20px 18px; column-gap: 8px; text-align: left; min-width: 130px; padding: 0 5px; opacity: .48; transition: .2s; }
.stepper .step > span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 47% 53% 50% 45%; font-family: var(--hand); font-weight: 900; font-size: 17px; }
.stepper .step b { font-family: var(--hand); font-size: 17px; line-height: 1; }
.stepper .step small { color: var(--muted); font-size: 10px; }
.stepper .step.is-active, .stepper .step.is-done { opacity: 1; }
.stepper .step.is-active > span { background: var(--blue); color: white; border-color: var(--blue); transform: rotate(-7deg); }
.stepper .step.is-active b { color: var(--blue); }
.stepper .step.is-done > span { background: var(--ink); color: #fff; }
.stepper > i { height: 0; border-top: 2px dashed #9c978e; width: clamp(20px, 3.2vw, 52px); margin: 0 2px; }
.customizer-body { min-height: 690px; display: grid; grid-template-columns: minmax(480px, 1fr) minmax(480px, .86fr); }

.model-stage { border-right: 2px solid var(--line); display: flex; flex-direction: column; min-width: 0; background: #e9e1d4; }
.stage-topline { height: 57px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1.5px solid var(--line); font-family: var(--hand); font-weight: 800; }
.live-dot { display: inline-block; width: 8px; height: 8px; background: #60a758; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 3px rgba(96,167,88,.15); }
.stage-actions { display: flex; align-items: center; gap: 8px; }
.icon-action { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid var(--ink); background: #f7f2e8; border-radius: 9px 7px 10px 6px; padding: 6px 9px; font: 700 12px var(--hand); cursor: pointer; }
.icon-action:hover { background: white; transform: rotate(-1deg); }
.icon-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.canvas-wrap { position: relative; flex: 1; min-height: 545px; overflow: hidden; background: radial-gradient(circle at 48% 43%, #fcfaf4 0 18%, #eee7db 55%, #ded4c4 100%); }
.canvas-wrap::before { content: ""; position: absolute; width: 74%; height: 36%; border-radius: 50%; background: rgba(47,34,25,.1); filter: blur(23px); bottom: 10%; left: 13%; transform: rotate(-4deg); }
#collarCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#collarCanvas:active { cursor: grabbing; }
.canvas-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; transition: opacity .3s; }
.canvas-empty.is-hidden { opacity: 0; pointer-events: none; }
.canvas-empty span { width: 52px; height: 52px; border: 3px solid rgba(23,23,20,.2); border-top-color: var(--blue); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rotate-tip { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 7px 14px; border: 1.5px solid rgba(23,23,20,.7); border-radius: 20px 16px 19px 17px; background: rgba(247,242,232,.83); font: 700 12px var(--hand); pointer-events: none; }
.model-badge { position: absolute; top: 20px; right: 20px; width: 108px; padding: 9px 10px; border: 1.5px solid var(--ink); background: rgba(247,242,232,.83); transform: rotate(2deg); display: flex; align-items: center; gap: 8px; }
.model-badge b { color: var(--blue); font-size: 17px; }
.model-badge span { font: 700 10px/1.35 var(--hand); }
.live-specs { min-height: 86px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--line); background: #f7f2e8; }
.live-specs > div { padding: 14px 17px; border-right: 1px dashed #aaa398; display: flex; flex-direction: column; gap: 7px; }
.live-specs > div:last-child { border: 0; }
.live-specs span { font: 700 11px var(--hand); color: var(--muted); }
.live-specs b { font-family: var(--hand); font-size: 19px; }
.live-specs i { font-style: normal; }

.config-panel { min-width: 0; position: relative; padding-bottom: 81px; background: #fbf8f0; }
.panel-page { display: none; padding: 30px 36px 25px; animation: pageIn .25s ease; max-height: 610px; overflow-y: auto; scrollbar-width: thin; }
.panel-page.is-active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(7px); } }
.panel-title { margin-bottom: 24px; }
.panel-title h3 { font-family: var(--hand); font-size: 34px; line-height: 1.1; margin: 6px 0 5px; }
.panel-title p { margin: 0; color: var(--muted); font: 700 14px/1.5 var(--hand); }
.pet-type-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.pet-type { min-height: 95px; border: 1.7px solid var(--ink); border-radius: 12px 18px 11px 16px; background: #f6f0e5; display: grid; grid-template-columns: 88px auto; grid-template-rows: 1fr 1fr; text-align: left; align-items: end; padding: 8px 12px 9px 7px; overflow: hidden; position: relative; }
.pet-type.is-active { border: 3px solid var(--blue); background: #eef3ff; box-shadow: 3px 4px 0 rgba(21,88,214,.14); }
.pet-type.is-active::after { content: "✓"; position: absolute; right: 8px; top: 7px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; font-weight: 900; }
.pet-crop { grid-row: 1/3; width: 78px; height: 78px; border-radius: 50%; background-image: url('assets/hero-pets-four-v2.png'); background-size: 300px auto; border: 1.5px solid var(--ink); mix-blend-mode: multiply; }
.dog-crop { background-position: 88% 16%; }
.cat-crop { background-position: 56% 27%; }
.pet-type b { align-self: end; font: 900 21px var(--hand); }
.pet-type small { align-self: start; font: 700 11px var(--hand); color: var(--muted); }
.field { display: block; margin: 14px 0; }
.field > span { display: block; font: 800 14px var(--hand); margin: 0 0 7px 4px; }
.field > span small { color: var(--muted); font-weight: 500; }
.field input, .field select, .range-head input { width: 100%; height: 46px; border: 1.6px solid var(--ink); border-radius: 7px 10px 8px 6px; background: #fffdf7; padding: 0 13px; outline: 0; }
.field input:focus, .field select:focus, .range-head input:focus { border: 2.5px solid var(--blue); box-shadow: 3px 3px 0 rgba(21,88,214,.1); }
.input-wrap, .input-suffix { position: relative; }
.input-wrap input { padding-right: 58px; }
.input-wrap em, .input-suffix em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: normal 11px var(--body); color: #8d887f; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.input-suffix input { padding-right: 42px; }
.tip-card { display: flex; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--blue); border-radius: 11px 7px 13px 9px; background: rgba(21,88,214,.055); margin-top: 17px; }
.tip-card > span { color: var(--blue); font: 900 21px var(--hand); }
.tip-card p { display: flex; flex-direction: column; gap: 3px; margin: 0; }
.tip-card b { font: 800 13px var(--hand); }
.tip-card small { color: var(--muted); line-height: 1.45; }

.measure-card { border: 1.7px solid var(--ink); border-radius: 12px 9px 14px 8px; padding: 14px 17px 13px; background: #f7f2e8; }
.measure-dog { position: relative; height: 170px; margin-top: -3px; }
.measure-dog svg { width: 100%; height: 100%; }
.animal-line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.measure-line, .measure-arrow { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 4; }
.measure-arrow { stroke-dasharray: none; }
.measure-dog span { position: absolute; right: 8%; top: 27%; color: var(--blue); font: 800 13px var(--hand); transform: rotate(-3deg); }
.range-head { display: flex; align-items: center; justify-content: space-between; font: 800 14px var(--hand); }
.range-head b { display: flex; align-items: center; gap: 5px; font-size: 18px; }
.range-head input { width: 70px; height: 34px; text-align: center; padding: 0 5px; }
.hand-range { width: 100%; height: 20px; margin: 13px 0 4px; appearance: none; background: transparent; }
.hand-range::-webkit-slider-runnable-track { height: 7px; background: linear-gradient(90deg, var(--blue) var(--range-progress, 42%), #d5cec2 var(--range-progress, 42%)); border: 1.5px solid var(--ink); border-radius: 5px 8px 4px 7px; }
.hand-range::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; background: var(--paper); border: 3px solid var(--blue); border-radius: 48% 52% 46% 54%; margin-top: -8px; box-shadow: 1px 2px 0 var(--ink); }
.range-scale { display: flex; justify-content: space-between; color: var(--muted); font: 700 9px var(--hand); }
.size-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 15px 0 12px; }
.size-grid button { min-height: 61px; border: 1.5px solid var(--ink); background: #fffdf7; border-radius: 9px 6px 10px 8px; font-family: var(--hand); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.size-grid b { font-size: 21px; }
.size-grid span { font-size: 9px; color: var(--muted); }
.size-grid button.is-active { border: 3px solid var(--blue); color: var(--blue); transform: rotate(-2deg); background: #edf3ff; }
.size-result { display: flex; align-items: center; gap: 10px; background: #e7efd2; border: 1.5px solid #718635; padding: 10px 13px; border-radius: 9px 11px 8px 12px; }
.size-result > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: white; background: #718635; }
.size-result p { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.size-result small { font: 700 10px var(--hand); color: #657345; }
.size-result b { font: 900 14px var(--hand); }
.micro-note { font: 700 10px/1.5 var(--hand); color: var(--muted); margin: 9px 0 0; }

.product-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.product-tabs button { min-height: 114px; border: 1.5px solid var(--ink); background: #fffdf7; border-radius: 10px 7px 11px 9px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; }
.product-tabs button.is-active { border: 3px solid var(--blue); background: #edf3ff; transform: rotate(-1deg); }
.product-tabs b { font: 800 13px var(--hand); }
.product-tabs small { font-size: 9px; color: var(--muted); }
.product-orbit { width: 71px; height: 46px; border-radius: 50%; border: 9px solid var(--blue); transform: rotateX(59deg) rotateZ(-10deg); box-shadow: inset 0 0 0 2px #fff; }
.soft-product { border-color: #d99e6e; border-width: 7px; }
.leather-product { border-color: #654230; border-width: 10px; }
.choice-block { margin-top: 17px; }
.choice-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.choice-label b { font: 800 14px var(--hand); }
.choice-label span { color: var(--blue); font: 800 12px var(--hand); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row button { border: 1.5px solid var(--ink); background: #fffdf7; border-radius: 8px 6px 9px 7px; padding: 8px 12px; font: 700 12px var(--hand); }
.chip-row button.is-active { border: 2.5px solid var(--blue); color: var(--blue); background: #edf3ff; }
.swatch-row { display: flex; gap: 12px; align-items: center; }
.swatch-row button { width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 44% 56% 48% 52%; padding: 4px; background: var(--swatch); background-clip: content-box; }
.swatch-row button.is-active { outline: 3px solid var(--blue); outline-offset: 2px; transform: rotate(-8deg) scale(1.05); }
.pattern-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pattern-row button { border: 1.5px solid var(--ink); background: #fffdf7; padding: 5px 5px 7px; border-radius: 7px 9px 6px 10px; font: 700 10px var(--hand); }
.pattern-row button.is-active { border: 2.5px solid var(--blue); color: var(--blue); }
.pattern-sample { display: block; height: 25px; margin-bottom: 4px; border-radius: 4px; background-color: #1558d6; }
.pattern-sample.orbit { background-image: radial-gradient(circle, white 0 2px, transparent 3px), radial-gradient(circle, transparent 0 6px, rgba(255,255,255,.8) 7px 8px, transparent 9px); background-size: 25px 25px; }
.pattern-sample.check { background-image: conic-gradient(rgba(255,255,255,.45) 25%, transparent 0 50%, rgba(255,255,255,.45) 0 75%, transparent 0); background-size: 12px 12px; }
.pattern-sample.wave { background-image: repeating-linear-gradient(125deg, transparent 0 8px, rgba(255,255,255,.55) 9px 12px); }

.tag-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.tag-shapes button { border: 1.5px solid var(--ink); background: #fffdf7; min-height: 85px; border-radius: 8px 11px 7px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font: 700 11px var(--hand); }
.tag-shapes button.is-active { border: 3px solid var(--blue); color: var(--blue); background: #edf3ff; }
.tag-shapes i { display: grid; place-items: center; width: 37px; height: 37px; border: 2px solid currentColor; font-style: normal; }
.tag-shapes .round { border-radius: 50%; }
.tag-shapes .bone { border-radius: 17px 6px; transform: scaleX(1.25); border: 0; font-size: 38px; }
.tag-shapes .heart { border: 0; font-size: 42px; }
.tag-shapes .capsule { border-radius: 18px; width: 49px; }
.font-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.font-row button { min-height: 72px; border: 1.5px solid var(--ink); background: #fffdf7; border-radius: 8px 10px 7px 11px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; }
.font-row button.is-active { border: 3px solid var(--blue); background: #edf3ff; color: var(--blue); }
.font-row b { font-size: 22px; }
.font-row span { font: 700 10px var(--hand); }
.engrave-safe { border: 1.5px dashed #8b867e; margin-top: 20px; padding: 11px; border-radius: 8px; text-align: center; position: relative; }
.engrave-safe > span { position: absolute; left: 8px; top: -9px; background: #fbf8f0; padding: 0 5px; font: 700 9px var(--hand); color: var(--muted); }
.engrave-safe div { height: 54px; background: #48464c; border-radius: 6px; color: #f7e6ce; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.engrave-safe b { font: 800 20px var(--hand); }
.engrave-safe small { font-size: 8px; letter-spacing: .12em; }
.engrave-safe em { display: block; margin-top: 5px; color: var(--muted); font: normal 9px var(--hand); }

.result-card { border: 1.7px solid var(--ink); border-radius: 12px 8px 14px 9px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; background: #fffdf7; }
.result-visual { min-height: 285px; position: relative; overflow: hidden; background: #eee6da; }
.result-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 67% center; }
.tryon-band { display: none; position: absolute; left: 50%; top: 45%; width: 35%; height: 12%; transform: translate(-50%, -50%) rotate(-5deg); border: 8px solid var(--current-color, #1558d6); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.tryon-band span { position: absolute; left: 50%; bottom: -31px; transform: translateX(-50%); width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #777; color: #2c2a27; background: #dfdfdc; font: 800 8px var(--hand); box-shadow: 0 2px 3px rgba(0,0,0,.2); }
.result-visual.has-upload .tryon-band { display: block; }
.photo-upload { position: absolute; left: 12px; bottom: 12px; padding: 7px 11px; background: rgba(247,242,232,.9); border: 1.5px solid var(--ink); border-radius: 16px 13px 17px 14px; font: 700 10px var(--hand); cursor: pointer; }
.result-copy { padding: 20px 18px 14px; position: relative; }
.done-stamp { position: absolute; right: 8px; top: 10px; color: var(--orange); border: 2px solid var(--orange); border-radius: 50%; padding: 10px 7px; transform: rotate(12deg); font: 900 10px var(--hand); }
.result-copy h4 { font: 900 21px var(--hand); margin: 19px 0 12px; padding-right: 55px; }
.result-copy dl { margin: 0; }
.result-copy dl div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed #c7c0b6; font: 700 10px var(--hand); }
.result-copy dt { color: var(--muted); }
.result-copy dd { margin: 0; text-align: right; }
.result-total { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 12px; font: 700 12px var(--hand); }
.result-total b { color: var(--orange); font-size: 25px; }
.result-total i { font-style: normal; }
.checkout-actions { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10px; margin-top: 13px; }
.checkout-actions button { min-height: 49px; font: 800 15px var(--hand); }
.save-button { border: 1.7px solid var(--ink); background: #fffdf7; border-radius: 9px 7px 11px 8px; }
.wechat-button { border: 2px solid #e2572d; color: #fff; background: var(--orange); clip-path: polygon(1% 4%, 100% 0, 98% 96%, 3% 100%); box-shadow: 3px 4px 0 rgba(0,0,0,.14); }
.wechat-button span { font-size: 21px; }
.prototype-note { color: #8a7b70; font: 700 9px/1.5 var(--hand); text-align: center; margin: 10px 0 0; }

.panel-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 81px; border-top: 1.7px solid var(--ink); background: #f7f2e8; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 13px 30px; }
.back-button { border: 0; background: none; padding: 12px 16px; font: 800 15px var(--hand); }
.next-button { min-width: 205px; min-height: 49px; border: 2px solid #0e47b9; color: white; background: var(--blue); font: 800 16px var(--hand); clip-path: polygon(1% 5%, 100% 0, 98% 96%, 3% 100%); }
.next-button:hover { background: var(--blue-dark); }
.next-button span { margin-left: 10px; }

.product-showcase, .process-section, .help-section { padding: 100px clamp(22px, 5vw, 86px); border-bottom: 2px solid var(--line); }
.product-grid { max-width: 1390px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card { position: relative; border: 2px solid var(--line); border-radius: 18px 13px 21px 14px; padding: 22px 24px 24px; box-shadow: var(--shadow); background: #fffaf0; }
.product-card .tape { position: absolute; z-index: 2; right: 18px; top: 16px; padding: 5px 12px; background: #e8d79e; transform: rotate(5deg); font: 800 12px var(--hand); }
.product-art { height: 290px; display: grid; place-items: center; border-radius: 12px; overflow: hidden; }
.product-card.blue .product-art { background: #dbe7f3; }
.product-card.orange .product-art { background: #f3dfcf; }
.product-card.green .product-art { background: #e5ead2; }
.collar-art { width: 260px; height: 145px; border: 38px solid var(--blue); border-radius: 50%; transform: rotateX(61deg) rotateZ(-12deg); box-shadow: inset 0 0 0 5px #eee, 3px 9px 0 rgba(0,0,0,.17); position: relative; }
.collar-art::after { content: ""; position: absolute; width: 38px; height: 26px; border: 7px solid #d5d3cc; right: -49px; top: 20px; }
.tag-art { width: 136px; height: 136px; display: grid; place-items: center; border-radius: 50%; border: 8px double #6e6c68; background: linear-gradient(145deg,#f5f3eb,#aaa9a4); font: 900 25px var(--hand); box-shadow: 7px 10px 0 rgba(0,0,0,.13); position: relative; }
.tag-art::before { content: ""; position: absolute; top: -37px; width: 32px; height: 32px; border: 7px solid #767570; border-radius: 50%; }
.leash-art { width: 300px; height: 110px; border: 26px solid var(--lime); border-left-color: transparent; border-radius: 50%; transform: rotate(-14deg); position: relative; box-shadow: 8px 8px 0 rgba(0,0,0,.13); }
.leash-art::after { content: ""; position: absolute; width: 120px; height: 18px; background: var(--lime); right: -92px; bottom: -18px; transform: rotate(32deg); }
.product-card h3 { font: 900 26px var(--hand); margin: 20px 0 6px; }
.product-card p { font: 700 14px var(--hand); color: var(--muted); margin: 0 0 18px; }
.product-card > b { font: 900 19px var(--hand); color: var(--blue); }

.process-section { background: #1e1e1b; color: #f8f2e7; }
.process-section .kicker { color: #9cb9ff; }
.process-section .section-heading > p { color: #c4beb3; }
.process-list { max-width: 1390px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid #8c877e; }
.process-list li { min-height: 235px; padding: 28px; border-right: 1px dashed #77736c; position: relative; }
.process-list li:last-child { border: 0; }
.process-list li::after { content: "→"; position: absolute; right: -15px; top: 50%; z-index: 2; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #1e1e1b; color: #9cb9ff; font-family: var(--hand); }
.process-list li:last-child::after { display: none; }
.process-list span { display: block; color: #9cb9ff; font: 900 39px var(--hand); margin-bottom: 37px; transform: rotate(-5deg); }
.process-list b { font: 900 21px var(--hand); }
.process-list p { font: 700 13px/1.6 var(--hand); color: #bcb7ae; }

.inspiration { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 620px; border-bottom: 2px solid var(--line); }
.inspiration-photo { position: relative; overflow: hidden; border-right: 2px solid var(--line); }
.inspiration-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; }
.inspiration-photo span { position: absolute; right: 22px; bottom: 25px; background: var(--paper); border: 1.7px solid var(--ink); padding: 9px 15px; font: 800 13px var(--hand); transform: rotate(-2deg); }
.inspiration-copy { padding: 100px clamp(35px, 7vw, 120px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.inspiration-copy h2, .help-section h2 { font: 900 clamp(40px, 4vw, 61px)/1.18 var(--hand); margin: 16px 0 29px; }
.inspiration-copy p { max-width: 520px; font: 700 17px/1.9 var(--hand); color: var(--muted); }
.inspiration-copy button { border: 0; border-bottom: 2px solid var(--blue); color: var(--blue); background: none; padding: 5px 0; font: 900 18px var(--hand); margin-top: 15px; }

.help-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; background: #f0e7d9; }
.faq-list details { border-top: 1.7px solid var(--ink); padding: 20px 3px; }
.faq-list details:last-child { border-bottom: 1.7px solid var(--ink); }
.faq-list summary { list-style: none; font: 900 18px var(--hand); cursor: pointer; display: flex; justify-content: space-between; }
.faq-list summary::after { content: "+"; color: var(--blue); font-size: 24px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { margin: 13px 32px 0 0; color: var(--muted); font: 700 14px/1.7 var(--hand); }

footer { min-height: 230px; padding: 52px clamp(25px, 6vw, 96px); display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 12px 40px; background: var(--blue); color: white; }
.footer-brand { font: 900 28px var(--hand); }
.footer-brand span { color: #b6d650; margin: 0 8px; }
footer p { margin: 0; font: 700 15px var(--hand); opacity: .85; }
footer nav { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; gap: 27px; font: 700 14px var(--hand); }
footer small { grid-column: 1 / 3; margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.35); opacity: .65; }

.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 500; background: rgba(24,21,18,.56); display: grid; place-items: center; padding: 20px; }
.modal-card { width: min(430px, 100%); background: var(--paper); border: 2px solid var(--ink); border-radius: 19px 14px 22px 16px; box-shadow: 10px 11px 0 rgba(0,0,0,.2); text-align: center; padding: 34px 38px; position: relative; transform: rotate(-.5deg); }
.modal-close { position: absolute; right: 13px; top: 11px; border: 0; background: none; font: 900 25px var(--hand); }
.modal-paw { display: grid; place-items: center; margin: 0 auto 12px; width: 48px; height: 48px; border-radius: 50%; color: white; background: var(--blue); font-size: 27px; }
.modal-card h3 { font: 900 26px var(--hand); margin: 8px 0; }
.modal-card p { color: var(--muted); font: 700 14px/1.6 var(--hand); }
.design-code { margin: 20px 0; border: 1.5px dashed var(--ink); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.design-code span { color: var(--muted); font-size: 10px; }
.design-code b { font-size: 19px; letter-spacing: .13em; }
.modal-card .scribble-button { width: 100%; font-size: 17px; }
.modal-card > small { display: block; color: var(--muted); margin-top: 13px; font: 700 9px var(--hand); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 800; transform: translate(-50%, 30px); opacity: 0; background: #1c1c19; color: #fff; padding: 11px 18px; border-radius: 7px 10px 8px 12px; font: 700 13px var(--hand); transition: .25s; pointer-events: none; box-shadow: 4px 5px 0 rgba(0,0,0,.16); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1180px) {
  .main-nav a:nth-child(3), .main-nav a:nth-child(4) { display: none; }
  .hero { grid-template-columns: .9fr 1.1fr; }
  .hero-copy { padding-left: 118px; }
  .customizer-body { grid-template-columns: minmax(420px, .95fr) minmax(420px, 1fr); }
  .stepper .step { min-width: 110px; }
  .panel-page { padding-left: 25px; padding-right: 25px; }
}

@media (max-width: 900px) {
  .site-header { height: 72px; padding: 0 17px; }
  .brand { min-width: 0; }
  .brand-mark { width: 45px; }
  .brand small, .main-nav { display: none; }
  .header-actions { margin-left: auto; }
  .hero { height: auto; min-height: 0; grid-template-columns: 1fr; padding-bottom: 0; }
  .hero-rail { display: none; }
  .hero-copy { padding: 66px 24px 22px; }
  .hero h1 { font-size: clamp(50px, 14vw, 72px); }
  .hero-visual { height: 510px; }
  .hero-visual::before { top: 0; left: 0; right: 0; width: auto; height: 24%; background: linear-gradient(180deg, var(--paper), transparent); }
  .hero-visual img { object-position: 67% center; }
  .scroll-hint { display: none; }
  .note-dog { top: 15%; left: 4%; }
  .note-cat { display: none; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .studio-section { padding: 70px 12px 85px; }
  .customizer-shell { border-radius: 14px 11px 17px 12px; }
  .stepper { height: 74px; padding: 0 10px; justify-content: space-between; overflow: hidden; }
  .stepper .step { min-width: 54px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .stepper .step > span { width: 27px; height: 27px; }
  .stepper .step b { font-size: 12px; }
  .stepper .step small, .stepper > i { display: none; }
  .customizer-body { display: block; }
  .model-stage { border-right: 0; border-bottom: 2px solid var(--ink); }
  .canvas-wrap { min-height: 430px; }
  .config-panel { min-height: 660px; }
  .panel-page { max-height: none; overflow: visible; padding: 27px 20px 24px; }
  .panel-nav { position: sticky; bottom: 0; z-index: 3; }
  .product-grid, .process-list { grid-template-columns: 1fr; }
  .process-list li { min-height: 180px; border-right: 0; border-bottom: 1px dashed #77736c; }
  .process-list li::after { display: none; }
  .process-list span { margin-bottom: 20px; }
  .inspiration { grid-template-columns: 1fr; }
  .inspiration-photo { height: 480px; border-right: 0; border-bottom: 2px solid var(--ink); }
  .help-section { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero-visual { height: 390px; }
  .hero-proof { gap: 8px; font-size: 10px; }
  .hero-proof b { font-size: 13px; }
  .hero-copy > p { font-size: 18px; }
  .studio-heading p { display: none; }
  .stage-topline { padding: 0 10px; }
  .icon-action { font-size: 10px; padding: 5px; }
  .canvas-wrap { min-height: 330px; }
  .model-badge { width: 93px; right: 9px; top: 10px; }
  .live-specs > div { padding: 11px 7px; }
  .live-specs span { font-size: 8px; }
  .live-specs b { font-size: 14px; }
  .pet-type { grid-template-columns: 60px auto; }
  .pet-crop { width: 55px; height: 55px; background-size: 220px; }
  .pet-type b { font-size: 17px; }
  .product-tabs small { display: none; }
  .product-orbit { width: 58px; }
  .result-card { grid-template-columns: 1fr; }
  .result-visual { height: 260px; }
  .checkout-actions { grid-template-columns: 1fr; }
  .panel-nav { padding: 13px 15px; }
  .next-button { min-width: 175px; }
  .product-showcase, .process-section, .help-section { padding: 70px 18px; }
  .product-art { height: 230px; }
  .inspiration-copy { padding: 70px 24px; }
  footer { grid-template-columns: 1fr; }
  footer nav { grid-column: 1; grid-row: auto; margin-top: 14px; }
  footer small { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}