:root{--hue1: 255;--hue2: 190;--bg: #08090d;--bg-2: hsl(var(--hue2), 15%, 8%);--panel: hsl(var(--hue2), 12%, 10%);--text: #e8e8f0;--muted: #9aa3b2;--accent: hsl(var(--hue1), 80%, 70%);--accent2: hsl(var(--hue2), 80%, 70%);--green: #5ee39b;--yellow: #ffd866;--red: #ff6b6b;--border: hsl(var(--hue2), 12%, 20%);--border-color: hsl(var(--hue2), 12%, 20%);--radius: 22px;--code: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--ease: cubic-bezier(.5, 1, .89, 1);--apple-ease: cubic-bezier(.25, .46, .45, .94);--glass-blur: 20px;--glass-opacity: .8;--shine-size: 75%;--glow-size: 2.5}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);background-image:radial-gradient(circle at 20% 20%,hsl(var(--hue1) 60% 60% / .15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,hsl(var(--hue2) 60% 60% / .15) 0%,transparent 50%),linear-gradient(135deg,hsl(var(--hue2) 50% 75% / .1),hsl(var(--hue1) 50% 75% / .1));color:var(--text);font:14px/1.5 -apple-system,BlinkMacSystemFont,SF Pro Display,system-ui,sans-serif}.fullscreen-btn{position:absolute;top:3px;background:var(--panel);border:1px solid var(--border);color:var(--muted);border-radius:12px;padding:0;font-size:14px;cursor:pointer;opacity:.7;transition:all .3s var(--apple-ease);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;height:37px;width:37px;display:flex;align-items:center;justify-content:center}.console-button-bar{display:flex;gap:8px;align-items:center}.console-button-bar .fullscreen-btn{position:static;margin:0}#fullscreenEditor{right:8px}.fullscreen-btn:hover{opacity:1;color:var(--accent);background:var(--panel);border-color:var(--accent);transform:scale(1.05)}.fullscreen-btn:active{transform:scale(.95)}.pane header{position:relative}.base-dialog{width:min(600px,90vw);max-width:min(800px,95vw);max-height:80vh;padding:0;border:none;border-radius:var(--radius);background:transparent;-webkit-backdrop-filter:blur(calc(var(--glass-blur) * 1.5));backdrop-filter:blur(calc(var(--glass-blur) * 1.5))}.library-dialog{width:min(700px,90vw);max-width:min(900px,95vw)}.base-dialog::backdrop{background:#090b0fcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-content{background:linear-gradient(235deg,hsl(var(--hue1) 50% 10% / .95),hsl(var(--hue2) 50% 10% / .95));border:1px solid var(--border-color);border-radius:var(--radius);padding:24px;box-shadow:hsl(var(--hue2) 50% 2%) 0 20px 40px -12px,hsl(var(--hue2) 50% 4%) 0 32px 64px -20px,inset 0 1px hsl(var(--hue1) 50% 50% / .3);animation:glass-appear .4s var(--apple-ease) both}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}.dialog-header h3{margin:0;color:var(--text);font-size:18px;font-weight:600}.close-btn{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s var(--apple-ease)}.close-btn:hover{color:var(--text);background:hsl(var(--hue1) 50% 15% / .3)}.current-libraries{margin-bottom:24px}.current-libraries .descriptor{color:var(--muted);font-size:13px;margin:0 0 12px}.library-list{min-height:120px;max-height:200px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;background:hsl(var(--hue2) 12% 8% / .5)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;color:var(--muted)}.empty-icon{font-size:32px;margin-bottom:8px;opacity:.7}.empty-state p{margin:0 0 4px;font-size:14px}.empty-state small{font-size:12px;opacity:.8}.library-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid hsl(var(--hue2) 12% 15% / .5);transition:background .2s var(--apple-ease)}.library-item:last-child{border-bottom:none}.library-item:hover{background:hsl(var(--hue1) 50% 15% / .2)}.library-info{flex:1;min-width:0}.library-name{display:block;color:var(--text);font-weight:500;font-size:14px}.library-url{display:block;color:var(--muted);font-size:clamp(10px,1.2vw,12px);font-family:var(--code);margin-top:2px;word-break:break-all;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s var(--apple-ease);font-size:14px}.remove-btn:hover{color:var(--red);background:hsl(var(--hue1) 50% 15% / .3);transform:scale(1.1)}.add-library h4{margin:0 0 8px;color:var(--text);font-size:15px;font-weight:600}.add-library .descriptor{color:var(--muted);font-size:13px;margin:0 0 12px}.library-selector{margin-bottom:16px}.common-libraries{width:100%;background:hsl(var(--hue2) 12% 8% / .8);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-size:14px;font-family:var(--font);transition:all .2s var(--apple-ease);cursor:pointer}.common-libraries:focus{outline:none;border-color:var(--accent);background:hsl(var(--hue2) 12% 10% / .9);box-shadow:0 0 0 2px hsl(var(--hue1) 80% 70% / .2)}.common-libraries option{background:hsl(var(--hue2) 12% 8% / .95);color:var(--text);padding:8px}.input-row{display:flex;gap:12px;margin-bottom:8px;align-items:stretch}.url-input{flex:1;min-width:0;background:hsl(var(--hue2) 12% 8% / .8);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text);font-size:13px;font-family:var(--code);transition:all .2s var(--apple-ease)}.url-input:focus{outline:none;border-color:var(--accent);background:hsl(var(--hue2) 12% 10% / .9);box-shadow:0 0 0 2px hsl(var(--hue1) 80% 70% / .2)}.url-input::placeholder{color:var(--muted);opacity:.7}.add-btn{background:linear-gradient(90deg in oklch,hsl(var(--hue1) 70% 50% / .9),hsl(var(--hue2) 70% 50% / .9));border:1px solid var(--accent);border-radius:6px;color:var(--text);padding:8px 20px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s var(--apple-ease);white-space:nowrap;min-width:60px;flex-shrink:0}.add-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px hsl(var(--hue1) 80% 70% / .3)}.add-btn:active{transform:translateY(0)}.add-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.input-feedback{font-size:12px;padding:4px 0;min-height:16px;transition:all .2s var(--apple-ease)}.input-feedback.success{color:var(--green)}.input-feedback.error{color:var(--red)}.input-feedback.warning{color:var(--yellow)}.input-feedback.info{color:var(--accent2)}.input-feedback.loading{color:var(--muted)}.input-feedback.loading:after{content:"...";animation:loading-dots 1s infinite}@keyframes loading-dots{0%,20%{opacity:0}50%{opacity:1}to{opacity:0}}.app.fullscreen-editor,.app.fullscreen-console{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;background:var(--bg)}.app.fullscreen-editor .navbar,.app.fullscreen-console .navbar{display:none!important}.app.fullscreen-editor .main-content,.app.fullscreen-console .main-content{height:100vh;grid-template-columns:1fr!important}.app.fullscreen-editor .pane.right,.app.fullscreen-editor .resize-handle{display:none!important}.app.fullscreen-console .pane:not(.right),.app.fullscreen-console .resize-handle{display:none!important}.app.fullscreen-editor .pane:first-child,.app.fullscreen-console .pane.right{height:100vh!important;min-height:100vh!important}@keyframes glass-glow{0%{opacity:0;transform:scale(.95) rotate(-5deg)}3%{opacity:1;transform:scale(1) rotate(0)}10%{opacity:0;transform:scale(1.05) rotate(2deg)}12%{opacity:.7;transform:scale(1) rotate(0)}16%{opacity:.3;animation-timing-function:var(--apple-ease)}to{opacity:1;transform:scale(1) rotate(0);animation-timing-function:var(--apple-ease)}}@keyframes glass-shine{0%{opacity:0;transform:translate(-100%) skew(-15deg)}50%{opacity:1;transform:translate(0) skew(0)}to{opacity:0;transform:translate(100%) skew(15deg)}}@keyframes glass-appear{0%{opacity:0;transform:scale(.9) translateY(10px);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;transform:scale(1) translateY(0);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}}.app{height:100%;display:flex;flex-direction:column;padding:10px;overflow:visible;animation:page-appear 1.2s var(--apple-ease) both}@keyframes page-appear{0%{opacity:0;transform:scale(.95) translateY(20px)}50%{opacity:.8}to{opacity:1;transform:scale(1) translateY(0)}}.navbar{height:72px;background:linear-gradient(235deg,hsl(var(--hue1) 50% 10% / .9),hsl(var(--hue1) 50% 10% / 0) 33%),linear-gradient(45deg,hsl(var(--hue2) 50% 10% / .9),hsl(var(--hue2) 50% 10% / 0) 33%),linear-gradient(#090b0fa8);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border:1px solid var(--border-color);border-radius:var(--radius);margin:5px 5px 10px;display:flex;align-items:center;justify-content:space-between;padding:12px 24px;box-shadow:hsl(var(--hue2) 50% 2%) 0 10px 16px -8px,hsl(var(--hue2) 50% 4%) 0 20px 36px -14px,inset 0 1px hsl(var(--hue1) 50% 50% / .2);position:relative;overflow:hidden;animation:glass-appear .8s var(--apple-ease) both}.navbar:before{content:"";position:absolute;top:-1px;right:-1px;width:var(--shine-size);height:var(--shine-size);background:conic-gradient(from -45deg at center in oklch,transparent 12%,hsl(var(--hue1) 80% 60%) 15%,transparent 50%);border-radius:inherit;border:1px solid transparent;mask:linear-gradient(transparent),linear-gradient(black);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-clip:padding-box,border-box;-webkit-mask-composite:source-out;mask-composite:subtract;opacity:0;pointer-events:none;z-index:1}.navbar:after{content:"";position:absolute;top:calc(var(--radius) * -1.5);right:calc(var(--radius) * -1.5);width:calc(var(--shine-size) * 1.2);height:calc(var(--shine-size) * 1.2);background:conic-gradient(from -45deg at center in oklch,transparent 13%,hsl(var(--hue1) 95% 60% / .4) 17%,transparent 37%);border-radius:calc(var(--radius) * var(--glow-size));border:calc(var(--radius) * 1.25) solid transparent;filter:blur(12px) saturate(1.25) brightness(.5);mix-blend-mode:plus-lighter;opacity:0;pointer-events:none;z-index:0}.logo-section{display:flex;align-items:center;gap:12px}.logo-placeholder{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,hsl(var(--hue1) 50% 15% / .8),hsl(var(--hue2) 50% 15% / .8));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:calc(var(--radius) * .4);border:1px solid hsl(var(--hue1) 50% 30% / .4);box-shadow:0 4px 12px hsl(var(--hue1) 50% 10% / .3),inset 0 1px hsl(var(--hue1) 50% 50% / .2)}.app-title{font-size:20px;font-weight:600;color:var(--text);text-shadow:0 0 10px hsl(var(--hue1) 70% 70% / .3)}.main-content{flex:1;display:grid;grid-template-columns:minmax(320px,1fr) 5px minmax(420px,1.2fr);gap:0px;height:calc(100% - 72px);padding:0 5px;overflow:visible}.pane:first-child{margin-right:0}.pane:last-child{margin-left:0}.resize-handle{width:5px;height:60%;background:linear-gradient(180deg,hsl(var(--hue2) 50% 30% / .6),var(--border),hsl(var(--hue1) 50% 30% / .4));cursor:col-resize;position:relative;display:flex;align-items:center;justify-content:center;border-radius:calc(var(--radius) * .3);transition:all .3s var(--apple-ease);align-self:center;margin:auto 0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid hsl(var(--hue2) 50% 50% / .2)}.resize-handle:hover{background:linear-gradient(180deg,hsl(var(--hue1) 50% 50% / .8),var(--accent),hsl(var(--hue2) 50% 50% / .6));border-color:hsl(var(--hue1) 50% 60% / .4);transform:scaleX(1.2)}.resize-handle:active{background:var(--accent);transform:scaleX(1.4)}.resize-handle:after{content:"";width:2px;height:20px;background:currentColor;border-radius:1px;opacity:.6;box-shadow:0 0 8px hsl(var(--hue2) 50% 50% / .3)}.resize-handle.dragging{background:var(--accent);-webkit-user-select:none;user-select:none}.pane{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--border-color);background:linear-gradient(235deg,hsl(var(--hue1) 50% 10% / .8),hsl(var(--hue1) 50% 10% / 0) 33%),linear-gradient(45deg,hsl(var(--hue2) 50% 10% / .8),hsl(var(--hue2) 50% 10% / 0) 33%),linear-gradient(#090b0fa8);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));border-radius:var(--radius);overflow:visible;min-height:0;margin:0 0 5px;box-shadow:hsl(var(--hue2) 50% 2%) 0 10px 16px -8px,hsl(var(--hue2) 50% 4%) 0 20px 36px -14px,inset 0 1px hsl(var(--hue2) 50% 50% / .1),inset 0 -1px hsl(var(--hue1) 50% 50% / .05);position:relative;isolation:auto;animation:glass-appear 1s var(--apple-ease) both}.pane:first-child{animation-delay:.1s}.pane:last-child{animation-delay:.2s}.pane:before{content:"";position:absolute;bottom:-1px;left:-1px;width:var(--shine-size);height:var(--shine-size);background:conic-gradient(from 135deg at center in oklch,transparent 12%,hsl(var(--hue2) 80% 60%) 15%,transparent 50%);border-radius:inherit;border:1px solid transparent;mask:linear-gradient(transparent),linear-gradient(black);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-clip:padding-box,border-box;-webkit-mask-composite:source-out;mask-composite:subtract;opacity:0;pointer-events:none;z-index:1}.pane:after{content:"";position:absolute;bottom:calc(var(--radius) * -2);left:calc(var(--radius) * -2);width:calc(var(--shine-size) * 1.2);height:calc(var(--shine-size) * 1.2);background:conic-gradient(from 135deg at center in oklch,transparent 13%,hsl(var(--hue2) 95% 60% / .3) 17%,transparent 37%);border-radius:calc(var(--radius) * var(--glow-size));border:calc(var(--radius) * 1.25) solid transparent;filter:blur(15px) saturate(1.5) brightness(.6);mix-blend-mode:plus-lighter;opacity:0;pointer-events:none;z-index:0}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px;border-bottom:1px solid var(--border-color);background:linear-gradient(180deg,hsl(var(--hue1) 15% 12% / .4),hsl(var(--hue2) 15% 10% / .4));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}header h3{margin:0;font-size:18px;color:#fff;font-weight:700;letter-spacing:.8px;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,system-ui,sans-serif;text-shadow:0 0 10px rgba(255,255,255,.3)}.note{color:var(--muted);font-size:12px;margin-left:6px}.editor-container{min-height:0;display:grid;grid-template-rows:1fr}.code-editor{width:100%;height:100%;background:#0b0f1eb3;color:var(--text);border:none;resize:none;outline:none;padding:12px;font:var(--code)}.CodeMirror{height:100%;font:var(--code)}.toolbar{margin-left:auto;display:flex;gap:12px;padding:0;align-items:center}button,label.btn,.examples-dropdown{background:linear-gradient(90deg in oklch,hsl(var(--hue1) 29% 13% / .8),hsl(var(--hue1) 30% 15% / .8) 24% 32%,hsl(var(--hue1) 5% 7% / .8));color:var(--text);border:1px solid hsl(var(--hue2) 13% 18.5% / .5);padding:10px 16px;border-radius:calc(var(--radius) * .5);cursor:pointer;font-weight:500;transition:all .4s var(--apple-ease);font-size:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 8px hsl(var(--hue2) 50% 2% / .3),inset 0 1px hsl(var(--hue1) 50% 50% / .15),inset 0 -1px hsl(var(--hue2) 50% 50% / .1);position:relative;overflow:hidden;transform:translateZ(0)}button:before,label.btn:before,.examples-dropdown:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsl(var(--hue1) 50% 80% / .3) 50%,transparent);transition:left .6s var(--apple-ease);pointer-events:none}button:after,label.btn:after,.examples-dropdown:after{content:"";position:absolute;inset:-2px;background:conic-gradient(from 0deg at center in oklch,transparent 0%,hsl(var(--hue1) 80% 60% / .4) 10%,transparent 30%);border-radius:inherit;opacity:0;transition:opacity .4s var(--apple-ease);pointer-events:none;z-index:-1}.examples-dropdown{min-width:120px;outline:none;background:#0f1424!important;color:var(--text)!important;padding-right:12px}.examples-dropdown option{background:#0f1424;color:var(--text);padding:8px}.examples-dropdown:disabled{opacity:.6;cursor:not-allowed}button:hover,label.btn:hover,.examples-dropdown:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 8px 20px hsl(var(--hue2) 50% 2% / .4),0 0 30px hsl(var(--hue1) 80% 70% / .2),inset 0 1px hsl(var(--hue1) 50% 50% / .25),inset 0 -1px hsl(var(--hue2) 50% 50% / .15);border-color:hsl(var(--hue1) 50% 50% / .6)}button:hover:before,label.btn:hover:before,.examples-dropdown:hover:before{left:100%}button:hover:after,label.btn:hover:after,.examples-dropdown:hover:after{opacity:1;animation:glass-glow 1.5s var(--apple-ease) infinite}button:active,label.btn:active,.examples-dropdown:active{transform:translateY(0) scale(.98);transition:all .1s var(--apple-ease);box-shadow:0 2px 8px hsl(var(--hue2) 50% 2% / .3),inset 0 2px 4px hsl(var(--hue2) 50% 10% / .3)}button:active:before,label.btn:active:before,.examples-dropdown:active:before{left:0%;transition:left .1s ease-out}.btn-run{--btn-hue: 150;background:linear-gradient(90deg in oklch,hsl(var(--btn-hue) 60% 20% / .8),hsl(var(--btn-hue) 60% 25% / .8) 24% 32%,hsl(var(--btn-hue) 30% 15% / .8));border-color:hsl(var(--btn-hue) 50% 40% / .6)}.btn-run:after{background:conic-gradient(from 0deg at center in oklch,transparent 0%,hsl(var(--btn-hue) 80% 60% / .4) 10%,transparent 30%)}.btn-run:hover{box-shadow:0 8px 20px hsl(var(--hue2) 50% 2% / .4),0 0 30px hsl(var(--btn-hue) 80% 60% / .3),inset 0 1px hsl(var(--btn-hue) 50% 50% / .25)}.btn-warn{--btn-hue: 45;background:linear-gradient(90deg in oklch,hsl(var(--btn-hue) 60% 20% / .8),hsl(var(--btn-hue) 60% 25% / .8) 24% 32%,hsl(var(--btn-hue) 30% 15% / .8));border-color:hsl(var(--btn-hue) 50% 40% / .6)}.btn-warn:after{background:conic-gradient(from 0deg at center in oklch,transparent 0%,hsl(var(--btn-hue) 80% 60% / .4) 10%,transparent 30%)}.btn-warn:hover{box-shadow:0 8px 20px hsl(var(--hue2) 50% 2% / .4),0 0 30px hsl(var(--btn-hue) 80% 60% / .3),inset 0 1px hsl(var(--btn-hue) 50% 50% / .25)}.btn-danger{--btn-hue: 0;background:linear-gradient(90deg in oklch,hsl(var(--btn-hue) 60% 20% / .8),hsl(var(--btn-hue) 60% 25% / .8) 24% 32%,hsl(var(--btn-hue) 30% 15% / .8));border-color:hsl(var(--btn-hue) 50% 40% / .6)}.btn-danger:after{background:conic-gradient(from 0deg at center in oklch,transparent 0%,hsl(var(--btn-hue) 80% 60% / .4) 10%,transparent 30%)}.btn-danger:hover{box-shadow:0 8px 20px hsl(var(--hue2) 50% 2% / .4),0 0 30px hsl(var(--btn-hue) 80% 60% / .3),inset 0 1px hsl(var(--btn-hue) 50% 50% / .25)}.btn-share{--btn-hue: 220;background:linear-gradient(90deg in oklch,hsl(var(--btn-hue) 60% 20% / .8),hsl(var(--btn-hue) 60% 25% / .8) 24% 32%,hsl(var(--btn-hue) 30% 15% / .8));border-color:hsl(var(--btn-hue) 50% 40% / .6)}.btn-share:after{background:conic-gradient(from 0deg at center in oklch,transparent 0%,hsl(var(--btn-hue) 80% 60% / .4) 10%,transparent 30%)}.btn-share:hover{box-shadow:0 8px 20px hsl(var(--hue2) 50% 2% / .4),0 0 30px hsl(var(--btn-hue) 80% 60% / .3),inset 0 1px hsl(var(--btn-hue) 50% 50% / .25)}.right{display:grid;grid-template-rows:auto 1fr auto;min-height:0}.right.has-preview{grid-template-rows:auto 1fr 8px 1fr auto}.vertical-resize-handle{width:100%;height:8px;background:var(--border);cursor:row-resize;position:relative;display:none;align-items:center;justify-content:center;border-radius:2px;transition:background-color .2s ease}.right.has-preview .vertical-resize-handle{display:flex}.vertical-resize-handle:hover,.vertical-resize-handle:active{background:var(--accent)}.vertical-resize-handle:after{content:"";width:24px;height:2px;background:currentColor;border-radius:1px;opacity:.6}.vertical-resize-handle.dragging{background:var(--accent);-webkit-user-select:none;user-select:none}.console{padding:10px;overflow:auto;min-height:0;font:var(--code);background:#0b0f1eb3}.console-line{white-space:pre-wrap;word-break:break-word;margin:2px 0;padding-left:6px;border-left:3px solid transparent}.console-log{color:#d3d9e8;border-color:#3b4363}.console-info{color:#9cd2ff;border-color:#3b5a86}.console-warn{color:var(--yellow);border-color:#8b6f2a}.console-error{color:var(--red);border-color:#7a2e2e;background:#ff6b6b0d;padding:8px 6px;margin:4px 0;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;line-height:1.5}.console-error br+br{display:none}.statusbar{padding:6px 10px;border-top:1px solid var(--border);color:var(--muted);font-size:12px;display:flex;align-items:center;gap:12px;background:#121731}.editor-footer{padding:6px 10px;border-top:1px solid var(--border);color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:space-between;background:#121731}.editor-controls{display:flex;align-items:center;gap:8px}.preview-wrap{border-top:1px dashed var(--border);display:none}.preview-wrap.show{display:block}.preview-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;color:var(--muted);font-size:12px;border-bottom:1px dashed var(--border);background:#101533}#sandboxContainer{height:100%;min-height:200px;overflow:hidden;position:relative}.sandbox-iframe{width:100%;height:100%;border:0;background:#fff;display:block}@media (max-width: 768px){.app{padding:5px;overflow-x:hidden;max-width:100vw;box-sizing:border-box}.navbar{height:auto;min-height:fit-content;margin:2px 2px 12px;padding:12px 12px 16px;flex-direction:column;gap:12px;align-items:stretch;-webkit-backdrop-filter:blur(calc(var(--glass-blur) * .8));backdrop-filter:blur(calc(var(--glass-blur) * .8));animation-delay:0s;overflow:visible;position:relative;z-index:100;max-width:100%;box-sizing:border-box}.logo-section{justify-content:center}.app-title{font-size:16px}.logo-placeholder{width:32px;height:32px;font-size:18px}.main-content{display:flex;flex-direction:column;gap:8px;min-height:calc(100vh - 160px)}.resize-handle{display:none}.vertical-resize-handle{height:12px!important;min-height:12px!important;touch-action:none}.pane{margin:0;flex:none;min-height:0}.pane:first-child{height:calc(100vh - 160px);min-height:calc(100vh - 160px)}.pane:last-child{height:calc(100vh - 160px);min-height:calc(100vh - 160px)}.toolbar{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:auto auto;gap:10px;padding:0;margin:0;width:100%;max-width:100%;box-sizing:border-box;overflow:hidden}button,label.btn,.examples-dropdown{padding:10px 8px;font-size:11px;min-height:40px;border-radius:6px;text-align:center;white-space:nowrap;-webkit-backdrop-filter:blur(calc(var(--glass-blur) * .6));backdrop-filter:blur(calc(var(--glass-blur) * .6));max-width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}button:hover,label.btn:hover{transform:translateY(-1px) scale(1.01)}button:after,label.btn:after{filter:blur(6px) saturate(1.2)}.examples-dropdown,.theme-switcher{grid-column:span 2;grid-row:2;padding:10px 8px;font-size:11px;min-height:40px;border-radius:6px;position:relative;z-index:101}.examples-dropdown select,.theme-switcher select{position:relative;z-index:102}.main-content{margin-top:10px}.console{padding:8px;font-size:12px}.statusbar{padding:6px 10px;font-size:11px}.editor-footer{padding:6px 10px;font-size:11px;flex-direction:column;align-items:flex-start;gap:4px}.editor-controls{align-self:flex-end}.preview-head{padding:8px 10px;font-size:11px}#sandboxContainer{min-height:150px}.code-editor{padding:10px;font-size:14px;line-height:1.5}header{padding:16px;min-height:50px;display:flex;align-items:center;justify-content:space-between}header h3{font-size:14px}.fullscreen-btn{top:6px}.console-button-bar{gap:4px}.library-dialog{width:min(95vw,500px);max-width:95vw}.library-url{font-size:10px;white-space:normal;word-break:break-all}.common-libraries,.url-input{font-size:16px;padding:12px}.add-btn{font-size:16px;padding:12px 20px;min-height:44px;min-width:70px}}@media (min-width: 1024px){.library-dialog{width:min(800px,85vw);max-width:min(1000px,90vw)}.library-url{font-size:12px;max-width:none}.common-libraries{font-size:15px}}@media (min-width: 1200px){.library-dialog{width:min(900px,80vw);max-width:min(1100px,85vw)}.library-url{font-size:13px}}.neon-glow{position:relative;overflow:hidden;background:transparent!important}.neon-glow-container{pointer-events:none;position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden}.neon-shine{pointer-events:none;position:absolute;inset:0;border-radius:inherit;opacity:0;animation:neon-glow 1.2s cubic-bezier(.5,1,.89,1) both;mix-blend-mode:screen}.pane:first-child .neon-shine{background:radial-gradient(ellipse 600px 500px at top left,hsla(var(--hue1),100%,95%,1) 0%,hsla(var(--hue1),100%,85%,.9) 8%,hsla(var(--hue1),95%,75%,.7) 18%,hsla(var(--hue1),90%,65%,.3) 28%,transparent 40%),radial-gradient(ellipse 600px 500px at bottom right,hsla(var(--hue2),100%,95%,1) 0%,hsla(var(--hue2),100%,85%,.9) 8%,hsla(var(--hue2),95%,75%,.7) 18%,hsla(var(--hue2),90%,65%,.3) 28%,transparent 40%)}.pane.right .neon-shine{background:radial-gradient(ellipse 600px 500px at top right,hsla(var(--hue1),100%,95%,1) 0%,hsla(var(--hue1),100%,85%,.9) 8%,hsla(var(--hue1),95%,75%,.7) 18%,hsla(var(--hue1),90%,65%,.3) 28%,transparent 40%),radial-gradient(ellipse 600px 500px at bottom left,hsla(var(--hue2),100%,95%,1) 0%,hsla(var(--hue2),100%,85%,.9) 8%,hsla(var(--hue2),95%,75%,.7) 18%,hsla(var(--hue2),90%,65%,.3) 28%,transparent 40%)}.neon-glow:before,.neon-glow:after{content:"";position:absolute;width:120px;height:120px;pointer-events:none;border-style:solid;border-color:transparent;border-width:3px;z-index:100;filter:drop-shadow(0 0 8px hsla(var(--hue),100%,90%,.8))}.pane:first-child.neon-glow:before{top:0;left:0;--hue: var(--hue1);border-top-color:hsla(var(--hue1),100%,90%,1);border-left-color:hsla(var(--hue1),100%,90%,1);border-top-left-radius:var(--radius)}.pane:first-child.neon-glow:after{bottom:0;right:0;--hue: var(--hue2);border-bottom-color:hsla(var(--hue2),100%,90%,1);border-right-color:hsla(var(--hue2),100%,90%,1);border-bottom-right-radius:var(--radius)}.pane.right.neon-glow:before{top:0;right:0;--hue: var(--hue1);border-top-color:hsla(var(--hue1),100%,90%,1);border-right-color:hsla(var(--hue1),100%,90%,1);border-top-right-radius:var(--radius)}.pane.right.neon-glow:after{bottom:0;left:0;--hue: var(--hue2);border-bottom-color:hsla(var(--hue2),100%,90%,1);border-left-color:hsla(var(--hue2),100%,90%,1);border-bottom-left-radius:var(--radius)}@keyframes neon-glow{0%{opacity:0}3%{opacity:1}10%{opacity:0}12%{opacity:.7}16%{opacity:.3}to{opacity:1}}:root{transition:--hue1 8s cubic-bezier(.25,.46,.45,.94),--hue2 8s cubic-bezier(.25,.46,.45,.94)}@property --hue1{syntax: "<number>"; inherits: true; initial-value: 255;}@property --hue2{syntax: "<number>"; inherits: true; initial-value: 190;}