:root{--primary-color: #4a90e2;--background-color: #aaaaaa;--button-bg: #f5f5f5;--button-hover: #e0e0e0;--button-active: #4a90e2;--shadow-sm: 0 2px 4px rgba(0,0,0,.1);--shadow-md: 0 1px 2px rgba(0,0,0,.2);--spacing-unit: 8px;--border-radius: 2px;--transition: all .1s ease;--max-range: 10}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font:monospace;font-size:14px}body{background-color:var(--background-color);height:100vh}#viewportMain{position:absolute;top:20px;left:20px;width:calc(100% - 280px);height:calc(100% - 40px);background-color:#000;z-index:0}.right-panel{position:fixed;right:10px;top:20px;width:240px;display:flex;flex-direction:column;gap:10px;padding-left:0;z-index:5}.right-panel-top{display:flex;justify-content:space-between;margin-bottom:20px}#viewportGizmo{width:100px;height:100px;background-color:#000;border-radius:var(--border-radius)}.image-element{width:100px;height:100px}.formula-pane{width:100%}.formula-input{width:100%;height:24px;padding:5px;border:1px solid #ccc;border-radius:var(--border-radius);background-color:var(--button-bg);box-sizing:border-box;font-family:monospace;font-size:11px}.formula-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #4a90e233}.formula-message{color:#f44;margin-top:calc(var(--spacing-unit) / 2)}.sample-selector-container{display:grid;grid-template-columns:auto 80px;align-items:center;gap:var(--spacing-unit);margin:8px 0}.sample-selector-label{text-align:left;font-weight:700}.sample-selector{width:100%;height:24px;padding:5px;text-align:right;border:1px solid #ccc;border-radius:var(--border-radius);background-color:var(--button-bg);transition:var(--transition);box-sizing:border-box;font-family:monospace}.sample-selector:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #4a90e233}.dashboard-container{display:grid;grid-template-columns:max-content 1fr}.dashboard-container div:nth-child(odd){text-align:right;color:#666}.dashboard-container div:nth-child(2n){text-align:left}.range-group{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--spacing-unit)}.range-label{font-weight:700}.range-visual{flex:1;display:flex;align-items:center}.range-bar{flex:1;overflow:hidden;height:8px;background:#ddd;border-radius:4px;position:relative}.range-bar:before{content:"";position:absolute;height:100%;background:var(--primary-color);border-radius:4px;left:calc((var(--min) + var(--max-range)) * 50% / var(--max-range));right:calc((var(--max-range) - var(--max)) * 50% / var(--max-range))}.range-values{white-space:nowrap}.range-visual,.exponential-slider,.angle-slider{min-height:16px;display:flex;align-items:center;margin:0;gap:var(--spacing-unit)}.exponential-slider{position:relative;height:8px;display:flex;align-items:center;width:100%}.exponential-track{position:relative;flex:1;height:8px;background:#ddd;border-radius:4px}.exponential-thumb{position:absolute;top:50%;width:8px;height:8px;background:var(--primary-color);border-radius:4px;transform:translate(-50%,-50%);cursor:pointer}.angle-slider{position:relative;height:8px;display:flex;align-items:center;width:100%}.angle-track{position:relative;flex:1;height:8px;background:#ddd;border-radius:4px}.angle-dot{position:absolute;top:50%;width:8px;height:8px;background:var(--primary-color);border-radius:4px;transform:translate(-50%,-50%);cursor:pointer}.toolbar{display:flex;flex-direction:column;gap:var(--spacing-unit);padding:0}.toolbar__button{width:100%;padding:var(--spacing-unit);border:1px solid #ccc;border-radius:var(--border-radius);background-color:var(--button-bg);cursor:pointer;box-shadow:var(--shadow-sm);transition:var(--transition)}.toolbar__button:hover{background-color:var(--button-hover)}.toolbar__button--selected{background-color:var(--primary-color);color:#fff;border:2px solid var(--primary-color);border-radius:var(--border-radius);box-shadow:var(--shadow-sm);transform:translateY(1px)}