:root{font-family:Georgia,Times New Roman,serif;color:#e9e0c8;background:#172c31;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{border:1px solid #6a7972;border-radius:4px;color:#e5ddc6;background:#21383b;padding:10px 12px;cursor:pointer;text-align:left;transition:background .2s,color .2s}button:hover{background:#405a58}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #edb268;outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}.active,.primary{background:#dca769!important;color:#193036!important;border-color:#dca769}header{padding:28px 3vw;display:flex;gap:40px;align-items:center;border-bottom:1px solid #486064}.eyebrow,h2,.small,.caption,footer,.toolbar{font-family:system-ui,sans-serif}.eyebrow{font-size:10px;letter-spacing:.3em;color:#d4aa79}h1{font-size:38px;font-weight:400;line-height:1.05;margin:10px 0}h1 em{color:#d9a36c}.intro{max-width:430px;font-size:20px;color:#ede0c5}.intro p{font-size:15px;line-height:1.5;color:#adbfba}header>button{margin-left:auto}main{display:grid;grid-template-columns:minmax(200px,240px) minmax(360px,1fr) minmax(200px,250px);gap:24px;padding:25px 3vw}aside{display:flex;flex-direction:column;gap:8px}h2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#dcac74;margin:20px 0 5px}p{line-height:1.5;margin:5px 0 12px}aside p{color:#b5c2b9;font-size:13px}nav{display:flex;flex-direction:column;gap:5px}nav button span{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px}.pairs{display:grid;grid-template-columns:1fr 1fr;gap:8px}label{display:flex;flex-direction:column;gap:5px;color:#b9c9c0;font:11px system-ui}input{width:100%;min-width:0;padding:8px;border:1px solid #536a6a;background:#12282c;color:#eddfc4;border-radius:3px;font-size:14px}.studio{min-width:0}.toolbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.toolbar button{font-size:11px;text-transform:uppercase;letter-spacing:.07em}.canvas-wrap{padding:18px;background:#294044;box-shadow:0 12px 40px #0004}.cloth{display:block;width:100%;max-height:75vh;aspect-ratio:1;background:#f0e4c7;image-rendering:pixelated;cursor:crosshair}.caption{display:flex;justify-content:space-between;font-size:10px;color:#becbc2;margin:15px 0;gap:10px}.notice{min-height:40px;font-style:italic;color:#e3b679}.small{font-size:11px;color:#9fb6af}.source{margin:10px 3vw 35px;padding:20px;border:1px solid #486064}.source p{font-size:13px;color:#b6c8bf}textarea{width:100%;min-height:180px;background:#10272b;border:1px solid #56716f;color:#c9dfd2;padding:15px;font:12px monospace;resize:vertical}footer{border-top:1px solid #486064;padding:20px 3vw;font-size:10px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}footer span:nth-child(2){max-width:540px}footer button{font-size:10px}.focus main{grid-template-columns:210px minmax(360px,1fr) 220px}.focus header .intro,.focus .source{display:none}.focus .cloth{max-height:85vh}@media(max-width:1000px){main,.focus main{grid-template-columns:190px 1fr}.right{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr)}header{gap:20px}.intro{font-size:16px}}@media(max-width:650px){header{flex-wrap:wrap}h1{font-size:32px}.intro{display:none}main,.focus main{display:flex;flex-direction:column}.studio{order:-1}.right{display:flex}.cloth{max-height:none}header>button{margin-left:0}footer{align-items:flex-start}.caption{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
