:root {
  --bg: #050505;
  --panel: #0c0c0c;
  --panel-strong: #121212;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f4f2ec;
  --muted: #8f8d88;
  --gold: #cfb360;
  --gold-soft: #f1df9c;
  --cyan: #52d9ff;
  --radius: 22px;
  color-scheme: dark;
  font-family: "Avenir Next", "Segoe UI Variable", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { overflow-x: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.ambient {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  filter: blur(110px);
  opacity: 0.16;
  border-radius: 999px;
}
.ambient-one { width: 34rem; height: 34rem; top: -18rem; left: 12%; background: var(--gold); }
.ambient-two { width: 28rem; height: 28rem; top: 30rem; right: -18rem; background: #1e88b8; opacity: 0.11; }

.site-header, main, footer { position: relative; z-index: 1; }
.site-header {
  width: min(1420px, calc(100% - 48px));
  height: 88px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--gold);
  border: 1px solid rgba(207, 179, 96, 0.4);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(207, 179, 96, 0.15), rgba(255, 255, 255, 0.02));
}
.brand-mark svg { width: 27px; height: 27px; }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-family: Georgia, "Times New Roman", serif; font-size: 19px; letter-spacing: -0.03em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.site-header nav { display: flex; align-items: center; gap: 30px; font-size: 13px; color: #b8b6b0; }
.site-header nav a { transition: color 160ms ease; }
.site-header nav a:hover { color: white; }
.site-header .wickyx-link { padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }

main { width: min(1420px, calc(100% - 48px)); margin: 0 auto; }
.hero { min-height: 650px; padding: 120px 0 90px; display: grid; align-content: center; position: relative; }
.hero::after {
  content: "WX";
  position: absolute;
  right: 1%;
  top: 50%;
  translate: 0 -52%;
  font: 700 clamp(180px, 24vw, 390px)/0.8 Georgia, serif;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
  letter-spacing: -0.12em;
  pointer-events: none;
}
.eyebrow, .section-number { color: var(--gold); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; font-weight: 700; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 22px; height: 1px; background: var(--gold); }
.hero h1 { max-width: 870px; margin: 26px 0 22px; font: 500 clamp(52px, 7vw, 102px)/0.94 Georgia, "Times New Roman", serif; letter-spacing: -0.062em; }
.hero h1 em { color: var(--gold-soft); font-weight: 400; }
.hero > p { width: min(620px, 100%); color: #a7a49d; font-size: 17px; line-height: 1.75; }
.install-line { width: min(430px, 100%); margin-top: 30px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(255,255,255,.035); overflow: hidden; }
.install-line code { padding: 15px 17px; font-family: "Cascadia Code", "SFMono-Regular", monospace; font-size: 13px; color: #d7d3c9; }
.install-line button { align-self: stretch; padding: 0 18px; border: 0; border-left: 1px solid var(--line); background: rgba(207,179,96,.12); color: var(--gold-soft); cursor: pointer; }
.hero-stats { position: absolute; right: 0; bottom: 65px; margin: 0; display: flex; gap: 42px; }
.hero-stats div { min-width: 65px; }
.hero-stats dt { font: 500 28px/1 Georgia, serif; }
.hero-stats dd { margin: 7px 0 0; color: var(--muted); text-transform: uppercase; letter-spacing: .15em; font-size: 9px; }

.catalog-section { padding: 88px 0 120px; border-top: 1px solid var(--line); }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.catalog-heading h2, .platform-band h2 { margin: 13px 0 0; font: 500 clamp(34px, 4vw, 58px)/1 Georgia, serif; letter-spacing: -.04em; }
.catalog-heading > p { color: var(--muted); font-size: 13px; }
.toolbar { position: sticky; top: 12px; z-index: 5; display: grid; grid-template-columns: minmax(280px, 1fr) auto minmax(190px, 260px); gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,10,10,.82); backdrop-filter: blur(20px); box-shadow: 0 18px 60px rgba(0,0,0,.38); }
.search-field { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 0 14px; border-radius: 11px; background: rgba(255,255,255,.045); }
.search-field > span { color: var(--gold); font-size: 24px; rotate: -15deg; }
.search-field input { width: 100%; min-width: 0; height: 48px; border: 0; outline: 0; background: transparent; color: var(--text); }
.search-field input::placeholder { color: #6e6c68; }
kbd { min-width: 24px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 6px; color: #77746e; background: #111; text-align: center; font: 10px "Cascadia Code", monospace; }
.control-group { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 11px; background: rgba(255,255,255,.045); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.control-group input[type="color"] { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; overflow: hidden; cursor: pointer; }
.size-control { display: grid; grid-template-columns: auto 1fr; }
.size-control label { white-space: nowrap; }
.size-control output { color: var(--text); }
.size-control input { accent-color: var(--gold); }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 20px 0 25px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .variant-tabs button, .code-tabs button { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.chips button { padding: 10px 15px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.chips button[aria-pressed="true"], .variant-tabs button[aria-pressed="true"], .code-tabs button[aria-selected="true"] { border-color: rgba(207,179,96,.52); background: rgba(207,179,96,.12); color: var(--gold-soft); }
.select-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.select-control select { padding: 9px 32px 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); outline: none; }

.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; }
.icon-card { min-width: 0; min-height: 185px; padding: 17px; display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(150deg, rgba(255,255,255,.036), rgba(255,255,255,.012)); cursor: pointer; text-align: left; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.icon-card:hover { transform: translateY(-3px); border-color: rgba(207,179,96,.38); background: linear-gradient(150deg, rgba(207,179,96,.075), rgba(255,255,255,.018)); }
.icon-visual { height: 102px; display: grid; place-items: center; color: var(--preview-color, #f4f2ec); --wx-icon-ink: #050505; border-radius: 12px; background: rgba(255,255,255,.028); }
.icon-visual svg { max-width: 72px; max-height: 72px; }
.icon-card h3 { margin: 14px 0 0; overflow: hidden; color: #e9e6df; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; color: #6f6d68; font: 10px "Cascadia Code", monospace; }
.card-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta b { color: var(--gold); font-weight: 500; }
.empty-state { padding: 90px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius); text-align: center; }
.empty-state > span { display: block; color: var(--gold); font: 64px Georgia, serif; }
.empty-state h3 { margin: 12px 0 7px; font: 28px Georgia, serif; }
.empty-state p { color: var(--muted); }
.empty-state button { margin-top: 10px; padding: 11px 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-strong); cursor: pointer; }

.platform-band { padding: 100px 0 120px; display: grid; grid-template-columns: .9fr 1.25fr; gap: 80px; border-top: 1px solid var(--line); }
.platform-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.platform-list article { min-height: 250px; padding: 28px; background: var(--bg); }
.platform-list span { color: var(--gold); font: 9px "Cascadia Code", monospace; letter-spacing: .18em; }
.platform-list h3 { margin: 46px 0 12px; font: 25px Georgia, serif; }
.platform-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

footer { width: min(1420px, calc(100% - 48px)); margin: 0 auto; padding: 35px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.footer-brand .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
.footer-brand .brand-mark svg { width: 20px; height: 20px; }
footer strong { color: var(--text); font-family: Georgia, serif; }
footer > div { display: flex; gap: 20px; }
footer a:hover { color: var(--text); }

.icon-dialog { width: min(920px, calc(100% - 28px)); max-height: min(780px, calc(100vh - 28px)); padding: 0; border: 1px solid var(--line-strong); border-radius: 24px; background: #080808; color: var(--text); box-shadow: 0 40px 130px rgba(0,0,0,.85); overflow: hidden; }
.icon-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(9px); }
.dialog-shell { display: grid; grid-template-columns: minmax(290px, .82fr) 1.18fr; min-height: 620px; position: relative; }
.dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(0,0,0,.55); font-size: 24px; cursor: pointer; }
.dialog-preview-wrap { display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(207,179,96,.16), transparent 55%), #0e0e0e; border-right: 1px solid var(--line); }
.dialog-preview { display: grid; place-items: center; width: 190px; height: 190px; color: var(--preview-color, #f4f2ec); --wx-icon-ink: #050505; }
.dialog-preview svg { width: 128px; height: 128px; }
.dialog-content { min-width: 0; padding: 52px 38px 34px; overflow-y: auto; }
.dialog-group { color: var(--gold); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.dialog-content h2 { margin: 10px 0 8px; font: 34px/1.05 Georgia, serif; overflow-wrap: anywhere; }
.figma-name { color: var(--muted); font-size: 11px; }
.variant-tabs, .code-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.variant-tabs { margin: 24px 0; }
.variant-tabs button { padding: 8px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.code-tabs { margin-top: 5px; }
.code-tabs button { padding: 7px 11px; font-size: 10px; }
.code-block { position: relative; margin-top: 9px; border: 1px solid var(--line); border-radius: 13px; background: #030303; overflow: hidden; }
.code-block pre { min-height: 88px; margin: 0; padding: 18px 64px 18px 17px; overflow-x: auto; color: #d8d3c8; font: 11px/1.65 "Cascadia Code", monospace; white-space: pre-wrap; word-break: break-word; }
.code-block button { position: absolute; top: 9px; right: 9px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #111; color: var(--muted); font-size: 10px; cursor: pointer; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.dialog-actions button { min-height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-strong); cursor: pointer; }
.dialog-actions .primary-action { border-color: rgba(207,179,96,.5); background: var(--gold); color: #090805; font-weight: 700; }
.icon-meta { margin: 25px 0 0; border-top: 1px solid var(--line); }
.icon-meta div { padding: 12px 0; display: grid; grid-template-columns: 70px 1fr; gap: 12px; border-bottom: 1px solid var(--line); }
.icon-meta dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.icon-meta dd { margin: 0; color: #c3c0b8; font-size: 11px; line-height: 1.5; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 28px; translate: -50% 20px; padding: 11px 17px; border: 1px solid rgba(207,179,96,.35); border-radius: 999px; background: #19170f; color: var(--gold-soft); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity 160ms ease, translate 160ms ease; }
.toast.visible { opacity: 1; translate: -50% 0; }
.clipboard-fallback { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 900px) {
  .hero { min-height: 590px; padding-top: 90px; }
  .hero::after { opacity: .5; }
  .hero-stats { position: static; margin-top: 55px; }
  .toolbar { grid-template-columns: 1fr auto; }
  .size-control { display: none; }
  .platform-band { grid-template-columns: 1fr; gap: 50px; }
  .dialog-shell { grid-template-columns: 1fr; }
  .dialog-preview-wrap { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dialog-preview { width: 150px; height: 150px; }
  .dialog-preview svg { width: 100px; height: 100px; }
}

@media (max-width: 640px) {
  .site-header, main, footer { width: min(100% - 28px, 1420px); }
  .site-header { height: 72px; }
  .site-header nav a:not(.wickyx-link) { display: none; }
  .site-header .wickyx-link { font-size: 11px; }
  .hero { min-height: auto; padding: 82px 0 72px; }
  .hero h1 { font-size: clamp(44px, 14vw, 62px); }
  .hero > p { font-size: 15px; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .catalog-section { padding-top: 64px; }
  .catalog-heading { align-items: start; flex-direction: column; }
  .toolbar { top: 7px; grid-template-columns: 1fr 54px; }
  .control-group { justify-content: center; padding: 0; }
  .control-group label { display: none; }
  .filter-row { align-items: flex-start; flex-direction: column; }
  .icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .icon-card { min-height: 165px; padding: 11px; }
  .icon-visual { height: 92px; }
  .icon-card h3 { font-size: 11px; }
  .card-meta { font-size: 8px; }
  .platform-list { grid-template-columns: 1fr; }
  .platform-list article { min-height: 190px; }
  .platform-list h3 { margin-top: 28px; }
  footer { align-items: flex-start; flex-direction: column; }
  footer > p { display: none; }
  .icon-dialog { max-height: calc(100dvh - 16px); }
  .dialog-shell { display: block; min-height: 0; max-height: calc(100dvh - 16px); overflow-y: auto; }
  .dialog-preview-wrap { min-height: 190px; }
  .dialog-content { padding: 30px 20px 24px; overflow: visible; }
  .dialog-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}