@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --font-ui: "Plus Jakarta Sans", "Poppins", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --radius-xs: 0.45rem;
  --radius-sm: 0.72rem;
  --radius-md: 1rem;
  --radius-lg: 1.2rem;
  --radius-pill: 999px;

  --accent-a: #74b8ff;
  --accent-b: #63d6bb;
  --accent-c: #f2b68c;

  --bg-base: #070d1a;
  --bg-overlay: rgba(8, 14, 26, 0.6);
  --panel-glass: rgba(15, 24, 40, 0.45);
  --panel-solid: rgba(16, 25, 43, 0.88);
  --panel-border: rgba(255, 255, 255, 0.18);
  --field-bg: rgba(255, 255, 255, 0.12);
  --field-border: rgba(255, 255, 255, 0.24);
  --text-main: #eaf0ff;
  --text-muted: #c2cce6;
  --text-inverse: #f7fbff;
  --table-border: rgba(255, 255, 255, 0.14);
  --alert-bg: #ef4444;
  --shadow-soft: 0 18px 55px rgba(2, 7, 20, 0.35);
  --accent-shadow: 0 12px 34px rgba(100, 182, 255, 0.26);
  --icon-filter: invert(100%) sepia(3%) saturate(298%) hue-rotate(180deg)
    brightness(108%) contrast(97%);
}

html {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-ui);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  color: var(--text-main);
  background:
    linear-gradient(160deg, var(--bg-base), var(--bg-overlay)),
    radial-gradient(circle at 14% 4%, var(--accent-a) 0%, transparent 38%),
    radial-gradient(circle at 87% 2%, var(--accent-b) 0%, transparent 35%),
    radial-gradient(circle at 60% 92%, var(--accent-c) 0%, transparent 34%);
  background-attachment: fixed;
  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    background-image 0.8s ease;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
  filter: blur(30px);
  opacity: 0.22;
}

body::before {
  width: 28rem;
  height: 28rem;
  top: -9rem;
  left: -6rem;
  background: radial-gradient(circle, var(--accent-a) 0%, transparent 70%);
}

body::after {
  width: 24rem;
  height: 24rem;
  right: -7rem;
  bottom: -7rem;
  background: radial-gradient(circle, var(--accent-b) 0%, transparent 70%);
}

a {
  color: inherit;
}

h2,
h3,
h4 {
  margin-top: 0;
  letter-spacing: 0.01em;
}

p {
  color: var(--text-muted);
  line-height: 1.6;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1100;
  border-bottom: 1px solid var(--panel-border);
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent-a) 30%, var(--panel-glass)),
    color-mix(in srgb, var(--accent-b) 26%, var(--panel-glass))
  );
  backdrop-filter: blur(18px) saturate(145%);
  box-shadow: var(--shadow-soft);
  transition: background 0.5s ease;
}

header > div {
  width: min(72rem, 96%);
  margin: 0 auto;
  min-height: 4.35rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0;
}

header img {
  display: block;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

#languages-button {
  color: var(--text-inverse);
  font: inherit;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
}

#languages-button:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

#languages-button:active {
  transform: translateY(0);
}

#languages-select:focus-visible + #languages-button {
  outline: 2px solid color-mix(in srgb, var(--accent-a) 50%, white);
  outline-offset: 2px;
}

.language-control {
  position: relative;
}

#languages-select {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100%;
  cursor: pointer;
}

#languages-button {
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="%23FFFFFF" d="M20 18h-1.44a.6.6 0 0 1-.4-.12.8.8 0 0 1-.23-.31L17 15h-5l-1 2.54a.8.8 0 0 1-.22.3.6.6 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a12 12 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.4 13.4 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.2 17.2 0 0 1-5 2.1q.56.82.87 1.38a23.3 23.3 0 0 0 5.22-2.51 15.6 15.6 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.1 8.1 0 0 1-2.45 4.45 9.1 9.1 0 0 1-2.46-4.45"/></svg>');
  background-repeat: no-repeat;
  background-position: bottom 50% right 0.6em;
  background-size: 1.05rem;
  min-width: 6.6rem;
  min-height: 2.35rem;
  padding: 0.4rem 2.3rem 0.4rem 0.84rem;
  background-color: color-mix(in srgb, var(--accent-a) 45%, #2b3250);
  box-shadow: var(--accent-shadow);
}

.container {
  width: min(72rem, 96%);
  margin: 1.25rem auto 1.35rem;
}

.container > div {
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.3rem 1rem;
  background: linear-gradient(180deg, var(--panel-glass), var(--panel-solid));
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px) saturate(135%);
}

#models-autocomplete {
  display: flex;
  padding-top: 0.9rem;
  gap: 0.55rem;
}

.autocomplete {
  position: relative;
}

.autocomplete > input,
#versions,
#asu-packages,
#uci-defaults-content {
  border: 1px solid var(--field-border);
  background-color: var(--field-bg);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.autocomplete > input,
#versions {
  padding: 0.82rem 0.9rem;
}

.autocomplete > input {
  flex-grow: 1;
}

.autocomplete > input::placeholder {
  color: color-mix(in srgb, var(--text-muted) 70%, transparent);
}

#versions {
  min-width: 8rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.1rem;
  background-image:
    linear-gradient(130deg, transparent, transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23dbeafe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.85rem;
}

#versions option,
#versions optgroup {
  background-color: #16253c;
  color: #eaf0ff;
}

.autocomplete > input:focus,
#versions:focus,
#asu-packages:focus,
#uci-defaults-content:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent-a) 48%, white);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-a) 24%, transparent);
}

.autocomplete-items {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.3rem);
  z-index: 99;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-solid) 87%, transparent);
  backdrop-filter: blur(15px) saturate(145%);
  overflow: hidden;
}

.autocomplete-items div {
  padding: 0.72rem 0.85rem;
  cursor: pointer;
  border-top: 1px solid var(--table-border);
}

.autocomplete-items div:first-child {
  border-top: 0;
}

.autocomplete-active,
.autocomplete-items div:hover {
  background: linear-gradient(
    130deg,
    color-mix(in srgb, var(--accent-a) 48%, transparent),
    color-mix(in srgb, var(--accent-b) 38%, transparent)
  );
  color: var(--text-main);
}

#notfound h3 {
  text-align: center;
  margin-top: 1.5rem;
  color: color-mix(in srgb, #ef4444 82%, var(--text-main));
}

#build-title {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  line-height: 1.5;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-xs);
}

.row:hover {
  background-color: color-mix(in srgb, var(--field-bg) 72%, transparent);
}

.col1 {
  display: inline-block;
  width: 6.3rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.col1:after {
  content: ":";
}

.col2 {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col2 a {
  margin-right: 1rem;
}

#image-model {
  font-weight: 700;
}

#image-info,
#image-folder,
#image-link,
#uci-defaults-template {
  filter: var(--icon-filter);
}

#uci-defaults-group {
  position: relative;
}

#uci-defaults-template {
  position: absolute;
  right: 1rem;
  bottom: 0.5rem;
  width: 1.24rem;
  cursor: pointer;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 96 960 960' width='48px'%3E%3Cpath d='m388 976-20-126q-19-7-40-19t-37-25l-118 54-93-164 108-79q-2-9-2.5-20.5T185 576q0-9 .5-20.5T188 535L80 456l93-164 118 54q16-13 37-25t40-18l20-127h184l20 126q19 7 40.5 18.5T669 346l118-54 93 164-108 77q2 10 2.5 21.5t.5 21.5q0 10-.5 21t-2.5 21l108 78-93 164-118-54q-16 13-36.5 25.5T592 850l-20 126H388Zm92-270q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Zm0-60q-29 0-49.5-20.5T410 576q0-29 20.5-49.5T480 506q29 0 49.5 20.5T550 576q0 29-20.5 49.5T480 646Zm0-70Zm-44 340h88l14-112q33-8 62.5-25t53.5-41l106 46 40-72-94-69q4-17 6.5-33.5T715 576q0-17-2-33.5t-7-33.5l94-69-40-72-106 46q-23-26-52-43.5T538 348l-14-112h-88l-14 112q-34 7-63.5 24T306 414l-106-46-40 72 94 69q-4 17-6.5 33.5T245 576q0 17 2.5 33.5T254 643l-94 69 40 72 106-46q24 24 53.5 41t62.5 25l14 112Z'/%3E%3C/svg%3E");
}

#image-info {
  width: 1.25em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 -2 24 24' width='48px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}

#image-folder {
  width: 1.25em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 -2 24 24' width='48px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z'/%3E%3C/svg%3E");
}

#image-link {
  width: 1.25em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -2 24 24' width='24px' fill='%23000000'%3E%3Cpath d='M0 0h24v24H0z' fill='none' /%3E%3Cpath d='m 6.3 17.7 c -1.2 -1.2 -1.2 -3.2 0 -4.4 L 9.10 10.5 7.8 9 4.9 12 c -2 2 -2 5 0 7 2 2 5 2 7 0 l 2.8 -2.8 -1.3 -1.3 -2.8 2.8 c -1.2 1.2 -3.2 1.2 -4.4 0 z M 10 15.5 15.5 10 14 8.5 8.5 14 Z M 12 4.9 9.18 7.8 10.5 9.1 13.4 6.3 c 1.21 -1.2 3.2 -1.2 4.4 0 1.2 1.2 1.2 3.2 0 4.4 l -2.8 2.8 1.3 1.3 2.8 -2.8 c 2 -2 2 -5 0 -7 -2 -2 -5 -2 -7 0 z' /%3E%3C/svg%3E");
}

#downloads1,
#downloads2 {
  margin-top: 0.75rem;
}

#downloads2 {
  display: none;
}

#download-table1 {
  border-collapse: collapse;
  width: 100%;
}

#download-table1 tr {
  border-top: 1px solid var(--table-border);
}

#download-table1 tr:first-child {
  border-top: none;
}

#download-table1 td {
  padding: 1rem 0.5rem;
  vertical-align: top;
}

#download-links2 td {
  display: inline-flex;
  margin-right: 0.45rem;
  margin-bottom: 0.4rem;
}

#download-extras2 {
  padding-top: 0.8rem;
}

.download-link,
.custom-link {
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--text-inverse);
  background-image: linear-gradient(
    132deg,
    color-mix(in srgb, var(--accent-a) 72%, #294157),
    color-mix(in srgb, var(--accent-b) 70%, #274556)
  );
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  width: max-content;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: var(--accent-shadow);
}

.download-link {
  padding: 0.76rem 1rem;
  margin: 0.08rem;
}

.custom-link {
  padding: 0.76rem 1rem;
  margin: 0.8rem 0 0;
}

.download-link:hover,
.download-link-hover,
.custom-link:hover,
.custom-link-hover {
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.08);
}

.download-link :first-child {
  width: 30px;
  margin-right: 15px;
  margin-top: -0.12em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z' fill='%23fff'%3E%3C/path%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
}

.custom-link :first-child {
  width: 30px;
  margin-right: 15px;
  margin-top: -0.12em;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='m 19.4,44 -1,-6.3 q -0.95,-0.35 -2,-0.95 -1.05,-0.6 -1.85,-1.25 L 8.65,38.2 4,30 9.4,26.05 Q 9.3,25.6 9.275,25.025 9.25,24.45 9.25,24 9.25,23.55 9.275,22.975 9.3,22.4 9.4,21.95 L 4,18 8.65,9.8 l 5.9,2.7 q 0.8,-0.65 1.85,-1.25 1.05,-0.6 2,-0.9 L 19.4,4 h 9.2 l 1,6.3 q 0.95,0.35 2.025,0.925 Q 32.7,11.8 33.45,12.5 L 39.35,9.8 44,18 38.6,21.85 q 0.1,0.5 0.125,1.075 0.025,0.575 0.025,1.075 0,0.5 -0.025,1.05 Q 38.7,25.6 38.6,26.1 l 5.4,3.9 -4.65,8.2 -5.9,-2.7 q -0.8,0.65 -1.825,1.275 Q 30.6,37.4 29.6,37.7 l -1,6.3 z M 24,30.5 q 2.7,0 4.6,-1.9 1.9,-1.9 1.9,-4.6 0,-2.7 -1.9,-4.6 -1.9,-1.9 -4.6,-1.9 -2.7,0 -4.6,1.9 -1.9,1.9 -1.9,4.6 0,2.7 1.9,4.6 1.9,1.9 4.6,1.9 z m 0,-3 q -1.45,0 -2.475,-1.025 Q 20.5,25.45 20.5,24 20.5,22.55 21.525,21.525 22.55,20.5 24,20.5 q 1.45,0 2.475,1.025 Q 27.5,22.55 27.5,24 q 0,1.45 -1.025,2.475 Q 25.45,27.5 24,27.5 Z M 24,24 q 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 z m -2.2,17 h 4.4 l 0.7,-5.6 Q 28.55,35 30.025,34.15 31.5,33.3 32.7,32.1 l 5.3,2.3 2,-3.6 -4.7,-3.45 Q 35.5,26.5 35.625,25.675 35.75,24.85 35.75,24 q 0,-0.85 -0.1,-1.675 Q 35.55,21.5 35.3,20.65 L 40,17.2 38,13.6 32.7,15.9 Q 31.55,14.6 30.1,13.725 28.65,12.85 26.9,12.6 L 26.2,7 h -4.4 l -0.7,5.6 q -1.7,0.35 -3.175,1.2 -1.475,0.85 -2.625,2.1 L 10,13.6 8,17.2 12.7,20.65 Q 12.5,21.5 12.375,22.325 12.25,23.15 12.25,24 q 0,0.85 0.125,1.675 Q 12.5,26.5 12.7,27.35 L 8,30.8 l 2,3.6 5.3,-2.3 q 1.2,1.2 2.675,2.05 Q 19.45,35 21.1,35.4 Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
}

.help-content {
  font-size: 0.96rem;
  font-weight: 500;
  line-height: 1.35;
  vertical-align: middle;
  word-wrap: anywhere;
  color: var(--text-main);
}

.hash-content {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.05em;
  padding-top: 0.45rem;
  word-wrap: anywhere;
  color: var(--text-muted);
}

.download-help {
  margin-top: 0.45rem;
}

#asu {
  width: 100%;
}

#asu summary {
  cursor: pointer;
  user-select: none;
}

#asu-buildstatus {
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  margin-bottom: 0.9rem;
}

.asu-info {
  background-color: color-mix(in srgb, #1ec8a5 20%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, #1ec8a5 45%, transparent);
}

.asu-error {
  background-color: color-mix(in srgb, #f87171 16%, var(--panel-solid));
  border: 1px solid color-mix(in srgb, #f87171 46%, transparent);
}

#asu-stdout,
#asu-stderr {
  overflow: auto;
  max-height: 14rem;
  padding: 0.65rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--table-border);
  background: color-mix(in srgb, var(--field-bg) 66%, transparent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

#asu-packages,
#uci-defaults-content {
  resize: vertical;
  width: 100%;
  min-height: 8rem;
  padding: 0.8rem;
  line-height: 1.45;
}

#help {
  margin: 1rem 0;
}

#footer {
  font-size: 0.82rem;
  text-align: right;
  margin-top: 1.2rem;
  color: var(--text-muted);
}

#footer a {
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
}

.hide {
  display: none;
}

#alert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  min-height: 2.3rem;
  line-height: 2.3rem;
  padding: 0 1rem;
  text-align: center;
  background-color: var(--alert-bg);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

progress {
  accent-color: var(--accent-a);
}

@media (min-resolution: 400dpi), (max-width: 760px), (pointer: coarse) {
  .container > div {
    padding: 1rem 0.85rem 0.95rem;
  }

  #models-autocomplete {
    flex-direction: column !important;
  }

  #versions {
    margin-top: 0.22rem !important;
  }

  .autocomplete > input {
    margin-right: 0 !important;
  }

  .row {
    padding-left: 0.3rem !important;
    flex-direction: column;
    gap: 0.16rem;
  }

  .col1 {
    width: auto;
    font-weight: 600;
  }

  .col1:after {
    content: "";
  }

  #downloads1 {
    display: none !important;
  }

  #downloads2 {
    display: block !important;
  }

  #download-links2 td {
    display: block;
    margin-right: 0;
  }

  #footer {
    text-align: left;
    line-height: 1.8;
  }

  #languages-button {
    min-width: 5.8rem;
  }
}

@media (max-width: 480px) {
  header > div {
    min-height: 3.95rem;
  }

  header img {
    width: 152px;
    height: auto;
  }

  h2 {
    font-size: 1.38rem;
  }

  p {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}