@layer reset,global,composition;@layer utilities{@property --angle{syntax:"<angle>";inherits:false;initial-value:0deg}.dotted{--dot-color:#000;--dot-diameter:10px;--dot-spacing:12px;--_radius:calc(var(--dot-diameter) / 2);--_size:calc(var(--dot-diameter) + var(--dot-spacing));background-image:radial-gradient(circle, var(--dot-color) var(--_radius), transparent var(--_radius));background-position:0 0;background-size:var(--_size) var(--_size)}}@layer blocks{@property --awning-dark-color{syntax:"<color>";inherits:true;initial-value:teal}@property --awning-light-color{syntax:"<color>";inherits:true;initial-value:#40e0d0}@property --plant-dark-color{syntax:"<color>";inherits:true;initial-value:teal}@property --plant-light-color{syntax:"<color>";inherits:true;initial-value:#3cb371}@property --sign-color-background{syntax:"<color>";inherits:true;initial-value:#fff}@property --sign-color-foreground{syntax:"<color>";inherits:true;initial-value:#f4a460}@property --light-bulb-color{syntax:"<color>";inherits:true;initial-value:#fdf5e6}@property --light-transparency{syntax:"<percentage>";inherits:true;initial-value:100%}@property --wall-color{syntax:"<color>";inherits:true;initial-value:lab(88.3689% -22.696 -7.50916)}#hotel-entrance{--arch-base-color-off:saddlebrown;--arch-base-color-on:chocolate;--arch-border-color-off:sienna;--arch-border-color-on:orange;--desk-base-color:maroon;--desk-top-color-off:firebrick;--desk-top-color-on:linen;--stairs-base-color-off:saddlebrown;--stairs-base-color-on:orange;--stairs-rail-color-off:#555;--stairs-rail-color-on:teal;--stairs-wall-color-off:#333;--stairs-wall-color-on:darkslategray;animation-name:wall-color,lights-on-interior,lights-on-exterior;animation-duration:12s;animation-timing-function:ease-in-out,ease-out,ease-out;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running,running,running;animation-delay:0s,0s,0s;animation-fill-mode:none,none,none;animation-timeline:auto,auto,auto;display:grid;position:relative;&:after,&:before{--dot-color:var(--plant-dark-color);--dot-diameter:12px;--dot-spacing:1px;--dot-radius:calc(var(--dot-diameter) / 2);--dot-size:calc(var(--dot-diameter) + var(--dot-spacing));aspect-ratio:1;background-color:var(--plant-light-color);background-image:radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius)), radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));background-position:0 -4px, calc(var(--dot-radius) / -.875) calc(var(--dot-radius) - 4px);background-size:calc(var(--dot-size) * 1) calc(var(--dot-size) * 1.5);content:"";z-index:1;width:40cqi;display:block;position:absolute;bottom:-25cqi}&:after{border-radius:30cqi 0 0;right:-2cqi;transform:rotate(2deg)}&:before{border-radius:0 30cqi 0 0;left:-2cqi;transform:rotate(-2deg)}& layer-back,& layer-front{grid-area:1/1/-1/-1}& layer-back{background-color:var(--stairs-wall-color);background-image: linear-gradient(to bottom, transparent 82%, var(--desk-top-color) 82%, var(--desk-top-color) 83%, var(--desk-base-color) 83%), linear-gradient( 150deg, transparent 62%, var(--stairs-rail-color) 62%, var(--stairs-rail-color) calc(62% + var(--line-width--1)), transparent calc(62% + var(--line-width--1)), transparent 65%, var(--stairs-base-color) 65%)}& layer-front{row-gap:var(--line-width-4);grid-template-rows:1fr auto 4fr 4fr;grid-template-columns:repeat(8,1fr);display:grid;&:after,&:before{--light-color:color-mix(in srgb, oldlace, transparent var(--light-transparency));--light-inset:5cqi;aspect-ratio:1/3;background-color:var(--light-bulb-color);box-shadow:1.5cqi 2.25cqi 0 var(--light-color), 0cqi 3.75cqi 0 var(--light-color), -1.5cqi 2.25cqi 0 var(--light-color), -1.5cqi 5.25cqi 0 var(--light-color), 1.5cqi 6.75cqi 0 var(--light-color);content:"";width:9cqi;margin-block-start:10%;display:block;position:absolute;bottom:20cqi}&:before{left:var(--light-inset)}&:after{right:var(--light-inset)}}& hotel-awning{--_depth:var(--line-width-2);background-color:var(--awning-light-color);border-top:solid var(--line-width-2) var(--awning-dark-color);clip-path:polygon(0% 0%, 100% 0%, 100% var(--_depth), 95cqi 100%, 5cqi 100%, 0% var(--_depth));grid-column:1/-1;display:block}& hotel-sign{--sign-stroke-width:1.1cqi;background-color:var(--sign-color-background);border-bottom:solid #333 var(--line-width-0);grid-area:2/3/auto/-3;justify-content:center;gap:1.125cqi;height:15cqi;margin-inline:3cqi;padding-block:3cqi;padding-inline:11.625cqi;display:flex;position:relative}& hotel-sign-letter{width:4cqi;position:relative;&:after,&:before{background-color:var(--sign-color-foreground);display:block;position:absolute}&[data-letter=H]{border-inline:solid var(--sign-color-foreground) var(--sign-stroke-width);&:before{content:"";height:var(--sign-stroke-width);inset-inline:0;top:55%}}&[data-letter=O]{aspect-ratio:1;border:solid var(--sign-color-foreground) var(--sign-stroke-width);border-radius:100%;height:50%;margin-inline-start:-1%;&:before{background-color:var(--sign-color-foreground);bottom:calc(-2 * var(--sign-stroke-width));content:"";height:var(--sign-stroke-width);inset-inline:calc(-1 * var(--sign-stroke-width))}}&[data-letter=T]{border-block-start:solid var(--sign-color-foreground) var(--sign-stroke-width);margin-inline-start:-4%;&:before{content:"";inset-block:0;inset-inline:calc((100% - var(--sign-stroke-width)) / 2);width:var(--sign-stroke-width)}}&[data-letter=E]{border-block:solid var(--sign-color-foreground) var(--sign-stroke-width);border-inline-start:solid var(--sign-color-foreground) var(--sign-stroke-width);width:2.25cqi;margin-inline-start:-3%;&:before{content:"";height:var(--sign-stroke-width);width:150%;top:10%;left:0}}&[data-letter=L]{border-block-end:solid var(--sign-color-foreground) var(--sign-stroke-width);border-inline-start:solid var(--sign-color-foreground) var(--sign-stroke-width);width:2.5cqi}}& hotel-arch{border:solid var(--arch-border-color) 1.875cqi;box-shadow:0 -100cqi 0 100cqi var(--arch-base-color), 0 100cqi 0 100cqi darkslategrey;border-bottom:0;border-radius:100cqi 100cqi 0 0;grid-area:1/1/-1/-1;justify-self:center;width:calc(100% - 9cqi);margin-top:9cqi;display:block}& hotel-doors{--bar-color:#222;--bar-width:var(--line-width-1);box-shadow:0 0 0 100cqi var(--wall-color);row-gap:var(--line-width-4);border-bottom-width:0;grid-area:3/3/-1/-3;grid-template-columns:repeat(2,1fr);display:grid;overflow:clip;&:after,&:before{--line-inset:19.75cqi;content:"";opacity:.2;background-color:#fff;display:block;position:absolute;inset-block:0}&:before{width:var(--line-inset);left:0}&:after{width:var(--line-inset);right:0}}& hotel-door{background-image:linear-gradient(to right, transparent, transparent 50%, var(--bar-color) 50%, var(--bar-color) calc(50% + var(--bar-width)), transparent calc(50% + var(--bar-width))), repeating-linear-gradient(to bottom, transparent, transparent 15cqi, var(--bar-color) 15cqi, var(--bar-color) calc(15cqi + var(--bar-width)));border:var(--bar-width) solid var(--bar-color);border-bottom-width:0;grid-row:1/-1;&:first-of-type{grid-column:1}&:nth-of-type(2){grid-column:2}}}@keyframes lights-on-exterior{0%{--light-bulb-color:lab(96.8653% .913173 8.24955/.3);--light-transparency:100%}71%{--light-bulb-color:lab(96.8653% .913173 8.24955/.3);--light-transparency:100%}72%{--light-bulb-color:lab(91.9838% 4.5642 26.5894/.9);--light-transparency:90%}to{--light-bulb-color:lab(91.9838% 4.5642 26.5894/.9);--light-transparency:90%}}@keyframes lights-on-interior{0%{--arch-base-color:var(--arch-base-color-off);--arch-border-color:var(--arch-border-color-off);--desk-top-color:var(--desk-top-color-off);--stairs-base-color:var(--stairs-base-color-off);--stairs-rail-color:var(--stairs-rail-color-off);--stairs-wall-color:var(--stairs-wall-color-off)}56%{--arch-base-color:var(--arch-base-color-off);--arch-border-color:var(--arch-border-color-off);--desk-top-color:var(--desk-top-color-off);--stairs-base-color:var(--stairs-base-color-off);--stairs-rail-color:var(--stairs-rail-color-off);--stairs-wall-color:var(--stairs-wall-color-off)}57%{--arch-base-color:var(--arch-base-color-on);--arch-border-color:var(--arch-border-color-on);--desk-top-color:var(--desk-top-color-on);--stairs-base-color:var(--stairs-base-color-on);--stairs-rail-color:var(--stairs-rail-color-on);--stairs-wall-color:var(--stairs-wall-color-on)}to{--arch-base-color:var(--arch-base-color-on);--arch-border-color:var(--arch-border-color-on);--desk-top-color:var(--desk-top-color-on);--stairs-base-color:var(--stairs-base-color-on);--stairs-rail-color:var(--stairs-rail-color-on);--stairs-wall-color:var(--stairs-wall-color-on)}}@keyframes wall-color{to{--awning-dark-color:darkslategray;--awning-light-color:lightseagreen;--plant-dark-color:#222;--plant-light-color:#333;--sign-color-background:moccasin;--sign-color-foreground:chocolate;--wall-color:teal}}@property --breeze-angle-max{syntax:"<angle>";inherits:false;initial-value:3deg}#hotel-parque{display:grid;& layer-back,& layer-front{grid-area:1/1/-1/-1}& layer-back{z-index:0;background-color:#b0e0e6;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:0;display:grid;& layer-tank,& layer-trees{grid-area:1/1/-1/-1}& layer-tank{grid-template-columns:subgrid;grid-template-rows:subgrid;z-index:1;display:grid}& platform-base,& platform-top{border-top:solid calc(1 * var(--stroke-size)) tomato;border-radius:0;grid-row:5/span 1}& platform-base{background-image:linear-gradient(-45deg,tomato 30%,#b22222 30%);grid-column:1/span 1}& platform-top{grid-area:5/2/span 1/span 2}& water-tank{border-top:solid calc(1 * var(--stroke-size)) #333;z-index:1;background-image:linear-gradient(-45deg,#333 70%,#222 70%);border-radius:.5rem;grid-area:2/3/span 1/span 1}& layer-trees{z-index:0;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(4,1fr);display:grid}& a-tree{--dot-color:darkolivegreen;--_tree-radius:3rem;animation:var(--breeze-duration,6s) linear breeze var(--breeze-delay,0s) infinite;border-radius:var(--_tree-radius) var(--_tree-radius) 0 0;transform:skewX(var(--angle));z-index:-1;background-color:#6b8e23;grid-row:1/-1;animation-timing-function:ease-in-out;animation-direction:alternate;&:first-of-type{--breeze-delay:0s;--breeze-duration:8s;--dot-diameter:16px;--dot-spacing:-2px;border-radius:calc(1.5 * var(--_tree-radius)) calc(1.5 * var(--_tree-radius)) 0 0;transform-origin:100% 100%;grid-column:1/span 2}&:nth-of-type(2){transform-origin:bottom;z-index:2;grid-row-start:2}&:nth-of-type(3){--breeze-duration:9s;--dot-diameter:4px;--dot-spacing:16px;transform-origin:0 100%;grid-column:4/span 1}}}& layer-front{transform-origin:top;grid-template-rows:5fr 3fr;display:grid;& rooftop-cinderblocks{--brick-radius:clamp(1.25rem, 6cqi, 2rem);--color-cement:floralwhite;z-index:1;grid-row:2;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(6,1fr);align-self:stretch;display:grid;position:relative;scale:1.25;& cinder-block{border:solid var(--stroke-size) var(--color-cement)}& cinder-block:first-child{position:relative;&:before{content:"";height:calc(var(--stroke-size) * 1);left:0;right:-600%;top:calc(-2 * var(--stroke-size));z-index:2;background-color:peru;display:block;position:absolute}}& cinder-block:nth-child(2n){--color-cement:wheat}& cinder-block:nth-child(3n){--color-cement:papayawhip}}& cinder-block:first-child{border-end-end-radius:var(--brick-radius);grid-column:span 2}& cinder-block:nth-child(2){border-start-end-radius:var(--brick-radius)}& cinder-block:nth-child(3){border-start-start-radius:var(--brick-radius)}& cinder-block:nth-child(4){border-end-start-radius:var(--brick-radius);grid-column:span 2}& cinder-block:nth-child(7){border-start-end-radius:var(--brick-radius)}& cinder-block:nth-child(8){border-start-start-radius:var(--brick-radius)}& cinder-block:nth-child(9){grid-column:span 2}}}@keyframes breeze{0%{--angle:2deg}to{--angle:-2deg}}#hotel-room{background-color:#fff0f5;grid-template-columns:repeat(7,1fr);display:grid;container:room/inline-size;& layer-back{grid-area:1/1/-1/-1;grid-template-columns:subgrid;display:grid;& room-bed{z-index:1;background-color:#fff;border-radius:.5rem 0 0 .25rem;grid-row:2;place-self:end;width:33cqi;height:12cqi;margin-bottom:2cqi;position:relative;&:before{content:"";background-color:linen;background-image:radial-gradient(circle,#d2691e 2px,#0000 2px),linear-gradient(#0000 30%,bisque 30%);background-position:0 -4px,0;background-size:15px 8px,100%;border-bottom:1cqi solid #d2691e;border-top-left-radius:.5rem;width:75%;height:6.5cqi;margin-top:-.5cqi;margin-left:-.5cqi;display:block}&:after{content:"";border-bottom:2cqi solid #deb887;width:calc(100% - 2cqi);height:2cqi;display:block;position:absolute;bottom:-2cqi;left:2cqi}}& room-doorway{grid-column:2/-2;grid-template-rows:2fr 1fr;display:grid;&>*,&:after{grid-column:1/-1}&:after{content:"";opacity:.33;z-index:0;background-color:pink;grid-row:2;width:100%;height:100%;display:block}}& room-light{--cord-length:calc(5cqi + var(--line-width-2));aspect-ratio:1;transform:rotate(calc(.25 * var(--angle)));transform-origin:top;z-index:2;background-color:#ffefd5;border-radius:100%;grid-row:1;place-self:start center;width:25cqi;margin-block-start:var(--cord-length);display:grid;position:relative;&:after{background-image:repeating-linear-gradient(transparent, transparent var(--line-width-4), sandybrown calc(var(--line-width-4) + 2px));content:"";border-radius:100%;margin-inline:-2px}&:before{content:"";height:var(--cord-length);top:calc(-1 * var(--cord-length));width:var(--line-width-0);background-color:#deb887;justify-self:center;position:absolute}}& room-windows{grid-area:1/1/-1/-1;grid-template-columns:repeat(2,1fr);grid-template-rows:subgrid;z-index:1;column-gap:40cqi;width:100%;height:100%;display:grid}& room-window{background-color:#fff;background-image:repeating-linear-gradient(#deb887,#deb887 1cqi,#0000 1cqi 17cqi);border-bottom:2cqi solid pink;align-self:stretch;width:100%;margin-top:20cqi;margin-bottom:-10cqi;display:grid;position:relative;&:after{content:"";height:var(--line-width-1);inset-inline:calc(-1 * var(--line-width-1));z-index:0;background-color:#d2691e;display:block;position:absolute;top:-.875cqi}}& room-window-curtain{width:calc(3 * var(--line-width-2) + 2 * var(--line-width-0));z-index:1;border-radius:4px 4px 0 0;position:absolute;top:-2cqi;bottom:-20cqi;&[data-side=right]{justify-self:end}&:after,&:before{content:"";border-radius:4px 4px 0 0;position:absolute;inset:0}&:before{background-color:#d2691e;background-image:repeating-linear-gradient(to right, transparent, transparent var(--line-width-2), firebrick var(--line-width-2), firebrick calc(var(--line-width-2) + var(--line-width-0)));z-index:0}&[data-breezy=true]:after{animation:var(--breeze-duration,6s) linear breeze-curtains var(--breeze-delay,0s) infinite;transform:skew(calc(-.625 * var(--angle)));transform-origin:top;z-index:-1;background-color:#d2691e;animation-timing-function:ease-in-out;animation-direction:alternate}}}& layer-front{box-shadow:0 0 0 var(--line-width-2) lightpink, 0 0 0 999px pink;z-index:1;border-radius:999px 999px 0 0;grid-area:1/2/-1/-2;margin-block-start:-5cqi;display:grid;overflow:clip}}@keyframes breeze-curtains{0%{--angle:-6deg}to{--angle:-1deg}}#hotel-wall{background-color:teal;background-image:linear-gradient(-135deg,teal 30%,#2f4f4f 30%);grid-template-rows:3fr 1fr;align-items:start;display:grid;position:relative;container:panel/size;& bench-pillow{--angle:1deg;--dot-color:papayawhip;--dot-diameter:2px;--dot-spacing:2px;aspect-ratio:1;content:"";transform-origin:0 100%;z-index:1;background-color:#fff;border-radius:3cqi;width:33cqw;display:block;position:relative;overflow:clip;&:first-of-type{background-color:#ffe4b5}&:nth-of-type(2n){--dot-color:dimgray;--dot-diameter:10px;--dot-spacing:-1px;z-index:0;margin-left:-20cqi;position:relative;overflow:clip;&:after{background-image:linear-gradient(-135deg,#0000 20%,silver 20%)}}&:nth-of-type(3){&:after{background-image:linear-gradient(-135deg,#0000 80%,#ffe4b5 80%)}}&:after{content:"";mix-blend-mode:multiply;display:block;position:absolute;inset:0}}& bench-pillow[data-size=large]{width:40cqi}& bench-surface{border-top:solid goldenrod var(--line-width-2);justify-content:center;align-items:end;column-gap:15cqi;height:100%;display:flex}& bench-tiles{--_tile-size:var(--line-width-6);background-image:linear-gradient(to bottom right,linen 50%,#b22222 50%);background-size:var(--_tile-size) var(--_tile-size);height:var(--_tile-size);grid-row:2;align-self:stretch;display:flex}}sketch-panels{--stroke-size:clamp(.6rem, 2cqi, .875rem);border:solid lightcyan calc(var(--stroke-size) / 1);@media screen and (width<900px){max-width:400px}}sketch-panel{aspect-ratio:1.125;background-color:#fff;width:100%;overflow:clip}}:root{--sketch-background-color:powderblue;--sketch-foreground-color:darkslategray;--sketch-tint-color:orange;--sketch-tint-opacity:.3;--sketch-ui-background-color:teal;--sketch-ui-foreground-color:white}