1 files changed, 272 insertions, 0 deletions
diff --git a/js/scripting-lang/web/style.css b/js/scripting-lang/web/style.css
new file mode 100644
index 0000000..fea1820
--- /dev/null
+++ b/js/scripting-lang/web/style.css
@@ -0,0 +1,272 @@
+body {
+  --color-bg: #f8f8ff;
+  --color-text: #222;
+  --color-main-bg: #fff;
+  --color-main-border: #222;
+  --color-shadow: #0001;
+  --color-label: #222;
+  --color-input-border: #222;
+  --color-button-bg: #222;
+  --color-button-text: #fff;
+  --color-button-disabled-bg: #888;
+  --color-result-border: #aaa;
+  --color-result-bg: #f6f6fa;
+  --color-error: #b30000;
+  --color-success: #006600;
+  --color-code-bg: #f0f0f0;
+  --color-evolution-node: #e8f4f8;
+  --color-evolution-border: #4a90e2;
+
+  font-family: system-ui, sans-serif;
+  background: var(--color-bg);
+  color: var(--color-text);
+  margin: 0;
+  padding: 0;
+}
+main {
+  max-width: 800px;
+  margin: 3rem auto;
+  background: var(--color-main-bg);
+  border: 2px solid var(--color-main-border);
+  border-radius: 8px;
+  padding: 2rem 1.5rem;
+  box-shadow: 0 2px 8px var(--color-shadow);
+}
+label {
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.98em;
+  margin-bottom: 0.2em;
+  display: block;
+  color: var(--color-label);
+}
+input[type="text"] {
+  width: 100%;
+  padding: 0.6em;
+  font-size: 1em;
+  border: 2px solid var(--color-input-border);
+  border-radius: 0.2em;
+  margin-bottom: 1em;
+  box-sizing: border-box;
+}
+button {
+  background: var(--color-button-bg);
+  color: var(--color-button-text);
+  border: none;
+  border-radius: 0.2em;
+  padding: 0.6em 1.2em;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+  font-size: 1em;
+  margin-bottom: 1em;
+  margin-right: 0.5em;
+}
+button:disabled {
+  background: var(--color-button-disabled-bg);
+  cursor: not-allowed;
+}
+.result {
+  margin-top: 1.5em;
+  padding: 1em;
+  border: 1.5px solid var(--color-result-border);
+  border-radius: 0.3em;
+  background: var(--color-result-bg);
+}
+.pokemon-sprite {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  margin: 0 auto;
+  display: block;
+}
+.error {
+  color: var(--color-error);
+  font-weight: bold;
+  margin-top: 1em;
+}
+
+/* Evolution Tree Styles */
+.evolution-section {
+  margin-top: 2em;
+  padding: 1em;
+  border: 1.5px solid var(--color-result-border);
+  border-radius: 0.3em;
+  background: var(--color-result-bg);
+}
+
+.evolution-tree {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+  margin-top: 1em;
+}
+
+.evolution-stage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2em;
+  flex-wrap: wrap;
+}
+
+.evolution-branch {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.pokemon-node {
+  background: var(--color-evolution-node);
+  border: 2px solid var(--color-evolution-border);
+  border-radius: 0.5em;
+  padding: 0.5em 1em;
+  font-weight: bold;
+  text-align: center;
+  min-width: 120px;
+}
+
+.evolution-detail {
+  font-size: 0.8em;
+  color: var(--color-text);
+  text-align: center;
+}
+
+.evolution-method {
+  background: var(--color-button-bg);
+  color: var(--color-button-text);
+  padding: 0.2em 0.5em;
+  border-radius: 0.3em;
+  font-size: 0.7em;
+  text-transform: uppercase;
+}
+
+/* Baba Yaga Section Styles */
+.baba-yaga-section {
+  margin-top: 2em;
+  padding: 1em;
+  border: 1.5px solid var(--color-result-border);
+  border-radius: 0.3em;
+  background: var(--color-result-bg);
+}
+
+.script-editor {
+  margin-top: 1em;
+}
+
+textarea {
+  width: 100%;
+  padding: 0.6em;
+  font-size: 0.9em;
+  font-family: 'Courier New', monospace;
+  border: 2px solid var(--color-input-border);
+  border-radius: 0.2em;
+  margin-bottom: 1em;
+  box-sizing: border-box;
+  resize: vertical;
+  min-height: 120px;
+}
+
+.script-controls {
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.help-text {
+  font-size: 0.9em;
+  color: #666;
+  margin-top: 0.5em;
+  font-style: italic;
+}
+
+.workflow-arrow {
+  text-align: center;
+  font-size: 2em;
+  margin: 1em 0;
+  color: var(--color-button-bg);
+  font-weight: bold;
+}
+
+select {
+  padding: 0.6em;
+  font-size: 0.9em;
+  border: 2px solid var(--color-input-border);
+  border-radius: 0.2em;
+  background: var(--color-main-bg);
+  cursor: pointer;
+}
+
+.script-error {
+  color: var(--color-error);
+  font-weight: bold;
+  margin-top: 1em;
+  padding: 0.5em;
+  background: #ffe6e6;
+  border-radius: 0.3em;
+  border-left: 4px solid var(--color-error);
+}
+
+.script-output {
+  margin-top: 1em;
+  padding: 1em;
+  background: var(--color-code-bg);
+  border-radius: 0.3em;
+  border: 1px solid var(--color-result-border);
+}
+
+.script-output h4, .script-output h5, .script-output h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  color: var(--color-text);
+}
+
+.emitted-data, .script-result {
+  margin-bottom: 1em;
+}
+
+.emitted-event {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  background: var(--color-main-bg);
+  border-radius: 0.3em;
+  border: 1px solid var(--color-result-border);
+}
+
+pre {
+  background: var(--color-main-bg);
+  padding: 0.5em;
+  border-radius: 0.3em;
+  border: 1px solid var(--color-result-border);
+  overflow-x: auto;
+  font-size: 0.8em;
+  margin: 0;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+  main {
+    max-width: 95%;
+    margin: 1rem auto;
+    padding: 1rem;
+  }
+  
+  .evolution-stage {
+    flex-direction: column;
+    gap: 1em;
+  }
+  
+  .script-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  button {
+    margin-right: 0;
+  }
+} 
\ No newline at end of file