:root{
  --ink: #0f172a;
  --bg: #f7f4ee;
  --teal: #3f5860;
  --yellow: #f5c84c;
  --yellow-2: #f2b93a;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --shadow: 0 18px 48px rgba(15, 23, 42, .14);
  --shadow2: 0 10px 24px rgba(15, 23, 42, .10);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  background: radial-gradient(1200px 800px at 50% -10%, #ffffff 10%, var(--bg) 60%);
  color: var(--ink);
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
  font-size: 12px;
}
.mono{ font-family: var(--mono); }

.topbar{
  height: 64px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 18px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ font-size:20px; }
.brand-name{ font-weight:900; letter-spacing:.2px; }

.stage{
  width: min(920px, 92vw);
  margin: 10px auto 60px;
}
.stage-full{
  min-height: calc(100vh - 64px - 16px);
  display:flex;
  flex-direction: column;
}

.hero{
  background: var(--teal);
  border-radius: 28px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  position: relative;
}
.hero-full{
  flex: 1;
  display:flex;
  flex-direction: column;
}
.hero-inner{
  padding: 14px 18px 16px;
  flex: 1;
  display:flex;
  flex-direction: column;
}

.hero-sid{
  position:absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
}
.hero-sid .badge{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}

/* two-column row */
.hero-row{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  align-items: center;
}
.hero-left{ display:flex; justify-content:center; }
.mascot-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.mascot{
  width: 300px;
  max-width: 86vw;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.18));
  transform-origin: 50% 80%;
}
.hero-caption{
  color: rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 700;
}

/* ======= Cloud speech bubble (one sentence only) ======= */
.hero-right{ display:flex; justify-content:center; align-items:center; }

/* 容器固定高度：一句一句显示 */
.mascot-bubble{
  width: min(440px, 46vw);
  height: 150px;                 /* ✅固定高度 */
  padding: 12px 14px 14px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  position: relative;

  /* 云朵主体 */
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
  border-radius: 28px;
}
.mascot-bubble[data-show="true"]{ opacity:1; transform: translateY(0); }

/* 云朵凸起（顶部几朵） */
.mascot-bubble::before{
  content:"";
  position:absolute;
  left: 28px;
  top: -14px;
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.10);
  border-right: none;
  border-bottom: none;
  border-radius: 50%;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}
.mascot-bubble::after{
  content:"";
  position:absolute;
  left: 70px;
  top: -22px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.10);
  border-right: none;
  border-bottom: none;
  border-radius: 50%;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

/* “说话尾巴”小泡泡 */
.mascot-bubble .cloud-tail{
  position:absolute;
  left: -14px;
  bottom: 28px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.mascot-bubble .cloud-tail2{
  position:absolute;
  left: -28px;
  bottom: 16px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.mb-title{
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.55);
  margin-bottom: 8px;
}
.mb-text{
  font-size: 15px;
  line-height: 1.4;
  color: #0b1220;

  /* ✅一句一句：固定区域，超出截断 */
  height: 92px;
  overflow: hidden;

  display: -webkit-box;
  -webkit-line-clamp: 4;       /* 大约 1~2 句，最多 4 行 */
  -webkit-box-orient: vertical;

  white-space: pre-wrap;
  word-break: break-word;
}

/* 打字光标（说话效果） */
.mb-text.typing::after{
  content:"";
  display:inline-block;
  width: 8px;
  height: 16px;
  margin-left: 4px;
  background: rgba(15,23,42,.55);
  border-radius: 2px;
  transform: translateY(2px);
  animation: caret 1s steps(1,end) infinite;
}
@keyframes caret{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:0; }
}

/* ===== Rooftop guide cat MVP panel ===== */
.cat-panel{
  width: min(760px, 100%);
  margin: 0 auto 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.94);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.cat-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cat-kicker{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  font-weight: 800;
}
.cat-panel h2{
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}
.cat-ghost,
.cat-secondary,
.cat-primary{
  border: 0;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.cat-ghost:hover,
.cat-secondary:hover,
.cat-primary:hover{ transform: translateY(-1px); }
.cat-ghost{
  padding: 8px 10px;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.cat-selected{
  display:grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items:center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(15,23,42,.18);
  border: 1px solid rgba(255,255,255,.12);
  margin-bottom: 12px;
}
.cat-avatar{
  width: 54px;
  height: 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 16px;
  background: #f5c84c;
  color: #17212b;
  font-size: 22px;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.cat-selected[data-has-cat="true"] .cat-avatar{
  background: #ffffff;
}
.cat-name{
  font-size: 16px;
  font-weight: 950;
  line-height: 1.2;
}
.cat-desc{
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,.74);
}
.cat-quiz{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.cat-question{
  min-width: 0;
  margin: 0;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.cat-question legend{
  padding: 0 4px;
  font-size: 12px;
  font-weight: 900;
}
.cat-options{
  display:grid;
  gap: 6px;
  margin-top: 6px;
}
.cat-option{
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.90);
  font-size: 12px;
  line-height: 1.25;
  text-align:left;
  cursor:pointer;
  padding: 7px 8px;
}
.cat-option span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 7px;
  background: rgba(255,255,255,.14);
  font-weight: 950;
}
.cat-option.is-selected{
  background: rgba(245,200,76,.94);
  border-color: rgba(245,200,76,1);
  color: #17212b;
}
.cat-option.is-selected span{
  background: rgba(15,23,42,.12);
}
.cat-actions,
.cat-rooftop-row{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.cat-name-edit{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
}
.cat-name-edit span{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  color: rgba(255,255,255,.76);
}
.cat-name-edit input{
  min-width: 0;
  width: 100%;
  height: 30px;
  border: 0;
  border-radius: 9px;
  padding: 0 9px;
  background: rgba(255,255,255,.92);
  color: #17212b;
  font-weight: 900;
  outline: none;
}
.cat-name-edit input:focus{
  box-shadow: 0 0 0 3px rgba(245,200,76,.34);
}
.cat-primary{
  padding: 10px 12px;
  background: #f5c84c;
  color: #17212b;
}
.cat-secondary{
  padding: 10px 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
}
.cat-lines{
  display:grid;
  gap: 7px;
  margin-top: 10px;
}
.cat-line{
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,.88);
}
.bowl-effect{
  position: relative;
  height: 42px;
  margin-top: 10px;
  border-radius: 14px;
  background: rgba(15,23,42,.14);
  overflow: hidden;
}
.bowl-effect span{
  position:absolute;
  top: -14px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5c84c;
  opacity: 0;
}
.bowl-effect span:nth-child(1){ left: 18%; }
.bowl-effect span:nth-child(2){ left: 34%; background:#fff1a8; }
.bowl-effect span:nth-child(3){ left: 50%; }
.bowl-effect span:nth-child(4){ left: 66%; background:#fff1a8; }
.bowl-effect span:nth-child(5){ left: 82%; }
.bowl-effect.is-playing span{
  animation: kibbleDrop .9s ease forwards;
}
.bowl-effect.is-playing span:nth-child(2){ animation-delay: .08s; }
.bowl-effect.is-playing span:nth-child(3){ animation-delay: .16s; }
.bowl-effect.is-playing span:nth-child(4){ animation-delay: .24s; }
.bowl-effect.is-playing span:nth-child(5){ animation-delay: .32s; }
@keyframes kibbleDrop{
  0%{ transform: translateY(0) scale(.8); opacity: 0; }
  20%{ opacity: 1; }
  100%{ transform: translateY(44px) scale(1); opacity: .95; }
}
.rooftop-reward{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.reward-card{
  padding: 10px;
  border-radius: 12px;
  background: rgba(245,200,76,.16);
  border: 1px solid rgba(245,200,76,.28);
}
.reward-title{
  color: #fff5ba;
  font-size: 13px;
  font-weight: 950;
}
.reward-text{
  margin-top: 4px;
  color: rgba(255,255,255,.84);
  font-size: 12px;
  line-height: 1.45;
}
.reward-card .collect-fragment-btn,
.gacha-result .collect-fragment-btn{
  margin-top: 8px;
}
.story-panel{
  margin-top: 10px;
  padding: 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.18);
}
.story-panel[data-unlocked="true"]{
  border-color: rgba(245,200,76,.42);
  background: rgba(245,200,76,.13);
}
.story-title{
  color: #fff5ba;
  font-size: 14px;
  font-weight: 950;
}
.story-progress{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  font-weight: 850;
}
.story-text{
  margin-top: 7px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.45;
}
.rooftop-machines{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.roof-machine-link{
  display:grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items:center;
  min-height: 96px;
  padding: 12px;
  border-radius: 16px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.roof-machine-link:hover{
  transform: translateY(-3px) scale(1.025);
  border-color: rgba(245,200,76,.48);
  background: rgba(245,200,76,.13);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}
.roof-machine-link strong{
  display:block;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0;
}
.roof-machine-link em{
  display:block;
  grid-column: 2;
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.35;
  font-style: normal;
}
.machine-icon{
  grid-row: 1 / span 2;
  width: 64px;
  height: 78px;
  position: relative;
  border-radius: 30px 30px 14px 14px;
  background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.22);
}
.machine-icon::after{
  content:"";
  position:absolute;
  left: 13px;
  right: 13px;
  bottom: -8px;
  height: 18px;
  border-radius: 0 0 12px 12px;
  background: #f5c84c;
}
.machine-icon span{
  position:absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f5c84c;
}
.machine-icon span:nth-child(1){ left: 13px; top: 20px; }
.machine-icon span:nth-child(2){ left: 35px; top: 16px; background:#ff8db7; }
.machine-icon span:nth-child(3){ left: 26px; top: 42px; background:#80d7ff; }
.claw-icon{
  border-radius: 12px;
}
.claw-icon::before{
  content:"";
  position:absolute;
  left: 29px;
  top: 10px;
  width: 6px;
  height: 34px;
  background: rgba(255,255,255,.64);
}
.claw-icon span{
  top: auto;
  bottom: 14px;
}
.claw-icon span:nth-child(1){ left: 12px; background:#fff1a8; }
.claw-icon span:nth-child(2){ left: 28px; background:#b8f29a; }
.claw-icon span:nth-child(3){ left: 44px; background:#ff8db7; }
.gacha-panel{
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.gacha-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.gacha-head h3{
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
}
.gacha-machine{
  width: 126px;
  margin: 12px auto 4px;
  text-align:center;
  transform-origin: 50% 80%;
}
.gacha-machine.is-drawing{
  animation: gachaShake .58s ease;
}
@keyframes gachaShake{
  0%,100%{ transform: rotate(0); }
  20%{ transform: rotate(-5deg); }
  40%{ transform: rotate(5deg); }
  60%{ transform: rotate(-4deg); }
  80%{ transform: rotate(4deg); }
}
.gacha-dome{
  position: relative;
  height: 82px;
  border-radius: 62px 62px 24px 24px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  overflow:hidden;
}
.gacha-dome span{
  position:absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f5c84c;
}
.gacha-dome span:nth-child(1){ left: 18px; top: 18px; }
.gacha-dome span:nth-child(2){ left: 52px; top: 12px; background:#ff8db7; }
.gacha-dome span:nth-child(3){ left: 82px; top: 28px; background:#80d7ff; }
.gacha-dome span:nth-child(4){ left: 34px; top: 48px; background:#b8f29a; }
.gacha-dome span:nth-child(5){ left: 66px; top: 48px; background:#fff1a8; }
.gacha-base{
  width: 94px;
  margin: -4px auto 0;
  padding: 8px 0;
  border-radius: 0 0 16px 16px;
  background: #f5c84c;
  color: #17212b;
  font-size: 12px;
  font-weight: 950;
}
.gacha-participant{
  min-width: 180px;
  flex: 1 1 180px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  padding: 0 11px;
  background: rgba(255,255,255,.92);
  color: #17212b;
  font-weight: 850;
  outline: none;
}
.gacha-result{
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15,23,42,.16);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.45;
}
.gacha-result-title{
  color: #fff5ba;
  font-weight: 950;
  margin-bottom: 4px;
}
.gacha-meta{
  margin-top: 5px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

/* action slot grows to fill remaining height */
.action-slot{ margin-top: 10px; }
.action-slot-grow{
  flex: 1;
  display:flex;
  flex-direction: column;
  min-height: 0;
}

.cta{
  width:100%;
  border:none;
  border-radius: 999px;
  padding: 16px 18px;
  font-weight: 900;
  letter-spacing: .4px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  color: #111827;
  box-shadow: 0 14px 26px rgba(245, 200, 76, .28);
  cursor:pointer;
}
.cta:active{ transform: translateY(1px) scale(.99); }

/* chatbox */
.chatbox{
  display:none;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  overflow:hidden;
}
.chatbox[data-open="true"]{ display:flex; flex-direction: column; }
.chatbox-grow{ flex: 1; min-height: 0; }

.chatbox-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  background: rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.chatbox-title{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}
.chatbox-actions{ display:flex; gap:10px; }

.ghost{
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 8px 12px;
  cursor:pointer;
  font-weight: 800;
  color: rgba(255,255,255,.92);
}

.chat-scroll{
  padding: 12px;
  overflow:auto;
}
.chat-scroll-grow{ flex: 1; min-height: 0; }

.bubble{
  max-width: 78%;
  border-radius: 16px;
  padding: 10px 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 20px rgba(15,23,42,.08);
  font-size: 13px;
}
.msg{ display:flex; margin: 10px 0; }
.msg.user{ justify-content:flex-end; }
.msg.assistant{ justify-content:flex-start; }
.msg.user .bubble{
  background: #0b1220;
  color: #f8fafc;
  border-color: rgba(255,255,255,.10);
}
.msg.assistant .bubble{
  background: rgba(255,255,255,.92);
  color: #0b1220;
}
.bubble-meta{
  margin-top: 8px;
  display:flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: rgba(15,23,42,.55);
}
.msg.user .bubble-meta{ color: rgba(248,250,252,.70); }

/* progress card */
.progress-card{
  width: min(320px, 78%);
  border-radius: 16px;
  padding: 12px 12px;
  background: rgba(15,23,42,.80);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.20);
}
.progress-title{ font-weight: 900; margin-bottom: 8px; }
.progress-steps{ margin:0; padding-left: 18px; line-height: 1.6; font-size: 12px; opacity: .95; }
.progress-meta{ margin-top: 10px; font-size: 11px; opacity: .8; display:flex; justify-content: space-between; }

.composer{
  padding: 12px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.06);
}
.composer-sticky{ position: sticky; bottom: 0; }
#composer-input{
  width:100%;
  resize:none;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.18);
  outline:none;
  font-size: 14px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}
#composer-input::placeholder{ color: rgba(255,255,255,.65); }

.composer-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.status{
  font-size: 12px;
  color: rgba(255,255,255,.72);
  min-height: 16px;
}
.send{
  border:none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  cursor:pointer;
  letter-spacing: .3px;
}
.send-yellow{
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  color: #111827;
  box-shadow: 0 14px 26px rgba(245, 200, 76, .22);
}
.send:active{ transform: translateY(1px) scale(.99); }

/* dev zone (unchanged) */
.dev-zone{ margin-top: 16px; }
.dev-details{
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.dev-details summary{
  list-style:none;
  cursor:pointer;
  padding: 12px 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-weight: 900;
}
.dev-details summary::-webkit-details-marker{ display:none; }
.dev-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 12px;
}
.card-mini{
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px;
}
.mini-title{
  font-weight: 900;
  font-size: 12px;
  color: rgba(15,23,42,.72);
  margin-bottom: 6px;
}
.card-mini pre{
  margin:0;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(15,23,42,.78);
  white-space: pre-wrap;
}
.stack{ padding: 0 14px 14px; }
.stack pre{
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.08);
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(15,23,42,.84);
  white-space: pre-wrap;
  overflow:auto;
}
.row{ display:flex; align-items:center; gap:10px; margin-top: 10px; flex-wrap: wrap; }
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
  font-size: 12px;
  font-weight: 900;
}
.hint{ font-size: 12px; color: rgba(15,23,42,.55); }

/* mascot animations (keep) */
.m-shadow{ fill: rgba(0,0,0,.18); }
.m-brain{ fill: #ff87b2; stroke: rgba(20,20,20,.08); stroke-width: 2; }
.m-squiggle{ fill:none; stroke: rgba(20,20,20,.18); stroke-width: 3; stroke-linecap: round; opacity: .75; }
.m-glass-ring{ fill: rgba(255,255,255,.14); stroke: rgba(10,10,10,.30); stroke-width: 4; }
.m-glass-bridge{ fill: rgba(10,10,10,.30); }
.m-glass-arm{ fill:none; stroke: rgba(10,10,10,.26); stroke-width: 4; stroke-linecap: round; }
.m-eye-white{ fill: #fff; }
.m-eye-iris{ fill: #1f2937; }
.m-eye-shine{ fill: rgba(255,255,255,.9); transform: translate(3px,-3px); }
.m-eyelid{ fill: rgba(255,255,255,1); transform-origin: 50% 50%; transform: scaleY(0); }
.m-mouth-shape{ fill: rgba(10,10,10,.35); }
.m-arm{ fill:none; stroke: rgba(255,135,178,.92); stroke-width: 12; stroke-linecap: round; }
.m-pencil-body{ fill: #1f2937; }
.m-pencil-eraser{ fill: #fda4af; }
.m-pencil-tip{ fill: #fbbf24; }
.m-pencil-lead{ fill: #0f172a; }
.m-book-cover{ fill: #f8fafc; stroke: rgba(15,23,42,.16); stroke-width: 2; }
.m-book-spine{ stroke: rgba(15,23,42,.16); stroke-width: 2; }
.m-book-line{ stroke: rgba(15,23,42,.18); stroke-width: 2; stroke-linecap: round; opacity: .6; }
.m-leg{ fill:none; stroke: rgba(255,135,178,.92); stroke-width: 12; stroke-linecap: round; }
.m-think-dots{ opacity: 0; }
.m-think-dots circle{ fill: rgba(255,255,255,.88); }

.mascot[data-state="idle"] .m-body{ animation: bob 2.8s ease-in-out infinite; }
.mascot[data-state="idle"] .m-brain{ animation: breathe 2.8s ease-in-out infinite; }
.mascot[data-state="idle"] .m-eyelid{ animation: blink 5.2s infinite; }
.mascot[data-state="thinking"] .m-body{ animation: bob 1.8s ease-in-out infinite; }
.mascot[data-state="thinking"] .m-think-dots{ opacity: 1; animation: dots 1.1s ease-in-out infinite; }
.mascot[data-state="thinking"] .m-eyelid{ animation: blink 3.8s infinite; }
.mascot[data-state="speaking"] .m-body{ animation: bob 1.4s ease-in-out infinite; }
.mascot[data-state="speaking"] .m-mouth{ transform-origin: 50% 50%; animation: talk .18s ease-in-out infinite alternate; }
.mascot[data-state="speaking"] .m-eyelid{ animation: blink 4.6s infinite; }

@keyframes bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@keyframes breathe{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.04); } }
@keyframes blink{ 0%,92%,100%{ transform: scaleY(0); } 94%,96%{ transform: scaleY(1); } }
@keyframes dots{ 0%{ transform: translateY(0); opacity:.6; } 50%{ transform: translateY(-2px); opacity:1; } 100%{ transform: translateY(0); opacity:.6; } }
@keyframes talk{ from{ transform: translateY(0) scaleY(0.85); } to{ transform: translateY(1px) scaleY(1.15); } }

@media (max-width: 860px){
  .hero-row{ grid-template-columns: 1fr; }
  .mascot-bubble{
    width: 100%;
    height: 140px;
  }
}