:root {
  --color-brand-primary: #ff1f50;
  --color-brand-primary-active: #d9173f;
  --color-brand-primary-bg: #fff4f6;
  --color-brand-primary-light: #ffd2dc;
  --color-text-primary: #1c1c1e;
  --color-text-secondary: #49494b;
  --color-text-tertiary: #717481;
  --color-text-inverse: #fff;
  --color-bg-page: #fff;
  --color-bg-app: #f2f2f7;
  --color-bg-muted: #f5f5f7;
  --color-border-default: #e4e4e8;
  --color-warning-text: #87500c;
  --color-warning-light: #fff5e6;
  --color-success: #25835a;
  --color-mask: rgba(28,28,30,.46);
  --color-shadow: rgba(28,28,30,.08);
  --color-transparent: transparent;
  --brand-red: var(--color-brand-primary);
  --brand-red-bg: var(--color-brand-primary-bg);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --spacing-sm: 8px;
  --spacing-base: 16px;
  --spacing-lg: 24px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;
}
html {scroll-behavior: smooth; background: var(--color-bg-app)}
body {max-width: 430px; margin: 0 auto; color: var(--color-text-primary); background: var(--color-bg-app); padding-bottom: 128px; font-size: 14px}
button,input {font: inherit; color: inherit}
button {cursor: pointer; -webkit-tap-highlight-color: transparent}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {outline: 3px solid var(--color-brand-primary); outline-offset: 3px}
button:disabled {cursor: not-allowed}
button:active:not(:disabled) {opacity: .75}
[hidden] {display: none!important}
.nav {position: sticky; top: 0; z-index: 4; height: 56px; background: var(--color-brand-primary); font-weight: 600}
.nav-back,.nav-more {border: 0; background: none; color: inherit; min-width: 44px; height: 44px; font-size: 24px; display:flex; align-items:center; justify-content:center; text-decoration:none}
.card {margin: 12px 12px 0; padding: 20px 16px; border-radius: var(--radius-lg); background: var(--color-bg-page)}
.card-title {font-size: 16px; margin-bottom: 16px; color: var(--color-text-primary)}
.muted {color: var(--color-text-tertiary)}
.row-between {display:flex; justify-content:space-between; align-items:center; gap:8px}
.demo-panel {padding: 16px; background: var(--color-bg-app)}
.demo-kicker {font-size:14px; letter-spacing: 2px; color:var(--color-text-tertiary); margin-bottom:16px}
.demo-panel h1 {font-size:32px; line-height:1.3; letter-spacing:-1px; margin-bottom:16px}
.demo-intro {line-height:1.8; color:var(--color-text-tertiary); margin-bottom:24px}
.scheme-tabs {display:flex; padding:4px; background:var(--color-border-default); border-radius:var(--radius-full); gap:4px}
.scheme-tabs button {flex:1; min-height:44px; border:0; border-radius:var(--radius-full); background:none; white-space:nowrap}
.scheme-tabs button[aria-pressed=true] {background:var(--color-bg-page); box-shadow:0 2px 6px var(--color-shadow); font-weight:600}
.review-notes {display:none}
.review-notes h2 {font-size:16px; margin-bottom:24px}
.review-note {margin-bottom:24px; padding-left:16px; border-left:2px solid var(--color-border-default)}
.review-note b {display:block; margin-bottom:8px}
.review-note p {color:var(--color-text-tertiary); line-height:1.8}
.review-note.active {border-color:var(--color-brand-primary)}
.channel-guide {margin-top:24px}
.price-reference table {width:100%; border-collapse:collapse; margin:12px 0 16px; font-size:14px; font-variant-numeric:tabular-nums}
.price-reference caption {text-align:left; font-weight:500; padding-bottom:8px}
.price-reference th,.price-reference td {padding:6px 0; text-align:right; white-space:nowrap; border-bottom:1px solid var(--color-border-default); font-weight:400}
.price-reference th:first-child {text-align:left}
.price-reference thead th {color:var(--color-text-tertiary)}
.brand-caption {display:flex; align-items:center; gap:8px; color:var(--color-text-tertiary); margin:24px 16px 0}
.brand-caption:before {content:''; width:20px; height:2px; background:var(--color-brand-primary)}
.area-card {padding:16px}
.area-card summary {min-height:44px; cursor:pointer; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:8px}
.area-card summary span {font-weight:400; color:var(--color-text-tertiary)}
.area-card .area-grid {margin-top:12px}
.area-item {min-height:44px; background:var(--color-bg-page); font-size:14px; border-radius:8px}
.camera-row {display:flex; align-items:center; justify-content:space-between; gap:8px}
.camera-label {display:flex; align-items:center; gap:12px}
.camera-label svg {color:var(--color-text-tertiary); flex-shrink:0}
.camera-label strong {display:block; font-weight:500}
.camera-label small {display:block; font-size:14px; margin-top:4px; color:var(--color-text-tertiary)}
.channel-input {display:flex; align-items:center; border:1px solid var(--color-border-default); border-radius:12px; overflow:hidden; flex-shrink:0}
.channel-input button {width:44px; height:44px; border:0; background:var(--color-bg-page); font-size:20px}
.channel-input input {width:38px; height:44px; border:0; text-align:center; appearance:textfield; -moz-appearance:textfield; background:var(--color-bg-page)}
.channel-input input::-webkit-inner-spin-button {appearance:none}
.channel-input button:disabled {color:var(--color-text-tertiary); opacity:.35}
.camera-rule {margin-top:16px; color:var(--color-text-tertiary); line-height:1.6}
.quick-label {font-size:14px; color:var(--color-text-tertiary); margin:24px 0 8px}
.quick-channels {display:flex; flex-wrap:wrap; gap:8px}
.quick-channels button {background:var(--color-bg-page); border:1px solid var(--color-border-default); border-radius:var(--radius-full); padding:0 14px; min-height:44px}
.quick-channels button[aria-pressed=true] {border-color:var(--color-brand-primary); color:var(--color-brand-primary)}
#host-section {scroll-margin-top:68px}
.section-heading {margin-bottom:16px}
.section-heading h2 {font-size:18px; margin:0 0 8px}
.section-heading p {color:var(--color-text-tertiary); line-height:1.6}
.count-chip {display:inline-flex; color:var(--color-text-secondary); background:var(--color-bg-muted); padding:4px 10px; border-radius:var(--radius-full); font-size:14px; font-weight:400}
.family-grid {display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px}
.family-option {display:flex; flex-direction:column; align-items:flex-start; text-align:left; position:relative; border:1px solid var(--color-border-default); border-radius:var(--radius-md); padding:16px 12px; background:var(--color-bg-page); min-height:170px}
.family-option[aria-checked=true],.sku-option[aria-checked=true] {border-color:var(--color-brand-primary); background:var(--color-brand-primary-bg); box-shadow:inset 0 0 0 .5px var(--color-brand-primary)}
.family-option:disabled {background:var(--color-bg-muted); color:var(--color-text-tertiary); box-shadow:none; border-color:var(--color-border-default)}
.family-option strong {font-size:16px; margin:12px 0 4px; font-weight:600}
.family-option p {font-size:14px; color:var(--color-text-tertiary); line-height:1.5; min-height:21px; white-space:nowrap}
.family-option .from-price {margin-top:12px; font-size:16px; font-weight:600}
.family-option .from-price small {font-size:14px; font-weight:400; margin-left:4px}
.hub-icon {width:40px; height:32px; color:var(--color-text-secondary)}
.family-option[aria-checked=true] .hub-icon {color:var(--color-brand-primary)}
.radio-dot {position:absolute; right:12px; top:16px; width:18px; height:18px; border:1.5px solid var(--color-border-default); border-radius:50%; background:var(--color-bg-page)}
[aria-checked=true]>.radio-dot {border:5px solid var(--color-brand-primary)}
.ai-value {padding:16px; background:var(--color-bg-muted); border-radius:var(--radius-md); margin-bottom:24px}
.ai-value .eyebrow {display:flex; align-items:center; gap:8px; color:var(--color-text-secondary); font-size:14px; margin-bottom:8px}
.ai-value .eyebrow svg {width:18px; height:18px}
.ai-value h3 {font-size:16px; margin:0 0 8px; line-height:1.5}
.ai-value p {font-size:14px; line-height:1.7; color:var(--color-text-tertiary)}
.ai-value .capabilities {display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.capabilities span {font-size:14px; padding:4px 8px; background:var(--color-bg-page); border-radius:8px}
.text-action {border:0; background:var(--color-transparent); color:var(--color-text-secondary); min-height:44px; padding:0; display:inline-flex; align-items:center; gap:6px; text-decoration:underline; text-underline-offset:4px}
.storage-heading {margin-bottom:12px}
.storage-heading h3 {font-size:16px}
.storage-heading p {font-size:14px; color:var(--color-text-tertiary); margin-top:4px}
.sku-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.sku-option {position:relative; text-align:left; background:var(--color-bg-page); border:1px solid var(--color-border-default); border-radius:var(--radius-md); padding:16px 12px; min-height:112px; display:flex; flex-direction:column; align-items:flex-start}
.sku-option strong {font-size:18px; margin-bottom:4px}
.sku-option .sku-sub {font-size:14px; color:var(--color-text-tertiary); margin-top:4px; line-height:1.5}
.sku-option .sku-price {font-size:20px; font-weight:600; margin-top:8px; letter-spacing:-.5px}
.sku-option:disabled {background:var(--color-bg-muted); border-color:var(--color-border-default); color:var(--color-text-tertiary)}
.sku-option:disabled {opacity:.5; box-shadow:none}
.compact-sku {min-height:94px; padding:10px 12px}
.compact-sku strong {font-size:16px; margin-bottom:0}
.compact-sku .sku-price {font-size:18px; margin-top:2px}
.compact-sku .sku-sub {margin-top:2px}
.compact-sku .radio-dot {top:12px}
.capacity-group {margin-top:20px}
.capacity-label {display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px}
.capacity-label strong {font-size:16px}
.capacity-label span {font-size:14px; color:var(--color-text-tertiary)}
.compare-grid .sku-option strong {font-size:15px; margin-top:28px}
.compare-grid .sku-option .radio-dot {top:14px}
.compare-grid .sku-option .pill {font-size:14px; color:var(--color-brand-primary); position:absolute; top:12px; left:12px}
.compare-grid .sku-option .pill.base {color:var(--color-text-tertiary)}
.compare-intro {padding:16px; background:var(--color-bg-muted); border-radius:var(--radius-md); margin-top:4px; color:var(--color-text-secondary); line-height:1.7}
.compare-intro b {color:var(--color-text-primary)}
.selection-summary {margin-top:24px; border-top:1px solid var(--color-border-default); padding-top:16px; line-height:1.7}
.selection-summary .summary-label {color:var(--color-text-tertiary); margin-bottom:4px}
.selection-summary strong {display:block; font-size:15px}
.selected-product {display:flex; justify-content:space-between; align-items:center; gap:8px}
.selected-product strong {min-width:0; flex:1}
.selected-description {min-width:0; flex:1}
.selected-amount {font-size:14px; color:var(--color-text-tertiary); margin-top:4px; font-weight:400}
.quantity-disabled {display:flex; align-items:center; border:1px solid var(--color-border-default); border-radius:10px; overflow:hidden; flex-shrink:0; color:var(--color-text-tertiary); background:var(--color-bg-muted)}
.quantity-disabled button {border:0; width:30px; height:44px; background:var(--color-transparent); color:var(--color-text-tertiary); opacity:.45; font-size:18px}
.quantity-disabled input {border:0; width:24px; height:44px; text-align:center; background:var(--color-transparent); color:var(--color-text-secondary); opacity:1; -webkit-text-fill-color:var(--color-text-secondary); appearance:textfield; -moz-appearance:textfield}
.quantity-disabled input::-webkit-inner-spin-button {appearance:none}
.storage-desc,.storage-price,.product-price,.slider-label,.delivery-qty {font-size:14px}
.qty-btn {width:44px; height:44px; background:var(--color-bg-page); border-radius:12px}
.qty-control {gap:4px}
.qty-num {min-width:20px}
.storage-item {text-align:left; font:inherit; background:var(--color-bg-page); min-height:88px; border-radius:16px}
.product-name {font-size:15px}
.other-configs {margin:12px}
.other-configs>summary {min-height:56px; cursor:pointer; padding:16px; border:1px solid var(--color-border-default); border-radius:16px; color:var(--color-text-secondary)}
.other-configs .card {margin:12px 0 0}
.other-configs .product-row {gap:8px; flex-wrap:wrap}
.other-configs .product-img {width:40px; height:40px}
.other-configs .card>div[style] {font-size:14px!important}
.bottom-bar {position:fixed; left:50%; transform:translateX(-50%); width:min(100%,430px); padding:12px 16px calc(16px + env(safe-area-inset-bottom)); background:var(--color-bg-page); border-top:1px solid var(--color-border-default); z-index:5; gap:12px}
.bottom-bar .price-label {font-size:14px; color:var(--color-text-secondary)}
.bottom-bar .price-value {font-size:25px; letter-spacing:-1px; color:var(--color-text-primary)}
.bottom-bar .price-detail {font-size:14px; line-height:1.6; color:var(--color-text-tertiary); max-width:200px}
.pay-btn {height:56px; padding:0 20px; white-space:nowrap; font-size:16px; border-radius:var(--radius-full); background:var(--color-brand-primary); color:var(--color-text-inverse)}
.pay-btn:disabled {background:var(--color-bg-muted); color:var(--color-text-tertiary)}
.host-dialog {width:calc(100% - 32px); max-width:398px; margin:auto; border:0; padding:24px; border-radius:var(--radius-lg); color:var(--color-text-primary); box-shadow:0 24px 80px var(--color-shadow)}
.host-dialog::backdrop {background:var(--color-mask)}
.host-dialog h2 {font-size:20px; margin:0 0 16px}
.host-dialog p {line-height:1.8; margin-bottom:12px; color:var(--color-text-secondary)}
.host-dialog dl {background:var(--color-bg-muted); border-radius:16px; padding:16px; margin-bottom:16px}
.host-dialog dl div {display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; align-items:flex-start}
.host-dialog dl div:last-child {margin:0}
.host-dialog dt {flex-shrink:0; color:var(--color-text-tertiary)}
.host-dialog dd {text-align:right}
.dialog-close {width:100%; border:0; height:50px; border-radius:var(--radius-full); background:var(--color-brand-primary); color:var(--color-text-inverse); margin-top:8px}
.dialog-example {border-left:2px solid var(--color-brand-primary); padding-left:12px; margin:16px 0}
.dialog-footnote {font-size:14px; color:var(--color-text-tertiary)}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media(min-width:1100px) {
  body {margin-top:32px; box-shadow:0 0 0 1px var(--color-border-default); border-radius:24px 24px 0 0}
  .nav {border-radius:24px 24px 0 0}
  .demo-panel {position:fixed; width:260px; right:calc(50% + 259px); top:64px; padding:0; max-height:calc(100vh - 96px); overflow:auto}
  .review-notes {display:block; position:fixed; left:calc(50% + 259px); top:88px; width:230px}
  .brand-caption {margin-top:24px}
}
@media(max-width:1099px) {
  .demo-panel {padding:12px; position:relative}
  .demo-kicker,.demo-panel h1,.demo-intro,.channel-guide,.quick-label,.quick-channels {display:none}
  .brand-caption {margin-top:16px}
}
@media(max-width:370px) {
  .card {margin:8px 8px 0; padding:16px 12px}
  .channel-input button {width:44px}
  .camera-label {gap:6px}
  .camera-label svg {width:24px}
  .camera-label small {font-size:14px; max-width:150px}
  .bottom-bar {padding-left:12px; padding-right:12px; gap:8px}
  .pay-btn {padding:0 12px; font-size:14px}
  .family-grid,.sku-grid {gap:8px}
  .family-grid {grid-template-columns:1fr}
  .family-option {min-height:140px}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}}