*{box-sizing:border-box}body{margin:0;background:#161b24;color:#eef2f7;font:14px Arial,sans-serif}header{height:82px;display:flex;align-items:center;gap:20px;padding:18px 25px;border-bottom:1px solid #343c49}header b{font-size:29px;font-style:italic;color:#f2b653}h1{font-size:20px;letter-spacing:3px;margin:0 0 6px}header span{font-size:10px;letter-spacing:1.5px;color:#9ca9ba}button{background:#2a3444;color:#f3f6fa;border:1px solid #465165;border-radius:6px;padding:9px 13px;cursor:pointer}button:hover{background:#3b4960}button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #f2b653;outline-offset:2px}header button{margin-left:auto}main{display:flex;height:calc(100vh - 82px);min-height:430px}.preview{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;background:#e9edf1;color:#404c5c}#stage{flex:1;min-height:280px;position:relative}canvas{display:block;width:100%;height:100%}#status{position:absolute;left:20px;top:16px;font-size:12px;pointer-events:none}nav{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:12px 12px 0}nav button{background:#fff;color:#344156;border-color:#cbd2dc;font-size:12px}.hint{text-align:center;font-size:11px;margin:12px 0 16px;color:#5f6d80}aside{width:280px;flex-shrink:0;padding:22px;overflow-y:auto}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}h2{font-size:16px;margin:0}.section-head span{font-size:9px;color:#b1bac7}.note{font-size:12px;color:#a5b0c0;line-height:1.6}.row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:43px;border-bottom:1px solid #2e3745;font-size:12px}input[type=color]{width:45px;height:27px;border:1px solid #667388;border-radius:5px;background:transparent;padding:2px;cursor:pointer}details{margin:22px 0}summary{cursor:pointer;color:#cbd4e2;font-size:12px}aside>button{margin:12px 3px 0 0;font-size:11px}#parts .row{font-size:10px}@media(max-width:650px){aside{width:205px;padding:14px}header{padding:14px;gap:12px}header button{font-size:11px}h1{font-size:16px}}
@media(max-width:650px){body{overflow:auto}header{height:76px}header span{font-size:8px;letter-spacing:1px}main{height:auto;min-height:0;display:block}.preview{height:64vh;min-height:400px}#stage{min-height:250px}aside{width:100%;padding:22px;overflow:visible}#colors{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}nav button{min-height:36px;padding:7px 10px}.hint{font-size:10px}input[type=color]{width:48px;height:32px}}
aside{width:320px}.swatch-library{padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #465165}.library-label{display:block;font-size:12px;color:#cbd4e2;margin:14px 0 7px}.swatch-library select,.swatch-library input[type=search]{width:100%;min-height:37px;border:1px solid #465165;border-radius:5px;background:#202937;color:#eef2f7;padding:8px;font:12px Arial,sans-serif}.swatch-library input[type=search]{margin-top:12px}.swatch-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:225px;overflow:auto;padding:2px 5px 2px 2px}.named-swatch{display:flex;align-items:center;gap:8px;text-align:left;padding:7px;font-size:11px;min-height:43px;line-height:1.3}.swatch-chip{width:26px;height:26px;flex-shrink:0;border:1px solid #8b95a4;border-radius:4px}.library-downloads a{display:block;color:#f2c278;font-size:12px;line-height:1.5;margin:12px 0}.picked-color{font-size:10px;color:#b4c0cf;margin-left:auto;text-align:right;max-width:80px}.row input{flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media(max-width:650px){aside{width:100%}.swatch-grid{grid-template-columns:repeat(3,1fr);max-height:240px}.named-swatch{display:block;font-size:10px}.swatch-chip{display:block;width:100%;height:28px;margin-bottom:5px}#colors{grid-template-columns:1fr}.picked-color{max-width:120px}}
.row.selected-part{background:#303846;box-shadow:inset 3px 0 #f2b653;border-radius:5px;padding-left:10px;padding-right:5px;outline:1px solid #697482}.row{scroll-margin:20px}.row.selected-part input{border-color:#f2b653}
