.ml-playground{margin:2rem 0;font-family:inherit}.playground-card{background:var(--global-card-bg,transparent);border:1px solid var(--global-divider-color);border-radius:4px;padding:1.25rem;margin-bottom:1.25rem}.playground-card h5{font-weight:600;border-bottom:2px solid var(--global-theme-color);padding-bottom:.5rem;margin-bottom:1rem;color:var(--global-text-color);font-size:1rem}.control-bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.control-group{flex:1 1 180px;min-width:140px}.control-group label{display:flex;justify-content:space-between;font-size:.82rem;font-weight:500;margin-bottom:.35rem;color:var(--global-text-color)}.control-group label span{font-weight:600;color:var(--global-theme-color)}.playground-select{display:block;width:100%;padding:.45rem 2rem .45rem .6rem;font-size:.85rem;line-height:1.4;color:var(--global-text-color);background-color:var(--global-card-bg,transparent);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .6rem center;background-size:14px 10px;border:1px solid var(--global-divider-color);border-radius:4px;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}[data-theme="dark"] .playground-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}.playground-select:focus{border-color:var(--global-theme-color);outline:0}.playground-select option{background-color:var(--global-bg-color,#fff);color:var(--global-text-color,#333)}input[type="range"].custom-slider{-webkit-appearance:none;width:100%;background:transparent}input[type="range"].custom-slider:focus{outline:0}input[type="range"].custom-slider::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:var(--global-divider-color,#e0e0e0);border-radius:3px}input[type="range"].custom-slider::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;background:var(--global-theme-color);cursor:pointer;-webkit-appearance:none;margin-top:-5px}.button-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.playground-btn{border:1px solid var(--global-divider-color);border-radius:4px;padding:.45rem .9rem;font-size:.82rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--global-card-bg,transparent);color:var(--global-text-color);white-space:nowrap}.playground-btn-primary{background:var(--global-theme-color);color:var(--global-card-bg,#fff);border-color:var(--global-theme-color)}.playground-btn-primary:hover{opacity:.85}.playground-btn-secondary:hover{background:var(--global-divider-color)}.metrics-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.metric-item{flex:1 1 100px;background:var(--global-card-bg,transparent);border:1px solid var(--global-divider-color);border-radius:4px;padding:.5rem .75rem;text-align:center}.metric-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--global-text-color);opacity:.65;margin-bottom:.15rem}.metric-value{font-size:1.1rem;font-weight:700;color:var(--global-theme-color)}.canvas-wrapper{position:relative;width:100%;background:var(--global-bg-color);border:1px solid var(--global-divider-color);border-radius:4px;overflow:hidden;cursor:crosshair;aspect-ratio:16 / 9}.canvas-wrapper canvas{display:block;width:100%;height:100%}.canvas-instruction{position:absolute;top:8px;left:8px;font-size:.75rem;background:var(--global-divider-color);color:var(--global-text-color);padding:3px 7px;border-radius:3px;pointer-events:none;opacity:.85}.charts-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}@media(min-width:768px){.charts-grid{grid-template-columns:1fr 1fr}}.chart-cell{background:var(--global-card-bg,transparent);border:1px solid var(--global-divider-color);border-radius:4px;padding:1rem}.chart-cell h6{font-weight:600;font-size:.85rem;margin-bottom:.5rem;color:var(--global-text-color)}.chart-container{position:relative;width:100%;aspect-ratio:16 / 10}.contour-wrapper{position:relative;width:100%;background:var(--global-bg-color);border:1px solid var(--global-divider-color);border-radius:4px;overflow:hidden;aspect-ratio:1 / 1}.contour-wrapper canvas{display:block;width:100%;height:100%}.canvas-legend{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.5rem;font-size:.8rem;color:var(--global-text-color)}.legend-item{display:flex;align-items:center;gap:.35rem}.legend-swatch{width:20px;height:3px;border-radius:2px;display:inline-block}.legend-swatch-dashed{width:20px;height:0;border-top:2px dashed;display:inline-block}