/* ===== Light pastel theme (turquoise ↔ pink) ===== */
:root{
  --bg1:#a8edea;  /* turquoise */
  --bg2:#fbc2eb;  /* pink */
  --paper:#ffffff;
  --ink:#202124;
  --muted:#596275;
  --accent:#8b5cf6;
  --accent2:#22d3ee;
  --border:#e8eaf1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
}

/* Top navigation (simple) */
.topnav{
  display:flex; gap:1rem; padding:1rem 1.25rem;
  backdrop-filter:saturate(120%) blur(6px);
}
.topnav a{
  text-decoration:none; color:#334155; font-weight:700;
  padding:.45rem .7rem; border-radius:10px;
}
.topnav a.active{ background:#ffffffaa; }

/* Landing (logo) */
.hero-center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; text-align:center;
}
.logo-img{ width:300px; max-width:90%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.12)); }
.landing-tagline{ font-weight:700; margin:1rem 0 2rem; color:#2b2d42; }
.landing-buttons{ display:flex; gap:1rem; justify-content:center; }

/* Shared buttons */
.btn{
  border:0; border-radius:999px; padding:.75rem 1.1rem; cursor:pointer;
  background:#f3f5ff; color:#1f2440; font-weight:700;
  transition: transform .1s, box-shadow .15s, opacity .15s;
  text-decoration:none; display:inline-block;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.btn:hover{ transform: translateY(-1px); }
.btn.primary{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; box-shadow: 0 10px 24px rgba(139,92,246,.35);
}
.btn.ghost{ background:transparent; color:#374151; outline:1px solid #d8def0; }

/* Light page sections */
.page-light{ min-height:100vh; }
.site-header{ text-align:center; padding:2rem 1.25rem 1.2rem; }
.brand{ margin:0; font-size:clamp(2rem,6vw,3rem); font-weight:900; letter-spacing:.2px; }
.heart{ filter: drop-shadow(0 0 10px rgba(139,92,246,.4)); }
.tagline{ margin:.4rem 0 .6rem; font-weight:700; }
.intro{ max-width:900px; margin:0 auto; opacity:.95; }

.wrap{ max-width:1000px; margin:1.2rem auto 3rem; padding:0 1.25rem; }

/* Editor card (white) */
.editor-card{
  position:relative; background:var(--paper); border:1px solid var(--border);
  border-radius:22px; padding:1rem; box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.toolbar{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.75rem; position:relative; }

/* Editor */
.editor-area{ position:relative; }
textarea#editor{
  width:100%; min-height:220px; resize:vertical;
  border:1px solid var(--border); border-radius:16px;
  padding:1rem 1.1rem 3.6rem;
  background:#ffffff; color:#111; font-size:1rem; line-height:1.6;
  outline:2px solid transparent; transition:outline .15s ease, box-shadow .15s ease;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
textarea#editor:focus{ outline:2px solid rgba(139,92,246,.45); }

/* Husky bubbles */
.husky{
  position:absolute; right:12px; bottom:10px;
  background: linear-gradient(135deg, #ffffffcc, #f1f9ffcc);
  padding: 10px 12px; border-radius: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
.husky-bubble{ color:#4b5563; font-size:.9rem; margin-top:.25rem; }
.husky svg{ animation: wiggle 1.3s ease-in-out infinite; }

/* Runner husky over toolbar */
.husky-runner{
  position:absolute; width:52px; height:52px; pointer-events:none; z-index:2000;
  transition: transform .2s ease, opacity .2s ease; opacity: 0;
  background: linear-gradient(135deg, #ffffffcc, #ffeefdcc);
  padding:4px; border-radius: 50%;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.husky-runner.hidden{opacity:0}
.husky-runner svg{ animation: runHusky .6s ease-in-out infinite; }

@keyframes wiggle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-2deg)}}
@keyframes runHusky{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}

/* Suggestions panel */
.suggestions{
  margin-top:.8rem; background:#fff; border:1px solid var(--border);
  border-radius:14px; padding:.6rem; max-height:240px; overflow:auto; color:#111;
}
.suggestion-item{ padding:.45rem .55rem; border-radius:10px }
.suggestion-item + .suggestion-item{ margin-top:.25rem }
.suggestion-item small{ color:#6b7280 }
.suggestion-actions{ display:flex; gap:.4rem; margin-top:.35rem }
.inline-btn{ padding:.35rem .6rem; border-radius:8px; border:0; cursor:pointer; background:#eef2ff; color:#1f2440 }
.inline-btn.apply{ background:linear-gradient(135deg, var(--accent), var(--accent2)); color:#fff }

/* Result dialog */
.result-dialog{ border:0; border-radius:16px; padding:0; color:#111; max-width:700px; width:min(92vw,700px); background:#fff }
.result-dialog::backdrop{ background:rgba(0,0,0,.35) }
.result-dialog form{ padding:1rem 1rem 1.2rem }
.result-dialog h3{ margin:.25rem 0 .6rem; color:#111 }
#issues{ max-height:60vh; overflow:auto }
.issue{ background:#f8faff; border:1px solid #e6ecff; border-radius:12px; padding:.6rem .7rem; margin:.45rem 0 }
.issue .bad{ color:#b42323; font-weight:700 }
.issue .good{ color:#175cd3; font-weight:700 }

/* Footer */
.site-footer{ padding:1.2rem 1.25rem; text-align:center; color:#3c4157 }
/* Layout fixes for About page */
.page-light{
  min-height: 100vh;
  background: linear-gradient(135deg, #a8edea, #fbc2eb);
  display: flex;
  flex-direction: column;
}

.topnav{
  display: flex;
  justify-content: center;   /* center the nav */
  gap: 1rem;
  padding: 1rem 1.25rem;
  position: sticky; top: 0;  /* optional: keeps nav visible */
  backdrop-filter: saturate(120%) blur(6px);
}

.topnav a{
  text-decoration: none;
  color: #334155;
  font-weight: 700;
  padding: .45rem .7rem;
  border-radius: 10px;
}
.topnav a.active{ background: #ffffffaa; }

/* Center the content card */
.content-box{
  background: #fff;
  padding: 2rem;
  border-radius: 18px;
  max-width: 800px;
  width: min(92vw, 800px);
  margin: 2rem auto 3rem;     /* <— centers the box */
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
/* Fullscreen, device-safe hero */
.hero-full{
  position: relative;
  min-height: 100svh;                 /* fits iOS/Android correctly */
  background: var(--hero) center / cover no-repeat;
  display: grid;
  place-items: center;
}

/* Soft veil for readability over any image */
.hero-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.35),
    rgba(255,255,255,.55)
  );
}

.hero-title{
  position: relative;
  text-align: center;
  color: #1f2937;
  padding: 1.5rem;
  backdrop-filter: blur(4px);
  border-radius: 16px;
}
.hero-title h1{
  margin: 0 0 .35rem;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 800;
}
.hero-title p{
  margin: 0;
  font-weight: 600;
  opacity: .9;
}

/* Give the section below a little breathing room after the hero */
.content-box{ margin-top: 2rem; }
/* Home: full-screen fixed hero image */
.hero-center{
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  /* Image first; gradient fallback if no image set */
  background: var(--home, linear-gradient(135deg,#a8edea,#fbc2eb)) center / cover fixed no-repeat;
}
/* Center About card nicely & keep it from feeling like an essay */
.page-light{
  min-height: 100vh;
  background: linear-gradient(135deg,#a8edea,#fbc2eb);
  display: flex;
  flex-direction: column;
}
.topnav{
  display:flex; justify-content:center; gap:1rem; padding:1rem 1.25rem;
  position: sticky; top: 0; backdrop-filter: saturate(120%) blur(6px);
}
.topnav a{ text-decoration:none; color:#334155; font-weight:700; padding:.45rem .7rem; border-radius:10px; }
.topnav a.active{ background:#ffffffaa; }

/* The “essay” becomes a neat, centered card with internal scroll if needed */
.content-box{
  background:#fff; padding:2rem; border-radius:18px;
  width:min(92vw, 820px);
  max-height: min(70vh, 680px);   /* keeps it compact on desktop */
  overflow:auto;                   /* scroll INSIDE the card when long */
  margin: 2rem auto 3rem; box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* Typewriter look */
.typewriter-wrap .typing,
.typewriter-wrap .tw { white-space: pre-wrap; }
.typewriter-wrap h1{ margin-top:0; font-weight:800; }
.typewriter-wrap .caret{
  display:inline-block; width:2px; height:1em; vertical-align:-.2em;
  background:#334155; margin-left:2px; animation: blink .85s steps(2,end) infinite;
}
@keyframes blink { 0%,100%{opacity:0} 50%{opacity:1} }
/* Center the <dialog> perfectly on all screens */
.result-dialog{
  position: fixed;        /* overrides UA positioning */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;              /* remove default margins */
  max-width: 700px;
  width: min(92vw, 700px);
  background:#fff;
  border: 0;
  border-radius: 16px;
  padding: 0;
}
.result-dialog::backdrop{
  background: rgba(0,0,0,.45);
}