/* Compact project pages (shivi.io pattern). Dark default; light via html[data-theme="light"].
   Project pages opt into light by default with <html data-default-theme="light"> (see theme-toggle.js). */
html { --pc-bg:#0f0f0f; --pc-text:#e8e8e8; --pc-muted:#a0a0a0; --pc-line:rgba(255,255,255,.12); --pc-chip:rgba(255,255,255,.06); --pc-accent:#9fb4ff; color-scheme: dark; }
html[data-theme="light"] { --pc-bg:#ffffff; --pc-text:#161616; --pc-muted:#5c5c5c; --pc-line:rgba(0,0,0,.11); --pc-chip:rgba(0,0,0,.045); --pc-accent:#2f55c4; color-scheme: light; }

body.pc, html[data-theme="light"] body.pc {
  margin: 0; background: var(--pc-bg) !important; background-image: none !important;
  color: var(--pc-text); font: 400 15px/1.65 'DM Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* variables read by the shared theme toggle and theme-toggle.css rules */
  --ink: var(--pc-text); --soft: var(--pc-text); --muted: var(--pc-muted); --border2: var(--pc-line);
  --accent: var(--pc-accent); --surface2: var(--pc-chip);
  --glass-strong: var(--pc-bg);
}
html[data-theme="light"] body.pc { --glass-strong: var(--pc-bg); --border2: rgba(0,0,0,.2); --accent-soft: rgba(0,0,0,.05); --accent-border: var(--pc-accent); }
body.pc::before, body.pc::after, html[data-theme="light"] body.pc::after { content: none !important; background: none !important; }
html[data-theme="light"] body.pc main.pc-wrap { background-color: transparent; color: var(--pc-text); }
/* calm theme control: flat, no glow or shadow */
body.pc .theme-toggle, html[data-theme="light"] body.pc .theme-toggle { box-shadow: none !important; background: var(--pc-bg) !important; color: var(--pc-text) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.pc .theme-toggle::before { content: none; }
/* scrolling pages: the control sits at the top right next to the back pill and scrolls away with the page */
body.pc .theme-toggle { position: absolute; top: 56px; right: max(24px, calc(50% - 520px)); bottom: auto; left: auto; transform: none; }
@media (max-width: 599px) { body.pc .theme-toggle { top: 40px; right: 18px; } }

.pc *, .pc *::before, .pc *::after { box-sizing: border-box; }
.pc-wrap { max-width: 1088px; margin: 0 auto; padding: 56px 24px 96px; }
.pc a { color: inherit; text-decoration: none; }
.pc a:hover { text-decoration: underline; }
.pc-section a:not(.pc-back) { color: var(--pc-accent); }

.pc-back {
  display: inline-block; font-size: 13px; line-height: 1.4; padding: 6px 14px;
  border: 1px solid var(--pc-line); border-radius: 999px; color: var(--pc-muted);
  transition: color .15s, border-color .15s;
}
.pc a.pc-back:hover { color: var(--pc-text); text-decoration: none; border-color: var(--pc-muted); }

.pc-title { font: 600 22px/1.3 'DM Sans', system-ui, sans-serif; margin: 32px 0 0; color: var(--pc-text); }
.pc-pitch { font-size: 15px; line-height: 1.6; color: var(--pc-muted); margin: 8px 0 0; }
.pc-meta { font: 400 12.5px/1.5 'DM Mono', ui-monospace, monospace; color: var(--pc-muted); margin: 10px 0 0; }
.pc-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; }
.pc-tags li {
  font: 400 12px/1.4 'DM Mono', ui-monospace, monospace; padding: 3px 8px; margin: 0;
  border-radius: 6px; background: var(--pc-chip); color: var(--pc-text);
}

.pc-section h2 { font: 600 18px/1.35 'DM Sans', system-ui, sans-serif; margin: 40px 0 12px; color: var(--pc-text); }
.pc-section h3 { font: 600 15px/1.4 'DM Sans', system-ui, sans-serif; margin: 28px 0 8px; color: var(--pc-text); }
.pc-section p, .pc-section li { font-size: 15px; line-height: 1.65; }
.pc-section p { margin: 0 0 12px; }
.pc-list { padding-left: 20px; margin: 0; }
.pc-list li { margin: 6px 0; }
.pc-list li::marker { color: var(--pc-muted); }
.pc-note, html body.pc .pc-note { font-size: 13px; line-height: 1.5; color: var(--pc-muted); }

.pc-figure { margin: 20px 0 0; }
.pc-figure img, .pc-figure svg {
  display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--pc-line);
}
.pc-figure figcaption { font-size: 12px; line-height: 1.5; color: var(--pc-muted); margin-top: 8px; }

/* Wide block: fills the 1040px content column.
   Widgets sit on the page background; no frames, shadows or gradients. */
.pc-wide { width: 100%; margin: 20px 0 0; }
.pc-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.pc th, .pc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--pc-line); vertical-align: top; }
.pc thead th { font: 500 12px/1.4 'DM Mono', ui-monospace, monospace; color: var(--pc-muted); letter-spacing: .02em; }

/* Carousel: photos/screenshots only. Controls row under the stage. */
.pc-carousel { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 20px 0 0; overflow: hidden; }
.pc-track { display: flex; width: 100%; height: clamp(220px, 56vw, 420px); transition: transform .35s ease; will-change: transform; }
.pc-slide { flex: 0 0 100%; width: 100%; height: 100%; margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.pc-slide-body { flex: 1; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; }
.pc-slide--media .pc-slide-body > img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--pc-line);
}
.pc-slide figcaption {
  flex: none; margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: var(--pc-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.pc-controls { flex: none; display: flex; align-items: center; gap: 10px; margin-top: 12px; min-width: 0; }
.pc-count { flex: none; font: 400 12px/1 'DM Mono', ui-monospace, monospace; color: var(--pc-muted); white-space: nowrap; min-width: 4.5em; text-align: center; }
[data-carousel-prev], [data-carousel-next] {
  flex: none; width: 36px; height: 36px; margin: 0; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; font: 400 20px/1 'DM Sans', system-ui, sans-serif;
  color: var(--pc-text) !important; border: 1px solid var(--pc-line) !important; background: transparent !important;
  transition: border-color .15s;
}
[data-carousel-prev]:hover, [data-carousel-next]:hover { border-color: var(--pc-muted) !important; }
[data-carousel-prev]:focus-visible, [data-carousel-next]:focus-visible { outline: 2px solid var(--pc-text); outline-offset: 2px; }
.pc-thumbs { flex: 1 1 0; min-width: 0; display: flex; gap: 8px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: thin; }
.pc-thumbs button {
  flex: 0 0 auto; height: 44px; min-width: 44px; max-width: 110px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--pc-line) !important; border-radius: 6px; background: transparent !important; color: var(--pc-muted);
  font: 400 11px/1.2 'DM Mono', ui-monospace, monospace; opacity: .65;
}
.pc-thumbs button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pc-thumbs button:hover { opacity: 1; }
.pc-thumbs button[aria-selected="true"] { border-color: var(--pc-text) !important; opacity: 1; color: var(--pc-text); }
.pc-thumbs button:focus-visible { outline: 2px solid var(--pc-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pc-track { transition: none; } }

@media (max-width: 599px) {
  .pc-wrap { padding: 40px 18px 88px; }
  .pc-wide { width: 100%; margin-left: 0; }
  .pc-thumbs button { height: 36px; min-width: 36px; }
}

@media (min-width: 1441px) {
  body.pc .pc-wrap { zoom: var(--ui-scale, 1); }
  body.pc .theme-toggle { right: max(24px, calc(50% - 520px * var(--ui-scale, 1))); }
}