/* ===== themes ===== */
:root{ /* dark (default) */
  --bg:#1C1714; --panel:#241D18; --bar:#2D241E; --border:#3A2F27;
  --text:#F5ECE0; --muted:#9C9488;
  --accent:#C77F3B; --accent2:#E8B976; --cursor:#3FD08A;
  --logo-cup:#F5ECE0; --logo-steam:#E8B976;
  --field-bg:#1C1714; --dot:rgba(245,236,224,0.04); --scanline:rgba(0,0,0,0.10);
  --bug-leg:#E8B976;
}
[data-theme="light"]{
  --bg:#F5ECE0; --panel:#FBF7EF; --bar:#EFE6D8; --border:#E2D7C5;
  --text:#2A2017; --muted:#8A7E6E;
  --accent:#B5732E; --accent2:#9A6326; --cursor:#157A47;
  --logo-cup:#2A2017; --logo-steam:#B5732E;
  --field-bg:#FFFFFF; --dot:rgba(40,30,20,0.05); --scanline:rgba(0,0,0,0.04);
  --bug-leg:#CF9243;
}
[data-theme="matcha"]{
  --bg:#E7ECDB; --panel:#EEF2E4; --bar:#DDE5CB; --border:#C9D5B3;
  --text:#2E3A2A; --muted:#6F7B61;
  --accent:#BC6B3C; --accent2:#6E8C57; --cursor:#4F7042;
  --logo-cup:#3D5235; --logo-steam:#BC6B3C;
  --field-bg:#F3F6EC; --dot:rgba(46,58,42,0.05); --scanline:rgba(0,0,0,0.04);
  --bug-leg:#D98C54;
}

:root{
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--bg);
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--text);
  font-family:var(--mono);
  line-height:1.7;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  transition:background-color .25s ease, color .25s ease;
}
.window{
  position:relative;
  width:100%;
  max-width:640px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  transition:max-width .4s ease, transform .12s ease, background-color .25s ease, border-color .25s ease;
}
.window.maximized{max-width:880px;}
.window.shake{animation:shake .4s ease;}
.stage{position:relative;display:inline-block;}
.stage > .window{z-index:1;}
.bug{position:absolute;left:50%;top:36px;width:72px;height:auto;transform:translateX(-50%) translateY(-8px);z-index:0;opacity:0;pointer-events:none;transition:opacity .3s ease, transform .35s ease;}
.stage.peek .bug{opacity:1;transform:translateX(-50%) translateY(0);animation:bugwiggle 1.7s ease-in-out infinite .35s;}
.bug-fill{fill:var(--accent);}
.bug-leg{stroke:var(--bug-leg);stroke-width:3;stroke-linecap:round;fill:none;}
.bug-tip{fill:var(--bug-leg);}
.bug-seam{stroke:rgba(0,0,0,0.45);stroke-width:3;stroke-linecap:round;}
.window::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:12px;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, var(--scanline) 3px);
}
.bar{
  background:var(--bar);
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  transition:background-color .25s ease, border-color .25s ease;
}
.dot{
  width:12px;height:12px;border-radius:50%;
  border:0;padding:0;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:transform .12s ease, filter .12s ease;
}
.dot:hover{transform:scale(1.25);filter:brightness(1.15);}
.dot:active{transform:scale(0.9);}
.bar .title{margin-left:8px;color:var(--muted);font-size:13px;}
.body{
  padding:28px clamp(20px,5vw,40px) 34px;
  max-height:1600px;
  transition:max-height .4s ease, padding .4s ease;
}
.body.collapsed{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;}
.logo{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.logo svg{flex:none;}
.logo .steam{stroke:var(--logo-steam);transform-box:fill-box;transform-origin:center;animation:steam 3.2s ease-in-out infinite;}
.logo .cup{fill:var(--logo-cup);}
.logo .handle{stroke:var(--logo-cup);fill:none;}
.wordmark{font-size:clamp(26px,7vw,36px);font-weight:500;letter-spacing:-.5px;color:var(--text);}
.wordmark .accent{color:var(--accent);}
.cursor{color:var(--cursor);}
.prompt{color:var(--accent);}
.comment{color:var(--muted);}
.cmd{color:var(--text);min-height:1.7em;}
.line{font-size:clamp(14px,3.6vw,16px);margin:6px 0;}
.out::before{content:"> ";color:var(--accent);}
.status{margin:22px 0 26px;font-size:clamp(14px,3.6vw,16px);}
.status .live{color:var(--cursor);}
form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px;}
.field{flex:1 1 220px;display:flex;align-items:center;gap:8px;background:var(--field-bg);border:1px solid var(--border);border-radius:8px;padding:0 12px;transition:background-color .25s ease, border-color .25s ease;}
.field span{color:var(--accent);font-size:15px;}
input[type=email]{
  flex:1;background:transparent;border:0;color:var(--text);
  font-family:var(--mono);font-size:15px;padding:12px 0;outline:none;
}
input::placeholder{color:var(--muted);}
button[type=submit]{
  background:var(--accent);color:var(--bg);border:0;border-radius:8px;
  font-family:var(--mono);font-size:15px;font-weight:500;
  padding:12px 18px;cursor:pointer;transition:filter .15s, background-color .25s ease, color .25s ease;
}
button[type=submit]:hover{filter:brightness(1.08);}
:focus-visible{outline:2px solid var(--cursor);outline-offset:2px;}
.reply{min-height:24px;margin-top:6px;font-size:14px;color:var(--cursor);white-space:pre-wrap;}
.links{margin-top:24px;font-size:15px;}
.links a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--border);}
.links a:hover{filter:brightness(1.1);}
.themes{margin-top:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
.themes .prompt{font-size:13px;}
.theme-btn{
  font-family:var(--mono);font-size:13px;color:var(--muted);
  background:transparent;border:1px solid var(--border);border-radius:6px;
  padding:4px 9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:color .15s, border-color .15s;
}
.theme-btn:hover{color:var(--text);border-color:var(--accent);}
.theme-btn[aria-pressed="true"]{color:var(--text);border-color:var(--accent);}
.theme-btn .sw{width:11px;height:11px;border-radius:50%;border:1px solid var(--border);display:inline-block;}
footer{margin-top:24px;color:var(--muted);font-size:13px;}
.blink{animation:blink 1.1s steps(1) infinite;}

@keyframes blink{50%{opacity:0;}}
@keyframes steam{0%,100%{transform:translateY(0);opacity:.5;}50%{transform:translateY(-2px);opacity:1;}}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
@keyframes bugwiggle{0%,100%{transform:translateX(-50%) rotate(0);}25%{transform:translateX(-50%) rotate(-4deg);}75%{transform:translateX(-50%) rotate(4deg);}}

@media (prefers-reduced-motion: reduce){
  .blink,.logo .steam,.window.shake,.stage.peek .bug{animation:none;}
  .window,.body{transition:none;}
}