| :root {
|
| --ink: #14201c;
|
| --ink-soft: #3d4f48;
|
| --muted: #6a7d74;
|
| --fog: #e6f2ec;
|
| --panel: #fffefb;
|
| --panel-edge: rgba(20, 40, 34, 0.1);
|
| --accent: #0f7a5f;
|
| --accent-hover: #0b614c;
|
| --accent-soft: rgba(15, 122, 95, 0.12);
|
| --coral: #e25a3c;
|
| --coral-hover: #c94a2f;
|
| --coral-soft: rgba(226, 90, 60, 0.14);
|
| --sky: #3d7ea6;
|
| --sky-soft: rgba(61, 126, 166, 0.12);
|
| --gold: #d4a017;
|
| --gold-soft: rgba(212, 160, 23, 0.16);
|
| --warn: #b33a2b;
|
| --radius: 14px;
|
| --font-display: "Fraunces", "Times New Roman", serif;
|
| --font-body: "Sora", system-ui, sans-serif;
|
| --font-write: "Literata", "Iowan Old Style", Georgia, serif;
|
| --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
|
| 0 18px 42px rgba(20, 40, 34, 0.07);
|
| }
|
|
|
| * {
|
| box-sizing: border-box;
|
| }
|
|
|
| html,
|
| body,
|
| #root {
|
| min-height: 100%;
|
| }
|
|
|
| body {
|
| margin: 0;
|
| color: var(--ink);
|
| font-family: var(--font-body);
|
| background-color: #d8e8e0;
|
| background-image:
|
| radial-gradient(ellipse 95% 65% at -5% -15%, rgba(255, 186, 140, 0.45) 0%, transparent 55%),
|
| radial-gradient(ellipse 90% 60% at 105% 0%, rgba(120, 190, 210, 0.38) 0%, transparent 52%),
|
| radial-gradient(ellipse 70% 50% at 50% 105%, rgba(80, 170, 130, 0.28) 0%, transparent 55%),
|
| radial-gradient(ellipse 45% 35% at 70% 40%, rgba(255, 220, 120, 0.18) 0%, transparent 60%),
|
| linear-gradient(165deg, #f3faf6 0%, #e4f0ea 45%, #d5e6dc 100%);
|
| background-attachment: fixed;
|
| }
|
|
|
|
|
| body::before {
|
| content: "";
|
| position: fixed;
|
| inset: 0;
|
| pointer-events: none;
|
| opacity: 0.38;
|
| 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;
|
| }
|
|
|
|
|
| body::after {
|
| content: "";
|
| position: fixed;
|
| inset: 0;
|
| pointer-events: none;
|
| z-index: 0;
|
| background-image:
|
| radial-gradient(ellipse 55% 40% at 88% 78%, rgba(15, 122, 95, 0.14) 0%, transparent 70%),
|
| radial-gradient(ellipse 42% 36% at 10% 55%, rgba(226, 90, 60, 0.1) 0%, transparent 65%),
|
| linear-gradient(
|
| to bottom,
|
| transparent 0,
|
| transparent 11px,
|
| rgba(18, 28, 26, 0.03) 11px,
|
| rgba(18, 28, 26, 0.03) 12px
|
| );
|
| background-size:
|
| auto,
|
| auto,
|
| 100% 28px;
|
| mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.22) 40%, rgba(0, 0, 0, 0.4));
|
| }
|
|
|
| button,
|
| textarea {
|
| font: inherit;
|
| }
|
|
|
| .app {
|
| position: relative;
|
| z-index: 1;
|
| width: min(1240px, calc(100% - 2.5rem));
|
| margin: 0 auto;
|
| padding: 2rem 0 3.5rem;
|
| }
|
|
|
| .shell {
|
| animation: enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
|
| }
|
|
|
|
|
| .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(15, 122, 95, 0.09);
|
| 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;
|
| transform: translateY(16px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: none;
|
| }
|
| }
|
|
|
| @keyframes fade-up {
|
| from {
|
| opacity: 0;
|
| transform: translateY(8px);
|
| }
|
| to {
|
| opacity: 1;
|
| transform: translateY(0);
|
| }
|
| }
|
|
|
| @keyframes breathe {
|
| 0%,
|
| 100% {
|
| opacity: 0.55;
|
| }
|
| 50% {
|
| opacity: 1;
|
| }
|
| }
|
|
|
| .topbar {
|
| display: flex;
|
| align-items: flex-end;
|
| justify-content: space-between;
|
| gap: 1.5rem;
|
| margin-bottom: 0.85rem;
|
| }
|
|
|
| .site-nav {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 0.65rem 1rem;
|
| margin-top: 0.85rem;
|
| align-items: center;
|
| }
|
|
|
| .site-nav a,
|
| .site-nav .nav-product {
|
| font-family: var(--font-body);
|
| font-size: 0.82rem;
|
| font-weight: 600;
|
| color: var(--ink-soft);
|
| text-decoration: none;
|
| background: none;
|
| border: none;
|
| padding: 0;
|
| cursor: pointer;
|
| }
|
|
|
| .site-nav a:hover,
|
| .site-nav .nav-product:hover {
|
| color: var(--accent);
|
| }
|
|
|
| .product-switcher {
|
| display: inline-flex;
|
| flex-wrap: wrap;
|
| gap: 0.35rem;
|
| margin-bottom: 1rem;
|
| padding: 0.3rem;
|
| border-radius: 14px;
|
| border: 1px solid var(--panel-edge);
|
| background: rgba(255, 255, 255, 0.72);
|
| box-shadow: 0 6px 18px rgba(15, 36, 28, 0.04);
|
| }
|
|
|
| .product-switcher button {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 0.4rem;
|
| border: none;
|
| background: transparent;
|
| color: var(--ink-soft);
|
| font-family: var(--font-body);
|
| font-size: 0.9rem;
|
| font-weight: 600;
|
| padding: 0.55rem 0.95rem;
|
| border-radius: 10px;
|
| cursor: pointer;
|
| }
|
|
|
| .product-switcher button.active {
|
| background: linear-gradient(165deg, #0f7a5f, #0b614c);
|
| color: #fff8f0;
|
| box-shadow: 0 6px 16px rgba(15, 122, 95, 0.22);
|
| }
|
|
|
| .product-switcher button.active .product-pill {
|
| background: rgba(255, 248, 240, 0.2);
|
| color: #fff8f0;
|
| }
|
|
|
| .product-pill {
|
| display: inline-flex;
|
| align-items: center;
|
| font-size: 0.65rem;
|
| font-weight: 700;
|
| letter-spacing: 0.06em;
|
| text-transform: uppercase;
|
| padding: 0.15rem 0.4rem;
|
| border-radius: 999px;
|
| background: rgba(226, 90, 60, 0.12);
|
| color: var(--coral);
|
| }
|
|
|
| .product-grid {
|
| display: grid;
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| gap: 1rem;
|
| }
|
|
|
| .product-card {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.65rem;
|
| padding: 1.25rem 1.2rem;
|
| border-radius: 18px;
|
| border: 1px solid var(--panel-edge);
|
| background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(232, 245, 239, 0.75));
|
| }
|
|
|
| .product-card-grammar {
|
| background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(255, 236, 228, 0.8));
|
| border-color: rgba(226, 90, 60, 0.22);
|
| }
|
|
|
| .product-card-top {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 0.5rem;
|
| }
|
|
|
| .product-card h3 {
|
| margin: 0;
|
| font-size: 1.2rem;
|
| }
|
|
|
| .product-tagline {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| font-size: 1.05rem;
|
| letter-spacing: -0.02em;
|
| color: var(--ink);
|
| }
|
|
|
| .product-card p {
|
| margin: 0;
|
| color: var(--ink-soft);
|
| font-size: 0.9rem;
|
| line-height: 1.5;
|
| }
|
|
|
| .product-card ul {
|
| margin: 0;
|
| padding-left: 1.1rem;
|
| color: var(--ink-soft);
|
| font-size: 0.86rem;
|
| line-height: 1.55;
|
| flex: 1;
|
| }
|
|
|
| .product-card .btn {
|
| align-self: flex-start;
|
| margin-top: 0.35rem;
|
| }
|
|
|
| .grammar-lead {
|
| margin: 0;
|
| color: var(--muted);
|
| font-size: 0.88rem;
|
| max-width: 36rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .engine-badge {
|
| display: inline-flex;
|
| align-self: flex-start;
|
| margin-top: 0.35rem;
|
| font-size: 0.72rem;
|
| font-weight: 700;
|
| letter-spacing: 0.04em;
|
| text-transform: uppercase;
|
| padding: 0.25rem 0.55rem;
|
| border-radius: 999px;
|
| border: 1px solid var(--panel-edge);
|
| background: rgba(255, 255, 255, 0.75);
|
| color: var(--ink-soft);
|
| }
|
|
|
| .engine-badge.engine-languagetool {
|
| border-color: rgba(15, 122, 95, 0.35);
|
| background: rgba(15, 122, 95, 0.1);
|
| color: var(--accent);
|
| }
|
|
|
| .engine-badge.engine-rules {
|
| border-color: rgba(226, 90, 60, 0.35);
|
| background: rgba(226, 90, 60, 0.1);
|
| color: var(--coral);
|
| }
|
|
|
| .grammar-lang {
|
| flex-wrap: wrap;
|
| }
|
|
|
| .grammar-lang button {
|
| font-variant-numeric: tabular-nums;
|
| font-size: 0.78rem;
|
| padding-inline: 0.55rem;
|
| }
|
|
|
| .grammar-issues-pane {
|
| min-height: 18rem;
|
| }
|
|
|
| .issue-count {
|
| font-size: 0.78rem;
|
| color: var(--muted);
|
| font-weight: 600;
|
| }
|
|
|
| .issue-list {
|
| list-style: none;
|
| margin: 0;
|
| padding: 0.75rem;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.65rem;
|
| overflow: auto;
|
| max-height: 22rem;
|
| }
|
|
|
| .issue-item {
|
| display: flex;
|
| align-items: flex-start;
|
| justify-content: space-between;
|
| gap: 0.75rem;
|
| padding: 0.75rem 0.85rem;
|
| border-radius: 12px;
|
| border: 1px solid var(--panel-edge);
|
| background: rgba(255, 255, 255, 0.8);
|
| }
|
|
|
| .issue-cat {
|
| display: inline-block;
|
| font-size: 0.68rem;
|
| font-weight: 700;
|
| letter-spacing: 0.06em;
|
| text-transform: uppercase;
|
| color: var(--accent);
|
| margin-bottom: 0.25rem;
|
| }
|
|
|
| .issue-item.cat-spelling .issue-cat {
|
| color: var(--coral);
|
| }
|
|
|
| .issue-item.cat-punctuation .issue-cat {
|
| color: #2a6f97;
|
| }
|
|
|
| .issue-main p {
|
| margin: 0 0 0.35rem;
|
| font-size: 0.88rem;
|
| color: var(--ink);
|
| }
|
|
|
| .issue-snippet {
|
| display: block;
|
| font-size: 0.78rem;
|
| color: var(--ink-soft);
|
| background: rgba(15, 36, 28, 0.04);
|
| padding: 0.25rem 0.4rem;
|
| border-radius: 6px;
|
| white-space: pre-wrap;
|
| }
|
|
|
| .grammar-empty {
|
| margin: 0;
|
| padding: 1.25rem;
|
| color: var(--muted);
|
| font-size: 0.9rem;
|
| line-height: 1.5;
|
| }
|
|
|
| @media (max-width: 820px) {
|
| .product-grid {
|
| grid-template-columns: 1fr;
|
| }
|
| }
|
|
|
| .brand {
|
| max-width: 40rem;
|
| }
|
|
|
| .brand-lockup {
|
| display: flex;
|
| align-items: center;
|
| gap: 0.85rem;
|
| }
|
|
|
| .brand-logo {
|
| display: block;
|
| border-radius: 14px;
|
| object-fit: cover;
|
| flex-shrink: 0;
|
| box-shadow: 0 8px 22px rgba(15, 122, 95, 0.22);
|
| }
|
|
|
| .brand-logo-hero {
|
| border-radius: 16px;
|
| }
|
|
|
| .brand-text {
|
| min-width: 0;
|
| }
|
|
|
| .brand-mark {
|
| margin: 0 0 0.2rem;
|
| font-family: var(--font-body);
|
| font-size: 0.72rem;
|
| font-weight: 700;
|
| letter-spacing: 0.18em;
|
| text-transform: uppercase;
|
| color: var(--coral);
|
| }
|
|
|
| .brand h1 {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| font-size: clamp(2.35rem, 4.8vw, 3.35rem);
|
| font-weight: 700;
|
| letter-spacing: -0.035em;
|
| line-height: 0.95;
|
| color: var(--ink);
|
| }
|
|
|
| .brand-tag {
|
| margin: 0.85rem 0 0;
|
| color: var(--ink-soft);
|
| font-size: 1.02rem;
|
| line-height: 1.45;
|
| max-width: 28rem;
|
| }
|
|
|
| .top-meta {
|
| 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 rgba(15, 122, 95, 0.18);
|
| border-radius: 16px;
|
| background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(230, 245, 238, 0.9));
|
| box-shadow: 0 10px 28px rgba(20, 40, 34, 0.06);
|
| 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);
|
| }
|
|
|
| .stage {
|
| border: 1px solid rgba(15, 122, 95, 0.14);
|
| border-radius: 22px;
|
| background: linear-gradient(180deg, rgba(255, 254, 251, 0.92), rgba(245, 250, 247, 0.88));
|
| box-shadow: var(--shadow-soft);
|
| backdrop-filter: blur(14px);
|
| overflow: hidden;
|
| animation: enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
|
| }
|
|
|
| .toolbar {
|
| display: flex;
|
| flex-wrap: wrap;
|
| align-items: flex-end;
|
| justify-content: space-between;
|
| gap: 1rem 1.25rem;
|
| padding: 1rem 1.2rem;
|
| border-bottom: 1px solid rgba(15, 122, 95, 0.1);
|
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(232, 246, 240, 0.75));
|
| }
|
|
|
| .toolbar-controls {
|
| display: flex;
|
| flex-wrap: wrap;
|
| align-items: flex-end;
|
| gap: 1rem 1.35rem;
|
| min-width: 0;
|
| }
|
|
|
| .tool-group {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.35rem;
|
| }
|
|
|
| .tool-group > span:first-child {
|
| font-size: 0.68rem;
|
| font-weight: 600;
|
| letter-spacing: 0.1em;
|
| text-transform: uppercase;
|
| color: var(--muted);
|
| }
|
|
|
| .segment {
|
| display: inline-flex;
|
| padding: 3px;
|
| border: 1px solid rgba(15, 122, 95, 0.16);
|
| border-radius: 10px;
|
| background: linear-gradient(180deg, rgba(210, 235, 225, 0.7), rgba(232, 239, 236, 0.55));
|
| }
|
|
|
| .segment button {
|
| border: 0;
|
| background: transparent;
|
| color: var(--ink-soft);
|
| padding: 0.45rem 0.75rem;
|
| border-radius: 8px;
|
| font-size: 0.86rem;
|
| font-weight: 500;
|
| cursor: pointer;
|
| transition:
|
| background 0.2s ease,
|
| color 0.2s ease,
|
| transform 0.15s ease;
|
| }
|
|
|
| .segment button:hover {
|
| color: var(--ink);
|
| }
|
|
|
| .segment button.active {
|
| background: #fff;
|
| color: var(--accent);
|
| box-shadow: 0 1px 3px rgba(15, 122, 95, 0.14);
|
| font-weight: 600;
|
| }
|
|
|
| .check {
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 0.5rem;
|
| color: var(--ink-soft);
|
| font-size: 0.88rem;
|
| cursor: pointer;
|
| user-select: none;
|
| padding-bottom: 0.35rem;
|
| }
|
|
|
| .check input {
|
| width: 1rem;
|
| height: 1rem;
|
| accent-color: var(--accent);
|
| }
|
|
|
| .check-locked {
|
| opacity: 0.78;
|
| }
|
|
|
| .check-badge {
|
| font-size: 0.68rem;
|
| font-weight: 700;
|
| letter-spacing: 0.04em;
|
| text-transform: uppercase;
|
| color: var(--accent);
|
| border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
|
| border-radius: 0.35rem;
|
| padding: 0.08rem 0.35rem;
|
| }
|
|
|
| .toolbar-actions {
|
| display: flex;
|
| align-items: center;
|
| gap: 0.55rem;
|
| margin-left: auto;
|
| }
|
|
|
| .btn {
|
| border: 0;
|
| 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,
|
| border-color 0.2s ease,
|
| box-shadow 0.2s ease;
|
| }
|
|
|
| .btn:disabled {
|
| opacity: 0.45;
|
| cursor: not-allowed;
|
| transform: none;
|
| }
|
|
|
| .btn-primary {
|
| background: linear-gradient(160deg, #149572 0%, var(--accent) 55%, #0c6a52 100%);
|
| color: #f5faf8;
|
| box-shadow: 0 8px 18px rgba(15, 122, 95, 0.28);
|
| }
|
|
|
| .btn-rewrite {
|
| min-width: 8.5rem;
|
| padding: 0.82rem 1.45rem;
|
| font-size: 0.98rem;
|
| background: linear-gradient(160deg, #ef6d4f 0%, var(--coral) 50%, #c94a2f 100%);
|
| box-shadow: 0 8px 20px rgba(226, 90, 60, 0.28);
|
| }
|
|
|
| .btn-rewrite:not(:disabled):hover {
|
| background: linear-gradient(160deg, #f07a5e 0%, var(--coral-hover) 60%);
|
| transform: translateY(-1px);
|
| }
|
|
|
| .btn-primary:not(:disabled):hover {
|
| background: linear-gradient(160deg, #16a07c 0%, var(--accent-hover) 60%);
|
| transform: translateY(-1px);
|
| }
|
|
|
| .btn-primary:not(:disabled):active,
|
| .btn-rewrite:not(:disabled):active {
|
| transform: translateY(0);
|
| }
|
|
|
| .btn-quiet {
|
| background: rgba(255, 255, 255, 0.75);
|
| color: var(--ink-soft);
|
| border: 1px solid var(--panel-edge);
|
| }
|
|
|
| .btn-quiet:not(:disabled):hover {
|
| 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 {
|
| display: grid;
|
| grid-template-columns: 1fr 1fr;
|
| min-height: min(62vh, 560px);
|
| }
|
|
|
| .pane {
|
| display: flex;
|
| flex-direction: column;
|
| min-height: 0;
|
| background: transparent;
|
| }
|
|
|
| .pane + .pane {
|
| border-left: 1px solid var(--panel-edge);
|
| }
|
|
|
| .pane-out {
|
| background: linear-gradient(180deg, rgba(232, 246, 240, 0.45), rgba(255, 248, 240, 0.35));
|
| }
|
|
|
| .pane-head {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 0.75rem;
|
| padding: 0.85rem 1.15rem 0.35rem;
|
| }
|
|
|
| .pane-head h2 {
|
| margin: 0;
|
| font-size: 0.72rem;
|
| font-weight: 600;
|
| letter-spacing: 0.12em;
|
| text-transform: uppercase;
|
| color: var(--muted);
|
| }
|
|
|
| .pane-actions {
|
| display: flex;
|
| gap: 0.4rem;
|
| }
|
|
|
| .ghost-btn {
|
| border: 0;
|
| background: transparent;
|
| color: var(--muted);
|
| font-size: 0.78rem;
|
| font-weight: 600;
|
| letter-spacing: 0.04em;
|
| padding: 0.3rem 0.5rem;
|
| border-radius: 6px;
|
| cursor: pointer;
|
| }
|
|
|
| .ghost-btn:hover:not(:disabled) {
|
| background: var(--accent-soft);
|
| color: var(--accent);
|
| }
|
|
|
| .ghost-btn:disabled {
|
| opacity: 0.35;
|
| cursor: not-allowed;
|
| }
|
|
|
| .pane textarea {
|
| flex: 1;
|
| width: 100%;
|
| min-height: 420px;
|
| border: 0;
|
| resize: none;
|
| padding: 0.55rem 1.2rem 1.35rem;
|
| background: transparent;
|
| color: var(--ink);
|
| font-family: var(--font-write);
|
| font-size: 1.05rem;
|
| line-height: 1.7;
|
| outline: none;
|
| }
|
|
|
| .pane textarea::placeholder {
|
| color: #95a59f;
|
| font-family: var(--font-body);
|
| font-size: 0.95rem;
|
| }
|
|
|
| .pane.writing textarea {
|
| animation: fade-up 0.45s ease both;
|
| }
|
|
|
| .statusbar {
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 1rem;
|
| padding: 0.8rem 1.2rem;
|
| border-top: 1px solid var(--panel-edge);
|
| background: rgba(244, 248, 246, 0.6);
|
| color: var(--muted);
|
| font-size: 0.84rem;
|
| }
|
|
|
| .statusbar .error {
|
| color: var(--warn);
|
| font-weight: 500;
|
| }
|
|
|
| .statusbar .loading {
|
| animation: breathe 1.2s ease infinite;
|
| }
|
|
|
| .counts {
|
| display: flex;
|
| gap: 1rem;
|
| font-variant-numeric: tabular-nums;
|
| }
|
|
|
| .hint {
|
| margin-top: 1.1rem;
|
| color: var(--muted);
|
| font-size: 0.84rem;
|
| }
|
|
|
| .auth-shell {
|
| position: relative;
|
| z-index: 1;
|
| min-height: 100vh;
|
| display: grid;
|
| place-items: center;
|
| padding: 2rem 1rem;
|
| }
|
|
|
| .auth-card {
|
| width: min(420px, 100%);
|
| padding: 2rem 1.6rem 1.75rem;
|
| border: 1px solid var(--panel-edge);
|
| border-radius: 22px;
|
| background: rgba(251, 252, 251, 0.88);
|
| box-shadow: var(--shadow-soft);
|
| backdrop-filter: blur(14px);
|
| animation: enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
|
| }
|
|
|
| .auth-card h1 {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| font-size: 2.4rem;
|
| letter-spacing: -0.03em;
|
| line-height: 1;
|
| }
|
|
|
| .auth-brand {
|
| display: flex;
|
| align-items: center;
|
| gap: 0.75rem;
|
| margin: 0 1.5rem 0.35rem 0;
|
| }
|
|
|
| .auth-brand .brand-logo {
|
| border-radius: 11px;
|
| box-shadow: 0 6px 16px rgba(15, 122, 95, 0.2);
|
| }
|
|
|
| .auth-brand-name {
|
| margin: 0 0 0.15rem;
|
| font-size: 0.72rem;
|
| font-weight: 700;
|
| letter-spacing: 0.12em;
|
| text-transform: uppercase;
|
| color: var(--accent);
|
| }
|
|
|
| .auth-brand h2 {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| font-size: 1.55rem;
|
| letter-spacing: -0.02em;
|
| line-height: 1.15;
|
| }
|
|
|
| .auth-lead {
|
| margin: 0.75rem 0 1.35rem;
|
| color: var(--ink-soft);
|
| line-height: 1.45;
|
| font-size: 0.98rem;
|
| }
|
|
|
| .auth-tabs {
|
| width: 100%;
|
| margin-bottom: 1.1rem;
|
| }
|
|
|
| .auth-tabs button {
|
| flex: 1;
|
| }
|
|
|
| .auth-form {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.85rem;
|
| }
|
|
|
| .auth-form label {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.35rem;
|
| font-size: 0.78rem;
|
| font-weight: 600;
|
| letter-spacing: 0.06em;
|
| text-transform: uppercase;
|
| color: var(--muted);
|
| }
|
|
|
| .auth-form input {
|
| border: 1px solid var(--panel-edge);
|
| border-radius: 10px;
|
| padding: 0.7rem 0.85rem;
|
| font-size: 0.95rem;
|
| font-weight: 500;
|
| letter-spacing: 0;
|
| text-transform: none;
|
| color: var(--ink);
|
| background: #fff;
|
| }
|
|
|
| .auth-form input:focus {
|
| outline: 2px solid var(--accent-soft);
|
| border-color: var(--accent);
|
| }
|
|
|
| .auth-submit,
|
| .auth-google {
|
| width: 100%;
|
| }
|
|
|
| .auth-google {
|
| display: inline-flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 0.65rem;
|
| background: #fff;
|
| border-color: rgba(15, 36, 28, 0.16);
|
| color: #3c4043;
|
| font-weight: 600;
|
| }
|
|
|
| .auth-google:hover:not(:disabled) {
|
| background: #f8f9fa;
|
| border-color: rgba(15, 36, 28, 0.28);
|
| }
|
|
|
| .auth-google:disabled {
|
| opacity: 0.65;
|
| }
|
|
|
| .google-g {
|
| flex-shrink: 0;
|
| display: block;
|
| }
|
|
|
| .auth-divider {
|
| display: grid;
|
| grid-template-columns: 1fr auto 1fr;
|
| align-items: center;
|
| gap: 0.75rem;
|
| margin: 1rem 0;
|
| color: var(--muted);
|
| font-size: 0.78rem;
|
| text-transform: uppercase;
|
| letter-spacing: 0.08em;
|
| }
|
|
|
| .auth-divider::before,
|
| .auth-divider::after {
|
| content: "";
|
| height: 1px;
|
| background: var(--panel-edge);
|
| }
|
|
|
| .auth-error {
|
| margin: 0.85rem 0 0;
|
| color: var(--warn);
|
| font-size: 0.88rem;
|
| }
|
|
|
| .auth-ok {
|
| margin: 0.85rem 0 0;
|
| color: var(--accent);
|
| font-size: 0.88rem;
|
| }
|
|
|
| .teaser-banner {
|
| margin: 0 0 1.15rem;
|
| padding: 0.95rem 1.15rem;
|
| border-radius: 16px;
|
| border: 1px solid rgba(226, 90, 60, 0.22);
|
| background: linear-gradient(
|
| 120deg,
|
| rgba(255, 230, 214, 0.85) 0%,
|
| rgba(220, 245, 235, 0.9) 48%,
|
| rgba(210, 232, 245, 0.75) 100%
|
| );
|
| color: var(--ink-soft);
|
| font-size: 0.94rem;
|
| line-height: 1.4;
|
| }
|
|
|
| .teaser-banner strong {
|
| color: var(--coral);
|
| }
|
|
|
| .teaser-cta {
|
| display: flex;
|
| flex-wrap: wrap;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 0.85rem 1.25rem;
|
| }
|
|
|
| .teaser-copy {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.25rem;
|
| min-width: 0;
|
| flex: 1;
|
| }
|
|
|
| .teaser-copy p {
|
| margin: 0;
|
| }
|
|
|
| .teaser-label {
|
| font-size: 0.68rem;
|
| font-weight: 700;
|
| letter-spacing: 0.12em;
|
| text-transform: uppercase;
|
| color: var(--coral);
|
| }
|
|
|
| .idle-banner {
|
| display: flex;
|
| flex-wrap: wrap;
|
| align-items: center;
|
| justify-content: space-between;
|
| gap: 0.65rem 1rem;
|
| }
|
|
|
| .counts .over-limit {
|
| color: var(--warn);
|
| 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;
|
| z-index: 1000;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
|
| overflow-y: auto;
|
| background: rgba(18, 28, 26, 0.5);
|
| backdrop-filter: blur(5px);
|
| animation: enter 0.25s ease both;
|
| }
|
|
|
| .modal-card {
|
| position: relative;
|
| margin: auto;
|
| max-height: min(90vh, 640px);
|
| overflow: auto;
|
| flex-shrink: 0;
|
| }
|
|
|
| .modal-card h2 {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| letter-spacing: -0.02em;
|
| }
|
|
|
| .modal-close {
|
| position: absolute;
|
| top: 0.75rem;
|
| right: 0.85rem;
|
| border: 0;
|
| background: transparent;
|
| color: var(--muted);
|
| font-size: 1.5rem;
|
| line-height: 1;
|
| cursor: pointer;
|
| }
|
|
|
| .upgrade-card {
|
| margin-top: 1.25rem;
|
| padding: 1.25rem 1.35rem;
|
| border: 1px solid rgba(15, 122, 95, 0.18);
|
| border-radius: 18px;
|
| background: linear-gradient(145deg, rgba(255, 254, 251, 0.95), rgba(232, 246, 240, 0.88));
|
| box-shadow: var(--shadow-soft);
|
| animation: fade-up 0.45s ease both;
|
| }
|
|
|
| .upgrade-copy h3 {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| font-size: 1.35rem;
|
| letter-spacing: -0.02em;
|
| }
|
|
|
| .upgrade-copy p {
|
| margin: 0.45rem 0 0;
|
| color: var(--ink-soft);
|
| font-size: 0.95rem;
|
| line-height: 1.45;
|
| max-width: 40rem;
|
| }
|
|
|
| .upgrade-plans {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 0.65rem;
|
| margin-top: 1rem;
|
| }
|
|
|
| .plan-pill {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.15rem;
|
| min-width: 9.5rem;
|
| padding: 0.7rem 0.85rem;
|
| border-radius: 12px;
|
| border: 1px solid var(--panel-edge);
|
| background: rgba(232, 239, 236, 0.55);
|
| font-size: 0.82rem;
|
| color: var(--ink-soft);
|
| }
|
|
|
| .plan-pill strong {
|
| color: var(--ink);
|
| font-size: 0.9rem;
|
| }
|
|
|
| .plan-pill-pro {
|
| border-color: rgba(226, 90, 60, 0.35);
|
| background: var(--coral-soft);
|
| }
|
|
|
| .plan-price {
|
| font-weight: 700;
|
| color: var(--coral);
|
| margin-top: 0.15rem;
|
| }
|
|
|
| .upgrade-actions {
|
| display: flex;
|
| flex-wrap: wrap;
|
| gap: 0.5rem;
|
| margin-top: 1rem;
|
| }
|
|
|
| .upgrade-note {
|
| margin: 0.75rem 0 0;
|
| color: var(--muted);
|
| font-size: 0.78rem;
|
| }
|
|
|
| .word-meter {
|
| height: 3px;
|
| background: rgba(18, 28, 26, 0.06);
|
| }
|
|
|
| .word-meter-fill {
|
| height: 100%;
|
| background: linear-gradient(90deg, var(--accent), #2aa88a);
|
| transition: width 0.25s ease, background 0.2s ease;
|
| }
|
|
|
| .word-meter-fill.hot {
|
| background: linear-gradient(90deg, var(--gold), #e8b84a);
|
| }
|
|
|
| .word-meter-fill.over {
|
| background: linear-gradient(90deg, var(--coral), var(--warn));
|
| }
|
|
|
| .landing {
|
| margin-top: 2.75rem;
|
| display: flex;
|
| flex-direction: column;
|
| gap: 2.75rem;
|
| padding-bottom: 2rem;
|
| }
|
|
|
| .land-block h2 {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| font-size: clamp(1.6rem, 3vw, 2.1rem);
|
| letter-spacing: -0.03em;
|
| }
|
|
|
| .land-lead {
|
| margin: 0.45rem 0 0;
|
| color: var(--ink-soft);
|
| max-width: 34rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .steps {
|
| list-style: none;
|
| margin: 1.35rem 0 0;
|
| padding: 0;
|
| display: grid;
|
| gap: 0.85rem;
|
| }
|
|
|
| .steps li {
|
| display: flex;
|
| gap: 0.9rem;
|
| align-items: flex-start;
|
| padding: 1rem 1.1rem;
|
| border-radius: 14px;
|
| border: 1px solid rgba(15, 122, 95, 0.12);
|
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(232, 246, 240, 0.75));
|
| }
|
|
|
| .steps li:nth-child(2) {
|
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 236, 224, 0.7));
|
| border-color: rgba(226, 90, 60, 0.14);
|
| }
|
|
|
| .steps li:nth-child(3) {
|
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(220, 236, 245, 0.75));
|
| border-color: rgba(61, 126, 166, 0.16);
|
| }
|
|
|
| .step-num {
|
| flex: 0 0 auto;
|
| width: 1.85rem;
|
| height: 1.85rem;
|
| display: grid;
|
| place-items: center;
|
| border-radius: 999px;
|
| background: var(--accent);
|
| color: #f5faf8;
|
| font-size: 0.85rem;
|
| font-weight: 700;
|
| }
|
|
|
| .steps li:nth-child(2) .step-num {
|
| background: var(--coral);
|
| }
|
|
|
| .steps li:nth-child(3) .step-num {
|
| background: var(--sky);
|
| }
|
|
|
| .steps strong {
|
| display: block;
|
| margin-bottom: 0.2rem;
|
| }
|
|
|
| .steps p {
|
| margin: 0;
|
| color: var(--ink-soft);
|
| font-size: 0.92rem;
|
| line-height: 1.4;
|
| }
|
|
|
| .audience-grid {
|
| margin-top: 1.25rem;
|
| display: grid;
|
| grid-template-columns: repeat(2, minmax(0, 1fr));
|
| gap: 0.85rem;
|
| }
|
|
|
| .audience-grid article {
|
| padding: 1.1rem 1.15rem;
|
| border-radius: 14px;
|
| border: 1px solid rgba(15, 122, 95, 0.12);
|
| background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(232, 246, 240, 0.7));
|
| }
|
|
|
| .audience-grid article:nth-child(2) {
|
| border-color: rgba(226, 90, 60, 0.16);
|
| background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 236, 224, 0.72));
|
| }
|
|
|
| .audience-grid article:nth-child(3) {
|
| border-color: rgba(61, 126, 166, 0.18);
|
| background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(220, 236, 245, 0.75));
|
| }
|
|
|
| .audience-grid article:nth-child(4) {
|
| border-color: rgba(212, 160, 23, 0.22);
|
| background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 214, 0.75));
|
| }
|
|
|
| .audience-grid h3 {
|
| margin: 0;
|
| font-size: 1.02rem;
|
| font-family: var(--font-display);
|
| letter-spacing: -0.02em;
|
| }
|
|
|
| .audience-grid article:nth-child(1) h3 {
|
| color: var(--accent);
|
| }
|
|
|
| .audience-grid article:nth-child(2) h3 {
|
| color: var(--coral);
|
| }
|
|
|
| .audience-grid article:nth-child(3) h3 {
|
| color: var(--sky);
|
| }
|
|
|
| .audience-grid article:nth-child(4) h3 {
|
| color: #a67c00;
|
| }
|
|
|
| .audience-grid p {
|
| margin: 0.4rem 0 0;
|
| color: var(--ink-soft);
|
| font-size: 0.9rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .pricing-grid {
|
| margin-top: 1.25rem;
|
| display: grid;
|
| grid-template-columns: repeat(3, minmax(0, 1fr));
|
| gap: 0.85rem;
|
| }
|
|
|
| .price-card {
|
| padding: 1.2rem 1.15rem;
|
| border-radius: 16px;
|
| border: 1px solid rgba(15, 122, 95, 0.14);
|
| background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(232, 246, 240, 0.8));
|
| display: flex;
|
| flex-direction: column;
|
| gap: 0.55rem;
|
| }
|
|
|
| .price-card:nth-child(1) {
|
| border-color: rgba(61, 126, 166, 0.2);
|
| background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(220, 236, 245, 0.8));
|
| }
|
|
|
| .price-card-pro {
|
| border-color: rgba(226, 90, 60, 0.32);
|
| background: linear-gradient(165deg, rgba(255, 248, 244, 0.98), rgba(255, 230, 214, 0.85));
|
| box-shadow: 0 10px 28px rgba(226, 90, 60, 0.1);
|
| }
|
|
|
| .price-card-plus {
|
| border-color: rgba(15, 122, 95, 0.28);
|
| background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(220, 245, 235, 0.9));
|
| box-shadow: 0 10px 28px rgba(15, 122, 95, 0.1);
|
| }
|
|
|
| .price-card h3 {
|
| margin: 0;
|
| font-size: 1.05rem;
|
| }
|
|
|
| .price-card-pro h3 {
|
| color: var(--coral);
|
| }
|
|
|
| .price-card-plus h3 {
|
| color: var(--accent);
|
| }
|
|
|
| .price-amount {
|
| margin: 0;
|
| font-family: var(--font-display);
|
| font-size: 1.85rem;
|
| letter-spacing: -0.03em;
|
| color: var(--ink);
|
| }
|
|
|
| .price-card-pro .price-amount {
|
| color: var(--coral);
|
| }
|
|
|
| .price-card-plus .price-amount {
|
| color: var(--accent);
|
| }
|
|
|
| .price-amount span {
|
| font-size: 0.95rem;
|
| color: var(--muted);
|
| font-family: var(--font-body);
|
| }
|
|
|
| .price-card ul {
|
| margin: 0;
|
| padding-left: 1.1rem;
|
| color: var(--ink-soft);
|
| font-size: 0.88rem;
|
| line-height: 1.55;
|
| flex: 1;
|
| }
|
|
|
| .price-soon {
|
| margin: 0;
|
| font-size: 0.78rem;
|
| color: var(--muted);
|
| }
|
|
|
| .plans-note {
|
| margin: 1rem 0 0;
|
| color: var(--muted);
|
| font-size: 0.84rem;
|
| }
|
|
|
| .site-footer {
|
| margin-top: 0.5rem;
|
| padding-top: 1.5rem;
|
| border-top: 1px solid var(--panel-edge);
|
| color: var(--muted);
|
| font-size: 0.82rem;
|
| line-height: 1.45;
|
| }
|
|
|
| .footer-brand {
|
| margin: 0.55rem 0 0;
|
| font-family: var(--font-display);
|
| color: var(--ink-soft);
|
| font-size: 1rem;
|
| display: inline-flex;
|
| align-items: center;
|
| gap: 0.55rem;
|
| }
|
|
|
| .footer-brand .brand-logo {
|
| border-radius: 8px;
|
| box-shadow: 0 4px 12px rgba(15, 122, 95, 0.18);
|
| }
|
|
|
| @media (max-width: 920px) {
|
| .topbar {
|
| flex-direction: column;
|
| align-items: stretch;
|
| }
|
|
|
| .top-meta {
|
| width: 100%;
|
| }
|
|
|
| .account-panel {
|
| width: 100%;
|
| justify-content: space-between;
|
| }
|
|
|
| .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;
|
| }
|
|
|
| .pane + .pane {
|
| border-left: 0;
|
| border-top: 1px solid var(--panel-edge);
|
| }
|
|
|
| .pane textarea {
|
| min-height: 280px;
|
| }
|
|
|
| .audience-grid,
|
| .pricing-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .teaser-cta {
|
| flex-direction: column;
|
| align-items: stretch;
|
| }
|
|
|
| .teaser-cta .btn {
|
| width: 100%;
|
| }
|
| }
|
|
|
