:root { font-family: system-ui, sans-serif; color: #2b3c42; background: #eef5f4; line-height: 1.6; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #225e66; } h1 { margin-bottom: .25rem; } h2 { font-size: 1.2rem; }
button, select { font: inherit; min-height: 48px; border: 2px solid #637a7c; border-radius: .65rem; background: white; color: #2b3c42; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #145a95; outline-offset: 3px; }
button:disabled { opacity: .75; cursor: default; } button[aria-pressed='true'] { background: #d6e9e0; border-width: 3px; }
.settings, .choices, .controls { display: flex; flex-wrap: wrap; gap: .5rem; } .settings label { display: flex; flex-direction: column; }
.weather { min-width: 116px; display: flex; align-items: center; gap: .4rem; } .weather svg { width: 48px; height: 48px; }
.swatch { display: inline-block; width: 22px; height: 22px; border: 1px solid #52686a; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.shared-item { display: flex; align-items: center; gap: .5rem; } .shared-item svg { width: 48px; height: 48px; display: block; }
.panel { margin: 1rem 0; padding: 1rem; border-radius: .8rem; background: #e0ece8; }
details.settings-box{margin:.5rem 0} summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:700}