:root {
  --paper: #ebeae9;
  --ink: #231815;
  --muted: #76736e;
  --blue: #31a5ce;
  --white: #fff;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input { font: inherit; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
.page-shell { width: min(100%, 440px); margin: 0 auto; padding: env(safe-area-inset-top) 0 calc(24px + env(safe-area-inset-bottom)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.preview-notice { margin: 0; padding: 10px 16px; color: #246277; background: #dfedf0; font: 12px/1.6 "PingFang SC", sans-serif; text-align: center; }
.artboard { position: relative; width: 100%; aspect-ratio: 267 / 610; overflow: hidden; }
.home-art { display: block; width: 100%; height: auto; }
.art-input { position: absolute; left: 17.5%; width: 66.5%; height: 4.6%; padding: 0 3px; border: 0; border-radius: 0; color: var(--ink); background: transparent; font-family: "PingFang SC", sans-serif; font-size: clamp(13px, 3.6vw, 16px); }
.art-input::placeholder { color: #aaa6a1; font-size: .85em; }
.name-input { top: 46.3%; }
.phone-input { top: 55.1%; }
.art-input:focus, .art-input:focus-visible { outline: none; box-shadow: none; background: transparent; }
.channels { position: absolute; top: 63.5%; left: 16.5%; width: 69%; height: 8.5%; display: grid; grid-template-columns: 1.35fr 1fr; align-content: center; gap: 5px 6px; margin: 0; padding: 0; border: 0; font-size: clamp(12px, 3.3vw, 15px); }
.channels label { display: flex; align-items: center; gap: 5px; min-height: 30px; cursor: pointer; }
.channels input, .consent input { width: 15px; height: 15px; flex: 0 0 15px; margin: 0; accent-color: var(--ink); }
.form-actions { padding: 3px 12% 15px; text-align: center; }
.consent { display: flex; align-items: flex-start; gap: 7px; text-align: left; font-family: "PingFang SC", sans-serif; font-size: 11px; line-height: 1.65; color: var(--muted); cursor: pointer; }
.consent input { margin-top: 2px; }
.form-message { margin: 8px 0; color: #a3392a; font: 12px/1.6 "PingFang SC", sans-serif; }
.form-message:empty { margin: 0; min-height: 12px; }
.submit-button { display: inline-grid; place-items: center; width: 140px; min-height: 49px; padding: 0; border: 0; background: transparent; }
.submit-button img { display: block; width: 100%; height: auto; }
.submit-button:hover { transform: rotate(-1deg); }
.submit-button:disabled { cursor: wait; opacity: .6; }
.busy-label { display: block; font-size: 16px; }
.submit-button.busy img { display: none; }
button:focus-visible, input:not(.art-input):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.gift-art, .success-art { display: block; width: 100%; height: auto; }
.result { padding-top: 32px; text-align: center; }
.result:focus { outline: none; }
.success-note { padding: 0 12%; margin: 10px 0 20px; color: var(--muted); font: 13px/1.8 "PingFang SC", sans-serif; }
.back-button { min-height: 44px; margin: 24px 0 10px; padding: 8px 24px; border: 1px solid var(--ink); border-radius: 2px 5px 3px 4px; color: var(--ink); background: var(--white); font-size: 15px; }
footer { padding: 20px 16px 0; text-align: center; color: var(--muted); font: 11px/1.6 "PingFang SC", sans-serif; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.qr-image { position: absolute; top: 84.6%; width: 23%; height: 9.5%; object-fit: contain; background: #fff; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; touch-action: auto; }
.artist-qr { left: 15.5%; }
.studio-qr { left: 45%; }

.other-channel { position: absolute; top: 73.2%; left: 16.5%; width: 67.5%; height: 3.6%; display: flex; align-items: center; gap: 3px; font-size: clamp(12px, 3.3vw, 15px); }
.other-channel label:not(.sr-only) { display: flex; align-items: center; flex: 0 0 auto; gap: 5px; cursor: pointer; }
.other-channel input[type="radio"] { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); }
.other-channel .art-input { position: static; flex: 1; width: 0; min-width: 0; height: 100%; padding: 0 2px; }