html:has(body.experiments-page),
body.experiments-page { background: var(--color-hero); }

body.experiments-page { min-width: 320px; }

:root { --preview-chrome-blue: rgb(155 177 235 / 40%); }

.code-art-loader { position: fixed; z-index: 20000; inset: 0; display: grid; place-items: center; padding: 1.5rem; background: var(--color-hero); opacity: 0; pointer-events: none; transition: opacity 180ms var(--ease-out), visibility 180ms var(--ease-out); visibility: hidden; }
html.code-art-loading .code-art-loader { opacity: 1; pointer-events: auto; visibility: visible; }
.code-art-loader__glass { width: min(100%, 34rem); padding: 1.25rem; border-radius: 1rem; background: color-mix(in srgb, var(--color-paper) 12%, transparent); box-shadow: 0 1rem 2.8rem color-mix(in srgb, var(--color-ink) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-paper) 34%, transparent); color: var(--color-paper); font-family: var(--font-body); font-size: clamp(.95rem, 1.4vw, 1.25rem); font-weight: 700; text-align: center; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%); backdrop-filter: blur(var(--glass-blur)) saturate(130%); }
.code-art-loader__track { height: .45rem; margin-top: .7rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-paper) 64%, transparent); }
.code-art-loader__track i { display: block; width: 78%; height: 100%; background: var(--color-paper); animation: code-art-loader-progress 700ms var(--ease-out) both; transform-origin: left; }
@keyframes code-art-loader-progress { from { transform: scaleX(.08); } to { transform: scaleX(1); } }

body.experiments-page .experiments { display: flex; flex-direction: column; gap: clamp(2.5rem, 4vw, 4rem); min-height: 0; padding-top: clamp(7rem, 10vw, 9rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

body.experiments-page .experiments::before,
body.experiments-page .experiments::after { inset: clamp(5.75rem, 8vw, 7rem) var(--folio-panel-inset) var(--folio-panel-inset); }

.experiments__intro { max-width: 52rem; }
.experiments__eyebrow,
.experiment__meta > p,
.experiment__meta p,
.experiment-preview__chrome,
.experiment-source__chrome,
.experiment__note { margin: 0; color: var(--color-secondary); font-family: var(--font-mono); font-size: clamp(.68rem, .85vw, .8rem); font-weight: 700; letter-spacing: .055em; line-height: 1.5; text-transform: uppercase; }

.experiments__intro h1 { max-width: none; margin: 0 0 1.25rem; color: var(--color-paper); font-family: var(--font-display); font-size: clamp(3rem, 7vw, 7.5rem); font-weight: 400; letter-spacing: -.04em; line-height: .9; white-space: nowrap; }
.experiments__intro > p:last-child { max-width: 42rem; margin: 0; color: var(--color-secondary); font-family: var(--font-body); font-size: clamp(1.05rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.45; }
@media (min-width: 48rem) { .experiments__intro > p:last-child { margin-inline-start: clamp(1.5rem, 3vw, 3.25rem); } }

.experiments__gallery { --gallery-preview-gap: clamp(1.75rem, 3vw, 4.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, min(42rem, calc((100% - var(--gallery-preview-gap)) / 2)))); gap: clamp(2.5rem, 5vw, 5rem) var(--gallery-preview-gap); justify-content: center; align-items: start; }
.experiment { display: grid; gap: 1.15rem; min-width: 0; }
.experiment:only-child { max-width: 48rem; }
.experiment__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: end; justify-content: space-between; }
.experiment__meta > div { max-width: 48rem; }
.experiment__meta h2 { max-width: 14ch; margin: 0; color: var(--color-paper); font-family: var(--font-display); font-size: clamp(2.35rem, 4vw, 3.5rem); font-weight: 400; letter-spacing: -.04em; line-height: .9; }
.experiment__description { max-width: 31rem; margin: .85rem 0 0 !important; color: var(--color-secondary) !important; font-family: var(--font-body) !important; font-size: clamp(1rem, 1.35vw, 1.2rem) !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.4 !important; text-transform: none !important; }
.experiment .experiment__meta > p { margin-right: clamp(.55rem, 1.25vw, 1rem); padding-bottom: .35rem; font-size: clamp(.6rem, .7vw, .68rem); letter-spacing: .045em; white-space: nowrap; }

.experiment__workbench { display: block; }
.experiment-preview,
.experiment-source { min-width: 0; overflow: hidden; border-radius: 1rem; background: color-mix(in srgb, var(--color-paper) 9%, transparent); box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--color-ink) 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--color-paper) 35%, transparent); }
.experiment-preview { display: flex; flex-direction: column; min-height: 0; }
.experiment-preview__chrome,
.experiment-source__chrome { display: flex; gap: .75rem; justify-content: space-between; align-items: center; min-height: 3rem; padding: 0 .9rem; border-bottom: 1px solid color-mix(in srgb, var(--color-paper) 22%, transparent); }
.experiment-preview__chrome { justify-content: flex-start; align-items: flex-start; padding-block: .7rem; background: var(--preview-chrome-blue); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); }
.experiment-preview__instruction { color: var(--color-secondary); font: inherit; font-weight: 500; letter-spacing: .015em; text-transform: none; }
.experiment-preview__instruction--touch { display: none; }

.preview-media { position: relative; flex: 1; min-height: 0; overflow: hidden; background: color-mix(in srgb, var(--color-paper) 9%, transparent); }
.preview-media img,
.preview-media video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.preview-media video { opacity: 0; transition: opacity 180ms var(--ease-out); }
.preview-media.is-playing video { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .preview-media { cursor: pointer; } }
.experiment-preview[data-creative-project] { cursor: pointer; }
.experiment-preview[data-creative-project]:hover { transform: none; }
.experiment-preview[data-creative-project]:focus-visible { outline: 2px solid var(--color-paper); outline-offset: .3rem; }

.creative-code-dialog { inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--color-paper); }
.creative-code-dialog::backdrop { background: color-mix(in srgb, var(--color-paper) 18%, transparent); backdrop-filter: blur(28px) saturate(1.05); -webkit-backdrop-filter: blur(28px) saturate(1.05); }
.creative-code-dialog__content { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.creative-code-dialog__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.creative-code-dialog__frame-shell { position: relative; width: 100vw; height: 100dvh; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.creative-code-dialog__frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease-out), visibility 180ms var(--ease-out); }
.creative-code-dialog__frame.is-ready { opacity: 1; visibility: visible; }
.creative-code-dialog .project-dialog__close { position: fixed; z-index: 5; top: 1.25rem; right: 1.25rem; border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%); }
.creative-code-dialog .project-dialog__close:hover, .creative-code-dialog .project-dialog__close:focus-visible { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.22); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 255, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.06); }
@media (max-width: 64rem) { .creative-code-dialog .project-dialog__close, .creative-code-dialog .project-dialog__close:hover, .creative-code-dialog .project-dialog__close:focus-visible, .creative-code-dialog .project-dialog__close:active { position: fixed; top: .75rem; right: .75rem; translate: 0 0; transform: translateZ(0); border-color: rgba(255, 255, 255, 0.08); background: color-mix(in srgb, var(--color-hero) 74%, rgba(255, 255, 255, 0.26)); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 40px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: none; backdrop-filter: none; } }

.liquid-surface { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #b9dbe7; }
.liquid-surface img,
.liquid-surface canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.liquid-surface img { object-fit: cover; }
.liquid-surface canvas { opacity: 0; cursor: grab; touch-action: none; transition: opacity 180ms var(--ease-out); }
.liquid-surface.is-ready canvas { opacity: 1; }
.liquid-surface canvas:active { cursor: grabbing; }
.liquid-surface canvas:focus-visible { outline: 2px solid var(--color-paper); outline-offset: -5px; }

.bubble-field-preview { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #f7bbce; }
.bubble-field-preview canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.bubble-field-preview canvas:focus-visible { outline: 2px solid var(--color-paper); outline-offset: -5px; }

.balloon-cluster-preview { position: relative; flex: 1; min-height: 0; overflow: hidden; background: linear-gradient(135deg, #f7dfe3 0%, #edf1fb 49%, #fbefcf 100%); }
.balloon-cluster-preview::before { content: ''; position: absolute; inset: -20%; z-index: 0; background: radial-gradient(circle at 16% 18%, rgb(249 208 220 / 13%), transparent 30%), radial-gradient(circle at 79% 16%, rgb(196 224 245 / 14%), transparent 32%), radial-gradient(circle at 76% 82%, rgb(247 229 169 / 12%), transparent 36%), radial-gradient(circle at 25% 78%, rgb(201 232 214 / 12%), transparent 34%); filter: blur(40px); pointer-events: none; }
.balloon-cluster-preview canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.balloon-cluster-preview canvas:active { cursor: grabbing; }
.balloon-cluster-preview canvas:focus-visible { outline: 2px solid var(--color-paper); outline-offset: -5px; }

.cloud-formation-preview { position: relative; flex: 1; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #9ea4d3 0%, #d8b4c6 58%, #d6bec8 100%); }
.cloud-formation-preview canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.cloud-formation-preview canvas:active { cursor: grabbing; }
.cloud-formation-preview canvas:focus-visible { outline: 2px solid var(--color-paper); outline-offset: -5px; }

.blue-ripple-preview { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #176b82; }
.blue-ripple-preview canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.blue-ripple-preview canvas:active { cursor: grabbing; }
.blue-ripple-preview canvas:focus-visible { outline: 2px solid var(--color-paper); outline-offset: -5px; }

.experiment-source { display: flex; flex-direction: column; min-height: 0; background: color-mix(in srgb, var(--color-ink) 58%, transparent); }
.experiment-source__chrome { flex: 0 0 auto; }
.experiment-source button { padding: .24rem .46rem; border: 1px solid color-mix(in srgb, var(--color-paper) 36%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--color-paper) 11%, transparent); color: var(--color-paper); font: inherit; font-size: .62rem; letter-spacing: .02em; line-height: 1; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.experiment-source button:hover { border-color: var(--color-paper); background: var(--color-paper); color: var(--color-hero); }
.experiment-source button:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 3px; }
.experiment-source pre { flex: 1; min-height: 0; margin: 0; padding: 1.2rem; overflow: auto; color: color-mix(in srgb, var(--color-paper) 92%, var(--color-light)); font-family: var(--font-mono); font-size: clamp(.75rem, 1vw, .86rem); line-height: 1.55; tab-size: 2; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-paper) 48%, transparent) transparent; }
.experiment-source pre::-webkit-scrollbar { display: block; width: 6px; height: 6px; }
.experiment-source pre::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--color-paper) 45%, transparent); }
.experiment-source pre:focus-visible { outline: 2px solid var(--color-paper); outline-offset: -4px; }
.experiment__note { max-width: 56rem; color: var(--color-paper); letter-spacing: .035em; text-transform: none; }

body.experiments-page ::selection { background: var(--color-paper); color: var(--color-hero); }

@media (min-width: 38rem) {
  .experiment-preview,
  .experiment-source { height: clamp(20rem, 31vw, 25rem); }
}

@media (max-width: 37.999rem) {
  .experiments__gallery { grid-template-columns: 1fr; }
  .experiment-preview,
  .experiment-source { height: clamp(20rem, 56vw, 29rem); }
}

@media (max-width: 47.999rem) {
  body.experiments-page.page--folio .folio-section.experiments:not(.folio-hero) { padding-top: 7rem; padding-bottom: 3rem; }
}

@media (max-width: 40rem) {
  .experiments { gap: 3.5rem; padding-top: 7.25rem; }
  .experiments__intro h1 { font-size: clamp(3.35rem, 16vw, 4.8rem); line-height: .84; white-space: normal; }
  .experiments__intro h1 span { display: block; }
  .experiment__meta { align-items: start; }
  .experiment__meta > p { padding: 0; }
  .experiment-preview { aspect-ratio: 4 / 5; height: auto; }
  .experiment-source { height: 20rem; }
  .experiment-source pre { padding: 1rem; font-size: .65rem; }
}

@media (max-width: 63.999rem), (hover: none) and (pointer: coarse) {
  .liquid-surface,
  .liquid-surface img,
  .liquid-surface canvas,
  .balloon-cluster-preview,
  .balloon-cluster-preview canvas,
  .cloud-formation-preview,
  .cloud-formation-preview canvas,
  .blue-ripple-preview,
  .blue-ripple-preview canvas { -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
  .liquid-surface,
  .balloon-cluster-preview,
  .cloud-formation-preview,
  .blue-ripple-preview { touch-action: none; }
  .experiment-preview__instruction--pointer { display: none; }
  .experiment-preview__instruction--touch { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-surface canvas { display: none; }
  .code-art-loader__track i { animation: none; transform: scaleX(1); }
}