:root{font-family:system-ui,sans-serif;color:#243e3c;background:#f4f0e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:18px;padding:24px 5vw;border-bottom:1px solid #d6d1c5}header button{margin-left:auto}.logo{font-size:52px;color:#ab5637}h1{font-family:Georgia,serif;font-size:27px;margin:6px 0}small{font-size:10px;letter-spacing:2px}main{max-width:1200px;margin:auto;padding:30px 24px}h2{font:42px Georgia,serif;margin:10px 0}.intro{max-width:760px;margin-bottom:28px}p{line-height:1.6;color:#586964;font-size:14px}button,input,textarea,select{font:inherit}button{border:1px solid #b8bfb2;border-radius:5px;padding:10px 13px;background:#fffdf8;color:#243e3c;cursor:pointer}button:hover{background:#e5eadf}button:disabled{opacity:.5}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ba5938;outline-offset:2px}.primary{background:#243e3c;color:#fff}.toolbar{display:flex;flex-wrap:wrap;gap:8px}.status{padding:16px 0;min-height:56px;color:#8c452f}.work{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{padding:24px;background:#fffdf8;border:1px solid #dedbd0;border-radius:10px;margin-bottom:20px}h3{font-size:13px;letter-spacing:1px;text-transform:uppercase}.grid{display:grid;grid-template-columns:repeat(24,1fr);aspect-ratio:1;max-width:440px;margin:auto}.grid button{padding:0;border-radius:0;border:1px solid #ddd8cc;background:#eee6d4;min-width:0}.grid .on{background:#243e3c}.preview{max-width:440px;margin:auto}.preview svg{display:block;width:100%}label{display:flex;gap:7px;align-items:center}input[type=range]{width:100%;margin:18px 0}.motif{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:15px;padding-top:15px;border-top:1px solid #ddd}input[type=number]{width:65px;padding:8px}select{padding:8px}textarea{width:100%;height:230px;font:12px monospace;padding:15px;margin-bottom:12px;border:1px solid #aab5a7}footer{padding:20px 0}@media(max-width:750px){.work{grid-template-columns:1fr}h2{font-size:32px}header{flex-wrap:wrap}main{padding:20px 12px}.panel{padding:18px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{header button,.toolbar,textarea,footer,button{display:none}.grid button{display:block;-webkit-print-color-adjust:exact;print-color-adjust:exact}.panel{break-inside:avoid}.work{display:block}.preview{width:300px}}.cardview{max-width:220px;margin:0 auto 16px;transform:rotate(-4deg)}.cardview svg{width:100%;display:block}.cardview p{text-align:center;font-size:11px}