From aa97e6b04e3a3d740a511424f708a880b2310d7b Mon Sep 17 00:00:00 2001
From: Steven Kuterna <1+steven@noreply.localhost>
Date: Fri, 28 Aug 2026 18:25:49 +0200
Subject: [PATCH] Update styles.css

---
 styles.css | 387 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 387 insertions(+)

diff --git a/styles.css b/styles.css
index e69de29..25f7d53 100644
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,387 @@
+:root {
+  --bg-1: #fef9ee;
+  --bg-2: #d7e8f2;
+  --ink: #1f2a44;
+  --card: #ffffffde;
+  --accent: #d94841;
+  --accent-alt: #116466;
+  --muted: #5a6480;
+  --border: #24345f2b;
+  --shadow: 0 20px 50px #1f2a4424;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  height: 100vh;
+  font-family: "Space Grotesk", sans-serif;
+  color: var(--ink);
+  background: radial-gradient(circle at 10% 10%, #fff6db 0%, transparent 40%),
+    radial-gradient(circle at 90% 20%, #b6dce8 0%, transparent 45%),
+    linear-gradient(155deg, var(--bg-1), var(--bg-2));
+  overflow: hidden;
+}
+
+.app-shell {
+  width: min(1440px, 100vw);
+  height: 100%;
+  margin: 0 auto;
+  padding: 0.7rem 0.8rem;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.topbar h1 {
+  margin: 0;
+  font-family: "Fraunces", serif;
+  font-size: clamp(2rem, 5vw, 3.2rem);
+  letter-spacing: 0.02em;
+}
+
+.topbar p {
+  margin: 0.2rem 0 0.5rem;
+  color: var(--muted);
+}
+
+.workspace {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+  grid-template-rows: 20% 80%;
+  min-height: 0;
+}
+
+.top-half {
+  overflow: auto;
+}
+
+.bottom-half {
+  width: 100%;
+  min-height: 0;
+}
+
+.panel {
+  background: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  border-radius: 16px;
+  padding: 1rem;
+  backdrop-filter: blur(3px);
+}
+
+.panel h2,
+.panel h3 {
+  margin-top: 0;
+  margin-bottom: 0.35rem;
+  font-family: "Fraunces", serif;
+}
+
+.panel h3 {
+  font-size: 0.98rem;
+}
+
+button,
+textarea {
+  width: 100%;
+  font: inherit;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+}
+
+textarea {
+  padding: 0.55rem 0.7rem;
+  background: #ffffff;
+}
+
+button {
+  padding: 0.65rem 0.8rem;
+  background: #f8fbff;
+  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
+  cursor: pointer;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px #1f2a441f;
+  background: #f1f8ff;
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+button.danger {
+  background: #ffeae7;
+  border-color: #f5b6b0;
+}
+
+.actions-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.55rem;
+  margin-top: 0.5rem;
+}
+
+.score-canvas {
+  width: 100%;
+  height: calc(100% - 2.2rem);
+  min-height: 260px;
+  border-radius: 10px;
+  background: linear-gradient(180deg, #ffffff, #f9fcff);
+  border: 1px solid var(--border);
+  overflow: auto;
+}
+
+.hint {
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.note-list {
+  list-style: decimal;
+  padding-left: 1.2rem;
+  margin: 0.25rem 0 0;
+  max-height: 150px;
+  overflow: auto;
+}
+
+.note-list li {
+  margin: 0.25rem 0;
+  padding: 0.35rem 0.45rem;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.note-list li:hover {
+  background: #edf5fc;
+}
+
+.note-list li.active {
+  background: #d8ebff;
+  color: #0b2d4e;
+  font-weight: 700;
+}
+
+textarea {
+  margin-top: 0.45rem;
+  resize: vertical;
+  min-height: 74px;
+}
+
+.toolbar-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.85rem;
+}
+
+.toolbar-card {
+  min-width: 0;
+}
+
+.notes-card,
+.rests-card,
+.meter-card,
+.clef-card {
+  align-self: start;
+}
+
+.systems-card {
+  align-self: start;
+}
+
+.symbols-card {
+  grid-column: 1 / -1;
+}
+
+.chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.systems-controls {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.system-tabs {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+button.system-tab {
+  width: auto;
+  padding: 0.36rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid #8fa9bb;
+  background: #f7fbff;
+  font-size: 0.86rem;
+}
+
+button.system-tab.active {
+  background: #d9ecff;
+  border-color: #3f8ac8;
+  color: #0d3556;
+  font-weight: 700;
+}
+
+.systems-actions {
+  margin-top: 0;
+}
+
+.symbol-groups {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.symbol-group {
+  padding: 0.42rem 0.48rem 0.5rem;
+  border: 1px solid #d8e2ea;
+  border-radius: 10px;
+  background: #fbfdff;
+}
+
+.symbol-group h3 {
+  margin: 0;
+  font-size: 0.72rem;
+  line-height: 1.1;
+}
+
+.symbol-group .chip-list {
+  margin-top: 0.28rem;
+  gap: 0.3rem;
+}
+
+button.chip {
+  width: auto;
+  padding: 0.42rem 0.65rem;
+  border-radius: 999px;
+  border: 1px solid #8fa9bb;
+  background: #f8fcff;
+}
+
+button.icon-chip {
+  width: 2.15rem;
+  height: 2.15rem;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+button.icon-chip svg {
+  width: 1.12rem;
+  height: 1.12rem;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+button.chip.active {
+  background: #d9ecff;
+  border-color: #3f8ac8;
+  color: #0d3556;
+  font-weight: 700;
+}
+
+.sequence-area {
+  margin-top: 0.6rem;
+}
+
+.sequence-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.inline-actions {
+  display: flex;
+  gap: 0.45rem;
+}
+
+.inline-actions button {
+  width: auto;
+}
+
+.io-area {
+  margin-top: 0.5rem;
+}
+
+.time-signature-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.ts-number {
+  width: auto;
+  min-width: 3.1rem;
+  padding: 0.45rem 0.75rem;
+  border-radius: 10px;
+  border: 1px solid #8fa9bb;
+  background: #ffffff;
+  font-weight: 700;
+  text-align: center;
+}
+
+.ts-separator {
+  font-family: "Fraunces", serif;
+  font-size: 1.3rem;
+  color: #355170;
+}
+
+.ts-select {
+  margin-top: 0.45rem;
+  width: 6rem;
+  min-height: 8.2rem;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: #ffffff;
+  padding: 0.3rem;
+  font: inherit;
+}
+
+@media (max-width: 1050px) {
+  body {
+    height: auto;
+    min-height: 100vh;
+    overflow: auto;
+  }
+
+  .app-shell {
+    height: auto;
+  }
+
+  .workspace {
+    grid-template-rows: auto auto;
+  }
+
+  .toolbar-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .symbols-card {
+    grid-column: auto;
+  }
+
+  .symbol-groups {
+    grid-template-columns: 1fr;
+  }
+
+  .sequence-head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .actions-row {
+    grid-template-columns: 1fr;
+  }
+}