/* ============================================================================
   piCO × IQOS Kiosk — pixel-perfect redesign (Figma: iqos / Section 1)
   Base canvas is a fixed 1024×768 kiosk stage, scaled to fit the viewport.
   All screen values are taken 1:1 from Figma node 754:7244 (Home) etc.
   ========================================================================== */

/* ---- IQOS brand fonts (provided by client) ---- */
@font-face {
  font-family: "IQOS";
  src: url("assets/fonts/IQOS-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IQOS";
  src: url("assets/fonts/IQOS-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IQOS";
  src: url("assets/fonts/IQOS-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens (extracted from Figma) ---- */
:root {
  --bg: #282728;          /* kiosk background */
  --cyan: #00d1d2;        /* primary accent (IQOS) */
  --cyan-glow: #08d1cd;   /* glow color */
  --cyan-bright: #09d0cc; /* device fill */
  --red: #dd4228;         /* cigarette accent */
  --track: #224949;       /* glow track background */
  --white: #ffffff;
  --white-65: rgba(255, 255, 255, 0.65);

  --font: "IQOS", "Montserrat", "Segoe UI", system-ui, sans-serif;

  --stage-w: 1024px;
  --stage-h: 768px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Freeze animations at frame 0 for pixel-diff testing (?still=1). */
.no-anim *, .no-anim *::before, .no-anim *::after {
  animation: none !important;
  transition: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Letterbox wrapper centers the scaled stage on screen */
#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

/* The fixed-size kiosk canvas; JS scales it via transform */
#stage {
  position: relative;
  width: var(--stage-w);
  height: var(--stage-h);
  background: transparent; /* full-window .co-pattern shows through */
  overflow: hidden;
  transform-origin: center center;
  flex: none;
}

/* ---- Shared background CO watermark (present on most screens) ---- */
.co-pattern {
  position: absolute;
  inset: 0; /* full stage */
  /* Subtle CO watermark: a full-screen staggered grid of individual glyphs
     (generated in app.js) that gently twinkle — brighter toward the centre,
     fading out toward the edges. No parent blur (it would force a full-screen
     re-raster every animation frame); the glyphs are faint enough as-is. */
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.co-glyph {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 32px; /* ≈ Figma watermark glyph (~45×23px) */
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
  opacity: 0.026; /* base shade when animation is disabled (screenshots) */
  animation-name: co-twinkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes co-twinkle {
  0%, 100% { opacity: var(--o-min, 0.006); }
  50%      { opacity: var(--o-max, 0.02); }
}

/* ---- Screen router ---- */
.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}
.screen.active {
  opacity: 1;
  visibility: visible;
}

/* ---- Shared chrome: IQOS logo + language toggle ---- */
.iqos-logo {
  position: absolute;
  top: 56px;
  left: 50%;
  width: 124px;
  height: 40px;
  transform: translateX(-50%);
  background-image: url("assets/img/logo-iqos.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.lang-toggle {
  position: absolute;
  top: 60px;
  left: 800px; /* Figma: calc(83.33% - 53.33px) on 1024 */
  display: flex;
  align-items: center;
  gap: 9px;
  z-index: 2;
}
.lang-btn {
  height: 32px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 46px;
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: var(--white-65);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.lang-btn.active {
  color: var(--cyan);
  border-color: var(--cyan);
}

/* ---- Primary pill button (Start / Next) ---- */
.btn-pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  border: none;
  border-radius: 46px;
  color: var(--white);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-pill:hover { filter: brightness(1.06); }
.btn-pill:active { transform: translateX(-50%) scale(0.98); }

/* ---- Disclaimer line ---- */
.disclaimer {
  position: absolute;
  top: 688px;
  left: 50%;
  width: 420px;
  height: 48px;
  transform: translate(-50%, -50%); /* Figma centers the block on y=688 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  font-size: 16px;
  line-height: normal;
  color: var(--white);
  text-align: center;
}

/* ============================================================================
   SCREEN: Home (Figma node 754:7244)
   ========================================================================== */
#screen-home .home-heading {
  position: absolute;
  top: 136px;
  left: 50%;
  width: 568px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  color: var(--cyan);
  text-align: center;
  word-break: break-word;
}

#screen-home .home-illustration {
  position: absolute;
  /* Crop is 470×330 centered on the Figma illustration center (512,396) to
     include the device base glows that bleed past the 414×273 layout box. */
  top: 231px;
  left: 50%;
  width: 470px;
  height: 330px;
  transform: translateX(-50%);
  /* Base scene WITHOUT molecules — stays static; molecules float on top. */
  background-image: url("assets/img/home-illustration-base.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Feather the crop edges so the soft glow halo dissolves into the bg
     instead of showing a hard rectangular seam. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

/* ---- Animated CO-level fill bars over the bottom tracks ---- */
#screen-home .track-fill {
  position: absolute;
  top: 519px;
  height: 14px;
  border-radius: 100px;
  z-index: 1;
  will-change: width;
}
#screen-home .track-red {
  left: 305px;
  background: #dd4228;
  box-shadow: 0 0 28px 3px rgba(221, 66, 40, 0.5), 0 0 9px rgba(221, 66, 40, 0.85);
  animation: track-red 4.6s ease-in-out infinite;
}
#screen-home .track-cyan {
  left: 543px;
  background: #09d0cc;
  box-shadow: 0 0 24px 3px rgba(8, 209, 205, 0.55), 0 0 8px rgba(8, 209, 205, 0.9);
  animation: track-cyan 4.6s ease-in-out infinite;
}
/* cigarette: fills almost to the end (lots of CO) */
@keyframes track-red {
  0%, 8%    { width: 14px; }
  42%, 60%  { width: 158px; }
  94%, 100% { width: 14px; }
}
/* IQOS: barely fills (very little CO) */
@keyframes track-cyan {
  0%, 8%    { width: 14px; }
  42%, 60%  { width: 28px; }
  94%, 100% { width: 14px; }
}

/* ---- Floating CO molecules (Figma red glowing rings with "CO") ---- */
#screen-home .molecule {
  position: absolute;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 184, 168, 0.55);
  box-shadow:
    0 0 11px 2px rgba(221, 66, 40, 0.5),
    0 0 4px 1px rgba(221, 66, 40, 0.8),
    inset 0 0 5px rgba(221, 66, 40, 0.35);
  color: #e8553c;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.5px;
  z-index: 2;
  will-change: transform;
}
/* cyan variant — molecules next to the IQOS device */
#screen-home .molecule.cyan {
  border-color: rgba(180, 255, 255, 0.55);
  box-shadow:
    0 0 11px 2px rgba(8, 209, 205, 0.5),
    0 0 4px 1px rgba(8, 209, 205, 0.8),
    inset 0 0 5px rgba(8, 209, 205, 0.35);
  color: #2fd9d2;
}

/* positions (stage-absolute; element is 22px so left/top = center − 11).
   All sit in the empty zones BESIDE the devices (cigarette ≈ x355–410,
   IQOS ≈ x577–625) — never on top of them.
   LEFT (cigarette) = many RED; RIGHT (IQOS) = a couple of faint CYAN. */
#screen-home .m1 { left: 303px; top: 305px; animation: co-appear 4.2s ease-in-out infinite 0s; }
#screen-home .m2 { left: 303px; top: 368px; animation: co-appear 4.8s ease-in-out infinite 0.6s; }
#screen-home .m3 { left: 427px; top: 368px; animation: co-appear 4.4s ease-in-out infinite 1.2s; }
#screen-home .m4 { left: 458px; top: 462px; animation: co-appear 5.0s ease-in-out infinite 0.3s; }
#screen-home .m5 { left: 336px; top: 430px; animation: co-appear 4.6s ease-in-out infinite 1.8s; }
#screen-home .m6 { left: 466px; top: 315px; animation: co-appear 4.0s ease-in-out infinite 0.9s; }
/* the two IQOS-side molecules: appear rarely and stay faint */
#screen-home .m7 { left: 646px; top: 340px; animation: co-appear-faint 7.5s ease-in-out infinite 2.4s; }
#screen-home .m8 { left: 666px; top: 400px; animation: co-appear-faint 8.5s ease-in-out infinite 5.0s; }

/* gentle "appear": fade + scale in, drift up, fade out — then loop */
@keyframes co-appear {
  0%   { opacity: 0; transform: translateY(7px) scale(0.65); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 0; transform: translateY(-11px) scale(0.85); }
}
@keyframes co-appear-faint {
  0%   { opacity: 0; transform: translateY(6px) scale(0.65); }
  25%  { opacity: 0.5; transform: translateY(0) scale(0.95); }
  65%  { opacity: 0.5; transform: translateY(-2px) scale(0.95); }
  100% { opacity: 0; transform: translateY(-9px) scale(0.85); }
}

#screen-home .home-start {
  top: 592px;
}

/* ============================================================================
   SCREEN: Which one are you? (Figma node 754:7514)
   ========================================================================== */
#screen-which .which-center {
  position: absolute;
  left: 50%;
  top: calc(50% - 1px);
  transform: translate(-50%, -50%);
  width: 568px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
#screen-which .which-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
#screen-which .which-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 272px;
}
#screen-which .profile-btn {
  width: 272px;
  height: 56px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  border: none;
  border-radius: 46px;
  color: var(--white);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
#screen-which .profile-btn:hover { filter: brightness(1.06); }
#screen-which .profile-btn:active { transform: scale(0.98); }

/* ============================================================================
   SCREEN: Get Ready (Figma node 754:7781)
   ========================================================================== */
#screen-getready .getready-center {
  position: absolute;
  left: 50%;
  top: 240px;
  transform: translateX(-50%);
  width: 568px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
#screen-getready .getready-heading {
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
#screen-getready .getready-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 332px;
}
#screen-getready .getready-ring {
  width: 160px;
  height: 160px;
  background-image: url("assets/img/getready-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  animation: getready-spin 1.4s linear infinite;
}
@keyframes getready-spin {
  to { transform: rotate(360deg); }
}
#screen-getready .getready-sub {
  font-weight: 300;
  font-size: 24px;
  line-height: normal;
  color: var(--white);
  text-align: center;
}

/* ============================================================================
   SCREEN: Deep breath in! / Exhale — countdown phases (Figma 754:8047, 754:8419)
   ========================================================================== */
.breathe-heading {
  position: absolute;
  top: 240px;
  left: 50%;
  width: 573px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
.breathe-countdown {
  position: absolute;
  top: 326px;
  left: 50%;
  width: 272px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.breathe-number {
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 128px;
  line-height: 1;
  color: var(--cyan);
}
.breathe-sub {
  width: 272px;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  color: var(--white);
  text-align: center;
}

/* ============================================================================
   Glowing pill component — Exhale / Ready! (Figma 754:8423)
   ========================================================================== */
.glow-pill {
  position: absolute;
  height: 160px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a505c;
  border: 4px solid var(--cyan);
  border-radius: 100px;
  box-shadow: inset -4px -4px 20px #00d1d2, inset 4px 4px 20px #00d1d2;
}
.glow-pill span {
  font-weight: 700;
  font-size: 96px;
  line-height: 1.35;
  color: var(--white);
  white-space: nowrap;
  text-shadow:
    0 0 11.124px #00d1d2,
    0 0 22.248px #00d1d2,
    0 0 77.868px #00d1d2,
    0 0 155.736px #00d1d2,
    0 0 250px #00d1d2;
}

/* Exhale: pill below the heading (Figma top 326) */
#screen-exhale .glow-pill {
  top: 326px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
}

/* Ready!: pill centered slightly above mid (Figma fill center y≈401) */
#screen-ready .glow-pill {
  top: 316px;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
}

/* ============================================================================
   SCREEN: While we're waiting — intro video (Figma node 754:8486)
   ========================================================================== */
.video-kicker {
  position: absolute; top: 141px; left: 50%; width: 568px; transform: translateX(-50%);
  font-weight: 300; font-size: 24px; line-height: 1.35; color: var(--white); text-align: center;
}
.video-heading {
  position: absolute; top: 173px; left: calc(50% - 0.5px); width: 573px; transform: translateX(-50%);
  font-weight: 700; font-size: 32px; line-height: 1.35; color: var(--cyan); text-align: center;
}
.video-box {
  position: absolute; top: 240px; left: 50%; width: 716px; height: 472px; transform: translateX(-50%);
  border-radius: 16px; overflow: hidden; background: #000;
}
.video-box video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================================
   SCREEN: Result (Figma node 754:8574 etc.)
   ========================================================================== */
.result-title {
  position: absolute;
  top: 240px;
  left: calc(50% + 0.5px);
  width: 573px;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  color: var(--white);
  text-align: center;
}
.result-ppm {
  position: absolute;
  top: 326px;
  left: 50%;
  width: 391px;
  height: 128px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 96px;
  line-height: 1.35;
  color: var(--cyan);
  text-align: center;
}
.result-message {
  position: absolute;
  top: 454px;
  left: 50%;
  width: 716px;
  transform: translateX(-50%);
  font-weight: 400;
  font-size: 24px;
  line-height: normal;
  color: var(--cyan);
  text-align: center;
}
.result-next { top: 592px; }

/* ============================================================================
   Shared gradient gauge (See-in-which-group screen + mobile share)
   ========================================================================== */
.gauge-bar {
  position: absolute; top: 0; left: 0; height: 48px; border-radius: 100px;
  background: linear-gradient(to right, #08d1cd 0%, #f0d04c 49.5%, #dd4228 100%);
}
.gauge-labels {
  position: absolute; top: 56px; left: 0; right: 0; display: flex; justify-content: space-between;
  font-weight: 400; font-size: 16px; color: var(--white);
}
.gauge-marker { position: absolute; top: 8px; width: 28px; }
.gauge-marker .tail { position: absolute; left: 13px; top: 18px; width: 2px; height: 22px; background: var(--white); }
.gauge-marker .bubble {
  position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.gauge-marker .bubble span { font-weight: 400; font-size: 20px; line-height: 1; color: var(--band, var(--cyan)); }

/* ============================================================================
   SCREEN: See in which group you landed (Figma node 754:8508)
   ========================================================================== */
#screen-group { --band: var(--cyan); }
#screen-group[data-band="mid"]  { --band: #f0d04c; }
#screen-group[data-band="high"] { --band: #dd4228; }

#screen-group .group-heading {
  position: absolute; top: 240px; left: calc(50% + 0.5px); width: 715px; transform: translateX(-50%);
  font-weight: 700; font-size: 40px; line-height: 1.35; color: var(--white); text-align: center;
}
#screen-group .group-gauge {
  position: absolute; top: 342px; left: 50%; width: 420px; height: 81px; transform: translateX(-50%);
}
#screen-group .gauge-bar { width: 420px; }
#screen-group .group-verdict {
  position: absolute; top: 442px; left: 50%; width: 568px; transform: translateX(-50%);
  font-weight: 400; font-size: 24px; line-height: normal; color: var(--band); text-align: center;
}
#screen-group .group-actions {
  position: absolute; top: 592px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 24px; align-items: center;
}
#screen-group .group-actions button {
  height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 46px; font-weight: 400; font-size: 24px; line-height: normal; cursor: pointer; white-space: nowrap;
}
#screen-group .btn-outline { width: 228px; background: transparent; border: 2px solid var(--cyan); color: var(--cyan); }
#screen-group .group-save { background: var(--cyan); border: none; color: var(--white); }
#screen-group .group-actions button:active { transform: scale(0.98); }

/* ============================================================================
   SCREEN: THANK YOU! / Scan the QR (Figma node 754:8497)
   ========================================================================== */
.thanks-kicker {
  position: absolute; top: 136px; left: 50%; width: 568px; transform: translateX(-50%);
  font-weight: 700; font-size: 32px; line-height: 1.35; color: var(--cyan); text-align: center;
}
.thanks-heading {
  position: absolute; top: 240px; left: calc(50% + 0.5px); width: 715px; transform: translateX(-50%);
  font-weight: 700; font-size: 40px; line-height: 1.35; color: var(--white); text-align: center;
}
.thanks-qr {
  position: absolute; top: 318px; left: 50%; width: 224px; height: 224px; transform: translateX(-50%);
}
.thanks-qr svg { display: block; width: 100%; height: 100%; }
.thanks-qr svg rect { fill: transparent; }     /* drop the white background */
.thanks-qr svg path { fill: var(--cyan); }      /* cyan QR modules */
.thanks-startover { top: 590px; }

/* 6+PPM variant recolours the headline + message (amber, per Figma 754:8744) */
#screen-result[data-band="high"] .result-ppm,
#screen-result[data-band="high"] .result-message { color: #f0d04c; }

/* ============================================================================
   Operator panel (not part of the kiosk canvas — fixed to the viewport)
   ========================================================================== */
#op-toggle {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 20, 0.55);
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#op-toggle:hover { background: rgba(40, 40, 40, 0.85); }
#op-panel button:disabled { opacity: 0.5; cursor: default; }

#op-panel {
  position: fixed;
  left: 14px;
  bottom: 62px;
  width: 300px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(18, 18, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: #e6e6e6;
  font-size: 13px;
}
#op-panel[hidden] { display: none; }
#op-panel .op-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
}
#op-panel .op-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px currentColor;
  color: #ef4444;
}
#op-panel .op-dot.connected { background: #22c55e; color: #22c55e; }
#op-panel #op-close { margin-left: auto; background: none; border: none; color: #999; cursor: pointer; font-size: 14px; }
#op-panel .op-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; align-items: center; }
#op-panel .op-row.op-mini { font-size: 12px; color: #aaa; }
#op-panel select {
  flex: 1 1 0;
  min-width: 0;            /* allow the flex item to shrink below its content */
  max-width: 100%;
  padding: 6px;
  background: #2a2a2e;
  color: #eee;
  border: 1px solid #444;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#op-panel button {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: #2a2a2e;
  color: #eee;
  border: 1px solid #444;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
#op-panel button:hover { background: #3a3a40; }
#op-panel button.op-primary { background: var(--cyan); color: #06343a; border-color: var(--cyan); font-weight: 600; }
#op-panel .op-log {
  margin-top: 8px;
  max-height: 96px;
  overflow-y: auto;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 11px;
  color: #9aa;
  white-space: pre-wrap;
  line-height: 1.5;
}