/* Scoped SPARK 2.3 illustration and progressive-enhancement tabs. */
#spark {
  --paper: #090909;
  --paper-raised: #111212;
  --line: #2d3031;
  --ink-soft: #a8afb4;
  --muted: #8c959b;
  background: var(--paper);
}
#spark .spark-view-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
#spark [hidden] { display: none; }
#spark .spark-view-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 10px 0 13px; background: none; color: var(--muted); font-size: 0.82rem; cursor: pointer; }
#spark .spark-view-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
#spark .spark-view-tabs button span { font-size: 0.56rem; color: var(--green); margin-left: 7px; text-transform: uppercase; }
#spark .spark-view-tabs button:focus-visible, #spark .spark-view-panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
#spark .spark-view-panel + .spark-view-panel { margin-top: 24px; }
#spark [data-spark-tabs-ready="true"] .spark-view-panel { margin-top: 0; }
#spark .spark-home-frame, #spark .spark-chat-figure { margin: 0; border: 1px solid #2a3033; border-radius: 12px; overflow: hidden; background: #080909; }
#spark .spark-preview-bar { height: 44px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #272d30; background: #111313; font-size: 0.69rem; color: #9eafbb; }
#spark .spark-window-dots { display: flex; gap: 5px; }
#spark .spark-window-dots i { width: 6px; height: 6px; background: #4d5355; border-radius: 50%; }
#spark .spark-home-preview { padding: 24px; color: #e9edef; }
#spark .spark-home-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
#spark .spark-home-label { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 600; }
#spark .spark-home-label > span { display: flex; width: 24px; height: 24px; }
#spark .spark-home-label svg { width: 100%; height: 100%; }
#spark .spark-home-switches { display: flex; flex-wrap: wrap; gap: 15px; font-size: 0.56rem; color: #9b9c9e; }
#spark .spark-home-switches span { display: flex; align-items: center; gap: 5px; }
#spark .spark-home-switches i { width: 5px; height: 5px; border-radius: 50%; background: #616463; }
#spark .spark-home-grid { display: grid; grid-template-columns: 0.95fr 1.13fr 1fr; gap: 14px; }
#spark .spark-home-card { min-width: 0; border: 1px solid #2c3032; border-radius: 10px; padding: 20px; background: linear-gradient(145deg, #151819, #0e1011); }
#spark .spark-clock-card { display: flex; flex-direction: column; justify-content: center; min-height: 255px; }
#spark .spark-clock-label { margin: 0 0 17px; font-size: 0.56rem; font-weight: 650; letter-spacing: 1.8px; text-transform: uppercase; color: #97a4ad; }
#spark .spark-clock { margin: 0 0 14px; font-size: 3.625rem; font-weight: 550; line-height: 1.1; letter-spacing: -4px; }
#spark .spark-clock-date { margin: 0 0 7px; font-size: 0.69rem; color: #c3cbd0; }
#spark .spark-clock-caption { margin: 0; font-size: 0.56rem; color: #83909a; }
#spark .spark-calendar-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 0.75rem; font-weight: 650; }
#spark .spark-calendar-title > span:last-child { color: #8e9ca5; letter-spacing: 10px; }
#spark .spark-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; row-gap: 9px; font-size: 0.625rem; }
#spark .spark-weekday { margin-bottom: 4px; font-size: 0.5rem; font-weight: 600; color: #8d9da8; }
#spark .spark-calendar-day { width: 25px; height: 25px; line-height: 25px; margin: auto; color: #c9d0d4; }
#spark .spark-day-selected { border-radius: 50%; background: #92c3f5; color: #07131e; font-weight: 650; }
#spark .spark-metrics-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.75rem; font-weight: 650; }
#spark .spark-metrics-scope { border: 1px solid #303334; color: #9b9da0; border-radius: 4px; padding: 3px 6px; font-size: 0.5rem; font-weight: 450; }
#spark .spark-metrics-subtitle { margin: 0 0 17px; font-size: 0.56rem; color: #8b999f; }
#spark .spark-measure { margin-bottom: 18px; }
#spark .spark-measure-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.625rem; color: #b8c1c6; }
#spark .spark-measure-top strong { font-size: 1rem; color: #e6e8e9; font-weight: 500; }
#spark .spark-meter-track { height: 3px; border-radius: 4px; background: #303333; margin-top: 8px; overflow: hidden; }
#spark .spark-meter-track > span { display: block; height: 100%; background: #a9c3bd; }
#spark .spark-meter-cpu { width: 12%; }
#spark .spark-meter-memory { width: 38%; }
#spark .spark-metrics-note { display: flex; justify-content: space-between; font-size: 0.56rem; color: #82918e; margin-top: 22px; }
#spark .spark-metrics-note i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #99c5b8; margin: 0 5px 1px 0; }
#spark .spark-work-card { margin-top: 14px; padding: 17px 20px; background: #0d0f10; border: 1px solid #292d2f; border-radius: 10px; }
#spark .spark-work-heading { display: flex; justify-content: space-between; font-size: 0.69rem; color: #d2d9dc; margin-bottom: 13px; font-weight: 600; }
#spark .spark-work-heading > span:last-child { font-size: 0.56rem; color: #7d8b93; font-weight: 450; }
#spark .spark-work-columns { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; }
#spark .spark-work-columns > div + div { border-left: 1px solid #262c30; padding-left: 25px; }
#spark .spark-work-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 0.625rem; color: #bdc5c9; padding: 6px 0; }
#spark .spark-work-row small { font-size: 0.5rem; color: #778892; white-space: nowrap; }
#spark .spark-work-idle { color: #83949e; }
#spark .spark-view-caption { font-size: 0.69rem; line-height: 1.7; color: var(--muted); padding: 10px 2px 0; margin: 0; }
#spark .spark-chat-boundary { margin: 12px 0 0; color: var(--muted); font-size: 0.75rem; line-height: 1.8; }
#spark .spark-chat-figure img { display: block; width: 100%; height: auto; }
#spark .spark-chat-figure figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 24px; padding: 14px 20px; border-top: 1px solid var(--line); }
#spark .spark-chat-figure figcaption a { display: inline-flex; align-items: center; gap: 7px; color: var(--cyan); white-space: nowrap; min-height: 30px; }
@media (max-width: 900px) {
  #spark .spark-home-preview { padding: 18px; }
  #spark .spark-home-card { padding: 15px; }
  #spark .spark-clock { font-size: 2.875rem; }
  #spark .spark-home-switches { gap: 10px; }
  #spark .spark-calendar-day { width: 22px; height: 22px; line-height: 22px; }
}
@media (max-width: 760px) {
  #spark .spark-home-preview { padding: 14px; }
  #spark .spark-home-top { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 14px; }
  #spark .spark-home-grid { grid-template-columns: 0.9fr 1.1fr; gap: 9px; }
  #spark .spark-home-card { padding: 12px; }
  #spark .spark-clock-card { min-height: 173px; }
  #spark .spark-clock { font-size: 2.375rem; letter-spacing: -2px; margin-bottom: 10px; }
  #spark .spark-clock-label { font-size: 0.44rem; letter-spacing: 1px; margin-bottom: 13px; }
  #spark .spark-clock-date { font-size: 0.5rem; max-width: 13ch; }
  #spark .spark-clock-caption { display: none; }
  #spark .spark-calendar-title { font-size: 0.5rem; margin-bottom: 11px; }
  #spark .spark-calendar-title > span:last-child { font-size: 0.625rem; letter-spacing: 3px; }
  #spark .spark-calendar-grid { font-size: 0.5rem; row-gap: 5px; }
  #spark .spark-weekday { font-size: 0.375rem; margin-bottom: 1px; }
  #spark .spark-calendar-day { width: 16px; height: 16px; line-height: 16px; }
  #spark .spark-metrics-card { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; padding: 14px; }
  #spark .spark-metrics-heading, #spark .spark-metrics-subtitle, #spark .spark-metrics-note, #spark .spark-temperature { grid-column: 1 / -1; }
  #spark .spark-metrics-subtitle { margin-bottom: 13px; }
  #spark .spark-measure { margin-bottom: 11px; }
  #spark .spark-temperature { font-size: 0.5rem; }
  #spark .spark-metrics-note { margin-top: 9px; font-size: 0.5rem; }
  #spark .spark-measure-top strong { font-size: 0.875rem; }
  #spark .spark-work-card { margin-top: 9px; padding: 12px; }
  #spark .spark-work-columns { grid-template-columns: 1fr; gap: 5px; }
  #spark .spark-work-columns > div + div { border-left: 0; border-top: 1px solid #262c30; padding: 8px 0 0; }
  #spark .spark-work-heading { font-size: 0.625rem; margin-bottom: 7px; }
  #spark .spark-work-heading > span:last-child { display: none; }
  #spark .spark-work-row { font-size: 0.56rem; padding: 4px 0; }
  #spark .spark-work-row small { font-size: 0.44rem; }
  #spark .spark-home-switches { font-size: 0.44rem; gap: 9px; }
  #spark .spark-home-switches i { width: 4px; height: 4px; }
  #spark .spark-home-label { font-size: 0.75rem; }
  #spark .spark-home-label > span { width: 19px; height: 19px; }
  #spark .spark-preview-kind { display: none; }
  #spark .spark-preview-bar { padding: 0 14px; font-size: 0.625rem; }
  #spark .spark-view-caption { font-size: 0.625rem; }
  #spark .spark-chat-figure figcaption { flex-direction: column; align-items: flex-start; padding: 12px 16px; gap: 6px; }
}
@media (max-width: 370px) {
  #spark .spark-home-card { padding: 9px; }
  #spark .spark-calendar-day { width: 14px; height: 16px; line-height: 16px; }
  #spark .spark-calendar-title { font-size: 0.46rem; }
  #spark .spark-clock { font-size: 2rem; }
  #spark .spark-home-switches { gap: 7px; font-size: 0.4rem; }
}