@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --bg:#1E1B4B;
  --bg-2:#312E81;
  --card:#fff;
  --ink:#18181B;
  --muted:#5B6170;
  --line:#D7D8E0;
  --yellow:#FACC15;
  --pink:#F43F5E;
  --cyan:#06B6D4;
  --mint:#10B981;
  --violet:#8B5CF6;
  --shadow-pink:8px 8px 0 #F43F5E;
  --shadow-cyan:8px 8px 0 #06B6D4;
  --shadow-yellow:8px 8px 0 #FACC15;
  --radius:22px;
  --radius-sm:16px;
  --max:1300px;
  --gap:1rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:600 16px/1.45 'Nunito',system-ui,sans-serif;
  color:#fff;
  background:
    radial-gradient(circle at top left,rgba(244,63,94,.22),transparent 28%),
    radial-gradient(circle at top right,rgba(6,182,212,.18),transparent 28%),
    linear-gradient(180deg,var(--bg),#120F35);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.site-header,
.site-main,
.site-footer{
  width:min(calc(100% - 2rem),var(--max));
  margin-inline:auto;
}

.site-header{padding:1.25rem 0 .5rem}
.site-main{padding:1rem 0 4rem}
.site-footer{padding:0 0 2.5rem;color:rgba(255,255,255,.72)}

.topbar{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
}
.brand-badge{
  width:3rem;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:#111;
  border:3px solid #111;
  border-radius:18px;
  box-shadow:4px 4px 0 #111;
  font-size:1.4rem;
}
.brand-title,
.hero-title,
.section-title,
.card-title,
.story-title,
.reveal-title{
  font-family:'Fredoka',system-ui,sans-serif;
  letter-spacing:.02em;
  line-height:1.05;
}
.brand-title{font-size:1.25rem}
.brand-sub{display:block;font-size:.86rem;color:rgba(255,255,255,.75);font-weight:700}

.nav{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.nav a{
  padding:.8rem 1rem;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.16);
  border-radius:999px;
  font-weight:800;
}
.nav a:hover,
.nav a[aria-current="page"]{
  background:#fff;
  color:#111;
}

.hero{
  margin-top:1rem;
  padding:1.4rem;
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  border:4px solid #111;
  border-radius:28px;
  box-shadow:var(--shadow-yellow);
  color:#111;
}
.hero-title{font-size:clamp(2rem,5vw,4rem);margin:0 0 .5rem}
.hero-text{max-width:60ch;margin:0;font-size:1.05rem;font-weight:800}
.hero-pills{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem .9rem;
  border:3px solid #111;
  border-radius:999px;
  background:#fff;
  font-size:.92rem;
  font-weight:900;
}
.pill-yellow{background:var(--yellow)}
.pill-pink{background:var(--pink);color:#fff}
.pill-cyan{background:var(--cyan)}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:1rem;
  flex-wrap:wrap;
  margin:2rem 0 1rem;
}
.section-title{
  margin:0;
  font-size:clamp(1.6rem,3vw,2.4rem);
}
.section-copy{margin:0;color:rgba(255,255,255,.8);font-weight:700}

.grid{
  display:grid;
  gap:1rem;
}
.book-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.story-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.prompt-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card,
.story-card,
.panel,
.reveal-card{
  background:var(--card);
  color:var(--ink);
  border:4px solid #111;
  border-radius:var(--radius);
  padding:1.1rem;
}
.card{
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-pink);
}
.book-grid .card-title{
  margin-top:0;
  font-size:1.8rem;
}
.book-grid .card-top{
  min-height:2.2rem;
}
.story-card{box-shadow:var(--shadow-cyan)}
.panel,.reveal-card{box-shadow:var(--shadow-yellow)}

.card-top,
.story-meta,
.meta-row{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  align-items:center;
}
.stat-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.42rem .72rem;
  border:2px solid #111;
  border-radius:999px;
  font-size:.82rem;
  font-weight:900;
  background:#F4F4F5;
}
.stat-pink{background:#FFE1E8}
.stat-cyan{background:#DDFBFF}
.stat-yellow{background:#FFF3BF}

.card-title,
.story-title{
  margin:.75rem 0 .35rem;
  font-size:1.5rem;
}
.card-copy,
.story-copy,
.muted{
  margin:0;
  color:var(--muted);
}
.card-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:1rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:54px;
  padding:.9rem 1.1rem;
  border:3px solid #111;
  border-radius:16px;
  font-weight:900;
  text-align:center;
  transition:transform .12s ease;
}
.btn:hover{transform:translate(-2px,-2px)}
.btn-primary{background:var(--yellow);color:#111;box-shadow:4px 4px 0 #111}
.btn-secondary{background:var(--cyan);color:#111;box-shadow:4px 4px 0 #111}
.btn-accent{background:var(--pink);color:#fff;box-shadow:4px 4px 0 #111}
.btn-ghost{background:#fff;color:#111;box-shadow:4px 4px 0 #111}
.btn-block{width:100%}
.btn.active{outline:4px solid var(--mint);outline-offset:2px}

.stack{display:grid;gap:1rem}
.book-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.95fr);
  gap:1rem;
  align-items:start;
}
.sidebar{display:grid;gap:1rem}

.panel-title{
  margin:0 0 .35rem;
  font-family:'Fredoka',system-ui,sans-serif;
  font-size:1.6rem;
  color:#111;
}
.panel-copy{margin:0;color:var(--muted)}
.length-chooser{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem;
  margin-top:1rem;
}
.length-btn{
  min-height:84px;
  font-size:1.1rem;
}
.length-btn small{
  display:block;
  font-size:.82rem;
  opacity:.8;
}

.builder{
  margin-top:1rem;
  display:grid;
  gap:1rem;
}
.builder[hidden],
.reveal-wrap[hidden],
.empty-state[hidden]{
  display:none !important;
}

.prompt{
  display:grid;
  gap:.45rem;
  min-width:0;
}
.prompt label{
  font-size:1rem;
  font-weight:900;
  color:#111;
}
.prompt-input{
  width:100%;
  min-height:72px;
  padding:1rem 1rem;
  border:3px solid #111;
  border-radius:18px;
  background:#fff;
  font-size:1.1rem;
  font-weight:800;
}
.prompt-input::placeholder{color:#8A8FA0}

.reveal-card{
  margin-top:1rem;
  background:#fff;
}
.reveal-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:start;
  flex-wrap:wrap;
}
.reveal-title{
  margin:0;
  font-size:2rem;
}
.reveal-byline{
  margin:.3rem 0 0;
  color:var(--muted);
  font-weight:800;
}
.reveal-story{
  margin:1rem 0 0;
  font-size:clamp(1.2rem,2vw,1.5rem);
  line-height:1.65;
}
.fill{
  display:inline-block;
  padding:.05em .35em;
  margin:0 .08em;
  border-radius:.45em;
  font-weight:900;
  color:#111;
  background:var(--yellow);
}
.fill:nth-of-type(3n+2){background:var(--cyan)}
.fill:nth-of-type(3n+3){background:#86EFAC}
.kicker{
  color:var(--mint);
  font-weight:1000;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.recent-list{
  display:grid;
  gap:1rem;
}
.recent-item{
  padding:1rem;
  background:#fff;
  color:#111;
  border:4px solid #111;
  border-radius:20px;
  box-shadow:var(--shadow-cyan);
}
.recent-item h3{
  margin:0 0 .35rem;
  font-family:'Fredoka',system-ui,sans-serif;
  font-size:1.2rem;
}
.recent-item p{margin:.4rem 0 0;color:var(--muted)}
.recent-item .fill{font-size:1.03em}

.empty-state{
  padding:1.1rem;
  border:3px dashed #111;
  border-radius:18px;
  background:#F9FAFB;
  color:var(--muted);
  font-weight:800;
}

.note{
  padding:.95rem 1rem;
  background:#EEFDF7;
  color:#065F46;
  border:3px solid #111;
  border-radius:18px;
  font-weight:900;
}

.archive-section{margin-top:2rem}
.archive-section > .panel{margin-top:1rem}

@media (max-width:900px){
  .book-layout{grid-template-columns:1fr}
}
@media (max-width:700px){
  .length-chooser{grid-template-columns:1fr}
  .site-header,.site-main,.site-footer{width:min(calc(100% - 1rem),var(--max))}
  .hero{padding:1.1rem}
  .card,.story-card,.panel,.reveal-card,.recent-item{padding:1rem}
}
@media (min-width:1100px){
  .prompt-input{min-height:82px;font-size:1.18rem}
  .btn{min-height:60px;font-size:1.02rem}
  .length-btn{min-height:92px;font-size:1.2rem}
  .reveal-story{font-size:1.6rem}
}

@media print{
  @page{margin:14mm}
  body{
    background:#fff !important;
    color:#000 !important;
  }
  .site-header,.site-footer,.nav,.hero-pills,.card-actions,.length-chooser,.builder .btn,.sidebar{
    display:none !important;
  }
  .hero,.card,.story-card,.panel,.reveal-card,.recent-item{
    background:#fff !important;
    color:#000 !important;
    border:2px solid #000 !important;
    box-shadow:none !important;
  }
  .fill{
    background:none !important;
    color:#000 !important;
    border-bottom:1px solid #000;
    padding:0;
  }
  a{text-decoration:none;color:#000 !important}
}