styles.css

/* ============================================================
   FlashRT — minimalistic blog (MonarchRT-inspired)
   Clean, dense, text-first. White background, blue accents.
   ============================================================ */

:root{
  --ink:#1f2d3d;        /* headings */
  --body:#2c3742;       /* body text */
  --muted:#5f6b78;      /* secondary text */
  --cap:#555;           /* figure captions */
  --blue:#4b6cb7;       /* accent (boxes, rules) */
  --link:#2c6eab;       /* links */
  --blue-dark:#0f598a;  /* TL;DR label */
  --green:#27ae60;      /* highlight numbers */
  --line:#e7e9ee;       /* hairlines */
  --soft:#fafbfc;       /* zebra / soft fills */
  --box:#fbfcfe;        /* box background */
  --max:920px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:#ffffff;
  color:var(--body);
  font-family:'Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px;}

a{color:var(--link);text-decoration:none;}
a:hover{text-decoration:underline;}

p{margin:0 0 14px;text-align:justify;}
strong{color:var(--ink);font-weight:700;}
em{font-style:italic;}
.hi{color:var(--green);font-weight:700;white-space:nowrap;}

/* ---------- Hero ---------- */
.hero{padding:56px 0 30px;text-align:center;}
.hero h1{
  font-size:2.05rem;line-height:1.22;margin:0 0 18px;
  color:var(--ink);font-weight:800;letter-spacing:-0.015em;
}
.hero .tagline{color:var(--blue-dark);}
.authors{font-size:1.04rem;color:var(--ink);line-height:1.9;}
.authors a{color:var(--link);font-weight:600;}
.authors sup{font-weight:400;color:var(--muted);}
.affil{font-size:.9rem;color:var(--muted);margin-top:8px;}
.hero-btns{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#1f2933;color:#fff;padding:9px 20px;border-radius:999px;
  font-size:.95rem;font-weight:600;
}
.btn:hover{background:#0e1720;text-decoration:none;}
.btn svg{width:16px;height:16px;fill:currentColor;}

/* ---------- TL;DR ---------- */
.tldr{
  border:1px solid rgba(75,108,183,.30);
  border-left:4px solid var(--blue);
  background:var(--box);
  border-radius:8px;
  padding:18px 22px;
  margin:30px 0 6px;
  line-height:1.7;
}
.tldr p{text-align:left;margin:0;}
.tldr .lbl{font-weight:900;color:var(--blue-dark);}

/* ---------- Sections ---------- */
section{padding:38px 0;border-top:1px solid var(--line);}
section:first-of-type{border-top:none;}
h2.sec{
  text-align:center;font-size:1.62rem;color:var(--ink);
  font-weight:800;margin:0 0 4px;letter-spacing:-0.01em;
}
h2.sec .ic{margin-right:.35em;}
.sec-sub{
  text-align:justify;color:var(--body);
  margin:8px 0 20px;
}
h3{font-size:1.2rem;color:var(--ink);font-weight:700;margin:30px 0 6px;line-height:1.3;}
h3 .model{
  display:inline-block;margin-left:.5em;font-size:.72rem;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  vertical-align:middle;
}
h4{font-size:1.04rem;color:var(--ink);font-weight:700;margin:22px 0 6px;}
.lead{color:var(--body);}

/* ---------- Boxes ---------- */
.box{
  border:1px solid rgba(75,108,183,.26);
  border-left:4px solid var(--blue);
  background:var(--box);
  border-radius:7px;
  padding:13px 18px;
  margin:16px 0;
}
.box p{text-align:left;margin:0;}
.box.note{border-color:#cdd7e6;border-left-color:#8299c1;background:#fbfcfd;}
.box .tag{font-weight:700;color:var(--blue-dark);}
.box.note .tag{color:#546a8c;}

/* ---------- Tables ---------- */
.tbl-wrap{overflow-x:auto;margin:14px 0 6px;}
table{width:100%;border-collapse:collapse;font-size:.93rem;}
thead th{
  text-align:left;color:var(--muted);font-weight:700;
  border-bottom:2px solid #dce0e8;padding:9px 12px;
  font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
tbody td{padding:9px 12px;border-bottom:1px solid #eef0f4;vertical-align:top;}
tbody tr:nth-child(odd){background:var(--soft);}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
tbody tr.best{background:#eaf4ff;}
tbody tr.best td{font-weight:600;color:var(--ink);}
.cap-note{font-size:.9rem;color:var(--cap);margin:4px 0 0;text-align:left;}
.fn{color:var(--muted);font-style:italic;font-size:.82em;font-weight:400;}

/* ---------- Figures ---------- */
figure{margin:22px 0;text-align:center;}
figure img{max-width:100%;border-radius:8px;border:1px solid var(--line);}
figure.narrow img{max-width:70%;}
figure.fig-float{float:left;width:340px;margin:6px 26px 10px 0;}
figure.fig-float figcaption{text-align:left;max-width:100%;}
figure.fig-clear{clear:both;}
figcaption{
  font-size:.88rem;color:var(--cap);margin:9px auto 0;
  max-width:92%;line-height:1.5;text-align:center;
}

/* ---------- Pipeline steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0;}
.step{border:1px solid var(--line);border-radius:8px;padding:13px 15px;background:#fff;}
.step .n{
  width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;margin-bottom:9px;
}
.step h4{margin:0 0 4px;font-size:.97rem;}
.step p{margin:0;font-size:.87rem;text-align:left;color:var(--muted);line-height:1.5;}

/* ---------- Then / Now ---------- */
.point{margin:20px 0;}
.tn{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0;}
.tn .col{border:1px solid var(--line);border-radius:8px;padding:13px 16px;background:#fff;}
.tn .col.now{border-color:rgba(75,108,183,.35);background:var(--box);}
.tn .lbl{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);
}
.tn .col.now .lbl{color:var(--blue);}
.tn p{margin:6px 0 0;font-size:.93rem;text-align:left;line-height:1.55;}

/* ---------- Applications (horizontal scroll) ---------- */
.apps-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 16px;}
.app-tab{
  border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:999px;padding:6px 14px;font-family:inherit;font-weight:600;
  font-size:.86rem;line-height:1.2;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.app-tab:hover{color:var(--ink);border-color:#cfd6e0;}
.app-tab.active{background:#1f2933;color:#fff;border-color:#1f2933;}

.apps-viewport{display:flex;align-items:center;gap:10px;}
.app-arrow{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink);border:1px solid #d7dce4;cursor:pointer;
  box-shadow:0 1px 4px rgba(20,30,50,.07);
  transition:background .15s,border-color .15s,color .15s;
}
.app-arrow:hover{background:#1f2933;color:#fff;border-color:#1f2933;}
.app-arrow svg{width:18px;height:18px;}

.apps-scroll{
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.apps-scroll::-webkit-scrollbar{display:none;}
.apps-strip{display:flex;gap:20px;align-items:stretch;}
.app-card{
  flex:0 0 auto;width:100%;scroll-snap-align:center;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:18px 24px 22px;
}
.app-card>h3:first-child{margin-top:2px;}
.app-card .cap-note{margin-top:8px;}

/* ---------- Platform toggle (segmented control) ---------- */
.plat-toggle{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;
  width:max-content;margin:2px auto 12px;
  background:#eef1f5;border-radius:999px;padding:4px;
}
.plat-slider{
  position:absolute;z-index:0;top:4px;bottom:4px;left:4px;
  width:calc(50% - 4px);
  background:var(--blue);border-radius:999px;
  box-shadow:0 1px 4px rgba(75,108,183,.34);
  transition:transform .24s cubic-bezier(.4,0,.2,1);
}
#results[data-plat="mi355x"] .plat-slider{transform:translateX(100%);}
.plat-btn{
  position:relative;z-index:1;
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:.86rem;padding:8px 24px;
  color:var(--muted);white-space:nowrap;transition:color .2s;
}
.plat-btn:hover{color:var(--ink);}
#results[data-plat="b200"] .plat-btn[data-plat="b200"],
#results[data-plat="mi355x"] .plat-btn[data-plat="mi355x"]{color:#fff;}
.plat-panel{display:none;}
#results[data-plat="b200"] .plat-panel[data-plat="b200"]{display:block;}
#results[data-plat="mi355x"] .plat-panel[data-plat="mi355x"]{display:block;}

/* ---------- Citation ---------- */
.cite{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.86rem;line-height:1.55;color:#33404d;
  background:#f7f9fb;border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;overflow-x:auto;white-space:pre;margin:8px 0 0;
}

/* ---------- Two-up mini cards (vision targets) ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
.duo .card{border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:#fff;}
.duo .card h4{margin:0 0 6px;}
.duo .card p{text-align:left;font-size:.95rem;margin:0 0 8px;}
.duo ul{margin:0;padding-left:18px;color:var(--muted);font-size:.88rem;line-height:1.6;}
.duo li{margin:2px 0;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:26px 0 44px;text-align:center;color:var(--muted);font-size:.9rem;}
footer .flinks{margin-bottom:8px;}
footer .flinks a{margin:0 9px;font-weight:600;}
footer .meta{font-size:.82rem;color:#96a0ac;}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  body{font-size:16px;}
  .hero h1{font-size:1.62rem;}
  .steps{grid-template-columns:1fr 1fr;}
  .tn,.duo{grid-template-columns:1fr;}
  p,.tldr p{text-align:left;}
  figure.fig-float{float:none;width:100%;margin:22px 0;}
  figure.fig-float figcaption{text-align:center;}
  .app-arrow{display:none;}
}