.sh-site {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper);
  --ink: #19364c;
  --muted: #496173;
  --paper: #fcfdfe;
  --white: #ffffff;
  --mist: #e3eef5;
  --blue: #254e6c;
  --indigo: #132f46;
  --gold: #b69358;
  --gold-light: #eed5a4;
  --line: #d4e1e9;
  --glaze: linear-gradient(145deg, #345f7a, #193e59 60%, #132f46);
  --pale-glaze: linear-gradient(150deg, #fafcfe 6%, #e6f0f7 52%, #cfdfeb);
  color: var(--ink);
  font: 15px/1.55 system-ui, "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
.sh-site * { box-sizing: border-box; }
.sh-site [hidden] { display: none !important; }
.sh-site h1, .sh-site h2, .sh-site h3, .sh-site p { margin: 0; color: inherit; }
.sh-site button, .sh-site a { font: inherit; }
.sh-site button, .sh-site summary { min-height: 44px; }
.sh-site .sh-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 4px 28px; padding: 8px clamp(16px, 4vw, 44px);
  background: linear-gradient(108deg, #183a53, #132f46 67%, #224962);
  border-bottom: 2px solid var(--gold); color: #f5f9fc;
}
.sh-site a.sh-brand {
  display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0;
  background: transparent; color: inherit; font-size: 21px; font-weight: 750;
}
.sh-site a.sh-brand:hover { background: transparent; color: var(--gold-light); }
.sh-site .sh-brand img { display: block; border-radius: 9px; }
.sh-site .sh-nav, .sh-site .sh-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sh-site button {
  padding: 7px 13px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 9px; font-weight: 600;
}
.sh-site button:hover:not(:disabled) { background: var(--mist); }
.sh-site button[aria-pressed="true"] { background: var(--mist); border-color: var(--gold); }
.sh-site button:disabled { opacity: .48; }
.sh-site button.sh-primary {
  color: white; background: var(--glaze); border-color: #446982;
  box-shadow: inset 0 1px #ffffff36, 0 2px 4px #16354d24;
}
.sh-site button.sh-primary:hover:not(:disabled) { background: #315e7c; }
.sh-site .sh-nav { gap: 0 clamp(4px, 2vw, 19px); }
.sh-site .sh-nav a {
  padding: 8px 6px; border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; background: transparent; color: #dbe7ef;
}
.sh-site .sh-nav a:hover,
.sh-site .sh-nav a[aria-current] { color: #fff; background: transparent; }
.sh-site .sh-nav a[aria-current] { border-bottom-color: var(--gold-light); }
.sh-site .sh-inner { padding: 24px clamp(16px, 4vw, 44px) 36px; }
.sh-site .sh-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 18px;
  border-top: 1px solid var(--line); padding: 15px clamp(16px, 4vw, 44px);
  color: var(--muted); font-size: 13px;
}
.sh-site .sh-header { display: grid; gap: 6px; margin-bottom: 20px; }
.sh-site .sh-header h1 { font-size: clamp(26px, 4.5vw, 39px); letter-spacing: -.04em; }
.sh-site .sh-context, .sh-site .sh-note { color: var(--muted); font-size: 13px; }
.sh-site .sh-demo-layout { display: grid; grid-template-columns: clamp(145px, 19vw, 196px) minmax(0, 1fr); gap: clamp(16px, 4vw, 38px); }
.sh-site .sh-channels { border-right: 1px solid var(--line); padding-right: 14px; align-self: stretch; }
.sh-site .sh-channels p { margin: 0 0 8px 11px; }
.sh-site .sh-channel-list { display: grid; gap: 4px; }
.sh-site .sh-channel-list button { text-align: start; background: transparent; border-color: transparent; }
.sh-site .sh-channel-list button[aria-pressed="true"] {
  background: var(--glaze); border-color: var(--gold); color: #fff; box-shadow: inset 0 1px #ffffff35, 0 3px 8px #193e5926;
}
.sh-site .sh-demo-main { min-width: 0; }
.sh-site .sh-scenarios { gap: 4px 15px; border-bottom: 1px solid var(--line); margin-top: 5px; }
.sh-site .sh-scenarios button {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: transparent; color: var(--muted); padding: 6px 2px;
}
.sh-site .sh-scenarios button[aria-pressed="true"] {
  padding-inline: 10px; background: var(--pale-glaze); border-bottom-color: var(--gold);
  border-radius: 8px 8px 0 0; color: var(--indigo);
}
.sh-site .sh-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1.15fr); gap: clamp(16px, 4vw, 40px); align-items: start; margin-top: 22px; }
.sh-site .sh-instruction { display: grid; gap: 15px; padding-top: 7px; }
.sh-site .sh-instruction h3 { font-size: clamp(23px, 4vw, 31px); }
.sh-site .sh-step-list { margin-bottom: 9px; gap: 9px; }
.sh-site .sh-step-list button,
.sh-site .sh-guide-actions button {
  --tile-edge: #bf9c60;
  --tile-base: #c8af87;
  --tile-fill: linear-gradient(155deg, #ffffff 6%, #fcfaf4 46%, #ece5d5);
  --tile-ink: #3b3527;
  background: var(--tile-fill); color: var(--tile-ink); border: 1px solid var(--tile-edge);
  border-radius: 12px; box-shadow: inset 0 1px 1px #fff9, 0 3px var(--tile-base), 0 5px 8px #24384a24;
}
.sh-site .sh-step-list button { min-width: 44px; padding: 6px 10px; font-size: 14px; font-weight: 750; }
.sh-site .sh-step-list button[data-visited] {
  --tile-fill: linear-gradient(155deg, #f5fbfe 7%, #d8eaf5 47%, #accbdc);
  --tile-edge: #739eb6; --tile-base: #789cb1; --tile-ink: #1a3a50;
}
.sh-site .sh-step-list button[aria-pressed="true"] {
  --tile-fill: linear-gradient(155deg, #fff1be 7%, #f5cf69 44%, #dfaa3d);
  --tile-edge: #a97c31; --tile-base: #aa7827; --tile-ink: #3b270b;
}
.sh-site .sh-guide-actions { gap: 12px; }
.sh-site .sh-guide-actions button { padding-inline: 14px; }
.sh-site .sh-guide-actions button[data-move="1"] {
  --tile-fill: linear-gradient(155deg, #ffdfac 7%, #f5b16e 44%, #e99051);
  --tile-edge: #ac6232; --tile-base: #ad592e; --tile-ink: #42230e;
}
.sh-site .sh-step-list button:hover:not(:disabled),
.sh-site .sh-guide-actions button:hover:not(:disabled) {
  background: var(--tile-fill); filter: brightness(1.06);
}
.sh-site .sh-step-list button:active,
.sh-site .sh-guide-actions button:active:not(:disabled) {
  transform: translateY(2px); box-shadow: inset 0 1px 1px #fff9, 0 1px var(--tile-base);
}
.sh-site .sh-guide-actions button:disabled {
  opacity: 1; color: #626a6c; border-color: #cdd4d8; background: #eff2f3; box-shadow: none;
}
.sh-site .sh-phone {
  width: min(100%, 340px); justify-self: center; aspect-ratio: 390 / 844; min-width: 0;
  padding: 4px; border: 1px solid #9aaab5; border-radius: 34px;
  background: linear-gradient(145deg, #fff, #a6b6c0 25%, #f7fbfd 48%, #97a8b4 73%, #e6edf2);
  box-shadow: 0 3px #9aa9b2, 0 6px #c8d2d8, 3px 12px 24px #30485b25;
}
.sh-site .sh-screen {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; height: 100%;
  min-height: 0; overflow: hidden; border-radius: 29px; background: #edf0f2;
  font-size: 13px; line-height: 1.48; color: #223c50;
}
.sh-site .sh-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 17px 0; height: 36px; font-size: 12px; font-weight: 700; background: var(--mist);
}
.sh-site .sh-indicators { display: flex; align-items: center; gap: 5px; color: #243b4c; }
.sh-site .sh-signal { display: flex; align-items: end; gap: 1px; height: 11px; }
.sh-site .sh-signal i { width: 2px; border-radius: 1px; background: currentColor; }
.sh-site .sh-signal i:nth-child(1) { height: 4px; }
.sh-site .sh-signal i:nth-child(2) { height: 6px; }
.sh-site .sh-signal i:nth-child(3) { height: 8px; }
.sh-site .sh-signal i:nth-child(4) { height: 10px; }
.sh-site .sh-battery { display: block; position: relative; width: 16px; height: 8px; border: 1px solid currentColor; border-radius: 2px; }
.sh-site .sh-battery::before { content: ""; position: absolute; inset: 1px; background: currentColor; border-radius: 1px; }
.sh-site .sh-battery::after { content: ""; position: absolute; width: 2px; height: 4px; right: -3px; top: 1px; background: currentColor; }
.sh-site .sh-phone-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 43px; padding: 0 10px; border-bottom: 1px solid var(--gold);
  background: var(--mist); font-size: 14px; font-weight: 700;
}
.sh-site button.sh-phone-back { justify-self: start; padding: 0 11px; border: 0; background: transparent; font-size: 24px; line-height: 1; }
.sh-site .sh-capsule {
  justify-self: end; display: flex; gap: 5px; align-items: center; padding: 3px 6px;
  border: 1px solid #a5b8c5; border-radius: 20px; background: #ffffff80; white-space: nowrap;
  font-size: 11px; line-height: 1.2;
}
.sh-site .sh-capsule span + span { padding-left: 5px; border-left: 1px solid #a5b8c5; }
.sh-site .sh-phone-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.sh-site .sh-phone-card {
  margin-bottom: 10px; padding: 12px;
  border: 1px solid #d6e0e5; border-radius: 13px; background: var(--paper);
}
.sh-site .sh-phone-hero { position: relative; background: var(--pale-glaze); border-color: #c8af7d; box-shadow: inset 0 1px white, 0 3px 8px #203e5614; }
.sh-site .sh-phone-hero img { width: 58px; height: 58px; object-fit: contain; float: right; margin: 4px 0 0 7px; }
.sh-site .sh-activity-title { font-size: 19px; font-weight: 750; margin: 4px 0 2px; overflow-wrap: anywhere; }
.sh-site .sh-phone-label { color: #425d71; font-size: 12px; }
.sh-site .sh-phone-card h4 { margin: 0 0 6px; font-size: 13px; }
.sh-site .sh-phone-card p.sh-activity-title { margin: 4px 0 2px; }
.sh-site .sh-roster { margin: 0; padding: 0; list-style: none; }
.sh-site .sh-roster li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #e0d5bf; }
.sh-site .sh-roster span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mist); font-weight: 700; }
.sh-site .sh-roster small { margin-left: auto; color: var(--muted); }
.sh-site .sh-fields { margin: 0; }
.sh-site .sh-fields div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 7px; padding: 8px 0; border-bottom: 1px solid #e0d5bf; }
.sh-site .sh-fields div:last-child { border-bottom: 0; padding-bottom: 2px; }
.sh-site .sh-fields dt { color: var(--muted); }
.sh-site .sh-fields dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.sh-site .sh-fields[data-form] div { align-items: center; min-height: 40px; }
.sh-site .sh-fields[data-form] dd { border-radius: 5px; padding: 3px 6px; background: #edf3f6; }
.sh-site .sh-phone-action { padding: 8px 12px 3px; border-top: 1px solid #c8af7d; background: var(--paper); }
.sh-site .sh-phone-action button { width: 100%; border-radius: 11px; font-size: 13px; }
.sh-site .sh-phone-outcome { margin-top: 8px; padding: 8px; border-radius: 7px; background: #e4edf2; }
.sh-site .sh-home-indicator { display: grid; place-items: center; min-height: 20px; background: var(--paper); }
.sh-site .sh-home-indicator::before { content: ""; width: 34%; height: 4px; border-radius: 4px; background: #263440; }
.sh-site .sh-summary { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.sh-site .sh-preview-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.sh-site a.sh-text-button { border: 0; background: transparent; padding-inline: 0; color: var(--blue); }
.sh-site a.sh-text-button:hover { text-decoration: underline; }
.sh-site .sh-event-entry {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .32fr); gap: 12px 22px; align-items: center;
  padding: clamp(18px, 4vw, 38px); border: 1px solid #bdccd8; border-radius: 20px; background: var(--pale-glaze);
  box-shadow: inset 0 1px white, 0 4px 12px #193e5913;
}
.sh-site .sh-event-entry h3 { font-size: clamp(23px, 4vw, 34px); margin: 6px 0; }
.sh-site .sh-event-entry .sh-primary { margin-top: 16px; }
.sh-site .sh-event-art { display: block; width: min(100%, 168px); height: auto; justify-self: center; filter: drop-shadow(0 8px 10px #142e4a30); }
.sh-site .sh-event-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(95px, .3fr); gap: 8px 20px;
  align-items: center; padding: clamp(18px, 4vw, 35px); border: 1px solid var(--gold); border-radius: 20px;
  background: radial-gradient(ellipse at 84% 5%, #53809b, transparent 50%), var(--glaze);
  color: #fff; box-shadow: inset 0 1px #ffffff48, 0 7px 18px #14314824;
}
.sh-site .sh-event-banner h1 { font-size: clamp(26px, 4.7vw, 46px); letter-spacing: -.045em; margin: 5px 0 8px; }
.sh-site .sh-event-banner .sh-note { color: #e2edf4; }
.sh-site .sh-event-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--gold-light); font-size: 13px; }
.sh-site .sh-event-state { display: inline-block; padding: 2px 9px; border-radius: 20px; color: #203c51; background: #e7f0f5; font-size: 12px; font-weight: 650; }
.sh-site .sh-event-state.sh-live { color: #5a3907; background: #f5e2b9; }
.sh-site .sh-event-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; color: #e2edf4; }
.sh-site .sh-event-section { margin-top: 25px; }
.sh-site .sh-event-section h3 { font-size: clamp(21px, 3.3vw, 27px); }
.sh-site .sh-event-section .sh-summary { margin-top: 13px; }
.sh-site .sh-contact { padding-block: clamp(36px, 6vw, 72px); }
.sh-site .sh-contact > .sh-header { gap: 10px; margin-bottom: 28px; }
.sh-site .sh-contact > .sh-header p { color: var(--muted); }
.sh-site .sh-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.sh-site .sh-contact-grid article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--white), #eaf2f7);
}
.sh-site .sh-contact-grid h2, .sh-site .sh-contact-panel h2 { font-size: 20px; }
.sh-site .sh-contact-grid article > p { color: var(--muted); }
.sh-site .sh-contact-grid article > a { margin-top: auto; }
.sh-site .sh-contact-panel {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}
.sh-site .sh-contact-panel > .sh-primary { justify-self: start; margin-top: 4px; }
.sh-site .sh-jump { color: var(--blue); text-underline-offset: 3px; }
.sh-site .sh-rounds { margin-top: 15px; margin-left: 6px; padding-left: 17px; border-left: 1px solid var(--gold); display: grid; gap: 12px; }
.sh-site details { border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.sh-site summary { position: relative; padding: 12px 14px; font-weight: 700; }
.sh-site summary::before { content: ""; position: absolute; top: 20px; left: -23px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--paper); }
.sh-site details[open] { border-color: #a9bdcc; }
.sh-site details[open] > summary { background: var(--pale-glaze); border-radius: 12px 12px 0 0; border-bottom: 1px solid #bfd0dd; }
.sh-site .sh-round-status { margin-left: 9px; font-size: 13px; font-weight: 550; color: var(--muted); }
.sh-site .sh-round-matches { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; }
.sh-site .sh-match { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.sh-site .sh-match:has(.sh-live:not([hidden])) { border-color: #c5a168; background: #fffcf5; }
.sh-site .sh-match-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 8px; }
.sh-site .sh-match-side { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.sh-site .sh-match-side strong { overflow-wrap: anywhere; }
.sh-site .sh-score { min-width: 2ch; color: var(--indigo); font-size: 21px; font-weight: 750; text-align: end; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sh-site .sh-match .sh-match-result { margin-top: 6px; }
.sh-site .sh-standings { margin-top: 28px; scroll-margin-top: 14px; }
.sh-site .sh-standings h3 { font-size: 23px; margin-bottom: 8px; }
.sh-site table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sh-site th, .sh-site td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: start; }
.sh-site th { color: var(--indigo); font-weight: 650; background: var(--mist); }
.sh-site tbody tr:first-child { background: #fcf5e7; font-weight: 700; }
.sh-site tbody td:nth-child(n+3), .sh-site thead th:nth-child(n+3) { text-align: end; }
@media (max-width: 680px) {
  .sh-site .sh-stage { grid-template-columns: 1fr; gap: 18px; }
  .sh-site .sh-phone { width: min(100%, 350px); justify-self: center; }
}
@media (max-width: 540px) {
  .sh-site .sh-demo-layout { grid-template-columns: 1fr; }
  .sh-site .sh-channels { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 10px; }
  .sh-site .sh-channels p { margin-left: 0; }
  .sh-site .sh-channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-site .sh-round-matches { grid-template-columns: minmax(0, 1fr); }
  .sh-site .sh-event-entry, .sh-site .sh-event-banner { grid-template-columns: minmax(0,1fr) minmax(64px,.25fr); gap: 8px; }
  .sh-site th, .sh-site td { padding-inline: 4px; font-size: 13px; }
}
.sh-site a { color: inherit; text-decoration: none; }
.sh-site a:focus-visible, .sh-site button:focus-visible, .sh-site summary:focus-visible {
  outline: 2px solid #386c94;
  outline-offset: 3px;
}
.sh-site .sh-top a:focus-visible { outline-color: var(--gold-light); }
.sh-site a.sh-icp { text-decoration: underline; text-underline-offset: 3px; }
.sh-site .sh-content { width: min(100%, 1260px); margin-inline: auto; flex: 1; }
.sh-site .sh-skip { position: absolute; z-index: 2; inset: 10px auto auto 16px; padding: 8px 12px; background: white; transform: translateY(-200%); }
.sh-site .sh-skip:focus { transform: none; }
.sh-site .sh-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.sh-site a.sh-primary { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 13px; border: 1px solid #446982; border-radius: 9px; background: var(--glaze); color: white; font-weight: 600; }
.sh-site a.sh-primary:hover { background: #315e7c; }
.sh-site .sh-jump, .sh-site .sh-text-button { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.sh-site .sh-text-button { display: inline-flex; align-items: center; min-height: 44px; }
.sh-site .sh-phone { align-self: start; }
  .sh-site.sh-home { --cream: #ffffff; --deep: #254e6c; }
.sh-site.sh-home .hero h1 {
  margin: 18px 0 24px;
  font-size: clamp(31px, 4vw, 64px);
  line-height: 1.24;
  letter-spacing: 0;
  white-space: normal;
}
.sh-site.sh-home .hero-description { max-width: 24em; font-size: 16px; }
.sh-site.sh-home .hero-copy p { margin-top: 18px; }
.sh-site.sh-home .hero-figure img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top;
}
.sh-site.sh-home .hero-access {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 24px;
}
.sh-site.sh-home .hero-code {
  display: grid;
  justify-items: center;
  gap: 5px;
  flex: none;
  padding: 8px 8px 6px;
  border: 1px solid #dae4ec;
  border-radius: 14px;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
  color: var(--deep);
}
.sh-site.sh-home .hero-code-image {
  --code-size: 128px;
  position: relative;
  overflow: hidden;
  width: var(--code-size);
  height: var(--code-size);
}
.sh-site.sh-home .hero-code-image img {
  position: absolute;
  inset: auto auto 0 0;
  width: calc(var(--code-size) * 1536 / 430);
  max-width: none;
}
.sh-site.sh-home .hero-access .hero-actions { display: grid; justify-items: start; gap: 12px; margin: 0; }
.sh-site.sh-home .hero-access .hero-note { margin: 0; line-height: 1.5; }
.sh-site.sh-home .feature-card { background: linear-gradient(150deg, #fff, #e5eef5); box-shadow: inset 0 1px white, 0 4px 0 #d9e5ed; }
.sh-site.sh-home .feature-card h3 { margin-block: 9px 13px; }
.sh-site.sh-home .feature-card > p:not(.feature-label) { margin-bottom: 24px; }
.sh-site.sh-home .space-rows p, .sh-site.sh-home .facts p { color: var(--muted); }
.sh-site.sh-home .button { color: white; }
.sh-site.sh-home .about { margin-bottom: 40px; background: linear-gradient(140deg, #f5fafc, #e5eef5); }