.stlg-shell{
    display:grid;
    gap:24px;
    width:100%;
    max-width:none;
    color:var(--stlg-ink);
    padding:clamp(18px,3vw,34px);
    border:1px solid var(--stlg-line);
    border-radius:32px;
    background:
        radial-gradient(circle at top left, rgba(var(--stlg-brand-rgb),.20), transparent 30%),
        radial-gradient(circle at top right, rgba(var(--stlg-brand-rgb),.14), transparent 34%),
        linear-gradient(180deg, #fffdf9 0%, #f8f4ec 100%);
    box-shadow:var(--stlg-shadow);
}
.stlg-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    align-items:end;
}
.stlg-eyebrow,
.stlg-detail-kicker,
.stlg-card-meta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--stlg-brand-strong);
}
.stlg-hero h2,
.stlg-selection-head h2,
.stlg-detail-title{
    margin:0;
    font-weight:700;
}
.stlg-hero p,
.stlg-selection-head p,
.stlg-detail-description{
    margin:0;
    color:var(--stlg-muted);
    font-size:1rem;
    line-height:1.65;
}
.stlg-hero .stlg-hero-service-note{
    font-size:.875rem;
    line-height:1.6;
}
.stlg-hero-service-note a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:.15em;
}
.stlg-shell.stlg-state-detail .stlg-hero-service-note{
    display:none;
}
.stlg-hero-copy{
    display:grid;
    gap:14px;
}
.stlg-selection,
.stlg-detail{
    padding:24px;
    border-radius:28px;
    border:1px solid var(--stlg-line);
    background:rgba(255,255,255,.7);
    backdrop-filter:blur(8px);
}
.stlg-selection{
    display:grid;
    gap:18px;
    overflow:hidden;
    transition:max-height .5s ease, opacity .35s ease, transform .35s ease, padding .35s ease, margin .35s ease, border-width .35s ease;
}
.stlg-selection-head{
    display:grid;
    gap:6px;
}
.stlg-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:18px;
}
.stlg-card{
    appearance:none;
    display:grid;
    gap:16px;
    text-align:left;
    color:var(--stlg-ink);
    padding:16px;
    border-radius:22px;
    border:1px solid rgba(31,41,51,.1);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,242,233,.96));
    box-shadow:0 16px 34px rgba(31,41,51,.08);
    cursor:pointer;
    transition:transform .32s ease, box-shadow .32s ease, border-color .32s ease, opacity .32s ease;
}
.stlg-card:hover,
.stlg-card:focus-visible{
    transform:translateY(-4px);
    box-shadow:0 24px 44px rgba(31,41,51,.14);
    border-color:rgba(var(--stlg-brand-hover-rgb),.40);
    background:var(--stlg-brand-hover);
    outline:none;
}
.stlg-card.is-active{
    border-color:rgba(var(--stlg-brand-rgb),.55);
    box-shadow:0 28px 48px rgba(var(--stlg-brand-rgb),.18);
}
.stlg-card-media{
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:18px;
    background:linear-gradient(135deg, rgba(var(--stlg-brand-rgb),.14), rgba(var(--stlg-brand-rgb),.24));
}
.stlg-card-media img,
.stlg-detail-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.stlg-card-placeholder,
.stlg-detail-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-size:2rem;
    font-weight:700;
    color:var(--stlg-brand-strong);
}
.stlg-card-body{
    display:grid;
    gap:8px;
}
.stlg-card-body,
.stlg-card-body span,
.stlg-card-body strong{
    color:inherit;
}
.stlg-card-body strong{
    font-size:1.2rem;
    color:var(--stlg-ink);
}
.stlg-card-body .stlg-card-meta{
    color:var(--stlg-brand-strong);
}
.stlg-card-body span:last-child{
    color:var(--stlg-muted);
    line-height:1.55;
}
.stlg-card:hover strong,
.stlg-card:focus-visible strong,
.stlg-card.is-active strong{
    color:#111;
}
.stlg-card:hover .stlg-card-meta,
.stlg-card:focus-visible .stlg-card-meta{
    color:#111;
}
.stlg-card:hover span:last-child,
.stlg-card:focus-visible span:last-child{
    color:#fff;
}
.stlg-detail{
    display:grid;
    gap:22px;
    opacity:0;
    max-height:0;
    overflow:hidden;
    padding-top:0;
    padding-bottom:0;
    transform:translateY(18px);
    transition:max-height .5s ease, opacity .35s ease, transform .35s ease, padding .35s ease;
}
.stlg-shell.stlg-state-detail .stlg-detail{
    opacity:1;
    max-height:20000px;
    padding-top:24px;
    padding-bottom:24px;
    transform:translateY(0);
}
.stlg-shell.stlg-state-detail .stlg-selection{
    opacity:0;
    max-height:0;
    padding-top:0;
    padding-bottom:0;
    margin:0;
    border-width:0;
    transform:translateY(-18px);
    pointer-events:none;
}
.stlg-detail-header{
    display:grid;
    gap:18px;
}
.stlg-back-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    appearance:none;
    justify-self:start;
    border:1px solid var(--stlg-brand);
    border-radius:999px;
    padding:10px 16px;
    background:#fff;
    color:#111;
    font-weight:700;
    cursor:pointer;
}
.stlg-back-button:hover,
.stlg-back-button:focus-visible{
    background:var(--stlg-brand-hover) !important;
    border-color:var(--stlg-brand-hover) !important;
    color:#111 !important;
    outline:none;
    box-shadow:0 0 0 3px rgba(var(--stlg-brand-hover-rgb),.14);
}
.stlg-detail-intro{
    display:grid;
    grid-template-columns:minmax(220px,320px) minmax(0,1fr);
    gap:20px;
    align-items:center;
}
.stlg-detail-media{
    min-height:190px;
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(135deg, rgba(var(--stlg-brand-rgb),.14), rgba(var(--stlg-brand-rgb),.24));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
    position:relative;
}
.stlg-detail-media.is-interactive{
    cursor:grab;
}
.stlg-detail-media.is-dragging{
    cursor:grabbing;
}
.stlg-detail-media canvas{
    width:100% !important;
    height:100% !important;
    display:block;
}
.stlg-detail-copy{
    display:grid;
    gap:10px;
}
.stlg-panel-stack{
    display:grid;
}
.stlg-shape{
    display:none;
    gap:14px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    padding:22px;
    border-radius:24px;
    border:1px solid rgba(31,41,51,.08);
    background:var(--stlg-panel-strong);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.stlg-shape.is-active{
    display:grid;
    animation:stlg-fade-up .35s ease;
}
.stlg-field{
    min-width:0;
}
.stlg-field--sketch{
    grid-column:1 / -1;
}
.stlg-field label{
    display:grid;
    gap:8px;
    color:var(--stlg-ink);
    font-weight:600;
}
.stlg-field label span{
    font-size:.95rem;
}
.stlg-field input[type="number"],
.stlg-field input[type="text"],
.stlg-field input[type="url"],
.stlg-field input[type="file"],
.stlg-field select,
.stlg-field textarea{
    width:100%;
    min-height:48px;
    padding:12px 14px;
    border:1px solid rgba(31,41,51,.14);
    border-radius:16px;
    background:#fff;
    box-shadow:inset 0 1px 2px rgba(31,41,51,.04);
}
.stlg-field input:focus,
.stlg-field select:focus,
.stlg-field textarea:focus{
    outline:none;
    border-color:rgba(var(--stlg-brand-rgb),.5);
    box-shadow:0 0 0 4px rgba(var(--stlg-brand-rgb),.12);
}
.stlg-field input[type="checkbox"]{
    width:20px;
    height:20px;
}
.stlg-sketch-card{
    display:grid;
    gap:16px;
    padding:18px;
    border:1px solid rgba(31,41,51,.1);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,241,232,.88));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.stlg-sketch-head{
    display:grid;
    gap:6px;
}
.stlg-sketch-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
}
.stlg-sketch-visual{
    display:grid;
    gap:12px;
    min-width:0;
}
.stlg-sketch-topbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-end;
}
.stlg-sketch-topbar .stlg-field{
    flex:1 1 120px;
    max-width:160px;
    min-width:110px;
}
.stlg-sketch-topbar .stlg-field label{
    gap:6px;
}
.stlg-sketch-topbar .stlg-field label span{
    display:block;
    font-size:12px;
    font-weight:700;
    color:var(--stlg-muted);
}
.stlg-sketch-topbar .stlg-field input{
    min-height:42px;
    text-align:center;
}
.stlg-sketch-stage{
    position:relative;
}
.stlg-sketch-head strong{
    font-size:1rem;
}
.stlg-sketch-head span,
.stlg-sketch-summary,
.stlg-sketch-errors{
    color:var(--stlg-muted);
    line-height:1.55;
}
.stlg-sketch-canvas{
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(31,41,51,.08);
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,237,225,.94)),
        repeating-linear-gradient(0deg, rgba(31,41,51,.035) 0, rgba(31,41,51,.035) 1px, transparent 1px, transparent 22px),
        repeating-linear-gradient(90deg, rgba(31,41,51,.035) 0, rgba(31,41,51,.035) 1px, transparent 1px, transparent 22px);
}
.stlg-sketch-canvas svg{
    width:100%;
    height:auto;
    display:block;
}
.stlg-sketch-overlay{
    position:absolute;
    inset:0;
    pointer-events:none;
}
.stlg-sketch-overlay .stlg-field{
    position:absolute;
    margin:0;
    min-width:0;
    pointer-events:auto;
    z-index:2;
}
.stlg-sketch-overlay .stlg-field label{
    display:grid;
    gap:4px;
}
.stlg-sketch-overlay .stlg-field label span{
    display:none;
}
.stlg-sketch-overlay .stlg-field::before{
    display:none;
}
.stlg-sketch-overlay .stlg-field input{
    min-height:40px;
    padding:8px 10px;
    border-radius:14px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 24px rgba(31,41,51,.10);
    text-align:center;
    font-weight:700;
}
.stlg-sketch-errors{
    color:#b32d2e;
    font-size:14px;
}
.stlg-sketch-errors:empty{
    display:none;
}
.stlg-detail-actions{
    display:grid;
    gap:10px;
    justify-items:start;
}
.stlg-detail-actions-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    width:fit-content;
    max-width:100%;
}
.stlg-form .stlg-detail-actions-row .stlg-preview-trigger.button,
.stlg-form .stlg-detail-actions-row .stlg-back-button.button,
.stlg-form .stlg-detail-actions-row .stlg-download-trigger.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    appearance:none;
    opacity:1;
    visibility:visible;
    min-height:52px;
    padding:0 22px;
    border-radius:999px;
    border:1px solid var(--stlg-brand) !important;
    background-color:#fff !important;
    background-image:none !important;
    color:#111 !important;
    text-shadow:none !important;
    box-shadow:0 10px 22px rgba(31,41,51,.06);
}
.stlg-form .stlg-detail-actions-row .stlg-preview-trigger.button:hover,
.stlg-form .stlg-detail-actions-row .stlg-preview-trigger.button:focus-visible,
.stlg-form .stlg-detail-actions-row .stlg-back-button.button:hover,
.stlg-form .stlg-detail-actions-row .stlg-back-button.button:focus-visible,
.stlg-form .stlg-detail-actions-row .stlg-download-trigger.button:hover,
.stlg-form .stlg-detail-actions-row .stlg-download-trigger.button:focus-visible{
    background-color:var(--stlg-brand-hover) !important;
    background-image:none !important;
    border-color:var(--stlg-brand-hover) !important;
    color:#111 !important;
    outline:none;
    box-shadow:0 0 0 3px rgba(var(--stlg-brand-hover-rgb),.14);
}
.stlg-form .stlg-detail-actions-row .stlg-submit.button.button-primary{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    appearance:none;
    opacity:1;
    visibility:visible;
    gap:8px;
    min-height:52px;
    padding:0 24px;
    border:1px solid var(--stlg-brand) !important;
    border-radius:999px;
    background-color:var(--stlg-brand) !important;
    background:linear-gradient(135deg, var(--stlg-brand), var(--stlg-brand-strong)) !important;
    color:#fff !important;
    text-shadow:none !important;
    box-shadow:0 18px 30px rgba(var(--stlg-brand-rgb),.24);
}
.stlg-form .stlg-detail-actions-row .stlg-submit.button.button-primary:hover,
.stlg-form .stlg-detail-actions-row .stlg-submit.button.button-primary:focus-visible{
    border-color:var(--stlg-brand-hover) !important;
    background-color:var(--stlg-brand-hover) !important;
    background:linear-gradient(135deg, var(--stlg-brand-hover), var(--stlg-brand-hover)) !important;
    color:#fff !important;
    box-shadow:0 18px 30px rgba(var(--stlg-brand-hover-rgb),.28);
    outline:none;
}
.stlg-spinner{
    width:16px;
    height:16px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:#ffffff;
    border-radius:50%;
    animation:stlg-spin .8s linear infinite;
    display:none;
}
.stlg-processing-note{
    max-width:62ch;
    color:var(--stlg-muted);
}
.stlg-preview-note{
    max-width:62ch;
    color:var(--stlg-muted);
    font-size:14px;
    line-height:1.6;
}
.stlg-preview-note.is-error{
    color:#b32d2e;
}
.stlg-tv-box{
    grid-column:1 / -1;
    border:1px solid #dcdcde;
    border-radius:18px;
    padding:16px;
    background:#fff;
}
.stlg-tv-files{ display:grid; gap:8px; margin-top:12px; }
.stlg-tv-files label{ display:flex; gap:8px; align-items:center; }
.stlg-tv-status{ margin-top:8px; font-size:13px; opacity:.85; }
.stlg-tv-error{ margin-top:8px; font-size:13px; color:#b32d2e; }
.stlg-queue-panel{
    margin-top:10px;
    padding:14px 16px;
    border:1px solid rgba(var(--stlg-brand-rgb), .2);
    background:rgba(var(--stlg-brand-rgb), .06);
    border-radius:18px;
    display:grid;
    gap:10px;
    width:fit-content;
    max-width:100%;
    min-width:min(100%, 540px);
}
.stlg-queue-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.stlg-queue-copy{
    display:grid;
    gap:4px;
}
.stlg-queue-status-text,
.stlg-queue-meta{
    font-size:14px;
    color:var(--stlg-muted);
}
.stlg-queue-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.stlg-queue-progress{
    position:relative;
    height:10px;
    border-radius:999px;
    background:rgba(var(--stlg-brand-rgb), .12);
    overflow:hidden;
}
.stlg-queue-progress-bar{
    display:block;
    height:100%;
    width:12%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--stlg-brand), var(--stlg-brand-strong));
    transition:width .35s ease;
}
.stlg-queue-cancel{
    width:34px;
    height:34px;
    min-width:34px;
    border:none;
    border-radius:999px;
    background:#cf2e2e;
    color:#fff;
    font-size:18px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.stlg-queue-cancel[hidden]{
    display:none;
}
@keyframes stlg-spin{ to{ transform:rotate(360deg);} }
@keyframes stlg-fade-up{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}
@media (max-width: 820px){
    .stlg-hero,
    .stlg-detail-intro{
        grid-template-columns:1fr;
    }
    .stlg-detail-actions-row{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }
    .stlg-preview-trigger,
    .stlg-back-button,
    .stlg-submit,
    .stlg-download-trigger{
        width:100%;
    }
    .stlg-queue-panel{
        width:100%;
        min-width:0;
    }
}