:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ctp-base:#1e1e2e;--ctp-mantle:#181825;--ctp-crust:#11111b;--ctp-surface0:#313244;--ctp-surface1:#45475a;--ctp-surface2:#585b70;--ctp-text:#cdd6f4;--ctp-subtext:#a6adc8;--ctp-overlay:#6c7086;--ctp-accent:#b4befe;--ctp-accent-strong:#cba6f7;--ctp-success:#a6e3a1;--ctp-muted:#9399b2;font-family:DM Sans,Inter,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 20% 20%,#94e2d514,transparent 30%),radial-gradient(circle at 80% 0%,#cba6f71f,transparent 30%),linear-gradient(135deg,var(--ctp-crust),var(--ctp-mantle));min-height:100vh;color:var(--ctp-text);margin:0;overflow:hidden}.app-shell{flex-direction:column;gap:18px;height:100vh;padding:24px;display:flex}.app-header{justify-content:space-between;align-items:center;gap:20px;display:flex}.app-title h1{letter-spacing:-.01em;margin:0;font-size:24px}.app-title p{color:var(--ctp-subtext);max-width:640px;margin:4px 0 0}.app-actions{align-items:center;gap:12px;display:flex}.segmented-control{background:var(--ctp-surface1);border:1px solid var(--ctp-surface2);border-radius:12px;gap:4px;padding:4px;display:inline-flex}.segment{color:var(--ctp-text);cursor:pointer;background:0 0;border:none;border-radius:10px;padding:8px 12px;transition:background .12s,color .12s,box-shadow .12s}.segment:hover{background:var(--ctp-surface2)}.segment[aria-pressed=true]{background:linear-gradient(120deg,var(--ctp-accent),var(--ctp-accent-strong));color:#0d0c14;box-shadow:0 8px 16px #0000004d}.ghost-button{border:1px solid var(--ctp-surface2);background:var(--ctp-surface1);color:var(--ctp-text);cursor:pointer;border-radius:10px;padding:10px 14px;transition:background .12s,border-color .12s,transform .12s}.ghost-button:hover{background:var(--ctp-surface2);border-color:var(--ctp-accent);transform:translateY(-1px)}.editor-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;display:grid}.panel{border:1px solid var(--ctp-surface2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#313244d9;border-radius:16px;flex-direction:column;gap:12px;padding:16px;display:flex;box-shadow:0 12px 30px #00000047}.panel-heading{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.panel-title{letter-spacing:.01em;font-weight:700}.field{flex-direction:column;gap:6px;width:100%;display:flex}.field-label{color:var(--ctp-subtext);font-size:13px}.text-input{border:1px solid var(--ctp-surface2);background:var(--ctp-surface0);width:100%;color:var(--ctp-text);border-radius:10px;padding:10px 12px;font-size:14px;transition:border-color .12s,box-shadow .12s}.text-input:focus{border-color:var(--ctp-accent);outline:none;box-shadow:0 0 0 3px #b4befe33}.code-area{resize:vertical;border:1px solid var(--ctp-surface2);background:var(--ctp-surface0);width:100%;min-height:240px;color:var(--ctp-text);border-radius:12px;padding:12px 14px;font-family:JetBrains Mono,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;transition:border-color .12s,box-shadow .12s}.code-area:focus{border-color:var(--ctp-accent);outline:none;box-shadow:0 0 0 3px #b4befe33}.diff-card{border:1px solid var(--ctp-surface2);background:#313244e6;border-radius:16px;flex:1;min-height:320px;overflow:hidden;box-shadow:0 16px 40px #00000059}.diff-inner{height:100%;padding:12px;overflow:hidden}.diff-inner>*{border-radius:12px;overflow:hidden}@media (max-width:900px){.app-shell{gap:16px;padding:16px}.app-header{flex-direction:column;align-items:flex-start}.app-actions{flex-wrap:wrap;width:100%}}