:root{
  color-scheme:dark;
  --ground:#070b14;--panel:#0e1728;--panel2:#111d34;--edge:#1e2c44;--edge-soft:#172441;
  --ink:#d6e4ff;--dim:#8497b8;--accent:#6fd6ff;--blue:#5aa9ff;--amber:#ffcf4d;--green:#5be08f;

  --faint:#7d8fb2;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Roboto Mono",monospace;
}
*{box-sizing:border-box}
a{color:var(--accent);text-decoration:none}

.chrome-wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 22px}

header{position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(7,11,20,.92),rgba(7,11,20,.55));
  border-bottom:1px solid var(--edge-soft);
  padding-top:env(safe-area-inset-top,0)}

.nav{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding-top:12px;padding-bottom:12px}

.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.01em;
  font-size:18px;white-space:nowrap;flex:0 0 auto;color:var(--ink);margin-right:auto}
.brand img{width:26px;height:26px;border-radius:7px;flex:none}
.navpanel{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;flex:0 1 auto;min-width:0}
nav.links{display:flex;align-items:center;gap:18px;flex-wrap:nowrap}
nav.links a,.nav-signin{color:var(--dim);font-size:14px;white-space:nowrap;flex:0 0 auto}
nav.links a:hover,.nav-signin:hover{color:var(--ink)}
.btn{display:inline-block;font-weight:700;border-radius:10px;padding:10px 18px;font-size:15px;
  cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap;
  text-decoration:none}
.btn-primary{color:#04121f;background:linear-gradient(180deg,#8fe3ff,#4bb6ef);
  box-shadow:0 6px 20px #1c6fb055}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-ghost{color:var(--ink);border-color:#2f4a72;background:#0d1830}
.btn-ghost:hover{border-color:#4a79b8;background:#12213b}

.navcheck{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.navburger{display:none;align-items:center;gap:8px;cursor:pointer;flex:0 0 auto;
  color:var(--dim);font-size:14px;padding:9px 12px;border:1px solid var(--edge-soft);
  border-radius:10px;background:#0d1830;min-height:44px}
.navburger:hover{color:var(--ink);border-color:#2f4a72}
.navburger .bars{display:inline-block;width:16px;height:2px;background:currentColor;
  position:relative}
.navburger .bars::before,.navburger .bars::after{content:"";position:absolute;left:0;width:16px;
  height:2px;background:currentColor}
.navburger .bars::before{top:-5px}
.navburger .bars::after{top:5px}

.navcheck:focus-visible + .navpanel + .navburger{outline:2px solid var(--accent);outline-offset:2px}

@media(max-width:1070px){
  .navburger{display:inline-flex}
  .navpanel{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:40;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    background:#0d1830;border:1px solid var(--edge);border-radius:12px;
    box-shadow:0 18px 44px rgba(0,0,0,.6)}
  .navcheck:checked ~ .navpanel{display:flex}
  .navpanel nav.links{flex-direction:column;align-items:stretch;gap:2px}
  .navpanel nav.links a,.navpanel .nav-signin{font-size:16px;padding:11px 12px;border-radius:8px;
    min-height:44px;display:flex;align-items:center}
  .navpanel nav.links a:hover,.navpanel .nav-signin:hover{background:#12213b}

  .navpanel .langs{width:100%}
  .navpanel .langs>summary{width:100%;justify-content:space-between;padding:11px 12px;
    border-radius:8px;min-height:44px}
  .navpanel .langs-menu{position:static;box-shadow:none;background:transparent;border:0;
    padding:4px 0 0;min-width:0;display:flex;flex-wrap:wrap;gap:4px}
  .navpanel .langs-menu a{flex:1 1 44%;min-height:44px;display:flex;align-items:center;
    background:#12213b}

  .navpanel .langs .cur{display:inline}
  .navpanel .langs .cur-short{display:none}
}

@media(max-width:560px){
  .brand span{display:none}
}
@media(max-width:480px){
  .nav{gap:10px}
  .navburger{padding:10px 12px}
  .navburger .mlabel{display:none}
  .nav .btn-primary{padding:11px 14px;font-size:14px}
}

.langs{position:relative;font-family:var(--mono);font-size:12px;flex:0 0 auto}
.langs>summary{list-style:none;cursor:pointer;color:var(--dim);white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;min-height:36px;
  border:1px solid var(--edge-soft);border-radius:999px;transition:.15s}
.langs>summary::-webkit-details-marker{display:none}
.langs>summary::before{content:"🌐";font-size:11px}
.langs>summary::after{content:"▾";font-size:9px;opacity:.7}
.langs>summary:hover,.langs[open]>summary{color:var(--ink);border-color:#2f4a72;background:#0d1830}
.langs .cur{color:inherit;font-weight:700}
.langs-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:136px;
  display:grid;gap:2px;background:#0d1830;border:1px solid var(--edge);border-radius:10px;
  padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.langs-menu a{display:block;padding:9px 10px;border-radius:7px;color:var(--dim);
  text-decoration:none;white-space:nowrap}
.langs-menu a:hover{background:#12213b;color:var(--ink)}

.langs .cur-short{display:none}
@media(max-width:480px){
  .langs .cur{display:none}
  .langs .cur-short{display:inline}
}

.freebanner{border:1px solid #2f4a72;border-radius:16px;margin:22px 0 30px;padding:24px 22px;
  text-align:center;background:linear-gradient(180deg,rgba(23,44,78,.75),rgba(14,23,40,.75));
  box-shadow:0 10px 34px rgba(0,0,0,.35)}
.freebanner .badge{display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:#04121f;border-radius:999px;padding:4px 12px;
  background:linear-gradient(180deg,#8fe3ff,#4bb6ef)}
.freebanner h2{font-size:clamp(22px,3.6vw,30px);line-height:1.15;margin:14px 0 8px;
  letter-spacing:-.02em;color:var(--ink)}
.freebanner p{color:var(--dim);margin:0 auto;max-width:56ch;font-size:15px}
.freebanner .btn{margin-top:20px}
.freeclock{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.freeclock .fc{min-width:92px;padding:14px 10px;border:1px solid var(--edge);border-radius:14px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));text-align:center}
.freeclock .fc span{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:#eaf3ff}
.freeclock .fc small{color:var(--faint);font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase}
.fc-over{text-align:center;color:var(--dim);margin-top:26px}
@media(max-width:520px){
  .freeclock{gap:8px}
  .freeclock .fc{min-width:0;flex:1 1 22%;padding:11px 6px}
  .freeclock .fc span{font-size:26px}
  .freebanner{padding:20px 16px}
}

.sitefoot{border-top:1px solid var(--edge-soft);margin-top:56px;padding:26px 0 40px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  color:var(--faint);font-size:13px}
.sitefoot .footrow{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
  justify-content:space-between}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:8px 16px}
.sitefoot a{color:var(--dim)}
.sitefoot a:hover{color:var(--ink)}
.sitefoot .mono{font-family:var(--mono)}
.sitefoot .social{display:inline-flex;align-items:center;gap:6px}
.sitefoot .social svg{display:block;flex:none}
@media(max-width:640px){
  .sitefoot .footrow{flex-direction:column;align-items:flex-start;gap:14px}
  .sitefoot nav{gap:2px 16px}
  .sitefoot nav a{padding:6px 0;min-height:36px;display:flex;align-items:center}
}