:root{--experiment-gutter:var(--page-gutter)}
body.experiments-page{min-width:320px;background:var(--paper);color:var(--ink)}
.experiments-page .site-header{position:relative;z-index:20;padding-inline:var(--experiment-gutter);background:var(--paper)}
.experiments-page .site-header nav{margin-left:auto}
.experiments-page .language-switch{margin-left:clamp(18px,3vw,44px)}
.experiments-page .compact-footer{padding-inline:var(--experiment-gutter)}
.experiments-page .compact-footer{display:flex;justify-content:space-between;gap:24px;padding-top:24px;padding-bottom:24px;background:var(--ink);color:#fff;font-size:13px}
.experiments-page .compact-footer a{padding-bottom:3px;border-bottom:1px solid #666}
.experiments-archive{min-height:calc(100svh - var(--site-header-height) - var(--page-back-height));padding:clamp(54px,7vw,96px) var(--experiment-gutter) clamp(90px,11vw,160px)}
.experiments-heading{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:end;margin:0 0 clamp(48px,7vw,88px)}
.experiments-heading h1{grid-column:1 / span 8;margin:0;font:600 clamp(54px,8vw,126px)/.9 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.experiments-heading p{grid-column:9 / -1;margin:0 0 .35em;font-size:clamp(16px,1.25vw,19px);line-height:1.45;text-wrap:pretty}
.experiments-heading p span{display:block;white-space:nowrap}
@media(min-width:900px){.experiments-heading p{justify-self:end;width:max-content;max-width:100%;margin-bottom:0;text-align:left}}
.experiments-grid{display:grid;width:min(100%,1420px);margin:0 auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.experiment-card{display:block;min-width:0;padding:13px;background:var(--paper);overflow:hidden}
.experiment-card:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.experiment-cover{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#e5e5e1;transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.experiment-card:hover .experiment-cover,.experiment-card:focus-visible .experiment-cover{transform:scale(1.035)}
.experiment-cover img{display:block;width:100%;height:100%;object-fit:cover}
.experiment-cover--placeholder{display:grid;place-items:center;isolation:isolate;background:#deded9;color:#777}
.experiment-cover--placeholder::before,.experiment-cover--placeholder::after{content:"";position:absolute;z-index:-1;border:1px solid currentColor;opacity:.36}
.experiment-cover--placeholder::before{width:62%;aspect-ratio:1;border-radius:50%;transform:translate(var(--x,-12%),var(--y,9%))}
.experiment-cover--placeholder::after{width:44%;aspect-ratio:1;transform:rotate(var(--r,18deg))}
.experiment-cover--placeholder b{font:500 clamp(50px,6vw,94px)/1 var(--sans);letter-spacing:-.04em}
.experiment-cover--placeholder small{position:absolute;left:18px;bottom:16px;font-size:12px;font-weight:500}
.experiment-card:nth-child(3n) .experiment-cover--placeholder{--x:18%;--y:-12%;--r:-13deg;background:#d6d6d1}
.experiment-card:nth-child(3n+1) .experiment-cover--placeholder{--x:-18%;--y:-7%;--r:34deg;background:#e8e8e4}
.experiment-card:nth-child(2n) .experiment-cover--placeholder::before{border-radius:0;transform:translate(var(--x,10%),var(--y,-8%)) rotate(45deg)}
.experiment-card-label{display:flex;justify-content:space-between;gap:20px;padding:14px 2px 4px;font-size:14px;line-height:1.3}
.experiment-card-label span:last-child{color:#747470}
.experiment-card--placeholder .experiment-card-label{color:#747470}
.experiment-card--placeholder .experiment-card-label span:last-child{font-style:italic}
@media(min-width:1500px){.experiments-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.experiment-card:nth-child(n+7){grid-column:span 2}.experiment-card:nth-child(n+7) .experiment-cover{aspect-ratio:2.06}.experiment-card:nth-child(n+7) .experiment-cover--placeholder::before{width:35%}.experiment-card:nth-child(n+7) .experiment-cover--placeholder::after{width:24%}}
@media(max-width:899px){.experiments-heading h1{grid-column:1 / -1}.experiments-heading p{grid-column:1 / span 8;margin-top:18px}.experiments-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.experiments-page .site-header nav{display:flex}.experiments-page .language-switch{margin-left:auto}.experiments-archive{padding-top:38px}.experiments-heading{display:block;margin-bottom:38px}.experiments-heading h1{font-size:clamp(42px,12vw,58px)}.experiments-heading p{max-width:31ch;margin-top:20px}.experiments-grid{grid-template-columns:1fr}.experiment-card{padding:8px}.experiment-card-label{font-size:13px}.experiments-page .compact-footer{align-items:flex-start;flex-direction:column;gap:18px}}
@media(max-width:720px){.experiments-page .site-header.has-mobile-menu nav{display:none}.experiments-page .site-header.has-mobile-menu.menu-open nav{display:flex}}
@media(prefers-reduced-motion:reduce){.experiment-cover{transition:none}}

/* Kinetic type generator */
@media(min-width:1500px){.experiment-card:nth-child(n+7):not(.experiment-card--placeholder) .experiment-cover{background:#f6f5f1}.experiment-card:nth-child(n+7):not(.experiment-card--placeholder) .experiment-cover img{object-fit:contain}}
.generator-main{min-height:calc(100svh - var(--site-header-height) - var(--page-back-height));padding:0 var(--experiment-gutter) var(--experiment-gutter)}
.generator-shell{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);min-height:calc(100svh - var(--site-header-height) - var(--page-back-height) - var(--experiment-gutter));border:1px solid var(--ink);background:#fff}
.generator-panel{display:flex;flex-direction:column;gap:26px;padding:22px;border-right:1px solid var(--ink);background:var(--paper);overflow:auto}
.generator-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.generator-panel-head h1{margin:0;font:600 23px/1 var(--sans);letter-spacing:-.03em}
.generator-panel-head span{font:500 10px/1 var(--mono)}
.generator-parameters-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 2px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:500 14px/1 var(--sans);cursor:pointer;text-align:left}
.generator-parameters-toggle span{font-size:22px;font-weight:400;transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.generator-parameters-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
.generator-parameters-toggle:hover{opacity:.55}.generator-parameters-toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.generator-options{display:grid;gap:26px}
.generator-options[hidden]{display:none}
.generator-text{display:grid;gap:8px;font-size:11px;font-weight:500}
.generator-text textarea{width:100%;min-height:78px;resize:vertical;padding:10px;border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink);font:500 14px/1.35 var(--mono)}
.generator-controls{display:grid;gap:14px}
.generator-control{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:11px}
.generator-control output{font:500 10px/1 var(--mono);font-variant-numeric:tabular-nums}
.generator-control input[type="range"]{grid-column:1 / -1;width:100%;accent-color:var(--ink)}
.generator-colours{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.generator-colours label{display:grid;gap:7px;font-size:11px}
.generator-colours input{width:100%;height:34px;padding:0;border:1px solid var(--ink);border-radius:0;background:transparent;cursor:pointer}
.generator-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink);border:1px solid var(--ink)}
.generator-presets button,.generator-actions button{min-height:44px;padding:10px 8px;border:0;border-radius:0;background:var(--paper);color:var(--ink);font:500 11px/1 var(--sans);cursor:pointer}
.generator-presets button:hover,.generator-presets button:focus-visible,.generator-actions button:hover,.generator-actions button:focus-visible{background:var(--ink);color:#fff;outline:0}
.generator-surprise{display:grid;gap:9px}
.generator-surprise button{min-height:58px;padding:12px 18px;border:0;border-radius:0;background:var(--ink);color:#fff;font:600 18px/1 var(--sans);cursor:pointer;transition:opacity 120ms,transform 120ms}
.generator-surprise button:hover,.generator-surprise button:focus-visible{opacity:.72;outline:2px solid var(--ink);outline-offset:3px}
.generator-surprise button:active{transform:scale(.98)}
.generator-surprise output{font:500 10px/1 var(--mono);color:#666}
.generator-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:auto;background:var(--ink);border:1px solid var(--ink)}
.generator-stage{position:relative;min-width:0;min-height:520px;overflow:hidden;background:#fff;cursor:grab;touch-action:none}
.generator-stage:active{cursor:grabbing}
.generator-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
@media(max-width:840px){.generator-main{padding:0 12px 12px}.generator-shell{grid-template-columns:1fr;min-height:0}.generator-panel{order:2;border-top:1px solid var(--ink);border-right:0;overflow:visible}.generator-stage{min-height:58svh}.generator-controls{grid-template-columns:1fr 1fr;gap:16px 20px}.generator-text,.generator-colours,.generator-presets,.generator-actions{grid-column:1 / -1}.generator-actions{margin-top:0}}
@media(max-width:520px){.generator-stage{min-height:52svh}.generator-controls{grid-template-columns:1fr}.generator-panel{padding:16px}}
@media(prefers-reduced-motion:reduce){.generator-parameters-toggle span,.generator-surprise button{transition:none}}

/* Liquid sphere generator */
.liquid-sphere-stage{min-height:clamp(560px,72svh,900px);background:#000;cursor:grab}
.liquid-sphere-stage:active{cursor:grabbing}
.liquid-sphere-stage canvas{background:#000}
.liquid-sphere-stage .liquid-particles-canvas{background:transparent;pointer-events:none}
.liquid-sphere-stage .liquid-bloom-canvas{background:transparent;mix-blend-mode:screen;pointer-events:none}
.liquid-sphere-loading{position:absolute;inset:50% auto auto 50%;margin:0;color:#9298aa;font:500 10px/1 var(--mono);transform:translate(-50%,-50%);transition:opacity .25s;pointer-events:none}
.liquid-sphere-stage.is-ready .liquid-sphere-loading{opacity:0}
.liquid-sphere-stage.is-unavailable canvas{display:none}
.liquid-sphere-stage.is-unavailable .liquid-sphere-loading{max-width:28ch;opacity:1;text-align:center}
.liquid-sphere-panel{gap:clamp(26px,4vh,46px)}
.liquid-sphere-copy{max-width:27ch;margin:0;font-size:14px;line-height:1.5;text-wrap:pretty}
.liquid-sphere-note{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.liquid-sphere-note span{font:500 10px/1 var(--mono);color:#777}
.liquid-sphere-note p{margin:0;font-size:12px;line-height:1.4}
.liquid-sphere-page .generator-surprise{margin-top:0}
.liquid-sphere-page .generator-actions{margin-top:0}
.liquid-sphere-page button:disabled{cursor:not-allowed;opacity:.4}
.liquid-shape-presets{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
.liquid-shape-presets button{min-width:0;line-height:1.15;overflow-wrap:anywhere}
.liquid-shape-presets button[aria-pressed="true"]{background:var(--ink);color:#fff}
.generator-parameters-heading{padding:0 2px 12px;border-bottom:1px solid var(--ink);font:500 14px/1 var(--sans)}
@media(max-width:840px){.liquid-sphere-stage{min-height:62svh}.liquid-sphere-page .generator-surprise{margin-top:0}}
@media(max-width:520px){.liquid-sphere-stage{min-height:56svh}}

.soon-main{display:grid;place-items:center;min-height:calc(100svh - var(--site-header-height) - var(--page-back-height));padding:60px var(--experiment-gutter);text-align:center}
.soon-copy span{font:500 12px/1 var(--mono);color:#777}.soon-copy h1{margin:22px 0 38px;font:600 clamp(56px,10vw,148px)/.86 var(--sans);letter-spacing:-.04em}.soon-copy a{display:inline-flex;align-items:center;gap:.55em;padding-bottom:5px;border-bottom:1px solid currentColor;font-size:15px}

/* Glass Match – experiment 03 */
.bubble-game-main{padding:clamp(12px,2vw,28px) var(--experiment-gutter) clamp(20px,3vw,40px)}.bubble-game{position:relative;isolation:isolate;width:100%;min-height:clamp(600px,76svh,850px);margin:0;overflow:hidden;border:1px solid rgba(191,221,255,.42);border-radius:0;background:radial-gradient(circle at 50% 32%,#152349 0,#090e22 42%,#03040b 100%);box-shadow:0 20px 60px rgba(0,0,0,.22);color:#f8f9ff}.bubble-game h1,.bubble-game h2,.bubble-game b,.bubble-game button{color:#f8f9ff}.bubble-game::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 17% 12%,rgba(79,152,255,.25),transparent 28%),radial-gradient(circle at 83% 44%,rgba(255,61,112,.16),transparent 25%);pointer-events:none}.bubble-game canvas{position:absolute;inset:112px 0 0;display:block;width:100%;height:calc(100% - 112px);touch-action:none;cursor:crosshair}.bubble-game-top{position:relative;z-index:1;display:flex;align-items:start;justify-content:space-between;gap:20px;padding:22px 26px 0}.bubble-game-top span{font:500 10px/1 var(--mono);letter-spacing:.12em;color:#aebfe6}.bubble-game-top h1{margin:8px 0 0;font:600 clamp(28px,3vw,48px)/.88 var(--sans);letter-spacing:-.05em}.bubble-game-top button{min-height:40px;padding:0 14px;border:1px solid rgba(214,232,255,.65);border-radius:999px;background:rgba(8,13,31,.55);font:500 12px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s}.bubble-game-top button:hover,.bubble-game-top button:focus-visible{background:#e9f4ff;color:#10172b;outline:none}.bubble-game-hud{position:relative;z-index:1;display:grid;grid-template-columns:minmax(92px,1fr) minmax(180px,2fr) minmax(92px,1fr);align-items:end;gap:18px;margin:20px 26px 0;padding:13px 0;border-top:1px solid rgba(191,221,255,.22);pointer-events:none}.bubble-game-hud div:last-child{text-align:right}.bubble-game-hud small,.bubble-game-next span{display:block;color:#aebfe6;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}.bubble-game-hud b{display:block;margin-top:4px;font:600 26px/1 var(--sans);font-variant-numeric:tabular-nums}.bubble-game-hud p{margin:0;text-align:center;color:#dbe8ff;font-size:12px;line-height:1.3}.bubble-game-next{position:absolute;right:25px;bottom:20px;z-index:2;display:flex;align-items:center;gap:9px;color:#fff;pointer-events:none}.bubble-game-next i{display:block;width:22px;aspect-ratio:1;border-radius:50%;background:var(--next-colour,#3fa9ff);box-shadow:inset -5px -6px 7px rgba(0,0,0,.25),inset 4px 4px 4px rgba(255,255,255,.65),0 0 16px currentColor}.bubble-game-loading{position:absolute;z-index:2;inset:56% 0 auto;margin:0;color:#b7c9eb;font:500 11px/1 var(--mono);letter-spacing:.08em;text-align:center;transition:opacity .2s;pointer-events:none}.bubble-game.is-ready .bubble-game-loading{opacity:0}.bubble-game.is-error .bubble-game-loading{color:#ffc4d0;opacity:1}.bubble-game.is-finished::after{content:"";position:absolute;inset:0;background:rgba(2,4,12,.18);pointer-events:none}@media(max-width:620px){.bubble-game-main{padding-inline:10px}.bubble-game{min-height:calc(100svh - var(--site-header-height) - var(--page-back-height) - 20px)}.bubble-game-top{padding:17px 17px 0}.bubble-game-top h1{font-size:32px}.bubble-game-hud{grid-template-columns:1fr 1.8fr 1fr;gap:8px;margin:17px 17px 0}.bubble-game-hud b{font-size:21px}.bubble-game-hud p{font-size:10px}.bubble-game canvas{inset:103px 0 0;height:calc(100% - 103px)}.bubble-game-next{right:16px;bottom:15px}}

.bubble-game-over{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:24px;background:rgba(3,6,18,.68);backdrop-filter:blur(10px);transition:opacity .22s}.bubble-game-over[aria-hidden="true"]{visibility:hidden;opacity:0;pointer-events:none}.bubble-game-over>div{width:min(100%,430px);padding:30px;border:1px solid rgba(215,234,255,.58);background:#0a1024;color:#f8f9ff;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.55)}.bubble-game-over small{color:#aebfe6;font:500 10px/1 var(--mono);letter-spacing:.12em}.bubble-game-over h2{margin:14px 0 12px;color:#fff;font:600 clamp(34px,5vw,58px)/.92 var(--sans);letter-spacing:-.045em}.bubble-game-over p{max-width:30ch;margin:0 auto 26px;color:#cad8f1;font-size:14px;line-height:1.45}.bubble-game-over button{min-width:150px;min-height:48px;padding:0 20px;border:1px solid #fff;border-radius:999px;background:#fff;color:#0a1024;font:600 14px/1 var(--sans);cursor:pointer}.bubble-game-over button:hover,.bubble-game-over button:focus-visible{background:transparent;color:#fff;outline:none}