#studio-demo {
    background: linear-gradient(140deg, rgba(237, 248, 255, .88), rgba(240, 234, 255, .77));
}

#studio-demo [hidden] { display: none; }
.studio-demo-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.studio-demo-steps li {
    padding: .5rem .75rem;
    border-radius: 2rem;
    background: #eef2ff;
    color: var(--studio-muted);
    font-size: .85rem;
    font-weight: 650;
}
.studio-demo-steps [aria-current="step"] { background: #dce8ff; color: var(--studio-blue); }
.studio-demo-form {
    padding: clamp(.9rem, 3vw, 1.8rem);
    border: 1px solid #fff;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .72);
}
.studio-demo-form h3 { font-size: clamp(1.35rem, 3vw, 2rem); }
.studio-demo-upload, .studio-demo-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.studio-demo-drop {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .45rem;
    padding: 1.05rem .55rem;
    border: 1px dashed #87a5e5;
    border-radius: 1rem;
    background: #f4f7ff;
    text-align: center;
    cursor: pointer;
}
.studio-demo-drop > span { color: var(--studio-muted); font-size: .84rem; }
#studio-demo .studio-demo-drop > svg { width: 1.75rem; height: 1.75rem; color: var(--studio-blue); }
.studio-demo-drop input, .studio-demo-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
}
.studio-demo-drop:focus-within, .studio-demo-options input:focus-visible + span { outline: 3px solid var(--studio-blue); outline-offset: 3px; }
.studio-demo-drop:hover, .studio-demo-options label:hover > span { background: #e9f0ff; }
.studio-demo-upload-preview { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: .85rem; }
.studio-demo-upload-preview img { border-radius: .65rem; object-fit: cover; }
.studio-demo-upload-preview > span { max-width: 100%; overflow-wrap: anywhere; }
.studio-demo-fieldset { min-width: 0; margin: 1.1rem 0 0; padding: 0; border: 0; }
.studio-demo-fieldset legend { margin-bottom: .6rem; padding: 0; font-weight: 750; }
.studio-demo-preset-groups { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 1rem; }
.studio-demo-preset-groups fieldset:first-child .studio-demo-options { grid-template-columns: repeat(2, minmax(0, 10rem)); }
.studio-demo-options { display: grid; grid-template-columns: repeat(3, minmax(0, 10rem)); gap: .6rem; }
.studio-demo-examples { grid-template-columns: repeat(2, minmax(0, 10rem)); }
.studio-demo-options label { position: relative; display: grid; cursor: pointer; }
.studio-demo-options label > span {
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: .42rem;
    border: 2px solid #e4eafa;
    border-radius: .85rem;
    background: #f7f9ff;
    color: var(--ink);
    font-size: .85rem;
    font-weight: 680;
    overflow-wrap: anywhere;
}
.studio-demo-options input:checked + span { border-color: var(--blue); background: #e8efff; }
.studio-demo-options img, .studio-demo-no-model { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: .58rem; object-fit: cover; }
.studio-demo-options .studio-demo-no-model { display: grid; place-items: center; background: #e3eafa; color: var(--studio-blue); }
.studio-demo-description { display: grid; gap: .45rem; margin-top: 1rem; }
.studio-demo-description textarea {
    width: 100%;
    padding: .75rem .9rem;
    border: 1px solid #cfdbf3;
    border-radius: .8rem;
    background: #fbfcff;
    color: inherit;
    font: inherit;
    resize: vertical;
}
.studio-demo-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.studio-demo-form button:disabled { opacity: .5; cursor: default; }
.studio-demo-form [data-demo-status] { color: var(--studio-muted); }
.studio-demo-duration { margin: .5rem 0 0; color: var(--studio-muted); font-size: .875rem; }
.studio-demo-results { grid-template-columns: repeat(2, minmax(0, 19rem)); }
.studio-demo-results figure { margin: 0; padding: 0; background: none; box-shadow: none; border: 0; }
.studio-demo-result-image {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid #dbe4fa;
    border-radius: 1rem;
    background: linear-gradient(135deg, #e4eeff, #f3edff);
    color: var(--studio-muted);
    text-align: center;
}
.studio-demo-result-image img { display: block; width: 100%; height: auto; border-radius: 0; }
.studio-demo-placeholder { display: grid; justify-items: center; gap: .75rem; }
#studio-demo .studio-demo-ring { display: none; width: clamp(2.75rem, 9vw, 5.75rem); height: auto; }
.studio-demo-results.is-loading .studio-demo-result-image:has([data-demo-wait]:not([hidden])) {
    background: linear-gradient(120deg, #e2ebff 15%, #eee8ff 40%, #f9fbff 50%, #e2ebff 65%, #eee8ff 85%);
    background-size: 250% 100%;
    animation: studio-demo-shimmer 5s ease-in-out infinite alternate;
}
#studio-demo .studio-demo-results.is-loading .studio-demo-ring { display: block; }
.studio-demo-ring circle { stroke: #d6dff5; stroke-width: 7; }
.studio-demo-ring .studio-demo-ring-fill {
    stroke: var(--studio-blue);
    stroke-linecap: butt;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: studio-demo-fill 80s linear infinite;
}
@keyframes studio-demo-fill { to { stroke-dashoffset: 0; } }
@keyframes studio-demo-shimmer { to { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
    .studio-demo-results.is-loading .studio-demo-result-image:has([data-demo-wait]:not([hidden])),
    .studio-demo-ring .studio-demo-ring-fill { animation: none; }
    .studio-demo-ring .studio-demo-ring-fill { stroke-dashoffset: 75; }
}
.studio-demo-results figcaption:has(a:not([hidden])) { margin-top: .5rem; }
.studio-demo-error { margin: .85rem 0 0; color: #9d243c; font-weight: 650; }

@media (max-width: 690px) {
    .studio-demo-preset-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 435px) {
    .studio-demo-upload { grid-template-columns: minmax(0, 1fr); }
    .studio-demo-actions .button, .studio-demo-results .button { width: 100%; }
    .studio-demo-results .button { padding-inline: .45rem; font-size: .8rem; }
}