@font-face{font-family:"Comic Neue";src:url("fonts/ComicNeue-Regular.ttf?v=0757cf6e74e9") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Comic Neue";src:url("fonts/ComicNeue-Bold.ttf?v=0757cf6e74e9") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Fredoka";src:url("fonts/Fredoka.ttf?v=0757cf6e74e9") format("truetype");font-style:normal;font-weight:300 700;font-display:swap}

:root{
  --cream:#E9E0D0;
  --slate:#6F8097;
  --terracotta:#C88972;
  --ink:#302C29;
  --muted:#615950;
  --teal:#514331;
  --accent:var(--terracotta);
  --line:#b9ae9e;
  --bg:var(--cream);
  --white:#faf5ec;
  --paper:#faf5ec;
  --blue-paper:#e0e5eb;
  --clay-paper:#f0d8cc;
  --outline:2px solid var(--ink);
  --cartoon-shadow:4px 5px 0 var(--ink);
}
body{font-family:"Comic Neue","Comic Sans MS",cursive;font-size:18px;line-height:1.55;background:var(--cream);color:var(--ink)}
button,input,textarea,select{font:inherit}
h1,h2,h3,.brand,.nav,.primary,.secondary,.tabs button,.section-marker,.prototype-label,.community-pill,label,.chip{font-family:"Fredoka","Comic Sans MS",cursive}
h1{font-size:clamp(30px,3.2vw,44px);font-weight:550;letter-spacing:0;line-height:1.15;max-width:830px}
h2{font-size:26px;font-weight:500;letter-spacing:0;line-height:1.3}
h3{font-size:20px;font-weight:500;letter-spacing:0}
strong{font-weight:700}
a{color:#554235;text-decoration-thickness:1.5px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px dashed #373c46;outline-offset:5px}
header{background:var(--paper);border-bottom:var(--outline);gap:25px;padding-top:17px;padding-bottom:17px}
.brand{font-size:29px;gap:14px;letter-spacing:0;font-weight:550;line-height:1.2}
.brandmark{position:relative;display:block;flex:0 0 72px;width:72px;height:72px;overflow:hidden;padding:0;border:var(--outline);border-radius:50%;background:var(--slate);box-shadow:3px 3px 0 var(--ink)}
/* Display only the supplied frog's circular portrait, preserving its original pixels. */
.brandmark img{position:absolute;width:113.2%;height:auto;max-width:none;left:-6.6%;top:-60.2%;display:block}
.brand-sub{font-family:"Comic Neue",cursive;font-size:12px;letter-spacing:1.1px;color:var(--muted);font-weight:700;margin-top:7px}
.nav{font-size:17px;font-weight:500;border:2px solid transparent;border-radius:17px;padding:9px 15px;color:var(--ink)}
.nav.active{background:var(--clay-paper);color:var(--ink);border:var(--outline);box-shadow:2px 3px 0 var(--ink)}
.nav:hover{background:var(--cream)}
.count{color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:8px;font-size:14px}
.prototype-label{font-size:14px;background:var(--cream);color:var(--ink);border:var(--outline);border-radius:15px;padding:6px 12px;font-weight:400}
.demo-note{background:var(--slate);color:#10100f;border-bottom:var(--outline);font-size:15px;padding:12px 24px}
.demo-note button{color:#10100f;font-weight:700}
main{padding-top:33px;padding-bottom:56px}
.intro{margin-bottom:35px}
.intro p:last-child{font-size:19px;color:var(--muted)}
.eyebrow{color:#574638;font-size:14px;letter-spacing:1.1px;font-weight:700}
.community-pill{background:var(--clay-paper);border:var(--outline);border-radius:18px 18px 8px 18px;padding:14px 18px;box-shadow:3px 3px 0 var(--ink);font-size:17px;font-weight:500}
.community-pill span{font-family:"Comic Neue",cursive;font-size:16px;color:var(--muted);margin-top:3px}
.workspace{gap:26px}
.panel,.question,.guide-card{background:var(--paper);border:var(--outline);box-shadow:var(--cartoon-shadow);border-radius:22px}
.ask-panel{border-radius:26px 26px 12px 26px}
.help-panel{border-radius:26px 26px 26px 12px;background:#f5e7dd}
.shared-panel{padding-top:24px}
.section-marker{color:#665547;font-size:16px;gap:9px;font-weight:500}
.section-marker span{font-size:13px;color:#514331;letter-spacing:.6px;font-weight:500}
.small{font-size:15px;line-height:1.45;color:var(--muted)}
.section-heading>.small{font-size:14px}
label{font-size:16px;font-weight:450;color:var(--ink)}
input,textarea,select{border:1.5px solid var(--ink);background:#fffaf1;border-radius:12px;padding:11px 12px;color:var(--ink);font-size:17px}
input::placeholder,textarea::placeholder{color:#6b6257;opacity:1}
.optional{font-family:"Comic Neue",cursive;font-size:14px}
.form-row{grid-template-columns:minmax(0,1fr)}
.primary,.secondary{border:var(--outline);border-radius:13px;box-shadow:3px 3px 0 var(--ink);font-size:17px;font-weight:450;padding:10px 14px;line-height:1.4}
.primary{background:var(--terracotta);color:var(--ink)}
.primary:hover{background:#d69b86}
.secondary{background:var(--blue-paper);color:var(--ink)}
.secondary:hover{background:#d2dbe6}
.primary:active,.secondary:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}
.primary:disabled,.secondary:disabled{transform:none;box-shadow:none}
.aside-tip{border-top:2px dashed #b3a492;font-size:16px;gap:12px}
.tip-icon{color:#6b4a37}
.tabs{gap:12px;margin-top:18px;border-bottom:var(--outline);padding-bottom:12px;flex-wrap:wrap}
.tabs button{font-size:17px;font-weight:450;padding:9px 14px;border:2px solid transparent;border-radius:14px;color:#53493e;background:transparent}
.tabs button[aria-selected=true]{background:var(--blue-paper);border:var(--outline);box-shadow:2px 3px 0 var(--ink);color:var(--ink)}
.tabs button:hover{background:#f2eadd}
.tabs span{background:var(--paper);border:1px solid var(--ink);border-radius:7px;font-size:14px;color:var(--ink)}
.filter-row{margin:20px 0}
.filter-row select{font-size:16px;border-radius:11px;padding:6px 11px}
.filter-row>.small{font-size:14px}
.question{padding:23px;margin-bottom:22px;border-radius:21px 25px 21px 14px}
.question h3{font-size:22px;font-weight:500;line-height:1.4;margin:15px 0 10px}
.question p{font-size:18px;color:#51493f}
.question-meta{font-size:15px;color:var(--muted);gap:8px}
.chip{background:var(--blue-paper);color:#3e4652;border:1px solid #677487;border-radius:9px;font-size:14px;font-weight:450;padding:3px 9px}
.question-actions{border-top:1.5px dashed #b6a995;padding-top:17px}
.text-button{color:#5b4030;font-size:16px;font-weight:700;text-decoration-thickness:1.5px}
.helper-card{border-bottom:1.5px dashed #b6a995;gap:12px;padding:22px 0}
.helper-card p,.help-how p,.shared-reference p{font-size:17px;color:#51493f}
.helper-card strong{font-size:19px}
.helper-card div>span{font-size:14px;color:var(--muted)}
.avatar{border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:"Fredoka",cursive;font-size:16px;font-weight:450}
.teal{background:var(--terracotta);color:var(--ink)}
.blue{background:var(--blue-paper);color:var(--ink)}
.shared-reference{background:var(--blue-paper);border:var(--outline);border-radius:18px 9px 18px 18px;box-shadow:3px 3px 0 var(--ink);padding:18px}
.shared-reference>span{color:#3d4858}
.guide-intro{background:var(--blue-paper);border:var(--outline);box-shadow:3px 3px 0 var(--ink);border-radius:21px 21px 10px 21px}
.guide-intro p:last-child,.guide-card p{font-size:17px;color:#51493f}
.guide-card{margin-top:20px;padding:23px;border-radius:18px}
.guide-card a{font-size:16px}
.ai-note{border-top:2px dashed #b3a492}
.ai-note p{font-size:17px}
.offer{background:var(--clay-paper);border:1.5px solid var(--ink);border-radius:14px}
.offer p{font-size:17px}
.chat-layout{grid-template-columns:230px minmax(300px,1fr) 285px;gap:25px}
.chat-label{font-size:15px;border-bottom:1.5px dashed #b6a995}
.conversation-item{background:var(--blue-paper);border:1.5px solid var(--ink);border-radius:13px;color:var(--ink);font-size:17px}
.conversation-item span{font-size:15px}
.message{background:var(--blue-paper);border:1.5px solid var(--ink);border-radius:18px 18px 18px 5px;font-size:18px}
.message.mine{background:var(--clay-paper);border-radius:18px 18px 5px 18px}
.message.reference{background:var(--cream);border:var(--outline)}
.chat-guide button{background:var(--blue-paper);border:1.5px solid var(--ink);border-radius:13px;color:var(--ink);font-size:17px}
.empty{border:2px dashed #958671;border-radius:18px;background:var(--paper)}
dialog{background:var(--paper);border:var(--outline);border-radius:24px;box-shadow:7px 8px 0 var(--ink)}
dialog::backdrop{background:#302c298c}
.dialog-close{color:var(--ink)}
#toast{background:var(--ink);color:var(--paper);border:2px solid var(--paper);font-size:17px;border-radius:15px;box-shadow:3px 3px 0 var(--ink)}
footer{border-top:var(--outline);background:var(--blue-paper);font-size:15px;color:#51493f}
.skip{background:var(--paper);border:var(--outline)}
@media(max-width:1150px){.chat-layout{grid-template-columns:210px minmax(250px,1fr)}}
@media(max-width:760px){
  header{gap:16px;padding:16px 5%}
  .brand{font-size:27px;gap:12px}
  .brandmark{flex-basis:64px;width:64px;height:64px}
  .brand-sub{font-size:11px;letter-spacing:.6px}
  .nav{font-size:17px}
  .demo-note{font-size:15px;line-height:1.5;padding:12px 5%}
  h1{font-size:34px}
  .workspace,.chat-layout{grid-template-columns:minmax(0,1fr);gap:27px}
  .community-pill{display:inline-block;white-space:normal;max-width:100%}
  .section-marker span{font-size:13px}
  .question{padding:21px}
  .panel{padding:21px}
  .tabs{gap:8px}
  .tabs button{font-size:16px;padding:8px 10px}
  .section-heading{align-items:start}
  .compose{gap:13px}
  .primary.full{margin-bottom:5px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}.primary:active,.secondary:active{transform:none}}