:root{font-family:Arial,Helvetica,sans-serif;color:#252a22;background:#eeeee5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled,input:disabled,select:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #769a3c;outline-offset:3px}header,footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;padding:23px 4vw;border-bottom:1px solid #c8ccbf}header a{color:inherit;text-decoration:none;font-weight:700}header a span{color:#89907e;margin-left:20px}main{padding:0 4vw}.intro{display:flex;justify-content:space-between;align-items:center;padding:40px 0 34px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 15px}h1{font-size:clamp(60px,7.5vw,110px);letter-spacing:-7px;line-height:.92;margin:0 0 24px;font-weight:500}h1 span{font-size:20px;vertical-align:top;letter-spacing:0;margin-left:12px}.intro p:not(.eyebrow){font-size:14px;line-height:1.6;margin-bottom:0;color:#66705e}.readout{display:flex;flex-direction:column;text-align:right;gap:12px}.readout>span,.readout small{font-size:10px;letter-spacing:1px}.readout strong{font-size:64px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-3px}.readout strong span{font-size:24px;color:#8b9480;letter-spacing:0}.readout small{color:#8b9480}.workspace{display:grid;grid-template-columns:1fr 1fr 240px;gap:24px;align-items:start}.panel-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;padding:0 0 12px}.canvas-wrap{position:relative;background:#262b25;border:1px solid #353b30;box-shadow:0 8px 18px #1a211012}.canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none}.receiver{background:#000}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#a5af98;font-size:21px;line-height:1.8;pointer-events:none}#empty[hidden]{display:none}#empty button{pointer-events:auto;color:#d8f59b;border:0;background:none;font-size:12px;margin-top:12px}.caption{font-size:10px;color:#77806d;margin-top:12px}aside{padding:0 0 0 4px}aside button,aside select{width:100%;padding:12px;text-align:left;border:1px solid #bcc4af;background:transparent;font-size:12px;margin-bottom:8px;color:inherit}aside button span{float:right;font-size:10px;color:#79836b}.divider{height:1px;background:#c8ccbf;margin:18px 0}.geometry{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.geometry label{font-size:10px;text-transform:uppercase;color:#717b63}.geometry input{width:100%;border:1px solid #c2c9b6;padding:7px;background:#f6f6ef;margin-top:5px;font-size:12px;color:#333}.slider{display:block;font-size:12px;margin-bottom:22px}.slider output{float:right;color:#69765b;font-size:11px}.slider input{display:block;width:100%;margin-top:12px;accent-color:#52663b}aside .primary{background:#d4ee9e;border-color:#a8c471;padding:17px 12px;font-weight:700}.primary.lit{background:#a9d654;box-shadow:0 0 15px #c0e589}.latch{display:flex;gap:6px;align-items:center;font-size:11px;margin:2px 0 17px}.latch input{accent-color:#52663b}aside .quiet{border:0;text-align:center;color:#78806e}.note{font-size:10px;line-height:1.7;color:#8a937e}#error{min-height:20px;color:#983c24;font-size:13px}.tray-section{padding:25px 0 50px;border-top:1px solid #c8ccbf}.tray-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px}h2{font-size:25px;letter-spacing:-1px;font-weight:400;margin:0}h2 span{color:#8a937e;margin-left:10px}.tray-heading p{font-size:11px;color:#78816d}#tray{display:flex;gap:24px;flex-wrap:wrap}.tray-empty{font-size:13px;color:#929a87;padding:25px 0}.print{width:210px;padding:10px;background:#f9f9f2;border:1px solid #ccd0c3}.print img{width:100%;display:block}.print p{font-size:9px;letter-spacing:.6px}.print small{font-size:10px;color:#7d866f}.print>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.print button{font-size:10px;padding:7px 8px;background:transparent;border:1px solid #ccd0c3;color:#536245}footer{border-top:1px solid #c8ccbf;border-bottom:0;color:#88927c;font-size:9px}@media(min-width:1600px){main{max-width:1600px;margin:auto}}@media(max-width:1000px){.workspace{grid-template-columns:1fr 1fr;gap:18px}aside{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}aside .divider{display:none}.geometry{grid-row:span 3}.intro{padding-top:30px}.readout strong{font-size:45px}}@media(max-width:580px){header>span{display:none}h1{letter-spacing:-4px;font-size:58px}.readout>span{font-size:8px}.readout strong{font-size:36px}.readout small{display:none}.panel-heading{font-size:8px;letter-spacing:0}.workspace{gap:10px}.caption{font-size:9px;line-height:1.5}.tray-heading{display:block}.intro p:not(.eyebrow){font-size:12px}footer{font-size:7px}.print{width:calc(50% - 12px)}}@media(max-width:580px){aside{display:block;padding-top:18px}aside .divider{display:block}.geometry{grid-template-columns:1fr 1fr}.slider{margin-top:20px}}#stop-replay{align-self:flex-end;border:1px solid #bcc4af;background:transparent;padding:8px 12px;font-size:11px;color:#536245}@media(max-width:580px){.panel-heading{height:30px;align-items:flex-start}.panel-heading>span:last-child{flex-shrink:0;max-width:42%;text-align:right}}.receiver{background:repeating-conic-gradient(#f0f0e5 0% 25%,#dce0d1 0% 50%) 0/24px 24px}#stage{cursor:crosshair}#press.lit{background:#d4ee9e}.print img{background:repeating-conic-gradient(#eee 0% 25%,#ddd 0% 50%) 0/16px 16px}.print button:focus-visible{outline:3px solid #769a3c}.readout strong{font-size:54px}@media(max-width:580px){.readout strong{font-size:32px}}.receiver{background:#f6f3e8}.canvas-wrap{overflow:hidden}.readout strong{font-size:48px}@media(max-width:580px){.readout strong{font-size:30px}}@media(max-width:580px){.workspace{grid-template-columns:1fr;gap:20px}.panel-heading{font-size:10px;height:auto}.caption{font-size:10px}aside{padding-top:0}}.board{background:#e1e3d5}.board #stage{position:absolute;inset:0;width:100%;height:100%}.receiver{aspect-ratio:4/5;position:relative;background:repeating-conic-gradient(#f6f6ef 0% 25%,#e1e4d8 0% 50%) 0/24px 24px}.receiver img{width:100%;height:100%;object-fit:contain;display:block}.receiver img[hidden]{display:none}#empty{color:#747d69;text-align:center;font-size:20px}.modes{display:flex;gap:8px}.modes button[aria-pressed=true]{background:#d4ee9e;border-color:#a8c471}.import{display:block;border:1px solid #bcc4af;padding:12px;font-size:12px;margin-bottom:8px;cursor:pointer}.import span{float:right;font-size:9px;color:#79836b}.import input{display:block;width:100%;font-size:10px;margin-top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.workspace{margin-bottom:28px}#stage{cursor:grab}#stage.pin-mode{cursor:crosshair}#stage.grabbing{cursor:grabbing}