.studio-page{background:radial-gradient(60rem 30rem at 85% -10%,color-mix(in oklab,var(--candy-pink,#f9a8d4) 22%,transparent),transparent 60%),radial-gradient(50rem 26rem at -10% 20%,color-mix(in oklab,var(--primary) 16%,transparent),transparent 60%),var(--background)}.studio-stage{box-shadow:0 24px 48px -16px color-mix(in oklab,var(--primary) 35%,transparent),inset 0 0 0 1px #0000000a;isolation:isolate;border:4px solid #fff;border-radius:2.5rem;position:relative;overflow:hidden}.studio-stage:before{content:"";z-index:-2;background:linear-gradient(#7dd3fc,#bae6fd 45%,#e0f2fe);position:absolute;inset:0}.studio-stage:after{content:"";z-index:-1;background:radial-gradient(120% 100% at 50% 0,#86efac,#4ade80 60%,#22c55e);border-radius:50% 50% 0 0;height:42%;position:absolute;bottom:-14%;left:-10%;right:-10%}.studio-stage.studio-senja:before{background:linear-gradient(#c4b5fd,#f9a8d4 55%,#fde68a)}.studio-stage.studio-senja:after{background:radial-gradient(120% 100% at 50% 0,#fda4af,#fb7185 60%,#e11d48)}.studio-stage.studio-kelas:before{background:linear-gradient(#fde68a,#fef3c7 55%,#fffbeb)}.studio-stage.studio-kelas:after{background:radial-gradient(120% 100% at 50% 0,#fcd34d,#fbbf24 60%,#d97706)}.studio-stage.studio-angkasa:before{background:linear-gradient(#1e1b4b,#312e81 55%,#4c1d95)}.studio-stage.studio-angkasa:after{background:radial-gradient(120% 100% at 50% 0,#6d28d9,#5b21b6 60%,#3b0764)}.studio-cloud{z-index:-1;opacity:.92;filter:drop-shadow(0 4px 6px #0000000f);background:#fff;border-radius:999px;width:7rem;height:2.4rem;animation:14s ease-in-out infinite studio-drift;position:absolute}.studio-cloud:before,.studio-cloud:after{content:"";background:#fff;border-radius:50%;position:absolute}.studio-cloud:before{width:3rem;height:3rem;top:-1.4rem;left:1rem}.studio-cloud:after{width:2.1rem;height:2.1rem;top:-.9rem;right:1.1rem}.studio-cloud.c2{opacity:.8;width:5rem;height:1.8rem;animation-duration:19s;animation-delay:-6s}.studio-cloud.c2:before{width:2.2rem;height:2.2rem;top:-1rem;left:.7rem}.studio-cloud.c2:after{width:1.5rem;height:1.5rem;top:-.6rem;right:.8rem}.studio-stage.studio-angkasa .studio-cloud{display:none}@keyframes studio-drift{0%,to{transform:translate(0)}50%{transform:translate(1.6rem)}}.studio-sun{z-index:-1;background:radial-gradient(circle at 35% 35%,#fef9c3,#fde047 60%,#facc15);border-radius:50%;width:4.4rem;height:4.4rem;animation:6s ease-in-out infinite studio-sun;position:absolute;top:1.4rem;right:1.6rem;box-shadow:0 0 2.4rem .6rem #fde0478c}.studio-stage.studio-senja .studio-sun{background:radial-gradient(circle at 35% 35%,#fed7aa,#fb923c 60%,#ea580c);box-shadow:0 0 2.4rem .6rem #fb923c80}.studio-stage.studio-angkasa .studio-sun{background:radial-gradient(circle at 35% 35%,#f8fafc,#cbd5e1 60%,#94a3b8);box-shadow:0 0 2rem .5rem #e2e8f073}@keyframes studio-sun{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}.studio-star{z-index:-1;color:#fff;text-shadow:0 0 .5rem;animation:2.8s ease-in-out infinite studio-twinkle;position:absolute}.studio-stage:not(.studio-angkasa) .studio-star{color:#fde047}@keyframes studio-twinkle{0%,to{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}.studio-floor{z-index:-1;background:radial-gradient(closest-side,#0000002e,#0000);border-radius:50%;width:62%;height:1.6rem;position:absolute;bottom:6%;left:50%;transform:translate(-50%)}.studio-option:hover{box-shadow:0 10px 20px -8px color-mix(in oklab,var(--primary) 40%,transparent);transform:translateY(-3px)scale(1.03)}.studio-option[aria-pressed=true]{box-shadow:0 10px 22px -8px color-mix(in oklab,var(--primary) 55%,transparent)}@media(prefers-reduced-motion:reduce){.studio-cloud,.studio-sun,.studio-star{animation:none!important}}.studio-pill{box-shadow:0 4px color-mix(in oklab,var(--primary) 25%,transparent),0 8px 18px -10px color-mix(in oklab,var(--foreground) 40%,transparent);font-weight:800;transition:transform .12s,box-shadow .12s;border-radius:999px!important}.studio-pill:hover{transform:translateY(-2px)}.studio-pill:active{box-shadow:0 1px color-mix(in oklab,var(--primary) 25%,transparent);transform:translateY(3px)}.studio-pill[aria-selected=true],.studio-pill[aria-pressed=true]{background:linear-gradient(135deg,var(--primary),color-mix(in oklab,var(--primary) 60%,var(--accent)))!important;color:var(--primary-foreground)!important;border-color:#0000!important}.studio-cta{letter-spacing:.01em;box-shadow:0 6px color-mix(in oklab,var(--primary) 55%,var(--foreground)),0 14px 26px -12px var(--primary);font-weight:900;transition:transform .12s,box-shadow .12s;background:linear-gradient(135deg,var(--primary),color-mix(in oklab,var(--primary) 55%,var(--accent)))!important;color:var(--primary-foreground)!important;border-radius:1.25rem!important}.studio-cta:active{box-shadow:0 2px color-mix(in oklab,var(--primary) 55%,var(--foreground));transform:translateY(4px)}.studio-cta.alt{background:linear-gradient(135deg,var(--secondary),var(--accent))!important;color:var(--secondary-foreground)!important}.studio-panel{background:color-mix(in oklab,var(--card) 85%,transparent);border:3px solid var(--card);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 40px -24px color-mix(in oklab,var(--primary) 60%,transparent);border-radius:1.75rem;padding:1rem}.studio-option .lucide-check{background:var(--primary);color:var(--primary-foreground);border-radius:999px;padding:2px}@media(max-width:767px){.studio-sticky{z-index:20;position:sticky;top:0}.studio-sticky .studio-stage{height:300px!important}}.studio-eyebrow{color:var(--primary);letter-spacing:.14em;align-items:center;gap:.4rem;margin-bottom:.7rem;font-size:.65rem;font-weight:900;display:flex}.studio-intro h2{color:var(--foreground)}.studio-preview-label{letter-spacing:.1em;color:var(--muted-foreground);align-items:center;gap:.5rem;padding:.85rem 1rem;font-size:.65rem;font-weight:800;display:flex}.studio-preview-label>span:last-child{letter-spacing:0;color:var(--foreground);margin-left:auto;font-size:.8rem}.studio-live-dot{background:var(--primary);width:.5rem;height:.5rem;box-shadow:0 0 0 4px color-mix(in oklab,var(--primary) 12%,transparent);border-radius:50%}.studio-sticky{border:1px solid var(--border);background:var(--card);box-shadow:0 16px 40px -24px color-mix(in oklab,var(--primary) 40%,transparent);border-radius:2rem;padding:.5rem}.studio-sticky .studio-stage{border-color:var(--card);border-radius:1.5rem}.studio-preview-tools{padding:.25rem .3rem .8rem}.studio-preview-tools button{min-height:40px;box-shadow:none;background:var(--muted);border-color:#0000;font-size:.7rem}.studio-panel{border:1px solid var(--border);background:var(--card);padding:1.5rem}.studio-tabs{border-bottom:1px solid var(--border);grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;padding-bottom:1.25rem;display:grid}.studio-category{background:var(--muted);height:76px;box-shadow:0 3px 0 var(--border);flex-direction:column;gap:.45rem;font-size:.75rem;border-radius:1.1rem!important}.studio-category svg{width:23px;height:23px}.studio-thumbnail{background:color-mix(in oklab,var(--muted) 70%,var(--card));border-radius:.8rem;place-items:center;width:100%;height:100px;margin-bottom:.4rem;display:grid;overflow:hidden}.studio-thumbnail-head>div{align-self:start;width:130px;margin-top:-12px}.studio-option{border-color:var(--border);border-width:2px}.studio-option[aria-pressed=true]{border-color:var(--primary);background:color-mix(in oklab,var(--primary) 8%,var(--card))}.studio-swatch{box-shadow:0 2px 0 var(--border);transition:transform .15s}.studio-swatch[aria-pressed=true]{outline:2px solid var(--primary);outline-offset:3px;transform:scale(1.1)}.studio-actions{border-top:1px solid var(--border);grid-template-columns:1fr 1fr;gap:.75rem;padding-top:1.25rem;display:grid}.studio-actions>button{min-height:48px}.studio-actions>.studio-cta{grid-column:1/-1}.studio-cta{min-height:56px;font-size:.95rem}.studio-page button:focus-visible{outline:3px solid var(--ring);outline-offset:4px}.studio-stage.studio-taman:before{background:linear-gradient(160deg,color-mix(in oklab,var(--primary) 20%,var(--card)),var(--card))}.studio-stage.studio-taman:after{background:radial-gradient(ellipse,color-mix(in oklab,var(--primary) 50%,var(--card)),color-mix(in oklab,var(--accent) 75%,var(--card)))}.studio-stage.studio-lavender:before{background:linear-gradient(160deg,var(--accent),color-mix(in oklab,var(--primary) 22%,var(--card)))}.studio-stage.studio-lavender:after{background:linear-gradient(160deg,color-mix(in oklab,var(--primary) 40%,var(--card)),var(--accent))}@media(max-width:767px){.studio-intro{padding-top:1.25rem}.studio-intro h2{font-size:1.6rem}.studio-sticky{z-index:20;border-radius:1.4rem;padding:.25rem;top:.4rem}.studio-sticky .studio-stage{border-radius:1rem;height:235px!important}.studio-sticky .studio-stage [class*=max-w-]{max-width:158px}.studio-sticky .studio-stage [class*=pb-6]{padding-bottom:.3rem}.studio-preview-label{padding:.5rem .7rem}.studio-preview-tools{flex-wrap:nowrap;justify-content:flex-start;margin-top:.25rem;padding-bottom:.3rem;overflow-x:auto}.studio-preview-tools button{flex-shrink:0;min-height:36px}.studio-panel{border-radius:1.4rem;padding:1rem}.studio-category{height:68px}.studio-thumbnail{height:88px}.studio-actions{scroll-margin-top:340px}}@media(prefers-reduced-motion:reduce){.studio-page *,.studio-page :before,.studio-page :after{transition:none!important;animation:none!important}}.studio-option{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s,background-color .22s}.studio-option:active{transform:scale(.96)}.studio-thumbnail{background:radial-gradient(ellipse at 50% 25%,var(--card),var(--muted));box-shadow:inset 0 0 0 1px var(--border)}.studio-option[aria-pressed=true] .studio-thumbnail{background:radial-gradient(ellipse at 50% 25%,var(--card),color-mix(in oklab,var(--primary) 18%,var(--muted)))}.studio-swatch{place-items:center;transition:transform .22s,outline-offset .22s;display:grid;background-image:linear-gradient(145deg,color-mix(in oklab,var(--card) 30%,transparent),transparent)!important}.studio-swatch-check{background:var(--card);width:22px;height:22px;color:var(--foreground);border-radius:50%;padding:3px}.studio-category{position:relative}.studio-category .studio-category-check{width:12px;height:12px;position:absolute;top:7px;right:7px}.studio-progress-label{color:var(--muted-foreground);justify-content:space-between;gap:1rem;font-size:.75rem;display:flex}.studio-progress{background:var(--muted);border-radius:999px;height:5px;overflow:hidden;margin-top:.5rem!important}.studio-progress>span{border-radius:inherit;background:var(--primary);height:100%;transition:width .35s;display:block}@media(max-width:767px){.studio-sticky{z-index:auto;position:relative;top:auto}}@media(prefers-reduced-motion:reduce){.studio-page .studio-option,.studio-page .studio-swatch,.studio-page .studio-progress>span{transition:none}}.studio-full{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.studio-header{flex:none}.studio-layout{flex:1;grid-template-rows:minmax(0,46%) minmax(0,1fr);gap:.5rem;width:100%;max-width:1400px;min-height:0;margin:0 auto;padding:.5rem;display:grid}.studio-preview-pane{border:1px solid var(--border);background:var(--card);min-height:0;box-shadow:0 16px 40px -24px color-mix(in oklab,var(--primary) 40%,transparent);border-radius:1.6rem;flex-direction:column;padding:.4rem;display:flex}.studio-preview-pane .studio-preview-label{flex:none}.studio-stage-full{border-radius:1.2rem;flex:1;min-height:0;height:auto!important}.studio-avatar-holder{justify-content:center;align-items:flex-end;padding-bottom:3%;display:flex;position:absolute;inset:0}.studio-avatar-holder>*{aspect-ratio:2/3;width:auto;max-width:100%;height:96%}.studio-avatar-holder svg{width:100%;height:100%}.studio-preview-tools{scrollbar-width:none;flex:none;gap:.4rem;padding:.45rem .2rem .1rem;display:flex;overflow-x:auto}.studio-preview-tools>*{flex:none}.studio-options-pane{overscroll-behavior:contain;min-height:0;padding:.5rem .35rem 2rem;overflow-y:auto}@media(min-width:768px){.studio-layout{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:1rem;padding:1rem}.studio-options-pane{padding:.25rem .75rem 2rem}}.studio-presets{scrollbar-width:thin;grid-auto-columns:6.2rem;grid-auto-flow:column;gap:.55rem;padding-bottom:.35rem;display:grid;overflow-x:auto}.studio-preset{border:2px solid var(--border);background:var(--card);border-radius:1.1rem;flex-direction:column;align-items:center;gap:.3rem;padding:.3rem .3rem .45rem;transition:transform .15s,border-color .15s;display:flex}.studio-preset:hover{border-color:var(--primary);transform:translateY(-2px)}.studio-preset:focus-visible{outline:3px solid var(--ring);outline-offset:2px}.studio-preset-art{border-radius:.8rem;width:100%;height:5.4rem;display:block;position:relative;overflow:hidden}.studio-preset-avatar{z-index:2;justify-content:center;display:flex;position:absolute;inset:auto 0 0}.studio-cta-mini{border-radius:999px;font-weight:800}.studio-stage.studio-pantai:before{background:linear-gradient(#7dd3fc,#bae6fd 55%,#e0f2fe)}.studio-stage.studio-pantai:after{background:radial-gradient(120% 100% at 50% 0,#fde68a,#fcd34d 60%,#f59e0b)}.studio-stage.studio-hutan:before{background:linear-gradient(#bbf7d0,#86efac 55%,#4ade80)}.studio-stage.studio-hutan:after{background:radial-gradient(120% 100% at 50% 0,#22c55e,#16a34a 60%,#166534)}.studio-stage.studio-malam:before{background:linear-gradient(#0f172a,#1e3a8a 60%,#312e81)}.studio-stage.studio-malam:after{background:radial-gradient(120% 100% at 50% 0,#334155,#1e293b 60%,#0f172a)}.studio-stage.studio-malam .studio-cloud{display:none}.studio-stage.studio-malam .studio-sun{background:radial-gradient(circle at 35% 35%,#fefce8,#fde68a 60%,#facc15);box-shadow:0 0 2rem .5rem #fde04766}.studio-stage.studio-malam .studio-star{color:#fde047}.studio-full{z-index:1000;background:var(--background);position:fixed;inset:0}.studio-preset-art{height:6rem}.studio-preset-avatar{align-items:flex-start;inset:.2rem 0 0}.studio-preset-avatar>*{width:3.4rem}