:root{color:#1f2528;background:#f4f2ed;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;height:100%;min-height:100%;margin:0}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:100vh;background:linear-gradient(90deg,#ffffff6b,#fff0),#f4f2ed}.viewport-panel{position:relative;min-width:0;min-height:100vh}.viewport-panel canvas{display:block}.controls-panel{display:flex;flex-direction:column;gap:22px;min-width:0;min-height:100vh;padding:32px 28px;border-left:1px solid #d6d2c8;background:#faf9f5eb}.panel-heading{display:grid;gap:4px}.eyebrow{margin:0;color:#6b746f;font-size:.78rem;font-weight:700;letter-spacing:0;text-transform:uppercase}h1{margin:0;font-size:2.2rem;line-height:1;letter-spacing:0}.control-group{display:grid;gap:12px}label{color:#3b4442;font-size:.92rem;font-weight:700}.color-row{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px}input[type=color]{width:56px;height:44px;padding:2px;border:1px solid #bdb7aa;border-radius:8px;background:#fff}output{min-width:0;padding:12px 14px;border:1px solid #d6d2c8;border-radius:8px;background:#fff;color:#1f2528;font-size:.92rem;font-weight:700}.swatch-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.swatch{width:100%;aspect-ratio:1;border:2px solid #f4f2ed;border-radius:8px;box-shadow:inset 0 0 0 1px #0000002e;cursor:pointer}.swatch.active{border-color:#1f2528}input[type=range]{width:100%;accent-color:#2e7d73}.range-labels{display:flex;justify-content:space-between;color:#6b746f;font-size:.78rem}.spec-table{display:grid;gap:0;margin-top:auto;border:1px solid #d6d2c8;border-radius:8px;overflow:hidden;background:#fff}.spec-table div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;padding:13px 14px;border-bottom:1px solid #e5e1d8}.spec-table div:last-child{border-bottom:0}.spec-table span{color:#6b746f;font-size:.84rem}.spec-table strong{min-width:0;overflow:hidden;color:#1f2528;font-size:.84rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}@media(max-width:860px){.app-shell{grid-template-columns:1fr;grid-template-rows:minmax(420px,62vh) auto}.viewport-panel{min-height:420px}.controls-panel{min-height:auto;padding:22px 18px 24px;border-top:1px solid #d6d2c8;border-left:0}h1{font-size:1.9rem}}