:root { color-scheme: light; --blue: #47adf9; --blue-hover: #1a60d9; }
* { box-sizing: border-box; }
html { min-width: 280px; background: #fff; }
body { margin: 0; color: #333; font-family: Arial, "Microsoft YaHei", sans-serif; line-height: 1; -webkit-text-size-adjust: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
a:focus-visible, button:focus-visible { outline: 3px solid #125fb1; outline-offset: 3px; }
.page { width: 100%; max-width: 750px; min-height: 100vh; margin: 0 auto; background: #fff; }
.header { display: flex; align-items: center; justify-content: center; height: 50px; margin: 0; }
.brand { margin: 0; width: 25%; max-width: 188px; display: block; }
.brand svg { display: block; width: 100%; height: auto; overflow: visible; }
.container { width: 100%; margin: 0 auto; }
.carousel { position: relative; overflow: hidden; width: 100%; aspect-ratio: 750 / 260; touch-action: pan-y; }
.slides { height: 100%; display: flex; transition: transform 400ms ease; }
.slide { display: block; flex: 0 0 100%; width: 100%; height: 100%; }
.slide img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.pagination { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: clamp(5px, 1.2vw, 18px); }
.dot { border: 0; padding: 0; border-radius: 50%; width: clamp(8px, 1.867vw, 14px); height: clamp(8px, 1.867vw, 14px); background: #ccc; box-shadow: 0 0 1px #777; }
.dot[aria-current="true"] { background: #d01b1b; }
.pause { position: absolute; top: 7px; right: 7px; border: 1px solid #ffffff80; border-radius: 4px; background: #064cadb8; color: #fff; width: 26px; height: 26px; padding: 0; opacity: 0; transition: opacity .15s; }
.carousel:hover .pause, .carousel:focus-within .pause { opacity: 1; }
.notice { display: flex; align-items: center; height: 28px; width: 100%; overflow: hidden; background: #f1f1f1 url('../images/background.png') center / 100% 100% no-repeat; }
.speaker { flex: 0 0 auto; width: clamp(16px, 4vw, 22px); height: auto; margin: 0 8px 0 10px; }
.marquee { flex: 1; min-width: 0; overflow: hidden; height: 100%; display: flex; align-items: center; }
.announcement { display: flex; flex: 0 0 auto; width: max-content; font-size: 11px; line-height: 28px; margin: 0; animation: ticker 24s linear infinite; will-change: transform; }
.announcement-copy { display: block; flex: 0 0 auto; white-space: pre; padding-right: 48px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lines { display: flex; flex-direction: column; gap: 8px; padding: 15px 5px; }
.line { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--blue); border-radius: 8px; padding: 0 0 0 5px; min-width: 0; }
.ping { display: flex; align-items: center; gap: 6px; width: 60px; flex: 0 0 60px; padding: 8px 5px; background: var(--blue); color: white; border-radius: 5px; font-size: 12px; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; flex: 0 0 8px; background: #00cc00; border-radius: 50%; }
.link-text { display: flex; justify-content: center; align-items: center; flex: 1; min-width: 0; color: var(--blue); font-size: 14px; white-space: nowrap; }
.arrow { width: 20px; height: 15px; flex-shrink: 0; }
.go { display: block; flex-shrink: 0; color: white; background: var(--blue); padding: 12px; border-radius: 0 5px 5px 0; font-size: 12px; line-height: 1; transition: background .2s; }
.go:hover { background: var(--blue-hover); }
.functions { padding: 0 10px; }
.button-grid { display: grid; grid-template-columns: repeat(2, 205px); justify-content: center; gap: 5px; }
.service { display: block; transition: filter .2s; border-radius: 9px; }
.service:hover { filter: brightness(.96); }
.service img { width: 100%; height: auto; }
.download { display: block; padding: 15px 5px 0; }
.download img { width: 100%; height: auto; }
footer { padding: 15px 0; text-align: center; color: var(--blue); font-size: clamp(12px, 3.467vw, 26px); line-height: 1; }
.toast { position: fixed; z-index: 10; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 12px); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 8px; background: #173c5e; box-shadow: 0 4px 18px #0002; color: white; font-size: 14px; line-height: 1.5; text-align: center; opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s; pointer-events: none; }
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 412px) {
  .functions { padding: 0 5px; }
  .button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
  .link-text { font-size: 11px; }
  .arrow { width: 15px; height: 12px; }
  .go { padding: 12px 9px; }
  .ping { width: 55px; flex-basis: 55px; gap: 4px; }
}
@media (min-width: 768px) {
  .notice { width: 98%; height: 35px; margin: 0 4px; border-radius: 20px; }
  .announcement { font-size: 12px; line-height: 35px; }
  .line { border-radius: 20px; padding: 5px; }
  .ping { border-radius: 15px; }
  .go { padding: 10px 12px; border-radius: 15px; }
  .button-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer { font-size: 16px; }
}
@media (min-width: 769px) {
  .header { height: 100px; }
  .container { max-width: 500px; }
}


.ping[data-status="medium"] .status-dot { background: orange; }
.ping[data-status="slow"] .status-dot { background: red; }