:root {
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#1c293c;
  background:#f5f7fa;
  font-synthesis:none;
  --muted:#66758b;
  --line:#e0e6ee;
  --blue:#265cc9;
  --red:#b83c3e
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select {
  font:inherit
}
button,a,input,select,summary {
  touch-action:manipulation
}
button {
  border:1px solid #d8e0eb;
  border-radius:8px;
  padding:11px 15px;
  background:white;
  color:#28364b;
  font-weight:600;
  cursor:pointer;
  transition:background .12s
}
button:hover:not(:disabled) {
  background:#edf2f9
}
button:disabled {
  opacity:.42;
  cursor:not-allowed
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,pre:focus-visible {
  outline:3px solid #84aaff;
  outline-offset:3px
}
button.primary {
  background:var(--blue);
  color:white;
  border-color:var(--blue)
}
button.primary:hover:not(:disabled) {
  background:#174bad
}
button.danger {
  background:var(--red);
  color:#fff;
  border-color:var(--red)
}
button.danger:hover:not(:disabled) {
  background:#982b2e
}
button.quiet {
  background:#f6f8fb
}
button.small {
  padding:5px 9px;
  font-size:12px;
  font-weight:500
}
a {
  color:var(--blue);
  text-underline-offset:3px
}
[hidden] {
  display:none!important
}
.topbar {
  height:86px;
  padding:0 max(28px,calc((100% - 1380px)/2));
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  color:#1c293c;
  text-decoration:none;
  font-weight:800;
  font-size:17px;
  letter-spacing:1.5px
}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:2.6px;
  font-weight:600;
  color:var(--muted);
  margin-top:5px
}
.brand-mark {
  width:39px;
  height:39px;
  background:#213c66;
  color:#fff;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:25px;
  font-weight:700;
  letter-spacing:0
}
.local-badge {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#4d6078
}
.dot {
  height:7px;
  width:7px;
  background:#398169;
  display:inline-block;
  border-radius:50%
}
main {
  max-width:1436px;
  padding:38px 28px 24px;
  margin:auto
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:26px
}
.eyebrow {
  font-size:10px;
  font-weight:750;
  color:#718098;
  letter-spacing:1.8px;
  margin:0 0 12px
}
h1 {
  font-size:clamp(25px,3vw,34px);
  letter-spacing:-1px;
  font-weight:650;
  margin:0 0 10px
}
h2 {
  font-size:19px;
  font-weight:650;
  letter-spacing:-.4px;
  margin:0
}
.subtitle {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.text-link {
  font-size:12px;
  text-decoration:none;
  white-space:nowrap
}
.compatibility-note,.notice {
  padding:14px 18px;
  border:1px solid #e9d7af;
  border-radius:9px;
  background:#fff8e9;
  color:#7c602a;
  font-size:12px;
  line-height:1.7;
  margin-bottom:22px
}
.compatibility-note {
  background:#edf3fc;
  border-color:#d4e1f4;
  color:#4d6487
}
.header-tools {
  display:flex;
  align-items:center;
  gap:24px
}
.language-control {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  color:var(--muted)
}
.language-control select {
  max-width:180px;
  border:1px solid var(--line);
  border-radius:7px;
  background:white;
  color:#28364b;
  padding:8px;
  cursor:pointer
}
.notice {
  background:#fff0ef;
  border-color:#efc9c4;
  color:#993b35
}
.workspace {
  display:grid;
  grid-template-columns:minmax(365px,.91fr) minmax(0,1.25fr);
  gap:23px;
  align-items:start
}
.card {
  border:1px solid var(--line);
  background:#fff;
  border-radius:13px;
  padding:24px;
  box-shadow:0 4px 17px #142c4b03
}
.card-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px
}
.card-heading .eyebrow {
  margin-bottom:8px
}
.status-badge {
  font-size:10px;
  font-weight:600;
  color:#758196;
  border:1px solid #e1e6ed;
  border-radius:20px;
  padding:6px 9px;
  white-space:nowrap;
  background:#f8fafc
}
.status-badge.connected {
  color:#287255;
  border-color:#bde0ce;
  background:#eff9f4
}
.connection-row {
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap
}
.helper {
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
  margin:10px 0 18px
}
.device-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  margin:0 0 20px;
  gap:18px 10px
}
.device-grid span {
  display:block;
  color:#8995a6;
  font-size:9px;
  letter-spacing:1.3px;
  font-weight:600;
  margin-bottom:6px
}
.device-grid strong {
  display:block;
  font-size:11px;
  font-weight:550;
  overflow-wrap:anywhere
}
.drop-zone {
  display:flex;
  align-items:center;
  flex-direction:column;
  border:1.5px dashed #b9c8df;
  border-radius:10px;
  background:#f9fbff;
  padding:22px 16px;
  text-align:center;
  cursor:pointer;
  position:relative;
  gap:8px
}
.drop-zone:hover,.drop-zone.drag-over {
  background:#eef4ff;
  border-color:var(--blue)
}
.drop-zone strong {
  font-size:13px;
  overflow-wrap:anywhere;
  max-width:100%
}
.drop-zone>span:last-of-type {
  font-size:11px;
  color:#7d8a9f
}
.file-symbol {
  font-size:24px;
  line-height:1;
  color:var(--blue);
  margin-bottom:3px
}
.drop-zone input {
  width:1px;
  height:1px;
  position:absolute;
  opacity:0
}
.drop-zone:focus-within {
  outline:3px solid #84aaff;
  outline-offset:3px
}
.file-info {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:10px 0 0
}
.file-hash {
  font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#7c8aa0;
  overflow-wrap:anywhere;
  margin:4px 0 18px;
  min-height:15px
}
.action-stack {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.action-stack .quiet {
  grid-column:1/-1
}
.action-stack button {
  font-size:12px;
  padding:12px 8px
}
.baud-badge {
  font:10px ui-monospace,SFMono-Regular,monospace;
  color:#8a96a7;
  margin-left:auto
}
.terminal-toolbar {
  background:#162338;
  color:#a2b4ce;
  padding:11px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-radius:9px 9px 0 0;
  font-size:9px;
  letter-spacing:1px
}
.terminal-toolbar>div {
  display:flex;
  gap:4px
}
.terminal-toolbar button {
  font-size:10px;
  padding:5px 7px;
  background:#22334c;
  color:#c2cde0;
  border-color:#33445d;
  letter-spacing:0
}
.terminal-toolbar button:hover:not(:disabled) {
  background:#344761
}
.terminal-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#5d8b78;
  border-radius:50%;
  margin-right:7px
}
.terminal {
  background:#101c2e;
  color:#c6d5e8;
  padding:17px;
  margin:0;
  height:430px;
  overflow:auto;
  font:11px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
  word-break:break-all;
  tab-size:4
}
.terminal-footer {
  padding:11px 12px;
  background:#162338;
  border-radius:0 0 9px 9px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#8fa3be;
  font:9px/1.6 ui-monospace,SFMono-Regular,monospace
}
.help {
  margin-top:22px;
  font-size:11px;
  color:var(--muted);
  line-height:1.8
}
.help summary {
  cursor:pointer;
  font-weight:600;
  color:#4d617e
}
.help ul {
  padding-left:18px
}
.help li {
  padding-bottom:7px
}
.operation-status {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:17px
}
.operation-status>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:10px
}
.operation-status strong {
  font-size:11px;
  font-weight:500;
  color:var(--muted)
}
progress {
  width:100%;
  height:5px;
  border:0;
  border-radius:9px;
  overflow:hidden;
  accent-color:var(--blue)
}
progress::-webkit-progress-bar {
  background:#edf1f7
}
progress::-webkit-progress-value {
  background:var(--blue)
}
.error-text {
  font-size:12px;
  line-height:1.7;
  color:#a02b32;
  background:#fff3f2;
  padding:12px;
  border-radius:7px;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.backup-note {
  padding:12px;
  background:#f0f8f3;
  border:1px solid #cce5d6;
  border-radius:7px;
  font-size:11px;
  line-height:1.7;
  overflow-wrap:anywhere
}
.backup-note a {
  display:block;
  margin-top:5px
}
.activity-card {
  margin-top:23px
}
.activity-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.activity-heading h2 {
  font-size:13px
}
.activity-heading span {
  font-size:10px;
  color:#8491a4
}
#activityOutput {
  margin:14px 0 0;
  font:10px/1.9 ui-monospace,SFMono-Regular,monospace;
  color:#6c7d94;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:170px;
  overflow:auto
}
footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding-top:22px;
  color:#8b98aa;
  font-size:9px;
  letter-spacing:.5px
}
dialog {
  border:1px solid #d6dee9;
  border-radius:14px;
  padding:28px;
  max-width:490px;
  width:calc(100% - 32px);
  color:#1c293c;
  box-shadow:0 25px 90px #13294d40
}
dialog::backdrop {
  background:#101c2e91;
  backdrop-filter:blur(3px)
}
dialog p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted)
}
dialog .dialog-warning {
  color:#95642c;
  background:#fff6e7;
  padding:12px;
  border-radius:7px;
  font-size:11px
}
dialog label {
  display:block;
  font-size:12px
}
dialog input {
  display:block;
  margin-top:10px;
  border:1px solid #b9c8df;
  padding:10px;
  border-radius:6px;
  width:100%
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:24px
}
dialog h2 {
  font-size:23px
}
@media(min-width:1500px) {
  .terminal {
    height:455px
  }
}
@media(max-width:1000px) {
  .workspace {
    grid-template-columns:minmax(300px,.95fr) minmax(0,1.1fr);
    gap:16px
  }
  .card {
    padding:18px
  }
  .card-heading {
    flex-wrap:wrap
  }
  .terminal-toolbar {
    flex-wrap:wrap
  }
  .baud-badge {
    margin-left:0
  }
  .action-stack {
    grid-template-columns:1fr
  }
  .action-stack .quiet {
    grid-column:auto
  }
}
@media(max-width:740px) {
  .topbar {
    height:auto;
    min-height:100px;
    padding:15px 18px;
    flex-wrap:wrap;
    gap:13px
  }
  .header-tools {
    margin-left:auto
  }
  .local-badge {
    display:none
  }
  .language-control {
    flex-wrap:wrap;
    max-width:160px;
    gap:4px
  }
  .language-control select {
    max-width:160px
  }
  .brand {
    font-size:14px
  }
  .brand-mark {
    width:33px;
    height:33px;
    font-size:21px
  }
  main {
    padding:25px 16px
  }
  .intro {
    align-items:flex-start;
    flex-direction:column;
    gap:15px
  }
  .workspace {
    grid-template-columns:1fr
  }
  .card {
    padding:20px
  }
  .card-heading {
    flex-wrap:nowrap
  }
  .terminal {
    height:340px
  }
  .terminal-toolbar {
    flex-wrap:nowrap
  }
  .action-stack {
    grid-template-columns:1fr 1fr
  }
  .action-stack .quiet {
    grid-column:1/-1
  }
  .activity-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
  footer {
    flex-direction:column;
    line-height:1.7
  }
  .compatibility-note {
    font-size:11px
  }
  .subtitle {
    font-size:12px
  }
  .baud-badge {
    margin-left:auto
  }
}