:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;color:#161616;background:#fff;font-size:16px}*{box-sizing:border-box}body{margin:0}header{border-bottom:1px solid #c8c8c8;padding:22px 4%;font-size:12px;letter-spacing:.08em;display:flex;gap:12px;flex-wrap:wrap}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}main{max-width:1400px;margin:auto;padding:24px 4%}.heading{margin-bottom:24px}h1{font-family:Georgia,serif;font-size:36px;font-weight:400;margin:0 0 8px}.heading p{margin:0;font-size:14px;color:#555}.workspace{display:grid;grid-template-columns:245px minmax(0,1fr);gap:40px;align-items:start}fieldset{border:1px solid #aaa;margin:0;padding:18px}legend{text-transform:uppercase;font-size:12px;letter-spacing:.1em;padding:0 8px}label{display:flex;justify-content:space-between;gap:8px;font-size:14px;margin:20px 0 8px}label:first-of-type{margin-top:0}label span,output{font-size:12px;color:#555}select,input[type=number]{width:100%;background:#fff;color:#111;border:1px solid #aaa;border-radius:0;padding:10px;font:inherit;font-size:14px}input[type=range]{width:100%;accent-color:#111;margin:8px 0}button{width:100%;background:#111;color:white;border:1px solid #111;padding:12px 8px;font:inherit;font-size:14px;cursor:pointer;margin-top:10px}.secondary{background:white;color:#111}.note{font-size:12px;line-height:1.7;color:#555}.drawing{min-width:0;display:flex;flex-direction:column;align-items:center}.metadata{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;min-height:15px;text-align:center}#paper-preview{width:100%;max-width:600px;border:1px solid #aaa;background:#fff;line-height:0}#paper-preview svg{width:100%;height:auto;max-height:72vh;display:block;background:white}#warning{min-height:18px;font-size:12px;line-height:1.5;max-width:620px}footer{border-top:1px solid #ccc;margin-top:30px;padding-top:16px;color:#555;font-size:12px;line-height:1.6}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #333;outline-offset:3px}@media(max-width:650px){.workspace{grid-template-columns:1fr;gap:22px}.drawing{grid-row:1}#paper-preview svg{max-height:60vh}main{padding:20px}.heading{margin-bottom:20px}}
:root .view-controls{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}.view-controls button{width:auto;margin:0;padding:8px 14px;background:#fff;color:#111}.view-controls button[aria-pressed=true]{background:#111;color:#fff}.view-controls output{min-width:44px;text-align:center}#viewport{width:100%;height:72vh;min-height:300px;max-height:850px;position:relative;overflow:hidden;background:#ededed;border:1px solid #bbb}#viewport #paper-preview{position:absolute;left:0;top:0;max-width:none;pointer-events:none}#viewport #paper-preview svg{width:100%;height:100%;max-height:none}#viewport:focus-visible{outline:2px solid #333;outline-offset:3px}
.drawing>.view-controls{margin-top:12px;margin-bottom:12px}.drawing>.metadata{margin-bottom:0}
:root{font-family:ui-monospace,"SFMono-Regular","SF Mono",Menlo,Monaco,monospace}h1,button,input,select,textarea,output{font-family:inherit}.drawing{padding-top:7px}@media(max-width:650px){.drawing{padding-top:0}}
h1{font-family:Garamond,"EB Garamond","Adobe Garamond Pro",serif}
#controls,#controls *, .view-controls,.view-controls *{font-size:12px}