Update style.css

style.css

@@ -1,28 +1,209 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+
+:root {
+  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #e9edf5;
+  background: #0a0d14;
+  font-synthesis: none;
+  --panel: #111722;
+  --border: #283243;
+  --muted: #929db0;
+  --accent: #a6f0c6;
+}
+
+* { box-sizing: border-box; }
+
+body { margin: 0; min-width: 320px; }
+
+button, textarea { font: inherit; }
+button { cursor: pointer; }
+
+.topbar {
+  height: 68px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 max(24px, calc((100vw - 1050px) / 2));
+}
+
+.brand {
+  color: #fff;
+  text-decoration: none;
+  font-size: 23px;
+  font-weight: 800;
+  letter-spacing: -1px;
+}
+
+.brand span { color: var(--accent); }
+
+.status, .eyebrow {
+  font-size: 10px;
+  letter-spacing: 1.5px;
+  font-weight: 750;
+}
+
+.status { color: var(--muted); }
+.status i {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  margin-right: 8px;
 }
 
+.container { max-width: 900px; margin: auto; padding: 0 24px; }
+.hero { padding: 70px 0 36px; }
+.eyebrow { color: var(--accent); margin: 0 0 13px; }
+
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+  font-size: clamp(38px, 7vw, 65px);
+  line-height: 1.04;
+  letter-spacing: -3px;
+  margin: 0;
+}
+
+h1 span { color: var(--accent); }
+
+.intro {
+  color: #aab4c5;
+  line-height: 1.8;
+  max-width: 620px;
+  margin-top: 24px;
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 25px;
+  margin: 22px 0;
+}
+
+.panel-heading, .section-heading, .actions, .sample-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+h2 { font-size: 21px; margin: 0 0 18px; letter-spacing: -.5px; }
+.panel-heading h2, .section-heading h2 { margin-bottom: 0; }
+.muted { color: var(--muted); font-size: 12px; }
+.small { font-size: 11px; }
+
+textarea {
+  display: block;
+  width: 100%;
+  min-height: 150px;
+  margin-top: 24px;
+  resize: vertical;
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  color: #edf2fb;
+  background: #0b1019;
+  line-height: 1.8;
+  outline: none;
+}
+
+textarea:focus { border-color: #81cfa5; }
+
+.sample-row { justify-content: flex-start; flex-wrap: wrap; margin-top: 15px; }
+
+.text-button {
+  color: #c5d1e2;
+  background: none;
+  border: none;
+  font-size: 12px;
+  padding: 5px;
+}
+.text-button:hover { color: var(--accent); }
+
+.actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 23px; }
+
+.primary-button, .secondary-button {
+  border-radius: 8px;
+  padding: 13px 17px;
+  font-weight: 700;
+  font-size: 13px;
+}
+.primary-button {
+  background: var(--accent);
+  color: #0b1710;
+  border: 1px solid var(--accent);
+  display: flex;
+  gap: 24px;
+}
+.primary-button:disabled { opacity: .6; cursor: wait; }
+.secondary-button { background: transparent; border: 1px solid var(--border); color: #e9edf5; }
+
+.error {
+  margin-top: 18px;
+  color: #ffaaaa;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.section-heading { margin: 44px 0 18px; }
+.pill { border: 1px solid var(--border); border-radius: 30px; padding: 7px 11px; color: var(--muted); font-size: 11px; }
+
+.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
+.metric { border: 1px solid var(--border); border-radius: 12px; padding: 20px; background: #10151f; min-width: 0; }
+.metric p { font-size: 12px; color: var(--muted); margin: 0 0 13px; }
+.metric strong { display: block; font-size: 34px; letter-spacing: -1px; overflow-wrap: anywhere; margin-bottom: 8px; }
+.metric .muted { overflow-wrap: anywhere; }
+
+.token-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
+.token-columns h3 { font-size: 12px; color: #c7d1df; overflow-wrap: anywhere; }
+.tokens { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; min-height: 70px; }
+.token {
+  border: 1px solid #334054;
+  border-radius: 5px;
+  padding: 5px 7px;
+  background: #1a2331;
+  color: #dce6f4;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+  max-width: 100%;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.notice {
+  color: var(--muted);
+  border-left: 2px solid #73819a;
+  padding-left: 14px;
+  font-size: 12px;
+  line-height: 1.8;
+  margin: 25px 0;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.methodology { margin-top: 45px; }
+.protocol-item { display: flex; gap: 16px; border-top: 1px solid var(--border); padding: 18px 0; }
+.protocol-item > span { color: var(--accent); font-size: 12px; font-weight: 700; }
+.protocol-item strong { font-size: 13px; }
+.protocol-item p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 7px 0 0; }
+
+footer {
+  padding: 28px 0 40px;
+  display: flex;
+  justify-content: space-between;
+  gap: 15px;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.7;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+[hidden] { display: none !important; }
+
+@media (max-width: 620px) {
+  .container { padding: 0 16px; }
+  .topbar { padding: 0 16px; }
+  .hero { padding-top: 48px; }
+  h1 { letter-spacing: -2px; }
+  .panel { padding: 18px; }
+  .metrics { grid-template-columns: 1fr; }
+  .metric { padding: 16px; }
+  .token-columns { grid-template-columns: 1fr; }
+  footer { flex-direction: column; }
+  .status { font-size: 8px; }
 }