:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#39291e;background:#eee5d8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{background:#f8f1e7;border:1px solid #b7a28b;color:#493122;border-radius:8px;padding:9px 12px;cursor:pointer}button:hover{background:#dfc4a4}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a65024;outline-offset:2px}.primary{background:#754327;color:#fff1dd;border-color:#754327}.danger{color:#993c28;margin-top:14px}header{height:94px;display:flex;align-items:center;gap:18px;padding:18px 30px;border-bottom:1px solid #b9a58d}header button{margin-left:auto}h1{font-size:23px;margin:4px 0;font-weight:600;letter-spacing:-.8px}.mark{font-size:44px;color:#a36034}small{font-size:10px;font-weight:700;letter-spacing:2px}main{display:grid;grid-template-columns:260px minmax(400px,1fr) 300px;min-height:calc(100vh - 94px)}aside{padding:28px 24px;border-right:1px solid #c7b6a2}aside.editor{border-right:0;border-left:1px solid #c7b6a2}h2{font-family:Georgia,serif;font-weight:400;font-size:31px;line-height:1.05;margin:18px 0}p{font-size:13px;line-height:1.6;color:#705a45}.note{font-size:11px}label{display:block;font-size:11px;margin:13px 0;color:#755a41}input{display:block;width:100%;padding:9px;border:1px solid #c0ad94;border-radius:5px;color:#402d1d;background:#fff8ec;margin-top:5px;min-width:0}input[type=color]{height:38px;padding:3px}.palette,.triplet{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.presets{display:grid;gap:6px}.stage{padding:25px;background:radial-gradient(ellipse at 50% 30%,#f6eddf,#e9dccb);min-width:0}.stage-head{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:1px;text-transform:uppercase}.stage-head span:first-child{overflow-wrap:anywhere}canvas{display:block;width:100%;max-height:55vh;object-fit:contain;aspect-ratio:6/5}.caption{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #b9a58d;padding-top:15px;font-size:12px}.caption span{font-size:10px;color:#866c52;max-width:210px}.slice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:20px 0}.slice-grid svg{display:block;width:100%;border:1px solid #ae9272;image-rendering:pixelated}.slice-grid label{display:flex;align-items:center;gap:10px}.slice-grid input{width:80px;margin:0}.exports,.row{display:flex;gap:6px;flex-wrap:wrap}.exports button{font-size:11px}fieldset{border:1px solid #c0aa8d;border-radius:9px;padding:9px;margin:15px 0}legend{font-size:11px;letter-spacing:1px}.triplet label{margin:3px 0}details{margin:20px 0}summary{cursor:pointer;font-size:12px}textarea{width:100%;height:220px;background:#fff7e8;border:1px solid #b39b7a;font:11px monospace;padding:8px}footer{padding:18px 30px;border-top:1px solid #b9a58d}footer p{max-width:1000px;font-size:11px}footer button{font-size:10px;margin-right:8px}.focus main{display:block}.focus aside{display:none}.focus .stage{min-height:calc(100vh - 94px)}.focus canvas{max-height:72vh}.focus .slice-grid{max-width:650px;margin:20px auto}@media(max-width:1100px){main{grid-template-columns:220px 1fr}.editor{grid-column:1/-1}.editor fieldset{display:inline-block;width:280px;vertical-align:top;margin-right:12px}}@media(max-width:700px){header{padding:12px;height:auto}h1{font-size:19px}.mark{display:none}main{display:block}aside{border-right:0}canvas{max-height:none}.stage{padding:15px}.stage-head,.caption{flex-direction:column}.slice-grid{gap:7px}.slice-grid label{display:block}.slice-grid input{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}