:root{font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;color:#342b29;background:#f1ede5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1420px;margin:auto}header{padding:35px 32px 28px;display:flex;gap:20px;align-items:center}.logo{font-size:70px;color:#af533f;line-height:1}h1,h2,p{margin:0}h1{font:500 clamp(35px,4vw,54px) Georgia,serif;letter-spacing:-1.5px}header p:last-child{font-size:14px;color:#766960;margin-top:5px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:#96705c;margin-bottom:8px}header>button{margin-left:auto}main{display:grid;grid-template-columns:440px 1fr;gap:22px;padding:0 32px}.panel{background:#fffcf5;border:1px solid #dcd4c6;border-radius:20px;padding:26px}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}h2{font:500 26px Georgia,serif}.badge{font-size:11px;border:1px solid #dfd6c8;padding:8px 12px;border-radius:20px;white-space:nowrap}button,select,input{font:inherit}button,select{border:1px solid #d7cabc;border-radius:8px;background:#fffcf5;color:inherit;min-height:44px;padding:9px 12px}button{cursor:pointer;font-size:12px;font-weight:650;transition:background .15s}button:hover{background:#f1e4d6}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c9744d;outline-offset:3px}button:disabled{opacity:.45;cursor:default}.primary{background:#9e4635;color:#fff7ed;border-color:#9e4635}.primary:hover{background:#803a2d}label{font-size:11px;color:#7b6859;display:flex;flex-direction:column;gap:7px}select{font-size:12px;background:#fffaf1;width:100%}.wide{width:100%}.hint{color:#8a786b;font-size:12px;line-height:1.7;margin:14px 0}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:15px}.tools button{padding:8px 3px;font-size:11px}.tools [aria-pressed=true]{background:#dfe7dd;border-color:#738775;color:#344936}kbd{font-size:9px;opacity:.6;margin-left:3px}#grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;background:#ded3c2;padding:6px;border-radius:10px}#grid button{min-width:0;min-height:44px;aspect-ratio:1;border:0;padding:0;font-size:25px;background:#fff8e9;color:#a34b37}#grid button[data-op="1"]{background:#e3e9df;color:#3d5749}#grid button[data-op="2"]{background:#e5dde9;color:#715878}#grid button[data-op="3"]{background:#f1d4b5;color:#9a5e28}#status{font-size:11px;min-height:36px;line-height:1.6;margin-top:12px;color:#7b6253}.actions{display:flex;gap:6px}.actions button{flex:1;padding:8px 5px}.colorshead{margin:25px 0 15px}.colors{display:grid;grid-template-columns:65px 65px 1fr;gap:12px;margin-bottom:18px}input[type=color]{height:44px;width:100%;border:1px solid #d7cabc;background:none;padding:4px;border-radius:8px}.shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.shelf button{padding:10px 4px}.preview{display:flex;flex-direction:column}.fabric{background:#ede4d5;border-radius:14px;overflow:hidden;flex:1;min-height:420px;display:flex;align-items:center;border:1px solid #ded4c3;background-image:radial-gradient(#b4a18e33 .6px,transparent .6px);background-size:5px 5px}#sim-container{height:500px;width:100%;position:relative;isolation:isolate}canvas{position:absolute;top:0;left:0;pointer-events:none}#back{z-index:0}#mid{z-index:1}#front{z-index:2}.flipped #back{z-index:2}.flipped #front{z-index:0}.flipped{transform:scaleX(-1)}.previewtools{display:flex;gap:10px;margin-top:20px;justify-content:center}.previewtools button{padding:12px 20px}.tip{display:flex;gap:15px;background:#eeeede;border:1px solid #dbdfcf;border-radius:12px;padding:18px;margin-top:auto}.tip>span{font-size:28px;color:#8b9a71}.tip strong{font:500 18px Georgia,serif}.tip p{font-size:12px;line-height:1.8;color:#787866;margin-top:7px}footer{font-size:10px;color:#927f6c;display:flex;justify-content:space-between;padding:25px 35px;gap:20px;letter-spacing:.6px}dialog{border:1px solid #d7cabc;background:#fffcf5;color:#342b29;max-width:560px;border-radius:20px;padding:30px}dialog::backdrop{background:#30271c88}dialog p{font-size:14px;line-height:1.8;margin-top:15px}dialog button{float:right}dialog h2{clear:both;padding-top:10px}@media(max-width:1000px){main{grid-template-columns:360px 1fr;padding:0 16px;gap:14px}.panel{padding:18px}.badge{font-size:9px;padding:7px}.previewtools{flex-wrap:wrap}.previewtools button{padding:10px}.fabric{min-height:340px}#sim-container{height:400px}}@media(max-width:740px){header{padding:24px 18px;gap:12px}.logo{font-size:48px}.eyebrow{letter-spacing:1.2px;font-size:9px}header>button{padding:8px;font-size:10px}main{grid-template-columns:1fr}.preview{grid-row:1}.fabric{min-height:300px}#sim-container{height:330px}.preview>.hint{display:none}.preview .tip{margin-top:18px}.panel{border-radius:15px}footer{flex-direction:column;padding:22px}#grid button{aspect-ratio:1.2}.tools button{font-size:12px}}
