diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2cccd6c
--- /dev/null
+++ b/style.css
@@ -0,0 +1,506 @@
+:root {
+  --bg: #f5f5f7;
+  --surface: rgba(255,255,255,0.06);
+  --surface-hover: rgba(255,255,255,0.12);
+  --border: rgba(255,255,255,0.08);
+  --text: #111111;
+  --muted: #6d6d73;
+  --active-font: system-ui,sans-serif;
+  --radius: 20px;
+  --radius-sm: 14px;
+  --control-height: 46px;
+  --panel-width: 380px;
+  --panel-padding: 16px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+html {
+  width: 100%;
+  min-height: 100%;
+  overflow-x: hidden;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+  overflow-x: hidden;
+  overscroll-behavior-y: none;
+  background: var(--bg);
+  color: var(--text);
+  font:
+    500 14px/1.4
+    system-ui,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: geometricPrecision;
+  padding:
+    env(safe-area-inset-top)
+    env(safe-area-inset-right)
+    calc(76px + env(safe-area-inset-bottom))
+    env(safe-area-inset-left);
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+button,
+input[type="range"],
+.radio,
+.font-upload {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.row,
+.row * {
+  font-family: var(--active-font) !important;
+}
+
+.app {
+  width: 100%;
+  min-height: 100dvh;
+}
+
+.preview-pane {
+  width: 100%;
+  min-height: calc(100dvh - 100px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: calc(var(--panel-width) + 40px);
+}
+
+.controls-pane {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  width: min(
+    var(--panel-width),
+    calc(100vw - 32px)
+  );
+  max-height: calc(100dvh - 40px);
+  z-index: 9998;
+  overflow: hidden auto;
+  border-radius: 28px;
+  border: 1px solid rgba(255,255,255,0.18);
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255,255,255,0.18),
+      rgba(255,255,255,0.08)
+    );
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  box-shadow:
+    0 0px 0px rgba(0,0,0,0.16),
+    inset 0 0px 0 rgba(255,255,255,0.16);
+  scrollbar-width: none;
+  transition:
+    width 180ms ease,
+    max-height 180ms ease,
+    transform 180ms ease;
+}
+
+.controls-pane::-webkit-scrollbar {
+  display: none;
+}
+
+.controls-pane.minimized {
+  width: 210px;
+  max-height: 72px;
+}
+
+.controls-pane.minimized .controls {
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-6px);
+}
+
+.controls-pane.minimized .top-actions {
+  display: none;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: var(--panel-padding);
+}
+
+.top-actions {
+  flex: 1;
+  display: flex;
+  gap: 8px;
+}
+
+.controls {
+  display: grid;
+  gap: 12px;
+  padding:
+    0
+    var(--panel-padding)
+    var(--panel-padding);
+  transition:
+    opacity 160ms ease,
+    transform 160ms ease;
+}
+
+.control,
+.row,
+.radio,
+button,
+.font-upload,
+.pill {
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.control,
+.row {
+  border-radius: var(--radius);
+}
+
+.control {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.row {
+  padding: 20px;
+}
+
+.grid {
+  width: 100%;
+  display: grid;
+  gap: 12px;
+}
+
+.top-actions button,
+.top-actions .font-upload,
+.controls-toggle {
+  height: var(--control-height);
+}
+
+button,
+.font-upload,
+.controls-toggle,
+.radio {
+  appearance: none;
+  border-radius: var(--radius-sm);
+  transition:
+    transform 140ms ease,
+    background 140ms ease;
+}
+
+button,
+.font-upload {
+  padding: 0 14px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+button:hover,
+.font-upload:hover,
+.radio:hover,
+.controls-toggle:hover {
+  background: var(--surface-hover);
+}
+
+button:active,
+.font-upload:active,
+.radio:active,
+.controls-toggle:active {
+  transform: scale(0.985);
+}
+
+.font-upload {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+
+.font-upload input {
+  display: none;
+}
+
+.controls-toggle {
+  width: 46px;
+  min-width: 46px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+.pill {
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.control-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.control label,
+.label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.label {
+  margin-bottom: 10px;
+}
+
+.live-value {
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.slider-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.smart-guide {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 8px;
+  border-radius: 999px;
+  background: #111111;
+  opacity: 0.14;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+input[type="range"] {
+  width: 100%;
+  appearance: none;
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(0,0,0,0.08);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 999px;
+  border: none;
+  background: #111111;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 999px;
+  background: #111111;
+}
+
+.radio-group {
+  display: grid;
+  gap: 8px;
+}
+
+.radio {
+  min-height: 42px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.radio span {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.radio input {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(0,0,0,0.2);
+}
+
+.radio input:checked {
+  background: #111111;
+  border-color: #111111;
+}
+
+.editable {
+  width: 100%;
+  outline: none;
+  background: transparent;
+  overflow-wrap: anywhere;
+  caret-color: #111111;
+}
+
+.hero {
+  font-size: clamp(72px,12vw,180px);
+  line-height: 0.9;
+  letter-spacing: -0.08em;
+  font-weight: 700;
+}
+
+.xl {
+  font-size: clamp(36px,5vw,68px);
+  line-height: 1;
+  letter-spacing: -0.05em;
+  font-weight: 600;
+}
+
+.lg {
+  font-size: clamp(24px,3vw,42px);
+  line-height: 1.08;
+  letter-spacing: -0.035em;
+  font-weight: 600;
+}
+
+.md {
+  font-size: clamp(16px,2vw,22px);
+  line-height: 1.5;
+  letter-spacing: -0.015em;
+  font-weight: 500;
+}
+
+.sm {
+  font-size: clamp(13px,1.6vw,16px);
+  line-height: 1.7;
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.debug-banner {
+  position: fixed;
+  inset:
+    auto
+    0
+    0;
+  z-index: 9999;
+  border-top: 1px solid rgba(0,0,0,0.06);
+  background: rgba(255,255,255,0.5);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.debug-track {
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding:
+    0
+    14px
+    env(safe-area-inset-bottom);
+}
+
+.debug-track::-webkit-scrollbar {
+  display: none;
+}
+
+.debug-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.debug-key,
+.debug-value {
+  font:
+    600 10px/1
+    ui-monospace,
+    monospace;
+}
+
+.debug-key {
+  opacity: 0.45;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.debug-divider {
+  width: 1px;
+  height: 10px;
+  background: rgba(0,0,0,0.08);
+}
+
+@media (max-width: 1180px) {
+  .preview-pane {
+    padding-right: 0;
+  }
+
+  .controls-pane {
+    top: auto;
+    right: 14px;
+    bottom: 14px;
+    left: 14px;
+    width: auto;
+    max-height: 72dvh;
+  }
+
+  .controls-pane.minimized {
+    width: auto;
+  }
+}
+
+@media (max-width: 640px) {
+  .top {
+    flex-wrap: wrap;
+  }
+
+  .top-actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2,minmax(0,1fr));
+  }
+
+  .row {
+    padding: 16px;
+  }
+
+  .hero {
+    font-size: clamp(52px,14vw,110px);
+  }
+
+  .xl {
+    font-size: clamp(28px,8vw,56px);
+  }
+}