@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#262427;background:#f5f3ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #b12f60;outline-offset:4px}header{height:94px;border-bottom:1px solid #dcd9d5;display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{display:flex;align-items:center;text-decoration:none;color:inherit;font-size:24px;letter-spacing:-1px;font-weight:700}.brand-light{font-weight:400}.brand-icon{display:grid;place-items:center;background:#272528;color:#f7f3ef;width:38px;height:38px;border-radius:10px;margin-right:12px;font-size:30px;line-height:1}.header-note,.version,.eyebrow,.label-row,.stage-top,.stage-bottom,footer,.edition{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:1.1px}.header-note{color:#797479}.version{border:1px solid #d3cfd0;border-radius:30px;padding:9px 14px}main{max-width:1500px;margin:auto;padding:42px 5% 22px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.eyebrow{display:flex;align-items:center;gap:8px;font-weight:500}.eyebrow span{width:7px;height:7px;background:#ee548a;border-radius:50%}h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(38px,4.6vw,68px);line-height:1.12;letter-spacing:-3.8px;margin:15px 0 12px}h1 em{font-family:Georgia,serif;font-weight:400;color:#dd477d}h1 svg{width:76px;height:58px;vertical-align:middle;margin-left:17px;stroke:#de4b7e;stroke-width:3;fill:none}.intro p{font-size:15px;color:#757074;margin:0}.edition{font-size:11px;line-height:1.6;transform:rotate(6deg);margin:24px 24px 0 0}.edition span{display:block;font-size:40px;margin:0 0 0 55px;line-height:1.1}.playground{display:grid;grid-template-columns:minmax(0,1fr) 310px;border:1px solid #d6ced0;border-radius:18px;overflow:hidden;background:#fcfbf8;box-shadow:0 7px 25px #30222e05}.stage{position:relative;min-height:590px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#f8d1dc 0%,#f2dbe0 47%,#eadee1 100%)}.stage:before{position:absolute;inset:0;content:'';background-image:linear-gradient(#ab7d8f0c 1px,transparent 1px),linear-gradient(90deg,#ab7d8f0c 1px,transparent 1px);background-size:40px 40px}.stage-top{position:absolute;top:23px;left:25px;right:23px;display:flex;justify-content:space-between;align-items:center;z-index:2;font-size:11px;color:#775f68}.stage-top>span{display:flex;align-items:center;gap:8px}.stage-top i{width:6px;height:6px;border-radius:50%;background:#b65378}.small-button{border:1px solid #bfa7b17d;background:#ffffff36;border-radius:7px;padding:7px 11px;font-size:12px;color:#6d5961}.watermark{position:absolute;left:8%;top:19%;font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-8px;font-size:clamp(80px,9.7vw,145px);line-height:.87;color:#fff4f647;user-select:none}.stage canvas{display:block;position:absolute;width:100%;height:100%;touch-action:none;cursor:grab;z-index:1}.stage canvas:active{cursor:grabbing}.stage-bottom{position:absolute;bottom:22px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;z-index:2;color:#7d6470;font-size:10px;pointer-events:none}.gesture{display:flex;align-items:center;gap:10px;font-size:23px}.gesture span{font-family:'DM Sans',sans-serif;letter-spacing:0;font-size:12px}#energy{font-size:10px;min-width:85px;text-align:right}.hint{position:absolute;top:49%;right:4%;color:#976576;font-size:13px;font-style:italic;transform:rotate(-9deg);z-index:2;pointer-events:none;transition:opacity .6s}.hint span{font-size:30px;display:block;margin-left:40px}aside{padding:28px 25px 20px;border-left:1px solid #d6ced0}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading h2{font-family:'Space Grotesk',sans-serif;font-size:21px;letter-spacing:-.6px;margin:0}.panel-heading>span{color:#b5a8ae;font-size:23px}.panel-description{font-size:13px;color:#8c8287;margin:9px 0 27px}.label-row{display:flex;justify-content:space-between;font-size:10px;color:#7b7176;margin-bottom:10px}.label-row span:last-child{color:#c34973}.presets{display:flex;border:1px solid #ded8d9;border-radius:8px;padding:3px;gap:3px;margin-bottom:27px;background:#f3f0ed}.presets button{flex:1;border:0;background:transparent;color:#83757c;padding:9px 0;border-radius:5px;font-size:13px}.presets .selected{background:#292529;color:#fff}.slider-block{margin-bottom:21px}.slider-block label{font-size:14px;display:flex;justify-content:space-between;font-weight:500}.slider-block output{font-family:'Space Grotesk',sans-serif;color:#b1486d;font-size:12px;background:#f5e8ed;border-radius:4px;padding:2px 6px}input[type=range]{width:100%;height:4px;border-radius:4px;margin:18px 0 11px;appearance:none;background:linear-gradient(to right,#ce527c 65%,#e7dfe1 65%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;background:#fcf9f8;border:4px solid #cb4c77;border-radius:50%;box-shadow:0 1px 3px #0002}input[type=range]::-moz-range-thumb{width:8px;height:8px;background:white;border:4px solid #cb4c77;border-radius:50%}.range-caption{display:flex;justify-content:space-between;font-size:11px;color:#94868d}.finish-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e8e1e3;padding-top:19px;margin:1px 0 24px;font-size:14px}.swatches{display:flex;gap:11px}.swatch{width:21px;height:21px;border-radius:50%;background:var(--swatch);border:3px solid #fcfbf8;outline:1px solid transparent}.swatch.selected{outline-color:var(--swatch)}.bounce{background:#292529;border:0;color:#fff;display:flex;justify-content:space-between;width:100%;padding:14px 16px;border-radius:8px;font-size:14px;transition:transform .15s,background .15s}.bounce:hover{background:#bb3e6b;transform:translateY(-2px)}.bounce span{font-size:20px;line-height:16px}.reset{background:none;border:none;color:#8c7d85;width:100%;padding:13px;font-size:12px}.science-note{border-top:1px solid #e8e1e3;margin-top:10px;padding-top:13px;display:flex;gap:11px;align-items:center;color:#a08994}.science-note>span{font-size:29px;color:#d77d9b}.science-note p{font-size:11px;line-height:1.6;margin:0}footer{display:flex;justify-content:space-between;align-items:center;padding:24px 0;color:#92898e;font-size:10px}footer>span:nth-child(2){font-family:'DM Sans',sans-serif;letter-spacing:0;font-size:12px}footer b{font-weight:400;color:#bc597b}kbd{font-size:14px;border:1px solid #d9d1d5;border-radius:4px;padding:0 5px;margin-left:6px}@media(min-width:1500px){main{padding-top:55px}.stage{min-height:660px}}@media(max-width:950px){.header-note,.edition{display:none}.playground{grid-template-columns:minmax(0,1fr) 280px}aside{padding:25px 20px}.hint{display:none}h1{letter-spacing:-2px}.stage-bottom{left:15px;right:15px}.watermark{letter-spacing:-5px}}@media(max-width:700px){header{height:72px;padding:0 5%}.brand{font-size:21px}.version{font-size:9px;padding:7px 9px}main{padding-top:28px}.intro{margin-bottom:25px}h1{font-size:42px}h1 svg{width:45px;margin-left:5px}.intro p{font-size:13px;max-width:290px;line-height:1.5}.eyebrow{font-size:10px}.playground{display:flex;flex-direction:column}.stage{min-height:480px}.watermark{font-size:95px;top:21%}aside{border-left:0;border-top:1px solid #d6ced0;padding:25px}.panel-description{margin-bottom:20px}.science-note{display:none}.stage-top{left:18px;right:18px}footer{gap:20px;align-items:flex-start}footer>span:nth-child(2){display:none}.slider-block{margin-bottom:23px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}.bounce{transition:none}}
/* Study 002 — a dark photographic studio. */
:root{color:#ece5df;background:#141416}header{border-color:#302e31;height:80px}.brand-icon{background:#dac0aa;color:#252024}.header-note{color:#8f8786}.version{border-color:#423b3b;color:#a79b95}main{max-width:1600px;padding-top:30px}.intro{margin-bottom:25px}.eyebrow{color:#b4a39b}.eyebrow span{background:#d7ad91}h1{font-size:clamp(38px,4vw,61px);font-weight:500;margin-top:12px}h1 em{color:#d5b097}h1 svg{stroke:#d5b097}.intro p{color:#948b87}.edition{color:#a08b7f}.playground{border-color:#3c3535;background:#1d1c1f;border-radius:12px;grid-template-columns:minmax(0,1fr) 310px}.stage{min-height:680px;background:radial-gradient(ellipse at 48% 40%,#665047 0%,#382f2d 39%,#222023 75%)}.stage:before{background:none}.stage-top{color:#c6b3a6}.stage-top i{background:#d8b395}.small-button{color:#d2c3b9;background:#28232780;border-color:#8b71684a}.stage-bottom{color:#bca797}.hint{top:43%;right:5%;color:#b59b8b;font-size:12px;opacity:.8}.watermark{display:none}aside{border-color:#3c3535;padding-top:29px}.panel-heading>span{color:#aa8b78}.panel-description{color:#a29791}.label-row{color:#b4a39b}.label-row span:last-child{color:#d5b097}.presets{background:#252326;border-color:#433b3d}.presets button{color:#b8aaa2}.presets .selected{background:#d0b199;color:#282126}.slider-block output{background:#3b2f2d;color:#e0bca3}input[type=range]::-webkit-slider-thumb{border-color:#d6ad92;background:#eee3d9}input[type=range]::-moz-range-thumb{border-color:#d6ad92}.range-caption{color:#9a8b83}.finish-row,.science-note{border-color:#3a3234}.swatch{border-color:#1d1c1f}.bounce{background:#d4b39a;color:#2e2222;font-weight:600}.bounce:hover{background:#e6c8b0}.reset{color:#b7a39a}.science-note{color:#9c8b82}.science-note>span{color:#c0a08a}footer{color:#8f8179}footer b{color:#c3a68f}kbd{border-color:#4b403c}.view-controls{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:3;display:flex;background:#171518a6;backdrop-filter:blur(12px);padding:4px;border:1px solid #c1a18b29;border-radius:25px;gap:3px}.view-controls button{border:0;background:none;border-radius:20px;color:#bca99c;padding:8px 15px;font-size:12px;white-space:nowrap}.view-controls .selected{background:#d8b69b;color:#2e2323}#fps{opacity:.5;margin-left:9px;font-size:10px;letter-spacing:0}@media(min-width:1500px){.stage{min-height:730px}}@media(max-width:950px){.playground{grid-template-columns:minmax(0,1fr) 280px}.stage{min-height:640px}}@media(max-width:700px){.stage{min-height:580px}aside{border-color:#3c3535}header{height:70px}h1{font-size:41px}.intro p{max-width:330px}.view-controls{bottom:60px}.stage-top{font-size:10px}.stage-bottom{font-size:9px}}