:root {
  color-scheme: light;
  --paper: #faf8f4;
  --ink: #292d29;
  --muted: #68675f;
  --line: #dcd9d1;
  --red: #ac3b29;
  --green: #376348;
}
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.7 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }
.topbar { min-height: 80px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 650; }
.tool-name { color: var(--muted); font-size: 13px; }
main { width: min(100% - 48px, 580px); margin: 64px auto 72px; }
.eyebrow { color: var(--red); font-size: 11px; font-weight: 650; }
h1 { margin: 14px 0 8px; font-size: 34px; font-weight: 600; line-height: 1.4; }
.heading p { margin: 0; color: var(--muted); font-size: 14px; }
.heading p span { padding-inline: 8px; }
.release-info { margin: 34px 0 24px; padding-block: 16px; border-block: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; }
.release-info div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }
dd a { text-decoration: underline; text-underline-offset: 4px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
button { min-height: 58px; padding: 16px; border: 1px solid var(--red); border-radius: 6px; background: var(--red); color: white; font-size: 16px; font-weight: 600; line-height: 1.4; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: background .18s, border-color .18s; }
button img { filter: invert(1); flex: 0 0 auto; }
button:hover:not(:disabled) { background: #8f3021; border-color: #8f3021; }
button:active:not(:disabled) { background: #7d2a1d; }
#update { background: transparent; color: var(--ink); border-color: #8b8d80; }
#update img { filter: none; }
#update:hover:not(:disabled) { background: #e9ede5; border-color: var(--green); }
button:disabled { cursor: not-allowed; background: #e8e5de; color: #75746d; border-color: #d2cfc7; }
button:disabled img { filter: none; opacity: .45; }
#update:disabled { background: transparent; border-color: #d2cfc7; color: #75746d; }
.safety { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 16px 0 28px; }
.status-area { min-height: 154px; padding-top: 23px; border-top: 1px solid var(--line); }
.status-heading { display: grid; grid-template-columns: 8px minmax(0, 1fr) 40px; gap: 10px; align-items: center; }
.status-dot { width: 7px; height: 7px; background: var(--muted); border-radius: 50%; }
.status-dot[data-state="working"], .status-dot[data-state="ready"], .status-dot[data-state="success"] { background: var(--green); }
.status-dot[data-state="error"] { background: var(--red); }
h2 { font-size: 14px; font-weight: 600; margin: 0; }
output { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
progress { display: block; width: 100%; height: 4px; appearance: none; border: 0; border-radius: 0; margin-top: 17px; background: #e5e2da; color: var(--green); }
progress::-webkit-progress-bar { background: #e5e2da; }
progress::-webkit-progress-value { background: var(--green); transition: width .18s linear; }
progress::-moz-progress-bar { background: var(--green); }
#status-detail { font-size: 13px; line-height: 1.8; color: var(--muted); margin: 12px 0 0; overflow-wrap: anywhere; }
details { font-size: 12px; color: var(--muted); margin-top: 18px; }
summary { width: fit-content; cursor: pointer; padding-block: 8px; }
ol { margin: 8px 0; padding-left: 20px; }
li { padding-block: 3px; }
footer { width: min(100% - 48px, 580px); margin: 0 auto 28px; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; font-size: 11px; color: var(--muted); }
.noscript { color: var(--red); }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .topbar { min-height: 68px; padding-inline: 24px; }
  main { margin-top: 40px; }
  h1 { font-size: 28px; }
  button { font-size: 14px; padding-inline: 10px; }
  .actions { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }