*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #f8f7f4;--surface: #ffffff;--text: #1a1a1a;--text-secondary: #6b6b6b;--accent: #2d6a4f;--accent-light: #40916c;--accent-bg: #d8f3dc;--border: #e0e0e0;--shadow: 0 2px 8px rgba(0,0,0,.06);--radius: 8px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}header{padding:24px 32px;background:var(--surface);border-bottom:1px solid var(--border)}header h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}header .subtitle{font-size:.85rem;color:var(--text-secondary);margin-top:2px}main{display:flex;flex:1;overflow:hidden}#controls{width:320px;background:var(--surface);border-right:1px solid var(--border);padding:24px;overflow-y:auto;flex-shrink:0}.control-group{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border)}.control-group:last-of-type{border-bottom:none}.control-group h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:12px}.control{display:flex;align-items:center;gap:10px;margin-bottom:10px}.control label{font-size:.82rem;min-width:100px;color:var(--text)}.control input[type=range]{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none}.control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform .1s}.control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.control .value{font-size:.82rem;font-weight:500;min-width:36px;text-align:right;color:var(--accent);font-variant-numeric:tabular-nums}.control.checkbox{gap:8px}.control.checkbox label{min-width:auto;flex:1}.control.checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.control select{flex:1;padding:4px 8px;border:1px solid var(--border);border-radius:4px;font-size:.82rem;background:var(--surface)}.actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}button{padding:10px 16px;border:none;border-radius:var(--radius);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s}button.primary{background:var(--accent);color:#fff}button.primary:hover{background:var(--accent-light)}button.secondary{background:var(--accent-bg);color:var(--accent)}button.secondary:hover{background:#b7e4c7}#viewer{flex:1;position:relative;display:flex;align-items:center;justify-content:center;background:var(--bg)}#canvas{width:100%;height:100%;display:block}#info{position:absolute;bottom:16px;left:16px;display:flex;gap:16px;padding:8px 14px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);font-size:.78rem;color:var(--text-secondary)}#info span{font-variant-numeric:tabular-nums}