html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#101214;color:#f4f7fb}#app{display:grid;grid-template-columns:320px 1fr}#renderCanvas{width:100%;height:100%;outline:none;display:block}.panel{border-right:1px solid #27313a;background:#15191d;padding:20px;display:flex;flex-direction:column;gap:20px}.kicker{color:#7dd3fc;font-size:12px;text-transform:uppercase;letter-spacing:0}h1{font-size:24px;line-height:1.2;margin:6px 0 0}.controls{display:grid;grid-template-columns:1fr;gap:10px}.test-case-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.text-control{display:grid;gap:6px;color:#99a7b5;font-size:12px}textarea{width:100%;min-height:92px;box-sizing:border-box;resize:vertical;border:1px solid #3a4652;background:#101820;color:#f4f7fb;border-radius:6px;padding:10px;font:inherit;line-height:1.4}button{min-height:40px;border:1px solid #3a4652;background:#1f2933;color:#f4f7fb;border-radius:6px;font-weight:600;cursor:pointer}button:disabled{opacity:.45;cursor:default}.metrics{display:grid;gap:12px;margin:0}.metrics div{display:grid;gap:4px}dt{color:#99a7b5;font-size:12px}dd{margin:0;font-variant-numeric:tabular-nums}@media(max-width:800px){#app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.panel{border-right:0;border-bottom:1px solid #27313a}}