:root{font-family:system-ui,sans-serif;color:#322e3d;background:#eeebe6;color-scheme:light;--muted:#827982;--line:#d4cbd0;--purple:#5d466b;--gold:#9c783d}*{box-sizing:border-box}body{margin:0}main{max-width:1180px;margin:auto;padding:25px 42px}a{color:#695071}button,select,input{font:inherit}button,select{min-height:44px;border:1px solid #c8bdc8;background:#f7f4ee;border-radius:7px;color:#51405c;font-size:11px;padding:10px 13px;cursor:pointer}button:hover{background:#e5dce5}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #af8958;outline-offset:3px}header{display:flex;align-items:center;gap:29px;border-bottom:1px solid var(--line);padding-bottom:19px}.brand{font:34px Georgia,serif;letter-spacing:-1.5px;text-decoration:none;color:#51405c}.brand span{font-size:24px;color:var(--gold);margin-left:7px}.edition{font-size:9px;letter-spacing:2px;line-height:1.9}.edition small{font-size:10px;color:var(--muted);letter-spacing:.2px}.source{margin-left:auto;font-size:9px;text-decoration:none}.intro{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:27px 0 25px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--gold);margin:0 0 12px}h1{font:clamp(36px,4vw,53px)/1.1 Georgia,serif;letter-spacing:-2px;margin:0}.intro>p{max-width:350px;font:15px/1.6 Georgia,serif;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:23px}.frame{min-width:0;align-self:start;border:1px solid #b8abbf;border-radius:13px;overflow:hidden;background:#ddd0da;box-shadow:0 12px 30px #4231490b}.art-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:#e6dfe5;border-bottom:1px solid #cbbdcd}.art-top>span{font-size:8px;letter-spacing:1.5px;color:#6c5a74}.art-top button{font-size:9px;min-height:34px;padding:7px 11px;background:transparent}#artboard{position:relative;aspect-ratio:1.5;width:100%;overflow:hidden;touch-action:none;background:#d9c6d4}#field,#wire,#knots,#loading{position:absolute;inset:0;width:100%;height:100%;display:block}#field{touch-action:none}#wire{pointer-events:none;overflow:visible}#wire path{stroke:#ffffff83;stroke-width:1.2;fill:none;vector-effect:non-scaling-stroke}#wire .arm{stroke:#d9b67c;stroke-width:1.7}#knots{pointer-events:none}.knot,.handle{position:absolute;transform:translate(-50%,-50%);height:44px;width:44px;min-height:44px;border:0;border-radius:50%;background:transparent;padding:0;pointer-events:auto;touch-action:none;cursor:grab}.knot:active,.handle:active{transform:translate(-50%,-50%);cursor:grabbing}.knot:hover,.handle:hover{background:#fff2}.knot:before{content:'';position:absolute;inset:13px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 7px #382c5055;background:var(--knot-color)}.knot.active:before{inset:11px;border:2px solid #f0d3a0;box-shadow:0 0 0 3px #fff5,0 1px 9px #382c5077}.handle:before{content:'';position:absolute;inset:17px;background:#efd0a3;border:1px solid #6d5540;border-radius:2px}.handle{width:44px;height:44px}#artboard.no-guides #wire,#artboard.no-guides #knots{display:none}#loading{display:grid;place-items:center;background:#e8e1e6;font:21px Georgia,serif;color:#6c5a74}#loading[hidden]{display:none}.art-tools{display:flex;gap:7px;padding:13px 13px 10px;flex-wrap:wrap}.art-tools button{flex:1;white-space:nowrap}.art-tools button.primary{background:#5d466b;color:#fff;border-color:#5d466b}.art-tools button.primary:hover{background:#70517e}kbd{font-size:8px;border:1px solid #b3a2bb;border-radius:3px;padding:1px 3px;margin-left:5px}#feedback{font:12px/1.6 Georgia,serif;color:#6e5d75;background:#e7dfe5;border-top:1px solid #cdbfce;padding:13px 17px;margin:0;min-height:46px}.controls{border:1px solid var(--line);border-radius:12px;padding:20px 17px;background:#f7f4ee}.controls label{display:block;font-size:10px;margin:11px 0 8px}.controls select{width:100%;font-size:10px;background:#fffdf8}.rule{height:1px;background:#ded5db;margin:17px 0}.palette{width:100%;display:flex;gap:10px;align-items:center;margin:5px 0;background:transparent;border-color:transparent;text-align:left;padding:8px}.palette.active{border-color:#b7a2bf;background:#eee5ec}.palette i{display:block;width:43px;height:28px;border-radius:4px;border:1px solid #fff5}.palette span{font-size:10px}.color-row{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.color-row label{margin:0}.color-row input{width:48px;height:44px;border:1px solid #bba8c0;border-radius:5px;padding:4px;background:transparent;cursor:pointer}.swatches{display:flex;gap:6px;margin:10px 0}.swatch{width:calc(25% - 4.5px);min-height:33px;padding:0;position:relative;border-color:#fff8;background:var(--swatch)}.swatch:hover{background:var(--swatch);box-shadow:0 0 0 2px #9b86a3}.curl-row{display:flex;gap:6px;margin-top:13px}.curl-row button{flex:1;padding:9px;font-size:10px}.tiny{font-size:9px;line-height:1.8;color:var(--muted);margin:10px 0 0}.controls input[type=range]{width:100%;min-height:32px;accent-color:#8f719e;cursor:pointer}.controls output{float:right;color:#8b7092}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:29px 0 23px}.marks{display:grid;grid-template-columns:1fr 1fr;gap:9px}.marks span{font-size:10px;color:#9a8b9c;padding:6px 0;border-bottom:1px dotted #cfc2d1}.marks span.done{color:#6c5432;border-bottom-color:#aa8b57}.marks span.done:after{content:' ✦';color:#a17c3d}#marks{float:right;color:#84718d}#mark-note,.shelf>p:last-child{font-size:10px;color:var(--muted);margin:12px 0 0}.shelf{padding-left:15px}#shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.keepsake{min-height:81px;position:relative;padding:0;overflow:hidden;background:#e4dce4;border-style:dashed}.keepsake i{display:block;height:48px;margin:6px 6px 2px;border-radius:3px}.keepsake span{font-size:9px}.keepsake.empty{font:20px Georgia,serif;color:#b5a3bb}.keepsake.empty:hover{background:#e4dce4}details{border-top:1px solid var(--line);padding:18px 0;max-width:900px}summary{font-size:11px;cursor:pointer}details p{font-size:12px;line-height:1.8;color:var(--muted)}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:19px 0 7px;font-size:8px;letter-spacing:1px;color:var(--muted)}footer a{font-size:9px;letter-spacing:0}@media(max-width:1000px){main{padding:20px 24px}.workspace{grid-template-columns:minmax(0,1fr) 250px;gap:15px}.controls{padding:17px 14px}.intro>p{max-width:300px}.art-tools button{font-size:10px;padding:9px 8px}kbd{display:none}}@media(max-width:720px){main{padding:17px 13px}header{gap:15px;padding-bottom:15px}.brand{font-size:28px}.brand span{font-size:19px}.edition{font-size:7px;letter-spacing:1px}.edition small{display:none}.source{font-size:7px}.intro{display:block;padding:23px 0 20px}h1{font-size:43px}.intro>p{font-size:13px;margin-top:12px;max-width:100%}.workspace{display:flex;flex-direction:column;gap:15px}.frame{width:100%}#artboard{aspect-ratio:1}.art-top{padding:9px 11px}.art-top>span{font-size:7px}.art-top button{min-height:44px}.art-tools{padding:9px;gap:5px}.art-tools button{font-size:9px;padding:8px 6px;min-height:44px}#feedback{font-size:11px;padding:12px}.controls{padding:19px}.controls label{font-size:12px}.controls select{font-size:12px}.controls input[type=range]{min-height:44px}#palettes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.palette{display:flex;flex-direction:column;padding:8px 3px;margin:0}.palette span{font-size:9px}.palette i{width:100%;height:28px}.color-row label{font-size:12px}.swatch{min-height:44px}.curl-row button{font-size:12px}.tiny{font-size:10px}.bottom{grid-template-columns:1fr;gap:24px;padding-top:23px}.shelf{padding-left:0}.keepsake{min-height:90px}.marks span{font-size:10px}footer{font-size:7px}}