/* Layout: fixed isometric city behind; quest cards scroll in a left column (desktop) or below the city (phone). Sticker-cartoon style: ink outlines, hard offset shadows. */
:root{
  --ink:#1B1F3B;
  --paper:#FFFDF7;
  --cream:#FFF4DE;
  --sky:#CDEBFF;
  --muted:#5A5F7D;
  --blue:#3D7BFF;
  --red:#FF5A5F;
  --yellow:#FFC83D;
  --teal:#2EC4B6;
  --purple:#9B7BFF;
  --orange:#FF9F43;
  --pink:#FF6FB5;
  --display:"Fredoka", "Be Vietnam Pro", system-ui, sans-serif;
  --text:"Be Vietnam Pro", system-ui, sans-serif;
  --bd:2.5px solid var(--ink);
  --sh:6px 6px 0 var(--ink);
  --ease:cubic-bezier(.2,.8,.2,1.15);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--sky);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.num{font-variant-numeric:tabular-nums lining-nums}
.small{font-size:.88rem;color:var(--muted)}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}

#city{position:fixed;inset:0;width:100%;height:100%;z-index:0;touch-action:pan-y}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border:var(--bd);border-radius:999px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:600;font-size:1.02rem;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.small{padding:8px 14px;font-size:.92rem;box-shadow:3px 3px 0 var(--ink)}
.btn.icon{background:var(--paper);color:var(--ink)}
.btn.icon kbd{font-family:var(--display);font-size:.85rem}
.row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.hud > *{pointer-events:auto}
.player{display:flex;align-items:center;gap:10px;background:var(--paper);border:var(--bd);border-radius:20px;padding:6px 12px 6px 6px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;min-width:0}
.avatar{width:46px;height:46px;border-radius:14px;border:var(--bd);overflow:hidden;background:var(--orange);flex:0 0 auto}
.avatar img{width:100%;height:auto;margin-top:2px}
.who{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.who b{font-family:var(--display);font-weight:600;font-size:1rem}
.who small{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp{display:block;height:8px;border:2px solid var(--ink);border-radius:6px;margin-top:5px;background:var(--cream);overflow:hidden;width:140px}
.xp i{display:block;height:100%;width:10%;background:linear-gradient(90deg,var(--teal),var(--yellow));transition:width .6s var(--ease)}
.xp-count{font-family:var(--display);font-weight:600;font-size:.9rem;background:var(--yellow);border:2px solid var(--ink);border-radius:10px;padding:2px 8px;align-self:center}
.hud-right{display:flex;gap:8px}

/* ---------- dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));pointer-events:none}
.dock-inner{pointer-events:auto;display:flex;gap:6px;background:var(--paper);border:var(--bd);border-radius:999px;padding:6px;box-shadow:4px 4px 0 var(--ink);overflow-x:auto;scrollbar-width:none;max-width:100%}
.dock-inner::-webkit-scrollbar{display:none}
.dock a{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.9rem;white-space:nowrap;transition:background .2s}
.dock a::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c);border:2px solid var(--ink)}
.dock a:hover{background:var(--cream)}
.dock a.on{background:var(--c);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.dock a.on::before{background:var(--paper)}

/* ---------- tour ---------- */
main{position:relative;z-index:10;pointer-events:none}
.stop{min-height:100svh;display:flex;align-items:center;padding:110px max(16px,env(safe-area-inset-right,0px)) 110px max(16px,env(safe-area-inset-left,0px))}
.stop + .stop{margin-top:10vh}
.quest{pointer-events:auto;width:min(470px,100%);margin-left:max(0px,calc((100vw - 1320px)/2));background:var(--paper);border:var(--bd);border-radius:26px;box-shadow:var(--sh);padding:26px;display:flex;flex-direction:column;gap:16px;position:relative;transform:translateY(30px) rotate(-1deg);opacity:.0;transition:transform .6s var(--ease),opacity .45s}
.stop.seen .quest,html.no-js .quest{transform:none;opacity:1}
.quest.wide{width:min(560px,100%)}
.quest.game-card{width:min(760px,100%)}
.quest::before{content:"";position:absolute;inset:0 0 auto 0;height:14px;background:var(--c);border-bottom:var(--bd);border-radius:24px 24px 0 0}
.tag{align-self:flex-start;margin-top:4px;font-family:var(--display);font-weight:600;font-size:.88rem;background:var(--c);border:2px solid var(--ink);border-radius:10px;padding:3px 10px;transform:rotate(-2deg)}
.quest h1{font-size:clamp(2rem,4vw,2.7rem)}
.quest h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.quest h3{font-size:1.15rem}
.quest p{max-width:62ch}
.lead{font-size:1.08rem}
.hint{font-size:.88rem;color:var(--muted)}
.sub{margin-top:6px}

/* stickers */
.stickers{display:flex;flex-wrap:wrap;gap:10px}
.sticker{display:inline-flex;flex-direction:column;gap:0;border:var(--bd);border-radius:14px;padding:8px 12px;font-size:.82rem;line-height:1.3;background:var(--paper);box-shadow:3px 3px 0 var(--ink);max-width:100%}
.sticker b{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.1}
.sticker:nth-child(odd){transform:rotate(-1.5deg)}
.sticker:nth-child(even){transform:rotate(1.2deg)}
.sticker.blue{background:#DCE7FF}.sticker.red{background:#FFE0E1}.sticker.yellow{background:#FFF0C2}.sticker.teal{background:#D3F5F1}.sticker.purple{background:#ECE5FF}
.sticker.sm b{font-size:1.15rem}
.callout{display:flex;gap:10px;align-items:flex-start;background:var(--cream);border:2px dashed var(--ink);border-radius:14px;padding:12px}
.callout p{font-size:.92rem}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);flex:0 0 auto;margin-top:3px}
.dot.blue{background:var(--blue)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}

/* proof frames (real dashboards) */
.proofs{display:grid;grid-template-columns:1fr;gap:16px}
.proof{display:flex;flex-direction:column;gap:8px;font-size:.84rem;color:var(--muted)}
.proof button{display:block;border:var(--bd);border-radius:14px;overflow:hidden;background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:zoom-in;transition:transform .2s var(--ease)}
.proof button:hover{transform:translate(-2px,-2px) rotate(-.5deg)}
.proof img{width:100%;height:auto}
.proof.big button{box-shadow:4px 4px 0 var(--ink)}
.proof figcaption .sticker{transform:rotate(-1deg);margin-top:-22px;margin-left:8px;position:relative;z-index:2}
.see-all{align-self:flex-start;font-family:var(--display);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{border:2px solid var(--ink);border-radius:999px;padding:3px 10px;font-size:.84rem;background:var(--cream)}

.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery button{position:relative;border:var(--bd);border-radius:14px;overflow:hidden;aspect-ratio:16/10;cursor:zoom-in;box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease)}
.gallery button:hover{transform:translate(-2px,-2px)}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:top left}
.gallery span{position:absolute;left:8px;bottom:8px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:1px 9px;font-size:.78rem;font-weight:600}

.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool{border:2px solid var(--ink);border-radius:16px;padding:14px;background:var(--cream);display:flex;flex-direction:column;gap:6px}
.tool p{font-size:.9rem}
.tool small{color:var(--muted);font-size:.8rem;margin-top:auto}
.mini{align-self:flex-start;margin-top:auto;font-size:.82rem;font-weight:600;border:2px solid var(--ink);border-radius:999px;padding:2px 10px;background:var(--paper)}
.books{list-style:none;display:flex;flex-direction:column;gap:8px}
.books li{border-left:5px solid var(--yellow);padding:4px 0 4px 12px;font-size:.93rem}
.hl{font-family:var(--display);font-weight:700;background:#FFF0C2;border:2px solid var(--ink);border-radius:8px;padding:0 5px}

/* timeline */
.timeline{display:flex;flex-direction:column;gap:8px}
.timeline details{border:2px solid var(--ink);border-radius:16px;background:var(--cream);overflow:hidden}
.timeline summary{list-style:none;display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;cursor:pointer}
.timeline summary::-webkit-details-marker{display:none}
.timeline summary span{grid-column:1/-1;font-size:.8rem;color:var(--muted)}
.timeline summary b{font-family:var(--display);font-weight:600;font-size:1.08rem}
.timeline summary em{font-style:normal;font-family:var(--display);font-weight:700;background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:0 7px;align-self:center;white-space:nowrap}
.timeline details[open] summary{border-bottom:2px dashed var(--ink)}
.timeline details p{padding:10px 14px 4px;font-size:.92rem}
.strip{display:flex;gap:8px;overflow-x:auto;padding:8px 14px 14px;scrollbar-width:thin}
.strip button{flex:0 0 150px;aspect-ratio:16/10;border:2px solid var(--ink);border-radius:10px;overflow:hidden;cursor:zoom-in}
.strip img{width:100%;height:100%;object-fit:cover;object-position:top}

.edu{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.edu-card{border:var(--bd);border-radius:18px;background:#FFE9D2;padding:16px;display:flex;flex-direction:column;gap:6px;box-shadow:3px 3px 0 var(--ink)}
.edu-card p{font-size:.86rem}
.gpa{font-family:var(--display);font-weight:700;font-size:3.2rem;line-height:1;color:var(--ink)}
.gpa small{font-size:1rem;color:var(--muted)}
.deck-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:24px}
.deck{position:relative;width:100%;aspect-ratio:990/765;touch-action:none}
.card{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transition:transform .5s var(--ease),opacity .3s;cursor:grab;user-select:none}
.card img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.card.drag{transition:none;cursor:grabbing}
.deck-cap{font-size:.82rem;text-align:center;min-height:2.6em;font-weight:600}
.photos{display:grid;grid-template-columns:.8fr 1.4fr 1fr;gap:8px}
.photos button{border:2px solid var(--ink);border-radius:12px;overflow:hidden;aspect-ratio:3/4;cursor:zoom-in}
.photos button:nth-child(2){aspect-ratio:auto}
.photos img{width:100%;height:100%;object-fit:cover}

/* game */
.game{border:var(--bd);border-radius:18px;overflow:hidden;background:#F6E7C8;box-shadow:4px 4px 0 var(--ink)}
.g-hud{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--bd);background:var(--paper)}
.g-hud div{padding:8px 12px;display:flex;flex-direction:column;line-height:1.2}
.g-hud div + div{border-left:2px solid var(--ink)}
.g-hud span{font-size:.76rem;color:var(--muted)}
.g-hud b{font-family:var(--display);font-weight:700;font-size:clamp(1.05rem,2.2vw,1.45rem);transition:color .3s}
.g-stage{position:relative}
.g-stage canvas{display:block;width:100%;aspect-ratio:960/600;touch-action:none;outline:none}
.game.is-playing canvas{cursor:none}
.g-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:18px;background:rgba(255,253,247,.82);backdrop-filter:blur(2px)}
.g-over[hidden]{display:none}
.g-over p{max-width:44ch;font-size:.95rem}
.legend{list-style:none;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-family:var(--display);font-weight:600}
.legend li{display:flex;align-items:center;gap:6px}
.legend .dot{margin:0}
.g-score{font-family:var(--display);font-weight:700;font-size:clamp(3rem,9vw,5.5rem);line-height:1}

/* contact */
.plane{width:22px;height:22px}
.flying{position:fixed;z-index:260;width:40px;height:40px;color:var(--blue);pointer-events:none;filter:drop-shadow(3px 3px 0 var(--ink))}
.contact-list{list-style:none;border-top:2px dashed var(--ink)}
.contact-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:2px dashed var(--ink);flex-wrap:wrap}
.contact-list span{color:var(--muted);font-size:.9rem}
.contact-list b,.contact-list a{font-weight:600;word-break:break-all}

/* overlays */
.sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(27,31,59,.45);backdrop-filter:blur(4px);animation:fade .2s}
.sheet[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.sheet-box{position:relative;width:min(640px,100%);max-height:calc(100svh - 32px);overflow:auto;background:var(--paper);border:var(--bd);border-radius:26px;box-shadow:var(--sh);padding:clamp(20px,4vw,30px);display:flex;flex-direction:column;gap:16px;animation:pop .35s var(--ease)}
@keyframes pop{from{transform:scale(.92) rotate(-1deg);opacity:0}}
.x{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:50%;font-size:1.6rem;line-height:1;border:2px solid var(--ink);background:var(--paper);z-index:3}
.rec-head{display:flex;gap:14px;align-items:center;padding-right:40px}
.rec-head img{width:64px;border-radius:14px;border:var(--bd);background:var(--orange)}
.rec-head h2{font-size:1.5rem}
.rec-head p{font-size:.88rem;color:var(--muted)}
.rec-list{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.lb figure{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:min(1400px,100%)}
.lb img{max-height:calc(100svh - 110px);border:var(--bd);border-radius:14px;background:#fff;box-shadow:var(--sh);animation:pop .3s var(--ease)}
.lb figcaption{background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:4px 12px;font-size:.92rem;text-align:center}
.cmdk{align-items:flex-start;padding-top:14vh}
.cmdk-box{width:min(520px,100%);background:var(--paper);border:var(--bd);border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.cmdk input{width:100%;border:0;border-bottom:2px solid var(--ink);padding:16px 18px;font:inherit;font-size:1.05rem;outline:none;background:transparent}
.cmdk ul{list-style:none;max-height:340px;overflow:auto;padding:8px}
.cmdk li button{width:100%;text-align:left;padding:10px 12px;border-radius:12px;display:flex;justify-content:space-between;gap:12px}
.cmdk li button span{color:var(--muted);font-size:.85rem}
.cmdk li.sel button{background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink)}
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);background:var(--yellow);border:var(--bd);box-shadow:3px 3px 0 var(--ink);padding:8px 16px;border-radius:999px;font-family:var(--display);font-weight:600;opacity:0;transition:.3s var(--ease);z-index:280;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- phone ---------- */
@media (max-width:860px){
  .who small{display:none}
  .xp{width:90px}
  .stop{align-items:flex-start;padding-top:52svh;padding-bottom:90px;min-height:auto}
  .stop + .stop{margin-top:40svh}
  #overview{padding-top:56svh}
  .quest,.quest.wide,.quest.game-card{width:100%;margin-left:0;padding:22px 18px}
  .proofs,.edu{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .g-hud{grid-template-columns:repeat(2,1fr)}
  .g-hud div:nth-child(3){border-left:0}
  .g-hud div:nth-child(n+3){border-top:2px solid var(--ink)}
  .hud-right .btn.small{padding:7px 11px;font-size:.84rem}
  .toast{bottom:84px}
}
@media (max-width:420px){
  .player .who{display:none}
  .photos{grid-template-columns:1fr 1fr}
  .photos button:nth-child(2){grid-column:span 2;order:-1;aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- v2 additions ---------- */
.quest.xl{width:min(720px,100%)}
.tips{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--muted)}
.key{display:inline-block;font-family:var(--display);font-weight:600;font-size:.78rem;color:var(--ink);background:var(--cream);border:2px solid var(--ink);border-radius:8px;padding:0 7px;margin-right:6px;box-shadow:2px 2px 0 var(--ink)}
.hud-right .icon svg{display:block}
html.is-night .player,html.is-night .dock-inner{background:#F4EFFF}

/* month selector + charts */
.months{display:flex;gap:6px;flex-wrap:wrap}
.months button{font-family:var(--display);font-weight:600;border:2px solid var(--ink);border-radius:12px;padding:6px 14px;background:var(--paper);box-shadow:2px 2px 0 var(--ink);transition:transform .15s var(--ease)}
.months button small{font-weight:500;font-size:.72rem;color:var(--muted)}
.months button.on{background:var(--yellow);transform:translateY(-2px)}
.month-read{font-size:.92rem;background:var(--cream);border:2px dashed var(--ink);border-radius:12px;padding:8px 12px;min-height:2.6em}
.charts{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chart{border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:10px 8px 4px;display:flex;flex-direction:column;gap:4px;min-width:0}
.chart figcaption{display:flex;flex-direction:column;padding:0 4px;line-height:1.3}
.chart figcaption b{font-family:var(--display);font-weight:600;font-size:.98rem}
.chart figcaption span{font-size:.74rem;color:var(--muted)}
.chart figcaption .key{all:unset;display:flex;gap:6px;align-items:center;font-size:.74rem;color:var(--muted);margin-top:2px;flex-wrap:wrap}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .tick{font-size:10px;fill:var(--muted);font-family:var(--text)}
.chart .val{font-size:10.5px;font-weight:700;fill:var(--ink);font-family:var(--text)}
.chart .band{transition:x .35s var(--ease)}
.chart .hit{cursor:pointer;outline:none}
.chart .hit:focus-visible{stroke:var(--blue);stroke-width:2}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:2px}
.sw.a{background:#3D7BFF}.sw.b{background:#E8701A}
.sw.tick{height:3px;width:14px;border-radius:2px;background:var(--ink);vertical-align:2px}
.ctip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--ink);padding:8px 10px;font-size:.8rem;display:flex;flex-direction:column;gap:2px;min-width:170px}
.ctip[hidden]{display:none}
.ctip b{font-family:var(--display);font-weight:600}
.ctip span{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--muted)}
.ctip em{font-style:normal;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.table-view summary{cursor:pointer;font-weight:600;font-size:.9rem}
.table-view > div{overflow-x:auto;margin-top:8px}
.table-view table{border-collapse:collapse;font-size:.82rem;width:100%;font-variant-numeric:tabular-nums}
.table-view th,.table-view td{border-bottom:1px solid #E6E0D2;padding:5px 8px;text-align:right;white-space:nowrap}
.table-view th:first-child,.table-view td:first-child{text-align:left}

/* AI assistant demo */
.ai-demo{display:flex;flex-direction:column;gap:10px}
.ai-scen{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ai-scen button{font-weight:600;font-size:.86rem;border:2px solid var(--ink);border-radius:999px;padding:5px 12px;background:var(--paper)}
.ai-scen button.on{background:var(--ink);color:#fff}
.ai-wrap{display:grid;grid-template-columns:1fr 1fr;border:var(--bd);border-radius:18px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);background:#fff;height:470px}
.msgr{display:flex;flex-direction:column;min-width:0;border-right:2px solid var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.msgr-head{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid #E4E6EB}
.msgr-head b{display:block;font-size:.88rem}
.msgr-head small{font-size:.72rem;color:#65676B}
.avatar-c{width:30px;height:30px;border-radius:50%;background:#E4E6EB;display:grid;place-items:center;font-weight:700;color:#65676B}
.msgr-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px}
.bub{max-width:85%;padding:7px 11px;border-radius:16px;font-size:.84rem;line-height:1.4}
.bub.c{background:#E4E6EB;align-self:flex-start;border-bottom-left-radius:4px}
.bub.s{background:#0A7CFF;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bub.sys{align-self:center;background:none;color:#65676B;font-size:.74rem;text-align:center}
.bub.new{animation:pop .35s var(--ease)}
.bub.typing{display:flex;gap:4px;padding:10px 12px}
.bub.typing i{width:6px;height:6px;border-radius:50%;background:#90949C;animation:dots 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.msgr-compose{display:flex;gap:8px;align-items:flex-end;padding:8px;border-top:1px solid #E4E6EB}
.composer{flex:1;min-height:36px;max-height:110px;overflow:auto;border-radius:18px;background:#F0F2F5;padding:8px 12px;font-size:.82rem;color:#90949C}
.composer.filled{color:#050505}
.composer.flash{animation:flash .6s}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(61,123,255,.6)}100%{box-shadow:0 0 0 8px rgba(61,123,255,0)}}
.send{font-weight:700;color:#0A7CFF;padding:8px 6px}
.send:disabled{color:#BCC0C4;cursor:default}
.rfs{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;background:#F7F8FA;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.8rem;min-width:0}
.rfs-head{display:flex;gap:6px;align-items:center}
.rfs-head b{font-size:.95rem;margin-right:auto}
.pill{background:#EEF0F4;border-radius:6px;padding:1px 7px;font-size:.72rem}
.pill.ok{background:#E3F6EA;color:#137A3B}
.rfs-sec small{color:#65676B}
.rfs-sec .q{margin:2px 0 6px}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.t{border-radius:6px;padding:1px 7px;font-size:.72rem}
.t.g{background:#E3F6EA;color:#137A3B}.t.b{background:#E7EEFF;color:#2457C5}.t.r{background:#FFE7E7;color:#B42318}.t.n{background:#EEF0F4}
.rfs-step{border:1px solid #BFD3FF;background:#EEF4FF;border-radius:10px;padding:8px}
.rfs-step p{color:#475467;margin-top:2px}
.rfs-step .up{color:#7A4D00;margin-top:4px}
.rfs-warn{border:1px solid #F5C451;background:#FFF7E0;border-radius:10px;padding:6px 8px;color:#7A4D00}
.rfs-form{border:1px solid #BFE6CB;background:#F2FBF5;border-radius:10px;padding:8px}
.rfs-form .bar{height:5px;background:#E4E6EB;border-radius:3px;margin:6px 0}
.rfs-form .bar i{display:block;height:100%;background:#22A45D;border-radius:3px;transition:width .6s var(--ease)}
.rfs-form ul{list-style:none}
.rfs-form li{display:flex;justify-content:space-between;color:#344054}
.rfs-form li span{color:#B54708}
.rfs-form li.ok span{color:#137A3B}
.rfs-ai{display:flex;flex-direction:column;gap:6px}
.rfs-ai > small{color:#65676B}
.opt{border:1.5px solid #E4E6EB;background:#fff;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px;transition:border-color .2s,transform .2s}
.opt.rec{border:2px solid #7C5CFF}
.opt.picked{transform:translateX(-3px);box-shadow:3px 3px 0 #7C5CFF}
.opt-k{font-weight:700;display:flex;gap:6px;align-items:center}
.opt-k em{font-style:normal;font-size:.68rem;background:#EFEAFF;color:#5B3FE0;border-radius:6px;padding:0 6px}
.opt-q{border-top:1px dashed #D0D5DD;padding-top:5px}
.opt-q small{color:#6941C6;font-weight:600}
.ins{align-self:flex-start;background:#1877F2;color:#fff;font-weight:700;font-size:.76rem;border-radius:8px;padding:4px 10px}
.ins:hover{background:#0B5FCC}
.vote{display:flex;gap:4px}
.vote button{border-radius:6px;padding:0 4px;opacity:.5}
.vote button.on{opacity:1;background:#EEF0F4}
.rfs-qbox{border:1.5px solid #C9B8FF;background:#F6F2FF;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px;animation:pop .35s var(--ease)}
.rfs-qbox[hidden]{display:none}
.rfs-loading{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.rfs-loading span{height:12px;border-radius:6px;background:linear-gradient(90deg,#E4E6EB 0%,#F4F5F7 50%,#E4E6EB 100%);background-size:200% 100%;animation:shim 1s linear infinite}
.rfs-loading span:nth-child(2){width:80%}.rfs-loading span:nth-child(3){width:60%}
.rfs-loading p{color:#65676B}
@keyframes shim{to{background-position:-200% 0}}
.ai-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ai-shots button{border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:3px 3px 0 var(--ink);aspect-ratio:4/3}
.ai-shots img{width:100%;height:100%;object-fit:cover;object-position:top left}
.ai-shots .wide-shot{grid-column:1/-1;aspect-ratio:16/8}
.tool.feature{grid-column:1/-1}
.tool-shot{border:2px solid var(--ink);border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:16/8}
.tool-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.tool h4{font-family:var(--display);font-weight:600;font-size:1.05rem}
@media (max-width:860px){
  .charts{grid-template-columns:1fr}
  .ai-wrap{grid-template-columns:1fr;height:auto}
  .msgr{border-right:0;border-bottom:2px solid var(--ink);height:330px}
  .rfs{max-height:440px}
  .ai-shots{grid-template-columns:1fr 1fr}
  .hide-sm{display:none}
}

.gallery .g-wide{grid-column:1/-1;aspect-ratio:16/8}
.ai-shots button{aspect-ratio:1}
.ai-shots img{object-fit:contain;background:#fff;padding:4px}