.page-playground, .page-sidequests{--desk-green:#24493f;--desk-line:rgba(218,239,222,.14);--desk-line-strong:rgba(218,239,222,.28);--desk-yellow:#f5cd43}
.page-playground, .page-sidequests{color:#f7f3e8;background-color:var(--desk-green);background-image:linear-gradient(var(--desk-line-strong) 2px,transparent 2px),linear-gradient(90deg,var(--desk-line-strong) 2px,transparent 2px),linear-gradient(var(--desk-line) 1px,transparent 1px),linear-gradient(90deg,var(--desk-line) 1px,transparent 1px),radial-gradient(circle at 15% 12%,rgba(255,255,255,.07),transparent 22%),radial-gradient(circle at 84% 72%,rgba(0,0,0,.13),transparent 30%);background-size:100px 100px,100px 100px,20px 20px,20px 20px,100% 100%,100% 100%;background-repeat:repeat,repeat,repeat,repeat,no-repeat,no-repeat;background-attachment:scroll}
.page-playground .site-nav, .page-sidequests .site-nav{background:rgba(24,55,47,.9);border-bottom-color:rgba(235,244,230,.22);backdrop-filter:blur(12px)}.page-playground .site-nav .nav-link, .page-sidequests .site-nav .nav-link, .page-playground .site-nav .logo-monogram, .page-sidequests .site-nav .logo-monogram{color:#fff}.page-playground .site-nav .nav-link.active, .page-sidequests .site-nav .nav-link.active{color:#f5cd43}.page-playground .mobile-nav-toggle, .page-sidequests .mobile-nav-toggle{color:#fff}.page-playground .nav-back-bar, .page-sidequests .nav-back-bar, .page-playground .case-study-hero, .page-sidequests .case-study-hero{position:relative;z-index:1}.page-playground .back-link, .page-sidequests .back-link, .page-playground .case-title, .page-sidequests .case-title, .page-playground .case-subtitle, .page-sidequests .case-subtitle{color:#fff}.page-playground .case-category-tag, .page-sidequests .case-category-tag, .page-playground .chapter-num, .page-sidequests .chapter-num{color:#f5cd43}.page-playground .pg-intro, .page-sidequests .pg-intro, .page-playground .pg-desk-tools p, .page-sidequests .pg-desk-tools p{color:rgba(247,243,232,.8)}.page-playground .pg-jump a, .page-sidequests .pg-jump a{color:#fff}.page-playground .site-footer, .page-sidequests .site-footer{background:rgba(18,42,36,.88);border-top:1px solid rgba(235,244,230,.22);color:#fff}.page-playground .site-footer .footer-bio, .page-sidequests .site-footer .footer-bio, .page-playground .site-footer .footer-bottom, .page-sidequests .site-footer .footer-bottom, .page-playground .site-footer .footer-nav-title, .page-sidequests .site-footer .footer-nav-title{color:rgba(255,255,255,.68)}.page-playground .site-footer .footer-link, .page-sidequests .site-footer .footer-link, .page-playground .site-footer .footer-brand, .page-sidequests .site-footer .footer-brand, .page-playground .site-footer .footer-switch-v1, .page-sidequests .site-footer .footer-switch-v1{color:#fff}
.page-playground .case-study-hero, .page-sidequests .case-study-hero{padding-bottom:42px}.pg-intro{max-width:700px;font-size:16px;line-height:1.85;color:var(--ink-soft)}.pg-jump{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:30px}.pg-jump a{font:12px/1.7 var(--font-mono);color:var(--blue);text-decoration:underline;text-underline-offset:5px}
.pg-lab{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;padding:30px;background:#111;color:#fff;border-radius:12px;margin-bottom:38px;scroll-margin-top:90px}.pg-lab h2{font-size:31px;line-height:1.25;margin-bottom:14px}.pg-lab p{font-size:14px;line-height:1.8;color:#ddd}.pg-lab img{width:100%;height:auto}.pg-lab .chapter-num{color:#a7bdff}.pg-lab-button{display:inline-block;margin-top:20px;padding:11px 17px;background:#fff;color:#111;border-radius:6px;font-weight:700}
.pg-workbench{margin:0 calc(50% - 50vw) 90px}.pg-desk-tools{width:min(1160px,calc(100% - 40px));margin:0 auto 14px;display:flex;align-items:center;justify-content:space-between;gap:20px}.pg-desk-tools p{margin:0;font:700 11px/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}.pg-reset{border:1px solid #bbb7ae;background:#fff;color:#111;padding:9px 13px;border-radius:4px;font:700 10px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.pg-reset:hover,.pg-reset:focus-visible{background:#111;color:#fff}
.pg-desk{position:relative;width:100%;height:2100px;margin:0;overflow:hidden;isolation:isolate;border-top:1px solid rgba(235,244,230,.28);border-bottom:1px solid rgba(235,244,230,.28);box-shadow:inset 0 26px 50px rgba(0,0,0,.09),inset 0 -26px 50px rgba(0,0,0,.09);background:transparent}
.page-sidequests .pg-desk{height:1750px}
.pg-desk::before,.pg-desk::after{content:"0   10   20   30   40   50   60   70   80   90   100   110   120   130";position:absolute;z-index:1;color:rgba(229,242,228,.62);font:9px/1 var(--font-mono);letter-spacing:5px;pointer-events:none}.pg-desk::before{top:8px;left:25px;right:20px;white-space:nowrap;overflow:hidden}.pg-desk::after{top:26px;bottom:20px;left:6px;width:12px;line-height:68px;word-break:break-all;overflow:hidden}.pg-desk-mark{position:absolute;z-index:1;color:rgba(229,242,228,.42);font:700 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;pointer-events:none}.pg-desk-mark--a{top:34px;right:34px}.pg-desk-mark--b{bottom:24px;left:34px}.pg-desk-mark--c{bottom:24px;right:34px}
.pg-category-note{position:absolute;z-index:2;padding:8px 12px;background:var(--desk-yellow);color:#17130a;box-shadow:0 4px 10px rgba(0,0,0,.2);font:700 11px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-2deg);pointer-events:none}.pg-category-note[data-category="spatial"]{left:4%;top:4%}.pg-category-note[data-category="technical"]{left:28%;top:4%;transform:rotate(1deg)}.pg-category-note[data-category="making"]{left:53%;top:4%;transform:rotate(-1deg)}.pg-category-note[data-category="offscreen"]{left:78%;top:4%;transform:rotate(-1deg)}
/* Generated photographic cutouts. The HTML wrapper owns all dragging geometry. */
.pg-prop{position:absolute;left:0;top:0;z-index:4;margin:0;padding:0;border:0;background:transparent;width:var(--prop-width);aspect-ratio:var(--prop-ratio,1);cursor:grab;user-select:none;touch-action:none;transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transform-origin:center;filter:drop-shadow(3px 7px 5px rgba(0,0,0,.24))}
.pg-prop img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.pg-prop.is-dragging{cursor:grabbing;filter:drop-shadow(5px 16px 9px rgba(0,0,0,.35))}
.pg-prop:focus-visible{outline:2px dashed #f5cd43;outline-offset:6px}
.pg-prop--compass{--prop-width:230px;--prop-ratio:2/3}
.pg-prop--caliper{--prop-width:360px;--prop-ratio:1983/793}
.pg-prop--cutter{--prop-width:300px;--prop-ratio:2}
.pg-prop--tape{--prop-width:170px}
.pg-prop--glue{--prop-width:145px;--prop-ratio:2/3}
.pg-prop--wires{--prop-width:280px;--prop-ratio:3/2}
.pg-prop--note,.pg-prop--note2{--prop-width:185px}
@media(max-width:620px){.pg-prop--compass{--prop-width:150px}.pg-prop--caliper{--prop-width:220px}.pg-prop--cutter{--prop-width:200px}.pg-prop--tape{--prop-width:120px}.pg-prop--glue{--prop-width:105px}.pg-prop--wires{--prop-width:190px}.pg-prop--note,.pg-prop--note2{--prop-width:135px}}
.page-playground .pg-card, .page-sidequests .pg-card{position:absolute;z-index:3;width:clamp(190px,17vw,245px);margin:0;overflow:visible;background:#fbfaf5;border:1px solid rgba(15,15,15,.22);border-radius:2px;box-shadow:0 12px 24px rgba(0,0,0,.32);transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));transform-origin:center;cursor:grab;user-select:none;touch-action:none;transition:box-shadow .16s ease}.page-playground .pg-card::before, .page-sidequests .pg-card::before{content:"";position:absolute;z-index:3;top:-8px;left:50%;width:64px;height:18px;background:rgba(230,220,180,.72);border-left:1px solid rgba(255,255,255,.45);border-right:1px solid rgba(117,102,70,.18);transform:translateX(-50%) rotate(-1deg);pointer-events:none}.page-playground .pg-card.is-dragging, .page-sidequests .pg-card.is-dragging{cursor:grabbing;box-shadow:0 26px 42px rgba(0,0,0,.48)}.page-playground .pg-card:focus-visible, .page-sidequests .pg-card:focus-visible{outline:3px solid #fff;outline-offset:4px}.page-playground .pg-card .figure-frame, .page-sidequests .pg-card .figure-frame{border-radius:0;overflow:hidden;background:#e7e2d6}.page-playground .pg-card .figure-frame img, .page-sidequests .pg-card .figure-frame img{display:block;width:100%;height:190px;max-height:none;aspect-ratio:auto;object-fit:cover;pointer-events:none}.pg-caption{padding:14px 15px 16px;color:#111}.pg-caption h3{font-size:15px;line-height:1.35;margin:0 0 7px;letter-spacing:-.02em;color:#111}.pg-caption p{display:none;color:#303030}.pg-caption a{display:inline-block;margin-top:4px;font:700 10px/1.4 var(--font-mono);color:#124bd8}.pg-section{margin:0}.pg-section-heading,.pg-grid:empty{display:none}
@media(max-width:900px){.pg-lab{grid-template-columns:1fr}.pg-desk{height:2600px}.page-sidequests .pg-desk{height:2050px}.page-playground .pg-card, .page-sidequests .pg-card{width:clamp(175px,28vw,225px)}}
@media(max-width:620px){.page-playground .case-study-hero, .page-sidequests .case-study-hero{padding-bottom:28px}.page-sidequests .pg-jump a:not(:first-child):not(:nth-child(2)){display:none}.page-playground .pg-jump a:not(:first-child){display:none}.pg-lab{padding:22px;gap:20px;margin-bottom:28px}.pg-lab h2{font-size:25px}.pg-workbench{margin-bottom:60px}.pg-desk-tools{width:calc(100% - 28px);align-items:flex-start}.pg-desk-tools p{max-width:220px}.pg-desk{width:100%;height:3700px}.page-playground .pg-card, .page-sidequests .pg-card{width:min(44vw,180px)}.page-playground .pg-card .figure-frame img, .page-sidequests .pg-card .figure-frame img{height:146px}.pg-caption{padding:11px 11px 12px}.pg-caption h3{font-size:13px}.pg-caption a{font-size:9px}.pg-category-note{font-size:9px;padding:7px 9px}}
@media(max-width:620px){.page-sidequests .pg-desk{height:2700px}}
@media(prefers-reduced-motion:reduce){.page-playground .pg-card, .page-sidequests .pg-card{transition:none}}



/* --- SIDE QUESTS HERO READABILITY SYSTEM --- */
.sidequests-intro {
  position: relative;
  isolation: isolate;
  max-width: 680px;
}

/* Local "Cleared Mat" Reading Zone:
   Samples exact mat green #24493f (rgba(36, 73, 63, ...)).
   Subdues grid to ~15-25% directly under text while smoothly fading
   to 0% on left, right, and top/bottom edges so it blends organically into the full mat.
   No white card, no border, no shadow, no generic floating panel.
*/
.sidequests-intro::before {
  content: "";
  position: absolute;
  top: -28px;
  bottom: -24px;
  left: -48px;
  width: min(820px, calc(100% + 96px));
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(36, 73, 63, 0) 0%,
    rgba(36, 73, 63, 0.97) 42px,
    rgba(36, 73, 63, 0.95) 70%,
    rgba(36, 73, 63, 0.45) 88%,
    rgba(36, 73, 63, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 24px,
    black calc(100% - 24px),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 24px,
    black calc(100% - 24px),
    transparent 100%
  );
}

/* Kicker: high contrast yellow, small uppercase label */
.page-sidequests .case-category-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5cd43;
  margin-bottom: 14px;
}

/* Heading: large, dominant, untouched */
.page-sidequests .case-title {
  color: #ffffff;
  margin-bottom: 0;
}

/* Subhead hierarchy: increased separation from title, white, semi-bold, 20-23px */
.page-sidequests .case-subtitle {
  margin-top: 24px;
  margin-bottom: 22px;
  font-size: clamp(19px, 2vw, 22.5px);
  line-height: 1.35;
  font-weight: 600;
  color: #ffffff;
}

/* Text width & body copy formatting: max-width 680px (~58-72 chars/line), 16.5px, line-height 1.7, high readability */
.sidequests-intro-copy {
  max-width: 680px;
}

.page-sidequests .pg-intro {
  max-width: 680px;
  font-size: 16.5px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.90);
  margin: 0 0 14px 0;
}

/* Emphasis line: on its own line, bold, white, slightly stronger */
.page-sidequests .pg-intro.pg-intro-point {
  font-weight: 700;
  color: #ffffff;
  margin-top: 14px;
  margin-bottom: 0;
}

/* Secondary jump links: separated from body by ~32px, distinct secondary navigation */
.page-sidequests .pg-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  margin-top: 32px;
}

.page-sidequests .pg-jump a {
  font: 12px/1.6 var(--font-mono);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: color 0.15s ease;
}

.page-sidequests .pg-jump a:hover {
  color: var(--desk-yellow);
}

/* Tablet & Mobile responsive behavior: simpler reading zone, prevent horizontal overflow */
@media (max-width: 767px) {
  .sidequests-intro {
    max-width: 100%;
  }

  .sidequests-intro::before {
    top: -20px;
    bottom: -16px;
    left: -16px;
    right: -16px;
    width: auto;
    background: rgba(36, 73, 63, 0.96);
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      black 16px,
      black calc(100% - 16px),
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      black 16px,
      black calc(100% - 16px),
      transparent 100%
    );
  }

  .page-sidequests .case-subtitle {
    margin-top: 20px;
    font-size: 18px;
    line-height: 1.4;
  }

  .page-sidequests .pg-intro {
    font-size: 15.5px;
    line-height: 1.65;
  }

  .page-sidequests .pg-jump {
    margin-top: 24px;
    gap: 10px 18px;
  }
}

.page-playground .footer-status,
.page-sidequests .footer-status {
  color: #ffffff !important;
}