:root{font-family:JetBrains Mono,Fira Code,SFMono-Regular,Menlo,Consolas,monospace;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html:not(.dark){font-weight:500;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}:root,html.dark{--bg-primary: #05060a;--bg-secondary: rgba(10, 12, 20, .92);--bg-tertiary: rgba(15, 18, 30, .85);--bg-editor: rgba(2, 6, 23, .75);--bg-toggle: rgba(15, 18, 30, .6);--text-primary: #f8fafc;--text-secondary: #cbd5f5;--text-tertiary: #94a3b8;--text-editor: #e2e8f0;--border-primary: rgba(148, 163, 184, .15);--border-secondary: rgba(59, 130, 246, .25);--border-tertiary: rgba(148, 163, 184, .4);--gradient-bg: radial-gradient(circle at top, #1d2b64, transparent 60%), radial-gradient(circle at bottom, #0f2027, transparent 55%), #05060a;--shadow: 0 20px 60px rgba(0, 0, 0, .45);--hint-bg: rgba(15, 118, 110, .15);--hint-border: rgba(45, 212, 191, .3);--hint-text: #99f6e4}html:not(.dark){--bg-primary: #f8fafc;--bg-secondary: rgba(255, 255, 255, .95);--bg-tertiary: rgba(248, 250, 252, .9);--bg-editor: rgba(241, 245, 249, .8);--bg-toggle: rgba(241, 245, 249, .8);--text-primary: #020617;--text-secondary: #1e293b;--text-tertiary: #475569;--text-editor: #0f172a;--border-primary: rgba(148, 163, 184, .3);--border-secondary: rgba(59, 130, 246, .4);--border-tertiary: rgba(148, 163, 184, .5);--gradient-bg: radial-gradient(circle at top, #e0e7ff, transparent 60%), radial-gradient(circle at bottom, #f0f9ff, transparent 55%), #f8fafc;--shadow: 0 20px 60px rgba(0, 0, 0, .1);--hint-bg: rgba(14, 165, 233, .1);--hint-border: rgba(14, 165, 233, .3);--hint-text: #0369a1}:root,:root.dark-theme{color:var(--text-primary);background-color:var(--bg-primary)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--gradient-bg);color:inherit;transition:background .3s ease,color .3s ease}#app{min-height:100vh;padding:3rem clamp(1rem,5vw,3.5rem)}.page-layout{max-width:1200px;margin:0 auto;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:1.5rem;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:var(--shadow);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}.toolbar{display:flex;flex-direction:column;gap:1.5rem}.toolbar-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;position:relative}.title-block{flex:1;min-width:0}.brand{display:flex;flex-direction:column;gap:.5rem}.brand-name{margin:0;font-size:1.75rem;font-weight:700;background:linear-gradient(135deg,#6366f1,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.brand-desc{margin:0;color:var(--text-secondary);font-size:.95rem;line-height:1.6;font-weight:500;transition:color .3s ease}.brand-features{margin:0;color:var(--text-tertiary);font-size:.875rem;line-height:1.6;font-weight:400;transition:color .3s ease}.feature-item{color:var(--text-secondary);font-weight:600;transition:color .3s ease}.toolbar-right{position:absolute;top:0;right:0;display:flex;align-items:center;gap:.5rem}.actions{display:flex;gap:.75rem;width:100%;margin-top:.5rem}.btn{border-radius:.75rem;padding:.75rem 1.25rem;font-size:.95rem;font-family:inherit;font-weight:600;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer;transition:all .2s ease}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#22d3ee,#3b82f6);color:#05060a;border-color:transparent}.btn.primary:hover:not(:disabled){filter:brightness(1.05)}.btn.ghost{border-color:var(--border-tertiary);color:var(--text-editor)}.btn.ghost:hover:not(:disabled){border-color:#22d3ee;color:#22d3ee}.btn.outline{border-color:#5eead480;color:#5eead4}.btn.outline:hover:not(:disabled){background:#5eead41a}.btn.toggle{border-color:var(--border-tertiary);color:var(--text-tertiary);background:var(--bg-toggle);font-size:.9rem;padding:.65rem 1rem;transition:all .3s ease}.btn.toggle:hover:not(:disabled){border-color:#6366f1;color:#a5b4fc;background:#6366f11a}.btn.toggle.active{border-color:#6366f1;color:#a5b4fc;background:#6366f133}.btn.theme-toggle{border-color:var(--border-tertiary);color:var(--text-tertiary);background:var(--bg-toggle);font-size:.9rem;padding:.65rem 1rem;transition:all .3s ease}.btn.theme-toggle:hover:not(:disabled){border-color:#f59e0b;color:#fbbf24;background:#f59e0b1a}.btn.locale-toggle{border-color:var(--border-tertiary);color:var(--text-tertiary);background:var(--bg-toggle);font-size:.9rem;padding:.65rem 1rem;transition:all .3s ease;font-weight:600}.btn.locale-toggle:hover:not(:disabled){border-color:#6366f1;color:#a5b4fc;background:#6366f11a}.locale-selector{position:relative}.locale-arrow{margin-left:.5rem;font-size:.7rem;transition:transform .2s ease}.locale-selector:hover .locale-arrow{transform:translateY(1px)}.locale-menu{position:absolute;top:calc(100% + .5rem);right:0;background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:.75rem;padding:.5rem;min-width:140px;box-shadow:0 10px 40px #0000004d;z-index:1000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-height:300px;overflow-y:auto}.locale-item{display:block;width:100%;padding:.65rem 1rem;text-align:left;background:transparent;border:none;color:var(--text-secondary);font-size:.9rem;font-weight:500;border-radius:.5rem;cursor:pointer;transition:all .2s ease;font-family:inherit}.locale-item:hover{background:#6366f126;color:#a5b4fc}.locale-item.active{background:#6366f140;color:#a5b4fc;font-weight:600}.mode-toggle{display:flex;align-items:center}.split-pane{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.pane{display:flex;flex-direction:column;background:var(--bg-tertiary);border:1px solid var(--border-secondary);border-radius:1.2rem;padding:1rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .3s ease,border-color .3s ease}.pane-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.pane-title{font-size:1rem;font-weight:600;color:var(--text-primary);transition:color .3s ease}.pane-desc{font-size:.85rem;color:var(--text-tertiary);transition:color .3s ease}.pane-desc.secondary{color:#38bdf8}.editor{flex:1;width:100%;border:none;background:var(--bg-editor);color:var(--text-editor);border-radius:.9rem;padding:1rem;font-size:.92rem;line-height:1.5;font-family:inherit;box-shadow:inset 0 0 0 1px var(--border-primary);resize:none;min-height:360px;transition:background .3s ease,color .3s ease,box-shadow .3s ease}.editor:focus{outline:2px solid rgba(56,189,248,.7)}.editor.output{white-space:pre-wrap;overflow-y:auto}html:not(.dark) .editor{font-weight:500}.hint-bar{display:flex;flex-wrap:wrap;gap:.5rem;border-radius:.75rem;padding:.75rem 1rem;background:var(--hint-bg);border:1px solid var(--hint-border);color:var(--hint-text);font-size:.9rem;transition:background .3s ease,border-color .3s ease,color .3s ease}@media(max-width:900px){.split-pane{grid-template-columns:1fr}.editor{min-height:220px}}@media(max-width:640px){.toolbar-header{padding-top:2.5rem}.toolbar-right{position:absolute;top:.5rem;right:0}.brand-name{font-size:1.5rem}.brand-desc{font-size:.875rem}.brand-features{font-size:.8rem}.actions{width:100%;flex-wrap:wrap}.btn{flex:1;text-align:center}}