:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f8fafc;background:#070b14;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}#root{width:100%;max-width:none;padding:0}body{min-width:320px;background:#070b14}button,input{font:inherit}.playground-shell{position:relative;min-height:100vh;overflow:hidden;padding:20px;background:radial-gradient(circle at 18% 12%,rgba(56,189,248,.1),transparent 30%),radial-gradient(circle at 82% 18%,rgba(139,92,246,.12),transparent 30%),linear-gradient(180deg,#0a0f1d,#070b14)}.ambient{position:fixed;width:420px;height:420px;border-radius:999px;filter:blur(110px);opacity:.12;pointer-events:none}.ambient-one{left:-120px;top:12%;background:#38bdf8}.ambient-two{right:-100px;bottom:2%;background:#8b5cf6}.topbar{position:relative;z-index:2;max-width:1600px;margin:0 auto 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid rgba(148,163,184,.13);border-radius:18px;background:#0f172aa8;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 18px 60px #00000038}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#06111b;background:linear-gradient(135deg,#67e8f9,#a78bfa);box-shadow:0 8px 30px #38bdf833}.brand-title{font-weight:800!important;letter-spacing:-.02em!important}.workspace{position:relative;z-index:2;width:100%;max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(360px,.85fr);gap:18px;align-items:start}.preview-panel,.controls-panel{border:1px solid rgba(148,163,184,.12)!important;border-radius:22px!important;background:#0c1220bd!important;overflow:hidden;box-shadow:0 28px 80px #00000047!important}.preview-panel{padding:18px;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;filter:none!important}.controls-panel{position:sticky;top:20px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.panel-heading,.controls-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading{padding:2px 2px 12px}.controls-header{padding:17px 18px 13px}.gauge-stage{position:relative;min-height:520px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(148,163,184,.1);border-radius:18px;transform:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;perspective:none!important;background:linear-gradient(rgba(148,163,184,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.035) 1px,transparent 1px),radial-gradient(circle at 50% 42%,rgba(56,189,248,.08),transparent 36%),#090e19;background-size:28px 28px,28px 28px,auto,auto}.gauge-stage>*:not(.gauge-glow){position:relative;z-index:1}.gauge-glow{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.16),rgba(139,92,246,.06) 45%,transparent 72%);filter:blur(18px);pointer-events:none}.preset-strip{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 2px 2px}.code-card{margin-top:16px;padding:14px;border:1px solid rgba(148,163,184,.11);border-radius:16px;background:#02061794}.code-card pre{max-height:270px;margin:0;padding:14px;overflow:auto;border-radius:12px;color:#cbd5e1;background:#050914;font:12px/1.6 SFMono-Regular,Consolas,Liberation Mono,monospace;white-space:pre}.config-tabs{border-top:1px solid rgba(148,163,184,.08);border-bottom:1px solid rgba(148,163,184,.08)}.config-tabs .MuiTab-root{min-height:54px;text-transform:none;font-weight:700}.controls-scroll{overflow-y:auto;padding:16px}.section-card{padding:15px;border:1px solid rgba(148,163,184,.1);border-radius:16px;background:#0f172a7a}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.switch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}.switch-row{min-height:42px;margin:0!important;padding:2px 7px 2px 3px;border-radius:10px;background:#94a3b80b}.switch-row .MuiFormControlLabel-label{font-size:.88rem}.control-block{margin-top:12px}.color-control{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center}.color-swatch{width:42px;height:40px;padding:3px;border:1px solid rgba(148,163,184,.2);border-radius:10px;background:#0f172aa6;cursor:pointer}.MuiAccordion-root{border:1px solid rgba(148,163,184,.1)!important;border-radius:14px!important;background:#0f172a7a!important;box-shadow:none!important;overflow:hidden}.MuiAccordion-root:before{display:none}.MuiAccordion-root+.MuiAccordion-root{margin-top:10px}.MuiAccordionSummary-root{min-height:62px!important}.MuiOutlinedInput-root{background:#0f172ad9!important}.MuiOutlinedInput-notchedOutline{border-color:#94a3b859!important}.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:#94a3b857!important}.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#38bdf8!important}.MuiButton-root{text-transform:none!important;font-weight:700!important;border-radius:10px!important}.MuiChip-root{border-radius:8px!important}.controls-panel,.controls-panel *,.section-card,.section-card *{color:#f8fafc}.MuiInputLabel-root,.MuiInputLabel-root.Mui-focused,.MuiFormLabel-root{color:#94a3b8!important}.MuiInputLabel-outlined,.MuiInputLabel-animated,.MuiInputLabel-shrink{color:#cbd5e1!important}.MuiInputBase-input,.MuiOutlinedInput-input,.MuiSelect-select{color:#fff!important}.MuiTypography-root{color:#f8fafc!important}.MuiTypography-caption,.MuiTypography-colorTextSecondary,.MuiTypography-body2,.MuiFormHelperText-root{color:#94a3b8!important}.MuiSelect-icon{color:#cbd5e1!important}.MuiFormControlLabel-label{color:#e2e8f0!important}.MuiTab-root{color:#94a3b8!important}.MuiTab-root.Mui-selected{color:#38bdf8!important}.MuiTab-root .MuiSvgIcon-root{color:inherit!important}.MuiSvgIcon-root{color:#e2e8f0!important}.MuiChip-label{color:#f8fafc!important}@media(max-width:1120px){.workspace{grid-template-columns:1fr}.controls-panel{position:static;max-height:none}.gauge-stage{min-height:460px}}@media(max-width:700px){.playground-shell{padding:10px}.topbar{align-items:flex-start;flex-direction:column}.topbar>.MuiStack-root:last-child{width:100%}.topbar>.MuiStack-root:last-child .MuiButton-root{flex:1}.preview-panel{padding:10px}.panel-heading{align-items:flex-start;flex-direction:column}.gauge-stage{min-height:360px}.control-grid,.switch-grid{grid-template-columns:1fr}.config-tabs .MuiTab-root{min-width:0;font-size:.75rem}}