@property --rx{syntax:"<number>";inherits:true;initial-value:0}@property --ry{syntax:"<number>";inherits:true;initial-value:0}.ev-room{padding-block:clamp(56px, 7vw, 112px) calc(clamp(72px, 8vw, 128px) + var(--band-h));background:linear-gradient(to bottom, var(--color-white) 0%, var(--color-blue-50) 16%, var(--color-blue-75) 62%, var(--color-white) calc(100% - var(--band-h)));margin-block-start:calc(-1*clamp(40px,5vw,80px));position:relative;overflow:clip}.ev-room__sprite{block-size:0;inline-size:0;position:absolute;overflow:hidden}.ev-room__field{z-index:1;pointer-events:none;opacity:0;position:absolute;inset:0}.ev-room[data-light=playing] .ev-room__field{opacity:1}.ev-note{inline-size:var(--s);block-size:var(--s);color:var(--c,var(--color-blue-100));opacity:.62;transform:translate(var(--dx,0px), var(--dy,0px)) rotate(calc(var(--a,0deg) + var(--r,0deg))) scale(var(--k,1));position:absolute;inset-block-start:var(--y,0px);inset-inline-start:var(--x,0px)}.ev-note svg{fill:currentColor;block-size:100%;inline-size:100%;display:block}.ev-note--mark{--mark-dark:color-mix(in srgb, currentColor 62%, var(--color-ink));opacity:.8}.ev-room__mark-deep{fill:var(--mark-dark,currentColor)}.ev-note__ring{opacity:0;pointer-events:none;border:2px solid;border-radius:50%;position:absolute;inset:0}@media (max-width:1319px){.ev-note:is(.ev-note--s,.ev-note--e){display:none}}.ev-room__head{margin-block-end:clamp(32px,4vw,56px);position:relative}.ev-room__head .ev-h2{z-index:1;position:relative}.ev-room__glyph{z-index:0;block-size:auto;inline-size:clamp(8.5rem,5rem + 9vw,15rem);fill:var(--color-blue-100);pointer-events:none;position:absolute;inset-block-start:50%;inset-inline-start:-.3em;translate:0 -54%}.ev-room__fig{margin:0}.ev-room__stage{isolation:isolate;perspective:1600px;position:relative}.ev-room__stage:after{content:"";z-index:1;filter:blur(14px);pointer-events:none;background:radial-gradient(closest-side,#06285a52,#0000);border-radius:50%;block-size:12%;position:absolute;inset-block-end:-7%;inset-inline:10%}.ev-room .ev-room__plate{block-size:130%;inline-size:calc(50vw - 4%);fill:var(--color-blue-100);z-index:0;inset:auto;inset-block-start:-15%;inset-inline-end:calc(-50vw + 50%)}.ev-room__glow{z-index:1;opacity:0;pointer-events:none;position:absolute;inset-block:-6% -12%;inset-inline:-5%}.ev-room__light{filter:blur(64px)saturate(2.2)brightness(1.4);block-size:100%;inline-size:100%;position:absolute;inset:0}.ev-room__light--b{opacity:.6;scale:-1 1}.ev-room[data-light] .ev-room__glow{opacity:.62}.ev-room[data-light=playing] .ev-room__glow{opacity:.9}.ev-room[data-light=paused] .ev-room__glow{opacity:.45}.ev-room[data-light=ended] .ev-room__glow{opacity:0}.ev-room__cap{z-index:3;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px;margin-block-start:var(--spacing-s3);display:flex;position:relative}.ev-room__title{font-family:var(--font-display);letter-spacing:-.02em;color:var(--color-ink);text-wrap:balance;margin:0;font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem);font-weight:900;line-height:1.2}.ev-room__mask{padding-block:.08em;display:block;overflow:hidden}.ev-room__mask>span{display:block}@media (max-width:620px){.ev-room .ev-room__plate{block-size:128%;inline-size:calc(50vw + 5%);inset-block-start:-14%}.ev-room__glow{inset-block:-10% -18%;inset-inline:-6%}.ev-room__light{filter:blur(40px)saturate(2.2)brightness(1.4)}}.ev-room--tall .ev-room__grid{grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) clamp(260px,26vw,340px);column-gap:clamp(32px,6vw,96px);display:grid}.ev-room--tall .ev-room__fig{display:contents}.ev-room--tall .ev-room__head{align-self:end}.ev-room--tall .ev-room__stage{grid-area:1/2/span 2}.ev-room--portrait .ev-room__screen{aspect-ratio:9/16}.ev-room--square .ev-room__screen{aspect-ratio:1}.ev-room--tall .ev-room__plate{block-size:112%;inline-size:calc(50vw + 12%);inset-block-start:-6%}.ev-room--tall .ev-room__cap{flex-direction:column;grid-area:2/1;align-self:start;align-items:flex-start;margin:0}.ev-room--tall .ev-room__title{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.15}@media (max-width:760px){.ev-room--tall .ev-room__grid{grid-template-rows:auto;grid-template-columns:minmax(0,1fr)}.ev-room--tall .ev-room__stage{grid-area:2/1;justify-self:center;inline-size:min(100%,78vw,340px)}.ev-room--tall .ev-room__cap{grid-row:3;margin-block-start:var(--spacing-s3)}}@keyframes room-plate-in{0%{opacity:0;transform:translate(-12%)}}@keyframes room-rise{0%{opacity:0;transform:translateY(28px)scale(.92)}}@keyframes room-title-rise{0%{transform:translateY(105%)}}@keyframes room-drift{25%{transform:translate(3%,-2%)rotate(1.5deg)scale(1.04)}50%{transform:translate(-1%,2.5%)rotate(-1deg)scale(1.02)}75%{transform:translate(-3%,-1%)rotate(2deg)scale(1.06)}}@keyframes room-drift-b{33%{transform:translate(-6%,3%)rotate(-3deg)scale(1.08)}66%{transform:translate(5%,-2.5%)rotate(2.5deg)scale(.96)}}@keyframes room-ripple{0%{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(2)}}@media (prefers-reduced-motion:no-preference){:where(html:not(.a11y-still)) .ev-room.in .ev-room__plate{animation:room-plate-in 1.2s var(--ease-land) backwards}:where(html:not(.a11y-still)) .ev-room.in .ev-room__glyph{animation:room-rise 1.1s var(--ease-land) .15s backwards}:where(html:not(.a11y-still)) .ev-room.in .ev-room__mask>span{animation:room-title-rise 1s var(--ease-land) .3s backwards}:where(html:not(.a11y-still)) .ev-room__stage{transition:--rx .9s var(--ease-land), --ry .9s var(--ease-land)}:where(html:not(.a11y-still)) .ev-room__screen{transform:rotateX(calc(var(--rx) * -3deg)) rotateY(calc(var(--ry) * 4deg))}:where(html:not(.a11y-still)) .ev-room .ev-room__plate{translate:calc(var(--ry) * -8px) calc(var(--rx) * -6px)}:where(html:not(.a11y-still)) .ev-room__stage:after{translate:calc(var(--ry) * -10px) 0}:where(html:not(.a11y-still)) .ev-room__glow{scale:.88;translate:calc(var(--ry) * -18px) calc(var(--rx) * -12px);transition:opacity 1.4s var(--ease-land), scale 1.4s var(--ease-land), translate .9s var(--ease-land)}:where(html:not(.a11y-still)) .ev-room[data-light] .ev-room__glow{scale:1}:where(html:not(.a11y-still)) .ev-room[data-light=ended] .ev-room__glow{transition-duration:2.4s}:where(html:not(.a11y-still)) .ev-room[data-light] .ev-room__light{animation:18s ease-in-out infinite room-drift}:where(html:not(.a11y-still)) .ev-room[data-light] .ev-room__light--b{animation-name:room-drift-b;animation-duration:11s}:where(html:not(.a11y-still)) .ev-room[data-light=paused] .ev-room__light,:where(html:not(.a11y-still)) .ev-room[data-light=ended] .ev-room__light{animation-play-state:paused}:where(html:not(.a11y-still)) .ev-room__field{transition:opacity 1.2s var(--ease-land)}:where(html:not(.a11y-still)) .ev-room[data-light=ended] .ev-room__field{transition-duration:2.4s}:where(html:not(.a11y-still)) .ev-note{transition:color .8s linear, opacity .6s var(--ease-land), filter .6s var(--ease-land)}:where(html:not(.a11y-still)) .ev-note__ring{animation:room-ripple 2.2s var(--ease-land) forwards}:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-room__glow,:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-room__glow{opacity:.95;scale:calc(1 + var(--bloom,0) * .14);transition-duration:.4s,.12s,.9s}:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-room__field,:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-room__field{opacity:1;transition-duration:.4s}:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-note,:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-note{color:var(--color-red);opacity:.96;filter:drop-shadow(0 6px 10px color-mix(in srgb, var(--color-ink) 32%, transparent))}:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-note:nth-child(2n):not(.ev-note--mark),:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-note:nth-child(2n):not(.ev-note--mark){color:var(--color-blue)}:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-note--mark,:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-note--mark{--mark-dark:var(--color-blue)}:where(html:not(.a11y-still)) .ev-room__light{transition:filter .6s var(--ease-land)}:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-room__light,:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-room__light{filter:blur(64px)}:where(html:not(.a11y-still)) .ev-room__light--b{transition:opacity 1.2s var(--ease-land)}:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-room__light--b,:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-room__light--b{opacity:0}:where(html:not(.a11y-still)) .ev-room__field{-webkit-mask:linear-gradient(var(--color-ink) 0 0), linear-gradient(var(--color-ink) 0 0) var(--hole-x) var(--hole-y) / var(--hole-w) var(--hole-h) no-repeat;mask:linear-gradient(var(--color-ink) 0 0), linear-gradient(var(--color-ink) 0 0) var(--hole-x) var(--hole-y) / var(--hole-w) var(--hole-h) no-repeat;-webkit-mask-composite:xor;mask-composite:exclude}}@media (prefers-reduced-motion:no-preference) and (max-width:620px){:where(html:not(.a11y-still)) .ev-room[data-light=intro] .ev-room__light,:where(html:not(.a11y-still)) .ev-room[data-light=outro] .ev-room__light{filter:blur(40px)}}
