html, body { margin: 0; height: 100%; background: #050706; }

/* The terminal's outline, drawn by the browser from the first byte: the
   header, the coin list, the coin page and the trade column, in the
   terminal's own sizes and colours (lib/web_terminal.dart, ExfilSite), so
   the page isn't blank while Flutter's engine loads. boot.js removes
   it on Flutter's first frame. */
#boot {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  color: #F5F3F0; pointer-events: none;
}
#boot header {
  height: 64px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 24px; box-sizing: border-box;
}
#boot .logo { font: 800 20px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; }
#boot .tag {
  font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .1em; padding: 5px 9px;
  border-radius: 999px; border: 1px solid #2A3633; color: #B9F27C;
}
#boot .tag.beta { color: #F2B54E; }
#boot .search {
  flex: 1; max-width: 620px; height: 40px; margin-left: 24px;
  border-radius: 999px; border: 1px solid #1C2422;
}
#boot main {
  flex: 1; display: flex; gap: 12px; padding: 0 12px 48px; min-height: 0;
}
#boot section {
  border-radius: 20px; border: 1px solid #1C2422;
  background: linear-gradient(#121A18, #0B100F);
  display: flex; flex-direction: column; gap: 14px; padding: 20px;
  box-sizing: border-box; overflow: hidden;
}
#boot .coins { width: 264px; flex: none; }
#boot .page { flex: 1; }
#boot .trade { width: 344px; flex: none; }
#boot .bar {
  height: 14px; border-radius: 7px; background: #1C2422;
  animation: boot-glow 1.4s ease-in-out infinite;
}
#boot .bar.wide { height: 44px; border-radius: 12px; }
#boot .bar.chart { flex: 1; border-radius: 14px; }
#boot .bar.pill { height: 52px; border-radius: 999px; background: #2A3633; }
@keyframes boot-glow { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #boot .bar { animation: none; } }
@media (min-width: 1440px) {
  #boot .coins { width: 312px; }
  #boot .trade { width: 384px; }
}
/* Under three columns the coin list folds into the search box. */
@media (max-width: 1179px) { #boot .coins { display: none; } }
@media (max-width: 760px) { #boot .trade { display: none; } #boot .search { display: none; } }