:root{font-family:system-ui,sans-serif;color:#252a2d;background:transparent}*{box-sizing:border-box}body{margin:0}.rig{position:relative;width:100%;min-height:56.25vw;isolation:isolate;padding-top:1.5vw;padding-bottom:2.4vw}.card-backdrop{position:absolute;z-index:-1;inset:4vw 0 7vw 20vw;background:#eeeeee;overflow:hidden}.card-backdrop:after{content:"";position:absolute;inset:0;background:url('/assets/alistair-sketch-red.png') center/cover no-repeat;mix-blend-mode:multiply;opacity:.5}#stage{position:relative;width:52.5vw;height:52.5vw;margin-left:1vw;overflow:hidden;border-radius:50%;background:#b44038;touch-action:none}canvas{display:block;width:100%;height:100%;border-radius:50%}.rig-info{position:absolute;left:56.5%;right:4.1%;top:6.5vw}header{color:#9c3a2d}.eyebrow{font:small-caps clamp(20px,2.25vw,48px) Georgia,serif;margin:0;line-height:1.1}h1{font-family:Arial Black,system-ui,sans-serif;font-size:clamp(32px,4.45vw,100px);font-weight:1000;line-height:1.04;letter-spacing:-.065em;margin:0 0 .2vw;white-space:nowrap}.credit{font:small-caps clamp(21px,2.5vw,56px) Georgia,serif;margin:0 0 1.35vw;white-space:nowrap}.credit a{color:inherit;text-underline-offset:4px}fieldset{border:0;padding:0;margin:0;min-width:0}.control-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 .8vw;gap:8px}h2{font-size:clamp(16px,1.4vw,29px);line-height:1.15;margin:0;font-weight:850}.control-columns{display:grid;grid-template-columns:1fr 1fr;gap:1.2vw}label{display:grid;gap:.65vw;font-size:clamp(14px,1.1vw,23px);font-weight:750;margin-bottom:1.65vw}input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;min-width:0;background:#bfc3c2;border:1px solid #9b9d9b;border-bottom-color:#777;outline-offset:6px;margin:8px 0 0}input::-webkit-slider-thumb{appearance:none;width:14px;height:16px;border:2px ridge #697073;background:#252a2d;cursor:ew-resize}input::-moz-range-thumb{width:12px;height:14px;border:2px ridge #697073;background:#252a2d;border-radius:0}button{font:750 clamp(12px,.92vw,20px) system-ui;border:1px solid #42474a;border-radius:30px;padding:.6vw .9vw;color:#e0e1df;background:#252a2d;cursor:pointer}button[aria-pressed=true]{background:#9c3a2d}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:3px}.expressions h2{text-align:center;font-size:clamp(15px,1.2vw,26px);margin:-.2vw 0 .6vw}#expressions{display:flex;gap:.6vw;justify-content:space-between}.more{text-align:right;color:#9c3a2d;font-size:clamp(17px,1.8vw,38px);font-weight:1000;letter-spacing:-.03em;margin:4vw 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#status{position:absolute;top:42%;left:12%;right:12%;text-align:center;color:white}#retry{position:absolute;top:55%;left:40%}
@media(max-width:900px){.rig{padding:24px 0 40px;min-height:0}.card-backdrop{inset:24vw 0 0;background:#eeeeee}.card-backdrop:after{background-position:center bottom}#stage{width:88vw;height:88vw;margin:0 auto}.rig-info{position:relative;left:auto;right:auto;top:auto;padding:24px 6vw 0}h1{font-size:clamp(38px,8vw,70px)}.eyebrow{font-size:26px}.credit{font-size:clamp(20px,4.8vw,38px);margin-bottom:24px}.control-heading{margin-bottom:20px}h2{font-size:20px}.control-columns{gap:22px}label{font-size:15px;gap:12px;margin-bottom:30px}button{font-size:13px;padding:10px 12px}.expressions h2{font-size:17px;margin-bottom:12px}#expressions{gap:7px;flex-wrap:wrap;justify-content:flex-start}.more{font-size:22px;margin-top:34px}}

/* Rounded charcoal rails and red circular handles, with a generous drag area. */
input[type=range]{height:24px;background:transparent;border:0;border-radius:0;padding:0;margin:4px 0 0;appearance:none;-webkit-appearance:none}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:#252a2d;border:0;border-radius:999px}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border:0;border-radius:50%;background:#9c3a2d;box-shadow:none}
input[type=range]::-moz-range-track{height:6px;background:#252a2d;border:0;border-radius:999px}
input[type=range]::-moz-range-progress{height:6px;background:#252a2d;border:0;border-radius:999px}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#9c3a2d;box-shadow:none}
input[type=range]:focus-visible{outline:2px solid #9c3a2d;outline-offset:4px;border-radius:8px}

#status{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);margin:0;text-align:center}
.alistair-loader{display:block;width:126px;height:111px;background:url('/assets/cursors/loading-1.png') center/contain no-repeat;filter:grayscale(1) invert(1) contrast(100);animation:alistair-loading .36s steps(1,end) infinite}
@keyframes alistair-loading{0%,100%{background-image:url('/assets/cursors/loading-1.png')}33.333%{background-image:url('/assets/cursors/loading-2.png')}66.666%{background-image:url('/assets/cursors/loading-3.png')}}
