:root{color-scheme:light;background:#eee4d7;color:#54263a;--line:#bdaaa9;--accent:#713349;font:14px Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}header{height:102px;margin:0 4vw;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--line)}.brand{font:47px Georgia,serif;font-weight:bold;letter-spacing:-3px}header>span{font:8px/1.7 ui-monospace,monospace;letter-spacing:.15em}header button{margin-left:auto;display:flex;gap:30px;align-items:center;background:var(--accent);color:#f1e7d9;border:0;padding:17px 22px;font-size:11px}header button span{font:9px ui-monospace,monospace}main{margin:0 4vw}.heading{margin:35px 0 0;display:flex;justify-content:space-between;align-items:end;gap:25px}.eyebrow{font:9px ui-monospace,monospace;letter-spacing:.13em}h1{font:clamp(66px,8.8vw,138px)/.9 Georgia,serif;letter-spacing:-.07em;margin:15px 0 0}.heading>p{font:18px/1.45 Georgia,serif;margin:0 0 5px}#construction{font:10px/1.7 ui-monospace,monospace;letter-spacing:.1em;text-align:right;margin-bottom:5px}.fabric{height:565px;position:relative;overflow:hidden;margin:18px 0 0}canvas,#still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}canvas{opacity:0}.live canvas{opacity:1}.live #still{visibility:hidden}.warp-note,.weft-note{position:absolute;font:8px ui-monospace,monospace;letter-spacing:.14em;color:#7b626c}.warp-note{left:0;top:35%;writing-mode:vertical-rl;transform:rotate(180deg)}.weft-note{left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap}.swatch-label{position:absolute;right:0;bottom:55px;display:flex;gap:20px;align-items:start}.swatch-label>span{font:30px Georgia,serif}.swatch-label h2{font:23px Georgia,serif;margin:0 0 10px;font-weight:400}.swatch-label p{font:10px ui-monospace,monospace;max-width:160px;line-height:1.6;margin:0}fieldset{border:0;padding:0;margin:0;min-width:0}.structure-heading{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;font:8px ui-monospace,monospace;letter-spacing:.11em}.structures{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line);padding:20px 0}.structures button{background:none;border:0;border-right:1px solid var(--line);padding:13px 22px;display:flex;align-items:center;gap:25px;text-align:left}.structures button:first-child{padding-left:0}.structures button:last-child{border-right:0}.structures svg{width:48px;height:48px;flex-shrink:0}.structures button>span{font:21px Georgia,serif}.structures small{font:8px/1.6 ui-monospace,monospace;display:block;margin-top:8px;max-width:155px}.structures button[aria-pressed=true]{background:#dfc8c754}.structures button[aria-pressed=true] span{text-decoration:underline;text-underline-offset:5px}.structures button[aria-pressed=true] small{text-decoration:none}.threading{display:flex;gap:28px;align-items:center;padding:28px 0}.thread-title{margin-right:auto}.thread-title>span{font:8px ui-monospace,monospace;letter-spacing:.1em}.thread-title p{font:17px/1.4 Georgia,serif;margin:14px 0 0}.colour{display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:8px;align-items:center;font:10px ui-monospace,monospace}.colour input{width:45px;height:45px;padding:0;border:0;background:transparent;cursor:pointer;grid-column:1;grid-row:1/3}.colour input::-webkit-color-swatch-wrapper{padding:0}.colour input::-webkit-color-swatch{border:1px solid #54263a55;border-radius:50%}.colour input::-moz-color-swatch{border:1px solid #54263a55;border-radius:50%}.colour>span,.colour>output{grid-column:2}.colour output{font-size:8px}.swap{background:none;border:0;font-size:28px;padding:12px}.density{width:235px;margin-left:12px}.density>span{display:flex;justify-content:space-between;font:10px ui-monospace,monospace}.density input{height:24px;width:100%;margin:8px 0;accent-color:var(--accent);cursor:ew-resize}.density small{display:flex;justify-content:space-between;font:7px ui-monospace,monospace;letter-spacing:.15em}.status{font:10px/1.6 ui-monospace,monospace;min-height:20px;margin:0 0 23px}footer{margin:0 4vw;border-top:1px solid var(--line);padding:22px 0 30px;display:flex;justify-content:space-between;gap:20px;font:8px/1.7 ui-monospace,monospace;letter-spacing:.05em}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #b57142;outline-offset:5px}button:hover:not(:disabled){filter:brightness(.92)}@media(max-width:1000px){.structures button{gap:13px;padding:13px}.structures button>span{font-size:18px}.structures svg{width:36px;height:36px}.threading{gap:15px}.density{width:190px}.swatch-label{bottom:40px}.heading>p{font-size:16px}}@media(max-width:700px){header{height:82px;margin:0 20px;gap:10px}.brand{font-size:37px}header>span{display:none}header button{font-size:10px;padding:14px;gap:13px}header button span{font-size:8px}main{margin:0 20px}.heading{flex-wrap:wrap;margin-top:25px;gap:25px}.eyebrow{font-size:8px}.heading h1{font-size:72px}.heading>p{font-size:14px;flex:1}.heading>p br{display:none}#construction{font-size:8px;max-width:105px}.fabric{height:360px;margin-top:0}.warp-note{font-size:6px}.weft-note{display:none}.swatch-label{right:0;bottom:18px;gap:10px}.swatch-label>span{font-size:22px}.swatch-label h2{font-size:17px;margin-bottom:5px}.swatch-label p{font-size:8px;max-width:140px}.structure-heading{font-size:7px;gap:20px}.structure-heading>span:last-child{display:none}.structures{grid-template-columns:1fr 1fr;gap:12px;padding:18px 0}.structures button{border:0!important;padding:12px!important;gap:10px;min-height:84px}.structures button>span{font-size:16px}.structures small{font-size:7px;max-width:90px}.structures svg{width:28px;height:28px}.threading{flex-wrap:wrap;justify-content:space-between;gap:20px;padding:25px 0}.thread-title{width:100%}.thread-title p{font-size:15px;margin-top:10px}.thread-title p br{display:none}.colour{font-size:9px}.colour input{width:39px;height:39px}.swap{padding:10px;font-size:25px}.density{width:100%;margin-left:0;margin-top:6px}.status{font-size:9px}footer{margin:0 20px;flex-wrap:wrap;font-size:7px;gap:8px}footer>span:nth-child(2){width:100%;order:3}}