@charset "UTF-8";

/* Refined pixel world: editorial content is readable; only its frame is pixelated. */
:root {
  --px-panel: #0b291f;
  --px-panel-raised: #10382a;
  --px-text: #f2f4df;
  --px-muted: #acc3aa;
  --px-line: #365c40;
  --px-lime: #c4ef6b;
  --px-shadow: #03110d;
  --px-display: var(--pixel-display, "Courier New", "Microsoft YaHei", monospace);
}

/* Page titles and small coordinates belong to the same world as the landing page. */
.page { color: var(--px-text); padding-block: 45px 80px; }
.page .page-heading,
.lab-page .page-heading {
  position: relative;
  width: 100%;
  min-height: 145px;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 400px);
  gap: 22px 34px;
  align-items: end;
  padding: 8px 0 29px;
  margin-bottom: 30px;
  border: 0;
  border-bottom: 2px solid var(--px-line);
}
.page .page-heading::after {
  content: "";
  position: absolute;
  display: block;
  inset: auto auto -2px 0;
  width: 82px;
  height: 4px;
  background: var(--px-lime);
  animation: none;
  box-shadow: 8px -6px 0 -1px #c4ef6b60;
}
.page .page-heading h1,
.page .project-hero h1,
.page .experiment-heading h1,
.page .workbench-heading h1,
.contact-editorial .contact-title-lockup h1 {
  font-family: var(--px-display);
  color: var(--px-text);
  font-size: clamp(44px, 5.8vw, 74px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-shadow: 4px 4px 0 #020e09;
}
.page .page-heading .eyebrow,
.page .eyebrow,
.contact-editorial .contact-hero .eyebrow {
  font-family: var(--px-display);
  color: var(--px-lime);
  font-size: 11px;
  letter-spacing: 1.3px;
  line-height: 1.8;
  margin-bottom: 13px;
}
.page .page-heading .eyebrow::before { display: none; }
.page .page-lede,
.lab-page .page-heading .page-lede { margin: 0 0 4px; font-size: 13px; line-height: 1.95; max-width: 400px; color: var(--px-muted); }
.page .section-kicker,
.page .card-number,
.page .contact-index,
.page .work-label,
.page .experiment-meta,
.page .project-meta dt { font-family: var(--px-display); letter-spacing: 1px; }
.page .section-kicker { font-size: 10px; color: var(--px-lime); }
.page .section-heading { gap: 20px; margin-bottom: 23px; }
.page .section-heading h2,
.page .detail-section h2,
.page .profile-card h2,
.page .workbench-feature-grid h3 { font-family: var(--px-display); font-weight: 400; letter-spacing: 0; color: var(--px-text); }
.page .section-heading h2 { font-size: 26px; line-height: 1.6; }
.page .section-heading small,
.page .section-heading > span,
.page .gallery-hint,
.page .content-note,
.page .placeholder-note { color: var(--px-muted); }
.page .section-heading > .status,
.page .status { border: 1px solid var(--px-line); padding: 5px 8px; color: #bbd1a2; background: #0b251b; border-radius: 0; }
.page .back-link,
.page .text-button { color: var(--px-lime); font-size: 12px; }
.page .back-link { border-bottom: 1px solid #c4ef6b42; padding-bottom: 6px; margin-bottom: 27px; }
.page .back-link:hover,
.page .text-button:hover { color: #e1ffac; }

/* Buttons use a stepped physical edge, with the same feedback on every route. */
.page .button,
.lab-page .experiment-actions .button,
.contact-editorial .contact-card-action .button,
.page .detail-tabs button,
.page .experiment-sections button {
  border-radius: 0;
  border: 2px solid #4d7950;
  background: #133a28;
  color: var(--px-text);
  box-shadow: inset 0 2px 0 #b4d78618, 3px 3px 0 var(--px-shadow);
  font-size: 12px;
  min-height: 43px;
  transition: transform .12s, background-color .12s, border-color .12s, box-shadow .12s;
}
.page .button-primary,
.lab-page .button-primary {
  background: var(--px-lime);
  border-color: #dbff98 #82ad44 #719739 #e4ffb1;
  color: #102313;
  box-shadow: inset 0 2px 0 #e5ffb7, 3px 3px 0 var(--px-shadow);
}
.page .button:hover,
.lab-page .experiment-actions .button:hover,
.contact-editorial .contact-card-action .button:hover,
.page .detail-tabs button:hover {
  background: #1b4931;
  border-color: var(--px-lime);
  transform: translate(-1px, -1px);
  box-shadow: inset 0 2px 0 #c4ef6b21, 4px 4px 0 var(--px-shadow);
}
.page .button-primary:hover,
.lab-page .button-primary:hover { background: #d4fa8c; color: #102313; border-color: #e8ffb5 #8dbb4c #82aa45 #efffcb; }
.page .button:active,
.lab-page .experiment-actions .button:active,
.contact-editorial .contact-card-action .button:active,
.page .detail-tabs button:active { transform: translate(2px, 2px); box-shadow: inset 0 2px 0 #b4d78610, 1px 1px 0 var(--px-shadow); }
.page .button:disabled,
.page .button.is-disabled { color: #81977e; border-color: #2f4935; background: #10271d; box-shadow: 2px 2px 0 var(--px-shadow); opacity: 1; transform: none; }

/* Honest cover placeholders: quiet grass, earth and stone fields. */
.works-page .curated-grid { gap: 24px; }
.page .work-card { padding-bottom: 8px; }
.page .work-card h2 { color: var(--px-text); font-family: var(--px-display); font-size: 23px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.page .work-art,
.curated-grid .work-art { border: 2px solid var(--px-line); border-radius: 0; box-shadow: 5px 5px 0 var(--px-shadow); }
.page .placeholder-cover.theme-lime { background: #244530; }
.page .placeholder-cover.theme-clay { background: #493c2c; }
.page .placeholder-cover.theme-blue { background: #2c4140; }
.page .placeholder-cover::before {
  inset: 0;
  background-image: linear-gradient(90deg, #d8f0b909 1px, transparent 1px), linear-gradient(#d8f0b909 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .8;
  transform: none;
}
.page .placeholder-cover .cover-ribbon {
  left: auto;
  top: 34px;
  right: 34px;
  width: 64px;
  height: 64px;
  border: 8px solid #b7d68725;
  border-radius: 0;
  box-shadow: -16px 16px 0 #071c1630, 8px -8px 0 #c4ef6b12;
  transform: none;
  opacity: 1;
}
.page .placeholder-cover .cover-ribbon::before { inset: 12px; border: 4px solid #d2e5af33; border-radius: 0; }
.page .placeholder-cover .art-note,
.curated-grid .work-number { color: #bfd2ac; }
.page .placeholder-cover .cover-label strong { color: var(--px-text); font-family: var(--px-display); font-weight: 400; letter-spacing: 0; }
.page .placeholder-cover .cover-label small { color: #c0ccb5; }
.page .work-summary { color: var(--px-muted); font-size: 12px; }
.page .work-meta { color: #bfd2ac; }
.page .work-card:hover .work-art,
.page .work-card:hover .work-art[data-tilt] { transform: translateY(-3px); box-shadow: 5px 8px 0 var(--px-shadow); outline: 0; border-color: #92b65c; }
.page .work-art[data-tilt]::after,
.page .work-art[data-tilt]::before,
.page .experiment-cover[data-tilt]::before,
.page .experiment-cover[data-tilt]::after,
.page .contact-card[data-tilt]::before { display: none; }
.page .placeholder-cover::before { display: block; }
.page .work-orbit { border-radius: 0; transform: none; border-color: var(--px-line); }
.page .work-orbit::after { border-radius: 0; background: var(--px-lime); }

/* Lab uses a grid of screening-room panels. The footage remains untouched. */
.lab-scenery { display: none; }
.lab-page .page-heading h1 { font-size: clamp(62px, 7vw, 90px); letter-spacing: 0; font-family: var(--px-display); line-height: 1.15; }
.lab-page .lab-title-accent { color: var(--px-lime); }
.lab-page .filter-bar { border-top: 0; padding-top: 0; gap: 10px; margin-bottom: 28px; }
.lab-page .filter-bar::before { display: none; }
.page .filter-button,
.lab-page .filter-button { border: 2px solid var(--px-line); border-radius: 0; color: #c9dbc0; background: #0c2a1f; box-shadow: 3px 3px 0 var(--px-shadow); min-height: 43px; }
.page .filter-button:hover,
.lab-page .filter-button:hover { background: #1b402a; border-color: #92b45c; }
.page .filter-button.is-active,
.page .filter-button.is-selected,
.lab-page .filter-button[aria-pressed="true"] { background: var(--px-lime); border-color: #e0ffa8 #84ad48 #74983f #e0ffa8; color: #142818; box-shadow: 3px 3px 0 var(--px-shadow); }
.lab-page .filter-button.is-empty:not(.is-active) { background: #0b241b; border-color: #294934; color: #8fa787; }
.lab-page .featured-grid { gap: 30px; }
.page .experiment-feature,
.lab-page .experiment-feature { background: var(--px-panel); border: 2px solid var(--px-line); border-radius: 0; box-shadow: 6px 6px 0 var(--px-shadow); }
.lab-page .experiment-feature::after { width: 28px; height: 6px; right: 18px; top: -2px; background: var(--px-lime); box-shadow: none; }
.lab-page .experiment-cover { border-color: var(--px-line); background: #06170f; }
.lab-page .experiment-content { background: transparent; padding: 30px; }
.page .experiment-cover img,
.lab-page .experiment-cover img { filter: none; image-rendering: auto; }
.page .experiment-card:hover .experiment-cover img { filter: none; transform: scale(1.015); }
.page .experiment-card:hover .experiment-cover[data-tilt] { transform: none; outline: none; box-shadow: none; }
.page .experiment-meta,
.lab-page .experiment-meta { color: #abc68f; font-size: 10px; }
.page .experiment-feature h2,
.lab-page .experiment-feature h2 { font-family: var(--px-display); font-size: clamp(28px, 2.8vw, 37px); line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--px-text); }
.lab-page .experiment-feature h2 a > span { color: var(--px-lime); }
.page .experiment-feature p,
.lab-page .experiment-feature p { color: var(--px-muted); font-size: 12px; line-height: 1.95; }
.lab-page .experiment-actions { gap: 12px; }
.lab-page .experiment-actions .button-outline { background: #163828; color: #e2ebcd; border: 2px solid #497049; }
.lab-page .experiment-actions .button-outline:hover { background: #214d33; border-color: var(--px-lime); }
.page .play-mark,
.lab-page .experiment-cover .play-mark { border-radius: 0; background: #0b291fe8; border: 2px solid #d5e9b0; backdrop-filter: none; box-shadow: 4px 4px 0 #071c16aa; color: var(--px-lime); }
.page .experiment-cover:hover .play-mark { background: var(--px-lime); color: #122819; }
.page .duration,
.lab-page .duration { background: #071c16eb; border: 1px solid #5b7947; border-radius: 0; color: #e7f6c9; }
.page .tool-cover-label { background: #0b291fe8; border-color: #8fb55d; border-radius: 0; color: var(--px-lime); }
.page .workbench-card-note,
.page .workbench-display-status { color: #aac297; }
.page .empty-state,
.lab-page .empty-state { border: 2px dashed #4a6b45; border-radius: 0; background: var(--px-panel); box-shadow: 5px 5px 0 var(--px-shadow); }
.page .empty-state p { color: var(--px-muted); }
.page .empty-state h2 { font-family: var(--px-display); color: var(--px-text); }
.page .empty-state .text-button { margin-top: 22px; }
.page .empty-symbol { border-radius: 0; border-color: var(--px-line); color: var(--px-lime); }

/* Project and film detail: clear chapter navigation, dark mounts, unfiltered images. */
.page .project-hero { border-color: var(--px-line); }
.page .project-hero p,
.page .project-meta,
.page .project-meta dt,
.page .project-aside,
.page .detail-section p,
.page .detail-section li,
.page .experiment-summary,
.page .experiment-info,
.page .workbench-intro { color: var(--px-muted); }
.page .project-meta { padding: 18px 21px; border: 2px solid var(--px-line); background: #0b291fcc; }
.page .project-meta dd { color: var(--px-text); }
.page .project-aside strong { font-family: var(--px-display); font-size: 11px; color: var(--px-lime); letter-spacing: 1px; }
.page .detail-section { border-color: var(--px-line); }
.page .detail-section h2 { font-size: 26px; }
.page .detail-tabs { gap: 11px; }
.page .placeholder-art::after { border-radius: 0; border-color: #91ac5e44; transform: none; }
.page .experiment-heading { align-items: center; }
.page .experiment-heading h1 { font-size: clamp(40px, 5vw, 65px); }
.page .experiment-info { padding-left: 22px; border-left: 2px solid var(--px-line); }
.page .case-nav { top: calc(var(--pixel-header-bottom, 110px) + 16px); background: #0b291f; border: 2px solid var(--px-line); border-radius: 0; box-shadow: 4px 4px 0 var(--px-shadow); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 5px; gap: 5px; }
.page .media-section,
.page .film-section,
.page .detail-section { scroll-margin-top: 200px; }
.page .case-nav button { border-radius: 0; color: #b9cbaa; border: 1px solid transparent; }
.page .case-nav button:hover { background: #1a402a; color: var(--px-text); border-color: #456640; }
.page .case-nav button.is-active,
.page .case-nav button[aria-current="true"] { color: #142819; background: var(--px-lime); border-color: #dfffac; }
.page .video-frame,
.experiment-page .video-frame { border: 2px solid #46633e; border-radius: 0; background: #020b08; box-shadow: 6px 6px 0 var(--px-shadow); }
.page .film-play > span { border: 2px solid #d8efb0; border-radius: 0; background: #0b291fe8; backdrop-filter: none; color: var(--px-lime); box-shadow: 5px 5px 0 #03110db3; }
.page .film-play > strong { font-size: 12px; letter-spacing: 1px; }
.page .film-play:hover > span { background: var(--px-lime); color: #142819; scale: 1; transform: translate(-2px,-2px); }
.page .film-stills { border: 2px solid var(--px-line); background: #0b291f; border-radius: 0; }
.page .film-stills summary { color: var(--px-lime); }
.page .film-stills[open] summary { border-bottom: 1px solid var(--px-line); margin-bottom: 14px; }
.page .shot-tabs,
.page .asset-tabs { background: #0b291f; border: 2px solid var(--px-line); border-radius: 0; padding: 4px; gap: 5px; }
.page .shot-tabs button,
.page .asset-tabs button { border-radius: 0; color: #b7cba5; border: 1px solid transparent; }
.page .shot-tabs button[aria-selected="true"],
.page .asset-tabs button[aria-selected="true"] { background: #345634; border-color: #a2c76c; color: #eff7dd; box-shadow: inset 0 -2px 0 #b2db78; }
.page .asset-tabs button:hover,
.page .shot-tabs button:hover { color: var(--px-text); background: #1c3d2a; }
.page .shot-arrow { color: var(--px-lime); background: #133527; border: 2px solid #44683d; border-radius: 0; box-shadow: 2px 2px 0 #03110d; }
.page .shot-arrow:hover { color: #122414; background: var(--px-lime); }
.page .shot-strip { scrollbar-color: #698e4e #0b291f; }
.page .shot-strip::-webkit-scrollbar-thumb { background: #698e4e; border-radius: 0; }
.page .shot-card,
.page .board-overview,
.page .asset-grid .image-card,
.page .stills-section .image-card,
.page .film-canvas-card,
.page .workbench-screens .image-card { background: #0b291f; border: 2px solid var(--px-line); border-radius: 0; box-shadow: 3px 3px 0 var(--px-shadow); }
.page .shot-card .shot-topline { background: #173b29; color: var(--px-lime); border-bottom: 1px solid #43673d; font-family: var(--px-display); }
.page .shot-topline time { color: #c4d5af; }
.page .shot-card .image-caption { background: #0b291f; color: #cfdec0; }
.page .board-overview:hover,
.page .asset-grid .image-card:hover,
.page .stills-section .image-card:hover,
.page .film-canvas-card:hover,
.page .workbench-screens .image-card:hover { border-color: #a9cd72; background: #103424; }
.page .board-overview img { border-radius: 0; background: #091a13; }
.page .board-overview strong { color: var(--px-text); }
.page .board-overview small,
.page .board-overview span { color: var(--px-muted); }
.page .board-overview > [aria-hidden="true"] { color: var(--px-lime); }
.page .asset-panel-heading h3 { color: var(--px-text); }
.page .asset-panel-heading > span { color: var(--px-muted); }
.page .image-caption,
.page .asset-grid .image-caption,
.page .stills-section .image-caption,
.page .film-canvas-card .image-caption { color: #c6d6b8; }
.page .image-card img,
.page .asset-grid .image-card img,
.page .stills-section .image-card img { border-radius: 0; image-rendering: auto; }
.page .image-card:hover img { filter: none; }
.page .film-canvas-visual { border-radius: 0; background: #0a100e; }
.page .project-pagination { border-color: var(--px-line); color: #dcf0b9; gap: 22px; }
.page .project-pagination a { max-width: 48%; font-size: 12px; line-height: 1.85; }
.page .project-pagination small { color: var(--px-muted); }

/* The workbench itself keeps its useful screen layout. Its portfolio wrapper changes. */
.page .workbench-seal { color: #adca8f; font-family: var(--px-display); border-left: 2px solid var(--px-line); }
.page .workbench-seal i { color: var(--px-lime); }
.page .workbench-preview { border: 2px solid var(--px-line); border-radius: 0; box-shadow: 6px 6px 0 var(--px-shadow); background: #061610; }
.page .workbench-image-note { background: #0b291f; color: #c8dcb1; border-color: var(--px-line); }
.page .workbench-feature-grid section { border: 2px solid var(--px-line); border-top: 5px solid #8ab14f; background: var(--px-panel); box-shadow: 4px 4px 0 var(--px-shadow); }
.page .workbench-feature-grid section > span { color: var(--px-lime); font-family: var(--px-display); }
.page .workbench-feature-grid p { color: var(--px-muted); }
.page .workbench-display-note { background: #113324; border: 2px solid #4d713e; border-radius: 0; box-shadow: 4px 4px 0 var(--px-shadow); }
.page .workbench-display-note strong { color: #e1f1bf; }
.page .workbench-display-note p { color: #bdd0aa; }

/* About: one identity card and three tidy inventory slots. */
.page .profile-overview { padding: 16px 0 42px; }
.page .profile-overview::after { display: none; }
.page .profile-overview .about-copy h2 { font-family: var(--px-display); color: var(--px-text); font-size: 39px; font-weight: 400; letter-spacing: 0; }
.page .profile-overview .about-copy .profile-role { color: var(--px-lime); }
.page .profile-overview .about-copy p { color: var(--px-muted); font-size: 13px; }
.page .profile-portrait { border: 3px solid #719347; border-radius: 0; background: #163c2a; box-shadow: 8px 8px 0 var(--px-shadow), inset 0 0 0 5px #0b291f; }
.page .profile-avatar-placeholder { color: #afc599; }
.page .profile-avatar-placeholder svg { color: #85a75f; }
.page .profile-avatar-placeholder small { color: #94ae83; }
.page .profile-mark { color: var(--px-lime); font-family: var(--px-display); font-size: 25px; }
.page .profile-card { padding: 28px; border: 2px solid var(--px-line); border-radius: 0; background: var(--px-panel); box-shadow: 5px 5px 0 var(--px-shadow); }
.page .profile-card .card-number { color: #b2d08d; }
.page .profile-card .card-number::before { width: 6px; height: 6px; border-radius: 0; background: var(--px-lime); box-shadow: 3px 3px 0 #6c8a3e; }
.page .profile-card h2 { font-size: 26px; }
.page .profile-card p,
.page .profile-card ul { color: var(--px-muted); }
.page .profile-card .placeholder-lines span { border-radius: 0; background: #2c4d33; }
.page .profile-card .skill-tags > span { border-radius: 0; border-color: #45653d; background: #163727; color: #cfdfb7; }

/* Contact: a bold letterpress title, solid panels and the original complete QR image. */
.contact-editorial .contact-hero { grid-template-columns: 1fr; min-height: 220px; border-bottom: 2px solid var(--px-line); padding-bottom: 28px; margin-bottom: 29px; }
.contact-editorial .contact-hero::after { content: ""; position: absolute; right: 16px; top: 26px; width: 36px; height: 36px; border: 6px solid #c4ef6b; box-shadow: -24px 24px 0 -6px #759e48, -48px 48px 0 -12px #365c40; opacity: .8; pointer-events: none; }
.contact-editorial .contact-connect-art { display: none; }
.contact-editorial .contact-title-lockup { gap: 30px; padding-right: 55px; }
.contact-editorial .contact-title-lockup h1 { font-size: clamp(64px, 7vw, 94px); line-height: 1.25; }
.contact-editorial .contact-display { font-family: var(--px-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; font-weight: 400; letter-spacing: 0; color: #74965c; -webkit-text-stroke: 0; transform: none; }
.contact-editorial .contact-lede { color: var(--px-muted); font-size: 13px; margin-top: 18px; }
.contact-editorial .contact-stack .contact-card,
.contact-editorial .contact-stack .contact-card + .contact-card { border: 2px solid var(--px-line); border-radius: 0; background: var(--px-panel); box-shadow: 5px 5px 0 var(--px-shadow); padding: 27px 29px; overflow: visible; }
.contact-editorial .contact-stack .email-card { background: #173d29; border-color: #73994b; }
.contact-editorial .contact-stack .phone-card,
.contact-editorial .contact-stack .wechat-card { background: var(--px-panel); border-color: var(--px-line); }
.contact-editorial .contact-stack .wechat-card { gap: 25px; }
.contact-editorial .contact-card-body .contact-index,
.contact-editorial .email-card .contact-card-body .contact-index { color: #b3cf92; font-size: 10px; }
.contact-editorial .contact-stack .contact-card h2,
.contact-editorial .contact-stack .email-card h2 { color: #b4cba0; font-size: 12px; }
.contact-editorial .contact-stack .contact-value,
.contact-editorial .contact-stack .email-card .contact-value,
.contact-editorial .contact-stack .phone-card .contact-value,
.contact-editorial .contact-stack .wechat-card .contact-value { color: var(--px-text); font-weight: 600; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.6; letter-spacing: .1px; }
.contact-editorial .contact-description,
.contact-editorial .email-card .contact-description { color: var(--px-muted); font-size: 12px; }
.contact-editorial .contact-card-corner { color: #c4ef6b; font-size: 44px; }
.contact-editorial .contact-card-action { gap: 18px; }
.contact-editorial .email-card .text-button,
.contact-editorial .phone-card .text-button,
.contact-editorial .wechat-card .text-button { color: var(--px-lime); font-size: 12px; }
.contact-editorial .contact-card-action .button-primary { color: #102313; border-color: #dbff98 #82ad44 #719739 #e4ffb1; background: var(--px-lime); }
.contact-editorial .phone-card .button { color: var(--px-text); border-color: #64904c; background: #173e29; }
.contact-editorial .wechat-qr-trigger { width: min(100%, 234px); padding: 12px; border: 3px solid #8aa65e; border-radius: 0; background: #fff; box-shadow: 5px 5px 0 #03110d; }
.contact-editorial .wechat-qr-trigger:hover { border-color: #c4ef6b; box-shadow: 6px 6px 0 #03110d; }
.contact-editorial .wechat-qr-window { width: 100%; aspect-ratio: 820/1219; background: #fff; overflow: visible; }
.contact-editorial .wechat-qr-window img { display: block; width: 100%; height: auto; object-fit: contain; image-rendering: auto; border-radius: 0; max-width: 100%; }
.contact-editorial .wechat-qr-label { color: #314c2c; }
.contact-editorial .wechat-qr-trigger small { color: #627557; }
.contact-editorial .contact-closing { color: #dce9c6; border-top: 2px solid var(--px-line); margin-top: 32px; padding-top: 23px; font-size: 18px; }
.contact-editorial .contact-closing .text-button { font-size: 12px; }

/* The image viewer fits original images; none inherit pixel rendering. */
.lightbox { border: 2px solid #527345; border-radius: 0; background: #0a241b; box-shadow: 8px 8px 0 #020a07; color: var(--px-text); }
.lightbox::backdrop { background: #020b08ee; backdrop-filter: none; }
.lightbox .viewer-toolbar { border-bottom: 2px solid #34533a; background: #0b291f; }
.lightbox .viewer-zoom button,
.lightbox .lightbox-close,
.lightbox .lightbox-prev,
.lightbox .lightbox-next { border: 2px solid #486c42; border-radius: 0; background: #153d29; color: var(--px-text); box-shadow: 2px 2px 0 #03110d; }
.lightbox .viewer-zoom button:hover:not(:disabled),
.lightbox .lightbox-close:hover,
.lightbox .lightbox-prev:hover,
.lightbox .lightbox-next:hover { background: var(--px-lime); color: #102313; }
.lightbox #lightbox-stage { border-radius: 0; background: #020b08; }
.lightbox #lightbox-stage #lightbox-image { image-rendering: auto; }
.lightbox .viewer-hint { color: var(--px-muted); }
.lightbox .lightbox-original { color: var(--px-lime); }
.toast { border: 2px solid #d5f89e; border-radius: 0; background: #193e29; color: var(--px-text); box-shadow: 4px 4px 0 #020c08; }

@media (max-width: 1100px) and (min-width: 761px) {
  .page .page-heading,
  .lab-page .page-heading { grid-template-columns: minmax(0,1fr) minmax(180px,300px); }
  .lab-page .experiment-content { padding: 25px; }
  .lab-page .experiment-feature h2 { font-size: 30px; }
  .lab-page .experiment-actions { flex-direction: column; }
  .contact-editorial .contact-stack .contact-card { padding: 25px; }
  .contact-editorial .contact-title-lockup h1 { font-size: 78px; }
}

@media (max-width: 760px) {
  .page { padding-block: 32px 58px; }
  .page .page-heading,
  .lab-page .page-heading { display: block; min-height: 0; padding: 0 0 25px; margin-bottom: 27px; }
  .page .page-heading h1 { font-size: 46px; line-height: 1.4; }
  .lab-page .page-heading h1 { font-size: 64px; line-height: 1.3; }
  .page .page-heading .page-lede,
  .lab-page .page-heading .page-lede { margin-top: 15px; max-width: 100%; font-size: 12px; }
  .page .page-heading .eyebrow,
  .page .eyebrow { font-size: 9px; letter-spacing: .7px; }
  .page .section-heading { align-items: flex-start; gap: 15px; }
  .page .section-heading h2 { font-size: 23px; }
  .page .section-heading > span { max-width: 42%; font-size: 10px; padding-top: 5px; }
  .page .section-kicker { font-size: 9px; letter-spacing: .5px; }
  .page .button,
  .lab-page .experiment-actions .button { min-height: 43px; font-size: 11px; }
  .works-page .curated-grid { gap: 26px; }
  .page .work-card h2 { font-size: 23px; }
  .curated-grid .work-art { height: 270px; }
  .lab-page .filter-bar { gap: 8px; margin-bottom: 25px; }
  .lab-page .filter-button { min-height: 41px; padding: 8px 10px; font-size: 10px; }
  .lab-page .experiment-feature { grid-template-columns: 1fr; box-shadow: 4px 4px 0 var(--px-shadow); }
  .lab-page .experiment-cover { border-right: 0; border-bottom: 2px solid var(--px-line); }
  .lab-page .experiment-content { padding: 24px 22px; }
  .lab-page .experiment-feature h2,
  .lab-page .workbench-feature h2 { font-size: 29px; }
  .lab-page .experiment-meta { font-size: 8px; letter-spacing: .5px; }
  .lab-page .experiment-feature p { font-size: 12px; }
  .page .project-hero h1,
  .page .experiment-heading h1,
  .page .workbench-heading h1 { font-size: 35px; letter-spacing: 0; line-height: 1.5; }
  .page .project-meta { margin: 0; padding: 17px; }
  .page .detail-tabs { gap: 9px; }
  .page .detail-tabs button { padding: 8px 10px; font-size: 10px; }
  .page .experiment-info { border: 0; padding-left: 0; }
  .page .case-nav { top: calc(var(--pixel-header-bottom, 90px) + 12px); gap: 3px; }
  .page .media-section,
  .page .film-section,
  .page .detail-section { scroll-margin-top: 175px; }
  .page .case-nav button { padding-inline: 10px; min-height: 37px; }
  .page .asset-tabs { gap: 3px; }
  .page .asset-tabs button { padding-inline: 7px; font-size: 10px; }
  .page .film-play > span { width: 62px; height: 62px; }
  .page .film-play > strong { font-size: 10px; }
  .page .workbench-actions { gap: 13px 17px; }
  .page .workbench-display-status { width: 100%; font-size: 10px; }
  .page .profile-overview .about-copy h2 { font-size: 32px; }
  .page .profile-card { padding: 23px; min-height: 205px; }
  .page .profile-card h2 { font-size: 24px; }
  .page .profile-portrait { box-shadow: 6px 6px 0 var(--px-shadow); }
  .contact-editorial .contact-hero { min-height: 0; padding: 0 0 27px; margin-bottom: 25px; overflow: visible; }
  .contact-editorial .contact-hero::after { width: 24px; height: 24px; border-width: 5px; right: 4px; top: 40px; box-shadow: -16px 16px 0 -4px #759e48, -32px 32px 0 -8px #365c40; }
  .contact-editorial .contact-title-lockup { gap: 12px; padding-right: 32px; }
  .contact-editorial .contact-title-lockup h1 { font-size: 58px; line-height: 1.4; }
  .contact-editorial .contact-display { display: flex; gap: 12px; font-size: 27px; }
  .contact-editorial .contact-hero .eyebrow { font-size: 9px; }
  .contact-editorial .contact-lede { margin-top: 16px; font-size: 12px; max-width: 280px; }
  .contact-editorial .contact-stack .contact-card,
  .contact-editorial .contact-stack .contact-card + .contact-card { padding: 24px 21px; gap: 22px; }
  .contact-editorial .contact-stack .email-card .contact-value { font-size: clamp(18px,5.1vw,25px); padding-right: 0; }
  .contact-editorial .contact-stack .phone-card .contact-value { font-size: 26px; }
  .contact-editorial .contact-stack .wechat-card .contact-value { font-size: 25px; }
  .contact-editorial .contact-card-body .contact-index { font-size: 9px; }
  .contact-editorial .contact-card-corner { top: 21px; right: 20px; font-size: 35px; }
  .contact-editorial .contact-card-action { gap: 18px; }
  .contact-editorial .wechat-qr-trigger { width: min(100%, 252px); }
  .contact-editorial .contact-closing { font-size: 16px; }
  .lightbox { border-width: 1px; box-shadow: none; }
  .lightbox .viewer-toolbar { padding-inline: 10px; }
}

@media (max-width: 359px) {
  .page .page-heading h1 { font-size: 40px; }
  .contact-editorial .contact-title-lockup h1 { font-size: 49px; }
  .contact-editorial .contact-stack .contact-card { padding-inline: 18px; }
  .page .case-nav button { padding-inline: 8px; }
  .page .asset-tabs button { gap: 4px; padding-inline: 5px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .page .button,
  .page .work-art,
  .page .experiment-cover img,
  .page .detail-tabs button { transition: none; }
}