/* Ocean: the selected home concept. Scoped to the public landing page. */
body.home-page.ocean-home {
  --ocean-bg:#edf7f8; --ocean-panel:#f9fefe; --ocean-soft:#daeff0; --ocean-line:#bcd9df;
  --ocean-ink:#173747; --ocean-muted:#517785; --ocean-accent:#087983;
  --ocean-button:#087f89; --ocean-button-ink:#fff; --ocean-star:#4d94a730;
  margin:0; min-height:100svh; padding:0; background:var(--ocean-bg); color:var(--ocean-ink);
  font:400 15px/1.6 var(--font-copy),Inter,system-ui,sans-serif;
  overflow-x:clip; isolation:isolate;
}
html[data-theme="night"] body.home-page.ocean-home {
  --ocean-bg:#071626; --ocean-panel:#112538; --ocean-soft:#183449; --ocean-line:#244356;
  --ocean-ink:#ecf8fc; --ocean-muted:#9abbca; --ocean-accent:#77ddd8;
  --ocean-button:#7ae4da; --ocean-button-ink:#0a2832; --ocean-star:#b9dfea50;
  background:var(--ocean-bg); color:var(--ocean-ink);
}
html:root body.ocean-home::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6;
  background:radial-gradient(circle at 25% 30%,var(--ocean-star) 0 1px,transparent 1.5px) 0 0/130px 149px,
    radial-gradient(circle at 70% 40%,var(--ocean-star) 0 1px,transparent 1.5px) 0 0/197px 183px;
}
html:root body.ocean-home .ocean-wrap { width:min(1160px,calc(100% - 80px)); margin-inline:auto; }
html:root body.ocean-home :is(.ocean-header,.ocean-dock,.ocean-bottom,.ocean-footer) { position:relative; }
html:root body.ocean-home :is(.ocean-header,.ocean-dock,.ocean-bottom,.ocean-footer) svg {
  width:21px; height:21px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
html:root body.ocean-home :is(a,button,summary):focus-visible { outline:2px solid var(--ocean-accent); outline-offset:4px; }
html:root body.ocean-home :is(a,button,summary) { -webkit-tap-highlight-color:transparent; }
html:root body.ocean-home .ocean-skip { position:fixed; z-index:100; top:12px; left:12px; transform:translateY(-160%); padding:12px 18px; border-radius:8px; background:var(--ocean-panel); color:var(--ocean-ink); }
html:root body.ocean-home .ocean-skip:focus { transform:none; }
html:root body.ocean-home .ocean-header { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:104px; border-bottom:1px solid var(--ocean-line); z-index:30; }
html:root body.ocean-home .ocean-brand { width:135px; display:flex; align-items:center; min-height:44px; }
html:root body.ocean-home .ocean-brand img { display:block; width:100%; height:auto; }
html:root body.ocean-home .ocean-nav { display:flex; align-items:center; gap:26px; }
html:root body.ocean-home .ocean-nav a { color:var(--ocean-ink); text-decoration:none; }
html:root body.ocean-home .ocean-nav-link { display:inline-flex; align-items:center; min-height:44px; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
html:root body.ocean-home .ocean-nav-link:hover { color:var(--ocean-accent); }
html:root body.ocean-home .ocean-theme { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ocean-muted); font:24px/1 system-ui,sans-serif; cursor:pointer; }
html:root body.ocean-home .ocean-theme:hover { color:var(--ocean-accent); background:var(--ocean-soft); }
html:root body.ocean-home .ocean-account { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px; border:1px solid var(--ocean-line); border-radius:7px; font:600 13px/1.4 var(--font-copy); }
html:root body.ocean-home .ocean-account:hover { border-color:var(--ocean-accent); background:var(--ocean-panel); }
html:root body.ocean-home .ocean-mobile-nav { display:none; }
html:root body.ocean-home .ocean-hero { position:relative; min-height:440px; margin:0 -40px; }
html:root body.ocean-home .ocean-scene { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
html:root body.ocean-home .ocean-scene img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center 49%; }
html:root body.ocean-home .ocean-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ocean-bg) 4%,transparent 94%),linear-gradient(0deg,var(--ocean-bg),transparent 27%); }
html:root body.ocean-home .ocean-intro { position:relative; width:min(670px,70%); padding:60px 40px 48px; }
html:root body.ocean-home .ocean-eyebrow { margin:0 0 22px; color:var(--ocean-muted); font:600 11px/1.5 var(--font-copy); letter-spacing:.15em; }
html:root body.ocean-home .ocean-eyebrow span { margin-inline:8px; color:var(--ocean-accent); }
html:root body.ocean-home .ocean-intro h1 { margin:0; color:var(--ocean-ink); font:800 clamp(48px,5.25vw,72px)/1.06 var(--font-copy),Inter,system-ui,sans-serif; text-transform:none; letter-spacing:-.055em; text-shadow:none; }
html:root body.ocean-home .ocean-intro h1 em { color:var(--ocean-accent); font-style:normal; }
html:root body.ocean-home .ocean-lead { max-width:365px; margin:24px 0 0; color:var(--ocean-ink); font:400 15px/1.8 var(--font-copy); }
html:root body.ocean-home .ocean-features { display:flex; flex-wrap:wrap; gap:8px 18px; margin:27px 0 0; color:var(--ocean-muted); font:500 11px/1.6 var(--font-copy); }
html:root body.ocean-home .ocean-features span+span::before { content:"·"; margin-right:18px; color:var(--ocean-accent); }
html:root body.ocean-home .ocean-dock { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); align-items:center; gap:20px 26px; margin:6px 0 36px; padding:23px 26px; border:1px solid var(--ocean-line); border-radius:13px; background:var(--ocean-panel); box-shadow:0 12px 24px #0e374310; z-index:2; }
html:root body.ocean-home .ocean-connect { display:flex; flex-wrap:wrap; align-items:center; gap:15px 25px; min-width:0; }
html:root body.ocean-home .ocean-play { display:flex; justify-content:space-between; align-items:center; flex:0 0 auto; gap:25px; padding:15px 21px; min-height:54px; border:0; border-radius:7px; color:var(--ocean-button-ink); background:var(--ocean-button); font:650 14px/1.5 var(--font-copy); cursor:pointer; box-shadow:0 5px 20px #087f8915; transition:filter .15s ease; }
html:root body.ocean-home .ocean-play:hover { filter:brightness(1.08); }
html:root body.ocean-home .ocean-play>span:last-child { font-size:21px; line-height:1; }
html:root body.ocean-home .ocean-server { display:flex; flex-direction:column; min-width:0; }
html:root body.ocean-home .ocean-ip { display:flex; align-items:center; gap:10px; width:max-content; max-width:100%; padding:5px 0; min-height:32px; color:var(--ocean-ink); background:transparent; border:0; font:600 14px/1.5 var(--font-copy); cursor:pointer; }
html:root body.ocean-home .ocean-ip svg { width:15px; height:15px; color:var(--ocean-muted); }
html:root body.ocean-home .ocean-status { display:flex; align-items:center; gap:7px; color:var(--ocean-muted); font:400 12px/1.6 var(--font-copy); }
html:root body.ocean-home .ocean-status .status-dot { width:6px; height:6px; min-width:6px; box-shadow:none; background:var(--ocean-muted); }
html:root body.ocean-home .ocean-status .status-dot.online { background:var(--ocean-accent); }
html:root body.ocean-home .ocean-status .status-dot.offline { background:#dc7971; }
html:root body.ocean-home .ocean-dock .home-vote { --vote-ink:var(--ocean-ink); --vote-muted:var(--ocean-muted); --vote-line:var(--ocean-line); --vote-hint:var(--ocean-panel); align-self:stretch; border:0; border-left:1px solid var(--ocean-line); border-radius:0; padding-left:25px; background:transparent; box-shadow:none; }
html:root body.ocean-home .ocean-dock .home-vote-link { min-height:54px; padding:0; border-radius:7px; gap:12px; }
html:root body.ocean-home .home-vote .home-vote-icon { width:28px; height:32px; flex-basis:28px; border:0; background:transparent; color:var(--ocean-accent); }
html:root body.ocean-home .home-vote .home-vote-copy strong { color:var(--ocean-ink); font-size:14px; font-weight:600; }
html:root body.ocean-home .home-vote .home-vote-copy small { color:var(--ocean-muted); font-size:11px!important; font-weight:400!important; }
html:root body.ocean-home .home-vote-info { margin-left:5px; color:var(--ocean-muted); }
html:root body.ocean-home .home-vote-info:hover { background:var(--ocean-soft); color:var(--ocean-ink); }
html:root body.ocean-home .home-vote-description { left:auto; right:0; width:350px; max-width:min(350px,calc(100vw - 48px)); font-size:13px; }
html:root body.ocean-home .ocean-copy-notice { grid-column:1/-1; position:static; min-height:0; margin:0; padding:0; color:var(--ocean-accent); font:500 12px/1.5 var(--font-copy); }
html:root body.ocean-home .ocean-copy-notice:empty { display:none; }
html:root body.ocean-home .ocean-bottom { display:grid; grid-template-columns:minmax(0,1fr) 335px; align-items:start; gap:44px; }
html:root body.ocean-home .ocean-discover { min-width:0; }
html:root body.ocean-home .ocean-guides { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
html:root body.ocean-home .ocean-guide { display:block; padding:22px 0 26px; border-bottom:1px solid var(--ocean-line); color:var(--ocean-ink); text-decoration:none; }
html:root body.ocean-home .ocean-guide-title { display:flex; align-items:center; gap:12px; }
html:root body.ocean-home .ocean-guide-title svg { color:var(--ocean-accent); }
html:root body.ocean-home .ocean-guide-title strong { font:600 17px/1.5 var(--font-copy); }
html:root body.ocean-home .ocean-guide-title>span:last-child { margin-left:auto; font-size:20px; color:var(--ocean-muted); }
html:root body.ocean-home .ocean-guide p { max-width:230px; margin:14px 0 0; color:var(--ocean-muted); font:400 13px/1.8 var(--font-copy); }
html:root body.ocean-home .ocean-guide:hover { border-color:var(--ocean-accent); }
html:root body.ocean-home .ocean-guide:hover strong { color:var(--ocean-accent); }
html:root body.ocean-home .ocean-telegram { display:flex; align-items:center; gap:16px; padding:24px 0; margin-top:12px; color:var(--ocean-ink); text-decoration:none; }
html:root body.ocean-home .ocean-telegram-mark { display:grid; place-items:center; width:46px; height:46px; flex:0 0 46px; border:1px solid var(--ocean-line); border-radius:10px; color:var(--ocean-accent); }
html:root body.ocean-home .ocean-telegram strong { display:block; font:600 14px/1.5 var(--font-copy); }
html:root body.ocean-home .ocean-telegram small { display:block; margin-top:5px; color:var(--ocean-muted); font:400 12px/1.5 var(--font-copy); }
html:root body.ocean-home .ocean-telegram>span:last-child { margin-left:auto; color:var(--ocean-muted); font-size:22px; }
html:root body.ocean-home .ocean-telegram:hover strong { color:var(--ocean-accent); }
html:root body.ocean-home .honor-top-five { position:static; inset:auto; width:100%; max-width:none; margin:0; padding:20px; border:1px solid var(--ocean-line); border-radius:13px; background:var(--ocean-panel); box-shadow:none; backdrop-filter:none; transform:none; }
html:root body.ocean-home .honor-top-five::before,html:root body.ocean-home .honor-top-five::after { display:none; }
html:root body.ocean-home .honor-top-heading { display:flex; align-items:center; gap:9px; margin:0 0 13px; padding:0 0 14px; border-bottom:1px solid var(--ocean-line); }
html:root body.ocean-home .honor-top-mark { width:auto; height:auto; padding:0; background:transparent; color:var(--ocean-accent); font-size:19px; border:0; box-shadow:none; }
html:root body.ocean-home .honor-top-heading h2 { margin:0; color:var(--ocean-ink); font:600 14px/1.5 var(--font-copy); letter-spacing:0; text-transform:none; }
html:root body.ocean-home .honor-top-count { margin-left:auto; color:var(--ocean-muted); background:transparent; padding:0; border:0; font:500 10px/1.5 var(--font-copy); white-space:nowrap; }
html:root body.ocean-home .honor-top-list { display:flex; flex-direction:column; gap:2px; list-style:none; margin:0; padding:0; }
html:root body.ocean-home .honor-top-card { min-width:0; margin:0; padding:0; border:0; border-radius:6px; background:transparent; box-shadow:none; transform:none; }
html:root body.ocean-home .honor-top-card a { display:grid; grid-template-columns:18px 30px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:51px; padding:6px 0; border:0; background:transparent; color:var(--ocean-ink); text-decoration:none; transform:none; }
html:root body.ocean-home .honor-top-card:hover { background:var(--ocean-soft); transform:none; box-shadow:none; }
html:root body.ocean-home .honor-top-place { width:auto; height:auto; padding:0; border:0; color:var(--ocean-muted); background:transparent; font:500 10px/1.5 var(--font-copy); box-shadow:none; }
html:root body.ocean-home .honor-top-avatar { width:30px; height:30px; border:0; border-radius:6px; background:var(--ocean-soft); box-shadow:none; }
html:root body.ocean-home .honor-top-identity { min-width:0; }
html:root body.ocean-home .honor-top-identity strong { color:var(--ocean-ink); font:600 12px/1.5 var(--font-copy); letter-spacing:0; }
html:root body.ocean-home .honor-top-meta { font-size:10px!important; margin-top:3px; color:var(--ocean-muted); font:400 10px/1.5 var(--font-copy); }
html:root body.ocean-home :is(.honor-top-prestige,.honor-top-honor.is-positive,.honor-top-honor.is-negative) { color:var(--ocean-muted); font-weight:400; }
html:root body.ocean-home .honor-top-score { width:auto; padding:0; border:0; background:transparent; text-align:right; }
html:root body.ocean-home .honor-top-score b { color:var(--ocean-accent); font:600 12px/1.5 var(--font-copy); }
html:root body.ocean-home .honor-top-score small { display:none; }
html:root body.ocean-home .honor-top-card.is-loading { min-height:51px; opacity:.35; background:linear-gradient(90deg,var(--ocean-soft),transparent); animation:none; }
html:root body.ocean-home .honor-top-empty { background:transparent; color:var(--ocean-muted); font:400 12px/1.7 var(--font-copy); }
html:root body.ocean-home .ocean-footer { display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; margin-top:48px; padding-block:24px; border-top:1px solid var(--ocean-line); color:var(--ocean-muted); font:400 11px/1.6 var(--font-copy); }
html:root body.ocean-home .ocean-footer nav { display:flex; flex-wrap:wrap; gap:8px 22px; }
html:root body.ocean-home .ocean-footer a { display:inline-flex; align-items:center; min-height:32px; color:var(--ocean-muted); text-decoration:none; }
html:root body.ocean-home .ocean-footer a:hover { color:var(--ocean-accent); }
@media(max-width:1000px) {
  html:root body.ocean-home .ocean-wrap { width:calc(100% - 50px); }
  html:root body.ocean-home .ocean-hero { margin-inline:-25px; min-height:425px; }
  html:root body.ocean-home .ocean-intro { padding:55px 25px 40px; width:min(590px,76%); }
  html:root body.ocean-home .ocean-intro h1 { font-size:58px; }
  html:root body.ocean-home .ocean-dock { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); padding:20px; gap:20px; }
  html:root body.ocean-home .ocean-connect { gap:10px 20px; }
  html:root body.ocean-home .ocean-bottom { grid-template-columns:minmax(0,1fr) 315px; gap:28px; }
  html:root body.ocean-home .ocean-guides { gap:24px; }
}
@media(max-width:760px) {
  html:root body.ocean-home .ocean-wrap { width:calc(100% - 40px); }
  html:root body.ocean-home .ocean-header { min-height:82px; gap:12px; }
  html:root body.ocean-home .ocean-brand { width:108px; }
  html:root body.ocean-home .ocean-nav { gap:8px; }
  html:root body.ocean-home .ocean-nav-link { display:none; }
  html:root body.ocean-home .ocean-account { padding:9px 11px; }
  html:root body.ocean-home .ocean-account svg { display:none; }
  html:root body.ocean-home .ocean-mobile-nav { display:block; position:relative; }
  html:root body.ocean-home .ocean-mobile-nav summary { display:grid; place-items:center; width:44px; height:44px; border-radius:7px; cursor:pointer; color:var(--ocean-muted); list-style:none; }
  html:root body.ocean-home .ocean-mobile-nav summary::-webkit-details-marker { display:none; }
  html:root body.ocean-home .ocean-mobile-nav[open] summary { background:var(--ocean-soft); color:var(--ocean-ink); }
  html:root body.ocean-home .ocean-mobile-menu { position:absolute; right:0; top:calc(100% + 10px); width:230px; padding:8px; border:1px solid var(--ocean-line); border-radius:10px; background:var(--ocean-panel); box-shadow:0 12px 35px #0003; }
  html:root body.ocean-home .ocean-mobile-menu a { display:block; padding:12px; min-height:44px; font-size:14px; border-radius:6px; }
  html:root body.ocean-home .ocean-mobile-menu a:hover { background:var(--ocean-soft); }
  html:root body.ocean-home .ocean-hero { min-height:530px; margin-inline:-20px; }
  html:root body.ocean-home .ocean-scene { top:auto; height:320px; }
  html:root body.ocean-home .ocean-scene img { object-position:right center; }
  html:root body.ocean-home .ocean-scene::after { background:linear-gradient(var(--ocean-bg),transparent 57%),linear-gradient(0deg,var(--ocean-bg),transparent 24%); }
  html:root body.ocean-home .ocean-intro { width:100%; padding:36px 20px 255px; }
  html:root body.ocean-home .ocean-eyebrow { font-size:10px; margin-bottom:19px; }
  html:root body.ocean-home .ocean-intro h1 { font-size:clamp(43px,8vw,59px); }
  html:root body.ocean-home .ocean-lead { margin-top:20px; max-width:410px; font-size:14px; line-height:1.8; }
  html:root body.ocean-home .ocean-features { display:none; }
  html:root body.ocean-home .ocean-dock { grid-template-columns:1fr; gap:18px; margin:5px 0 28px; padding:20px; }
  html:root body.ocean-home .ocean-connect { gap:14px 23px; }
  html:root body.ocean-home .ocean-server { flex:1; }
  html:root body.ocean-home .ocean-dock .home-vote { border-left:0; border-top:1px solid var(--ocean-line); padding:15px 0 0; }
  html:root body.ocean-home .home-vote-link { min-height:54px; }
  html:root body.ocean-home .home-vote-description { width:100%; max-width:100%; }
  html:root body.ocean-home .ocean-bottom { grid-template-columns:1fr; gap:25px; }
  html:root body.ocean-home .honor-top-five { max-width:none; }
  html:root body.ocean-home .honor-top-card a { grid-template-columns:22px 34px minmax(0,1fr) auto; gap:12px; min-height:54px; }
  html:root body.ocean-home .honor-top-avatar { width:34px; height:34px; }
  html:root body.ocean-home .honor-top-identity strong { font-size:14px; }
  html:root body.ocean-home .honor-top-meta { font-size:11px!important; }
  html:root body.ocean-home .honor-top-score b { font-size:14px; }
  html:root body.ocean-home .ocean-guide { padding-top:12px; padding-bottom:20px; }
  html:root body.ocean-home .ocean-telegram { margin-top:0; padding-bottom:8px; }
  html:root body.ocean-home .ocean-footer { margin-top:35px; padding-block:18px; }
}
@media(max-width:400px) {
  html:root body.ocean-home .ocean-wrap { width:calc(100% - 32px); }
  html:root body.ocean-home .ocean-header { gap:4px; }
  html:root body.ocean-home .ocean-brand { width:94px; }
  html:root body.ocean-home .ocean-nav { gap:3px; }
  html:root body.ocean-home .ocean-account { padding-inline:8px; font-size:12px; }
  html:root body.ocean-home .ocean-hero { margin-inline:-16px; }
  html:root body.ocean-home .ocean-intro { padding-inline:16px; }
  html:root body.ocean-home .ocean-intro h1 { font-size:40px; }
  html:root body.ocean-home .ocean-dock { padding:17px; }
  html:root body.ocean-home .ocean-play { flex:1 0 100%; }
  html:root body.ocean-home .ocean-server { padding:4px 0; }
  html:root body.ocean-home .ocean-ip { min-height:44px; }
  html:root body.ocean-home .ocean-guides { grid-template-columns:1fr; gap:14px; }
  html:root body.ocean-home .ocean-guide p { max-width:none; margin-top:9px; }
  html:root body.ocean-home .ocean-telegram { gap:11px; }
  html:root body.ocean-home .ocean-telegram strong { font-size:13px; }
  html:root body.ocean-home .ocean-telegram small { font-size:11px; }
  html:root body.ocean-home .honor-top-five { padding:16px; }
  html:root body.ocean-home .honor-top-card a { gap:8px; }
}
@media(prefers-reduced-motion:reduce) { html:root body.ocean-home * { scroll-behavior:auto; transition:none!important; animation:none!important; } }