:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17212b;
  background: #f8fafc;
  font-synthesis: none;
  letter-spacing: 0;
}
.header-actions { display:flex; align-items:center; gap:20px; }
#theme-toggle { position:relative; z-index:102; width:38px; height:38px; border:1px solid #d5dfe6; border-radius:50%; background:transparent; color:inherit; font-size:23px; display:grid; place-items:center; }
.welcome { position:fixed; inset:0; z-index:100; width:100%; height:100dvh; border:0; border-radius:0; background:#f8fafc; color:#17212b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:80px 24px; text-align:center; }
.welcome-title { font-size:56px; line-height:1.16; font-weight:600; max-width:950px; }
.welcome-hint { font-size:14px; color:#64717e; }
:root[data-theme="dark"] { color-scheme:dark; color:#eef2f6; background:#111316; }
[data-theme="dark"] .welcome { background:#111316; color:#eef2f6; }
[data-theme="dark"] header,[data-theme="dark"] footer,[data-theme="dark"] .installation,[data-theme="dark"] details { border-color:#30363d; }
[data-theme="dark"] .workspace { background:#1b1e23; border-color:#343b43; }
[data-theme="dark"] .release { background:#202a33; }
[data-theme="dark"] p,[data-theme="dark"] .welcome-hint { color:#a8b3bf; }
[data-theme="dark"] .release-meta span,[data-theme="dark"] .platform,[data-theme="dark"] .release-bottom,[data-theme="dark"] .included,[data-theme="dark"] .eyebrow,[data-theme="dark"] .text-button { color:#afbeca; }
[data-theme="dark"] .release-bottom,[data-theme="dark"] .purchase-link { border-color:#35414c; }
[data-theme="dark"] input { background:#13161a; border-color:#45515c; color:#eef2f6; }
[data-theme="dark"] .primary { background:#c1e4fa; color:#14232e; }
[data-theme="dark"] .primary:hover { background:#d9effc; }
[data-theme="dark"] .notice { background:#302b20; border-color:#5b5037; color:#e5d4ab; }
[data-theme="dark"] .purchase-link a { color:#a3d5f3; }
[data-theme="dark"] dialog { background:#1b1e23; border-color:#45515c; color:#eef2f6; }
[data-theme="dark"] #status.error { color:#ffaaa4; }
@media(max-width:700px) { .welcome-title { font-size:34px; } .header-actions { gap:12px; } }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
a {
  -webkit-tap-highlight-color: transparent;
}
button,
input {
  font: inherit;
}
button,
a {
  touch-action: manipulation;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
[hidden] {
  display: none !important;
}
header,
main,
footer {
  max-width: 1040px;
  margin: auto;
}
header {
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e6eb;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 21px;
  font-weight: 650;
}
.brand img {
  object-fit: contain;
}
.studio,
.eyebrow,
.step-label,
.platform {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
}
.studio {
  color: #71808e;
}
.intro {
  padding: 62px 0 39px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #637689;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2b9e87;
}
h1 {
  font-size: 46px;
  line-height: 1.13;
  font-weight: 600;
  margin: 18px 0;
}
p {
  font-size: 15px;
  line-height: 1.65;
  color: #64717e;
}
.intro p {
  font-size: 17px;
  margin: 0;
}
.notice {
  background: #fff3d9;
  border: 1px solid #eddfb9;
  color: #655526;
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border: 1px solid #dfe6ec;
  border-radius: 8px;
  overflow: hidden;
}
.release {
  padding: 34px 38px 0;
  background: #edf5fb;
}
.release-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.app-icon {
  object-fit: contain;
}
.platform {
  font-size: 10px;
  color: #607a90;
  padding-top: 10px;
}
h2 {
  font-size: 27px;
  line-height: 1.2;
  font-weight: 600;
  margin: 24px 0 10px;
}
.release-description {
  margin: 0;
}
.release-meta {
  display: flex;
  gap: 44px;
  margin: 31px 0 24px;
}
.release-meta div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.release-meta span {
  font-size: 11px;
  color: #687d8c;
}
.release-meta strong {
  font-size: 13px;
  font-weight: 550;
}
.included {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px 7px;
  font-size: 13px;
  color: #48616f;
  margin-bottom: 30px;
}
.check {
  color: #158c79;
}
.release-bottom {
  border-top: 1px solid #d8e6ef;
  padding: 16px 0;
  font-size: 11px;
  color: #69808e;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tiny-lock {
  font-size: 8px;
}
.access {
  padding: 38px;
}
.step-label {
  color: #7c8a97;
  font-size: 10px;
}
.access h2 {
  margin-top: 18px;
}
.access > p {
  font-size: 14px;
  margin: 0 0 22px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 9px;
}
input {
  width: 100%;
  height: 47px;
  border: 1px solid #ced8e0;
  background: #fff;
  border-radius: 6px;
  padding: 0 13px;
  color: #17212b;
  font-size: 15px;
}
input::placeholder {
  color: #a0aab4;
}
.primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 47px;
  border: 0;
  border-radius: 6px;
  background: #223747;
  color: #fff;
  font-size: 13px;
  font-weight: 550;
  padding: 12px 16px;
  margin-top: 12px;
}
.primary:hover {
  background: #324f64;
}
.primary span:last-child {
  font-size: 20px;
  font-weight: 400;
}
.form-note {
  font-size: 11px;
  line-height: 1.6;
  margin: 12px 0;
  color: #8a949d;
}
.text-button {
  border: 0;
  background: none;
  padding: 0;
  color: #647783;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text-button:hover {
  color: #17212b;
}
.purchase-link {
  border-top: 1px solid #edf0f3;
  margin-top: 24px;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  font-size: 12px;
  color: #7d8993;
}
.purchase-link a {
  color: #2c617f;
  font-weight: 550;
}
#shop-unavailable {
  color: #8c969e;
}
#status {
  font-size: 12px;
  line-height: 1.6;
  color: #486775;
  margin: 14px 0 0;
  min-height: 0;
}
#status.error {
  color: #a43131;
}
.verified {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #1d7b61;
  font-size: 13px;
  margin: 25px 0;
}
.verified span {
  background: #e1f4eb;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
#code {
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.installation {
  padding: 44px 0 34px;
  border-bottom: 1px solid #e0e6eb;
}
.installation h2 {
  font-size: 23px;
  margin: 10px 0 26px;
}
.installation ol {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  margin: 0;
  padding: 0;
}
.installation li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.number {
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d5dfe6;
  border-radius: 50%;
  font-size: 11px;
  color: #597386;
}
h3 {
  font-size: 13px;
  font-weight: 600;
  margin: 4px 0 5px;
}
.installation p {
  font-size: 12px;
  margin: 0;
  max-width: 230px;
}
.questions {
  padding: 32px 0 42px;
  max-width: 720px;
}
.questions h2 {
  font-size: 21px;
  margin: 0 0 14px;
}
details {
  border-bottom: 1px solid #e2e8ed;
}
summary {
  font-size: 13px;
  cursor: pointer;
  padding: 17px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
summary::after {
  content: "+";
  color: #8092a0;
  font-size: 17px;
}
details[open] summary::after {
  content: "-";
}
details p {
  font-size: 13px;
  margin: 0 0 20px;
}
footer {
  padding: 24px 0 32px;
  border-top: 1px solid #e0e6eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8a969f;
  font-size: 11px;
}
footer div {
  display: flex;
  gap: 24px;
}
footer .text-button {
  font-size: 11px;
  text-decoration: none;
}
dialog {
  max-width: 540px;
  width: calc(100% - 32px);
  border: 1px solid #d6e0e7;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 15px 70px #14273628;
}
dialog::backdrop {
  background: #192b3c66;
  backdrop-filter: blur(6px);
}
dialog h2 {
  font-size: 23px;
  margin: 0;
}
dialog p {
  font-size: 13px;
}
.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dialog-heading button {
  background: none;
  border: 0;
  font-size: 27px;
  color: #64717e;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid #6db3e1;
  outline-offset: 4px;
}
@media (max-width: 1120px) {
  header,
  main,
  footer {
    margin-left: 32px;
    margin-right: 32px;
  }
}
@media (max-width: 700px) {
  header,
  main,
  footer {
    margin-left: 20px;
    margin-right: 20px;
  }
  header {
    height: 78px;
  }
  .studio {
    font-size: 9px;
  }
  .intro {
    padding-top: 36px;
  }
  h1 {
    font-size: 34px;
  }
  .intro p {
    font-size: 15px;
  }
  .workspace {
    grid-template-columns: 1fr;
  }
  .release {
    padding: 26px 26px 0;
  }
  .app-icon {
    width: 84px;
    height: 84px;
  }
  .release h2 {
    margin-top: 16px;
  }
  .release-meta {
    margin-top: 24px;
  }
  .included {
    margin-bottom: 22px;
  }
  .access {
    padding: 28px 26px;
  }
  .installation ol {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .installation p {
    max-width: none;
  }
  .questions {
    padding-bottom: 30px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  button,
  a {
    transition:
      background 0.15s,
      color 0.15s;
  }
  .workspace {
    animation: appear 0.4s ease-out;
  }
  @keyframes appear {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}