/* Motion belongs to the object it explains. Reading keeps its own pace. */
.p-title-line { display: block; }
.p-prose .p-table-hint { margin: -14px 0 25px; color: var(--p-muted); font-size: 10px; line-height: 1.7; }
.p-palette-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 10px 24px; border-bottom: 1px solid var(--p-rule); background: var(--p-surface); }
.p-palette-heading>.p-mono { font-size: 9px; letter-spacing: .045em; color: var(--p-muted); }
.p-site .p-colour-play { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 140px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--p-rule); border-radius: 6px; background: var(--p-paper); color: var(--p-accent); font: 11px var(--p-sans); }
.p-colour-play>span:first-child { white-space: nowrap; }
.p-colour-play[aria-pressed='true'] { background: var(--p-wash); border-color: var(--p-accent); color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); }
.p-colour-play[aria-pressed='true']>span:last-child { font-size: 0; }
.p-colour-play[aria-pressed='true']>span:last-child::after { content: '■'; font-size: 10px; }
.p-palette-samples { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.p-palette-samples>i { position: absolute; left: var(--sample-x); top: var(--sample-y); display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffffc9; border-radius: 50%; background: #0a17152b; box-shadow: 0 0 0 5px #ffffff16,0 2px 10px #0002; opacity: 0; transform: translate(-50%,-50%) scale(.7); }
.p-palette-samples>i::after { content: ''; width: 13px; height: 13px; border: 1px solid #ffffffd0; border-radius: 50%; background: var(--sample-colour); }
.p-palette-lab[data-colour-stage='palette'] .p-palette-samples>i { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.p-palette-spectrum { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); align-items: end; gap: 4px; height: 44px; margin-top: 20px; }
.p-palette-spectrum>span { display: block; height: 31px; border-radius: 3px; background: var(--sample-colour); box-shadow: inset 0 0 0 1px #0000000c; transform-origin: bottom; }
.p-palette-lab[data-colour-stage='palette'] .p-palette-spectrum>span { height: 44px; }
.p-palette-lab[data-colour-stage='desktop'] .p-colour-apps { border-color: color-mix(in srgb,var(--p-accent) 55%,transparent); box-shadow: 0 0 0 5px color-mix(in srgb,var(--p-accent) 7%,transparent); }
.p-colour-apps { border: 1px solid transparent; border-radius: 10px; }
.p-toc nav { position: relative; padding-left: 13px; border-left: 1px solid var(--p-rule); }
.p-toc-compass { position: absolute; top: 0; left: -2px; width: 3px; border-radius: 3px; background: var(--p-accent); pointer-events: none; }
.p-guide-entries>a, .p-path, .p-directory-group>a { isolation: isolate; }
.p-pointer-light { position: relative; }
.p-pointer-light::before { content: ''; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; opacity: 0; background: radial-gradient(240px circle at var(--p-light-x,50%) var(--p-light-y,50%),color-mix(in srgb,var(--p-accent) 8%,transparent),transparent 78%); pointer-events: none; }
.p-principles>article { isolation: isolate; }
@media (hover: hover) and (pointer: fine) {
  .p-pointer-light:hover::before { opacity: 1; }
  .p-colour-play:hover { border-color: var(--p-accent); background: var(--p-wash); color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); }
}
@media (prefers-reduced-motion: no-preference) {
  .p-hero-grid:has(.p-title-line) { animation: none; }
  .p-title-star { transition: transform 700ms var(--p-ease-out); }
  @media (hover: hover) and (pointer: fine) { .p-title-line:hover .p-title-star { transform: translateY(12px) rotate(70deg); } }
  .p-palette-samples>i { transition: opacity 360ms var(--p-ease-out),transform 580ms var(--p-ease-out); transition-delay: var(--sample-delay,0ms); }
  .p-palette-spectrum>span { transition: height 450ms var(--p-ease-out),background-color var(--p-duration-palette) var(--p-ease-out); }
  .p-colour-apps { transition: box-shadow 500ms var(--p-ease-out),border-color 500ms var(--p-ease-out); }
  .p-pointer-light::before { transition: opacity 300ms var(--p-ease-out); }
  .p-toc-compass { transition: transform 350ms var(--p-ease-out),height 350ms var(--p-ease-out); }
  .p-colour-play { transition: background-color 180ms var(--p-ease-out),border-color 180ms var(--p-ease-out); }
}
@media (max-width: 600px) {
  .p-palette-heading { gap: 10px; padding: 9px 15px; }
  .p-palette-heading>.p-mono { max-width: 130px; font-size: 8px; line-height: 1.8; }
  .p-site .p-colour-play { min-width: 126px; gap: 12px; font-size: 10px; }
  .p-palette-samples>i { width: 26px; height: 26px; }
  .p-palette-spectrum { margin-top: 16px; }
}
@media print {
  .p-table-hint { display: none !important; }
  .p-colour-play, .p-palette-samples, .p-toc-compass { display: none !important; }
  .p-pointer-light::before { display: none; }
}