:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#111;color:#eee}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #333}a{color:inherit;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:1px}button{font:inherit;color:inherit;background:#222;border:1px solid #444;border-radius:5px;padding:9px 14px;cursor:pointer}button:hover{background:#333}main{max-width:1440px;margin:auto;padding:24px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}h1{font-size:20px;margin:0}.heading span{font-size:11px;letter-spacing:2px;color:#aaa}.backdrop{aspect-ratio:2/1;background:#000;outline:1px solid #555;display:flex;align-items:center;justify-content:center;overflow:hidden}.backdrop img{display:block;width:100%;height:auto;flex:none}section{max-width:640px;margin:28px auto 0}.control{display:flex;align-items:center;justify-content:space-between;font-size:15px}input[type=range]{width:100%;height:44px;margin:8px 0;accent-color:#f71a25;cursor:pointer}#status{text-align:center;font-size:13px;min-height:16px;color:#aaa}@media(max-width:600px){header{padding:14px 16px}main{padding:20px 16px}h1{font-size:18px}}

output{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}#placement{margin:0;color:#aaa;font-size:13px;text-align:center}input[type=range]::-webkit-slider-thumb{min-width:26px;min-height:26px}input[type=range]::-moz-range-thumb{width:26px;height:26px}