/* The hero canvas stays black in both appearances so each transition passes through black. */
.hero{background:#000}.hero>img{position:absolute;inset:0;display:block;object-fit:contain;transition:none}.hero>#hero-next{opacity:0}.hero>span{z-index:2}
.slides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.slides button{width:100%;min-height:44px}.slides img{display:block;object-fit:contain}
:root[data-theme=light]{color-scheme:light;--bg:#f8f7f4;--ink:#303333;--muted:#60635f;--line:#d3d1ca;--panel:#eeece6}
:root[data-theme=dark]{color-scheme:dark;--bg:#202425;--ink:#f3f1eb;--muted:#c0c1ba;--line:#505755;--panel:#2d3333}
:root[data-theme=light] header img{filter:none}:root[data-theme=dark] header img{filter:invert(1)}
.appearance-control{display:flex;gap:18px;flex-wrap:wrap;margin:30px 0}.appearance-control legend{margin-bottom:8px;font-size:14px}.appearance-control label{display:inline-flex;gap:7px;align-items:center;cursor:pointer;margin:0;min-height:44px}.appearance-control input{width:auto;accent-color:var(--ink)}