:root{
  --ui-font: "SiteFont";

  /* theme tokens (dark defaults) */
  --bg: #000;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.60);
  --dim: rgba(255,255,255,0.35);

  --link: rgba(255,255,255,0.70);
  --linkHover: rgba(255,255,255,0.92);

  --overlay: rgba(0,0,0,0.55);
  --overlayHover: rgba(0,0,0,0.70);

  --progressTrack: rgba(255,255,255,0.14);
  --progressFill: rgba(255,255,255,0.85);

  --gridGap: 22px;

  /* grid visibility (dark mode) */
  --gridAlpha: 0.08;

  --focus:#6b6b6b;

  /* layout constants */
  --shellMax: 1050px;
  --padX: 12px; /* base horizontal padding */
  --padYTop: 14px;

  color-scheme: dark;
}

/* Light theme overrides */
html[data-theme="light"]{
  --bg: #fff;
  --text: rgba(0,0,0,0.92);
  --muted: rgba(0,0,0,0.60);
  --dim: rgba(0,0,0,0.35);

  --link: rgba(0,0,0,0.75);
  --linkHover: rgba(0,0,0,0.92);

  --overlay: rgba(255,255,255,0.70);
  --overlayHover: rgba(255,255,255,0.85);

  --progressTrack: rgba(0,0,0,0.14);
  --progressFill: rgba(0,0,0,0.70);

  --focus: rgba(0,0,0,0.45);

  /* grid visibility (light mode) */
  --gridAlpha: 0.06;

  color-scheme: light;
}

@font-face{
  font-family: "SiteFont";
  src:
    url("./font.woff2") format("woff2"),
    url("./font.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "SiteFont";
  src:
    url("./font.woff2") format("woff2"),
    url("./font.woff") format("woff");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui-font), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  overflow-x: hidden;
}

/* Grid: tiny pointy-top hex “dots” */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpolygon points='11,8.6 13.078,9.8 13.078,12.2 11,13.4 8.922,12.2 8.922,9.8' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: var(--gridGap) var(--gridGap);
  opacity: var(--gridAlpha);
}

/* Light mode: swap to black hex “dots” */
html[data-theme="light"] body::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpolygon points='11,8.6 13.078,9.8 13.078,12.2 11,13.4 8.922,12.2 8.922,9.8' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E");
}

/* Shimmer REMOVED (no body::after, no shine animation) */

.shell{
  position: relative;
  z-index: 1;
  max-width: var(--shellMax);
  margin: 0 auto;

  /* Safe-area aware symmetric padding */
  padding-top: var(--padYTop);
  padding-bottom: 22px;
  padding-left: calc(var(--padX) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--padX) + env(safe-area-inset-right, 0px));

  display: grid;
  gap: 12px;
}

/* CLI bar */
.cli-bar{
  display:flex;
  align-items:center;
  justify-content: center;
  flex-wrap:wrap;
  gap: 10px;

  /* use symmetric safe-area padding */
  padding: 8px calc(var(--padX) + env(safe-area-inset-right, 0px));
  padding-left: calc(var(--padX) + env(safe-area-inset-left, 0px));

  border: 0;
  background: transparent;
  backdrop-filter: none;
  font-size: 13px;
}

.cli-prompt{ color: var(--text); }

.cli-cursor{
  color: var(--text);
  margin-left: 4px;
  animation: cursorBlink 1.1s steps(1,end) infinite;
}

@keyframes cursorBlink{
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.cli-tab,
.cli-root{
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 2px 2px;
  cursor: pointer;
  letter-spacing: 0.2px;
  line-height: 1.4;
  font: inherit;
}

.cli-tab::before,
.cli-root::before{ content: "[ "; color: var(--dim); }
.cli-tab::after,
.cli-root::after{ content: " ]"; color: var(--dim); }

.cli-tab:hover,
.cli-root:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cli-tab:focus-visible,
.cli-root:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

.cli-tab[aria-pressed="true"]{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* root + theme toggle slightly dimmer */
.cli-root{ color: var(--muted); }

/* Layout container (invisible) */
.panel{ background: transparent; border: 0; overflow: visible; }

.panel-top{
  border: 0;
  background: transparent;

  /* safe-area aware padding to match the rest */
  padding: 10px calc(var(--padX) + env(safe-area-inset-right, 0px));
  padding-left: calc(var(--padX) + env(safe-area-inset-left, 0px));
}

.panel-title{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.reading-line{
  grid-column: 1;
  justify-self: start;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
}
.reading-line .updated-part{ color: var(--muted); }

.progress{
  grid-column: 2;
  justify-self: center;
  width: 420px;
  max-width: 100%;
  height: 2px;
  background: var(--progressTrack);
  position: relative;
  overflow: hidden;
}
.progress-fill{
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--progressFill);
  transform-origin: left center;
  transform: scaleX(1);
}

.right-tools{
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.export-btn{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.2px;
  color: var(--text);
  padding: 2px 2px;
}
.export-btn::before{ content: "[ "; color: var(--dim); }
.export-btn::after{ content: " ]"; color: var(--dim); }
.export-btn:hover{
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.export-btn:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* Content */
.content-layout{
  padding-top: 14px;
  padding-bottom: 16px;
  padding-left: calc(var(--padX) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--padX) + env(safe-area-inset-right, 0px));
}
.content{ min-height: 60vh; overflow-wrap: anywhere; }

/* Quotes */
.quote-rotator{
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;

  /* safe-area symmetric padding */
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: calc(var(--padX) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--padX) + env(safe-area-inset-right, 0px));
}
.quote-box{ max-width: 820px; }
.quote-text{ font-size: 20px; line-height: 1.65; color: var(--text); }
.quote-attrib{ margin-top: 12px; font-size: 13px; color: var(--muted); }
.fade{ opacity: 1; transition: opacity 900ms ease; }
.fade.out{ opacity: 0; }

/* Markdown */
.content h1, .content h2, .content h3{ line-height: 1.2; margin: 1.0em 0 0.45em; }
.content h1{ font-size: 20px; }
.content h2{ font-size: 17px; }
.content h3{ font-size: 15px; }

.content p, .content li{ line-height: 1.65; font-size: 15px; }

.content a{ color: var(--link); text-decoration: none; }
.content a:hover{
  color: var(--linkHover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.content a:visited{ color: var(--link); }

.content code{
  font-family: var(--ui-font), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 0.95em;
  background: rgba(127,127,127,0.10);
  border: 0;
  padding: 2px 6px;
}
.content pre{ overflow: auto; }
.content pre code{ display:block; padding: 12px; }

.content ul{ list-style-type: square; }
.muted{ color: var(--muted); }

/* Tables */
.content table{
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  table-layout: fixed;
}
.content th, .content td{
  border: 0;
  padding: 8px 10px;
  text-align:left;
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: inherit;
  line-height: inherit;
}

/* Mobile table-to-cards */
.mobile-table-cards{
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.mobile-table-card{ border: 0; background: transparent; padding: 0; }
.mobile-table-card-title{
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
.mobile-table-row{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  padding: 3px 0;
}
.mobile-table-key{ color: var(--muted); overflow-wrap: anywhere; }
.mobile-table-val{ color: var(--text); overflow-wrap: anywhere; }

@media (max-width: 680px){
  table.is-mobile-hidden{ display: none !important; }
  .cli-bar{ gap: 6px 10px; }
  .progress{ width: 260px; }
  .quote-text{ font-size: 17px; }
  .quote-attrib{ font-size: 12px; }
  .reading-line{ font-size: 11px; }
}

/* caret blink ONLY for the ^ symbol */
@keyframes caretBlink{
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* Back to top: pinned to inner right edge of container (safe-area aware) */
.back-to-top{
  position: fixed;
  right: calc(
    (100vw - min(var(--shellMax), 100vw - (2 * var(--padX)))) / 2
    + var(--padX)
    + env(safe-area-inset-right, 0px)
  );
  bottom: 14px;

  z-index: 6;

  appearance: none;
  border: 0;
  background: var(--overlay);
  backdrop-filter: blur(6px);

  padding: 10px 12px;
  cursor: pointer;

  font: inherit;
  line-height: 1;

  color: transparent;
}

.back-to-top::after{
  content: "^";
  color: var(--text);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  animation: caretBlink 1.1s steps(1,end) infinite;
}

.back-to-top:hover{ background: var(--overlayHover); }
.back-to-top:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}

/* Normal print/PDF */
@media print{
  body::before{ display: none !important; }
  html, body{ background:#fff !important; color:#000 !important; }

  .cli-bar, .export-btn, .back-to-top{ display:none !important; }

  .content-layout{ padding: 0 !important; }
  .content{ min-height: auto !important; }

  .content a{ color:#000 !important; text-decoration: underline !important; }
  .content thead{ display: table-header-group; }
}