:root{--primary:#61afef;--primary-light:#7ab8f3;--primary-dark:#4c8bb9;--bg:#282c34;--surface:#21252b;--surface-hover:#2c323e;--text:#abb2bf;--text-muted:#5c6370;--border:#3d4451;--accent:#e06c75;--success:#98c379;--warning:#d19a66;--radius:8px;--radius-sm:6px;--shadow:0 2px 8px rgba(0, 0, 0, 0.15);--shadow-lg:0 4px 12px rgba(0, 0, 0, 0.2);--shadow-glow:0 0 20px rgba(97, 175, 239, 0.3);--transition:all 0.2s ease-in-out}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,var(--bg) 0,#1e2229 100%);color:var(--text);font-family:Inter,sans-serif;min-height:100vh;display:grid;place-items:center;padding:1rem;line-height:1.6;overflow:hidden}body.fullscreen{padding:0;display:block;overflow:hidden}.wrapper{display:grid;grid-template-columns:72px 1fr;gap:1rem;max-width:1800px;width:100%;height:100vh;z-index:2}.sidebar{background:var(--surface);border-radius:var(--radius);padding:1rem 0;display:flex;flex-direction:column;align-items:center;gap:.75rem;box-shadow:var(--shadow-lg);border:1px solid var(--border);position:relative;overflow:hidden}.sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent))}.sidebar-item{position:relative;width:48px;height:48px;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;background:#fff0;transition:var(--transition);border:1px solid var(--border);box-shadow:var(--shadow)}.sidebar-item img{width:100%;height:100%;object-fit:contain;padding:.25rem;transition:var(--transition);filter:brightness(.9)}.sidebar-item:hover{background:var(--surface-hover);transform:translateY(-2px) rotate(2deg);border-color:var(--primary);box-shadow:var(--shadow-glow)}.sidebar-item:hover img{filter:brightness(1.2) drop-shadow(0 2px 4px rgb(97 175 239 / .3))}.sidebar-item::after{content:attr(data-lang);position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);font-size:.7rem;color:var(--text-muted);white-space:nowrap;opacity:0;transition:var(--transition);font-weight:500;background:var(--surface-hover);padding:.25rem .5rem;border-radius:var(--radius-sm);border:1px solid var(--border)}.sidebar-item:hover::after{opacity:1;bottom:-28px}.container{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);border:1px solid var(--border);display:grid;grid-template-rows:auto 1fr auto auto;gap:1rem;padding:1.5rem;height:100%;overflow:hidden;position:relative}.container::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--primary),transparent)}.container.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;border-radius:0;padding:1.5rem;z-index:1000}.container.fullscreen .main-content{grid-template-columns:1fr 1fr!important}.container.fullscreen .resizer{display:none}.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;padding:.75rem 1rem;background:var(--surface-hover);border-radius:var(--radius-sm);border:1px solid var(--border);box-shadow:var(--shadow)}.toolbar-center{flex:1;display:flex;justify-content:center;min-width:200px}.toolbar-left,.toolbar-right{display:flex;gap:.5rem;align-items:center}.toolbar button,.toolbar select{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);background:var(--surface);color:var(--text);display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow)}.toolbar button{background:var(--primary);color:#fff;border:none}.toolbar button:hover{background:var(--primary-light);transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-glow)}.toolbar select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235c6370' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;background-size:1rem;padding-right:2.2rem;min-height:44px}.toolbar select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgb(97 175 239 / .2)}h1{font-size:1.5rem;font-weight:700;color:var(--text);letter-spacing:-.025em;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#fff0}.main-content{display:grid;grid-template-columns:1fr 8px 1fr;gap:0;height:100%;overflow:hidden}.editor-wrapper,.output-wrapper{border-radius:var(--radius-sm);overflow:hidden;background:var(--bg);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:var(--transition)}.editor-wrapper:hover,.output-wrapper:hover{box-shadow:0 4px 16px rgb(0 0 0 / .25)}.CodeMirror{height:100%!important;font-size:1rem;line-height:1.6;border-radius:var(--radius-sm);flex:1}.CodeMirror .CodeMirror-gutters{background:var(--surface-hover);border-right:1px solid var(--border)}.output-section{display:flex;flex-direction:column;height:100%}.output-section h3{font-size:1rem;font-weight:600;color:var(--primary);padding:.75rem 1rem;background:var(--surface-hover);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:.5rem;flex-shrink:0;box-shadow:var(--shadow)}#output{background:var(--bg);color:var(--success);padding:1rem;flex:1;overflow-y:auto;white-space:pre-wrap;font-family:'JetBrains Mono',monospace;font-size:.95rem;line-height:1.5}#output.error{color:var(--accent)}.resizer{width:8px;background:var(--border);cursor:col-resize;border-radius:4px;transition:var(--transition);align-self:stretch;position:relative;min-width:16px;touch-action:none}.resizer::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:20px;background:var(--border)}.resizer:hover{background:var(--primary);box-shadow:var(--shadow-glow)}.button-container{display:flex;gap:1rem;justify-content:center;padding:.75rem 0}.button-container button{flex:1;max-width:140px;padding:.75rem 1rem;font-size:.9rem;font-weight:600;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:var(--shadow);position:relative;overflow:hidden}.button-container button::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left .5s}.button-container button:hover::before{left:100%}.button-container button:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}button:disabled{background:var(--text-muted)!important;cursor:not-allowed;transform:none}.status-bar{padding:.75rem 1rem;background:var(--surface-hover);border-radius:var(--radius-sm);font-size:.875rem;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);box-shadow:var(--shadow);font-family:'JetBrains Mono',monospace}.status-progress{width:100px;height:4px;background:rgb(255 255 255 / .1);border-radius:2px;overflow:hidden;display:none}.status-progress.active{display:block}.status-progress div{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:2px;animation:1.5s ease-in-out infinite progress}@keyframes progress{0%,100%{width:0%}50%{width:100%}}#input-line{background:#fff0;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.95rem;border:none;padding:.25rem 0;outline:0;caret-color:var(--primary-light);min-width:200px;min-height:44px}#input-line:focus{border-color:var(--primary-light);box-shadow:0 2px 4px rgb(97 175 239 / .2)}.blinking-cursor{display:inline-block;width:8px;height:1.2em;background:var(--primary);margin-left:.25rem;animation:.75s step-end infinite blink;box-shadow:0 0 4px rgb(97 175 239 / .5)}@keyframes blink{50%{background:#fff0}}.prompt{color:var(--primary);font-weight:600}.tooltip{position:relative}.tooltip::before{content:attr(data-tooltip);position:absolute;bottom:120%;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--text);padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:.75rem;white-space:nowrap;opacity:0;visibility:hidden;transition:var(--transition);z-index:10;box-shadow:var(--shadow-lg);border:1px solid var(--border)}.tooltip::after{content:'';position:absolute;bottom:120%;left:50%;transform:translateX(-50%) translateY(100%);border:5px solid #fff0;border-top-color:var(--border)}.tooltip:hover::after,.tooltip:hover::before{opacity:1;visibility:visible}.button-container button:active,.sidebar-item:active,.toolbar button:active{background:var(--surface-hover);transform:translateY(-2px) rotate(2deg);box-shadow:var(--shadow-glow)}.sidebar-item:active img{filter:brightness(1.2) drop-shadow(0 2px 4px rgb(97 175 239 / .3))}@media (max-width:768px){body.fullscreen .sidebar{display:none}.container.fullscreen{grid-template-rows:auto 1fr auto 0;padding:.5rem;gap:.5rem}.container.fullscreen .button-container button:nth-child(2),.container.fullscreen .status-bar,.container.fullscreen .toolbar-center,.container.fullscreen .toolbar-left>:last-child,.container.fullscreen .toolbar-right>:not(:last-child){display:none}}@media (max-width:480px){h1{font-size:1.25rem}.toolbar button,.toolbar select{font-size:.8rem;padding:.4rem .75rem}.button-container button{font-size:.8rem;padding:.5rem .75rem}.CodeMirror{font-size:.9rem}.sidebar{width:60px;padding:.75rem 0}.sidebar-item{width:40px;height:40px}}@media (max-width:600px) and (min-width:481px){.sidebar{width:65px;padding:.85rem 0}.sidebar-item{width:44px;height:44px}.toolbar button,.toolbar select{font-size:.85rem;padding:.45rem .85rem}.button-container button{font-size:.85rem;padding:.6rem .85rem}.CodeMirror{font-size:.95rem}.container.fullscreen{padding:.75rem;gap:.75rem}}@media (min-width:769px) and (max-width:1024px){.wrapper{grid-template-columns:80px 1fr}.sidebar-item{width:52px;height:52px}.toolbar{gap:1rem}.main-content{grid-template-columns:1.2fr 8px 0.8fr}.container{padding:2rem}}@media (orientation:landscape) and (max-height:600px){.container{padding:1rem;gap:.75rem}.main-content{grid-template-columns:1.5fr 8px 1fr}.toolbar{flex-wrap:nowrap}#output,.CodeMirror{font-size:.95rem}}.collapsed{display:none!important}