.ls-tool { max-width: 900px; }
.ls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ls-grid label { display: block; margin-bottom: .35rem; }
.ls-grid input { width: 100%; min-width: 0; }
.ls-place { grid-column: 1 / -1; }
.ls-place button { margin-top: .65rem; }
.ls-tool button { margin-bottom: .5rem; }
.ls-picks { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1rem; }
.ls-picks[hidden], #ls-result[hidden] { display: none; }
.ls-figure { margin: 1rem 0; border: 1px solid var(--line); background: var(--color-surface); border-radius: var(--radius-panel); padding: .6rem; }
.ls-figure svg { display: block; width: 100%; overflow: visible; }
.ls-axis { fill: var(--color-muted); font-size: 12px; }
.ls-gridline { stroke: var(--line); stroke-width: 1; }
.ls-day { fill: var(--color-link); opacity: .1; }
.ls-temperature { stroke: var(--color-link); }
.ls-brightness { stroke: var(--color-text); stroke-dasharray: 6 4; }
.ls-curve { fill: none; stroke-width: 2; pointer-events: none; }
.ls-handle { cursor: move; touch-action: none; stroke-width: 2; outline: none; }
.ls-handle-k { fill: var(--color-surface); stroke: var(--color-link); }
.ls-handle-b { fill: var(--color-surface); stroke: var(--color-text); }
.ls-handle:hover, .ls-handle:focus { stroke-width: 4; fill: var(--color-surface-raised); }
.ls-key-k { color: var(--color-link); }
.ls-key-b { color: var(--color-text); }
.ls-readout { min-height: 3em; font-variant-numeric: tabular-nums; margin-block: .5rem; }
.ls-figure figcaption { color: var(--color-muted); font-size: .875rem; }
.ls-tool textarea { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: .65rem; font: .875rem/1.55 var(--font-label); white-space: pre; overflow: auto; }
.ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 420px) { .ls-grid { gap: .75rem; } .ls-figure { padding: .25rem; } }