:root{font-family:Arial,Helvetica,sans-serif;color:#233d47;background:#edf0ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,canvas:focus-visible,.file-button:focus-within{outline:3px solid #308ca7;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 #c6d1d1}header a{color:inherit;text-decoration:none;font-weight:700}header a span{color:#7b929b;margin-left:20px}main{padding:0 4vw;max-width:1600px;margin:auto}.intro{display:flex;justify-content:space-between;align-items:center;padding:40px 0 34px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;margin:0 0 15px}h1{font-size:clamp(68px,8vw,112px);letter-spacing:-6px;line-height:.92;margin:0 0 24px;font-weight:400}h1 sup{font-size:18px;vertical-align:top;letter-spacing:0;margin-left:16px;line-height:1.5}.intro p:not(.eyebrow){font-size:14px;line-height:1.6;margin-bottom:0;color:#657e86}.readout{display:flex;flex-direction:column;text-align:right;gap:12px}.readout>span{font-size:10px;letter-spacing:1px}.readout strong{font-size:56px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-3px}.readout small{font-size:24px;color:#869ba2;letter-spacing:0}.workspace{display:grid;grid-template-columns:minmax(0,680px) 260px;justify-content:center;gap:24px;align-items:start;padding-bottom:22px}.panel-heading{display:flex;justify-content:space-between;gap:8px;font-size:10px;letter-spacing:1px;padding-bottom:12px}.tray-wrap{position:relative;aspect-ratio:4/5;border:1px solid #b8c6c8;box-shadow:0 8px 18px #1a314012;overflow:hidden;background:repeating-conic-gradient(#f4f2e9 0% 25%,#e1e6e1 0% 50%) 0/20px 20px}.tray-wrap{border:10px solid #557681;outline:1px solid #48616c;outline-offset:-1px}.tray-wrap canvas{display:block;position:absolute;inset:0;width:100%;height:100%}#stage{touch-action:none;cursor:ns-resize}#stage.rocking{cursor:grabbing}.tray-corner{position:absolute;bottom:10px;left:12px;font-size:8px;letter-spacing:1.6px;color:#315b70;pointer-events:none}.caption{font-size:10px;line-height:1.7;color:#6f868e;margin-top:12px}aside button,.file-button{display:block;width:100%;padding:12px;text-align:left;border:1px solid #b8cace;background:transparent;font-size:12px;margin-bottom:8px;color:inherit}aside button span,.file-button span{float:right;font-size:10px;color:#6f8c96}aside .primary{background:#bce0e5;border-color:#92bfc9;padding:16px 12px;font-weight:700}aside .quiet{border:0;text-align:center;color:#6f868e}.divider{height:1px;background:#c6d1d1;margin:18px 0}.slider{display:block;font-size:12px;margin-bottom:26px}.slider output{float:right;color:#617c86;font-size:11px}.slider small{display:block;margin-top:8px;font-size:10px;line-height:1.5;color:#6f868e}.slider input{display:block;width:100%;margin-top:12px;accent-color:#3f8197}.tilt-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.5px;margin-bottom:9px}.tilt-heading output{letter-spacing:0;color:#6f868e}#tilt{display:block;width:100%;height:auto;border:1px solid #b8cace;background:#e3ebe9;touch-action:none;cursor:crosshair}.note{font-size:10px;line-height:1.7;color:#6f868e}.file-button{position:relative;cursor:pointer}.file-button:has(input:disabled){opacity:.4;cursor:default}.file-button input{position:absolute;inset:0;width:100%;opacity:0;cursor:inherit}#error{min-height:20px;color:#a14730;font-size:12px;line-height:1.5}.tray-section{padding:25px 0 50px;border-top:1px solid #c6d1d1}.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:#7b929b;margin-left:10px}.tray-heading p{font-size:11px;color:#6f868e}#tray{display:flex;gap:24px;flex-wrap:wrap}.tray-empty{font-size:13px;color:#869ba2;padding:25px 0}.print{width:210px;padding:10px;background:#f7f8f2;border:1px solid #ccd6d5}.print img{width:100%;display:block;background:repeating-conic-gradient(#f4f2e9 0% 25%,#e1e6e1 0% 50%) 0/16px 16px}.print p{font-size:9px;letter-spacing:.6px}.print small{font-size:10px;color:#7b929b}.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 #ccd6d5;color:#416878}footer{border-top:1px solid #c6d1d1;border-bottom:0;color:#7b929b;font-size:9px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,580px) 235px;gap:20px}.readout strong{font-size:44px}}@media(max-width:760px){.workspace{grid-template-columns:minmax(0,540px)}aside{width:100%}#tilt{max-width:260px}}@media(max-width:580px){header>span{display:none}header a span{margin-left:10px}.intro{padding:30px 0}.eyebrow{font-size:8px;max-width:200px;line-height:1.5}h1{font-size:68px;letter-spacing:-4px}.readout{gap:8px}.readout strong{font-size:34px}.readout>span{font-size:8px;max-width:100px;line-height:1.5}.readout>span:last-child{display:none}.intro p:not(.eyebrow){font-size:12px}.workspace{grid-template-columns:1fr;gap:20px}.panel-heading{font-size:9px}aside{display:block}#tilt{max-width:none}.tray-heading{display:block}.print{width:calc(50% - 12px)}footer{font-size:7px;gap:10px;line-height:1.5}.caption{font-size:10px}}
