.sky-bench { width: 100%; max-width: 400px; margin: 0 0 .65rem; }
.sky-bench button { min-height: 44px; min-width: 44px; padding: .55rem .7rem; border: 2px solid var(--sky-ink); border-radius: 12px; background: #fff; color: var(--sky-ink); font: inherit; font-weight: 700; cursor: pointer; }
.sky-bench > button { width: 100%; background: var(--sky-gold); }
.sky-bench .sky-bench-dialog { width: 360px; max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; padding: .85rem; }
.sky-bench-dialog:not([open]) { display: none; }
.sky-bench-dialog h2 { font-size: 1.25rem; margin: 0 0 .4rem; }
.sky-bench-dialog p { font-size: .82rem; margin-bottom: .5rem; overflow-wrap: anywhere; }
.sky-bench-dialog svg { display: block; width: 100%; height: 205px; margin: .4rem 0; border: 1px solid #64748b; border-radius: 10px; background: #e0f2fe; }
.sky-bench-dialog label { display: block; font-weight: 700; font-size: .85rem; }
.sky-bench-dialog input { width: 100%; min-width: 0; min-height: 44px; accent-color: var(--sky-top); }
.sky-bench-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; margin: .4rem 0; }
.sky-bench-dialog .sky-bench-result { border-left: 4px solid var(--sky-top); background: #f1f5f9; padding: .55rem; font-weight: 700; min-height: 60px; }
.sky-bench-dialog [data-bench="close"] { width: 100%; background: var(--sky-gold); }
.sky-bench :focus-visible { outline: 3px solid #0369a1; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sky-bench * { transition: none; animation: none; } }