Add initial webui

webui/src/styles/Playground.module.css

@@ -0,0 +1,144 @@
+.playgroundRoot {
+	height: 100vh;
+	max-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: #1a1a1a;
+	color: #e0e0e0;
+	overflow: hidden;
+}
+
+.header {
+	padding: 0.75rem;
+	border-bottom: 1px solid #333;
+	background: #252526;
+}
+
+.headerField {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 12px;
+}
+
+.buttonGroup {
+	display: flex;
+	gap: 8px;
+	align-items: center;
+}
+
+.mainContent {
+	flex: 1;
+	display: flex;
+	min-height: 0;
+	overflow: hidden;
+}
+
+.leftPanel {
+	width: 50%;
+	border-right: 1px solid #333;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+.rightPanel {
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	min-height: 0;
+}
+
+.terminalPanel {
+	flex: 0 0 auto;
+	display: flex;
+	flex-direction: column;
+	border-bottom: 1px solid #333;
+}
+
+.outputPanel {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	min-height: 0;
+}
+
+.panelHeader {
+	background: #2d2d30;
+	border-bottom: 1px solid #333;
+	padding: 8px 12px;
+	font-size: 12px;
+	font-weight: 600;
+	color: #cccccc;
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.terminalContainer {
+	flex: 0 0 auto;
+	overflow: hidden;
+	padding: 8px;
+	background: #1D1F21;
+}
+
+.result {
+	border: 0;
+	margin: 0;
+	padding: 8px;
+	resize: none;
+	font-family: "Consolas", "Monaco", "Courier New", monospace;
+	flex: 1;
+	outline: none;
+	font-size: 13px;
+	line-height: 1.4;
+	background: #1e1e1e;
+	color: #d4d4d4;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.configPanel {
+	padding: 16px;
+	min-width: 250px;
+}
+
+.helpPanel {
+	padding: 16px;
+	width: 300px;
+	max-width: 90vw;
+	box-sizing: border-box;
+}
+
+.helpPanel h1 {
+	font-size: 18px;
+	margin: 0 0 8px 0;
+	color: #e0e0e0;
+}
+
+.helpPanel p {
+	margin: 0 0 16px 0;
+	line-height: 1.5;
+	color: #cccccc;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+.helpPanel a {
+	color: #4fc3f7;
+	text-decoration: none;
+}
+
+.helpPanel a:hover {
+	text-decoration: underline;
+}
+
+.footer {
+	font-size: 12px;
+	color: #999;
+	border-top: 1px solid #444;
+	padding-top: 12px;
+	margin-top: 12px;
+}