/*
 * Jenny portfolio colour system
 * Large fields: cream / periwinkle / pink
 * Signals: yellow / blue / pink / green
 * Loaded last so every portfolio surface speaks the same visual language.
 */

:root {
  --jenny-paper: #fffefa;
  --jenny-ink: #171717;
  --jenny-muted: #5c5860;

  --jenny-cream: #fcf3d1;
  --jenny-yellow: #f5cd51;
  --jenny-blue-soft: #d2d8f7;
  --jenny-blue: #495fe0;
  --jenny-pink-soft: #f7cddd;
  --jenny-pink: #ea3f76;

  --jenny-green: #64a060;
  --jenny-teal: #3a8586;
  --jenny-sage: #5f7a6c;

  --jenny-line: rgba(23, 23, 23, 0.14);
  --jenny-shadow: rgba(23, 23, 23, 0.12);
}

::selection {
  background: var(--jenny-pink-soft);
  color: var(--jenny-ink);
}

/* -------------------------------------------------------------------------- */
/* Shared navigation                                                          */
/* -------------------------------------------------------------------------- */

.portfolio-dock {
  --portfolio-dock-accent: #5d80df;
  --portfolio-dock-ink: #27385f;
  --portfolio-dock-muted: #7b8499;
}

.portfolio-dock[data-active="home"] {
  --dock-active-pop: #df5a87;
}

.portfolio-dock[data-active="work"] {
  --dock-active-pop: #5d80df;
}

.portfolio-dock[data-active="about"] {
  --dock-active-pop: #e99a43;
}

.portfolio-dock__indicator {
  border: 0;
  background: var(--dock-active-pop, var(--portfolio-dock-accent));
  box-shadow: none;
}

.portfolio-dock__indicator::after {
  display: none;
}

.portfolio-dock .portfolio-dock__item[data-dock-view]:hover {
  background: transparent;
}

.portfolio-dock .portfolio-dock__item[data-dock-view] .portfolio-dock__number,
.portfolio-dock .portfolio-dock__item.is-active .portfolio-dock__number,
.portfolio-dock .portfolio-dock__item[aria-current] .portfolio-dock__number {
  color: rgba(41, 39, 36, 0.45);
}

.portfolio-dock .portfolio-dock__item.is-active .portfolio-dock__number,
.portfolio-dock .portfolio-dock__item[aria-current] .portfolio-dock__number {
  color: rgba(255, 255, 255, 0.76);
}

.portfolio-dock .portfolio-dock__item.is-active,
.portfolio-dock .portfolio-dock__item[aria-current] {
  color: #fff;
  font-weight: 800;
}

.portfolio-dock .portfolio-dock__item:focus-visible {
  outline-color: var(--dock-active-pop, var(--portfolio-dock-accent));
}

/* -------------------------------------------------------------------------- */
/* Work archive                                                               */
/* -------------------------------------------------------------------------- */

body.portfolio-work-page {
  --paper: var(--jenny-paper);
  --paper-light: #ffffff;
  --ink: var(--jenny-ink);
  --ink-soft: #353339;
  --muted: var(--jenny-muted);
  --line: rgba(23, 23, 23, 0.13);
  --cobalt: var(--jenny-blue);
  --cobalt-dark: #3348b2;
  --cobalt-soft: var(--jenny-blue-soft);
  background:
    radial-gradient(circle at 8% 7%, rgba(245, 205, 81, 0.2), transparent 23rem),
    radial-gradient(circle at 94% 17%, rgba(73, 95, 224, 0.13), transparent 27rem),
    radial-gradient(circle at 55% 90%, rgba(234, 63, 118, 0.1), transparent 31rem),
    var(--jenny-paper);
  color: var(--jenny-ink);
}

body.portfolio-work-page::before {
  background-image:
    radial-gradient(circle, rgba(73, 95, 224, 0.15) 1px, transparent 1.1px),
    radial-gradient(circle, rgba(234, 63, 118, 0.09) 1px, transparent 1.1px);
  background-position: 0 0, 16px 16px;
  background-size: 32px 32px;
  opacity: 0.46;
}

.portfolio-work-page .work-header__inner {
  border-color: rgba(23, 23, 23, 0.12);
}

.portfolio-work-page .work-header.is-scrolled .work-header__inner {
  border-color: rgba(73, 95, 224, 0.17);
  background:
    linear-gradient(90deg, rgba(252, 243, 209, 0.84), rgba(255, 255, 255, 0.9) 48%, rgba(247, 205, 221, 0.78));
}

.portfolio-work-page .brand-mark {
  border-color: rgba(73, 95, 224, 0.2);
  background: var(--jenny-cream);
  box-shadow:
    5px 5px 0 rgba(210, 216, 247, 0.92),
    0 12px 26px rgba(23, 23, 23, 0.08);
  color: var(--jenny-ink);
}

.portfolio-work-page .brand-mark::after {
  background: var(--jenny-pink);
}

.portfolio-work-page .availability i {
  background: var(--jenny-green);
  box-shadow: 0 0 0 4px rgba(100, 160, 96, 0.14);
}

.portfolio-work-page .work-header__meta > span:last-child {
  border-color: rgba(73, 95, 224, 0.16);
  background: var(--jenny-blue-soft);
}

.portfolio-work-page .archive-heading h1 em {
  color: var(--jenny-blue);
}

.portfolio-work-page .archive-heading h1::after {
  display: block;
  width: min(220px, 28vw);
  height: 9px;
  margin-top: 15px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--jenny-yellow) 0 32%,
      var(--jenny-blue) 32% 67%,
      var(--jenny-pink) 67% 100%
    );
  content: "";
  transform: rotate(-1.2deg);
}

.portfolio-work-page .heading-orbit--large {
  border-color: var(--jenny-pink);
}

.portfolio-work-page .heading-orbit--small {
  background: var(--jenny-yellow);
}

.portfolio-work-page .heading-sticker {
  border-color: rgba(23, 23, 23, 0.82);
  background: var(--jenny-cream);
}

.portfolio-work-page .heading-sticker b {
  color: var(--jenny-blue);
}

.portfolio-work-page .heading-spark {
  color: var(--jenny-pink);
}

.portfolio-work-page .project-filters button {
  border-color: rgba(23, 23, 23, 0.13);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  color: rgba(23, 23, 23, 0.68);
}

.portfolio-work-page .project-filters button:nth-child(3n + 1) {
  --filter-pop: var(--jenny-yellow);
}

.portfolio-work-page .project-filters button:nth-child(3n + 2) {
  --filter-pop: var(--jenny-blue);
}

.portfolio-work-page .project-filters button:nth-child(3n) {
  --filter-pop: var(--jenny-pink);
}

.portfolio-work-page .project-filters button:hover {
  border-color: rgba(23, 23, 23, 0.24);
  background: #ffffff;
  box-shadow: 0 9px 22px -18px rgba(23, 23, 23, 0.38);
  color: var(--jenny-ink);
}

.portfolio-work-page .project-filters button.is-active {
  border-color: rgba(73, 95, 224, 0.28);
  background: #ffffff;
  box-shadow: inset 0 -2px var(--jenny-blue);
  color: var(--jenny-blue);
}

.portfolio-work-page .project {
  --project-soft: var(--jenny-cream);
  --project-accent: var(--jenny-yellow);
  --project-ink: #735700;
  --project-alt: var(--jenny-pink);
  --project-signal: var(--jenny-green);
  --project-shadow: color-mix(in srgb, var(--project-accent) 26%, transparent);
}

.portfolio-work-page :is(.project--mora, .project--beanledger, .project--stitch) {
  --project-soft: var(--jenny-blue-soft);
  --project-accent: var(--jenny-blue);
  --project-ink: #3348b2;
  --project-alt: var(--jenny-yellow);
  --project-signal: var(--jenny-teal);
}

.portfolio-work-page :is(.project--echo, .project--respira) {
  --project-soft: var(--jenny-pink-soft);
  --project-accent: var(--jenny-pink);
  --project-ink: #9f214f;
  --project-alt: var(--jenny-blue);
  --project-signal: var(--jenny-sage);
}

.portfolio-work-page .project-visual {
  border-color: color-mix(in srgb, var(--project-accent) 30%, rgba(23, 23, 23, 0.12));
  background: var(--project-soft);
  box-shadow:
    7px 8px 0 color-mix(in srgb, var(--project-accent) 25%, transparent),
    11px 13px 0 color-mix(in srgb, var(--project-alt) 12%, transparent),
    0 20px 44px -31px rgba(23, 23, 23, 0.34);
}

.portfolio-work-page .project-visual::after {
  border-color: color-mix(in srgb, var(--project-alt) 30%, rgba(255, 255, 255, 0.52));
}

.portfolio-work-page .project-visual__index {
  border-color: color-mix(in srgb, var(--project-accent) 40%, white);
  background: color-mix(in srgb, var(--project-soft) 82%, white);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--project-alt) 24%, transparent);
  color: var(--project-ink);
}

.portfolio-work-page .project-visual__ui::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--project-accent) 42%,
      var(--project-alt) 74%,
      var(--project-signal)
    );
}

.portfolio-work-page .project-meta {
  position: relative;
  margin-top: 18px;
  padding-top: 13px;
}

.portfolio-work-page .project-meta::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--project-accent) 0 38%,
      var(--project-alt) 38% 73%,
      var(--project-signal) 73% 100%
    );
  content: "";
  transform: rotate(-0.8deg);
  transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-work-page .project-action {
  border-color: color-mix(in srgb, var(--project-accent) 32%, white);
  background: color-mix(in srgb, var(--project-soft) 72%, white);
  color: var(--project-ink);
}

.portfolio-work-page .project-tags span {
  border-color: rgba(23, 23, 23, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(23, 23, 23, 0.58);
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-work-page .project:not(.is-opening):not(.is-committing):is(:hover, .is-pointer-active) .project-visual {
    box-shadow:
      10px 12px 0 color-mix(in srgb, var(--project-accent) 32%, transparent),
      15px 17px 0 color-mix(in srgb, var(--project-alt) 16%, transparent),
      0 28px 54px -24px rgba(23, 23, 23, 0.22);
  }

  .portfolio-work-page .project:not(.is-opening):not(.is-committing):is(:hover, .is-pointer-active) .project-meta::before {
    width: 112px;
  }

  .portfolio-work-page .project:not(.is-opening):not(.is-committing):is(:hover, .is-pointer-active) .project-title-row h2 {
    color: rgba(23, 23, 23, 0.38);
  }

  .portfolio-work-page .project:not(.is-opening):not(.is-committing):is(:hover, .is-pointer-active) .project-tags span {
    border-color: rgba(23, 23, 23, 0.08);
    background: rgba(255, 255, 255, 0.58);
    color: rgba(23, 23, 23, 0.36);
  }

  .portfolio-work-page .project:not(.is-opening):not(.is-committing):is(:hover, .is-pointer-active) .project-meta > p {
    color: rgba(23, 23, 23, 0.34);
  }
}

.portfolio-work-page .work-footer {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 23, 0.12);
  background:
    radial-gradient(circle at 89% 17%, var(--jenny-pink) 0 36px, transparent 37px),
    radial-gradient(circle at 77% 78%, var(--jenny-green) 0 15px, transparent 16px),
    linear-gradient(
      122deg,
      var(--jenny-cream) 0 56%,
      var(--jenny-blue-soft) 56% 78%,
      var(--jenny-pink-soft) 78% 100%
    );
  box-shadow: 9px 11px 0 rgba(73, 95, 224, 0.12);
  color: var(--jenny-ink);
}

.portfolio-work-page .work-footer::before {
  position: absolute;
  top: 28px;
  right: 34%;
  width: 86px;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--jenny-yellow) 0 33%, var(--jenny-blue) 33% 66%, var(--jenny-pink) 66%);
  content: "";
  transform: rotate(4deg);
}

.portfolio-work-page .work-footer p {
  color: rgba(23, 23, 23, 0.62);
}

.portfolio-work-page .work-footer a {
  border-color: var(--jenny-ink);
  background: var(--jenny-blue);
  color: #ffffff;
}

.portfolio-work-page .work-footer a:hover {
  border-color: var(--jenny-ink);
  background: var(--jenny-pink);
  color: var(--jenny-ink);
}

/* -------------------------------------------------------------------------- */
/* Case studies                                                               */
/* -------------------------------------------------------------------------- */

body[data-project] {
  --paper: var(--jenny-paper);
  --white: #ffffff;
  --ink: var(--jenny-ink);
  --muted: var(--jenny-muted);
  --line: rgba(23, 23, 23, 0.16);
  background: var(--jenny-paper);
  color: var(--jenny-ink);
}

body[data-project] .project-nav {
  border-color: rgba(23, 23, 23, 0.15);
  background:
    linear-gradient(90deg, rgba(255, 254, 250, 0.68), rgba(210, 216, 247, 0.22), rgba(247, 205, 221, 0.22));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body[data-project] .nav-back {
  border-color: rgba(23, 23, 23, 0.28);
  background: rgba(255, 255, 255, 0.44);
}

body[data-project] .nav-back:hover {
  background: var(--project-accent);
  color: #ffffff;
}

body[data-project] .project-hero {
  color: var(--jenny-ink);
}

body[data-project] .project-hero::before {
  position: absolute;
  top: 86px;
  right: 0;
  left: 0;
  height: 6px;
  background:
    linear-gradient(
      90deg,
      var(--jenny-yellow) 0 33.333%,
      var(--jenny-blue) 33.333% 66.666%,
      var(--jenny-pink) 66.666% 100%
    );
  content: "";
  opacity: 0.92;
}

body[data-project] .hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

body[data-project] .hero-label::before {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--project-signal, var(--jenny-green));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--project-signal, var(--jenny-green)) 16%, transparent);
  content: "";
}

body[data-project] .hero-index {
  color: color-mix(in srgb, var(--project-accent-2) 13%, transparent);
}

body[data-project] .hero-meta {
  border-color: rgba(23, 23, 23, 0.26);
}

body[data-project] .case-section--dark {
  background:
    radial-gradient(circle at 12% 20%, color-mix(in srgb, var(--project-accent) 26%, transparent), transparent 23rem),
    radial-gradient(circle at 88% 74%, color-mix(in srgb, var(--project-accent-2) 22%, transparent), transparent 25rem),
    var(--jenny-ink);
}

body[data-project] .case-section--paper,
body[data-project] .case-section--principles,
body[data-project] .case-section--screens,
body[data-project] .case-section--system {
  background:
    radial-gradient(circle at 6% 14%, color-mix(in srgb, var(--project-bg) 54%, transparent), transparent 25rem),
    var(--jenny-paper);
}

body[data-project] .case-frame {
  border-color: color-mix(in srgb, var(--project-accent) 25%, rgba(23, 23, 23, 0.12));
  box-shadow:
    9px 10px 0 color-mix(in srgb, var(--project-accent) 16%, transparent),
    14px 15px 0 color-mix(in srgb, var(--project-accent-2) 9%, transparent);
}

body[data-project] .frame-ui {
  background:
    radial-gradient(circle at 12% 14%, var(--project-bg) 0 12%, transparent 12.3%),
    linear-gradient(135deg, var(--project-pale), color-mix(in srgb, var(--project-bg) 62%, white));
}

body[data-project] .web-bar i:nth-child(1) {
  background: var(--project-accent);
}

body[data-project] .web-bar i:nth-child(2) {
  background: var(--jenny-yellow);
}

body[data-project] .web-bar i:nth-child(3) {
  background: var(--project-signal);
}

body[data-project] .tiles i:nth-child(1) {
  background: var(--project-bg);
}

body[data-project] .tiles i:nth-child(2) {
  background: var(--project-pale);
}

body[data-project] .tiles i:nth-child(3) {
  background: var(--jenny-pink-soft);
}

body[data-project] .respira-pot::after {
  background: linear-gradient(180deg, var(--project-accent-2), var(--jenny-pink));
}

body[data-project] .rleaf-a {
  background: var(--project-accent);
}

body[data-project] .rleaf-b {
  background: var(--project-signal);
}

body[data-project] .rleaf-c {
  background: var(--project-accent-2);
}

body[data-project] .alley-tree {
  background: radial-gradient(circle at 35% 30%, var(--jenny-green), var(--jenny-sage));
}

body[data-project] .alley-lamp::before {
  background: radial-gradient(circle, var(--jenny-cream), var(--jenny-yellow));
  box-shadow: 0 0 1.8em 0.6em rgba(245, 205, 81, 0.38);
}

body[data-project] .stitch-page {
  background: linear-gradient(120deg, #ffffff, var(--project-pale));
}

body[data-project] .swatch {
  border-color: rgba(23, 23, 23, 0.16);
}

body[data-project] .project-footer {
  position: relative;
  overflow: hidden;
  color: var(--jenny-ink);
}

body[data-project] .project-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background:
    linear-gradient(
      90deg,
      var(--jenny-yellow) 0 33.333%,
      var(--jenny-blue) 33.333% 66.666%,
      var(--jenny-pink) 66.666% 100%
    );
  content: "";
}

@media (min-width: 810px) and (max-height: 820px) {
  body[data-project="echo"] .project-hero h1 {
    margin-top: 8vh;
    max-width: 7ch;
    font-size: clamp(82px, 13vw, 188px);
    line-height: 0.68;
  }

  body[data-project="echo"] .hero-subtitle {
    max-width: 620px;
    margin: 1.2vw 0 0 4.5vw;
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 0.92;
  }
}

/* -------------------------------------------------------------------------- */
/* Whiteboard home                                                            */
/* -------------------------------------------------------------------------- */

body.portfolio-whiteboard-page {
  --ink: var(--jenny-ink);
  --muted: #6f6c72;
  --blue: var(--jenny-blue);
  --paper: var(--jenny-paper);
  --ui-border: rgba(23, 23, 23, 0.13);
  --ui-border-strong: rgba(23, 23, 23, 0.2);
  --ui-hover: var(--jenny-pink-soft);
  --ui-active: var(--jenny-blue-soft);
  --ui-focus: 0 0 0 3px rgba(73, 95, 224, 0.22);
  background: var(--jenny-paper);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .filebar-left {
  border-color: rgba(23, 23, 23, 0.11);
  background: rgba(255, 255, 255, 0.88);
}

.portfolio-whiteboard-page .filebar-right {
  border-color: rgba(23, 23, 23, 0.11);
  background: rgba(255, 255, 255, 0.88);
}

.portfolio-whiteboard-page .tools {
  border-color: rgba(23, 23, 23, 0.11);
  background: rgba(255, 255, 255, 0.88);
}

.portfolio-whiteboard-page .app-mark {
  border-color: rgba(73, 95, 224, 0.2);
  background: var(--jenny-cream);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .app-mark i {
  background: var(--jenny-green);
}

.portfolio-whiteboard-page .app-mark--bunny {
  overflow: hidden;
  background: #fff;
}

.portfolio-whiteboard-page .app-mark--bunny img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  mix-blend-mode: multiply;
  transform: scale(1.08);
}

.portfolio-whiteboard-page .page-chip {
  background: var(--jenny-blue-soft);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .avatar {
  background: var(--jenny-pink);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .filebar-right a {
  background: var(--jenny-blue);
  color: #ffffff;
}

.portfolio-whiteboard-page .filebar-right a:hover {
  background: #3348b2;
}

.portfolio-whiteboard-page .tools button:hover {
  background: rgba(252, 243, 209, 0.58);
}

.portfolio-whiteboard-page .tools .active {
  background: rgba(210, 216, 247, 0.66);
  color: var(--jenny-blue);
  box-shadow: inset 0 0 0 1px rgba(73, 95, 224, 0.13);
}

.portfolio-whiteboard-page .zoom button:last-child {
  background: var(--jenny-cream);
}

.portfolio-whiteboard-page .welcome-card .welcome-copy h1 span,
.portfolio-whiteboard-page .welcome-card .title-line {
  color: var(--jenny-pink);
}

.portfolio-whiteboard-page .welcome-card .welcome-copy h1 strong {
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .welcome-card::before,
.portfolio-whiteboard-page .welcome-card .eyebrow {
  display: none !important;
  content: none !important;
}

.portfolio-whiteboard-page .welcome-card .welcome-meta span {
  border-color: rgba(23, 23, 23, 0.09);
  background: rgba(255, 255, 255, 0.62);
}

.portfolio-whiteboard-page .welcome-card .welcome-hint {
  border-color: rgba(73, 95, 224, 0.2);
  background: rgba(255, 255, 255, 0.72);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .welcome-card .welcome-hint::before {
  background: var(--jenny-teal);
}

.portfolio-whiteboard-page .welcome-card .welcome-art::before {
  background: var(--jenny-pink-soft);
}

.portfolio-whiteboard-page .welcome-card .hero-photo-shadow {
  background: var(--jenny-cream);
}

.portfolio-whiteboard-page .welcome-card .hero-photo-tape {
  background: var(--jenny-blue-soft);
}

.portfolio-whiteboard-page .welcome-card .hero-photo-index {
  background: var(--jenny-yellow);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .welcome-card .hero-photo-scribble {
  color: var(--jenny-pink);
}

.portfolio-whiteboard-page .entry-tag {
  --tab-wash: #f4f3ef;
  --tab-accent: var(--jenny-yellow);
}

.portfolio-whiteboard-page .entry-tag[data-shelf-index="1"],
.portfolio-whiteboard-page .entry-tag[data-shelf-index="4"] {
  --tab-wash: #f4f3ef;
  --tab-accent: var(--jenny-blue);
}

.portfolio-whiteboard-page .entry-tag[data-shelf-index="2"],
.portfolio-whiteboard-page .entry-tag[data-shelf-index="5"] {
  --tab-wash: #f4f3ef;
  --tab-accent: var(--jenny-pink);
}

.portfolio-whiteboard-page .entry-tag[data-shelf-index="3"] {
  --tab-wash: #f4f3ef;
  --tab-accent: var(--jenny-yellow);
}

/* The three portfolio categories use their own semantic palette. These
   selectors intentionally follow the legacy shelf-index rules above so a
   restored six-card board cannot recolor the new tactile objects. */
.portfolio-whiteboard-page .entry-tag.category-card--notes {
  --tab-wash: #eee9ff;
  --tab-accent: #8a70df;
}

.portfolio-whiteboard-page .entry-tag.category-card--projects {
  --tab-wash: #e8f0ff;
  --tab-accent: #5784d8;
}

.portfolio-whiteboard-page .entry-tag.category-card--visuals {
  --tab-wash: #e8f3e8;
  --tab-accent: #6f9d74;
}

.portfolio-whiteboard-page .entry-tag.category-card--portfolio {
  --tab-wash: #fbe8f0;
  --tab-accent: #df5f91;
}

.portfolio-whiteboard-page .entry-tag::before {
  border-color: rgba(23, 23, 23, 0.13);
  background: rgba(255, 254, 250, 0.98);
  box-shadow:
    0 8px 18px rgba(42, 39, 49, 0.09),
    0 1px 3px rgba(42, 39, 49, 0.06);
}

.portfolio-whiteboard-page .entry-tag:hover::before,
.portfolio-whiteboard-page .entry-tag.is-active::before,
.portfolio-whiteboard-page .entry-tag.active::before,
.portfolio-whiteboard-page .entry-tag[aria-expanded="true"]::before {
  border-color: color-mix(in srgb, var(--tab-accent) 24%, rgba(23, 23, 23, 0.13));
  box-shadow:
    0 10px 22px rgba(42, 39, 49, 0.1),
    0 1px 3px rgba(42, 39, 49, 0.06);
}

.portfolio-whiteboard-page .entry-tag__node {
  border-color: rgba(23, 23, 23, 0.1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 4px rgba(245, 244, 241, 0.78),
    0 2px 5px rgba(42, 39, 49, 0.07);
}

.portfolio-whiteboard-page .entry-tag__node i {
  background: var(--tab-accent);
  opacity: 0.72;
}

.portfolio-whiteboard-page .entry-tag__copy b,
.portfolio-whiteboard-page .entry-tag--html .entry-tag__copy b,
.portfolio-whiteboard-page .entry-tag[data-entry-type="html"] .entry-tag__copy b,
.portfolio-whiteboard-page .entry-tag[data-entry-type="project"] .entry-tag__copy b {
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .entry-tag__action {
  background: rgba(241, 239, 235, 0.9);
  color: #595761;
}

.portfolio-whiteboard-page .entry-tag[aria-expanded="true"] .entry-tag__action {
  background: rgba(241, 239, 235, 0.9);
  color: #595761;
}

.portfolio-whiteboard-page .entry-tag.is-selected::before {
  border-color: var(--jenny-blue);
}

.portfolio-whiteboard-page .canvas-panel {
  --panel-fill: var(--jenny-cream);
  --panel-accent: var(--jenny-sage);
  --panel-pop: var(--jenny-yellow);
  border-color: color-mix(in srgb, var(--panel-accent) 28%, rgba(23, 23, 23, 0.14));
  background: color-mix(in srgb, var(--panel-fill) 62%, white);
  box-shadow:
    7px 8px 0 color-mix(in srgb, var(--panel-pop) 18%, transparent),
    0 22px 52px rgba(23, 23, 23, 0.13);
}

.portfolio-whiteboard-page .canvas-panel[data-panel-kind="ideas"],
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="playground"],
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="about"] {
  --panel-fill: var(--jenny-blue-soft);
  --panel-accent: var(--jenny-blue);
  --panel-pop: var(--jenny-teal);
}

.portfolio-whiteboard-page .canvas-panel[data-panel-kind="selected-work"]:not([data-panel-title="Finch.html"]),
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="tiny-experiments"],
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="reading"] {
  --panel-fill: var(--jenny-pink-soft);
  --panel-accent: var(--jenny-sage);
  --panel-pop: var(--jenny-pink);
}

.portfolio-whiteboard-page .canvas-panel[data-panel-title="Finch.html"],
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="process"],
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="notes"] {
  --panel-fill: var(--jenny-cream);
  --panel-accent: var(--jenny-sage);
  --panel-pop: var(--jenny-yellow);
}

.portfolio-whiteboard-page .canvas-panel::before,
.portfolio-whiteboard-page .canvas-panel::after {
  border-color: color-mix(in srgb, var(--panel-pop) 34%, transparent);
  background: color-mix(in srgb, var(--panel-fill) 74%, white);
}

.portfolio-whiteboard-page .canvas-panel .canvas-panel__bar,
.portfolio-whiteboard-page .canvas-panel .panel-header {
  border-color: color-mix(in srgb, var(--panel-accent) 22%, rgba(23, 23, 23, 0.12));
  background: color-mix(in srgb, var(--panel-fill) 88%, white);
}

.portfolio-whiteboard-page .canvas-panel .canvas-panel__body,
.portfolio-whiteboard-page .canvas-panel .panel-body,
.portfolio-whiteboard-page .canvas-panel.canvas-panel--notebook :is(.notes-page, .ideas-page),
.portfolio-whiteboard-page .canvas-panel.canvas-panel--browser .work-page,
.portfolio-whiteboard-page .canvas-panel.canvas-panel--media :is(.playground-page, .tiny-page) {
  background:
    radial-gradient(circle at 94% 9%, color-mix(in srgb, var(--panel-pop) 22%, transparent), transparent 10rem),
    color-mix(in srgb, var(--panel-fill) 48%, white);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .canvas-panel__glyph {
  border-color: color-mix(in srgb, var(--panel-pop) 48%, rgba(23, 23, 23, 0.12));
  background: var(--panel-pop);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page :is(.note-stack blockquote, .idea-notes p, .experiment-grid article):nth-child(3n + 1) {
  background: var(--jenny-cream);
}

.portfolio-whiteboard-page :is(.note-stack blockquote, .idea-notes p, .experiment-grid article):nth-child(3n + 2) {
  background: var(--jenny-blue-soft);
}

.portfolio-whiteboard-page :is(.note-stack blockquote, .idea-notes p, .experiment-grid article):nth-child(3n) {
  background: var(--jenny-pink-soft);
}

.portfolio-whiteboard-page .process-track li:nth-child(1),
.portfolio-whiteboard-page .process-track li:nth-child(4) {
  background: var(--jenny-cream);
}

.portfolio-whiteboard-page .process-track li:nth-child(2) {
  background: var(--jenny-blue-soft);
}

.portfolio-whiteboard-page .process-track li:nth-child(3) {
  background: var(--jenny-pink-soft);
}

.portfolio-whiteboard-page .panel-project--violet {
  background: var(--jenny-blue-soft);
}

.portfolio-whiteboard-page .panel-project--coral {
  background: var(--jenny-pink-soft);
}

.portfolio-whiteboard-page .browser-case-card__tag {
  background: var(--jenny-cream);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .media-card-copy__format {
  background: var(--jenny-blue-soft);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .about-monogram {
  background: var(--jenny-pink);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .tiny-grid article:nth-child(3n + 1) > span {
  background: var(--jenny-cream);
}

.portfolio-whiteboard-page .tiny-grid article:nth-child(3n + 2) > span {
  background: var(--jenny-blue-soft);
}

.portfolio-whiteboard-page .tiny-grid article:nth-child(3n) > span {
  background: var(--jenny-pink-soft);
}

.portfolio-whiteboard-page .mac-control--close {
  background: var(--jenny-pink);
}

.portfolio-whiteboard-page .mac-control--minimize {
  background: var(--jenny-yellow);
}

.portfolio-whiteboard-page .mac-control--zoom {
  background: var(--jenny-green);
}

.portfolio-whiteboard-page .sticky-object {
  background: var(--jenny-cream);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .sticky-object::before {
  background: rgba(210, 216, 247, 0.86);
}

.portfolio-whiteboard-page .whiteboard-shape {
  border-color: var(--jenny-blue);
  background: var(--jenny-blue-soft);
}

.portfolio-whiteboard-page .frame-object {
  border-color: var(--jenny-pink);
  background: rgba(247, 205, 221, 0.2);
}

.portfolio-whiteboard-page .frame-object > span {
  background: var(--jenny-pink-soft);
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .image-object {
  background: var(--jenny-pink-soft);
}

/* Expanded pages: quiet white studio windows --------------------------- */
.portfolio-whiteboard-page .canvas-panel,
.portfolio-whiteboard-page .canvas-panel[data-panel-kind],
.portfolio-whiteboard-page .canvas-panel[data-panel-title] {
  --panel-fill: #ffffff;
  --panel-accent: #77747b;
  --panel-pop: #f2f1ed;
  border-color: rgba(23, 23, 23, 0.13);
  background: #ffffff;
  box-shadow:
    0 26px 62px rgba(23, 23, 23, 0.14),
    0 6px 18px rgba(23, 23, 23, 0.06);
}

.portfolio-whiteboard-page .canvas-panel::before,
.portfolio-whiteboard-page .canvas-panel::after {
  border-color: rgba(23, 23, 23, 0.07);
  background: #f7f6f3;
}

.portfolio-whiteboard-page .canvas-panel .canvas-panel__bar,
.portfolio-whiteboard-page .canvas-panel .panel-header {
  border-color: rgba(23, 23, 23, 0.09);
  background: rgba(255, 255, 255, 0.96);
}

.portfolio-whiteboard-page .canvas-panel .canvas-panel__body,
.portfolio-whiteboard-page .canvas-panel .panel-body,
.portfolio-whiteboard-page .canvas-panel.canvas-panel--notebook :is(.notes-page, .ideas-page),
.portfolio-whiteboard-page .canvas-panel.canvas-panel--browser .work-page,
.portfolio-whiteboard-page .canvas-panel.canvas-panel--media :is(.playground-page, .tiny-page),
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="ideas"] .ideas-studio,
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="tiny-experiments"] .experiment-reel {
  background: #ffffff;
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .canvas-panel__glyph {
  border-color: rgba(23, 23, 23, 0.1);
  background: #f4f3f0;
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page .canvas-panel .panel-kicker,
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="ideas"] .panel-kicker,
.portfolio-whiteboard-page .canvas-panel[data-panel-kind="tiny-experiments"] .experiment-reel__copy .panel-kicker {
  color: #858188 !important;
}

.portfolio-whiteboard-page :is(
  .note-stack blockquote,
  .idea-notes p,
  .experiment-grid article,
  .process-track li,
  .panel-project,
  .tiny-grid article,
  .idea-index article,
  .idea-index__lead,
  .idea-index__stack article,
  .ideas-studio__edition
) {
  border-color: rgba(23, 23, 23, 0.1);
  background: #ffffff !important;
  box-shadow: 0 7px 20px rgba(23, 23, 23, 0.055);
}

.portfolio-whiteboard-page .canvas-panel[data-panel-kind="ideas"] .ideas-studio::before {
  background: #d8d5cf;
}

.portfolio-whiteboard-page .ideas-studio__edition span,
.portfolio-whiteboard-page .ideas-studio__edition small,
.portfolio-whiteboard-page .idea-index small,
.portfolio-whiteboard-page .idea-index__stack article:hover b,
.portfolio-whiteboard-page .idea-index__lead > i {
  color: #8c888e;
}

.portfolio-whiteboard-page .idea-index__lead > i {
  background: #8c888e;
}

.portfolio-whiteboard-page .idea-index__lead > i::after {
  border-color: #8c888e;
}

.portfolio-whiteboard-page .idea-index__lead::after {
  border-color: rgba(23, 23, 23, 0.13);
}

.portfolio-whiteboard-page .experiment-reel__topline i {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.portfolio-whiteboard-page .experiment-reel__open {
  border-color: rgba(23, 23, 23, 0.12);
  background: #ffffff;
  color: #4f4c52;
  box-shadow: 0 7px 17px rgba(23, 23, 23, 0.07);
}

.portfolio-whiteboard-page .canvas-panel[data-panel-kind="tiny-experiments"]:hover .experiment-reel__open {
  background: #242329;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(23, 23, 23, 0.16);
}

.portfolio-whiteboard-page .canvas-panel[data-panel-kind="tiny-experiments"] .experiment-reel__tags span,
.portfolio-whiteboard-page .browser-case-card__tag,
.portfolio-whiteboard-page .media-card-copy__format {
  border: 1px solid rgba(23, 23, 23, 0.1);
  background: #ffffff;
  color: #6f6b71;
}

.portfolio-whiteboard-page .about-monogram {
  border: 1px solid rgba(23, 23, 23, 0.1);
  background: #ffffff;
  color: var(--jenny-ink);
}

.portfolio-whiteboard-page :is(
  .tiny-grid article:nth-child(3n + 1),
  .tiny-grid article:nth-child(3n + 2),
  .tiny-grid article:nth-child(3n)
) > span {
  background: #efeeeb;
}

.portfolio-whiteboard-page .mac-control--close,
.portfolio-whiteboard-page .mac-control--minimize,
.portfolio-whiteboard-page .mac-control--zoom {
  border: 1px solid rgba(23, 23, 23, 0.09);
  background: #f0efec;
}

@media (max-width: 809px) {
  .portfolio-work-page .archive-heading h1::after {
    width: 150px;
    height: 7px;
  }

  .portfolio-work-page .work-footer {
    background:
      radial-gradient(circle at 89% 14%, var(--jenny-pink) 0 25px, transparent 26px),
      linear-gradient(150deg, var(--jenny-cream) 0 62%, var(--jenny-blue-soft) 62% 82%, var(--jenny-pink-soft) 82%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-work-page .project-meta::before {
    transition: none;
  }
}

/* AI Design Skill -------------------------------------------------------
   The first shelf file opens as a living SKILL.md rather than the previous
   generic notes page. Keep the notebook material, but let the content read
   like an authored open-source system with real output and a visible QA loop. */
.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) {
  --panel-accent: #7664df;
  --skill-ink: #242128;
  --skill-muted: #77717c;
  --skill-purple: #7664df;
  --skill-purple-soft: #eeeafd;
  --skill-yellow: #f3ca58;
  --skill-pink: #e85d8b;
  --skill-green: #68a26d;
  width: 900px;
  height: 680px;
  min-height: 0;
  grid-template-rows: 64px minmax(0, 1fr) 38px;
  border-color: rgba(71, 63, 84, 0.16);
  background: #fffefa;
  box-shadow:
    0 34px 82px rgba(44, 38, 57, 0.19),
    0 7px 22px rgba(44, 38, 57, 0.08);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
)::before {
  border-color: rgba(118, 100, 223, 0.11);
  background:
    repeating-linear-gradient(to bottom, #f7f4ec 0 27px, #ebe5d8 28px);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__bar {
  padding: 0 17px 0 21px;
  border-bottom-color: rgba(71, 63, 84, 0.1);
  background:
    linear-gradient(90deg, rgba(250, 247, 239, 0.98), rgba(255, 255, 255, 0.98) 72%);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__identity {
  gap: 12px;
  margin-left: 36px;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__glyph {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px 5px 10px 5px;
  font-size: 11px;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__identity p {
  gap: 4px;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__identity small {
  font-size: 11px;
  letter-spacing: 0.105em;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__identity strong {
  font-size: 14px;
  font-weight: 700;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__actions button {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__bar::after {
  background: rgba(195, 183, 240, 0.8);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .canvas-panel__glyph {
  border-color: rgba(118, 100, 223, 0.16);
  background: var(--skill-purple-soft);
  color: var(--skill-purple);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .ai-skill-page {
  padding: 42px 48px 58px 74px;
  background:
    radial-gradient(circle at 91% 2%, rgba(210, 216, 247, 0.58), transparent 210px),
    linear-gradient(rgba(255, 254, 250, 0.965), rgba(255, 254, 250, 0.985)),
    repeating-linear-gradient(
      to bottom,
      transparent 0 29px,
      rgba(126, 142, 166, 0.11) 30px
    );
  color: var(--skill-ink);
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .ai-skill-page::before {
  left: 57px;
  background: rgba(118, 100, 223, 0.2);
}

.portfolio-whiteboard-page .ai-skill-page :is(h2, h3, p) {
  max-width: none;
}

.portfolio-whiteboard-page .ai-skill-page .panel-kicker {
  margin-bottom: 12px !important;
  color: var(--skill-purple) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em;
}

.ai-skill-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: start;
}

.portfolio-whiteboard-page .ai-skill-hero h2 {
  max-width: 650px;
  margin: 0 0 20px;
  color: var(--skill-ink);
  font-size: 53px;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.portfolio-whiteboard-page .ai-skill-hero h2 span {
  color: var(--skill-purple);
}

.portfolio-whiteboard-page .ai-skill-hero .ai-skill-hero__lead {
  max-width: 690px;
  margin-bottom: 24px;
  color: #66606a;
  font-size: 15px;
  line-height: 1.68;
}

.ai-skill-repo-link {
  display: grid;
  min-width: 92px;
  gap: 10px;
  justify-items: end;
  padding-top: 2px;
  color: var(--skill-ink);
  text-decoration: none;
}

.ai-skill-repo-link span {
  font: 500 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.11em;
}

.ai-skill-repo-link b {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(58, 52, 66, 0.15);
  border-radius: 50%;
  background: #fff;
  font: 500 15px/1 var(--portfolio-font-body);
  transition:
    color 220ms ease,
    background 220ms ease,
    transform 220ms ease;
}

.ai-skill-repo-link:hover b,
.ai-skill-repo-link:focus-visible b {
  background: var(--skill-ink);
  color: #fff;
  transform: translate(2px, -2px);
}

.ai-skill-facts {
  display: grid;
  max-width: 610px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(62, 56, 70, 0.12);
  border-bottom: 1px solid rgba(62, 56, 70, 0.12);
}

.ai-skill-facts > span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px 13px 0;
}

.ai-skill-facts > span + span {
  padding-left: 17px;
  border-left: 1px solid rgba(62, 56, 70, 0.1);
}

.ai-skill-facts strong {
  color: var(--skill-ink);
  font: 900 25px/1 var(--portfolio-font-display);
  letter-spacing: -0.04em;
}

.ai-skill-facts small {
  color: #8b858e;
  font: 500 10px/1.28 var(--portfolio-font-mono);
  letter-spacing: 0.035em;
}

.ai-skill-runner {
  position: relative;
  display: grid;
  min-height: 196px;
  grid-template-columns: 1.14fr 1.62fr 0.82fr;
  gap: 22px;
  align-items: center;
  margin: 38px 0 50px;
  padding: 28px 26px;
  overflow: hidden;
  border: 1px solid rgba(118, 100, 223, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(112deg, rgba(238, 234, 253, 0.92), rgba(255, 251, 231, 0.78));
  box-shadow:
    0 16px 34px rgba(69, 59, 91, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.8);
}

.ai-skill-runner::after {
  position: absolute;
  right: -44px;
  bottom: -62px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(118, 100, 223, 0.13);
  border-radius: 50%;
  content: "";
}

.ai-skill-runner__prompt {
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: grid;
  align-content: center;
  padding-right: 12px;
  border-right: 1px dashed rgba(76, 67, 91, 0.16);
}

.ai-skill-runner__prompt small {
  color: #81798a;
  font: 500 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.11em;
}

.ai-skill-runner__prompt blockquote {
  margin: 13px 0 0;
  color: var(--skill-ink);
  font: 700 16px/1.48 var(--portfolio-font-body);
}

.ai-skill-runner__prompt blockquote i {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 4px;
  background: var(--skill-purple);
  vertical-align: -3px;
  animation: ai-skill-caret 0.9s steps(1) infinite;
}

.ai-skill-runner__route {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.ai-skill-runner__route::before {
  position: absolute;
  z-index: -1;
  top: 35px;
  right: 3%;
  left: 3%;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(118, 100, 223, 0.28) 20% 80%,
      transparent
    );
  content: "";
}

.ai-skill-runner__lead {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(118, 100, 223, 0.17);
  border-radius: 50%;
  background: var(--skill-purple);
  color: #fff;
  box-shadow:
    0 10px 24px rgba(118, 100, 223, 0.2),
    0 0 0 8px rgba(118, 100, 223, 0.07);
}

.ai-skill-runner__lead b {
  font: 700 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.09em;
}

.ai-skill-runner__lead small {
  margin-top: 5px;
  font: 400 10px/1 var(--portfolio-font-mono);
  opacity: 0.68;
}

.ai-skill-runner__agents {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
}

.ai-skill-runner__agents span {
  display: grid;
  min-width: 0;
  min-height: 25px;
  place-items: center;
  border-top: 1px solid rgba(118, 100, 223, 0.23);
  color: #756f79;
  font: 500 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.025em;
  opacity: 0;
  animation: ai-skill-agent-on 320ms ease forwards;
}

.ai-skill-runner__agents span:nth-child(2) { animation-delay: 120ms; }
.ai-skill-runner__agents span:nth-child(3) { animation-delay: 240ms; }
.ai-skill-runner__agents span:nth-child(4) { animation-delay: 360ms; }
.ai-skill-runner__agents span:nth-child(5) { animation-delay: 480ms; }
.ai-skill-runner__agents span:nth-child(6) { animation-delay: 600ms; }

.ai-skill-runner__pulse {
  position: absolute;
  z-index: 4;
  top: 34px;
  left: 3%;
  width: 7px;
  height: 7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--skill-yellow);
  box-shadow: 0 0 0 4px rgba(243, 202, 88, 0.19);
  animation: ai-skill-route 2.8s ease-in-out infinite;
}

.ai-skill-runner__result {
  position: relative;
  z-index: 2;
  width: 112px;
  height: 104px;
  justify-self: center;
}

.ai-skill-runner__result > i {
  position: absolute;
  inset: 0 0 22px;
  border: 1px solid rgba(60, 54, 68, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(210, 216, 247, 0.9), rgba(255, 255, 255, 0.95));
  box-shadow: 0 9px 18px rgba(48, 43, 58, 0.1);
}

.ai-skill-runner__result > i:nth-child(1) {
  transform: rotate(-8deg) translate(-8px, 5px);
}

.ai-skill-runner__result > i:nth-child(2) {
  background:
    linear-gradient(110deg, rgba(247, 205, 221, 0.92), rgba(255, 255, 255, 0.95));
  transform: rotate(6deg) translate(8px, 3px);
}

.ai-skill-runner__result > i:nth-child(3) {
  background:
    linear-gradient(110deg, rgba(255, 247, 211, 0.96), rgba(255, 255, 255, 0.98));
}

.ai-skill-runner__result > i:nth-child(3)::before,
.ai-skill-runner__result > i:nth-child(3)::after {
  position: absolute;
  right: 12px;
  left: 12px;
  height: 5px;
  border-radius: 5px;
  background: rgba(118, 100, 223, 0.16);
  content: "";
}

.ai-skill-runner__result > i:nth-child(3)::before {
  top: 17px;
}

.ai-skill-runner__result > i:nth-child(3)::after {
  top: 31px;
  right: 39px;
}

.ai-skill-runner__result > span {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--skill-green);
  font: 700 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.09em;
}

.ai-skill-output,
.ai-skill-pipeline,
.ai-skill-agents,
.ai-skill-qa {
  padding: 38px 0 42px;
  border-top: 1px solid rgba(57, 51, 64, 0.11);
}

.ai-skill-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: end;
  margin-bottom: 20px;
}

.portfolio-whiteboard-page .ai-skill-section-heading h3,
.portfolio-whiteboard-page .ai-skill-qa h3 {
  margin: 0;
  color: var(--skill-ink);
  font-size: 30px;
  line-height: 1.04;
}

.ai-skill-section-heading > span,
.ai-skill-section-heading > small {
  align-self: end;
  padding-bottom: 4px;
  color: #8f8992;
  font: 500 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.08em;
}

.ai-skill-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(51, 46, 58, 0.12);
  border-radius: 17px;
  background: #edf1f4;
  box-shadow:
    0 18px 34px rgba(46, 42, 53, 0.11),
    inset 0 1px rgba(255, 255, 255, 0.8);
}

.ai-skill-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 180ms ease,
    transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-skill-preview:hover img {
  transform: scale(1.018);
}

.ai-skill-preview.is-changing img {
  opacity: 0.35;
  transform: scale(1.025);
}

.ai-skill-preview figcaption {
  position: absolute;
  right: 16px;
  bottom: 15px;
  left: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: #5f5a63;
  font: 500 10px/1.45 var(--portfolio-font-body);
  backdrop-filter: blur(12px);
}

.ai-skill-preview-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid rgba(57, 51, 64, 0.1);
  border-bottom: 1px solid rgba(57, 51, 64, 0.1);
}

.ai-skill-preview-tabs button {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 13px 12px;
  border: 0;
  background: transparent;
  color: #8e8891;
  font: 600 10px/1 var(--portfolio-font-body);
  text-align: left;
  transition:
    color 180ms ease,
    background 180ms ease;
}

.ai-skill-preview-tabs button + button {
  border-left: 1px solid rgba(57, 51, 64, 0.1);
}

.ai-skill-preview-tabs button span {
  color: #aaa4ad;
  font: 500 10px/1 var(--portfolio-font-mono);
}

.ai-skill-preview-tabs button:hover,
.ai-skill-preview-tabs button:focus-visible {
  color: var(--skill-ink);
  background: rgba(238, 234, 253, 0.42);
}

.ai-skill-preview-tabs button[aria-selected="true"] {
  color: var(--skill-purple);
  background: var(--skill-purple-soft);
}

.ai-skill-stage-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.ai-skill-stage-rail::before {
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--skill-purple), var(--skill-yellow), var(--skill-pink), var(--skill-green));
  content: "";
  opacity: 0.62;
}

.ai-skill-stage-rail li {
  position: relative;
  min-width: 0;
  padding: 26px 18px 0 0;
}

.ai-skill-stage-rail li + li {
  padding-left: 18px;
  border-left: 1px solid rgba(57, 51, 64, 0.09);
}

.ai-skill-stage-rail li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #fffefa;
  border-radius: 50%;
  background: var(--skill-purple);
  box-shadow: 0 0 0 1px rgba(57, 51, 64, 0.15);
  content: "";
}

.ai-skill-stage-rail li:nth-child(2)::before { left: 18px; background: var(--skill-yellow); }
.ai-skill-stage-rail li:nth-child(3)::before { left: 18px; background: var(--skill-pink); }
.ai-skill-stage-rail li:nth-child(4)::before { left: 18px; background: var(--skill-green); }

.ai-skill-stage-rail span {
  display: block;
  margin-bottom: 9px;
  color: #aaa4ad;
  font: 500 10px/1 var(--portfolio-font-mono);
}

.ai-skill-stage-rail strong {
  color: var(--skill-ink);
  font: 800 16px/1 var(--portfolio-font-body);
}

.portfolio-whiteboard-page .ai-skill-stage-rail p {
  margin: 10px 0 0;
  color: #78727b;
  font-size: 13px;
  line-height: 1.55;
}

.ai-skill-role-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 24px;
  border-top: 1px solid rgba(57, 51, 64, 0.11);
  border-bottom: 1px solid rgba(57, 51, 64, 0.11);
}

.ai-skill-role-track button {
  position: relative;
  min-width: 0;
  padding: 14px 8px;
  border: 0;
  background: transparent;
  color: #97919a;
  font: 600 10px/1 var(--portfolio-font-mono);
  text-align: center;
}

.ai-skill-role-track button + button {
  border-left: 1px solid rgba(57, 51, 64, 0.08);
}

.ai-skill-role-track button::after {
  position: absolute;
  right: 18%;
  bottom: -1px;
  left: 18%;
  height: 2px;
  background: var(--skill-purple);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.ai-skill-role-track button:hover,
.ai-skill-role-track button:focus-visible,
.ai-skill-role-track button[aria-selected="true"] {
  color: var(--skill-ink);
}

.ai-skill-role-track button[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.ai-skill-role-detail {
  display: grid;
  min-height: 88px;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px 0 0;
}

.ai-skill-role-detail > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--skill-purple-soft);
  color: var(--skill-purple);
  font: 500 8px/1 var(--portfolio-font-mono);
}

.ai-skill-role-detail strong {
  color: var(--skill-ink);
  font: 800 16px/1.15 var(--portfolio-font-body);
}

.portfolio-whiteboard-page .ai-skill-role-detail p {
  max-width: 620px;
  margin: 8px 0 0;
  color: #736d76;
  font-size: 12px;
  line-height: 1.58;
}

.ai-skill-qa {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 38px;
  align-items: center;
}

.ai-skill-qa__preview {
  position: relative;
  display: grid;
  height: 145px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-content: center;
  overflow: hidden;
  padding: 19px;
  border: 1px solid rgba(57, 51, 64, 0.12);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 13px 27px rgba(46, 41, 54, 0.08);
}

.ai-skill-qa__preview > span {
  display: block;
  height: 38px;
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(210, 216, 247, 0.8) 0 31%, rgba(239, 237, 244, 0.9) 31%);
}

.ai-skill-qa__preview > span:nth-child(2) {
  background:
    linear-gradient(90deg, rgba(247, 205, 221, 0.74) 0 52%, rgba(239, 237, 244, 0.9) 52%);
}

.ai-skill-qa__preview > span:nth-child(3) {
  background:
    linear-gradient(90deg, rgba(255, 247, 211, 0.9) 0 38%, rgba(239, 237, 244, 0.9) 38%);
}

.ai-skill-qa__preview > span:nth-child(4) {
  background:
    linear-gradient(90deg, rgba(206, 226, 208, 0.9) 0 61%, rgba(239, 237, 244, 0.9) 61%);
}

.ai-skill-qa__scanner {
  position: absolute;
  z-index: 2;
  right: 9px;
  left: 9px;
  height: 2px;
  background: var(--skill-pink);
  box-shadow: 0 0 15px rgba(232, 93, 139, 0.52);
  animation: ai-skill-scan 2.8s ease-in-out infinite;
}

.ai-skill-qa__preview b {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(104, 162, 109, 0.18);
  border-radius: 999px;
  background: #edf6ee;
  color: var(--skill-green);
  font: 700 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.08em;
}

.portfolio-whiteboard-page .ai-skill-qa__copy > p {
  margin: 14px 0 0;
  color: #706a73;
  font-size: 12px;
  line-height: 1.62;
}

.ai-skill-qa__loop {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 18px;
  color: #78717b;
  font: 500 10px/1 var(--portfolio-font-mono);
  letter-spacing: 0.07em;
}

.ai-skill-qa__loop i {
  color: var(--skill-purple);
  font-style: normal;
}

.ai-skill-principle {
  display: grid;
  grid-template-columns: 135px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 4px;
  padding: 24px 0 2px;
  border-top: 1px solid rgba(57, 51, 64, 0.11);
}

.ai-skill-principle > span {
  color: var(--skill-purple);
  font: 600 10px/1.2 var(--portfolio-font-mono);
  letter-spacing: 0.11em;
}

.portfolio-whiteboard-page .ai-skill-principle p {
  margin: 0;
  color: #666069;
  font-size: 13px;
  line-height: 1.58;
}

.ai-skill-principle strong {
  color: var(--skill-ink);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--skill,
  .canvas-panel[data-panel-title="uiux-demo-skill"]
) .ai-skill-footer {
  padding-right: 18px;
  padding-left: 74px;
  border-top-color: rgba(57, 51, 64, 0.1);
  background: #fffefa;
}

.ai-skill-footer a {
  color: var(--skill-purple);
  font-weight: 700;
  text-decoration: none;
}

.ai-skill-footer a:hover,
.ai-skill-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes ai-skill-caret {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: 0; }
}

@keyframes ai-skill-agent-on {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ai-skill-route {
  0%, 10% { left: 3%; opacity: 0; }
  18% { opacity: 1; }
  72% { left: calc(97% - 7px); opacity: 1; }
  82%, 100% { left: calc(97% - 7px); opacity: 0; }
}

@keyframes ai-skill-scan {
  0%, 10% {
    top: 17px;
    background: var(--skill-pink);
  }
  66% {
    top: 122px;
    background: var(--skill-pink);
  }
  78%, 100% {
    top: 122px;
    background: var(--skill-green);
  }
}

@media (max-width: 800px) {
  .portfolio-whiteboard-page :is(
    .canvas-panel.canvas-panel--skill,
    .canvas-panel[data-panel-title="uiux-demo-skill"]
  ) {
    width: 570px;
    height: 620px;
  }

  .portfolio-whiteboard-page :is(
    .canvas-panel.canvas-panel--skill,
    .canvas-panel[data-panel-title="uiux-demo-skill"]
  ) .ai-skill-page {
    padding: 34px 28px 48px 68px;
  }

  .portfolio-whiteboard-page .ai-skill-hero h2 {
    font-size: 40px;
  }

  .ai-skill-runner {
    grid-template-columns: 1fr 1.35fr 0.72fr;
    gap: 12px;
    padding: 22px 16px;
  }

  .ai-skill-runner__prompt blockquote {
    font-size: 13px;
  }

  .ai-skill-runner__lead {
    width: 62px;
    height: 62px;
  }

  .ai-skill-runner__agents span {
    font-size: 10px;
  }

  .ai-skill-runner__result {
    width: 82px;
    height: 85px;
  }

  .ai-skill-stage-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  .ai-skill-stage-rail::before {
    display: none;
  }

  .ai-skill-stage-rail li,
  .ai-skill-stage-rail li + li {
    padding: 20px 16px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(57, 51, 64, 0.1);
  }

  .ai-skill-stage-rail li:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid rgba(57, 51, 64, 0.08);
  }

  .ai-skill-stage-rail li::before,
  .ai-skill-stage-rail li:nth-child(2)::before,
  .ai-skill-stage-rail li:nth-child(3)::before,
  .ai-skill-stage-rail li:nth-child(4)::before {
    top: -5px;
    left: 0;
  }

  .ai-skill-qa {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
  }

  .ai-skill-role-track {
    overflow-x: auto;
    grid-template-columns: repeat(6, minmax(76px, 1fr));
  }

  .ai-skill-principle {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-skill-runner__prompt blockquote i,
  .ai-skill-runner__pulse,
  .ai-skill-runner__agents span,
  .ai-skill-qa__scanner {
    animation: none !important;
  }

  .ai-skill-runner__agents span {
    opacity: 1;
  }

  .ai-skill-qa__scanner {
    top: 122px;
    background: var(--skill-green);
  }

  .ai-skill-preview img,
  .ai-skill-repo-link b {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Vibe Coding project: Fumble / 失手录
   The title selector also styles panels restored from localStorage, whose
   class list predates this project-specific template.
   -------------------------------------------------------------------------- */

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--fanche,
  .canvas-panel[data-panel-title="fanche-lottery.app"],
  .canvas-panel[data-panel-title="vibe-coded-products.web"]
) {
  --fanche-ink: #2f2924;
  --fanche-cocoa: #4b382d;
  --fanche-paper: #fbf7ed;
  --fanche-paper-deep: #f2ead9;
  --fanche-sage: #9cb7a0;
  --fanche-blue: #b9cbe3;
  --fanche-pink: #e6b9ba;
  --fanche-yellow: #f0d889;
  width: 1240px;
  height: 920px;
  min-height: 920px;
  grid-template-rows: 60px minmax(0, 1fr) 38px;
  border-color: rgba(70, 55, 43, 0.16);
  background: #fff;
  box-shadow:
    0 34px 74px rgba(61, 48, 39, 0.2),
    0 7px 18px rgba(61, 48, 39, 0.09);
}

.portfolio-whiteboard-page:has(
  .canvas-panel[data-panel-title="vibe-coded-products.web"].is-panel-active
) :is(.portfolio-dock, .zoom) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px) scale(0.96);
}

.portfolio-whiteboard-page:has(
  .canvas-panel[data-panel-title="vibe-coded-products.web"].is-panel-active
) .portfolio-dock {
  transform: translate(-50%, calc(100% + 34px)) scale(0.96);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--fanche,
  .canvas-panel[data-panel-title="fanche-lottery.app"],
  .canvas-panel[data-panel-title="vibe-coded-products.web"]
) .canvas-panel__bar::after {
  width: 406px;
  height: 36px;
  content: "jenny.design / live / Walkl + Fumble";
  font: 650 12px/1 var(--sans);
  letter-spacing: 0.025em;
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--fanche,
  .canvas-panel[data-panel-title="fanche-lottery.app"],
  .canvas-panel[data-panel-title="vibe-coded-products.web"]
) .fanche-page {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  padding: 0;
  background: var(--fanche-paper);
  color: var(--fanche-ink);
  overscroll-behavior: contain;
}

.fanche-page > * {
  flex: 0 0 auto;
}

.vibe-project-index {
  position: sticky;
  z-index: 16;
  top: 0;
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 10px 38px;
  border-bottom: 1px solid rgba(75, 56, 45, 0.1);
  background: rgba(255, 253, 248, 0.88);
  box-shadow: 0 8px 22px rgba(75, 56, 45, 0.035);
  backdrop-filter: blur(14px) saturate(1.12);
}

.vibe-project-index a {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #6e635a;
  font: 750 17px/1.1 var(--sans);
  text-decoration: none;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.vibe-project-index a small {
  color: #a19891;
  font: 700 12px/1 var(--mono);
}

.vibe-project-index a span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.vibe-project-index a span b {
  color: #8b8178;
  font: 650 14px/1 var(--sans);
}

.vibe-project-index a:first-child {
  border-color: rgba(75, 56, 45, 0.11);
  background: rgba(255, 255, 255, 0.76);
}

.vibe-project-index a:nth-child(2) small,
.vibe-project-index a:nth-child(2) span b {
  color: #ff8f22;
}

.vibe-project-index a:hover,
.vibe-project-index a:focus-visible {
  border-color: rgba(91, 105, 221, 0.18);
  background: #fff;
  color: #313a9b;
  outline: 0;
  transform: translateY(-1px);
}

.fanche-page:has(#vibe-fumble:target) .vibe-project-index a:first-child {
  border-color: transparent;
  background: transparent;
  color: #6e635a;
}

.fanche-page:has(#vibe-fumble:target) .vibe-project-index a[href="#vibe-fumble"],
.fanche-page:has(#vibe-walkl:target) .vibe-project-index a[href="#vibe-walkl"] {
  border-color: rgba(75, 56, 45, 0.11);
  background: #fff;
  color: #313a9b;
}

.vibe-project-index em {
  margin-left: auto;
  color: #9d9289;
  font: 650 12px/1 var(--sans);
  font-style: normal;
  letter-spacing: 0.08em;
}

#vibe-fumble,
#vibe-walkl {
  scroll-margin-top: 76px;
}

.fanche-page > .vibe-project-index {
  order: 0;
}

.fanche-page > #vibe-walkl {
  order: 1;
}

.fanche-page > .walkl-capabilities {
  order: 2;
}

.fanche-page > #vibe-fumble {
  order: 3;
}

.fanche-page > .fanche-thesis {
  order: 4;
}

.fanche-page > .fanche-flow {
  order: 5;
}

.fanche-page > .fanche-rituals {
  order: 6;
}

.fanche-page > .fanche-system {
  order: 7;
}

.portfolio-whiteboard-page .fanche-page :is(h2, h3, p) {
  margin: 0;
}

.portfolio-whiteboard-page .fanche-page .panel-kicker {
  margin: 0;
  color: #8d8379 !important;
  font: 700 12px/1.4 var(--mono);
  letter-spacing: 0.12em;
}

.fanche-hero {
  position: relative;
  display: grid;
  min-height: 744px;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 82px;
  align-items: center;
  padding: 28px 58px;
  overflow: hidden;
  border-bottom: 1px solid rgba(69, 54, 43, 0.1);
  background:
    radial-gradient(circle at 3% 7%, rgba(240, 216, 137, 0.38), transparent 17rem),
    radial-gradient(circle at 96% 82%, rgba(185, 203, 227, 0.34), transparent 18rem),
    linear-gradient(145deg, #fffdf8 0%, #faf6ec 64%, #fff 100%);
}

.fanche-hero::before,
.fanche-hero::after {
  position: absolute;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}

.fanche-hero::before {
  top: 66px;
  left: -86px;
  width: 174px;
  height: 174px;
  border: 1px solid rgba(75, 56, 45, 0.1);
  box-shadow:
    inset 0 0 0 17px rgba(240, 216, 137, 0.1),
    inset 0 0 0 35px rgba(255, 255, 255, 0.25);
}

.fanche-hero::after {
  right: 358px;
  bottom: 62px;
  width: 10px;
  height: 10px;
  background: var(--fanche-pink);
  box-shadow:
    20px 0 0 var(--fanche-yellow),
    40px 0 0 var(--fanche-sage);
}

.fanche-hero__copy {
  position: relative;
  z-index: 1;
  width: min(100%, 590px);
}

.fanche-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 8px 12px;
  border: 1px solid rgba(75, 56, 45, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #70665e;
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.09em;
  backdrop-filter: blur(10px);
}

.fanche-live-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62a96c;
  box-shadow: 0 0 0 4px rgba(98, 169, 108, 0.12);
  animation: fanche-live-pulse 2.2s ease-in-out infinite;
}

.portfolio-whiteboard-page .fanche-hero h2 {
  display: grid;
  gap: 8px;
  margin: 12px 0 20px;
  color: var(--fanche-ink);
}

.portfolio-whiteboard-page .fanche-hero h2 > span {
  font: 650 78px/0.98 var(--sans);
  letter-spacing: -0.06em;
}

.portfolio-whiteboard-page .fanche-hero h2 > small {
  padding-left: 5px;
  color: #72665c;
  font: 500 16px/1 var(--serif);
  letter-spacing: 0.52em;
}

.portfolio-whiteboard-page .fanche-hero .fanche-hero__lead {
  max-width: 34ch;
  color: #655b53;
  font: 500 19px/1.72 var(--sans);
  letter-spacing: -0.015em;
}

.fanche-hero__facts {
  display: grid;
  max-width: 520px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 30px;
  border-top: 1px solid rgba(75, 56, 45, 0.12);
  border-bottom: 1px solid rgba(75, 56, 45, 0.12);
}

.fanche-hero__facts > span {
  display: grid;
  gap: 5px;
  padding: 18px 14px 17px 0;
}

.fanche-hero__facts > span + span {
  padding-left: 18px;
  border-left: 1px solid rgba(75, 56, 45, 0.1);
}

.fanche-hero__facts strong {
  color: var(--fanche-ink);
  font: 700 24px/1 var(--sans);
  letter-spacing: -0.045em;
}

.fanche-hero__facts small {
  color: #8a8078;
  font: 550 12px/1.25 var(--sans);
  letter-spacing: 0.03em;
}

.fanche-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.fanche-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 0 19px;
  border: 1px solid rgba(75, 56, 45, 0.14);
  border-radius: 10px;
  color: var(--fanche-cocoa);
  font: 700 14px/1 var(--sans);
  text-decoration: none;
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.fanche-button b {
  font: 500 18px/1 var(--sans);
  transition: transform 220ms ease;
}

.fanche-button--primary {
  min-width: 158px;
  border-color: var(--fanche-cocoa);
  background: var(--fanche-cocoa);
  color: #fffdf7;
  box-shadow: 0 10px 22px rgba(75, 56, 45, 0.16);
}

.fanche-button--secondary {
  min-width: 150px;
  background: rgba(255, 255, 255, 0.7);
}

.fanche-button:hover,
.fanche-button:focus-visible {
  transform: translateY(-2px);
}

.fanche-button:hover b,
.fanche-button:focus-visible b {
  transform: translate(2px, -2px);
}

.fanche-button--primary:hover,
.fanche-button--primary:focus-visible {
  background: #2e2520;
  box-shadow: 0 14px 26px rgba(75, 56, 45, 0.23);
}

.fanche-button:focus-visible,
.fanche-live-shell__poster button:focus-visible {
  outline: 2px solid #5b69dd;
  outline-offset: 3px;
}

.portfolio-whiteboard-page .fanche-hero .fanche-hero__hint {
  display: flex;
  gap: 7px;
  align-items: baseline;
  margin-top: 16px;
  color: #948981;
  font: 550 12px/1.55 var(--sans);
}

.fanche-hero__hint i {
  color: #be8f8e;
  font-size: 13px;
}

.fanche-live-shell {
  /*
   * Fit the complete 390 × 844 live page inside the first project viewport.
   * The panel body has 552px left after the sticky project tabs, so the
   * previous 608px shell was always clipped by the fixed panel footer.
   */
  --fanche-device-scale: 0.6871794872;
  position: relative;
  z-index: 2;
  display: grid;
  width: 280px;
  height: 638px;
  grid-template-rows: 24px minmax(0, 1fr) 20px;
  align-self: start;
  justify-self: center;
  padding: 6px;
  border: 1px solid rgba(36, 29, 25, 0.62);
  border-radius: 44px;
  background: #292421;
  box-shadow:
    0 30px 55px rgba(58, 45, 36, 0.22),
    0 8px 18px rgba(58, 45, 36, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: rotate(1deg);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fanche-live-shell:hover,
.fanche-live-shell:focus-within {
  transform: rotate(0deg) translateY(-3px);
}

.fanche-live-shell__bar,
.fanche-live-shell__footer {
  display: grid;
  align-items: center;
  color: rgba(255, 255, 255, 0.67);
  font: 650 8px/1 var(--mono);
  letter-spacing: 0.035em;
}

.fanche-live-shell__bar {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 4px;
  padding: 0 5px;
}

.fanche-live-shell__bar > span {
  display: flex;
  align-items: center;
}

.fanche-live-shell__bar i {
  display: none;
}

.fanche-live-shell__bar > span::before {
  color: rgba(255, 255, 255, 0.82);
  content: "9:41";
  font: 700 8px/1 var(--mono);
  letter-spacing: 0.02em;
}

.fanche-live-shell__bar b {
  overflow: hidden;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  font-weight: 500;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fanche-live-shell__bar em {
  color: #94d39b;
  font-style: normal;
}

.fanche-live-shell__viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 36px;
  background:
    radial-gradient(circle at 30% 18%, rgba(240, 216, 137, 0.27), transparent 9rem),
    #f9f4e8;
}

.fanche-live-shell__viewport iframe {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto 0;
  display: block;
  width: 390px;
  height: 844px;
  border: 0;
  background: #f9f4e8;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--fanche-device-scale));
  transform-origin: 0 0;
  transition: opacity 420ms ease;
}

.fanche-live-shell.is-live .fanche-live-shell__viewport iframe {
  opacity: 1;
  pointer-events: auto;
}

.fanche-live-shell__poster {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 32px 24px;
  background:
    linear-gradient(rgba(91, 71, 54, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 71, 54, 0.027) 1px, transparent 1px),
    radial-gradient(circle at 85% 18%, rgba(230, 185, 186, 0.31), transparent 9rem),
    #fbf7ec;
  background-size: 18px 18px, 18px 18px, auto, auto;
  color: var(--fanche-ink);
  text-align: center;
  transition: opacity 340ms ease, transform 340ms ease;
}

.fanche-live-shell.is-live .fanche-live-shell__poster {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.025);
}

.fanche-live-shell__poster > div {
  display: grid;
  justify-items: center;
}

.fanche-live-shell__poster > div small {
  color: #94877d;
  font: 650 9px/1 var(--mono);
  letter-spacing: 0.22em;
}

.fanche-live-shell__poster > div strong {
  margin-top: 16px;
  font: 600 44px/1 var(--sans);
  letter-spacing: -0.055em;
}

.fanche-live-shell__poster > div span {
  margin-top: 8px;
  color: #71655c;
  font: 550 12px/1 var(--serif);
  letter-spacing: 0.5em;
}

.fanche-live-shell__poster > div i {
  width: 54px;
  height: 1px;
  margin-top: 20px;
  background: rgba(75, 56, 45, 0.24);
}

.fanche-live-shell.is-loading .fanche-live-shell__poster > div i {
  width: 82px;
  background: linear-gradient(90deg, transparent, var(--fanche-cocoa), transparent);
  animation: fanche-load-line 1.25s ease-in-out infinite;
}

.portfolio-whiteboard-page .fanche-live-shell__poster > p {
  max-width: 21ch;
  margin: 24px 0 20px;
  color: #665b53;
  font: 500 13px/1.6 var(--serif);
}

.fanche-live-shell__poster button {
  display: inline-flex;
  min-width: 154px;
  height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 15px 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--fanche-cocoa);
  color: #fffdf7;
  box-shadow: 0 11px 22px rgba(75, 56, 45, 0.17);
  font: 700 13px/1 var(--sans);
  transition: transform 200ms ease, background 200ms ease;
}

.fanche-live-shell__poster button b {
  font: 500 17px/1 var(--sans);
}

.fanche-live-shell__poster button:hover {
  background: #2d2520;
  transform: translateY(-2px);
}

.fanche-live-shell__poster button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.fanche-live-shell__poster > small {
  min-height: 20px;
  margin-top: 13px;
  color: #9d9188;
  font: 550 9px/1.4 var(--sans);
}

.fanche-live-shell.is-delayed .fanche-live-shell__poster > small {
  max-width: 28ch;
  color: #a65f5d;
}

.fanche-live-shell__footer {
  grid-template-columns: auto 1fr;
  gap: 6px;
  padding: 0 6px;
}

.fanche-live-shell__footer span {
  color: #f4d879;
}

.fanche-live-shell__footer small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.47);
  font: 550 8px/1 var(--sans);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fanche-thesis {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
  grid-template-areas:
    "kicker copy"
    "title copy";
  gap: 58px;
  align-items: end;
  padding: 70px 52px 74px;
  overflow: hidden;
  border-bottom: 1px solid rgba(75, 56, 45, 0.09);
  background: #fff;
}

.fanche-thesis > .panel-kicker {
  grid-area: kicker;
  align-self: end;
}

.fanche-thesis > h3 {
  grid-area: title;
}

.fanche-thesis > p:last-child {
  grid-area: copy;
  align-self: end;
}

.fanche-thesis::after {
  position: absolute;
  right: -48px;
  bottom: -72px;
  width: 200px;
  height: 200px;
  border: 34px solid rgba(185, 203, 227, 0.18);
  border-radius: 50%;
  content: "";
}

.portfolio-whiteboard-page .fanche-thesis h3 {
  margin-top: 14px;
  color: var(--fanche-ink);
  font: 750 44px/1.14 var(--sans);
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.portfolio-whiteboard-page .fanche-thesis h3 span {
  color: #7b70c8;
}

.portfolio-whiteboard-page .fanche-thesis > p:last-child {
  position: relative;
  z-index: 1;
  color: #746a62;
  font: 500 15px/1.75 var(--sans);
}

.fanche-flow,
.fanche-rituals,
.fanche-system {
  padding: 62px 52px 66px;
  border-bottom: 1px solid rgba(75, 56, 45, 0.09);
}

.fanche-flow {
  background:
    radial-gradient(circle at 12% 90%, rgba(240, 216, 137, 0.23), transparent 15rem),
    #fbf8f0;
}

.fanche-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.portfolio-whiteboard-page .fanche-section-heading h3 {
  margin-top: 11px;
  color: var(--fanche-ink);
  font: 750 31px/1.16 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.fanche-section-heading > span {
  color: #998e85;
  font: 650 10px/1 var(--mono);
  letter-spacing: 0.07em;
}

.fanche-flow ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}

.fanche-flow ol::before {
  position: absolute;
  top: 14px;
  right: 11%;
  left: 11%;
  height: 1px;
  background: rgba(75, 56, 45, 0.15);
  content: "";
}

.fanche-flow li {
  position: relative;
  display: grid;
  justify-items: start;
  padding: 0 20px;
}

.fanche-flow li:first-child {
  padding-left: 0;
}

.fanche-flow li:last-child {
  padding-right: 0;
}

.fanche-flow li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(75, 56, 45, 0.12);
  border-radius: 50%;
  background: var(--fanche-yellow);
  color: #675b51;
  font: 700 10px/1 var(--mono);
}

.fanche-flow li:nth-child(2) > span {
  background: var(--fanche-blue);
}

.fanche-flow li:nth-child(3) > span {
  background: var(--fanche-pink);
}

.fanche-flow li:nth-child(4) > span {
  background: var(--fanche-sage);
}

.fanche-flow li strong {
  margin-top: 15px;
  color: var(--fanche-ink);
  font: 750 16px/1.2 var(--sans);
}

.portfolio-whiteboard-page .fanche-flow li p {
  margin-top: 7px;
  color: #877d75;
  font: 500 13px/1.55 var(--sans);
}

.fanche-rituals {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 52px;
  align-items: center;
  background: #fff;
}

.portfolio-whiteboard-page .fanche-rituals__copy h3 {
  margin-top: 12px;
  color: var(--fanche-ink);
  font: 750 38px/1.14 var(--sans);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.portfolio-whiteboard-page .fanche-rituals__copy > p:last-child {
  max-width: 35ch;
  margin-top: 22px;
  color: #796f67;
  font: 500 15px/1.75 var(--sans);
}

.fanche-ritual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fanche-ritual-card {
  display: grid;
  min-height: 176px;
  align-content: end;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(75, 56, 45, 0.1);
  border-radius: 18px;
  background: #f6f1e5;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 260ms ease;
}

.fanche-ritual-card:nth-child(2) {
  background: #eef2f8;
}

.fanche-ritual-card:nth-child(3) {
  background: #f8eeee;
}

.fanche-ritual-card:nth-child(4) {
  background: #f4eddb;
}

.fanche-ritual-card:hover {
  z-index: 2;
  box-shadow: 0 18px 30px rgba(75, 56, 45, 0.12);
  transform: translateY(-5px) rotate(-0.5deg);
}

.fanche-ritual-card:nth-child(even):hover {
  transform: translateY(-5px) rotate(0.5deg);
}

.fanche-ritual-card__visual {
  position: relative;
  display: block;
  height: 104px;
}

.fanche-ritual-card > small {
  color: #978c83;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.1em;
}

.fanche-ritual-card > strong {
  margin-top: 6px;
  color: var(--fanche-ink);
  font: 750 15px/1.2 var(--sans);
}

.fanche-ritual-card--wipe .fanche-ritual-card__visual b {
  position: absolute;
  inset: 30px 20px 16px 18px;
  border-radius: 52% 48% 62% 38%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.7), transparent 20%),
    rgba(141, 169, 196, 0.54);
  transform: rotate(-7deg);
}

.fanche-ritual-card--wipe .fanche-ritual-card__visual i {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 34px;
  width: 58px;
  height: 35px;
  border-radius: 5px 16px 5px 13px;
  background: #f4e2a3;
  box-shadow: 0 8px 12px rgba(75, 56, 45, 0.1);
  transform: rotate(-9deg);
  animation: fanche-wipe 3s ease-in-out infinite;
}

.fanche-ritual-card--puzzle .fanche-ritual-card__visual {
  display: grid;
  grid-template-columns: repeat(2, 46px);
  grid-template-rows: repeat(2, 42px);
  justify-content: center;
  align-content: center;
  gap: 3px;
}

.fanche-ritual-card--puzzle .fanche-ritual-card__visual i {
  border-radius: 4px;
  background: #b8c9e0;
  animation: fanche-puzzle 3.4s ease-in-out infinite;
}

.fanche-ritual-card--puzzle .fanche-ritual-card__visual i:nth-child(2) {
  background: #d7c4e2;
  animation-delay: -0.4s;
}

.fanche-ritual-card--puzzle .fanche-ritual-card__visual i:nth-child(3) {
  background: #e1b8ba;
  animation-delay: -0.8s;
}

.fanche-ritual-card--puzzle .fanche-ritual-card__visual i:nth-child(4) {
  background: #a8bca8;
  animation-delay: -1.2s;
}

.fanche-ritual-card--plane .fanche-ritual-card__visual i {
  position: absolute;
  top: 26px;
  left: 42px;
  width: 74px;
  height: 56px;
  background: #fffaf0;
  clip-path: polygon(0 14%, 100% 0, 54% 100%, 42% 52%);
  filter: drop-shadow(0 8px 8px rgba(75, 56, 45, 0.12));
  animation: fanche-plane 3.5s ease-in-out infinite;
}

.fanche-ritual-card--plane .fanche-ritual-card__visual b {
  position: absolute;
  top: 75px;
  left: 23px;
  width: 88px;
  height: 26px;
  border-bottom: 1px dashed rgba(75, 56, 45, 0.3);
  border-radius: 50%;
  transform: rotate(-7deg);
}

.fanche-ritual-card--gold .fanche-ritual-card__visual i {
  position: absolute;
  top: 17px;
  left: 50%;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(75, 56, 45, 0.2);
  border-radius: 48% 52% 45% 55%;
  background: #f1e8d4;
  transform: translateX(-50%) rotate(8deg);
}

.fanche-ritual-card--gold .fanche-ritual-card__visual b {
  position: absolute;
  top: 35px;
  left: 50%;
  width: 2px;
  height: 54px;
  background: #c89a4d;
  box-shadow:
    12px 7px 0 -0.5px #c89a4d,
    -9px 18px 0 -0.5px #c89a4d;
  transform: translateX(-50%) rotate(16deg);
  animation: fanche-gold 2.7s ease-in-out infinite;
}

.fanche-system {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 14%, rgba(230, 185, 186, 0.21), transparent 13rem),
    #f8f5ed;
}

.fanche-system__diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 9px;
  align-items: center;
  margin-top: 34px;
}

.fanche-system__diagram > span {
  display: grid;
  gap: 7px;
  min-height: 76px;
  align-content: center;
  padding: 12px;
  border: 1px solid rgba(75, 56, 45, 0.11);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 18px rgba(75, 56, 45, 0.04);
}

.fanche-system__diagram > span:nth-of-type(2) {
  background: #f4f0dc;
}

.fanche-system__diagram > span:nth-of-type(3) {
  background: #f2edf7;
}

.fanche-system__diagram > span:nth-of-type(4) {
  background: #edf3ee;
}

.fanche-system__diagram small {
  color: #9a8f86;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.1em;
}

.fanche-system__diagram strong {
  color: var(--fanche-ink);
  font: 700 14px/1.25 var(--sans);
}

.fanche-system__diagram > i {
  color: #a19891;
  font: 500 15px/1 var(--mono);
}

.portfolio-whiteboard-page .fanche-system > p {
  max-width: 70ch;
  margin-top: 25px;
  color: #796f67;
  font: 500 14px/1.75 var(--sans);
}

.fanche-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 23px;
}

.fanche-stack span {
  padding: 7px 10px;
  border: 1px solid rgba(75, 56, 45, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #746a62;
  font: 650 10px/1 var(--sans);
}

.fanche-hero--walkl {
  --walkl-purple: #2f1b5f;
  --walkl-sky: #44b8e9;
  --walkl-grass: #7dd35f;
  --walkl-orange: #ff8f22;
  --walkl-cream: #fff5b8;
  border-top: 1px solid rgba(47, 27, 95, 0.1);
  background-color: var(--walkl-sky);
  background-image:
    linear-gradient(90deg, rgba(255, 251, 226, 0.86) 0%, rgba(255, 251, 226, 0.68) 52%, rgba(68, 184, 233, 0.12) 100%),
    url("https://chenjianlin.pages.dev/grass-background.png"),
    url("https://chenjianlin.pages.dev/sky-background.png");
  background-position: center, center bottom, center top;
  background-repeat: no-repeat;
  background-size: cover, 100% 62%, cover;
  image-rendering: pixelated;
}

.fanche-hero--walkl::before {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 24%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(47, 27, 95, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(47, 27, 95, 0.08) 1px, transparent 1px);
  background-size: 12px 12px;
  box-shadow: none;
  opacity: 0.38;
}

.fanche-hero--walkl::after {
  background: var(--walkl-orange);
  box-shadow:
    20px 0 0 var(--walkl-grass),
    40px 0 0 var(--walkl-sky);
}

.fanche-hero--walkl .fanche-live-chip i {
  background: var(--walkl-grass);
  box-shadow: 0 0 0 4px rgba(125, 211, 95, 0.15);
}

.fanche-hero--walkl .fanche-hero__copy {
  padding: 24px;
  border: 1px solid rgba(47, 27, 95, 0.14);
  border-radius: 18px 18px 10px 18px;
  background: rgba(255, 252, 231, 0.8);
  box-shadow:
    7px 7px 0 rgba(47, 27, 95, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(7px) saturate(1.08);
}

.fanche-hero--walkl .fanche-hero__copy::after {
  position: absolute;
  z-index: -1;
  right: -7px;
  bottom: -7px;
  width: 34px;
  height: 34px;
  border-right: 4px solid rgba(255, 143, 34, 0.7);
  border-bottom: 4px solid rgba(255, 143, 34, 0.7);
  content: "";
}

.portfolio-whiteboard-page .fanche-hero--walkl h2 > span {
  color: var(--walkl-purple);
}

.portfolio-whiteboard-page .fanche-hero--walkl h2 > small {
  color: #6a3b19;
}

.fanche-hero--walkl .fanche-hero__facts strong {
  color: var(--walkl-purple);
  font-size: 18px;
}

.walkl-pixel-landscape {
  position: relative;
  height: 62px;
  margin-top: 10px;
  overflow: visible;
  image-rendering: pixelated;
}

.walkl-pixel-landscape::after {
  position: absolute;
  right: 9px;
  bottom: 7px;
  left: 118px;
  height: 9px;
  border-top: 3px dotted rgba(47, 27, 95, 0.24);
  content: "";
  transform: skewX(-18deg);
}

.walkl-pixel-landscape > span {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 0;
  padding: 5px 7px 4px;
  border: 1px solid rgba(47, 27, 95, 0.14);
  border-radius: 5px;
  background: rgba(255, 245, 184, 0.9);
  color: #2f1b5f;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 rgba(47, 27, 95, 0.12);
}

.walkl-pixel-landscape > img {
  position: absolute;
  z-index: 4;
  bottom: 1px;
  width: 55px;
  height: 55px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(2px 3px 0 rgba(47, 27, 95, 0.18));
}

.walkl-pixel-landscape > img:nth-of-type(1) {
  right: 48px;
}

.walkl-pixel-landscape > img:nth-of-type(2) {
  right: 7px;
  width: 49px;
  height: 49px;
  animation-delay: -0.5s;
}

.walkl-pixel-landscape > i {
  position: absolute;
  z-index: 3;
  right: 89px;
  bottom: 15px;
  width: 26px;
  height: 5px;
  border-top: 2px dotted rgba(255, 245, 184, 0.95);
  transform: rotate(-10deg);
}

.fanche-hero--walkl .fanche-hero__facts {
  margin-top: 12px;
}

.fanche-hero--walkl .fanche-button--primary {
  border-color: var(--walkl-purple);
  background: var(--walkl-purple);
  box-shadow: 0 10px 22px rgba(47, 27, 95, 0.17);
}

.fanche-hero--walkl .fanche-button--primary:hover,
.fanche-hero--walkl .fanche-button--primary:focus-visible {
  background: #201044;
  box-shadow: 0 14px 26px rgba(47, 27, 95, 0.25);
}

.fanche-live-shell--walkl {
  border-color: rgba(47, 27, 95, 0.72);
  background: #281b3e;
  box-shadow:
    0 30px 55px rgba(47, 27, 95, 0.2),
    0 8px 18px rgba(68, 184, 233, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: rotate(-1deg);
}

.fanche-live-shell--walkl .fanche-live-shell__viewport {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 245, 184, 0.64), transparent 10rem),
    #efffe9;
}

.fanche-live-shell--walkl .fanche-live-shell__viewport iframe {
  background: #efffe9;
}

.fanche-live-shell--walkl .fanche-live-shell__bar em {
  color: #9cf181;
}

.fanche-live-shell__poster--walkl {
  background:
    linear-gradient(rgba(47, 27, 95, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 27, 95, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 81% 17%, rgba(68, 184, 233, 0.28), transparent 9rem),
    radial-gradient(circle at 18% 82%, rgba(125, 211, 95, 0.25), transparent 8rem),
    #fffbe4;
  background-size: 18px 18px, 18px 18px, auto, auto, auto;
}

.fanche-live-shell__poster--walkl::before,
.fanche-live-shell__poster--walkl::after {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 9px solid var(--walkl-orange);
  border-radius: 50%;
  content: "";
  opacity: 0.14;
}

.fanche-live-shell__poster--walkl::before {
  top: 41px;
  left: -19px;
}

.fanche-live-shell__poster--walkl::after {
  right: -22px;
  bottom: 72px;
  border-color: var(--walkl-sky);
}

.fanche-live-shell__poster--walkl > div,
.fanche-live-shell__poster--walkl > p,
.fanche-live-shell__poster--walkl > button,
.fanche-live-shell__poster--walkl > small {
  position: relative;
  z-index: 1;
}

.fanche-live-shell__poster--walkl > div strong {
  color: var(--walkl-purple);
  font-weight: 650;
}

.fanche-live-shell__poster--walkl > div span {
  color: #6a3b19;
}

.fanche-live-shell__poster--walkl > div i {
  background: linear-gradient(
    90deg,
    var(--walkl-orange) 0 25%,
    var(--walkl-grass) 25% 50%,
    var(--walkl-sky) 50% 75%,
    var(--walkl-purple) 75%
  );
}

.fanche-live-shell__poster--walkl button {
  background: var(--walkl-purple);
  box-shadow: 0 11px 22px rgba(47, 27, 95, 0.18);
}

.fanche-live-shell__poster--walkl button:hover {
  background: #201044;
}

.walkl-capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 42px 52px 48px;
  border-bottom: 1px solid rgba(47, 27, 95, 0.1);
  background-color: #7dd35f;
  background-image:
    linear-gradient(rgba(255, 251, 226, 0.74), rgba(255, 251, 226, 0.74)),
    url("https://chenjianlin.pages.dev/grass-background.png");
  background-position: center, center 62%;
  background-repeat: no-repeat;
  background-size: cover, cover;
  image-rendering: pixelated;
}

.walkl-capabilities article {
  display: grid;
  min-height: 142px;
  align-content: end;
  padding: 18px;
  border: 1px solid rgba(47, 27, 95, 0.1);
  border-radius: 10px;
  background: rgba(255, 251, 226, 0.9);
  box-shadow:
    5px 5px 0 rgba(47, 27, 95, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease;
}

.walkl-capabilities article:nth-child(1) {
  background: rgba(255, 245, 184, 0.92);
}

.walkl-capabilities article:nth-child(2) {
  background: rgba(211, 242, 255, 0.92);
}

.walkl-capabilities article:nth-child(3) {
  background: rgba(225, 255, 207, 0.92);
}

.walkl-capabilities article:hover {
  box-shadow: 0 16px 28px rgba(47, 27, 95, 0.09);
  transform: translateY(-4px);
}

.walkl-capabilities span {
  color: #ff8f22;
  font: 700 11px/1 var(--mono);
}

.walkl-capabilities strong {
  margin-top: 25px;
  color: #2f1b5f;
  font: 750 24px/1 var(--sans);
  letter-spacing: -0.045em;
}

.portfolio-whiteboard-page .walkl-capabilities p {
  margin-top: 9px;
  color: #6e635a;
  font: 500 14px/1.6 var(--sans);
}

.portfolio-whiteboard-page :is(
  .canvas-panel.canvas-panel--fanche,
  .canvas-panel[data-panel-title="fanche-lottery.app"],
  .canvas-panel[data-panel-title="vibe-coded-products.web"]
) .fanche-footer {
  border-top-color: rgba(75, 56, 45, 0.1);
  background: #fbf8f1;
}

.fanche-footer nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fanche-footer > span {
  color: #7f756c;
  font: 650 11px/1 var(--sans);
  letter-spacing: 0.035em;
}

.fanche-footer a {
  color: #66594f;
  font: 700 11px/1 var(--sans);
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.fanche-footer a:hover,
.fanche-footer a:focus-visible {
  color: #5b69dd;
  transform: translateX(2px);
}

@keyframes fanche-live-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(98, 169, 108, 0.12);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(98, 169, 108, 0.04);
  }
}

@keyframes fanche-load-line {
  0%,
  100% {
    opacity: 0.4;
    transform: scaleX(0.45);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes fanche-wipe {
  0%,
  100% {
    transform: translateX(-13px) rotate(-9deg);
  }

  50% {
    transform: translateX(36px) translateY(9px) rotate(7deg);
  }
}

@keyframes fanche-puzzle {
  0%,
  18%,
  100% {
    transform: translate(0, 0) rotate(0);
  }

  50% {
    transform: translate(-5px, 4px) rotate(-4deg);
  }
}

@keyframes fanche-plane {
  0%,
  100% {
    transform: translate(-20px, 10px) rotate(-7deg);
  }

  50% {
    transform: translate(27px, -11px) rotate(5deg);
  }
}

@keyframes fanche-gold {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(200, 154, 77, 0));
  }

  50% {
    filter: drop-shadow(0 0 7px rgba(200, 154, 77, 0.75));
  }
}

@media (max-width: 800px) {
  .portfolio-whiteboard-page :is(
    .canvas-panel.canvas-panel--fanche,
    .canvas-panel[data-panel-title="fanche-lottery.app"],
    .canvas-panel[data-panel-title="vibe-coded-products.web"]
  ) {
    width: 570px;
    height: 640px;
    min-height: 640px;
  }

  .portfolio-whiteboard-page :is(
    .canvas-panel.canvas-panel--fanche,
    .canvas-panel[data-panel-title="fanche-lottery.app"],
    .canvas-panel[data-panel-title="vibe-coded-products.web"]
  ) .canvas-panel__bar::after {
    width: 250px;
  }

  .vibe-project-index em {
    display: none;
  }

  .vibe-project-index a {
    flex: 1;
    justify-content: center;
  }

  .fanche-hero {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 34px 30px 42px;
  }

  .portfolio-whiteboard-page .fanche-hero h2 > span {
    font-size: 60px;
    line-height: 0.98;
  }

  .fanche-thesis {
    grid-template-areas:
      "kicker"
      "title"
      "copy";
  }

  .fanche-live-shell {
    --fanche-device-scale: 0.5025641026;
    width: min(100%, 210px);
    height: 483px;
    margin-inline: auto;
  }

  .fanche-thesis,
  .fanche-rituals {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-inline: 32px;
  }

  .fanche-flow,
  .fanche-system {
    padding-inline: 32px;
  }

  .fanche-flow ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 0;
  }

  .fanche-flow ol::before {
    display: none;
  }

  .fanche-flow li:nth-child(3) {
    padding-left: 0;
  }

  .fanche-system__diagram {
    grid-template-columns: 1fr;
  }

  .fanche-system__diagram > i {
    transform: rotate(90deg);
    text-align: center;
  }

  .walkl-capabilities {
    grid-template-columns: 1fr;
    padding-inline: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fanche-live-chip i,
  .fanche-live-shell.is-loading .fanche-live-shell__poster > div i,
  .fanche-ritual-card__visual * {
    animation: none !important;
  }

  .fanche-live-shell,
  .fanche-live-shell__poster,
  .fanche-live-shell__viewport iframe,
  .fanche-button,
  .fanche-ritual-card,
  .vibe-project-index a,
  .walkl-capabilities article {
    transition: none;
  }
}