/* The selected gallery design keeps the same layout in both appearances. */
html[data-design="gallery"] {
  color-scheme: light;
  transition: background-color 320ms ease, color 320ms ease;
}
html[data-design="gallery"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #141416;
  --surface: #1c1c1f;
  --surface-alt: #232326;
  --text: #f2f2ef;
  --muted: #a4a4ac;
  --line: #353539;
  --accent: #efefeb;
  --accent-text: #19191c;
}
.nav-actions {display:flex;align-items:center;gap:15px;flex-shrink:0}
.theme-control {display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:100px;background:var(--surface-alt)}
.theme-control button {width:31px;height:31px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);transition:background-color 250ms ease,color 250ms ease,box-shadow 250ms ease}
.theme-control button .icon {width:15px;height:15px;transition:transform 350ms ease}
.theme-control button:hover {color:var(--text)}
.theme-control button:hover .icon {transform:rotate(-12deg)}
.theme-control button.active {background:var(--surface);color:var(--text);box-shadow:0 1px 5px #0000000b}
.theme-control button:focus-visible {outline-offset:3px}
[data-theme="dark"] .theme-control button.active {background:#424247;box-shadow:0 1px 6px #0003}
html[data-design="gallery"] .site-header,
html[data-design="gallery"] .mobile-nav,
html[data-design="gallery"] .service-card,
html[data-design="gallery"] .theme-control,
html[data-design="gallery"] dialog {
  transition:background-color 320ms ease,color 320ms ease,border-color 320ms ease;
}
html[data-design="gallery"] .hero-aside>p {color:var(--muted)}
html[data-design="gallery"] .hero-aside .text-link {border-color:var(--line)}
html[data-design="gallery"] .service-tags span {border-color:var(--line);color:var(--muted)}
html[data-design="gallery"] .service-top>.icon {color:var(--muted)}
html[data-design="gallery"] .site-footer {padding-bottom:48px}
html[data-theme="dark"][data-design="gallery"] .app-service {background:#202225}
html[data-theme="dark"][data-design="gallery"] .film-stack img {border-color:#39393e;box-shadow:0 8px 25px #0003}
html[data-theme="dark"][data-design="gallery"] .workflow-node {border-color:#444449;background:#2b2c30;box-shadow:0 8px 22px #0002}
html[data-theme="dark"][data-design="gallery"] .workflow-node .icon,
html[data-theme="dark"][data-design="gallery"] .workflow-node span {color:#bbbbc4}
html[data-theme="dark"][data-design="gallery"] .workflow-line {background:#55565d}
html[data-theme="dark"][data-design="gallery"] .workflow-core {background:linear-gradient(130deg,#56575e,#303137);border-color:#65666d;box-shadow:0 0 0 8px #ffffff04,0 10px 20px #0003}
html[data-theme="dark"][data-design="gallery"] .workflow-core .icon {color:#eeeeef}
html[data-theme="dark"][data-design="gallery"] .form-success {color:#90c7a0}

/* Each frame is a direct route to its case; touch and keyboard use the same buttons. */
.film-stack-interactive button {
  position:relative;
  flex:0 0 47%;
  align-self:flex-start;
  padding:0;
  border:0;
  background:none;
  border-radius:9px;
  cursor:pointer;
  transition:transform 320ms cubic-bezier(.22,1,.36,1),filter 320ms ease;
}
.film-stack-interactive button:first-child {margin-top:30px}
.film-stack-interactive button:nth-child(3) {margin-top:55px}
.film-stack-interactive button img {display:block;width:100%;height:auto;margin:0!important;aspect-ratio:16/10;object-fit:cover}
.film-stack-interactive button:hover,
.film-stack-interactive button:focus-visible {z-index:2;transform:translateY(-15px) rotate(3deg);filter:brightness(1.07)}
.film-stack-interactive button:focus-visible {outline:2px solid var(--text);outline-offset:4px}
.film-stack-label {position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);padding:7px 9px;background:#18191ccc;color:#fff;border-radius:5px;font-size:10px;line-height:1.2;white-space:nowrap;opacity:0;transform:translateY(5px);transition:opacity 250ms ease,transform 250ms ease;pointer-events:none}
.film-stack-label .icon {width:11px;height:11px;flex:none}
.film-stack-interactive button:hover .film-stack-label,
.film-stack-interactive button:focus-visible .film-stack-label {opacity:1;transform:none}

.workflow-demo {margin-top:7px}
.workflow-demo .workflow-visual {height:139px;padding-top:8px}
.workflow-demo [data-workflow-step] {cursor:pointer;transition:transform 280ms cubic-bezier(.22,1,.36,1),background-color 280ms ease,box-shadow 280ms ease,border-color 280ms ease}
.workflow-demo [data-workflow-step]:hover,
.workflow-demo [data-workflow-step]:focus-visible {transform:translateY(-5px)}
.workflow-demo [data-workflow-step]:focus-visible {outline:2px solid var(--text);outline-offset:4px}
.workflow-demo .workflow-node[aria-pressed="true"] {background:#fff;border-color:#d5d7db;box-shadow:0 11px 22px #181c281a;transform:translateY(-5px)}
.workflow-demo .workflow-core[aria-pressed="true"] {box-shadow:0 0 0 8px #ffffff80,0 13px 25px #12183225;transform:translateY(-5px)}
.workflow-demo .workflow-line {position:relative;flex:none}
.workflow-demo .workflow-line::after {content:"";position:absolute;inset:-1px 0;background:#6e7783;transform:scaleX(0);transform-origin:left;transition:transform 400ms cubic-bezier(.22,1,.36,1)}
.workflow-demo[data-active="think"] .workflow-line:first-of-type::after,
.workflow-demo[data-active="app"] .workflow-line::after {transform:scaleX(1)}
.workflow-caption {display:flex;align-items:center;justify-content:center;min-height:36px;margin:0 0 4px;text-align:center;font-size:11px;line-height:1.6;color:var(--muted)}
html[data-theme="dark"][data-design="gallery"] .workflow-demo .workflow-node[aria-pressed="true"] {background:#3a3b40;border-color:#666871;box-shadow:0 11px 24px #0005}
html[data-theme="dark"][data-design="gallery"] .workflow-demo .workflow-core[aria-pressed="true"] {box-shadow:0 0 0 8px #ffffff10,0 13px 25px #0005}
html[data-theme="dark"][data-design="gallery"] .workflow-demo .workflow-line::after {background:#d5d5dc}

/* Gentle staggered entrances. No parallax, continuous drift, or scroll locking. */
html[data-design="gallery"] .reveal {
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity 760ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
             transform 760ms cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
             background-color 320ms ease,color 320ms ease,border-color 320ms ease;
}
html[data-design="gallery"] .reveal:not(.is-revealed) {will-change:opacity,transform}
html[data-design="gallery"] .reveal.is-revealed,
html[data-design="gallery"] .reveal:focus-within {opacity:1;transform:none}
@media(max-width:800px){.nav-actions{gap:10px}.theme-control{padding:3px}.theme-control button{width:28px;height:28px}}
@media(max-width:600px){.nav-actions{gap:9px}.theme-control button{width:30px;height:30px}html[data-design="gallery"] .site-footer{padding-bottom:33px}html[data-design="gallery"] .reveal{transform:translate3d(0,16px,0)}html[data-design="gallery"] .reveal.is-revealed,html[data-design="gallery"] .reveal:focus-within{transform:none}}
@media(hover:none){.film-stack-label{left:auto;right:9px;bottom:9px;width:27px;height:27px;max-width:none;justify-content:center;padding:0;font-size:0;opacity:1;transform:none}.film-stack-label .icon{width:12px;height:12px}}
@media(max-width:600px){.film-stack-interactive button:hover{transform:none;filter:none}.film-stack-interactive button:focus-visible{transform:translateY(-8px)}.workflow-demo .workflow-visual{height:132px}.workflow-caption{font-size:10px;padding:0 4px}}
@media(prefers-reduced-motion:reduce){html[data-design="gallery"],html[data-design="gallery"] *{transition:none!important;animation:none!important}html[data-design="gallery"] .reveal{opacity:1!important;transform:none!important;will-change:auto!important}}
@media print{html[data-design="gallery"] .reveal{opacity:1;transform:none}.theme-control{display:none}}
.portrait-card .project-media{background:#17181b}
.portrait-card .project-media>img,.portrait-card .card-preview{object-fit:contain}
.project-caption>div{min-width:0}
.project-caption p{overflow-wrap:anywhere}
.demo-disclosure a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.demo-disclosure a .icon{display:inline-block;width:11px;height:11px;vertical-align:-2px}