@font-face {
  font-family: "Noto Sans JP";
  src: url("/static/fonts/NotoSansJP-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("/static/fonts/ArchivoBlack-latin-dots.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --text: #edece7;
  --background: #090a0b;
  --primary: #ff5900;
  --primary-hover: #ff7126;
  --secondary: #fff2dc;
  --accent: #ffd08b;
  --muted: #96928c;
  --line: rgba(255, 242, 220, .15);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 100%;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--background); color: var(--text); }
body { font-family: "Noto Sans JP", sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; }
::selection { background: var(--primary); color: var(--background); }
h1, h2, h3, h4, h5 { font-family: "Archivo Black", sans-serif; font-weight: 700; }
h1 { font-size: 4.210rem; } h2 { font-size: 3.158rem; } h3 { font-size: 2.369rem; } h4 { font-size: 1.777rem; } h5 { font-size: 1.333rem; } small { font-size: .75rem; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-header { width:100%; border-bottom:1px solid rgba(255,242,220,.1); background:#090a0b; }
.site-nav { width:100%; height:64px; padding-inline:clamp(18px,3vw,48px); display:flex; align-items:center; justify-content:space-between; gap:28px; }
.site-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.site-brand strong { color: var(--primary); font-family: "Archivo Black", sans-serif; font-size: 1.48rem; letter-spacing: -.055em; }
.site-beta { display: inline-block; padding: 4px 6px; border-radius: 2px; background: var(--primary); color: #000; font-family: "Archivo Black", sans-serif; font-size: .58rem; line-height: 1; letter-spacing: .04em; }
.nav-account { display: flex; align-items: center; gap: 15px; min-width: 0; }
.nav-account form { margin: 0; }
.faceit-login, .nav-start { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid var(--line); border-radius: 2px; background: #0a0a0a; color: var(--text); text-decoration: none; font-size: .78rem; transition: border-color .15s, background .15s, transform .15s; }
.faceit-login:hover, .nav-start:hover { border-color: rgba(255, 208, 139, .55); background: #111; transform: translateY(-1px); }
.faceit-login { border-color: #383a37; background: transparent; min-height: 38px; font-size: .72rem; }
.faceit-login:hover { border-color: var(--primary); background: transparent; transform: none; }
.nav-start { min-height: 34px; padding-inline: 13px; border-color: var(--primary); background: var(--primary); color: #000; font-weight: 700; }
.nav-start:hover { border-color: #ff7029; background: #ff7029; }
.nav-upload { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:3px; background:#171717; color:var(--text); text-decoration:none; font-size:.76rem; font-weight:700; white-space:nowrap; cursor:pointer; }
.nav-upload:hover { border-color:var(--primary); background:#25201b; }
.nav-upload svg { width:16px; height:16px; fill:none; stroke:var(--primary); stroke-width:2; stroke-linecap:round; }
.site-subnav { min-height:41px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 clamp(18px,3vw,48px); border-top:1px solid rgba(255,242,220,.08); background:#111213; }
.site-subnav-left { display:flex; align-items:center; gap:24px; }
.site-subnav a { color:#c8c5bf; font-size:.74rem; text-decoration:none; }
.site-subnav a:hover { color:var(--primary); }
.demo-upload-dialog { width:min(520px,calc(100vw - 28px)); max-height:calc(100dvh - 36px); padding:26px; border:1px solid #4c4036; border-radius:9px; background:#171819; color:var(--text); box-shadow:0 24px 80px #000c; }
.demo-upload-dialog::backdrop { background:#000b; }
.demo-upload-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.demo-upload-head h2 { margin:0; font-size:1.5rem; }
.demo-upload-eyebrow { margin:0 0 5px; color:var(--primary); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; }
.demo-upload-close { border:0; background:transparent; color:#b8b5ae; font-size:1.6rem; cursor:pointer; }
.demo-upload-dialog > p { color:#b9b6b0; font-size:.82rem; line-height:1.6; }
.demo-dropzone { display:grid; place-items:center; gap:7px; min-height:180px; margin-top:18px; padding:20px; border:1px dashed #77736b; border-radius:7px; background:#202123; text-align:center; cursor:pointer; }
.demo-dropzone:hover,.demo-dropzone.is-dragging { border-color:var(--primary); background:#2a221d; }
.demo-dropzone strong { font-size:.95rem; }
.demo-dropzone span { color:#aaa59d; font-size:.72rem; }
.demo-upload-file-name { min-height:1.2em; overflow-wrap:anywhere; }
.demo-upload-progress { height:6px; overflow:hidden; border-radius:6px; background:#3a3b3b; }
.demo-upload-progress[hidden],.demo-upload-actions [hidden] { display:none; }
.demo-upload-progress div { width:0; height:100%; background:var(--primary); transition:width .15s; }
.demo-upload-message { min-height:1.3em; }
.demo-upload-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.demo-upload-actions button { cursor:pointer; }
.demo-upload-actions button:disabled { opacity:.45; cursor:not-allowed; }
.faceit-mark { width: 20px; height: 20px; flex: 0 0 20px; background: var(--primary); mask: url('/static/brand/faceit.svg') center / contain no-repeat; }
.nav-user { position:relative; flex-shrink:0; z-index:31; }
.nav-user summary { display:flex; align-items:center; justify-content:center; gap:7px; width:62px; height:40px; padding:5px; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--secondary); cursor:pointer; list-style:none; }
.nav-user summary::-webkit-details-marker { display:none; }
.nav-user summary:hover, .nav-user[open] summary { color:var(--text); border-color:var(--muted); background:#ffffff06; }
.nav-user svg, .nav-logout svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.nav-user-menu { position:absolute; top:calc(100% + 9px); right:0; width:220px; max-width:calc(100vw - 28px); padding:6px; border:1px solid var(--line); border-radius:5px; background:#141414; box-shadow:0 16px 40px #0008; }
.nav-user-menu p { margin:0 0 4px; padding:10px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.75rem; overflow-wrap:anywhere; }
.nav-user-menu a { display:flex; align-items:center; min-height:44px; padding:10px; border-radius:3px; color:var(--text); text-decoration:none; font-size:.8rem; }
.nav-user-menu a:hover { background:#ffffff09; }
.nav-user-avatar { position:relative; display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; overflow:hidden; border-radius:2px; }
.nav-user-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--background); }
.nav-user .nav-user-chevron { width:16px; height:16px; flex-shrink:0; transition:transform .15s; }
.nav-user[open] .nav-user-chevron { transform:rotate(180deg); }
.nav-user-menu .nav-logout-form { margin-top:5px; padding-top:5px; border-top:1px solid var(--line); }
.nav-logout { display:flex; align-items:center; gap:9px; width:100%; min-height:44px; padding:10px; border:0; border-radius:3px; background:transparent; color:var(--primary); font-size:.8rem; cursor:pointer; text-align:left; }
.nav-logout:hover { background:#ff660010; color:#ff8b4d; }
.nav-teams { position:relative; min-width:0; max-width:240px; z-index:30; }
.nav-teams summary { display:flex; align-items:center; gap:9px; min-height:38px; padding:5px 9px 5px 5px; border:1px solid var(--line); border-radius:4px; cursor:pointer; list-style:none; font-size:.78rem; }
.nav-teams summary::-webkit-details-marker { display:none; }
.nav-teams summary:hover, .nav-teams[open] summary { border-color:var(--muted); }
.nav-team-avatar { position:relative; display:grid; place-items:center; width:26px; height:26px; flex-shrink:0; overflow:hidden; border-radius:2px; background:#2b241f; color:var(--accent); font-size:.78rem; font-weight:700; }
.nav-team-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--background); }
.nav-team-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-team-chevron { width:15px; height:15px; flex-shrink:0; }
.nav-teams svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-team-menu { position:absolute; top:calc(100% + 9px); right:0; width:280px; max-width:calc(100vw - 28px); padding:6px; border:1px solid var(--line); border-radius:5px; background:#141414; box-shadow:0 16px 40px #0008; }
.nav-team-menu form { max-height:320px; overflow-y:auto; }
.nav-team-option { display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:8px; border:0; border-radius:3px; background:transparent; color:var(--text); text-align:left; font-size:.78rem; cursor:pointer; }
.nav-team-option > span:not(.nav-team-avatar) { min-width:0; flex:1; overflow-wrap:anywhere; }
.nav-team-option:hover, .nav-team-option[aria-current] { background:#ffffff09; }
.nav-team-check { width:17px; height:17px; flex-shrink:0; color:var(--primary); }
.nav-team-link { display:flex; align-items:center; gap:10px; min-height:45px; padding:10px 8px 6px; margin-top:5px; border-top:1px solid var(--line); text-decoration:none; color:var(--muted); font-size:.78rem; }
.nav-team-link svg { width:26px; height:20px; flex-shrink:0; }
.nav-team-link:hover { color:var(--text); }
.message { width: min(720px, calc(100% - 48px)); margin: 18vh auto 0; }
.message h1 { margin: 0 0 20px; font-size: clamp(2.2rem, 6vw, 4.21rem); }
.message p { color: var(--muted); }
.message a { color: var(--accent); }
@media (max-width: 1150px) {
  .site-nav { padding-inline:28px; }
}
@media (max-width: 760px) {
  .site-nav { height:60px; padding-inline:18px; }
  .site-brand strong { font-size: 1.3rem; }
  .faceit-login { font-size: .65rem; padding-inline: 11px; }
}
@media (max-width: 640px) {
  .site-beta { display:none; }
  .nav-upload { width:32px; flex-shrink:0; padding:0; }
  .nav-upload span { display:none; }
  .nav-teams .nav-team-name { display:none; }
  .nav-teams { flex:0 0 auto; }
  .nav-account { gap: 9px; }
  .faceit-login { min-height: 40px; }
  .nav-start { min-height: 32px; padding-inline: 11px; }
  .site-nav { padding-inline:14px; gap:10px; }
  .site-brand { flex-shrink:0; }
  .nav-account { flex:1; justify-content:flex-end; gap:7px; }
  .nav-start, .nav-user { flex-shrink:0; }
  .nav-teams summary { gap:5px; padding-right:5px; font-size:.68rem; }
  .nav-team-avatar { width:22px; height:22px; }
  .nav-team-chevron { width:12px; height:12px; }
  .nav-team-menu { right:-41px; }
}
@media (max-width: 380px) {
  .site-brand { gap:5px; }
  .site-brand strong { font-size:1.1rem; }
  .site-beta { font-size:.5rem; padding:4px; }
  .nav-start { font-size:.65rem; padding-inline:7px; }
}

@media (max-width:380px) {
  .site-nav { padding-inline:10px; gap:6px; }
  .nav-account { gap:4px; }
  .nav-user summary { width:58px; height:38px; gap:5px; }
  .nav-teams .nav-team-chevron { display:none; }
}

@media(max-width:640px){.nav-scenarios{display:none}}
.cs2-maintenance {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 18px;
  border-bottom: 1px solid #d29b20;
  background: #ffe8a3;
  color: #302300;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
}
.cs2-maintenance[hidden] { display: none; }
.cs2-maintenance strong { font-weight: 800; }