/* 2026 Portfolio component styles. Every color, radius, shadow and space is a token from tokens.css. */

/* ---------- base ---------- */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
  background: var(--surface-canvas);
  color: var(--text-primary);
}
::selection { background: var(--selection); color: var(--text-primary); }

/* preview scaffolding */
.pc-stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-24); padding: var(--spacing-24); }
.pc-stage-col { flex-direction: column; align-items: flex-start; gap: var(--spacing-16); }
.pc-stage-roomy { padding: var(--spacing-48) var(--spacing-48) var(--spacing-64); gap: var(--spacing-48); align-items: flex-start; }
.pc-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-12); }

/* ---------- type ---------- */
.pc-display, .pc-heading-lg, .pc-heading, .pc-heading-sm { margin: 0; font-family: var(--font-sans); font-weight: 400; color: var(--text-primary); text-wrap: balance; }
.pc-display    { font-size: 72px; line-height: 1.1;  letter-spacing: -2.16px; }
.pc-heading-lg { font-size: 36px; line-height: 1.2;  letter-spacing: -0.72px; }
.pc-heading    { font-size: 26px; line-height: 1.25; letter-spacing: -0.312px; }
.pc-heading-sm { font-size: 22px; line-height: 1.3;  letter-spacing: -0.11px; }
.pc-body    { margin: 0; font-size: 16px; line-height: 1.5; }
.pc-body-sm { margin: 0; font-size: 14px; line-height: 1.5; letter-spacing: 0.14px; }
.pc-body-xs { margin: 0; font-size: 13px; line-height: 1.5; }
.pc-eyebrow { margin: 0; font-size: 12px; line-height: 1.63; color: var(--text-subdued); }
.pc-editorial-lg, .pc-editorial, .pc-editorial-sm { margin: 0; font-family: var(--font-serif); font-feature-settings: "cswh"; letter-spacing: normal; }
.pc-editorial-lg { font-size: 19px; line-height: 1.35; }
.pc-editorial    { font-size: 17px; line-height: 1.5; }
.pc-editorial-sm { font-size: 16px; line-height: 1.5; }
.pc-secondary { color: var(--text-secondary); }
.pc-helper { color: var(--text-helper); }

/* ---------- Button ---------- */
.pc-btn {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  margin: 0; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 400; letter-spacing: 0.14px;
  padding: 0.78em 1.35em 0.8em;
  border-radius: var(--radius-buttons);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-btn:focus-visible, .pc-link:focus-visible, .pc-terminal:focus-within { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.pc-btn-primary   { background: var(--action-primary);   color: var(--on-action-primary); }
.pc-btn-secondary { background: var(--action-secondary); color: var(--on-action-secondary); }
.pc-btn-ghost     { background: none; padding: 0; color: var(--text-secondary); }
.pc-btn-ghost:hover { text-decoration: underline; }
.pc-btn-ghost.pc-btn-icon { padding: 6px; }
.pc-btn-build   { background: var(--action-build);   color: var(--on-action-build);   padding: 6px 12px; }
.pc-btn-confirm { background: var(--action-confirm); color: var(--on-action-confirm); padding: 5px 11px; border: 1px solid var(--action-confirm); }

/* ---------- TextLink ---------- */
.pc-link { color: var(--accent-1); text-decoration: none; border-radius: var(--radius-sm); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-link:hover { text-decoration: underline; }
.pc-link-2 { color: var(--accent-2); }
.pc-link-3 { color: var(--accent-3); }

/* ---------- ProductCard ---------- */
.pc-card {
  box-sizing: border-box;
  background: var(--surface-raised);
  border: 1px solid transparent;
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: var(--shadow-soft);
}
.pc-card-flat { box-shadow: none; border-color: var(--border-subtle); }
.pc-card > * + * { margin-top: var(--spacing-8); }
.pc-card-media { height: 120px; border-radius: var(--radius-soft-sm); background: var(--surface-elevated); }

/* ---------- LogoTile ---------- */
.pc-logo-row { display: flex; gap: var(--element-gap); width: 100%; }
.pc-logo-tile {
  flex: 1 1 0; min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-16);
  background: var(--surface-raised);
  border-radius: var(--radius-tiles);
  box-shadow: var(--shadow-soft);
  color: var(--text-secondary);
  font-size: 14px; line-height: 1.5; font-weight: 500; white-space: nowrap;
}

/* ---------- WindowFrame ---------- */
.pc-window { box-sizing: border-box; background: var(--surface-canvas); border: 1px solid var(--border-strong); border-radius: var(--radius-soft-sm); overflow: hidden; }
.pc-window-bar { position: relative; display: flex; align-items: center; padding: var(--spacing-12); border-bottom: 1px solid var(--border-subtle); }
.pc-window-dots { display: flex; gap: var(--spacing-8); }
.pc-window-dots i { width: var(--spacing-12); height: var(--spacing-12); border-radius: 50%; background: var(--surface-outline); }
.pc-window-title { position: absolute; left: 0; right: 0; text-align: center; font-family: var(--font-system); font-size: 13px; line-height: 1.25; letter-spacing: 0.004em; color: var(--text-secondary); pointer-events: none; }
.pc-window-tabs { display: flex; gap: var(--spacing-16); padding: 0 var(--spacing-12); border-bottom: 1px solid var(--border-subtle); }
.pc-window-tab { font-family: var(--font-mono); font-size: 12px; line-height: 1.67; padding: var(--spacing-8) 0; color: var(--text-subdued); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.pc-window-tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--text-primary); }
.pc-window-body { padding: var(--spacing-16); font-family: var(--font-mono); font-size: 12px; line-height: 1.67; color: var(--text-primary); white-space: pre; overflow-x: auto; }
.pc-window-body .pc-meta { font-size: inherit; }

/* ---------- NavBar ---------- */
.pc-nav { box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--nav-height); padding: 0 var(--page-gutter); background: none; }
.pc-nav-brand { font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--text-primary); text-decoration: none; }
.pc-nav-links { display: flex; gap: var(--spacing-24); }
.pc-nav-links a { font-size: 14px; line-height: 1.5; letter-spacing: 0.14px; color: var(--text-primary); text-decoration: none; }
.pc-nav-links a:hover { text-decoration: underline; }
.pc-nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-16); }

/* ---------- TerminalInput ---------- */
.pc-terminal {
  box-sizing: border-box; display: flex; align-items: center; gap: var(--spacing-8);
  padding: 10px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-inputs);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.67; color: var(--text-primary);
}
.pc-terminal-plain { background: none; }
.pc-terminal-prompt { color: var(--text-subdued); user-select: none; }
.pc-terminal input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none; font: inherit; color: inherit; caret-color: var(--text-primary); }

/* ---------- FooterColumn ---------- */
.pc-footer { display: flex; flex-wrap: wrap; gap: var(--spacing-64); }
.pc-footer-col h3 { margin: 0 0 var(--spacing-8); font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--text-primary); }
.pc-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-8); }
.pc-footer-col a { font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--text-subdued); text-decoration: none; }
.pc-footer-col a:hover { text-decoration: underline; }

/* ---------- MetaTag ---------- */
.pc-meta { font-family: var(--font-mono); font-size: 12px; line-height: 1.67; color: var(--text-subdued); }

/* ---------- SelectionHighlight ---------- */
.pc-selection { background: var(--selection); color: var(--text-primary); }

/* ---------- InteractiveHoverButton ---------- */
.pc-hover-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  box-sizing: border-box; min-width: 128px; margin: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  padding: 0.78em 1.6em 0.8em 2.6em;
  border: 1px solid var(--border-strong); border-radius: var(--radius-buttons);
  background: var(--surface-canvas); color: var(--text-primary);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 400; letter-spacing: 0.14px;
}
.pc-hover-btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.pc-hover-btn-label { position: relative; z-index: 1; display: inline-block; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-hover-btn-dot { position: absolute; left: 1.2em; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: var(--radius-lg); background: var(--action-primary); transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1), top 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1), height 300ms cubic-bezier(0.4, 0, 0.2, 1), transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-hover-btn-reveal { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: var(--spacing-8); color: var(--on-action-primary); opacity: 0; transform: translateX(var(--spacing-48)); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-hover-btn-reveal svg { width: 16px; height: 16px; flex: none; }
.pc-hover-btn:hover .pc-hover-btn-label, .pc-hover-btn:focus-visible .pc-hover-btn-label, .pc-hover-btn.is-hover .pc-hover-btn-label { transform: translateX(var(--spacing-48)); opacity: 0; }
.pc-hover-btn:hover .pc-hover-btn-dot, .pc-hover-btn:focus-visible .pc-hover-btn-dot, .pc-hover-btn.is-hover .pc-hover-btn-dot { left: 0; top: 0; width: 100%; height: 100%; transform: scale(1.8); }
.pc-hover-btn:hover .pc-hover-btn-reveal, .pc-hover-btn:focus-visible .pc-hover-btn-reveal, .pc-hover-btn.is-hover .pc-hover-btn-reveal { transform: translateX(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pc-hover-btn-label, .pc-hover-btn-dot, .pc-hover-btn-reveal { transition: none; }
}

/* ---------- GradientArt ---------- */
/* A soft gradient pattern. Markup: <div class="pc-art pc-art-orb pc-art-warm" aria-hidden="true"><i></i><i></i><i></i></div>
   Layers: 1 = halo, 2 = main shape, 3 = detail. Sizes are in cqmin, so a shape keeps its proportions in any box. */
.pc-art {
  position: relative; display: block; box-sizing: border-box; overflow: hidden; isolation: isolate;
  container-type: size;
  width: 100%; height: 100%; min-height: 96px;
  border-radius: inherit;
  background: var(--surface-canvas);
  --art-a: var(--art-coral); --art-b: var(--art-amber); --art-c: var(--art-pink);
  --art-speed: 18s;
}
.pc-art-square { height: auto; aspect-ratio: 1; }
.pc-art-wide   { height: auto; aspect-ratio: 16 / 9; }
.pc-art-tall   { height: auto; aspect-ratio: 4 / 5; }
.pc-art-cover  { position: absolute; inset: 0; z-index: -1; min-height: 0; }

/* color schemes */
.pc-art-warm { --art-a: var(--art-coral);  --art-b: var(--art-amber); --art-c: var(--art-pink);   --art-w1: var(--art-pink);  --art-w2: var(--art-coral); }
.pc-art-cool { --art-a: var(--art-blue);   --art-b: var(--art-cyan);  --art-c: var(--art-violet); --art-w1: var(--art-cyan);  --art-w2: var(--art-violet); }
.pc-art-dusk { --art-a: var(--art-violet); --art-b: var(--art-pink);  --art-c: var(--art-blue);   --art-w1: var(--art-pink);  --art-w2: var(--art-blue); }
.pc-art-duo  { --art-a: var(--art-coral);  --art-b: var(--art-amber); --art-c: var(--art-blue);   --art-w1: var(--art-coral); --art-w2: var(--art-blue); }
.pc-art-mint { --art-a: var(--art-cyan);   --art-b: var(--art-mint);  --art-c: var(--art-blue);   --art-w1: var(--art-mint);  --art-w2: var(--art-blue); }

.pc-art > i {
  position: absolute; inset: 0; margin: auto; display: block; border-radius: 50%;
  animation: pc-art-float var(--art-speed) ease-in-out infinite alternate;
}
/* layer 1 is a halo in every shape type */
.pc-art > i:nth-child(1) {
  width: 78cqmin; height: 78cqmin;
  background: radial-gradient(closest-side, var(--art-c), transparent);
  opacity: 0.5; filter: blur(6cqmin);
  animation-name: pc-art-float-b;
}

/* orb: a soft sphere lit from the upper right */
.pc-art-orb > i:nth-child(2) { width: 54cqmin; height: 54cqmin; background: radial-gradient(circle at 62% 30%, var(--art-b) 0%, var(--art-a) 48%, var(--art-c) 100%); filter: blur(2.2cqmin); }
.pc-art-orb > i:nth-child(3) { width: 22cqmin; height: 22cqmin; background: radial-gradient(closest-side, var(--art-b), transparent); transform: translate(8cqmin, -11cqmin); filter: blur(2.6cqmin); opacity: 0.9; }

/* blob: an organic shape that slowly changes outline */
.pc-art-blob > i:nth-child(2) {
  width: 62cqmin; height: 54cqmin; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%;
  background: conic-gradient(from 210deg at 54% 48%, var(--art-a), var(--art-b), var(--art-c), var(--art-a));
  filter: blur(2.6cqmin);
  animation: pc-art-morph calc(var(--art-speed) * 0.8) ease-in-out infinite alternate, pc-art-float var(--art-speed) ease-in-out infinite alternate;
}
.pc-art-blob > i:nth-child(3) { width: 30cqmin; height: 26cqmin; background: radial-gradient(closest-side, var(--art-b), transparent); transform: translate(-5cqmin, 4cqmin); filter: blur(3.2cqmin); opacity: 0.85; animation-name: pc-art-float-b; }

/* wave: ribbons that cross the box and sway */
.pc-art-wave > i:nth-child(1) { opacity: 0.35; }
.pc-art-wave > i:nth-child(2) {
  inset: 0 3%; width: auto; height: 26cqmin;
  background: linear-gradient(90deg, transparent 4%, var(--art-a) 26%, var(--art-b) 54%, var(--art-c) 78%, transparent 96%);
  filter: blur(3cqmin); transform: translateY(-4cqmin) rotate(-11deg);
  animation-name: pc-art-sway;
}
.pc-art-wave > i:nth-child(3) {
  inset: 0 8%; width: auto; height: 12cqmin;
  background: linear-gradient(90deg, transparent 8%, var(--art-c) 30%, var(--art-a) 60%, transparent 90%);
  filter: blur(2.2cqmin); opacity: 0.8; transform: translateY(9cqmin) rotate(8deg);
  animation-name: pc-art-sway; animation-direction: alternate-reverse;
}

/* crescent: part of a ring, turning slowly */
.pc-art-crescent > i:nth-child(1) { opacity: 0.35; }
.pc-art-crescent > i:nth-child(2) {
  width: 66cqmin; height: 66cqmin;
  background: conic-gradient(from 150deg, transparent 0turn, var(--art-a) 0.1turn, var(--art-b) 0.3turn, var(--art-c) 0.5turn, transparent 0.64turn, transparent 1turn);
  -webkit-mask-image: radial-gradient(closest-side, transparent 52%, #000 62%, #000 90%, transparent 100%);
          mask-image: radial-gradient(closest-side, transparent 52%, #000 62%, #000 90%, transparent 100%);
  filter: blur(2.4cqmin);
  animation-name: pc-art-turn; animation-duration: calc(var(--art-speed) * 1.6);
}
.pc-art-crescent > i:nth-child(3) { display: none; }

/* lines: fine bars that scroll inside a soft oval */
.pc-art-lines > i:nth-child(1) { opacity: 0.3; }
.pc-art-lines > i:nth-child(2) {
  width: 52cqmin; height: 72cqmin; border-radius: 0;
  background: linear-gradient(180deg, var(--art-a), var(--art-b) 50%, var(--art-c));
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0, #000 1.2cqmin, transparent 1.2cqmin, transparent 3cqmin), radial-gradient(ellipse closest-side, #000 30%, transparent 100%);
          mask-image: repeating-linear-gradient(180deg, #000 0, #000 1.2cqmin, transparent 1.2cqmin, transparent 3cqmin), radial-gradient(ellipse closest-side, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: blur(0.3cqmin);
  animation: pc-art-slide calc(var(--art-speed) * 0.4) linear infinite;
}
.pc-art-lines > i:nth-child(3) { display: none; }

/* sparkle: a four-point glint that brightens and dims */
.pc-art-sparkle > i:nth-child(1) { width: 60cqmin; height: 60cqmin; opacity: 0.4; }
.pc-art-sparkle > i:nth-child(2), .pc-art-sparkle > i:nth-child(3) {
  width: 74cqmin; height: 7cqmin;
  background: radial-gradient(closest-side, var(--art-b), var(--art-a) 42%, transparent);
  filter: blur(0.7cqmin);
  animation: pc-art-twinkle calc(var(--art-speed) * 0.3) ease-in-out infinite alternate;
}
.pc-art-sparkle > i:nth-child(3) { width: 7cqmin; height: 74cqmin; }
.pc-art-sparkle::before {
  content: ""; position: absolute; inset: 0; margin: auto; z-index: 1; width: 18cqmin; height: 18cqmin; border-radius: 50%;
  background: radial-gradient(closest-side, var(--art-b), var(--art-a) 55%, transparent); filter: blur(1.2cqmin);
}

/* bloom: three soft lobes around a pale core */
.pc-art-bloom > i:nth-child(n) { opacity: 1; filter: blur(4cqmin); }
.pc-art-bloom > i:nth-child(1) { width: 46cqmin; height: 46cqmin; background: radial-gradient(closest-side, var(--art-c) 62%, transparent); transform: translate(10cqmin, -10cqmin); }
.pc-art-bloom > i:nth-child(2) { width: 50cqmin; height: 50cqmin; background: radial-gradient(closest-side, var(--art-a) 62%, transparent); transform: translate(-11cqmin, 0); }
.pc-art-bloom > i:nth-child(3) { width: 46cqmin; height: 46cqmin; background: radial-gradient(closest-side, var(--art-b) 62%, transparent); transform: translate(5cqmin, 11cqmin); animation-name: pc-art-float-b; animation-duration: calc(var(--art-speed) * 1.3); }
.pc-art-bloom::before {
  content: ""; position: absolute; inset: 0; margin: auto; z-index: 1; width: 40cqmin; height: 36cqmin; border-radius: 50%;
  background: radial-gradient(closest-side, var(--art-light) 35%, transparent); filter: blur(3cqmin);
  animation: pc-art-float var(--art-speed) ease-in-out infinite alternate;
}

/* dome: a half sphere rising from the bottom edge */
.pc-art-dome > i:nth-child(n) { inset: auto 0 0 0; margin: 0 auto; }
.pc-art-dome > i:nth-child(1) { width: 104cqmin; height: 104cqmin; bottom: -56cqmin; opacity: 0.55; filter: blur(7cqmin); }
.pc-art-dome > i:nth-child(2) { width: 68cqmin; height: 68cqmin; bottom: -30cqmin; background: radial-gradient(circle at 50% 18%, var(--art-b) 0%, var(--art-a) 46%, var(--art-c) 100%); filter: blur(2.4cqmin); animation-name: pc-art-rise; }
.pc-art-dome > i:nth-child(3) { width: 34cqmin; height: 18cqmin; bottom: 20cqmin; background: radial-gradient(closest-side, var(--art-b), transparent); filter: blur(3cqmin); opacity: 0.8; animation-name: pc-art-rise; }

/* planet: a large sphere that runs off the top right corner */
.pc-art-planet > i:nth-child(n) { inset: auto; margin: 0; }
.pc-art-planet > i:nth-child(1) { top: -42cqmin; right: -38cqmin; width: 128cqmin; height: 128cqmin; opacity: 0.5; filter: blur(8cqmin); }
.pc-art-planet > i:nth-child(2) { top: -30cqmin; right: -24cqmin; width: 96cqmin; height: 96cqmin; background: radial-gradient(circle at 36% 64%, var(--art-a) 0%, var(--art-c) 58%, var(--art-b) 100%); filter: blur(3cqmin); }
.pc-art-planet > i:nth-child(3) { display: none; }

/* haze: a soft glow in one corner with a fainter one opposite */
.pc-art-haze > i:nth-child(n) { inset: auto; margin: 0; }
.pc-art-haze > i:nth-child(1) { left: -40cqmin; bottom: -50cqmin; width: 120cqmin; height: 120cqmin; background: radial-gradient(closest-side, var(--art-a), transparent); opacity: 0.6; filter: blur(8cqmin); }
.pc-art-haze > i:nth-child(2) { right: -45cqmin; top: -55cqmin; width: 100cqmin; height: 100cqmin; background: radial-gradient(closest-side, var(--art-b), transparent); opacity: 0.4; filter: blur(9cqmin); animation-name: pc-art-float-b; }
.pc-art-haze > i:nth-child(3) { display: none; }

/* wash: tints the ground with the scheme's colors */
.pc-art-wash { background: linear-gradient(155deg, color-mix(in srgb, var(--art-w1, var(--art-c)) 22%, var(--surface-canvas)), color-mix(in srgb, var(--art-w2, var(--art-a)) 30%, var(--surface-canvas))); }

/* grain: a film-grain layer over any shape type */
.pc-art-grain::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; mix-blend-mode: overlay; opacity: 0.5;
}

.pc-art-still > i, .pc-art-still::before { animation: none; }

@keyframes pc-art-float   { from { translate: -2cqmin 1.5cqmin; scale: 1; }      to { translate: 2.5cqmin -2cqmin; scale: 1.06; } }
@keyframes pc-art-float-b { from { translate: 3cqmin -2cqmin; scale: 1.05; }     to { translate: -3cqmin 2.5cqmin; scale: 0.96; } }
@keyframes pc-art-morph   { 0% { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; } 50% { border-radius: 45% 55% 42% 58% / 58% 44% 56% 42%; } 100% { border-radius: 52% 48% 60% 40% / 42% 54% 46% 58%; } }
@keyframes pc-art-rise    { from { translate: 0 3cqmin; scale: 1; }              to { translate: 0 -3cqmin; scale: 1.05; } }
@keyframes pc-art-sway    { from { rotate: -4deg; translate: -2cqmin 0; }        to { rotate: 4deg; translate: 2cqmin 0; } }
@keyframes pc-art-turn    { from { rotate: -24deg; }                             to { rotate: 24deg; } }
@keyframes pc-art-twinkle { from { scale: 0.88; opacity: 0.7; }                  to { scale: 1.05; opacity: 1; } }
@keyframes pc-art-slide   { from { -webkit-mask-position: 0 0, center; mask-position: 0 0, center; } to { -webkit-mask-position: 0 3cqmin, center; mask-position: 0 3cqmin, center; } }
@media (prefers-reduced-motion: reduce) {
  .pc-art > i, .pc-art::before { animation: none; }
}

/* ---------- Glass ---------- */
/* A frosted panel for surfaces that float over a GradientArt pattern: a translucent fill, a strong backdrop blur,
   a fine grain, and a light rim along the top edge. */
.pc-glass {
  background-color: var(--glass-fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panels);
  box-shadow: var(--shadow-glass);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pc-glass { background-color: var(--surface-raised); background-image: none; }
}

/* ---------- SideNav ---------- */
.pc-sidenav {
  --sn-pad: var(--spacing-16);
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--spacing-24);
  width: 280px; max-width: 100%; padding: var(--spacing-24) var(--sn-pad);
  font-family: var(--font-sans); color: var(--text-primary);
  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-sidenav-head { display: flex; align-items: center; gap: var(--spacing-12); padding: 0 var(--spacing-8); }
.pc-sidenav-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--action-primary); color: var(--on-action-primary); font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: 0.14px; }
.pc-sidenav-name { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: 0.14px; color: var(--text-primary); white-space: nowrap; }
.pc-sidenav-role { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-subdued); white-space: nowrap; }
.pc-sidenav-label { margin: 0 0 var(--spacing-8); padding: 0 var(--spacing-8); font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subdued); }
.pc-sidenav-list, .pc-sidenav-sub { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-4); }
.pc-sidenav-sub { padding: var(--spacing-4) 0 var(--spacing-8) var(--spacing-16); }
.pc-sidenav-item, .pc-sidenav-toggle {
  position: relative; display: flex; align-items: center; gap: var(--spacing-8); box-sizing: border-box;
  padding: 6px var(--spacing-12); border-radius: var(--radius-buttons);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5; letter-spacing: 0.14px; text-decoration: none; color: var(--text-subdued);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-sidenav-item::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
/* project tabs carry a solid icon; the dot is for the pages nested under a project */
.pc-sidenav-list > li > .pc-sidenav-item::before { display: none; }
.pc-sidenav-icon { flex: none; width: 16px; height: 16px; fill: currentColor; }
.pc-sidenav-item > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-sidenav-meta { flex: none; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-subdued); }
.pc-sidenav-item:hover, .pc-sidenav-toggle:hover { color: var(--text-primary); }
.pc-sidenav-item:focus-visible, .pc-sidenav-toggle:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
/* the open project: a floating pill, with a rounded notch in the panel edge that ties it to the page */
.pc-sidenav-item.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-pill); }
.pc-sidenav-item.is-active::after {
  content: ""; position: absolute; top: 50%; right: calc(-1 * var(--sn-pad) - 1px); width: 12px; height: 36px; margin-top: -18px;
  background: var(--surface-canvas);
  /* a 12px-radius bite out of the panel edge, eased into the edge above and below by 7.5px fillets */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 36' preserveAspectRatio='none'%3E%3Cpath d='M12 0A7.5 7.5 0 0 1 7.385 6.923A12 12 0 0 0 7.385 29.077A7.5 7.5 0 0 1 12 36Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 36' preserveAspectRatio='none'%3E%3Cpath d='M12 0A7.5 7.5 0 0 1 7.385 6.923A12 12 0 0 0 7.385 29.077A7.5 7.5 0 0 1 12 36Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.pc-sidenav.is-collapsed .pc-sidenav-item.is-active::after { right: calc(-1 * var(--sn-pad) - 2px); }
/* the current page inside the open project: label and dot in the accent */
.pc-sidenav-sub .pc-sidenav-item[aria-current="page"] { color: var(--accent-1); font-weight: 500; }
.pc-sidenav-sub .pc-sidenav-item[aria-current="page"]::before { width: 6px; height: 6px; margin: 0 -1px; }
.pc-sidenav-item[aria-disabled="true"] { pointer-events: none; }
.pc-sidenav-item[aria-disabled="true"]:hover { color: var(--text-subdued); }

/* collapse control, pinned to the bottom of the panel */
.pc-sidenav-toggle { margin: auto 0 0; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
.pc-sidenav-toggle > .pc-icon { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }

/* collapsed: a 72px rail of the avatar and the tab icons; names stay available to screen readers */
.pc-sidenav.is-collapsed { --sn-pad: var(--spacing-12); width: 72px; align-items: center; }
.pc-sidenav.is-collapsed .pc-sidenav-head { padding: 0; }
.pc-sidenav.is-collapsed .pc-sidenav-head > div,
.pc-sidenav.is-collapsed .pc-sidenav-item > span,
.pc-sidenav.is-collapsed .pc-sidenav-toggle > span {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pc-sidenav.is-collapsed .pc-sidenav-label { width: 24px; height: 1px; margin: 0 auto var(--spacing-12); padding: 0; overflow: hidden; background: var(--surface-outline); color: transparent; font-size: 0; }
.pc-sidenav.is-collapsed .pc-sidenav-sub { display: none; }
.pc-sidenav.is-collapsed .pc-sidenav-list { justify-items: center; }
.pc-sidenav.is-collapsed .pc-sidenav-item, .pc-sidenav.is-collapsed .pc-sidenav-toggle { justify-content: center; width: 44px; height: 40px; padding: 0; }
.pc-sidenav.is-collapsed .pc-sidenav-icon { width: 18px; height: 18px; }
.pc-sidenav.is-collapsed .pc-sidenav-toggle > .pc-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .pc-sidenav, .pc-sidenav-toggle > .pc-icon { transition: none; }
}

/* ---------- Soft kit ---------- */
/* Floating, softly rounded pieces for tools and controls. Surfaces are surface-raised with shadow-soft;
   the ink variant inverts with the theme like the primary button. */

/* icon: thin-stroke glyph on a 24px grid */
.pc-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pc-icon-sm { width: 16px; height: 16px; }

/* SoftPanel */
.pc-soft { position: relative; box-sizing: border-box; padding: var(--spacing-24); border-radius: var(--radius-soft); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-soft); font-family: var(--font-sans); }
.pc-soft-sm { padding: var(--spacing-12) var(--spacing-16); border-radius: var(--radius-soft-sm); }
.pc-soft-ink { background: var(--action-primary); color: var(--on-action-primary); }
.pc-soft-stack { display: grid; gap: var(--spacing-12); }
.pc-soft-head { display: flex; align-items: center; gap: var(--spacing-12); }
.pc-soft-head > .pc-soft-title { flex: 1; min-width: 0; }
.pc-soft-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }
.pc-soft-title { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 500; letter-spacing: 0; color: inherit; }
.pc-soft-ink .pc-soft-title { font-size: 13px; font-weight: 400; }

/* IconButton */
.pc-iconbtn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--action-primary); color: var(--on-action-primary); box-shadow: var(--shadow-soft); transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-iconbtn-light { background: var(--surface-raised); color: var(--text-primary); }
.pc-iconbtn-ghost { width: 32px; height: 32px; background: none; color: inherit; box-shadow: none; }
.pc-iconbtn-ghost:hover { background: var(--surface-card); }
.pc-soft-ink .pc-iconbtn-ghost:hover { background: none; }
.pc-iconbtn:focus-visible, .pc-menu-item:focus-visible, .pc-dropdown:focus-visible, .pc-toolbar-item:focus-visible, .pc-rail-tool:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }

/* Avatar */
.pc-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-outline); color: var(--text-primary); font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 0.14px; }
.pc-avatar-ink { background: var(--action-primary); color: var(--on-action-primary); }
.pc-avatar-lg { width: 40px; height: 40px; font-size: 14px; }
.pc-avatar-stack { display: inline-flex; }
.pc-avatar-stack > .pc-avatar { box-shadow: 0 0 0 2px var(--surface-raised); }
.pc-avatar-stack > .pc-avatar + .pc-avatar { margin-left: -6px; }
.pc-avatar-row { display: flex; flex-wrap: wrap; gap: var(--spacing-16); margin: 0; padding: 0; list-style: none; }
.pc-avatar-named { display: grid; justify-items: center; gap: var(--spacing-4); font-size: 12px; line-height: 1.5; color: var(--text-subdued); }

/* Chip */
.pc-chip { display: inline-block; justify-self: start; padding: 2px 10px; border-radius: var(--radius-full); background: var(--surface-card); color: var(--text-subdued); font-size: 12px; line-height: 1.63; }

/* SearchField */
.pc-search { display: flex; align-items: center; gap: var(--spacing-8); box-sizing: border-box; min-height: 44px; padding: 0 var(--spacing-16); border-radius: var(--radius-soft-sm); background: var(--surface-card); color: var(--text-primary); }
.pc-search > .pc-icon { color: var(--text-subdued); }
.pc-search input { flex: 1; width: 0; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; background: none; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; letter-spacing: 0.14px; color: inherit; }
.pc-search input::placeholder { color: var(--text-helper); opacity: 1; }
.pc-search:focus-within { box-shadow: var(--focus-ring); }
.pc-searchbar { display: flex; align-items: center; gap: var(--spacing-8); padding: 6px; }
.pc-searchbar > .pc-search { flex: 1; min-width: 0; background: none; }
.pc-searchbar > .pc-search:focus-within { box-shadow: none; }
.pc-searchbar:focus-within { box-shadow: var(--focus-ring); }

/* MenuList */
.pc-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-4); }
.pc-menu-item { display: flex; align-items: center; gap: var(--spacing-12); box-sizing: border-box; width: 100%; margin: 0; padding: var(--spacing-8); border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; text-align: left; text-decoration: none; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; letter-spacing: 0.14px; color: inherit; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-menu-item:hover { background: var(--surface-card); }
.pc-menu-item > .pc-icon { color: var(--text-subdued); }
.pc-soft-ink .pc-menu-item { padding: var(--spacing-4); font-size: 13px; }
.pc-soft-ink .pc-menu-item:hover { background: none; text-decoration: underline; }
.pc-menu-badge { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--on-action-primary); color: var(--action-primary); }
.pc-menu-badge > .pc-icon { width: 12px; height: 12px; stroke-width: 2.25; }

/* Swatch */
.pc-swatch { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--swatch, var(--accent-1)); box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 3.5px var(--text-primary); }
.pc-swatch-plain { box-shadow: none; }
.pc-swatch-row { display: flex; align-items: center; gap: var(--spacing-8); }
.pc-swatch-outline { width: 32px; height: 32px; border-radius: var(--radius-lg); background: none; box-shadow: inset 0 0 0 3px var(--swatch, var(--text-primary)); }

/* Dropdown */
.pc-dropdown { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--spacing-24); box-sizing: border-box; min-width: 184px; margin: 0; padding: 10px 10px 10px var(--spacing-20); border: 0; border-radius: var(--radius-soft-sm); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-soft); cursor: pointer; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 500; letter-spacing: 0.14px; }
.pc-dropdown-caret { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--radius-lg); background: var(--action-primary); color: var(--on-action-primary); }

/* Toolbar */
.pc-toolbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-8); box-sizing: border-box; padding: var(--spacing-12) var(--spacing-16); border-radius: var(--radius-soft-sm); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-soft); }
.pc-toolbar-grip { color: var(--text-helper); cursor: grab; }
.pc-toolbar-item { display: inline-flex; align-items: center; gap: var(--spacing-8); margin: 0; padding: 6px var(--spacing-8); border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 500; letter-spacing: 0.14px; color: inherit; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-toolbar-item:hover { background: var(--surface-card); }
.pc-toolbar-item > .pc-icon:last-child { color: var(--text-subdued); }
.pc-toolbar-glyph { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: var(--radius-md); background: var(--action-primary); color: var(--on-action-primary); }
.pc-toolbar-glyph > .pc-icon { width: 14px; height: 14px; stroke-width: 2; }

/* ToolRail */
.pc-rail { display: inline-flex; flex-direction: column; align-items: center; gap: var(--spacing-8); box-sizing: border-box; width: 72px; padding: var(--spacing-16) 0 var(--spacing-24); border-radius: var(--radius-soft); background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-soft); }
.pc-rail-brand { margin-bottom: var(--spacing-32); }
.pc-rail-tool { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-xl); background: none; color: inherit; cursor: pointer; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.pc-rail-tool:hover { background: var(--surface-card); }
/* the active tool: the same eased notch as SideNav, bitten out of the rail's right edge */
.pc-rail-tool[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 50%; right: -14px; width: 12px; height: 36px; margin-top: -18px;
  background: var(--surface-canvas);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 36' preserveAspectRatio='none'%3E%3Cpath d='M12 0A7.5 7.5 0 0 1 7.385 6.923A12 12 0 0 0 7.385 29.077A7.5 7.5 0 0 1 12 36Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 36' preserveAspectRatio='none'%3E%3Cpath d='M12 0A7.5 7.5 0 0 1 7.385 6.923A12 12 0 0 0 7.385 29.077A7.5 7.5 0 0 1 12 36Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- BottomNav ---------- */
/* The small-screen navigation: a floating bar at the bottom of the screen, and a frosted menu sheet that opens above it. */
.pc-bottomnav {
  position: fixed; left: var(--spacing-16); right: var(--spacing-16); bottom: var(--spacing-16); z-index: 10;
  display: grid; grid-template-columns: 1fr 1fr; box-sizing: border-box;
  padding: 0 var(--spacing-8) var(--spacing-8);
  border-radius: var(--radius-soft); color: var(--text-primary); font-family: var(--font-sans);
}
/* the bar's plate sits above the bumps' shadows, so each bump reads as part of one raised silhouette */
.pc-bottomnav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface-raised); box-shadow: var(--shadow-soft); }
.pc-bottomnav-item { display: grid; justify-items: center; gap: 2px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: none; color: inherit; font-family: inherit; font-size: 12px; line-height: 1.5; letter-spacing: 0.14px; -webkit-tap-highlight-color: transparent; }
/* each item's mark sits in a round bump that rises out of the bar */
.pc-bottomnav-bump { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -22px; border-radius: 50%; background: var(--surface-raised); color: var(--text-primary); }
.pc-bottomnav-bump::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 50%; box-shadow: var(--shadow-pill); }
.pc-bottomnav-bump > .pc-icon { width: 24px; height: 24px; stroke-width: 2.25; }
.pc-bottomnav-item:focus-visible { outline: 2px solid transparent; }
.pc-bottomnav-item:focus-visible > .pc-bottomnav-bump { box-shadow: var(--focus-ring); }

/* the menu sheet: glass, above the bar, with a pointer down to the Menu button */
.pc-navsheet { --sn-pad: var(--spacing-16); position: absolute; left: 0; right: 0; bottom: calc(100% + 36px); box-sizing: border-box; font-family: var(--font-sans); color: var(--text-primary); }
.pc-navsheet[hidden] { display: none; }
.pc-navsheet::after {
  content: ""; position: absolute; top: calc(100% - 6px); right: calc(25% - 3px); width: 14px; height: 14px; box-sizing: border-box;
  transform: rotate(45deg); clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background-color: var(--glass-fill);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  border: solid var(--glass-border); border-width: 0 1px 1px 0; border-bottom-right-radius: 3px;
}
/* the list scrolls inside the sheet; the scrollbar is moved to the left so it never meets the notch on the right */
.pc-navsheet-scroll {
  box-sizing: border-box; max-height: var(--sheet-max, min(60vh, 420px)); overflow-y: auto; overscroll-behavior: contain; direction: rtl;
  margin-right: -1px; padding: var(--spacing-16) calc(var(--sn-pad) + 1px) var(--spacing-16) var(--spacing-8); border-radius: inherit;
  scrollbar-width: thin; scrollbar-color: var(--surface-outline) transparent;
}
.pc-navsheet-body { direction: ltr; display: grid; gap: var(--spacing-16); }
.pc-navsheet .pc-sidenav-label { margin-bottom: var(--spacing-8); }
/* taller rows than SideNav, for touch */
.pc-navsheet .pc-sidenav-item { padding-top: 9px; padding-bottom: 9px; }

/* which navigation shows: the side navigation from 470px up, the bottom bar below that */
@media (max-width: 469.98px) { .pc-nav-wide { display: none; } }
@media (min-width: 470px) { .pc-nav-narrow { display: none; } }