Upload 66 files

Dockerfile

@@ -15,7 +15,7 @@ ENV PYTHONDONTWRITEBYTECODE=1 \
     PIP_NO_CACHE_DIR=1 \
     HOST=0.0.0.0 \
     PORT=7860 \
-    APP_TITLE=PlainRewrite
+    APP_TITLE=ZuZu Writer
 
 WORKDIR /app
 

README.md

@@ -1,5 +1,5 @@
 ---
-title: PlainRewrite
+title: ZuZu Writer
 emoji: ✍️
 colorFrom: gray
 colorTo: blue
@@ -8,7 +8,7 @@ app_port: 7860
 pinned: false
 ---
 
-# PlainRewrite
+# ZuZu Writer
 
 Rewrite text in Neutral, Casual, Formal, or Academic tone.
 

app/__init__.py

@@ -1 +1 @@
-# PlainRewrite app package
+# ZuZu Writer app package

app/config.py

@@ -13,7 +13,7 @@ load_dotenv(ROOT_DIR / ".env")
 APP_DIR = Path(__file__).resolve().parent
 DATA_DIR = APP_DIR / "data"
 
-APP_TITLE = os.environ.get("APP_TITLE", "PlainRewrite")
+APP_TITLE = os.environ.get("APP_TITLE", "ZuZu Writer")
 HOST = os.environ.get("HOST", "0.0.0.0")
 PORT = int(os.environ.get("PORT", "7860") or "7860")
 SPACY_MODEL = os.environ.get("SPACY_MODEL", "en_core_web_sm")

docker-compose.yml

@@ -7,7 +7,7 @@ services:
     environment:
       HOST: "0.0.0.0"
       PORT: "7860"
-      APP_TITLE: "PlainRewrite"
+      APP_TITLE: "ZuZu Writer"
       SPACY_MODEL: "en_core_web_sm"
       SUPABASE_URL: ${SUPABASE_URL:-}
       SUPABASE_ANON_KEY: ${SUPABASE_ANON_KEY:-}

frontend/dist/assets/index.css

@@ -31,25 +31,51 @@ body {
   margin: 0;
   color: var(--ink);
   font-family: var(--font-body);
-  background-color: #dfe8e4;
+  background-color: #d4e0da;
   background-image:
-    radial-gradient(ellipse 90% 60% at 10% -20%, #c5ddd4 0%, transparent 55%),
-    radial-gradient(ellipse 70% 50% at 100% 0%, #d4dde8 0%, transparent 50%),
-    linear-gradient(165deg, #eef4f1 0%, #e3ebe7 45%, #d8e2dd 100%);
+    radial-gradient(ellipse 100% 70% at 0% -10%, rgba(120, 170, 150, 0.55) 0%, transparent 58%),
+    radial-gradient(ellipse 80% 55% at 100% 5%, rgba(160, 175, 200, 0.4) 0%, transparent 52%),
+    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(90, 130, 110, 0.22) 0%, transparent 55%),
+    linear-gradient(165deg, #eef5f1 0%, #e0ebe5 42%, #d2dfd8 100%);
   background-attachment: fixed;
 }
 
+/* Paper grain */
 body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
-  opacity: 0.35;
+  opacity: 0.42;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
   mix-blend-mode: soft-light;
   z-index: 0;
 }
 
+/* Soft writing-desk wash + faint ruled lines */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image:
+    radial-gradient(ellipse 55% 40% at 85% 75%, rgba(26, 92, 74, 0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 40% 35% at 12% 60%, rgba(70, 100, 140, 0.1) 0%, transparent 65%),
+    linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent 11px,
+      rgba(18, 28, 26, 0.035) 11px,
+      rgba(18, 28, 26, 0.035) 12px
+    );
+  background-size:
+    auto,
+    auto,
+    100% 28px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.45));
+}
+
 button,
 textarea {
   font: inherit;
@@ -67,6 +93,36 @@ textarea {
   animation: enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
+/* Large brand watermark in the atmosphere */
+.shell::before {
+  content: "ZuZu";
+  position: fixed;
+  right: -4vw;
+  top: 8vh;
+  z-index: 0;
+  font-family: var(--font-display);
+  font-size: clamp(7rem, 22vw, 16rem);
+  font-weight: 700;
+  letter-spacing: -0.06em;
+  line-height: 0.85;
+  color: rgba(26, 92, 74, 0.07);
+  pointer-events: none;
+  user-select: none;
+  transform: rotate(-8deg);
+  animation: watermark-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes watermark-in {
+  from {
+    opacity: 0;
+    transform: rotate(-8deg) translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(-8deg) translateY(0);
+  }
+}
+
 @keyframes enter {
   from {
     opacity: 0;
@@ -104,44 +160,105 @@ textarea {
   align-items: flex-end;
   justify-content: space-between;
   gap: 1.5rem;
-  margin-bottom: 1.75rem;
+  margin-bottom: 1.35rem;
 }
 
 .brand {
-  max-width: 36rem;
+  max-width: 38rem;
+}
+
+.brand-mark {
+  margin: 0 0 0.35rem;
+  font-family: var(--font-body);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent);
 }
 
 .brand h1 {
   margin: 0;
   font-family: var(--font-display);
-  font-size: clamp(2.6rem, 5vw, 3.6rem);
+  font-size: clamp(2.5rem, 5vw, 3.45rem);
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 0.95;
   color: var(--ink);
 }
 
-.brand p {
-  margin: 0.7rem 0 0;
+.brand-tag {
+  margin: 0.75rem 0 0;
   color: var(--ink-soft);
-  font-size: 1.05rem;
+  font-size: 1.02rem;
   line-height: 1.45;
   max-width: 28rem;
 }
 
 .top-meta {
-  text-align: right;
+  flex-shrink: 0;
+  padding-bottom: 0.15rem;
+}
+
+.account-panel {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 0.7rem 0.8rem 0.7rem 1rem;
+  border: 1px solid var(--panel-edge);
+  border-radius: 16px;
+  background: rgba(251, 252, 251, 0.88);
+  box-shadow: 0 10px 28px rgba(18, 28, 26, 0.05);
+  backdrop-filter: blur(10px);
+}
+
+.account-panel-quiet {
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.2rem;
+  padding: 0.65rem 0.9rem;
+}
+
+.account-panel-main {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.account-plan {
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 0.68rem;
+}
+
+.account-quota {
+  color: var(--ink-soft);
+  font-size: 0.84rem;
+  font-weight: 500;
+}
+
+.account-email {
+  max-width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.kbd-hint {
+  font-size: 0.75rem;
   color: var(--muted);
-  font-size: 0.82rem;
-  letter-spacing: 0.02em;
-  padding-bottom: 0.35rem;
-  min-width: 10rem;
 }
 
 .stage {
   border: 1px solid var(--panel-edge);
   border-radius: 22px;
-  background: rgba(251, 252, 251, 0.78);
+  background: rgba(251, 252, 251, 0.82);
   box-shadow: var(--shadow-soft);
   backdrop-filter: blur(14px);
   overflow: hidden;
@@ -151,11 +268,20 @@ textarea {
 .toolbar {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-end;
+  justify-content: space-between;
   gap: 1rem 1.25rem;
-  padding: 0.95rem 1.15rem;
+  padding: 1rem 1.2rem;
   border-bottom: 1px solid var(--panel-edge);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 246, 0.65));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 246, 0.7));
+}
+
+.toolbar-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.35rem;
+  min-width: 0;
 }
 
 .tool-group {
@@ -164,7 +290,7 @@ textarea {
   gap: 0.35rem;
 }
 
-.tool-group > span {
+.tool-group > span:first-child {
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.1em;
@@ -184,7 +310,7 @@ textarea {
   border: 0;
   background: transparent;
   color: var(--ink-soft);
-  padding: 0.42rem 0.72rem;
+  padding: 0.45rem 0.75rem;
   border-radius: 8px;
   font-size: 0.86rem;
   font-weight: 500;
@@ -209,11 +335,11 @@ textarea {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  margin-left: auto;
   color: var(--ink-soft);
   font-size: 0.88rem;
   cursor: pointer;
   user-select: none;
+  padding-bottom: 0.35rem;
 }
 
 .check input {
@@ -225,24 +351,27 @@ textarea {
 .toolbar-actions {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.55rem;
+  margin-left: auto;
 }
 
 .btn {
   border: 0;
-  border-radius: 10px;
-  padding: 0.7rem 1.15rem;
+  border-radius: 11px;
+  padding: 0.72rem 1.2rem;
   font-weight: 600;
   font-size: 0.92rem;
   cursor: pointer;
   transition:
     transform 0.15s ease,
     background 0.2s ease,
-    opacity 0.2s ease;
+    opacity 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .btn:disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
   transform: none;
 }
@@ -250,6 +379,7 @@ textarea {
 .btn-primary {
   background: var(--accent);
   color: #f5faf8;
+  box-shadow: 0 8px 18px rgba(26, 92, 74, 0.22);
 }
 
 .btn-primary:not(:disabled):hover {
@@ -261,14 +391,47 @@ textarea {
   transform: translateY(0);
 }
 
+.btn-rewrite {
+  min-width: 8.5rem;
+  padding: 0.82rem 1.45rem;
+  font-size: 0.98rem;
+}
+
 .btn-quiet {
-  background: transparent;
+  background: rgba(255, 255, 255, 0.75);
   color: var(--ink-soft);
   border: 1px solid var(--panel-edge);
 }
 
 .btn-quiet:not(:disabled):hover {
-  background: rgba(255, 255, 255, 0.7);
+  background: #fff;
+  color: var(--ink);
+  border-color: rgba(26, 92, 74, 0.28);
+}
+
+.btn-compact {
+  padding: 0.52rem 1rem;
+  font-size: 0.84rem;
+  min-height: 2.4rem;
+}
+
+.btn-tiny {
+  padding: 0.32rem 0.7rem;
+  font-size: 0.76rem;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.auth-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.auth-inline .btn-quiet {
+  background: rgba(255, 255, 255, 0.95);
+  color: var(--ink);
+  box-shadow: 0 1px 2px rgba(18, 28, 26, 0.04);
 }
 
 .editors {
@@ -281,12 +444,17 @@ textarea {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  background: transparent;
 }
 
 .pane + .pane {
   border-left: 1px solid var(--panel-edge);
 }
 
+.pane-out {
+  background: rgba(244, 248, 246, 0.35);
+}
+
 .pane-head {
   display: flex;
   align-items: center;
@@ -306,7 +474,7 @@ textarea {
 
 .pane-actions {
   display: flex;
-  gap: 0.35rem;
+  gap: 0.4rem;
 }
 
 .ghost-btn {
@@ -361,15 +529,16 @@ textarea {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.75rem 1.15rem;
+  padding: 0.8rem 1.2rem;
   border-top: 1px solid var(--panel-edge);
-  background: rgba(244, 248, 246, 0.55);
+  background: rgba(244, 248, 246, 0.6);
   color: var(--muted);
   font-size: 0.84rem;
 }
 
 .statusbar .error {
   color: var(--warn);
+  font-weight: 500;
 }
 
 .statusbar .loading {
@@ -388,30 +557,6 @@ textarea {
   font-size: 0.84rem;
 }
 
-.account-chip {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.2rem;
-  text-align: right;
-}
-
-.account-plan {
-  font-weight: 700;
-  color: var(--accent);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  font-size: 0.72rem;
-}
-
-.account-email {
-  max-width: 14rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.78rem;
-}
-
 .auth-shell {
   position: relative;
   z-index: 1;
@@ -527,12 +672,13 @@ textarea {
 }
 
 .teaser-banner {
-  margin: -0.5rem 0 1.1rem;
-  padding: 0.75rem 1rem;
-  border-radius: 12px;
-  background: var(--accent-soft);
+  margin: 0 0 1.15rem;
+  padding: 0.95rem 1.15rem;
+  border-radius: 16px;
+  border: 1px solid rgba(26, 92, 74, 0.18);
+  background: linear-gradient(135deg, rgba(26, 92, 74, 0.1), rgba(251, 252, 251, 0.75));
   color: var(--ink-soft);
-  font-size: 0.92rem;
+  font-size: 0.94rem;
   line-height: 1.4;
 }
 
@@ -540,23 +686,40 @@ textarea {
   color: var(--accent);
 }
 
-.idle-banner {
+.teaser-cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.35rem 0.5rem;
+  justify-content: space-between;
+  gap: 0.85rem 1.25rem;
 }
 
-.auth-inline {
+.teaser-copy {
   display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  margin-top: 0.25rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
 }
 
-.btn-compact {
-  padding: 0.4rem 0.75rem;
-  font-size: 0.8rem;
+.teaser-copy p {
+  margin: 0;
+}
+
+.teaser-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.idle-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem 1rem;
 }
 
 .counts .over-limit {
@@ -564,6 +727,14 @@ textarea {
   font-weight: 600;
 }
 
+.tool-hint {
+  font-size: 0.72rem;
+  color: var(--muted);
+  letter-spacing: 0.02em;
+  text-transform: none;
+  font-weight: 500;
+}
+
 .modal-backdrop {
   position: fixed;
   inset: 0;
@@ -675,22 +846,6 @@ textarea {
   font-size: 0.78rem;
 }
 
-.teaser-cta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem 1rem;
-}
-
-.tool-hint {
-  font-size: 0.72rem;
-  color: var(--muted);
-  letter-spacing: 0.02em;
-  text-transform: none;
-  font-weight: 500;
-}
-
 .word-meter {
   height: 3px;
   background: rgba(18, 28, 26, 0.06);
@@ -878,34 +1033,44 @@ textarea {
 @media (max-width: 920px) {
   .topbar {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
   }
 
   .top-meta {
-    text-align: left;
+    width: 100%;
   }
 
-  .account-chip {
-    align-items: flex-start;
-    text-align: left;
+  .account-panel {
+    width: 100%;
+    justify-content: space-between;
   }
 
-  .check {
-    margin-left: 0;
+  .account-panel-quiet {
+    align-items: flex-start;
   }
 
   .toolbar {
     align-items: stretch;
+    flex-direction: column;
+  }
+
+  .toolbar-controls {
+    width: 100%;
   }
 
   .toolbar-actions {
     width: 100%;
+    margin-left: 0;
   }
 
   .toolbar-actions .btn {
     flex: 1;
   }
 
+  .btn-rewrite {
+    flex: 1.4;
+  }
+
   .editors {
     grid-template-columns: 1fr;
   }
@@ -926,6 +1091,10 @@ textarea {
 
   .teaser-cta {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
+  }
+
+  .teaser-cta .btn {
+    width: 100%;
   }
 }

frontend/dist/assets/index.js

@@ -461,7 +461,7 @@ function App() {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "plainrewrite.txt";
+    a.download = "zuzu-writer.txt";
     a.click();
     URL.revokeObjectURL(url);
   }
@@ -475,7 +475,7 @@ function App() {
   return h("div", { className: "app shell" },
     h("div", { className: "topbar" },
       h("header", { className: "brand" },
-        h("h1", null, "PlainRewrite"),
+        h("h1", null, "ZuZu Writer"),
         h("p", null, "From AI-generated to plagiarism-safe — rewrite in a voice that feels real."),
       ),
       h("div", { className: "top-meta" },
@@ -493,7 +493,7 @@ function App() {
                   ? `${account.usage.remaining_rewrites}/${account.plan.daily_rewrites} free rewrite today`
                   : `Try ${guestMaxWords} words free`),
                 h("div", { className: "auth-inline" },
-                  h("button", { type: "button", className: "ghost-btn", onClick: () => openAuth("signin", "Sign in") }, "Sign in"),
+                  h("button", { type: "button", className: "btn btn-quiet btn-compact", onClick: () => openAuth("signin", "Sign in") }, "Sign in"),
                   h("button", { type: "button", className: "btn btn-primary btn-compact", onClick: () => openAuth("signup", "Create free account") }, "Sign up"),
                 ),
               )

frontend/dist/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PlainRewrite</title>
+    <title>ZuZu Writer</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

frontend/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>PlainRewrite</title>
+    <title>ZuZu Writer</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "plainrewrite-ui",
+  "name": "zuzu-writer-ui",
   "private": true,
   "version": "1.0.0",
   "type": "module",

frontend/src/App.tsx

@@ -258,7 +258,7 @@ function LandingSections({
   return (
     <div className="landing">
       <section className="land-block">
-        <h2>How to use PlainRewrite</h2>
+        <h2>How to use ZuZu Writer</h2>
         <p className="land-lead">Three steps from AI draft to natural wording.</p>
         <ol className="steps">
           <li>
@@ -350,7 +350,7 @@ function LandingSections({
 
       <footer className="site-footer">
         <p>Review every rewrite before you share or publish. Follow your school or workplace AI policy.</p>
-        <p className="footer-brand">PlainRewrite</p>
+        <p className="footer-brand">ZuZu Writer</p>
       </footer>
     </div>
   );
@@ -512,7 +512,7 @@ export default function App() {
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "plainrewrite.txt";
+    a.download = "zuzu-writer.txt";
     a.click();
     URL.revokeObjectURL(url);
   }
@@ -534,33 +534,40 @@ export default function App() {
     <div className="app shell">
       <div className="topbar">
         <header className="brand">
-          <h1>PlainRewrite</h1>
-          <p>From AI-generated to plagiarism-safe — rewrite in a voice that feels real.</p>
+          <p className="brand-mark">ZuZu</p>
+          <h1>ZuZu Writer</h1>
+          <p className="brand-tag">
+            From AI-generated to plagiarism-safe — rewrite in a voice that feels real.
+          </p>
         </header>
         <div className="top-meta">
           {session && account ? (
-            <div className="account-chip">
-              <div className="account-plan">{account.plan.name}</div>
-              <div>
-                {account.usage.remaining_rewrites}/{account.plan.daily_rewrites} rewrites today
+            <div className="account-panel">
+              <div className="account-panel-main">
+                <span className="account-plan">{account.plan.name}</span>
+                <span className="account-quota">
+                  {account.usage.remaining_rewrites}/{account.plan.daily_rewrites} left today
+                </span>
+                <span className="account-email">{account.email}</span>
               </div>
-              <div className="account-email">{account.email}</div>
-              <button type="button" className="ghost-btn" onClick={() => void signOut()}>
+              <button type="button" className="btn btn-quiet btn-compact" onClick={() => void signOut()}>
                 Sign out
               </button>
             </div>
           ) : authEnabled ? (
-            <div className="account-chip">
-              <div className="account-plan">Preview</div>
-              <div>
-                {account
-                  ? `${account.usage.remaining_rewrites}/${account.plan.daily_rewrites} free rewrite today`
-                  : `Try ${guestMaxWords} words free`}
+            <div className="account-panel">
+              <div className="account-panel-main">
+                <span className="account-plan">Preview</span>
+                <span className="account-quota">
+                  {account
+                    ? `${account.usage.remaining_rewrites} of ${account.plan.daily_rewrites} free today`
+                    : `Up to ${guestMaxWords} words`}
+                </span>
               </div>
               <div className="auth-inline">
                 <button
                   type="button"
-                  className="ghost-btn"
+                  className="btn btn-quiet btn-compact"
                   onClick={() => openAuth("signin", "Sign in")}
                 >
                   Sign in
@@ -575,11 +582,12 @@ export default function App() {
               </div>
             </div>
           ) : (
-            <>
-              {tone} · {strength}
-              <br />
-              ⌘/Ctrl + Enter
-            </>
+            <div className="account-panel account-panel-quiet">
+              <span className="account-quota">
+                {tone} · {strength}
+              </span>
+              <span className="kbd-hint">⌘/Ctrl + Enter</span>
+            </div>
           )}
         </div>
       </div>
@@ -589,7 +597,7 @@ export default function App() {
           <span>Signed out after {sessionIdleMinutes} minutes of inactivity.</span>
           <button
             type="button"
-            className="ghost-btn"
+            className="btn btn-quiet btn-compact"
             onClick={() => {
               clearIdleNotice();
               openAuth("signin", "Sign in again");
@@ -602,13 +610,16 @@ export default function App() {
 
       {isGuest && !idleSignedOut ? (
         <div className="teaser-banner teaser-cta">
-          <div>
-            You’re on <strong>Free Preview</strong> — up to <strong>{maxWords} words</strong>,{" "}
-            {account?.plan.daily_rewrites ?? 1} rewrite/day. Sign up free for 400 words &amp; 5/day.
+          <div className="teaser-copy">
+            <span className="teaser-label">Free Preview</span>
+            <p>
+              Try up to <strong>{maxWords} words</strong>, {account?.plan.daily_rewrites ?? 1}{" "}
+              rewrite/day — then unlock Free for longer drafts.
+            </p>
           </div>
           <button
             type="button"
-            className="btn btn-primary btn-compact"
+            className="btn btn-primary"
             onClick={() => openAuth("signup", "Create free account")}
           >
             Unlock Free plan
@@ -618,58 +629,52 @@ export default function App() {
 
       <div className="stage">
         <div className="toolbar">
-          <div className="tool-group">
-            <span>Tone</span>
-            <div className="segment" role="group" aria-label="Tone">
-              {TONES.map((t) => (
-                <button
-                  key={t}
-                  type="button"
-                  title={TONE_HINT[t]}
-                  className={tone === t ? "active" : ""}
-                  onClick={() => setTone(t)}
-                >
-                  {t}
-                </button>
-              ))}
+          <div className="toolbar-controls">
+            <div className="tool-group">
+              <span>Tone</span>
+              <div className="segment" role="group" aria-label="Tone">
+                {TONES.map((t) => (
+                  <button
+                    key={t}
+                    type="button"
+                    title={TONE_HINT[t]}
+                    className={tone === t ? "active" : ""}
+                    onClick={() => setTone(t)}
+                  >
+                    {t}
+                  </button>
+                ))}
+              </div>
+              <span className="tool-hint">{TONE_HINT[tone]}</span>
             </div>
-            <span className="tool-hint">{TONE_HINT[tone]}</span>
-          </div>
 
-          <div className="tool-group">
-            <span>Strength</span>
-            <div className="segment" role="group" aria-label="Strength">
-              {STRENGTHS.map((s) => (
-                <button
-                  key={s}
-                  type="button"
-                  className={strength === s ? "active" : ""}
-                  onClick={() => setStrength(s)}
-                >
-                  {s}
-                </button>
-              ))}
+            <div className="tool-group">
+              <span>Strength</span>
+              <div className="segment" role="group" aria-label="Strength">
+                {STRENGTHS.map((s) => (
+                  <button
+                    key={s}
+                    type="button"
+                    className={strength === s ? "active" : ""}
+                    onClick={() => setStrength(s)}
+                  >
+                    {s}
+                  </button>
+                ))}
+              </div>
             </div>
-          </div>
 
-          <label className="check">
-            <input
-              type="checkbox"
-              checked={preserveLength}
-              onChange={(e) => setPreserveLength(e.target.checked)}
-            />
-            Match length
-          </label>
+            <label className="check">
+              <input
+                type="checkbox"
+                checked={preserveLength}
+                onChange={(e) => setPreserveLength(e.target.checked)}
+              />
+              Match length
+            </label>
+          </div>
 
           <div className="toolbar-actions">
-            <button
-              type="button"
-              className="btn btn-quiet"
-              onClick={loadSample}
-              disabled={loading}
-            >
-              Try sample
-            </button>
             <button
               type="button"
               className="btn btn-quiet"
@@ -686,7 +691,7 @@ export default function App() {
             </button>
             <button
               type="button"
-              className="btn btn-primary"
+              className="btn btn-primary btn-rewrite"
               onClick={() => void onRewrite()}
               disabled={loading}
             >
@@ -699,6 +704,16 @@ export default function App() {
           <div className="pane">
             <div className="pane-head">
               <h2>Original</h2>
+              <div className="pane-actions">
+                <button
+                  type="button"
+                  className="btn btn-quiet btn-tiny"
+                  onClick={loadSample}
+                  disabled={loading}
+                >
+                  Try sample
+                </button>
+              </div>
             </div>
             <textarea
               value={input}
@@ -712,13 +727,13 @@ export default function App() {
             />
           </div>
 
-          <div className={`pane${freshOut ? " writing" : ""}`}>
+          <div className={`pane pane-out${freshOut ? " writing" : ""}`}>
             <div className="pane-head">
               <h2>Rewrite</h2>
               <div className="pane-actions">
                 <button
                   type="button"
-                  className="ghost-btn"
+                  className="btn btn-quiet btn-tiny"
                   onClick={() => void onCopy()}
                   disabled={!output.trim()}
                 >
@@ -726,7 +741,7 @@ export default function App() {
                 </button>
                 <button
                   type="button"
-                  className="ghost-btn"
+                  className="btn btn-quiet btn-tiny"
                   onClick={onDownload}
                   disabled={!output.trim()}
                 >

frontend/src/index.css

@@ -31,25 +31,51 @@ body {
   margin: 0;
   color: var(--ink);
   font-family: var(--font-body);
-  background-color: #dfe8e4;
+  background-color: #d4e0da;
   background-image:
-    radial-gradient(ellipse 90% 60% at 10% -20%, #c5ddd4 0%, transparent 55%),
-    radial-gradient(ellipse 70% 50% at 100% 0%, #d4dde8 0%, transparent 50%),
-    linear-gradient(165deg, #eef4f1 0%, #e3ebe7 45%, #d8e2dd 100%);
+    radial-gradient(ellipse 100% 70% at 0% -10%, rgba(120, 170, 150, 0.55) 0%, transparent 58%),
+    radial-gradient(ellipse 80% 55% at 100% 5%, rgba(160, 175, 200, 0.4) 0%, transparent 52%),
+    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(90, 130, 110, 0.22) 0%, transparent 55%),
+    linear-gradient(165deg, #eef5f1 0%, #e0ebe5 42%, #d2dfd8 100%);
   background-attachment: fixed;
 }
 
+/* Paper grain */
 body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
-  opacity: 0.35;
+  opacity: 0.42;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
   mix-blend-mode: soft-light;
   z-index: 0;
 }
 
+/* Soft writing-desk wash + faint ruled lines */
+body::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image:
+    radial-gradient(ellipse 55% 40% at 85% 75%, rgba(26, 92, 74, 0.12) 0%, transparent 70%),
+    radial-gradient(ellipse 40% 35% at 12% 60%, rgba(70, 100, 140, 0.1) 0%, transparent 65%),
+    linear-gradient(
+      to bottom,
+      transparent 0,
+      transparent 11px,
+      rgba(18, 28, 26, 0.035) 11px,
+      rgba(18, 28, 26, 0.035) 12px
+    );
+  background-size:
+    auto,
+    auto,
+    100% 28px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.45));
+}
+
 button,
 textarea {
   font: inherit;
@@ -67,6 +93,36 @@ textarea {
   animation: enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
 }
 
+/* Large brand watermark in the atmosphere */
+.shell::before {
+  content: "ZuZu";
+  position: fixed;
+  right: -4vw;
+  top: 8vh;
+  z-index: 0;
+  font-family: var(--font-display);
+  font-size: clamp(7rem, 22vw, 16rem);
+  font-weight: 700;
+  letter-spacing: -0.06em;
+  line-height: 0.85;
+  color: rgba(26, 92, 74, 0.07);
+  pointer-events: none;
+  user-select: none;
+  transform: rotate(-8deg);
+  animation: watermark-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes watermark-in {
+  from {
+    opacity: 0;
+    transform: rotate(-8deg) translateY(24px);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(-8deg) translateY(0);
+  }
+}
+
 @keyframes enter {
   from {
     opacity: 0;
@@ -104,44 +160,105 @@ textarea {
   align-items: flex-end;
   justify-content: space-between;
   gap: 1.5rem;
-  margin-bottom: 1.75rem;
+  margin-bottom: 1.35rem;
 }
 
 .brand {
-  max-width: 36rem;
+  max-width: 38rem;
+}
+
+.brand-mark {
+  margin: 0 0 0.35rem;
+  font-family: var(--font-body);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent);
 }
 
 .brand h1 {
   margin: 0;
   font-family: var(--font-display);
-  font-size: clamp(2.6rem, 5vw, 3.6rem);
+  font-size: clamp(2.5rem, 5vw, 3.45rem);
   font-weight: 700;
   letter-spacing: -0.035em;
   line-height: 0.95;
   color: var(--ink);
 }
 
-.brand p {
-  margin: 0.7rem 0 0;
+.brand-tag {
+  margin: 0.75rem 0 0;
   color: var(--ink-soft);
-  font-size: 1.05rem;
+  font-size: 1.02rem;
   line-height: 1.45;
   max-width: 28rem;
 }
 
 .top-meta {
-  text-align: right;
+  flex-shrink: 0;
+  padding-bottom: 0.15rem;
+}
+
+.account-panel {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  padding: 0.7rem 0.8rem 0.7rem 1rem;
+  border: 1px solid var(--panel-edge);
+  border-radius: 16px;
+  background: rgba(251, 252, 251, 0.88);
+  box-shadow: 0 10px 28px rgba(18, 28, 26, 0.05);
+  backdrop-filter: blur(10px);
+}
+
+.account-panel-quiet {
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.2rem;
+  padding: 0.65rem 0.9rem;
+}
+
+.account-panel-main {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.12rem;
+  min-width: 0;
+}
+
+.account-plan {
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-size: 0.68rem;
+}
+
+.account-quota {
+  color: var(--ink-soft);
+  font-size: 0.84rem;
+  font-weight: 500;
+}
+
+.account-email {
+  max-width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.kbd-hint {
+  font-size: 0.75rem;
   color: var(--muted);
-  font-size: 0.82rem;
-  letter-spacing: 0.02em;
-  padding-bottom: 0.35rem;
-  min-width: 10rem;
 }
 
 .stage {
   border: 1px solid var(--panel-edge);
   border-radius: 22px;
-  background: rgba(251, 252, 251, 0.78);
+  background: rgba(251, 252, 251, 0.82);
   box-shadow: var(--shadow-soft);
   backdrop-filter: blur(14px);
   overflow: hidden;
@@ -151,11 +268,20 @@ textarea {
 .toolbar {
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-end;
+  justify-content: space-between;
   gap: 1rem 1.25rem;
-  padding: 0.95rem 1.15rem;
+  padding: 1rem 1.2rem;
   border-bottom: 1px solid var(--panel-edge);
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 246, 0.65));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 246, 0.7));
+}
+
+.toolbar-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 1rem 1.35rem;
+  min-width: 0;
 }
 
 .tool-group {
@@ -164,7 +290,7 @@ textarea {
   gap: 0.35rem;
 }
 
-.tool-group > span {
+.tool-group > span:first-child {
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.1em;
@@ -184,7 +310,7 @@ textarea {
   border: 0;
   background: transparent;
   color: var(--ink-soft);
-  padding: 0.42rem 0.72rem;
+  padding: 0.45rem 0.75rem;
   border-radius: 8px;
   font-size: 0.86rem;
   font-weight: 500;
@@ -209,11 +335,11 @@ textarea {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
-  margin-left: auto;
   color: var(--ink-soft);
   font-size: 0.88rem;
   cursor: pointer;
   user-select: none;
+  padding-bottom: 0.35rem;
 }
 
 .check input {
@@ -225,24 +351,27 @@ textarea {
 .toolbar-actions {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.55rem;
+  margin-left: auto;
 }
 
 .btn {
   border: 0;
-  border-radius: 10px;
-  padding: 0.7rem 1.15rem;
+  border-radius: 11px;
+  padding: 0.72rem 1.2rem;
   font-weight: 600;
   font-size: 0.92rem;
   cursor: pointer;
   transition:
     transform 0.15s ease,
     background 0.2s ease,
-    opacity 0.2s ease;
+    opacity 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
 }
 
 .btn:disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
   transform: none;
 }
@@ -250,6 +379,7 @@ textarea {
 .btn-primary {
   background: var(--accent);
   color: #f5faf8;
+  box-shadow: 0 8px 18px rgba(26, 92, 74, 0.22);
 }
 
 .btn-primary:not(:disabled):hover {
@@ -261,14 +391,47 @@ textarea {
   transform: translateY(0);
 }
 
+.btn-rewrite {
+  min-width: 8.5rem;
+  padding: 0.82rem 1.45rem;
+  font-size: 0.98rem;
+}
+
 .btn-quiet {
-  background: transparent;
+  background: rgba(255, 255, 255, 0.75);
   color: var(--ink-soft);
   border: 1px solid var(--panel-edge);
 }
 
 .btn-quiet:not(:disabled):hover {
-  background: rgba(255, 255, 255, 0.7);
+  background: #fff;
+  color: var(--ink);
+  border-color: rgba(26, 92, 74, 0.28);
+}
+
+.btn-compact {
+  padding: 0.52rem 1rem;
+  font-size: 0.84rem;
+  min-height: 2.4rem;
+}
+
+.btn-tiny {
+  padding: 0.32rem 0.7rem;
+  font-size: 0.76rem;
+  border-radius: 8px;
+  font-weight: 600;
+}
+
+.auth-inline {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+
+.auth-inline .btn-quiet {
+  background: rgba(255, 255, 255, 0.95);
+  color: var(--ink);
+  box-shadow: 0 1px 2px rgba(18, 28, 26, 0.04);
 }
 
 .editors {
@@ -281,12 +444,17 @@ textarea {
   display: flex;
   flex-direction: column;
   min-height: 0;
+  background: transparent;
 }
 
 .pane + .pane {
   border-left: 1px solid var(--panel-edge);
 }
 
+.pane-out {
+  background: rgba(244, 248, 246, 0.35);
+}
+
 .pane-head {
   display: flex;
   align-items: center;
@@ -306,7 +474,7 @@ textarea {
 
 .pane-actions {
   display: flex;
-  gap: 0.35rem;
+  gap: 0.4rem;
 }
 
 .ghost-btn {
@@ -361,15 +529,16 @@ textarea {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 0.75rem 1.15rem;
+  padding: 0.8rem 1.2rem;
   border-top: 1px solid var(--panel-edge);
-  background: rgba(244, 248, 246, 0.55);
+  background: rgba(244, 248, 246, 0.6);
   color: var(--muted);
   font-size: 0.84rem;
 }
 
 .statusbar .error {
   color: var(--warn);
+  font-weight: 500;
 }
 
 .statusbar .loading {
@@ -388,30 +557,6 @@ textarea {
   font-size: 0.84rem;
 }
 
-.account-chip {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.2rem;
-  text-align: right;
-}
-
-.account-plan {
-  font-weight: 700;
-  color: var(--accent);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  font-size: 0.72rem;
-}
-
-.account-email {
-  max-width: 14rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.78rem;
-}
-
 .auth-shell {
   position: relative;
   z-index: 1;
@@ -527,12 +672,13 @@ textarea {
 }
 
 .teaser-banner {
-  margin: -0.5rem 0 1.1rem;
-  padding: 0.75rem 1rem;
-  border-radius: 12px;
-  background: var(--accent-soft);
+  margin: 0 0 1.15rem;
+  padding: 0.95rem 1.15rem;
+  border-radius: 16px;
+  border: 1px solid rgba(26, 92, 74, 0.18);
+  background: linear-gradient(135deg, rgba(26, 92, 74, 0.1), rgba(251, 252, 251, 0.75));
   color: var(--ink-soft);
-  font-size: 0.92rem;
+  font-size: 0.94rem;
   line-height: 1.4;
 }
 
@@ -540,23 +686,40 @@ textarea {
   color: var(--accent);
 }
 
-.idle-banner {
+.teaser-cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.35rem 0.5rem;
+  justify-content: space-between;
+  gap: 0.85rem 1.25rem;
 }
 
-.auth-inline {
+.teaser-copy {
   display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  margin-top: 0.25rem;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  flex: 1;
 }
 
-.btn-compact {
-  padding: 0.4rem 0.75rem;
-  font-size: 0.8rem;
+.teaser-copy p {
+  margin: 0;
+}
+
+.teaser-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.idle-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.65rem 1rem;
 }
 
 .counts .over-limit {
@@ -564,6 +727,14 @@ textarea {
   font-weight: 600;
 }
 
+.tool-hint {
+  font-size: 0.72rem;
+  color: var(--muted);
+  letter-spacing: 0.02em;
+  text-transform: none;
+  font-weight: 500;
+}
+
 .modal-backdrop {
   position: fixed;
   inset: 0;
@@ -675,22 +846,6 @@ textarea {
   font-size: 0.78rem;
 }
 
-.teaser-cta {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem 1rem;
-}
-
-.tool-hint {
-  font-size: 0.72rem;
-  color: var(--muted);
-  letter-spacing: 0.02em;
-  text-transform: none;
-  font-weight: 500;
-}
-
 .word-meter {
   height: 3px;
   background: rgba(18, 28, 26, 0.06);
@@ -878,34 +1033,44 @@ textarea {
 @media (max-width: 920px) {
   .topbar {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
   }
 
   .top-meta {
-    text-align: left;
+    width: 100%;
   }
 
-  .account-chip {
-    align-items: flex-start;
-    text-align: left;
+  .account-panel {
+    width: 100%;
+    justify-content: space-between;
   }
 
-  .check {
-    margin-left: 0;
+  .account-panel-quiet {
+    align-items: flex-start;
   }
 
   .toolbar {
     align-items: stretch;
+    flex-direction: column;
+  }
+
+  .toolbar-controls {
+    width: 100%;
   }
 
   .toolbar-actions {
     width: 100%;
+    margin-left: 0;
   }
 
   .toolbar-actions .btn {
     flex: 1;
   }
 
+  .btn-rewrite {
+    flex: 1.4;
+  }
+
   .editors {
     grid-template-columns: 1fr;
   }
@@ -926,6 +1091,10 @@ textarea {
 
   .teaser-cta {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: stretch;
+  }
+
+  .teaser-cta .btn {
+    width: 100%;
   }
 }