/* =========================================================================
   littlemachines.fun / dato — "DUO: Key & Scale" firmware update page
   Same design system as the main landing page (chunky sticker cards, ink
   borders, Fredoka + Space Mono) on a mint "lab" stage instead of mustard.
   ========================================================================= */

:root{
  --paper:   #f0efe9;
  --bg:      #8cc79b;   /* mint stage */
  --bg-hi:   #c9ecce;
  --bg-dk:   #6fae83;
  --ink:     #362b27;   /* same ink as the main site */
  --orange:  #e3602c;
  --sky:     #71c6de;
  --olive:   #a2ba55;
  --gold:    #ecb055;
  --pink:    #f0b8c4;

  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --radius: 20px;
  --line: 4px solid var(--ink);

  --font-display: "Fredoka", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(circle at 50% 0%, var(--bg-hi) 0%, var(--bg) 45%, var(--bg-dk) 120%);
  line-height:1.6;
}

.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- breadcrumb */
.crumb{
  position:relative; z-index:1;
  padding:1rem clamp(1rem, 5vw, 2rem) 0;
}
.crumb a{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--ink);
  opacity:.75;
  border-bottom:2px solid transparent;
}
.crumb a:hover{ opacity:1; border-color:var(--orange); }
.crumb a:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; }

/* ---------------------------------------------------------------- layout */
.wrap{
  max-width:680px;
  margin:0 auto;
  padding:.5rem clamp(1rem, 5vw, 2rem) 3rem;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(1.1rem, 3.5vw, 1.6rem);
}

.badge{
  align-self:center;
  margin:.25rem 0 0;
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink);
  background:var(--paper);
  border:3px solid var(--ink);
  border-radius:999px;
  padding:.4rem .9rem;
  box-shadow:var(--shadow-sm);
}

/* ------------------------------------------------------------------ hero */
.hero{
  margin:0;
  background:var(--paper);
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:rotate(-1deg);
}
.hero img{
  display:block;
  width:100%;
  height:auto;
  padding:1.25rem 1.5rem .5rem;
  border-bottom:var(--line);
}
.lab-tag{
  font-family:var(--font-mono);
  font-size:clamp(.6rem, 2.1vw, .72rem);
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.5rem .75rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  color:var(--ink);
  background:repeating-linear-gradient(45deg,#fff 0 8px,#f4f2ea 8px 16px);
}
.lab-tag .dot{
  width:.6rem;height:.6rem;border-radius:50%;
  background:var(--sky);
  border:2px solid var(--ink);
  flex:none;
  animation:blink 1.6s steps(1,end) infinite;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.25} }

/* ----------------------------------------------------------------- pitch */
.pitch{ text-align:center; }
.kicker{
  margin:0 0 .3rem;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:clamp(.7rem,2.4vw,.85rem);
  color:var(--ink);
  opacity:.75;
}
.pitch h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  font-size:clamp(1.7rem, 6.5vw, 2.5rem);
  letter-spacing:-.005em;
  text-shadow:3px 3px 0 var(--paper), 4px 4px 0 var(--ink);
}
.pitch h1 .accent{ color:var(--orange); }
.tagline{
  margin:.75rem 0 0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1rem, 3.6vw, 1.2rem);
}

/* ------------------------------------------------------------------ card */
.card{
  background:var(--paper);
  border:var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.1rem, 4vw, 1.6rem) clamp(1.1rem, 4vw, 1.7rem);
}
.card h2{
  margin:0 0 .7rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.1rem, 3.4vw, 1.35rem);
}
.card .lede{ margin:0; font-size:1rem; }
.card .sub{
  margin:-.3rem 0 .9rem;
  font-size:.88rem;
  opacity:.75;
}
.card .lede + .sub{ margin-top:.8rem; }
.card p + p{ margin-top:.7rem; }

.bullets{
  margin:0; padding-left:1.2rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.bullets li{ font-size:.95rem; }
.bullets strong{ color:var(--orange); }

/* ---------------------------------------------------------- scale table */
.table-wrap{
  overflow-x:auto;
  border:3px solid var(--ink);
  border-radius:12px;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
  min-width:420px;
}
thead th{
  text-align:left;
  font-family:var(--font-mono);
  text-transform:uppercase;
  font-size:.68rem;
  letter-spacing:.06em;
  padding:.6rem .7rem;
  background:var(--ink);
  color:var(--paper);
}
tbody td{
  padding:.6rem .7rem;
  border-top:2px solid rgba(54,43,39,.12);
  vertical-align:middle;
}
tbody tr:nth-child(odd){ background:rgba(140,199,155,.12); }
td .dim{ opacity:.6; font-size:.85em; }
.swatch{
  display:block;
  width:1.35rem; height:1.35rem;
  border-radius:6px;
  border:2px solid var(--ink);
}

/* -------------------------------------------------------------- flash-card */

/* --------------------------------------------------------- flasher widget */
.flasher{ margin-top:1.2rem; }

.update-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  flex-wrap:wrap;
}

.btn-update{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--paper);
  background:var(--orange);
  border:3px solid var(--ink);
  border-radius:12px;
  padding:.8rem 1.3rem;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .08s ease, box-shadow .08s ease, background .15s ease, opacity .15s ease;
}
.btn-update:hover:not(:disabled){ background:#f0713c; }
.btn-update:active:not(:disabled){ transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); }
.btn-update:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
.btn-update:disabled{ cursor:default; opacity:.55; box-shadow:none; }

/* the DUO changed USB identity mid-update and needs one more click to
   finish — pulse the button so that isn't missed */
.btn-update.is-pulsing{ animation:btnPulse 1.1s ease-in-out infinite; }
@keyframes btnPulse{
  0%,100%{ background:var(--orange); box-shadow:var(--shadow-sm); }
  50%{ background:var(--sky); box-shadow:0 0 0 6px rgba(113,198,222,.35), var(--shadow-sm); }
}

/* three little dots that bounce while an update is running */
.update-anim{
  display:none;
  align-items:flex-end;
  gap:4px;
  height:1.1rem;
}
.update-anim.is-on{ display:inline-flex; }
.update-anim span{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--orange);
  animation:updateBounce 1s ease-in-out infinite;
}
.update-anim span:nth-child(2){ animation-delay:.15s; }
.update-anim span:nth-child(3){ animation-delay:.3s; }
@keyframes updateBounce{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(-6px); opacity:1; } }

.update-status{
  margin:.7rem 0 0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.8rem;
  opacity:.75;
  min-height:1.2em;
}
.update-status.ok{ color:#2f8f4e; opacity:1; }
.update-status.err{ color:var(--orange); opacity:1; }

.req-badge{
  display:inline-block;
  margin:0 0 .9rem;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink);
  background:var(--sky);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:.35rem .8rem;
}

.chrome-note{
  margin:.5rem 0 0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.72rem;
  opacity:.6;
}
.chrome-note a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--orange);
}
.chrome-note a:hover{ color:var(--orange); }
.chrome-note a:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

/* ------------------------------------------------------------ fine print */
.fine-print{
  font-family:var(--font-mono);
  font-size:.74rem;
  line-height:1.6;
  opacity:.7;
  text-align:center;
  max-width:56ch;
  margin:.5rem auto 0;
}

.foot{
  text-align:center;
  margin-top:.25rem;
}
.foot a{
  font-family:var(--font-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--orange);
}
.foot a:hover{ color:var(--orange); }
.foot a:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

/* -------------------------------------------------------- gentle motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; }
  .hero{ transform:none; }
}

@media (min-width:720px){
  .wrap{ padding-top:1rem; gap:1.9rem; }
  .hero{ transform:rotate(-1.4deg); }
}

/* narrow screens: the scale table stops being a scroll box and stacks into
   one bordered block per row, so no "feel" text ends up cut off */
@media (max-width:600px){
  .table-wrap{ overflow:visible; border:0; border-radius:0; }
  table{ min-width:0; font-size:.92rem; }
  thead{ display:none; }
  tbody, tbody tr, tbody td{ display:block; }
  tbody tr{
    border:3px solid var(--ink);
    border-radius:12px;
    background:var(--paper);
    padding:.7rem .9rem;
    margin-bottom:.6rem;
  }
  tbody tr:last-child{ margin-bottom:0; }
  tbody tr:nth-child(odd){ background:var(--paper); }
  tbody td{ padding:0; border:0; }
  tbody td:first-child,
  tbody td:nth-child(2){ display:inline-block; vertical-align:middle; }
  tbody td:first-child{ margin-right:.5rem; }
  tbody td:nth-child(2){ font-family:var(--font-display); font-weight:600; }
  tbody td:nth-child(3){ margin-top:.35rem; opacity:.9; }
}