:root{
  --blue:#1b6fc2; --blue-d:#0f4c8a; --ink:#16324f; --muted:#5b718a;
  --panel:#f7fbff; --green:#5ad13c; --green-d:#2e8f1c; --red:#e0453a; --amber:#f2a81d;
  --display:'Fredoka','Nunito',system-ui,sans-serif; --body:'Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--body); color:var(--ink); font-size:14px; line-height:1.45;
  background:radial-gradient(circle at 20% 0%,#ffffffcc 0,transparent 40%),linear-gradient(180deg,#9fd3f7 0%,#cfeafc 45%,#e9f6ff 100%); min-height:100vh}
button{font-family:inherit}
a{color:var(--blue-d)}

.topbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 20px; margin:12px 16px 0;
  background:linear-gradient(180deg,#2a86dc,#155fae); color:#fff; border-radius:22px; box-shadow:0 4px 0 #0c437c,0 10px 24px #0c437c33}
.brand-pb{width:18px; height:34px; animation:spin 3.2s ease-in-out infinite; filter:drop-shadow(0 2px 3px #0005)}
.topbar h1{font-family:var(--display); font-weight:700; font-size:24px; margin:0; line-height:1.1}
.topbar p{margin:0 0 0 auto; font-size:14px; opacity:.92; font-weight:700}

.card{background:var(--panel); border-radius:16px; box-shadow:0 3px 0 #a9c8e6,0 8px 22px #1b6fc21f; border:2px solid #fff}
.card h2{font-family:var(--display); font-weight:600; font-size:16px; margin:0 0 8px}
.desc{font-size:13px; color:var(--muted); margin:8px 0 0; min-height:2.9em}

.top{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; padding:14px 16px 0}
.ceo-card{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:flex-end; padding:12px 18px 10px;
  background:linear-gradient(180deg,#f7fbff 0,#f7fbff 72%,#cfe9b9 72%,#b6dc98 100%)}
.ceo-fig{width:120px; flex:none; text-align:center}
.ceo-fig svg{width:120px; height:auto; display:block}
.nameplate{font-family:var(--display); font-weight:600; font-size:13px; background:var(--blue); color:#fff; border-radius:999px; padding:2px 10px; display:inline-block; margin-top:-6px; position:relative}
.pb-float{animation:bob 2.4s ease-in-out infinite}
.pb{--p1:#8ee66b; --p2:#5ad13c; --p3:#3fb027; --p4:#2e8f1c}
.pb .f1{fill:var(--p1)} .pb .f2{fill:var(--p2)} .pb .f3{fill:var(--p3)} .pb .f4{fill:var(--p4)}
.pb polygon{transition:fill .5s}
[data-mood="angry"] .pb{--p1:#ff9b8f; --p2:#f0594b; --p3:#d63a2e; --p4:#a8261c}
[data-mood="meh"] .pb{--p1:#ffe48a; --p2:#f6c933; --p3:#e2ac16; --p4:#b78610}
[data-mood="think"] .pb{--p1:#b9e3ff; --p2:#6fbff5; --p3:#3a9ae0; --p4:#2172b5}
.mouth{display:none}
[data-mood="happy"] .m-happy,[data-mood="think"] .m-meh,[data-mood="meh"] .m-meh,[data-mood="angry"] .m-angry{display:block}
[data-mood="angry"] .brow-l{transform:rotate(12deg); transform-origin:67px 95px}
[data-mood="angry"] .brow-r{transform:rotate(-12deg); transform-origin:93px 95px}
[data-mood="angry"] .blush{fill:#ff6b5e; opacity:.7}
[data-mood="think"] .eyes{transform:translate(4px,-3px)}
.brows path,.eyes{transition:transform .3s}
.ceo-talk{flex:1; min-width:0; padding-bottom:8px}
.bubble{position:relative; background:#fff; border-radius:20px; padding:14px 18px; box-shadow:0 3px 0 #a9c8e6,0 6px 16px #0b3a6a22;
  font-family:var(--display); font-weight:500; font-size:19px; line-height:1.35; min-height:110px}
.bubble::after{content:""; position:absolute; left:-14px; bottom:26px; border:10px solid transparent; border-right:16px solid #fff; border-left:0}
.bubble p{margin:0}
.moodlet{display:inline-flex; gap:8px; align-items:center; margin-top:10px; background:#fff; border-radius:999px; padding:4px 12px 4px 6px; font-size:12.5px; box-shadow:0 2px 0 #a9c8e6}
.md-dot{width:18px; height:18px; border-radius:50%; background:var(--green)}
#mood-name{font-weight:800} #mood-why{color:var(--muted)}
[data-mood-tag="angry"] .md-dot{background:var(--red)}
[data-mood-tag="meh"] .md-dot{background:var(--amber)}
[data-mood-tag="think"] .md-dot{background:#3a9ae0}

.controls{padding:14px 16px}
.controls h2+.btns{margin-bottom:0}
.controls .desc+h2{margin-top:6px}
.btns{display:flex; flex-wrap:wrap; gap:7px}
.btns button{border:0; cursor:pointer; padding:8px 14px; border-radius:999px; font-weight:800; font-size:13.5px;
  background:linear-gradient(180deg,#2a86dc,#155fae); color:#fff; box-shadow:0 3px 0 #0c437c; transition:transform .1s}
.btns button:hover{transform:translateY(-1px)}
.btns button:active{transform:translateY(2px); box-shadow:0 1px 0 #0c437c}
.btns button.on{background:linear-gradient(180deg,#76de57,#36a722); box-shadow:0 3px 0 #1f6e12}
.btns button.stop{}

.main{display:grid; align-items:start; grid-template-columns:minmax(0,1fr) 320px; gap:14px; padding:14px 16px 0}
.board-card{padding:10px; min-width:0}
.board-scroll{overflow-x:auto; border-radius:12px}
.board{position:relative; width:100%; min-width:680px; aspect-ratio:1000/768}
#cv{position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:12px}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; padding:8px 6px 2px; font-size:13px; color:var(--muted)}
.lg-title{font-weight:800; color:var(--ink)}
.lg{display:inline-flex; align-items:center; gap:6px; font-weight:700}
.lg i{width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff9 0 18%,var(--c) 45%)}
.lg.ghost b{width:22px; height:0; border-top:3px dashed #a493d8}

.truth{padding:14px 16px}
.row{margin:14px 0 0}
.row-h{display:flex; justify-content:space-between; font-weight:800; font-size:14px}
.row-h span:last-child{font-size:12px; font-weight:800; padding:1px 8px; border-radius:999px}
.row-h .over{background:#ffe2de; color:#a8261c} .row-h .under{background:#e3f6dc; color:#1f6e12} .row-h .even{background:#e8eef5; color:var(--muted)}
.br{display:grid; grid-template-columns:86px 1fr 62px; gap:8px; align-items:center; font-size:12px; margin-top:4px; color:var(--muted); font-weight:700}
.track{height:12px; background:#e3edf7; border-radius:6px; overflow:hidden}
.fill{height:100%; border-radius:6px; transition:width .7s ease}
.br b{text-align:right; color:var(--ink); font-variant-numeric:tabular-nums}
.total{margin-top:16px; padding-top:12px; border-top:2px solid #dbe7f3; font-weight:800; font-size:14px}
.total small{display:block; font-weight:700; color:var(--muted); font-size:12px}

.method{margin:6px 6px 2px; font-size:12px; color:var(--muted)}

@keyframes spin{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media (max-width:1000px){
  .top,.main{grid-template-columns:1fr}
}
@media (max-width:560px){
  .topbar p{margin:0; width:100%}
  .ceo-fig,.ceo-fig svg{width:84px}
  .ceo-card{padding:12px}
  .bubble{font-size:16px}
  .bubble::after{display:none}
}
@media (prefers-reduced-motion:reduce){.brand-pb,.pb-float{animation:none}}

/* right panel: GA4 says / what really happened / contact */
.truth{display:flex; flex-direction:column; gap:12px}
.ga4-says{background:#14304f; color:#e7f1fb; border-radius:14px; padding:12px 14px; font-size:14px; line-height:1.45; box-shadow:inset 0 0 0 2px #24496f}
.ga4-says h2{color:#fff; display:flex; align-items:center; gap:8px; margin-bottom:6px}
.ga4-says h2 span{font-family:var(--body); font-size:11px; font-weight:800; background:#2f6aa3; border-radius:999px; padding:1px 8px; letter-spacing:.3px}
.ga4-says p{margin:0; font-weight:700}
.ga4-says b{color:#ffd66b; font-variant-numeric:tabular-nums}
.real-bubble{position:relative; background:#fff; border:3px solid #9b5cf0; border-radius:20px; padding:12px 15px 13px; box-shadow:0 3px 0 #c9b8f5; margin-bottom:6px}
.real-bubble::after{content:""; position:absolute; left:50%; bottom:-17px; margin-left:-10px; border:14px solid transparent; border-top:16px solid #9b5cf0; border-bottom:0}
.real-bubble::before{content:""; position:absolute; left:50%; bottom:-11px; margin-left:-7px; border:11px solid transparent; border-top:12px solid #fff; border-bottom:0; z-index:1}
.real-bubble h3{font-family:var(--display); font-weight:600; font-size:17px; color:#5b3fc4; margin:0 0 5px}
.real-bubble p{margin:0; font-size:14px; line-height:1.45; font-weight:600}
.real-bubble strong{color:#5b3fc4}
.bengu{display:block; text-align:center; margin-top:2px; text-decoration:none}
.bengu:hover .nameplate{text-decoration:underline}
.bengu:hover img{transform:translateY(-2px)}
.bengu img{transition:transform .2s}
.ts{margin-top:10px; min-height:0}
.bengu img{width:100%; height:auto; display:block}
.bengu .nameplate{font-size:14px; margin-top:-14px; background:#5b3fc4; color:#fff}
.contact{background:#fff; border-radius:14px; padding:12px 14px; border:2px solid #e2d8fb}
.contact h2{color:#5b3fc4; margin-bottom:8px}
.contact label{display:block; font-size:12.5px; font-weight:800; margin:8px 0 3px}
.contact input,.contact textarea{width:100%; font:inherit; font-size:14px; padding:8px 10px; border-radius:10px; border:2px solid #c9dcef; background:#f7fbff; color:var(--ink)}
.contact input:focus,.contact textarea:focus{outline:none; border-color:#9b5cf0; background:#fff}
.contact textarea{min-height:84px; resize:vertical}
.contact button{margin-top:10px; width:100%; border:0; cursor:pointer; padding:10px 14px; border-radius:999px; font-weight:800; font-size:15px; color:#fff;
  background:linear-gradient(180deg,#76de57,#36a722); box-shadow:0 3px 0 #1f6e12}
.contact button:disabled{opacity:.6; cursor:wait}
.contact .hp{position:absolute; left:-9999px}
.form-msg{margin:8px 0 0; font-size:13px; font-weight:700; min-height:1em}
.form-msg.ok{color:#1f6e12} .form-msg.err{color:#b02a1e}

.ceo-h{flex:0 0 100%; margin:0 0 2px !important}
.ceo-talk .moodlet{vertical-align:middle}
.jump{display:inline-flex; align-items:center; gap:6px; margin:10px 0 0 8px; vertical-align:middle; border:0; cursor:pointer;
  padding:6px 14px; border-radius:999px; font-weight:800; font-size:13px; color:#fff;
  background:linear-gradient(180deg,#a97cf5,#7046d6); box-shadow:0 3px 0 #4b2a9e; animation:pop .25s ease-out both}
.jump svg{width:15px; height:15px; animation:nudge 1.4s ease-in-out infinite}
.jump:hover{filter:brightness(1.08)}
.jump[hidden]{display:none}
.real-bubble.pulse{animation:pulse 1.2s ease-out 2}
@keyframes pop{from{transform:scale(.7); opacity:0}to{transform:scale(1); opacity:1}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #9b5cf099}100%{box-shadow:0 0 0 18px #9b5cf000}}
@media (prefers-reduced-motion:reduce){.jump,.jump svg,.real-bubble.pulse{animation:none}}

body{padding-bottom:24px}

/* jump button only matters when the columns stack */
@media (min-width:1001px){.jump{display:none !important}}

.pipe-tip{position:absolute; z-index:5; width:300px; max-width:calc(100% - 12px); pointer-events:none; background:#fffef6; border:2px solid #f2c230; border-radius:12px; padding:9px 11px; box-shadow:0 6px 18px rgba(20,50,80,.18); font-size:13px; line-height:1.35; color:#1f2a3c; display:flex; flex-direction:column; gap:4px}
.pipe-tip[hidden]{display:none}
.pipe-tip strong{font-family:Fredoka,sans-serif; font-weight:600; font-size:14px; color:#3b2a8a}
.pipe-tip em{font-style:normal; font-weight:800; font-size:12px; color:#5b6478}
.pipe-tip .tt-cols{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; padding-top:6px; border-top:1px dashed #e6d48a}
.pipe-tip h4{margin:0 0 3px; font:700 11px Nunito,sans-serif; text-transform:uppercase; letter-spacing:.03em; color:#5b6478}
.pipe-tip ul{list-style:none; margin:0; padding:0; font-size:12px}
.pipe-tip li{display:flex; align-items:center; gap:5px; line-height:1.5}
.pipe-tip li b{margin-left:auto; font-variant-numeric:tabular-nums}
.pipe-tip li i{width:9px; height:9px; border-radius:50%; flex:none}