diff --git a/src/app.css b/src/app.css
index 60d1e18..a6f9670 100644
--- a/src/app.css
+++ b/src/app.css
@@ -27,3 +27,23 @@ body {
height: 100vh;
overflow: hidden;
}
+
+/* Sharp-corner visual language across UI */
+button,
+input,
+textarea,
+select,
+[role="button"],
+[class*="panel"],
+[class*="modal"],
+[class*="container"],
+[class*="toast"],
+[class*="card"] {
+ border-radius: 0;
+}
+
+/* Remove rounded corners from icon rectangles as well */
+svg rect {
+ rx: 0 !important;
+ ry: 0 !important;
+}
diff --git a/src/components/code/CodeConsole.svelte b/src/components/code/CodeConsole.svelte
index 953cb87..86e0100 100644
--- a/src/components/code/CodeConsole.svelte
+++ b/src/components/code/CodeConsole.svelte
@@ -131,7 +131,7 @@ const formattedTime = $derived(
background: #3e3e42;
color: #cccccc;
border: none;
- border-radius: 3px;
+ border-radius: 0;
cursor: pointer;
font-size: 11px;
transition: background 0.1s;
@@ -153,7 +153,7 @@ const formattedTime = $derived(
padding: 8px 12px;
border-left: 3px solid #f48771;
margin-bottom: 12px;
- border-radius: 3px;
+ border-radius: 0;
}
.stdout pre,
diff --git a/src/components/code/ConfirmModal.svelte b/src/components/code/ConfirmModal.svelte
index 5e614ce..0e91d30 100644
--- a/src/components/code/ConfirmModal.svelte
+++ b/src/components/code/ConfirmModal.svelte
@@ -73,7 +73,7 @@ function handleKeydown(event: KeyboardEvent) {
.modal-content {
background: #252526;
border: 1px solid #3e3e42;
- border-radius: 4px;
+ border-radius: 0;
padding: 24px;
min-width: 300px;
max-width: 500px;
@@ -97,7 +97,7 @@ function handleKeydown(event: KeyboardEvent) {
.confirm-button {
padding: 8px 16px;
border: none;
- border-radius: 3px;
+ border-radius: 0;
font-size: 13px;
cursor: pointer;
transition: background-color 0.1s;
diff --git a/src/components/code/EditorLayout.svelte b/src/components/code/EditorLayout.svelte
index 3e606e7..154a072 100644
--- a/src/components/code/EditorLayout.svelte
+++ b/src/components/code/EditorLayout.svelte
@@ -522,7 +522,7 @@ const executeButtonLabel = $derived(
padding: 6px 10px;
background: transparent;
border: 1px solid #3e3e42;
- border-radius: 3px;
+ border-radius: 0;
font-size: 16px;
cursor: pointer;
transition: background-color 0.1s;
@@ -548,7 +548,7 @@ const executeButtonLabel = $derived(
background: #0e639c;
color: white;
border: none;
- border-radius: 3px;
+ border-radius: 0;
cursor: pointer;
font-size: 13px;
font-weight: 500;
@@ -570,7 +570,7 @@ const executeButtonLabel = $derived(
background: #3e3e42;
color: #cccccc;
border: none;
- border-radius: 3px;
+ border-radius: 0;
cursor: pointer;
font-size: 16px;
line-height: 1;
@@ -639,7 +639,7 @@ const executeButtonLabel = $derived(
background: transparent;
color: #cccccc;
border: none;
- border-radius: 3px;
+ border-radius: 0;
cursor: pointer;
font-size: 13px;
transition: background 0.1s;
diff --git a/src/components/code/ExampleSelector.svelte b/src/components/code/ExampleSelector.svelte
index a190157..7d91f81 100644
--- a/src/components/code/ExampleSelector.svelte
+++ b/src/components/code/ExampleSelector.svelte
@@ -91,7 +91,7 @@ $effect(() => {
padding: 4px 8px;
background: transparent;
border: 1px solid #3e3e42;
- border-radius: 3px;
+ border-radius: 0;
color: #d4d4d4;
font-size: 13px;
cursor: pointer;
@@ -123,7 +123,7 @@ $effect(() => {
max-width: 500px;
background: #252526;
border: 1px solid #3e3e42;
- border-radius: 3px;
+ border-radius: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
z-index: 1000;
max-height: 400px;
diff --git a/src/components/comments/CommentBubble.svelte b/src/components/comments/CommentBubble.svelte
index fa2b101..c644f0b 100644
--- a/src/components/comments/CommentBubble.svelte
+++ b/src/components/comments/CommentBubble.svelte
@@ -89,7 +89,7 @@ function handleTimestampClick(event: MouseEvent | KeyboardEvent): void {
/* Dark theme styling - match other panels */
background: rgba(0, 0, 0, 0.9);
border: 1px solid #444;
- border-radius: 4px;
+ border-radius: 0;
/* NO ANIMATIONS */
transition: none;
@@ -101,7 +101,7 @@ function handleTimestampClick(event: MouseEvent | KeyboardEvent): void {
display: flex;
align-items: center;
justify-content: center;
- border-radius: 50%;
+ border-radius: 0;
}
.comment-bubble.preview,
diff --git a/src/components/comments/CommentInputModal.svelte b/src/components/comments/CommentInputModal.svelte
index 7e28fa0..7a1a92f 100644
--- a/src/components/comments/CommentInputModal.svelte
+++ b/src/components/comments/CommentInputModal.svelte
@@ -157,7 +157,7 @@ $effect(() => {
.modal-content {
background: rgba(0, 0, 0, 0.95);
border: 1px solid #444;
- border-radius: 4px;
+ border-radius: 0;
padding: 20px;
min-width: 400px;
max-width: 600px;
@@ -184,7 +184,7 @@ $effect(() => {
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid #555;
- border-radius: 4px;
+ border-radius: 0;
color: #fff;
font-family: monospace;
font-size: 14px;
@@ -226,7 +226,7 @@ $effect(() => {
button {
padding: 8px 16px;
border: 1px solid #555;
- border-radius: 4px;
+ border-radius: 0;
background: rgba(255, 255, 255, 0.05);
color: #ccc;
font-family: monospace;
diff --git a/src/components/comments/CommentPanel.svelte b/src/components/comments/CommentPanel.svelte
index b592ac9..b77fedb 100644
--- a/src/components/comments/CommentPanel.svelte
+++ b/src/components/comments/CommentPanel.svelte
@@ -493,10 +493,10 @@ onDestroy(() => {
>
@@ -633,7 +633,7 @@ onDestroy(() => {
max-height: 600px;
background: rgba(0, 0, 0, 0.9);
border: 1px solid #444;
- border-radius: 4px;
+ border-radius: 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
overflow: hidden;
user-select: none;
@@ -698,7 +698,7 @@ onDestroy(() => {
padding: 8px 12px;
background: rgba(40, 40, 40, 0.8);
border: 1px solid #555;
- border-radius: 4px;
+ border-radius: 0;
color: #ccc;
font-size: 11px;
cursor: pointer;
@@ -745,7 +745,7 @@ onDestroy(() => {
padding: 10px;
background: rgba(20, 20, 20, 0.6);
border: 1px solid #333;
- border-radius: 4px;
+ border-radius: 0;
}
.comment-item:hover {
@@ -773,7 +773,7 @@ onDestroy(() => {
padding: 0;
background: rgba(50, 50, 50, 0.9);
border: 1px solid #555;
- border-radius: 2px;
+ border-radius: 0;
color: #ccc;
font-size: 11px;
cursor: pointer;
@@ -827,7 +827,7 @@ onDestroy(() => {
padding: 4px 8px;
background: rgba(40, 40, 40, 0.6);
border: 1px solid #444;
- border-radius: 3px;
+ border-radius: 0;
color: #aaa;
font-size: 10px;
cursor: pointer;
@@ -870,7 +870,7 @@ onDestroy(() => {
min-height: 56px;
background: rgba(10, 10, 10, 0.9);
border: 1px solid #444;
- border-radius: 3px;
+ border-radius: 0;
color: #ccc;
font-family: monospace;
font-size: 11px;
diff --git a/src/components/ui/DesktopFileControls.svelte b/src/components/ui/DesktopFileControls.svelte
index 934db4e..096e42d 100644
--- a/src/components/ui/DesktopFileControls.svelte
+++ b/src/components/ui/DesktopFileControls.svelte
@@ -181,7 +181,7 @@ $effect(() => {
padding: 0.5rem 0.75rem;
background-color: #2a2a2a;
border: 1px solid #444;
- border-radius: 0.375rem;
+ border-radius: 0;
color: #e5e7eb;
font-size: 0.875rem;
cursor: pointer;
@@ -210,7 +210,7 @@ $effect(() => {
padding: 0.5rem 0.75rem;
background-color: #1e293b;
border: 1px solid #475569;
- border-radius: 0.375rem;
+ border-radius: 0;
color: #94a3b8;
font-size: 0.875rem;
font-style: italic;
diff --git a/src/components/ui/ErrorToast.svelte b/src/components/ui/ErrorToast.svelte
index cc4b881..16f3b91 100644
--- a/src/components/ui/ErrorToast.svelte
+++ b/src/components/ui/ErrorToast.svelte
@@ -26,7 +26,7 @@ const { message, onDismiss }: Props = $props();
.error-content {
background-color: #3a1a1a;
border: 1px solid #ff4444;
- border-radius: 8px;
+ border-radius: 0;
padding: 1rem 1.5rem;
max-width: 500px;
max-height: 80vh;
@@ -53,7 +53,7 @@ const { message, onDismiss }: Props = $props();
background-color: #ff4444;
color: #fff;
border: none;
- border-radius: 4px;
+ border-radius: 0;
padding: 0.5rem 1rem;
font-size: 0.875rem;
cursor: pointer;
diff --git a/src/components/ui/FileUpload.svelte b/src/components/ui/FileUpload.svelte
index be6e83b..7ad9d8d 100644
--- a/src/components/ui/FileUpload.svelte
+++ b/src/components/ui/FileUpload.svelte
@@ -263,12 +263,12 @@ function triggerFileInput() {
{:else if example.category === 'digital'}
{:else}
{/if}
@@ -306,7 +306,7 @@ function triggerFileInput() {
-
diff --git a/src/components/ui/Minimap.svelte b/src/components/ui/Minimap.svelte
index a217617..62466ba 100644
--- a/src/components/ui/Minimap.svelte
+++ b/src/components/ui/Minimap.svelte
@@ -406,7 +406,7 @@ onDestroy(() => {
.minimap-panel {
position: fixed;
background: rgba(0, 0, 0, 0.9);
- border-radius: 4px;
+ border-radius: 0;
font-family: monospace;
font-size: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
@@ -449,7 +449,7 @@ onDestroy(() => {
.minimap-content canvas {
display: block;
- border-radius: 0 0 4px 4px;
+ border-radius: 0;
}
.resize-handle {
@@ -460,7 +460,7 @@ onDestroy(() => {
height: 16px;
cursor: se-resize;
background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.3) 50%);
- border-radius: 0 0 4px 0;
+ border-radius: 0;
}
.minimap-panel.collapsed {
diff --git a/src/components/ui/MobileControls.svelte b/src/components/ui/MobileControls.svelte
index f911539..3f4525f 100644
--- a/src/components/ui/MobileControls.svelte
+++ b/src/components/ui/MobileControls.svelte
@@ -176,7 +176,7 @@ function handleClearMeasurements() {