.sandbox-article {
    max-width:none
}

.sandbox-article .article-header {
    padding:25px 0 18px
}

.sandbox-article .article-header h1 {
    margin:10px 0
}

.sandbox-intro p {
    margin:8px 0
}

.sandbox-workspace {
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:14px;
    align-items:start;
    margin:20px 0 32px
}

.sandbox-stage {
    min-width:0;
    position:sticky;
    top:12px
}

.sandbox-toolbar {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin-bottom:8px
}

.sandbox-workspace button {
    font-size:13px;
    padding:7px 12px
}

.sandbox-workspace canvas {
    width:100%;
    height:auto;
    aspect-ratio:16/9
}

.sandbox-inspector {
    /* ビューの実寸高を上限にし、低いウィンドウでは画面内にも収める。 */
    box-sizing:border-box;
    max-height:min(var(--inspector-height,540px),calc(100dvh - 24px));
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid var(--line);
    padding:0 10px;
    scrollbar-gutter:stable;
    position:sticky;
    top:12px;
    font-size:12px
}

.sandbox-panel {
    padding:8px 0;
    border-bottom:1px solid var(--line)
}

.sandbox-panel:last-child {
    border-bottom:0
}

.sandbox-panel summary {
    font-weight:650;
    font-size:13px;
    cursor:pointer;
    padding:3px 0
}

.sandbox-panel label {
    margin:9px 0
}

.sandbox-panel .check {
    display:flex;
    gap:7px;
    align-items:center
}

.sandbox-panel .parameter {
    display:grid;
    grid-template-columns:80px minmax(0,1fr) 58px;
    gap:5px;
    align-items:center
}

.sandbox-panel .parameter output {
    text-align:right;
    font-size:11px;
    font-variant-numeric:tabular-nums
}

.sandbox-panel input[type=range] {
    min-width:0;
    width:100%;
    accent-color:var(--accent)
}

.sandbox-panel select,.sandbox-panel input[type=number] {
    grid-column:2/4;
    min-width:0;
    width:100%;
    background:var(--paper);
    color:var(--ink);
    border:1px solid var(--line);
    padding:4px
}

.sandbox-camera {
    font-size:11px;
    color:var(--muted);
    margin:5px 0
}

.sandbox-status {
    font-size:12px;
    min-height:1.6em;
    margin:6px 0
}

.sandbox-help {
    font-size:11px;
    color:var(--muted);
    margin:5px 0
}

.sandbox-metrics {
    border-top:1px solid var(--line);
    font-size:12px;
    padding-top:6px
}

.sandbox-metrics>summary {
    cursor:pointer
}

.sandbox-metrics dl {
    margin:8px 0
}

.sandbox-metrics dt {
    font-size:11px
}

.sandbox-metrics dd {
    margin-bottom:5px
}

.sandbox-docs {
    margin-top:28px
}

.sandbox-workspace button:disabled {
    cursor:default
}

@media(min-width:1300px) {
    body:has(.sandbox-article) .shell {
    max-width:1560px
}

.sandbox-workspace {
    grid-template-columns:minmax(0,1fr) 330px
}


}

@media(max-width:800px) {
    .sandbox-workspace {
    grid-template-columns:1fr
}

.sandbox-stage,.sandbox-inspector {
    position:static
}

.sandbox-inspector {
    /* 縦並びではタッチ操作用の高さを確保し、画面の半分以上を占有しない。 */
    max-height:min(340px,45svh)
}

.sandbox-article .article-header h1 {
    font-size:27px
}


}