:root {
  --ink:#1c1830; --muted:#565165; --accent:#6542ad; --deep:#211735;
  --paper:#f5f2fa; --line:#e2dce9; scroll-behavior:smooth;
}
*,*::before,*::after { box-sizing:border-box }
body { margin:0; background:white; color:var(--ink); font:16px/1.65 system-ui,"Microsoft YaHei",sans-serif }
h1,h2,h3,p,dl,dd { margin:0 }
a { color:inherit; text-decoration:none }
button,textarea { font:inherit }
button,summary { cursor:pointer }
button:disabled { cursor:default; opacity:.55 }
img { display:block; max-width:100% }
[hidden] { display:none!important }
:focus-visible { outline:3px solid #7750ce; outline-offset:4px }
.skip { position:fixed; top:8px; left:8px; z-index:4; transform:translateY(-140%); padding:7px 12px; background:white }
.skip:focus { transform:none }
.wrap { width:min(1200px,calc(100% - 70px)); margin-inline:auto }
.header { position:sticky; top:0; z-index:3; background:white; border-bottom:1px solid var(--line) }
.mast,.footer { display:flex; justify-content:space-between; align-items:center; gap:18px }
.mast { min-height:72px }
.brand { display:flex; align-items:center; gap:9px; font-size:19px; line-height:1.16; white-space:nowrap }
.brand>span { width:37px; height:37px; display:grid; place-items:center; background:var(--deep); color:#d7c4ff; border-radius:9px }
.brand small { display:block; color:var(--muted); font-size:10px; margin-top:4px }
nav { display:flex; gap:clamp(15px,3vw,37px); font-size:14px; font-weight:750 }
nav a:hover,.footer a:hover { text-decoration:underline }
.header-action { background:var(--paper); padding:7px 12px; border-radius:6px; font-size:13px; font-weight:800; white-space:nowrap }
section[id] { scroll-margin-top:105px }
.hero { background:var(--paper); padding:43px 0 }
.hero-grid { display:grid; grid-template-columns:.97fr 1.03fr; gap:30px; align-items:center }
.eyebrow { color:var(--accent); letter-spacing:.145em; font-size:11px; font-weight:850 }
h1 { font-size:clamp(33px,4.7vw,67px); line-height:1.15; letter-spacing:-.055em; margin:11px 0 13px }
.hero-copy>p:not(.eyebrow) { color:var(--muted) }
.hero-art { height:auto; border-radius:18px }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px }
.button { display:inline-flex; gap:8px; align-items:center; justify-content:center; padding:8px 13px; min-height:43px; border-radius:6px; border:1px solid transparent; background:var(--deep); color:white; font-size:14px; font-weight:760 }
.button:not(:disabled):hover { background:#442d70 }
.button.ghost { color:var(--ink); border-color:#bbb0cd; background:transparent }
.button.ghost:not(:disabled):hover { background:#e8e0f5 }
.categories { background:var(--deep); color:white }
.categories-grid { display:grid; grid-template-columns:repeat(4,1fr) }
.categories a { display:grid; grid-template-columns:1fr auto; gap:2px 6px; padding:13px 16px; font-weight:800; border-left:1px solid #5b4a73 }
.categories a:last-child { border-right:1px solid #5b4a73 }
.categories a:hover { background:#3e2b60 }
.categories small { grid-column:1/-1; color:#d0b9ff; letter-spacing:.13em; font-size:9px }
.section { padding-block:54px }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:17px; margin-bottom:19px }
.section-head>p,.hint,.articles p,.contact p:not(.eyebrow) { color:var(--muted) }
h2 { font-size:clamp(27px,3.3vw,45px); letter-spacing:-.03em; line-height:1.22; margin-top:5px }
.filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px }
.filters button { background:white; border:1px solid var(--line); color:var(--ink); padding:6px 12px; border-radius:20px; font-size:14px; font-weight:730 }
.filters button[aria-pressed=true],.filters button:hover { background:#ece3fc; border-color:#8b6bc3 }
.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.product { overflow:hidden; border:1px solid var(--line); border-radius:10px; display:flex; flex-direction:column }
.product-art { display:grid; place-items:center; min-height:136px; background:radial-gradient(ellipse at center,#faf8ff,#e9e3f3); color:var(--device-color) }
.product-art svg { width:116px; height:102px; filter:drop-shadow(4px 9px 7px #392a532e) }
.product-body { padding:11px 12px 12px; flex:1; display:flex; flex-direction:column; align-items:flex-start }
.product-body small { color:var(--accent); font-size:11px; font-weight:800 }
.product-body h3 { font-size:17px; line-height:1.4; margin:2px 0 5px }
.product-body p { font-size:13px; color:var(--muted); margin-bottom:8px }
.card-actions { display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; margin-top:auto }
.card-actions button { background:transparent; border:0; padding:3px 0; font-size:12px; color:#573598; font-weight:800; text-align:left }
.card-actions button:hover { text-decoration:underline }
.card-actions button[aria-pressed=true] { color:#31563d }
.hint { font-size:12px; margin-top:9px }
.selection { background:var(--paper) }
#compare-status { font-weight:750; margin-bottom:8px; min-height:25px }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:6px }
table { border-collapse:collapse; width:100%; background:white; table-layout:fixed; font-size:14px }
th,td { text-align:left; padding:8px 10px; overflow-wrap:anywhere; border-bottom:1px solid var(--line) }
th:first-child { width:22% }
tbody tr:last-child>* { border-bottom:0 }
textarea { margin-top:9px; width:100%; color:var(--ink); padding:8px; border:1px solid var(--line) }
.articles { display:grid; gap:8px }
details { border:1px solid var(--line); border-radius:7px; padding:9px 13px }
summary { font-weight:760 }
.articles p { padding-top:6px }
.contact { background:#eee8f7 }
.contact-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:19px; align-items:center }
.contact h3 { font-size:22px }
.contact p:not(.eyebrow) { margin-top:6px }
.contact .button { margin-top:11px }
footer { background:var(--deep); color:white }
.footer { padding-block:18px; flex-wrap:wrap; font-size:13px }
.footer a { color:#dac5ff }
dialog { color:var(--ink); border:1px solid var(--line); border-radius:12px; width:min(500px,calc(100% - 30px)); padding:0 }
dialog::backdrop { background:#170e2fa8 }
.dialog-inner { padding:19px; position:relative }
.close { position:absolute; top:9px; right:9px; width:34px; height:34px; border:0; border-radius:5px; font-size:19px; background:var(--paper) }
.dialog-inner h2 { font-size:27px; margin-bottom:10px }
.dialog-inner dl { display:grid; gap:6px; margin-bottom:12px }
.dialog-inner dl div { background:var(--paper); padding:6px 9px }
dt { color:var(--accent); font-size:12px; font-weight:800 }
@media (max-width:820px) {
  .wrap { width:calc(100% - 32px) }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .hero-grid { grid-template-columns:1fr; gap:17px }
  .hero { padding-block:26px }
  .hero-art { width:min(100%,520px); max-height:280px; object-fit:contain }
  .section { padding-block:34px }
  .mast { min-height:0; flex-wrap:wrap; gap:5px 10px; padding-block:7px }
  nav { order:3; width:100%; justify-content:space-between; gap:5px; padding:5px 0; font-size:12px }
  .categories a { padding:9px 6px; font-size:12px }
  .categories small { letter-spacing:.02em; font-size:8px }
  .section-head { display:block }
  .section-head>p { margin-top:5px }
}
@media (max-width:510px) {
  .categories-grid,.contact-grid { grid-template-columns:repeat(2,1fr) }
  .categories a:nth-child(-n+2) { border-bottom:1px solid #5b4a73 }
  .categories a:nth-child(even) { border-right:1px solid #5b4a73 }
  .contact-grid { grid-template-columns:1fr }
  .product-body { padding:9px }
}
@media (prefers-reduced-motion:reduce) { :root { scroll-behavior:auto } }