#root{margin:0;width:100%;text-align:center}.app{display:flex;align-items:center;justify-content:center;width:100vw;min-height:100vh}.body-container{display:grid;grid-template-areas:"drawing object-controls" "bottom-primary bottom-secondary";grid-template-columns:minmax(0,34%) minmax(0,66%);grid-template-rows:minmax(0,1fr) auto;gap:var(--space-4);width:100vw;height:100vh;box-sizing:border-box;padding:clamp(.75rem,2vh,1.5rem) clamp(.75rem,2vh,1.5rem)}.top-scroll-scrim,.bottom-scroll-scrim{position:fixed;left:0;z-index:1;width:100%;pointer-events:none;opacity:0;transition:height var(--t-med),opacity var(--t-med)}.top-scroll-scrim{top:0;height:clamp(7rem,18vh,10rem);background:linear-gradient(to bottom,#eff8f8,#eff8f8ad 48%,#eff8f800)}.bottom-scroll-scrim{bottom:0;height:clamp(5rem,14vh,8rem);display:none;background:linear-gradient(to top,#eff8f8,#eff8f8ad 48%,#eff8f800)}[data-theme=dark] .top-scroll-scrim{background:linear-gradient(to bottom,#2a2b2e,#2a2b2e9e 48%,#2a2b2e00)}[data-theme=dark] .bottom-scroll-scrim{background:linear-gradient(to top,#2a2b2e,#2a2b2e9e 48%,#2a2b2e00)}@supports (animation-timeline: scroll()){.top-scroll-scrim{animation:revealTopScrim linear both;animation-timeline:scroll(root);animation-range:0 14vh}@keyframes revealTopScrim{0%{opacity:0}to{opacity:1}}}@media screen and (max-width: 1023px){[data-ios] .top-scroll-scrim,[data-ios] .bottom-scroll-scrim{display:block;opacity:1;animation:none}[data-ios] .top-scroll-scrim{height:max(clamp(5rem,10vh,7rem),calc(env(safe-area-inset-top,0px) + 2.75rem))}[data-scrolled] .top-scroll-scrim{height:clamp(7rem,18vh,10rem)}[data-ios] .bottom-scroll-scrim{height:max(clamp(3rem,8vh,4.75rem),calc(env(safe-area-inset-bottom,0px) + 2rem))}}.theme-toggle{position:fixed!important;top:0;right:0;z-index:999999;display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;padding:.65rem;margin:.75rem;border:0;border-radius:50%;background:transparent;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;transition:background-color var(--t-fast),transform var(--t-fast)}.theme-toggle:hover{background-color:var(--glass-bg);transform:scale(1.06)}.theme-toggle:active{transform:scale(.94)}.theme-toggle:focus-visible{outline:none;box-shadow:var(--focus-ring)}.theme-toggle img{width:100%;height:100%;display:block}[data-theme=dark] .theme-toggle img{filter:invert(1) hue-rotate(180deg) brightness(1.18) contrast(1.05)}.main-content{display:contents}.drawing-container{grid-area:drawing;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;isolation:isolate;overflow:visible;z-index:2}.object-controls{grid-area:object-controls;align-self:center}.bottom-controls{display:contents}.anim-wrapper,.scale-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0}.petals{display:block;width:100%;height:100%}.footer{display:none;width:100%;justify-content:center;align-items:center;font-size:.7rem;color:var(--ink-soft)}.footer>p{margin:0}@media screen and (min-width: 1024px) and (max-height: 720px){body{overflow:auto}.app,.body-container{height:auto;min-height:100vh}}@media screen and (max-width: 1023px){.app{align-items:flex-start;justify-content:flex-start;min-height:auto}.body-container{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;width:100%;height:auto;min-height:100dvh;gap:var(--space-4);padding:clamp(2rem,14vh,4rem) 0}.theme-toggle{margin:1.2rem;width:2.6rem;height:2.6rem;padding:.55rem}.main-content{display:flex;width:100%;flex:none;flex-direction:column;align-items:center;gap:var(--space-4);padding:calc(min(440px,88vw) + var(--space-4)) 0 0}.drawing-container{width:100%;height:auto;contain:none;padding:0;position:fixed;top:1rem;left:0;z-index:30;pointer-events:none}.bottom-controls{display:flex;width:100%;flex-direction:column;align-items:center;gap:var(--space-3);padding:0}.anim-wrapper{width:auto;height:auto}.scale-wrapper{width:min(440px,88vw);aspect-ratio:1;height:auto;transform-origin:top center}@supports (animation-timeline: scroll()){.scale-wrapper{animation:stickyDrawingScale linear both;animation-timeline:scroll(root);animation-range:0 16rem}}@keyframes stickyDrawingScale{0%{transform:scale(1) translateY(0)}to{transform:scale(.6) translateY(0)}}}@media screen and (max-width: 600px){.body-container{padding:clamp(1rem,15vh,2rem) 0;gap:var(--space-3)}.main-content{padding-top:calc(min(320px,88vw) + var(--space-3))}.scale-wrapper{width:min(320px,88vw);height:auto}.footer{display:flex;order:9;margin-top:var(--space-2)}}.blur-container{display:none}.petals{display:block;overflow:visible}.layer{transform:rotate(0) translateZ(0);animation:rotateLayer 0s linear infinite}@keyframes rotateLayer{0%{transform:rotate(0) translateZ(0)}to{transform:rotate(360deg) translateZ(0)}}@keyframes rotateLayerReverse{0%{transform:rotate(0) translateZ(0)}to{transform:rotate(-360deg) translateZ(0)}}.logo-container{position:fixed!important;top:0;left:0;display:block;padding:.75rem;margin:.4rem;line-height:0;font-size:0;z-index:999999;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.logo-container:focus-visible{outline:none}.logo-container:focus-visible .logo{filter:drop-shadow(0 0 6px rgba(45,45,45,.5))}.logo{transition:transform .2s ease,opacity var(--t-fast);transform-origin:center}@keyframes rotateAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.logo-svg{cursor:pointer;overflow:visible}.logo:active{transform:scale(.98) translateZ(0)}@media (hover: hover) and (pointer: fine){.logo:hover{transform:scale(1.06)}}@keyframes floatAnimation{0%{transform:translateY(0) translateZ(0)}50%{transform:translateY(-9px) translateZ(0)}to{transform:translateY(0) translateZ(0)}}@keyframes floatAnimation2{0%{transform:translateY(0) translateZ(0)}50%{transform:translateY(-10px) translateZ(0)}to{transform:translateY(0) translateZ(0)}}@keyframes floatAnimation3{0%{transform:translateY(0) translateZ(0)}50%{transform:translateY(-12px) translateZ(0)}to{transform:translateY(0) translateZ(0)}}.logo-animation,.logo-animation-blur{animation:rotateAnimation 20s linear infinite;transform-origin:center}.petal-p{animation:floatAnimation 7s ease-in-out infinite;animation-delay:-5s}.petal-e{animation:floatAnimation2 7s ease-in-out infinite;animation-delay:-3s}.petal-t{animation:floatAnimation3 7s ease-in-out infinite;animation-delay:-6s}.petal-a{animation:floatAnimation 7s ease-in-out infinite;animation-delay:-2s}.petal-l{animation:floatAnimation3 7s ease-in-out infinite;animation-delay:-1s}.petal-s{animation:floatAnimation 7s ease-in-out infinite;animation-delay:-3s}@media screen and (max-width: 1023px){.logo-svg{width:150px;height:135px}}@media screen and (max-width: 600px){.logo-container{padding:.4rem}.logo-svg{width:116px;height:104px}}.object-controls{display:flex;align-items:stretch;justify-content:flex-start;gap:var(--space-3)}@media screen and (max-width: 1023px){.object-controls{box-sizing:border-box;max-width:100%;padding:2.25rem 1.5rem;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;justify-content:space-between;-webkit-overflow-scrolling:touch}.object-controls.is-adjusting-control{overflow-x:hidden;scroll-snap-type:none}.object-controls>*{scroll-snap-align:center;flex:0 0 auto}}@media screen and (max-width: 600px){.object-controls{gap:var(--space-2);padding:2rem 1rem}}.object-controller{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);width:158px}.object-controller:hover{box-shadow:var(--shadow-hover),var(--shadow-inset)}.object-controller>svg{width:84px;height:84px;margin-top:calc(-1 * var(--space-2))}@media screen and (max-width: 1023px){.object-controller:hover{box-shadow:var(--shadow-rest),var(--shadow-inset)}}.color-picker{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);transition:opacity var(--t-med);padding:var(--space-1) 0}.cp-wheel{position:relative;width:124px;height:124px;border-radius:50%;cursor:crosshair;background:conic-gradient(from 0deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);box-shadow:0 2px 12px #28324638,var(--shadow-inset);touch-action:none}.cp-wheel-sat{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at center,gray,#80808000 70%);pointer-events:none}.cp-wheel:focus-visible{outline:none;box-shadow:var(--focus-ring),0 2px 12px #28324638}.cp-thumb{position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 5px #00000073;transform:translate(-50%,-50%);pointer-events:none}.cp-track-row{width:124px;display:flex}.cp-track{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:12px;padding:0;border-radius:var(--radius-pill);cursor:pointer;background:linear-gradient(to right,var(--stops));box-shadow:inset 0 0 0 1px #0000001f}.cp-track-a{background:linear-gradient(to right,var(--stops)),repeating-conic-gradient(#d6d6d6,#d6d6d6 25%,#fff 0%,#fff 50%) 0 / 10px 10px}.cp-track:focus{outline:none}.cp-track::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:18px;width:18px;border-radius:50%;background:#fff;border:2px solid rgba(40,50,70,.55);box-shadow:0 1px 4px #28324659;cursor:ew-resize;transition:transform var(--t-fast)}.cp-track::-moz-range-thumb{height:18px;width:18px;border-radius:50%;background:#fff;border:2px solid rgba(40,50,70,.55);box-shadow:0 1px 4px #28324659;cursor:ew-resize}.cp-track:hover::-webkit-slider-thumb{transform:scale(1.12)}.cp-track:hover::-moz-range-thumb{transform:scale(1.12)}.cp-track:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring),0 1px 4px #28324659}.cp-track:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring),0 1px 4px #28324659}.slider-container{width:100%;padding:var(--space-1) 0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--space-2)}.slider-container img{width:1.6rem;height:1.6rem;opacity:.6;flex-shrink:0;transition:opacity var(--t-fast)}.object-controller .slider-container img{width:16px;height:16px}.slider-container:hover img{opacity:.9}.slider-container label{flex:1;display:flex}.slider-container .input-container{display:flex;width:100%}.slider-container input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:8px 0;background:transparent;cursor:pointer;touch-action:none}.slider-container input[type=range]:focus{outline:none}.slider-container input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--accent) var(--fill, 0%),var(--track) var(--fill, 0%))}.slider-container input[type=range]::-moz-range-track{height:4px;border-radius:var(--radius-pill);background:var(--track)}.slider-container input[type=range]::-moz-range-progress{height:4px;border-radius:var(--radius-pill);background:var(--accent)}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-6px;height:16px;width:16px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px #28324659;cursor:ew-resize;transition:transform var(--t-fast),box-shadow var(--t-fast)}.slider-container input[type=range]::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px #28324659;cursor:ew-resize;transition:transform var(--t-fast)}.slider-container input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}.slider-container input[type=range]:hover::-moz-range-thumb{transform:scale(1.15)}.slider-container input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}.slider-container input[type=range]:active::-moz-range-thumb{transform:scale(1.25)}.slider-container input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--focus-ring),0 1px 4px #28324659}.slider-container input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--focus-ring),0 1px 4px #28324659}@media screen and (max-width: 1023px){.slider-container{gap:var(--space-3)}.slider-container input[type=range]::-webkit-slider-thumb{margin-top:-8px;height:20px;width:20px}.slider-container input[type=range]::-moz-range-thumb{height:20px;width:20px}}label>span{display:grid;grid-template-columns:repeat(3,10rem);font-variant-numeric:tabular-nums}.bottom-controls-primary,.bottom-controls-secondary{display:flex;align-items:center;min-width:0}.bottom-controls-primary{flex:1 1 auto}.bottom-controls-secondary{justify-content:space-between}.sliders-container{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-3);min-width:280px;flex:1 1 auto}.sliders-container>div:nth-child(2){flex:0 1 auto;align-self:center;display:flex}.knobs-container{align-self:center;display:flex;justify-content:flex-start;min-width:0}.knobs-container>div{display:flex;flex-direction:row;justify-content:center;align-items:stretch;gap:var(--space-3)}.buttons-container{align-self:center;display:flex;justify-content:flex-end;flex:0 0 auto}.buttons-container>div{display:flex;justify-content:space-evenly;align-items:center;gap:var(--space-2);padding:var(--space-2)}.global-controller{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.global-controller:hover{box-shadow:var(--shadow-hover),var(--shadow-inset)}.sliders-container>div>.global-controller{gap:0}.input-container{display:flex;justify-content:center}.petal-representation-1,.petal-representation-2,.petal-representation-3,.petal-representation-4{animation:floatAnimation 9s ease-in-out infinite}.petal-representation-1{animation-delay:-3s}.petal-representation-2{animation-delay:-6s}.petal-representation-3{animation-delay:-5s}.petal-representation-4{animation-delay:-8s}@keyframes floatAnimation{0%,to{transform:translateY(-5px) translateZ(0)}50%{transform:translateY(4px) translateZ(0)}}.t-animate{animation:rotate 6s linear infinite}@keyframes rotate{0%{transform:rotate(0) translateZ(0)}to{transform:rotate(360deg) translateZ(0)}}.panel--layers_child{display:flex;flex:1 1 auto}.panel--layers_child div{flex:1 1 auto}@media screen and (max-width: 1023px){.bottom-controls-primary,.bottom-controls-secondary{width:100%;max-width:520px;flex:none;justify-content:center}.bottom-controls-secondary{flex-direction:column;gap:var(--space-3)}.sliders-container,.knobs-container,.buttons-container{align-self:auto;width:100%;max-width:520px;flex:none;margin-left:0;display:flex;justify-content:center;align-items:center}.buttons-container>div{width:100%;margin:0 1rem}.knobs-container>div{justify-content:space-between;gap:var(--space-3);width:100%;padding:0 1rem}.sliders-container>div:nth-child(2){align-self:auto;width:100%}.panel--layers_child{display:flex;flex:1 1 auto;padding:0 1rem}.panel--layers_child div{flex:1 1 auto}.global-controller:hover{transform:none;box-shadow:var(--shadow-rest),var(--shadow-inset)}.sliders-container{gap:0;min-width:0}}@media screen and (max-width: 600px){.knobs-container>div{justify-content:space-between;gap:var(--space-2)}.buttons-container>div{width:100%;justify-content:space-evenly;padding:var(--space-3);margin:0 1rem}.global-controller{padding:var(--space-3)}}.checkbox-container{display:flex;flex-direction:column;gap:var(--space-2);justify-items:center;align-items:center}.icons-container{display:flex;flex-direction:row;gap:var(--space-3);justify-content:center;align-items:center}.icons-container img{width:1.6rem;height:1.6rem;transition:opacity var(--t-med),transform var(--t-med)}.icons-container [class^=t-],.is-checked .icons-container [class^=f-]{opacity:.28}.is-checked .icons-container [class^=t-]{opacity:1}.knob-container label{display:inline-flex;cursor:pointer;border-radius:50%;transition:transform var(--t-fast)}.knob-container label:hover{transform:scale(1.08)}.knob-container label:active{transform:scale(.96)}.checkbox-knob{width:2rem;height:2rem}.knob-container label:focus-within{outline:none;box-shadow:var(--focus-ring)}.button{border:1px solid transparent;border-radius:var(--radius-md);padding:var(--space-3);background-color:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--t-fast),background-color var(--t-fast),transform var(--t-fast)}.button img{width:1.8rem;height:1.8rem;display:block;will-change:transform}.button:hover{border-color:var(--glass-border);background-color:var(--glass-bg-strong)}.button:hover img{scale:1.06}.button:active{transform:translateY(0) scale(.96)}.button:focus-visible{outline:none;box-shadow:var(--focus-ring)}@media screen and (max-width: 1023px){.button{border-color:var(--glass-border);border-radius:var(--radius-md);flex:1}}.cloud-shader{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100vh;z-index:-1;display:block}.cloud-shader--fallback{background:radial-gradient(120% 90% at 25% 15%,#fff4e0f2,#e1ebf500 55%),radial-gradient(90% 70% at 75% 85%,#fffc,#dce6f200 55%),linear-gradient(180deg,#cfe0f0,#9fb8d4)}[data-theme=dark] .cloud-shader--fallback{background:radial-gradient(120% 90% at 25% 15%,#343a4ead,#12162200 60%),linear-gradient(180deg,#171c2a,#0d1018)}:root{font-family:Inter,Avenir,Helvetica,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color-scheme:light dark;color:#2d2d2d;background-color:#eff8f8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--radius-sm: 12px;--radius-md: 14px;--radius-lg: 24px;--radius-pill: 999px;--glass-bg: rgba(255, 255, 255, .42);--glass-bg-strong: rgba(255, 255, 255, .62);--glass-border: rgba(255, 255, 255, .75);--glass-blur: 18px;--shadow-rest: 0 4px 22px rgba(40, 50, 70, .1), 0 1px 2px rgba(40, 50, 70, .06);--shadow-hover: 0 10px 34px rgba(40, 50, 70, .16), 0 2px 5px rgba(40, 50, 70, .08);--shadow-inset: inset 0 1px 1px rgba(255, 255, 255, .7);--ink: #2d2d2d;--ink-soft: rgba(45, 45, 45, .55);--track: rgba(45, 45, 45, .22);--focus-ring: 0 0 0 3px rgba(45, 45, 45, .22);--t-fast: .15s ease;--t-med: .3s ease}[data-theme=dark]{color:#f0f0f0;--glass-bg: rgba(255, 255, 255, .12);--glass-bg-strong: rgba(255, 255, 255, .2);--glass-border: rgba(255, 255, 255, .28);--shadow-rest: 0 4px 22px rgba(0, 0, 0, .3);--shadow-hover: 0 10px 34px rgba(0, 0, 0, .42);--shadow-inset: inset 0 1px 1px rgba(255, 255, 255, .18);--ink: #f0f0f0;--ink-soft: rgba(255, 255, 255, .6);--track: rgba(255, 255, 255, .3);--focus-ring: 0 0 0 3px rgba(255, 255, 255, .35)}a{font-weight:500;color:#2d2d2d;text-decoration:inherit;cursor:pointer}a:hover{color:#2d2d2d}html,body{height:100%}body{margin:0;display:block;min-width:320px;min-height:100vh;overflow:hidden}@media screen and (max-width: 1023px){body{overflow:auto;scrollbar-width:none}body::-webkit-scrollbar{display:none}}.hidden{display:none}.panel{background-color:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-rest),var(--shadow-inset);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));transition:background-color var(--t-med),box-shadow var(--t-med),border-color var(--t-med),transform var(--t-fast)}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 1px);transform:translate(-50%) translateY(3px);padding:.3rem .55rem;font-size:.7rem;line-height:1;white-space:nowrap;color:#fff;background:#1e2026eb;border-radius:var(--radius-sm);box-shadow:0 4px 14px #00000038;opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast);z-index:1000}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after,[data-tooltip]:focus-within:after{opacity:1;transform:translate(-50%) translateY(0)}[data-tooltip-placement=bottom]:after{top:calc(100% + .45rem);bottom:auto;transform:translate(-50%) translateY(-3px)}[data-tooltip-placement=bottom]:hover:after,[data-tooltip-placement=bottom]:focus-visible:after,[data-tooltip-placement=bottom]:focus-within:after{transform:translate(-50%) translateY(0)}[data-tooltip-align=right]:after{right:0;left:auto;transform:translateY(3px)}[data-tooltip-align=left]:after{left:0;right:auto;transform:translateY(3px)}[data-tooltip-placement=bottom][data-tooltip-align=right]:after{transform:translateY(-3px)}[data-tooltip-placement=bottom][data-tooltip-align=left]:after{transform:translateY(-3px)}[data-tooltip-align=right]:hover:after,[data-tooltip-align=right]:focus-visible:after,[data-tooltip-align=right]:focus-within:after{transform:translateY(0)}[data-tooltip-align=left]:hover:after,[data-tooltip-align=left]:focus-visible:after,[data-tooltip-align=left]:focus-within:after{transform:translateY(0)}@media (hover: none){[data-tooltip]:after{display:none}}[data-theme=dark] .slider-container img,[data-theme=dark] .icons-container img,[data-theme=dark] .checkbox-knob,[data-theme=dark] .button img{filter:invert(1) hue-rotate(180deg) brightness(1.18) contrast(1.05)}@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
