:root{--ink:#1728a0;--red:#ee3b2f;--paper:#f2efdF;--line:#b8b69e;--black:#171817;font-family:Georgia,"Songti SC","SimSun",serif;color:var(--black);background:#dfddcf}*{box-sizing:border-box}body{margin:0;min-width:320px;background:repeating-linear-gradient(0deg,rgba(23,40,160,.025) 0,rgba(23,40,160,.025) 1px,transparent 1px,transparent 5px),var(--paper)}button,input{font:inherit}.masthead{height:132px;display:grid;grid-template-columns:150px 1fr 150px;align-items:center;margin:0 3vw;border-bottom:4px double var(--ink);color:var(--ink)}.edition,.scale{font:11px/1.6 Arial,sans-serif;letter-spacing:.12em}.edition b{color:var(--red)}.scale{text-align:right}.title{text-align:center}.title p{font-size:12px;letter-spacing:.35em;margin:0 0 8px}.title h1{font-style:italic;font-size:clamp(34px,5vw,72px);line-height:.8;margin:0;letter-spacing:-.05em}.title h1 span{font:10px Arial;vertical-align:top;margin-left:8px}main{display:grid;grid-template-columns:minmax(300px,410px) 1fr;max-width:1500px;margin:auto}.controls{padding:38px clamp(20px,3vw,46px);border-right:1px solid var(--line)}.step{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ink);padding-bottom:8px;margin:0 0 15px}.step i{width:25px;height:25px;border-radius:50%;background:var(--ink);color:#fff;text-align:center;font:italic 14px/25px Georgia}.step div{display:flex;flex:1;justify-content:space-between;align-items:baseline}.step b{color:var(--ink)}.step span{font:9px Arial;letter-spacing:.18em;color:#6e7067}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px}.input-grid.three{grid-template-columns:1fr 1fr 1fr}.input-grid label{font:10px Arial;color:#5a5b54;position:relative}.input-grid input{width:100%;height:43px;margin-top:6px;border:1px solid #8b8d82;background:rgba(255,255,255,.45);padding:0 32px 0 8px;color:var(--ink);font:bold 16px Arial;border-radius:0}.input-grid input:focus,.save-form input:focus{outline:2px solid var(--red);outline-offset:1px}.input-grid em{position:absolute;right:7px;bottom:14px;font:9px Arial;color:#777970}.patterns{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:25px}.patterns input{position:absolute;opacity:0}.patterns label>span{display:flex;height:95px;border:1px solid #99998c;align-items:center;justify-content:center;flex-direction:column;cursor:pointer;background:rgba(255,255,255,.35);gap:5px}.patterns input:checked+span{border:2px solid var(--red);background:#fff8ea;color:var(--red)}.patterns b{font-size:13px}.patterns small{font:8px Arial;letter-spacing:.1em}.patterns i{width:42px;height:26px;border:1px solid currentColor;display:block;background:repeating-linear-gradient(90deg,transparent 0 12px,currentColor 12px 13px),repeating-linear-gradient(0deg,transparent 0 11px,currentColor 11px 12px);opacity:.75}.patterns .center-icon{background:linear-gradient(90deg,transparent 48%,currentColor 48% 52%,transparent 52%),linear-gradient(0deg,transparent 47%,currentColor 47% 53%,transparent 53%)}.patterns .stagger-icon{background:repeating-linear-gradient(0deg,transparent 0 11px,currentColor 11px 12px),linear-gradient(90deg,currentColor 1px,transparent 1px);position:relative}.patterns .stagger-icon:after{content:"";position:absolute;left:20px;top:12px;bottom:0;border-left:1px solid currentColor}.origin-box{border:1px dashed var(--ink);padding:16px;margin-top:12px;background:rgba(23,40,160,.04)}.origin-box b{color:var(--ink)}.origin-box p{font-size:12px;line-height:1.6;margin:7px 0 12px}.origin-box button{border:0;border-bottom:1px solid var(--red);color:var(--red);background:transparent;padding:4px 0;cursor:pointer;font-size:12px}.save-form{display:grid;grid-template-columns:1fr 94px;margin-top:25px}.save-form input{height:44px;border:1px solid var(--ink);background:white;padding:0 10px;min-width:0}.save-form button{border:0;background:var(--ink);color:white;cursor:pointer}.note{min-height:20px;color:var(--red);font-size:11px}.drawing{padding:38px clamp(18px,4vw,58px);min-width:0}.drawing-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px;color:var(--ink)}.drawing-head>div span,.drawing-head>div b{display:block}.drawing-head span{font:9px Arial;letter-spacing:.18em}.drawing-head b{font-size:20px;margin-top:5px}.drawing-head p{font:10px Arial}.drawing-head p i{width:11px;height:11px;display:inline-block;background:var(--red);margin-left:12px}.drawing-head p i:last-of-type{background:var(--ink)}.canvas-wrap{width:100%;height:min(52vw,540px);min-height:300px;border:8px solid var(--ink);position:relative;background:#fcfbf3;box-shadow:9px 9px 0 rgba(23,40,160,.16);touch-action:none}.canvas-wrap canvas{display:block;width:100%;height:100%;cursor:crosshair}.drag-tip{position:absolute;right:8px;bottom:8px;background:var(--red);color:white;padding:6px 9px;font:9px Arial;pointer-events:none}.error{color:var(--red);font-size:12px;min-height:18px}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px double var(--ink);border-bottom:1px solid var(--ink);margin-top:8px}.stats>div{padding:18px 12px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats span,.stats strong,.stats small{display:block}.stats span{font-size:12px}.stats strong{font:italic 34px Georgia;color:var(--red);margin:3px 0}.stats small{font:8px Arial;letter-spacing:.15em;color:#75776e}.cut-list,.saved-panel{margin-top:25px}.list-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:8px;color:var(--ink)}.list-head span{font-size:10px;color:#777970}.chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px}.chips span{border:1px solid #aaa99b;background:rgba(255,255,255,.4);padding:6px 8px;font:10px Arial}.chips .empty{border:0;padding-left:0;color:#797b72}.saved-list{display:grid;gap:6px;margin-top:10px}.saved-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;border-bottom:1px dotted #aaa99b;padding:8px 0}.saved-row b{color:var(--ink);font-size:13px}.saved-row small{font:9px Arial;color:#777}.saved-row button{border:0;background:transparent;color:var(--red);cursor:pointer;font-size:11px;padding:5px 8px}footer{height:55px;margin:0 3vw;border-top:4px double var(--ink);display:flex;justify-content:space-between;align-items:center;color:var(--ink);font:9px Arial;letter-spacing:.13em}@media(max-width:850px){.masthead{grid-template-columns:1fr auto;height:110px}.title{text-align:left;grid-row:1;grid-column:1}.edition{display:none}.scale{grid-column:2}.title p{letter-spacing:.15em}.title h1{font-size:44px}main{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid var(--line)}.drawing{padding-top:25px}.canvas-wrap{height:62vw;min-height:280px}}@media(max-width:540px){.masthead{margin:0 16px}.scale{display:none}.title h1{font-size:38px}.controls{padding:25px 16px}.input-grid.three{grid-template-columns:1fr 1fr}.patterns label>span{height:82px}.drawing{padding:22px 16px}.drawing-head p{display:none}.canvas-wrap{border-width:5px;height:70vw;min-height:260px}.stats{grid-template-columns:1fr 1fr}.stats>div:nth-child(2){border-right:0}.stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.list-head span{display:none}footer{margin:0 16px}footer span:last-child{display:none}}