.m13-studio-door,
.m13-studio-door * {
    box-sizing: border-box;
}

.m13-studio-door {
    width: 100%;
    padding: clamp(1rem, 4vw, 3rem) 1rem;
    color: var(--nsk-ink);
    font-family: var(--nsk-font-body);
}

.m13-door-card {
    width: 100%;
    max-width: 42rem;
    min-width: 0;
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 2rem);
    border: 1px solid var(--nsk-bd);
    border-radius: var(--nsk-radius-lg, 1rem);
    background: var(--nsk-surface);
    box-shadow: var(--nsk-shadow-sm);
}

.m13-door-card h1 {
    margin: 1.25rem 0 0.75rem;
    font-family: var(--nsk-font-display);
    font-size: clamp(1.6rem, 6vw, 2.25rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.m13-door-card p,
.m13-door-status {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.m13-face {
    position: relative;
    width: 100%;
    max-width: 24rem;
    min-width: 0;
    margin: 0 auto;
    isolation: isolate;
}

.m13-face .agent-hero__avatar {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 20%;
    border-radius: var(--nsk-radius-lg, 1rem);
}

.m13-face .agent-hero__alive-mount {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--nsk-radius-lg, 1rem);
}

.m13-face .agent-hero__alive-mount[hidden] {
    display: none;
}

.m13-face .agent-hero__alive-mount netshow-alive,
.m13-face .agent-hero__alive-mount iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.m13-composer {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.5rem;
    min-width: 0;
}

.m13-composer label {
    font-weight: 700;
}

.m13-composer textarea {
    width: 100%;
    min-width: 0;
    min-height: 7rem;
    padding: 0.75rem;
    border: 1px solid var(--nsk-bd-strong);
    border-radius: var(--nsk-radius-md, 0.75rem);
    background: var(--nsk-inset);
    color: var(--nsk-ink);
    font: inherit;
    resize: vertical;
}

.m13-studio-door button {
    min-height: 44px;
    padding: 0.65rem 1rem;
    border: 1px solid var(--nsk-accent);
    border-radius: var(--nsk-radius-md, 0.75rem);
    background: var(--nsk-accent);
    color: var(--nsk-on-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.m13-studio-door button:disabled,
.m13-composer textarea:disabled {
    border-color: var(--nsk-bd);
    background: var(--nsk-inset);
    color: var(--nsk-sub);
    cursor: not-allowed;
    opacity: 1;
}

.m13-studio-door :is(button, textarea, a):focus-visible {
    outline: 2px solid var(--nsk-focus);
    outline-offset: 3px;
}

.m13-studio-door a {
    color: var(--nsk-accent);
    text-underline-offset: 0.2em;
}

.m13-preview {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto 1.25rem;
    padding: 1rem;
    border: 1px solid var(--nsk-bd);
    border-radius: var(--nsk-radius-lg, 1rem);
    background: var(--nsk-surface);
}

.m13-copy-fallback {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.m13-welcome {
    white-space: pre-line;
}

.m13-door-status {
    padding-left: 1.25rem;
    color: var(--nsk-sub);
}

.m13-door-status li + li {
    margin-top: 0.4rem;
}

#m13-copy-status,
#m13-turn-status {
    min-height: 1.5em;
    margin: 0.5rem 0;
    color: var(--nsk-sub);
    overflow-wrap: anywhere;
}

@media (min-width: 640px) {
    .m13-composer button {
        justify-self: start;
        min-width: 8rem;
    }
}