@layer studio-rooms{.playground .room-canvas{position:absolute;inset:0}.playground .room-canvas canvas{cursor:grab;block-size:100%;inline-size:100%}.playground .room-canvas canvas:active{cursor:grabbing}.playground .room-sound{border:1px solid var(--pg-black);background:var(--pg-cream);min-block-size:44px;color:var(--pg-black);font-family:var(--pg-ui);font-variant-numeric:tabular-nums;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;align-items:center;gap:10px;padding:8px 14px;font-size:9.5px;font-weight:600;line-height:1.3;display:flex}.playground .room-sound:focus-visible{outline:2px solid var(--pg-orange);outline-offset:3px}html[lang=ar] .playground .room-sound{font-family:var(--pg-ui);letter-spacing:0;text-transform:none;font-size:13px;font-weight:700}.playground .room-sound:hover{background:#e6dbcc57}.playground .room-sound-mark{border:1.5px solid var(--pg-orange);background:0 0;border-radius:50%;flex:none;block-size:10px;inline-size:10px}.playground .room-sound[aria-pressed=true] .room-sound-mark{background:var(--pg-orange)}.playground .room-verb{background:var(--pg-cream);inline-size:100%;color:var(--pg-black);border:3px solid var(--pg-black);border-radius:3px;flex-direction:column;gap:8px;padding:11px 12px;display:flex;position:relative}.playground .room-verb:focus{outline:2px solid var(--pg-black);outline-offset:-4px}.playground .room-verb:has(.room-verb-track){flex-direction:column;align-items:stretch;gap:8px}.playground .room-verb-track{--verb-handle:16px;--verb-rail-over:calc(var(--verb-handle) / 2 + 2px);block-size:26px;min-inline-size:90px;margin-inline:var(--verb-rail-over);cursor:ew-resize;touch-action:none;flex:auto;position:relative}.playground .room-verb-track:before{content:"";inset-block:0;inset-inline:calc(var(--verb-rail-over) * -1);background:var(--pg-white);border:2px solid var(--pg-black);touch-action:none;border-radius:3px;position:absolute}@media (hover:none){.playground .room-verb-track:after{content:"";inset-block:-9px;inset-inline:calc(var(--verb-rail-over) * -1);touch-action:none;position:absolute}}.playground .room-verb-fill{background:var(--pg-orange);inline-size:0%;position:absolute;inset-block:2px;inset-inline-start:calc(var(--verb-handle) / -2)}.playground .room-verb-handle{inline-size:var(--verb-handle);background:var(--pg-black);pointer-events:none;border-radius:2px;margin-inline-start:calc(var(--verb-handle) / -2);position:absolute;inset-block:-2px;inset-inline-start:0;box-shadow:2px 2px #00000059}.playground .room-verb--press{font:inherit;text-align:start;appearance:none;cursor:pointer;box-shadow:3px 3px 0 var(--pg-black);flex-direction:row;justify-content:space-between;align-items:center;gap:12px}.playground .room-verb--press:hover{background:var(--pg-white)}.playground .room-verb--press:active{box-shadow:none;transform:translate(3px,3px)}.playground .room-curve{flex-direction:column;gap:9px;display:flex}.playground .room-curve-plot{background:var(--pg-white);border:3px solid var(--pg-black);direction:ltr;border-radius:3px;align-self:center;position:relative}.playground .room-curve-canvas{display:block}.playground .room-curve-handle{background:var(--pg-orange);border:3px solid var(--pg-black);cursor:grab;touch-action:none;border-radius:50%;block-size:20px;inline-size:20px;margin:-10px 0 0 -10px;padding:0;position:absolute}.playground .room-curve-handle:active{cursor:grabbing;background:var(--pg-orange)}.playground .room-curve-handle:focus-visible{outline:2px solid var(--pg-orange);outline-offset:3px}.playground .room-curve-presets{flex-wrap:wrap;gap:6px;padding-right:2px;display:flex}.playground .room-curve-preset{font-family:var(--pg-ui);font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase;color:var(--pg-black);background:var(--pg-cream);border:2px solid var(--pg-black);box-shadow:2px 2px 0 var(--pg-black);cursor:pointer;border-radius:3px;flex:auto;padding:7px 8px;font-size:9.5px;font-weight:700}html[lang=ar] .playground .room-curve-preset{letter-spacing:0;text-transform:none;font-family:var(--pg-ui);font-size:12px}.playground .room-curve-preset:active{box-shadow:none;transform:translate(2px,2px)}.playground .room-curve-preset svg{block-size:18px;inline-size:18px;margin-inline:auto;display:block}.playground .room-curve-preset[aria-pressed=true]{background:var(--pg-orange);color:var(--pg-white)}.playground .room-curve-said{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;margin:0;position:absolute;overflow:hidden}.playground .room-curve-rows{z-index:2;pointer-events:none;visibility:hidden;position:absolute;inset:0}.playground .room-curve-row{white-space:nowrap;font-family:var(--pg-ui);font-variant-numeric:tabular-nums;letter-spacing:.12em;text-transform:uppercase;color:var(--pg-black);margin:0;font-size:10px;line-height:1;position:absolute}html[lang=ar] .playground .room-curve-row{letter-spacing:0;text-transform:none;font-family:var(--pg-ui);font-size:13px}.playground .room-curve-rows[data-hang=beside] .room-curve-row{transform:translateY(-50%)}.playground .room-curve-rows[data-hang=above] .room-curve-row{transform:translateY(-100%)}.playground .room-verb-figure{background:var(--pg-white);border:2px solid var(--pg-black);border-radius:2px;flex:none;padding:0;display:block}.playground .room-verb--press{font:inherit;text-align:start;appearance:none;cursor:pointer}.playground .room-verb-name{font-family:var(--pg-ui);font-variant-numeric:tabular-nums;letter-spacing:.22em;text-transform:uppercase;color:var(--pg-black);font-size:9.5px;font-weight:600}html[lang=ar] .playground .room-verb-name{font-family:var(--pg-ui);letter-spacing:0;text-transform:none;font-size:12px;font-weight:700}.playground .room-verb-value{font-family:var(--pg-ui);font-size:13px;line-height:1.4}.playground .room-verb-name,.playground .room-verb-value{text-wrap:balance}.playground .room-verb--press .room-verb-name{flex-shrink:0;max-inline-size:50%}.playground .room-verb-keys,.playground .room-live{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}@media (hover:none){.playground .room-curve-preset{min-block-size:44px}.playground .room-curve-handle:before{content:"";border-radius:50%;position:absolute;inset:-12px}}}
body:has(.playground){background:#000;margin:0;overflow:hidden}.playground{--pg-black:#000;--pg-cream:#e6dbcc;--pg-taupe:#a79788;--pg-orange:#f55312;--pg-white:#fff;--pg-rule:#e6dbcc2e;--pg-display:var(--font-display);--pg-ui:var(--font-body);background:var(--pg-black);color:var(--pg-cream);font-family:var(--pg-ui);position:fixed;inset:0;overflow:hidden}html[lang=ar] .playground{--pg-display:var(--font-arabic);--pg-ui:var(--font-arabic)}.playground .room-canvas{position:absolute;inset:0}.playground-loader{z-index:30;background:var(--pg-black);pointer-events:none;block-size:100%;inline-size:100%;display:block;position:absolute;inset:0}.pg-still{text-align:center;place-content:center;gap:20px;min-block-size:100%;padding-inline:16px;display:grid}.pg-still-names{font-family:var(--pg-display);margin:0;padding:0;font-weight:600;line-height:1.6;list-style:none}.pg-top{z-index:10;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:8px;display:flex;position:absolute;inset-block-start:12px;inset-inline:12px}.pg-bar{pointer-events:auto;gap:2px;display:flex}.pg-bar--start{min-inline-size:0}.pg-bar--end{flex:none}.pg-name,.pg-lang,.pg-icon{box-sizing:border-box;border:1px solid var(--pg-rule);background:var(--pg-black);block-size:44px;min-inline-size:44px;color:var(--pg-cream);justify-content:center;align-items:center;margin:0;display:inline-flex}.pg-name{block-size:auto;min-block-size:44px;min-inline-size:0;font-family:var(--pg-display);text-align:center;text-wrap:balance;padding-block:4px;padding-inline:14px;font-size:15px;font-weight:600;line-height:1.15}html[lang=ar] .pg-name{font-size:17px;font-weight:700;line-height:1.3}@media (max-width:430px){.pg-name{padding-inline:10px;font-size:14px}html[lang=ar] .pg-name{font-size:16px}.pg-bar .pg-lang{padding-inline:10px}}.pg-lang{padding-inline:12px;font-size:14px;text-decoration:none}.pg-lang:lang(ar){font-family:var(--font-arabic);font-size:16px}.pg-icon{cursor:pointer;padding:0}.pg-icon[hidden]{display:none}.pg-icon svg{fill:currentColor;block-size:18px;inline-size:18px}[dir=rtl] .pg-back svg{transform:scaleX(-1)}.pg-icon:hover,.pg-lang:hover{color:var(--pg-orange)}.pg-back{border-color:var(--pg-orange);background:var(--pg-orange);color:var(--pg-black)}.pg-back:hover{border-color:var(--pg-cream);background:var(--pg-cream);color:var(--pg-black)}.pg-back svg{block-size:22px;inline-size:22px}.pg-icon:focus-visible,.pg-lang:focus-visible,.pg-contact:focus-visible,.pg-whatsapp:focus-visible,.pg-still-link:focus-visible,.pg-again:focus-visible{outline:2px solid var(--pg-orange);outline-offset:2px}.pg-sound{font-size:0}.pg-sound .room-sound-mark{display:none}.pg-sound[aria-pressed=false] svg{opacity:.4}.pg-controls{z-index:10;position:absolute;inset-block-end:12px;inset-inline-start:12px}.pg-controls>:not([data-room=motion]):not([data-room=set]):not([data-room=code]):not(:focus-within),.pg-set-verb:not(:focus-within),.pg-code-verb>.room-verb:not(:focus-within),.pg-code-field{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.pg-review{z-index:13;place-items:center;animation:2.6s linear forwards pg-review-flash;display:grid;position:fixed;inset:0}.pg-review img{aspect-ratio:3/4;box-sizing:border-box;border:14px solid #efe9dc;background:#efe9dc;border-block-end-width:26px;block-size:min(62vh,120vw);animation:2.6s cubic-bezier(.4,0,.2,1) forwards pg-review-print;box-shadow:0 18px 48px #0000008c}.pg-review--going img{opacity:0;transition:opacity .26s ease-in,transform .26s ease-in;animation:none;transform:translateY(24vh)scale(.32)rotate(-4deg)}@keyframes pg-review-flash{0%{background:#ffffffd9}9%{background:#fff0}to{background:#fff0}}@keyframes pg-review-print{0%{opacity:0;transform:scale(1.04)}7%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:translateY(32vh)scale(.28)rotate(-4deg)}}.pg-code-field{opacity:0;font-size:16px}.pg-light{box-sizing:border-box;z-index:11;border:1px solid var(--pg-rule);background:var(--pg-black);inline-size:min(100% - 32px,360px);color:var(--pg-cream);align-items:center;gap:12px;margin-inline:auto;padding-block:10px;padding-inline:14px;display:flex;position:fixed;inset-block-end:24px;inset-inline:0}.pg-light svg{fill:currentColor;flex:none;block-size:18px;inline-size:18px}.pg-light-range{cursor:pointer;appearance:none;background:0 0;flex:1;block-size:28px;min-inline-size:0;margin:0}.pg-light-range::-webkit-slider-runnable-track{background:var(--pg-rule);block-size:4px}.pg-light-range::-moz-range-track{background:var(--pg-rule);block-size:4px}.pg-light-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--pg-orange);border:0;border-radius:0;block-size:18px;inline-size:18px;margin-block-start:-7px}.pg-light-range::-moz-range-thumb{background:var(--pg-orange);border:0;border-radius:0;block-size:18px;inline-size:18px}.pg-light-range:focus-visible{outline:2px solid var(--pg-orange);outline-offset:4px}.pg-hint{z-index:10;inline-size:min(100% - 32px,440px);color:var(--pg-cream);pointer-events:none;flex-direction:column;align-items:center;gap:8px;margin-inline:auto;transition:inset-block-end .22s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out,visibility linear;display:flex;position:absolute;inset-block-end:28px;inset-inline:0}.pg-hint[hidden]{visibility:hidden;opacity:0;transition:inset-block-end .22s cubic-bezier(.2,.8,.2,1),opacity .3s ease-out,visibility 0s linear .3s;display:flex}@layer base{.playground .pg-hint[hidden]{display:flex!important}.playground .pg-start[hidden]{display:block!important}.playground .pg-door[hidden]{display:grid!important}}.playground[data-place=room] .pg-hint{inset-block:72px auto}.pg-hint-line{box-sizing:border-box;border:1px solid var(--pg-rule);background:var(--pg-black);font-family:var(--pg-ui);text-align:center;text-wrap:balance;padding-block:8px;padding-inline:14px;font-size:14px;line-height:1.3}html[lang=ar] .pg-hint-line{font-size:15px;line-height:1.5}.pg-hint svg{fill:currentColor;block-size:28px;inline-size:28px;animation:1.6s ease-in-out infinite pg-hint}@keyframes pg-hint{0%,to{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}.pg-start{box-sizing:border-box;z-index:11;border:1px solid var(--pg-rule);background:var(--pg-black);inline-size:min(100% - 32px,560px);color:var(--pg-cream);text-align:center;pointer-events:none;margin-inline:auto;padding-block:20px;padding-inline:24px;transition:opacity .3s ease-out,visibility linear;position:absolute;inset-block-start:clamp(72px,14vh,140px);inset-inline:0}.pg-start[hidden]{visibility:hidden;opacity:0;transition:opacity .3s ease-out,visibility 0s linear .3s;display:block}.playground[data-place=room] .pg-start{display:none}.pg-intro{text-wrap:balance;font-family:var(--pg-display);margin:0;font-size:clamp(17px,2.2vw,22px);font-weight:600;line-height:1.35}html[lang=ar] .pg-intro{font-weight:700;line-height:1.6}.pg-end{box-sizing:border-box;z-index:12;border:1px solid var(--pg-rule);background:var(--pg-black);text-align:center;inline-size:min(100% - 32px,560px);margin-inline:auto;padding-block:24px 20px;padding-inline:24px;position:absolute;inset-block-end:12%;inset-inline:0}.pg-closing{text-wrap:balance;font-family:var(--pg-display);margin-block:0 20px;font-size:clamp(20px,3.4vw,30px);font-weight:600;line-height:1.2}html[lang=ar] .pg-closing{font-weight:700;line-height:1.5}.pg-contact{background:var(--pg-orange);min-block-size:48px;color:var(--pg-black);font-family:var(--pg-display);justify-content:center;align-items:center;padding-inline:22px;font-size:16px;font-weight:600;text-decoration:none;display:inline-flex}.pg-contact:hover{background:var(--pg-cream)}.pg-end-links{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;display:flex}.pg-whatsapp,.pg-still-link{min-block-size:48px;color:var(--pg-cream);font-family:var(--pg-ui);text-underline-offset:3px;align-items:center;font-size:15px;text-decoration:underline;display:inline-flex}html[lang=ar] .pg-whatsapp,html[lang=ar] .pg-still-link{font-size:17px}.pg-whatsapp[href]:hover,.pg-still-link:hover{color:var(--pg-orange)}.pg-whatsapp:not([href]){color:var(--pg-taupe);text-decoration:none}.pg-again{min-block-size:44px;color:var(--pg-taupe);font-family:var(--pg-ui);text-underline-offset:3px;cursor:pointer;background:0 0;border:0;margin-block:10px 0;margin-inline:auto;font-size:14px;text-decoration:underline;display:block}.pg-door{box-sizing:border-box;z-index:12;border:1px solid var(--pg-rule);background:var(--pg-black);grid-template-columns:1fr auto;align-items:center;gap:4px 16px;inline-size:min(100% - 32px,440px);margin-inline:auto;padding-block:16px;padding-inline:20px;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s ease-out,visibility linear;display:grid;position:absolute;inset-block-end:24px;inset-inline:0}.pg-door[hidden]{visibility:hidden;opacity:0;pointer-events:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s ease-out,visibility 0s linear .22s;display:grid;transform:translateY(16px)}.pg-door-name{font-family:var(--pg-display);grid-column:1;margin:0;font-size:20px;font-weight:600;line-height:1.15}html[lang=ar] .pg-door-name{font-size:22px;font-weight:700;line-height:1.3}.pg-door-line{color:var(--pg-taupe);text-wrap:balance;grid-column:1;margin:0;font-size:14px;line-height:1.4}html[lang=ar] .pg-door-line{font-size:16px}.pg-door-enter{background:var(--pg-orange);min-block-size:48px;min-inline-size:96px;color:var(--pg-black);font-family:var(--pg-display);cursor:pointer;border:0;grid-area:1/2/span 2;padding-inline:22px;font-size:16px;font-weight:600}.pg-door-enter:hover{background:var(--pg-cream)}.pg-door-enter:focus-visible{outline:2px solid var(--pg-orange);outline-offset:2px}.is-pressing{animation:.24s cubic-bezier(.2,.8,.2,1) pg-press}@keyframes pg-press{0%{transform:scale(1.06)}60%{transform:scale(.985)}to{transform:scale(1)}}.playground .room-live{clip-path:inset(50%);block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.pg-flat{padding-block:72px 48px;padding-inline:16px;position:absolute;inset:0;overflow-y:auto}.pg-flat-intro{text-align:center;max-inline-size:560px;margin-block:0 48px;margin-inline:auto}.pg-flat-rooms{gap:40px;max-inline-size:720px;margin:0;margin-inline:auto;padding:0;list-style:none;display:grid}.pg-flat-name{font-family:var(--pg-display);margin:0;font-size:22px;font-weight:600}.pg-flat-end{text-align:center;max-inline-size:560px;margin-block:56px 0;margin-inline:auto}.pg-flat-toy{margin-block-start:16px}.pg-flat-sheet{aspect-ratio:1.46/1.26;touch-action:none;inline-size:100%;display:block}.pg-flat-code{gap:10px;display:grid}.pg-flat-screen{text-align:start;direction:ltr;background:#050805;margin:0;padding:12px;font:12px/1.35 ui-monospace,monospace;overflow-x:auto}.pg-flat-code.is-fail .pg-flat-screen{color:#ff5a3c}.pg-flat-code.is-pass .pg-flat-screen{color:#4dff7a}.pg-flat-lamps{gap:6px;display:flex}.pg-flat-lamps span{background:#1a2a1c;block-size:8px;inline-size:10px}.pg-flat-lamps span.is-on{background:#3dff6a}.pg-flat-key{border:1px solid var(--pg-rule);background:var(--pg-black);cursor:pointer;block-size:44px;inline-size:120px}.pg-flat-key span{background:var(--pg-cream);block-size:6px;inline-size:60%;margin-inline:auto;display:block}.pg-flat-server{gap:12px;display:grid}.pg-flat-racks{grid-template-columns:repeat(12,1fr);gap:4px;display:grid}.pg-flat-rack{aspect-ratio:1;cursor:pointer;background:#1c2228;border:0;padding:0}.pg-flat-rack.is-on{background:#6aa8ff}.pg-flat-rack.is-booting,.pg-flat-rack.is-rebooting{background:#ffb24a}.pg-flat-rack.is-tripped{background:var(--pg-orange)}.pg-flat-gauge{inline-size:160px}.pg-flat-gauge-arc{fill:none;stroke:#3dbb5a;stroke-width:6px}.pg-flat-gauge-needle{stroke:var(--pg-cream);stroke-width:2px}.pg-flat-lever{inline-size:100%;accent-color:var(--pg-orange)}.pg-flat-motion,.pg-flat-set{gap:12px;display:grid}.pg-flat-plot{aspect-ratio:1.6;border:1px solid var(--pg-rule);background:#0d0d0d;position:relative}.pg-flat-plot svg{block-size:100%;inline-size:100%;position:absolute;inset:0}.pg-flat-plot-frame{fill:none;stroke:var(--pg-rule)}.pg-flat-plot-arm{fill:none;stroke:var(--pg-taupe)}.pg-flat-plot-curve{fill:none;stroke:var(--pg-orange);stroke-width:2px}.pg-flat-handle{border:2px solid var(--pg-cream);background:var(--pg-orange);cursor:grab;touch-action:none;border-radius:50%;block-size:20px;inline-size:20px;margin-block-start:-10px;margin-inline-start:-10px;padding:0;position:absolute}.pg-flat-ghosts{block-size:24px;position:relative}.pg-flat-ghost{background:var(--pg-taupe);block-size:16px;inline-size:4px;margin-inline-start:-2px;position:absolute;inset-block-start:4px}.pg-flat-ghost--mark{background:var(--pg-orange)}.pg-flat-row{flex-wrap:wrap;gap:8px;display:flex}.pg-flat-icon{border:1px solid var(--pg-rule);background:var(--pg-black);block-size:44px;inline-size:44px;color:var(--pg-cream);cursor:pointer;justify-content:center;align-items:center;padding:0;display:inline-flex}.pg-flat-icon svg{fill:currentColor;block-size:18px;inline-size:18px}.pg-flat-preset svg path{fill:none;stroke:currentColor;stroke-width:1.4px}.pg-flat-plate{block-size:auto;inline-size:100%;display:block}.pg-flat-icon:focus-visible,.pg-flat-key:focus-visible,.pg-flat-rack:focus-visible,.pg-flat-handle:focus-visible,.pg-flat-lever:focus-visible{outline:2px solid var(--pg-orange);outline-offset:2px}@media (prefers-reduced-motion:reduce){.pg-hint svg,.is-pressing,.pg-review,.pg-review img{animation:none}.pg-hint,.pg-hint[hidden],.pg-door,.pg-door[hidden],.pg-start,.pg-start[hidden]{transition:none}}.pg-glow{box-shadow:0 0 0 3px var(--pg-orange), 0 0 14px 4px color-mix(in srgb, var(--pg-orange) 55%, transparent);animation:2.4s ease-in-out infinite pg-glow-breathe}@keyframes pg-glow-breathe{50%{box-shadow:0 0 0 3px var(--pg-orange), 0 0 22px 8px color-mix(in srgb, var(--pg-orange) 30%, transparent)}}.pg-hint-line.pg-glow.is-pressing{animation:.24s cubic-bezier(.2,.8,.2,1) pg-press,2.4s ease-in-out infinite pg-glow-breathe}@media (prefers-reduced-motion:reduce){.pg-glow,.pg-hint-line.pg-glow.is-pressing{animation:none}}