/* Gaegu (c) 2018 The Gaegu Project Authors; Gamja Flower (c) YoonDesign Inc.
   Both licensed under the SIL Open Font License 1.1 — see OFL-*.txt */
@font-face{font-family:"Gaegu";font-style:normal;font-weight:400 500;font-display:swap;src:url("/static/fonts/ofl_gaegu_Gaegu-Regular.woff2") format("woff2") format("woff2")}
@font-face{font-family:"Gaegu";font-style:normal;font-weight:700 900;font-display:swap;src:url("/static/fonts/ofl_gaegu_Gaegu-Bold.woff2") format("woff2") format("woff2")}
@font-face{font-family:"Gamja Flower";font-style:normal;font-weight:400 700;font-display:swap;src:url("/static/fonts/ofl_gamjaflower_GamjaFlower-Regular.woff2") format("woff2") format("woff2")}
:root{
  --rice:#FFF6E0; --rice-2:#F6E7C4; --shiro:#FFFDF6;
  --nori:#15271B;
  --matcha:#1F6B3F; --matcha-deep:#123F26; --matcha-soft:#DDEBDF;
  --mikan:#F2681F; --mikan-deep:#B8410A; --mikan-soft:#FFE3CE;
  --tamago:#FFC42E; --tamago-deep:#C98A00; --tamago-soft:#FFF0C2;
  --ume:#B3302A; --ume-soft:#FBE0DC;
  /* the two faces back each other up, so a glyph missing from one is served
     by the other rather than by a mismatched system font */
  --round:"Gamja Flower","Gaegu",system-ui,sans-serif;
  --maru:"Gaegu","Gamja Flower",system-ui,sans-serif;
  /* questions, algebra and answer inputs stay in a standard face for legibility */
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-hero:clamp(2.3rem,7.2vw,4.2rem);
  --f-md:1.12rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--round);font-weight:500;color:var(--nori);line-height:1.72;font-size:1.06rem;min-height:100vh;
  background-color:var(--rice);
  background-image:radial-gradient(circle at 50% 50%, rgba(31,107,63,.05) 2px, transparent 2px),
                   radial-gradient(circle at 0% 50%, rgba(242,104,31,.045) 2px, transparent 2px);
  background-size:34px 34px,34px 34px;
  background-position:0 0,17px 17px;
  -webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;text-align:left}
.wrap{max-width:1020px;margin:0 auto;padding:0 20px}

header.top{background:var(--matcha-deep);position:sticky;top:0;z-index:30;border-bottom:5px solid var(--tamago)}
.top-inner{max-width:1020px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px}
.wordmark{font-family:var(--maru);font-weight:900;font-size:1.6rem;color:var(--rice);line-height:1.1;
  letter-spacing:-.02em}
.wordmark .pi{color:var(--tamago);font-family:"Zen Maru Gothic",Georgia,serif}
.top-right{display:flex;align-items:center;gap:10px}
.omakase{font-family:var(--maru);font-weight:900;font-size:.9rem;color:var(--matcha-deep);
  background:var(--tamago);border-radius:999px;padding:8px 17px;box-shadow:0 3px 0 var(--tamago-deep);
  transition:transform .08s,box-shadow .08s}
.omakase:active{transform:translateY(3px);box-shadow:0 0 0 var(--tamago-deep)}
.chip{font-family:var(--maru);font-weight:900;font-size:.9rem;color:var(--rice);
  border:3px solid var(--tamago);border-radius:999px;padding:5px 14px;white-space:nowrap}

.hero{text-align:center;padding:54px 0 8px}
.hero h1{font-family:var(--maru);font-weight:900;font-size:var(--f-hero);line-height:1;
  letter-spacing:-.04em;color:var(--nori)}
.hero h1 em{font-style:normal;color:var(--mikan);text-shadow:5px 5px 0 var(--tamago)}
.hero .tagline{font-family:var(--round);font-size:1.32rem;color:var(--matcha-deep);margin-top:14px}
.hero .rule{width:88px;height:7px;background:var(--mikan);border-radius:99px;margin:18px auto 0}

.tray{background:var(--matcha-deep);border-radius:32px;padding:15px;margin:30px 0 54px;
  box-shadow:0 11px 0 #0B2416, inset 0 0 0 4px rgba(255,246,224,.12)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:168px;gap:11px}
.box{position:relative;border-radius:20px;overflow:hidden;background:var(--shiro);
  box-shadow:inset 0 0 0 3px rgba(21,39,27,.10);transition:transform .16s ease-out}
.box.sm{grid-column:span 1;grid-row:span 1}
.box.wide{grid-column:span 2;grid-row:span 1}
.box.big{grid-column:span 2;grid-row:span 2}
.box:hover{transform:translateY(-3px)}
.art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px}
.art svg{width:74%;height:74%;max-width:150px;max-height:150px;
  transition:transform .5s cubic-bezier(.2,.9,.25,1)}
.box.big .art svg{width:60%;height:60%;max-width:210px;max-height:210px}
.box.open .art svg{transform:scale(1.12) rotate(-3deg)}
.lid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 15px;border-radius:20px;
  transition:transform .52s cubic-bezier(.3,.9,.25,1),opacity .42s ease-out}
.box:hover .lid{transform:translateY(-7px)}
.box.open .lid{transform:translateY(-118%) rotate(-4deg);opacity:0}
.lid.green{background:var(--matcha);color:var(--shiro);box-shadow:inset 0 0 0 4px rgba(255,246,224,.22)}
.lid.orange{background:var(--mikan);color:var(--shiro);box-shadow:inset 0 0 0 4px rgba(255,246,224,.24)}
.lid.yellow{background:var(--tamago);color:var(--matcha-deep);box-shadow:inset 0 0 0 4px rgba(18,63,38,.16)}
.lid .lname{font-family:var(--maru);font-weight:900;font-size:1rem;line-height:1.18;letter-spacing:-.015em}
.box.big .lid .lname{font-size:1.85rem}
.box.wide .lid .lname{font-size:1.24rem}
.lid .lnum{position:absolute;top:12px;left:15px;font-family:var(--maru);font-weight:900;
  font-size:.82rem;opacity:.6}
.lid .ltag{position:absolute;top:10px;right:12px;font-family:var(--maru);font-weight:900;
  font-size:.68rem;letter-spacing:.1em;background:var(--nori);color:var(--tamago);
  border-radius:999px;padding:3px 10px}

.back{font-family:var(--maru);font-weight:900;font-size:.95rem;color:var(--matcha-deep);
  background:var(--shiro);border:3px solid var(--matcha-deep);border-radius:999px;padding:8px 18px;
  display:inline-block;box-shadow:0 4px 0 var(--rice-2)}
.back:hover{background:var(--matcha-soft)}
.back:active{transform:translateY(4px);box-shadow:0 0 0 var(--rice-2)}
.dish{background:var(--shiro);border:5px solid var(--nori);border-radius:26px;padding:22px 24px 10px;
  margin-top:16px;box-shadow:0 8px 0 var(--rice-2)}
.dish-head{display:flex;align-items:center;gap:14px;padding-bottom:15px;margin-bottom:4px;
  border-bottom:4px dotted var(--rice-2)}
.dish-head .mini{width:56px;height:56px;flex-shrink:0}
.dish-head h2{font-family:var(--maru);font-weight:900;font-size:1.5rem;letter-spacing:-.02em;line-height:1.15}
.stem{font-family:var(--ui);font-size:1.12rem;background:var(--matcha-soft);border-left:7px solid var(--matcha);
  border-radius:0 18px 18px 0;padding:16px 18px;margin:14px 0 20px;line-height:1.8}
.graph{background:var(--rice);border:4px solid var(--rice-2);border-radius:18px;padding:10px;margin-bottom:20px}
.graph svg{display:block;width:100%;height:auto}
.part{padding:18px 0;border-top:4px dotted var(--rice-2)}
.part:first-of-type{border-top:none;padding-top:2px}
.prow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.prompt{font-family:var(--ui);font-size:1.04rem;flex:1;line-height:1.8}
.prompt .pl{font-family:var(--maru);font-weight:700;color:var(--mikan-deep);margin-right:6px;font-size:1.12rem}
.marks{font-family:var(--ui);font-weight:700;font-size:.78rem;color:var(--mikan-deep);
  background:var(--mikan-soft);border-radius:999px;padding:4px 12px;white-space:nowrap;flex-shrink:0}

/* ── answer area: symbol strip + maths field ── */
.symbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.sym{font-family:var(--maru);font-weight:900;font-size:.95rem;color:var(--matcha-deep);
  background:var(--shiro);border:3px solid var(--rice-2);border-radius:11px;
  padding:6px 11px;min-width:38px;text-align:center;line-height:1.25;transition:all .11s}
.sym:hover{border-color:var(--matcha);background:var(--matcha-soft)}
.sym:active{transform:translateY(2px)}
.sym.kb{background:var(--tamago);border-color:var(--tamago-deep);color:var(--matcha-deep)}
.sym.kb:hover{background:#FFD35A}
.sym small{font-size:.72em;font-weight:700;opacity:.85}
.answer-row{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.prefix{font-family:var(--ui);font-size:1.05rem;font-weight:600}
math-field{font-family:var(--ui);font-size:1.15rem;padding:10px 14px;border:4px solid var(--rice-2);border-radius:16px;
  background:var(--rice);min-width:min(290px,100%);flex:1;color:var(--nori);
  --caret-color:#F2681F; --selection-background-color:#FFE3CE; --contains-highlight-background-color:#FFF0C2}
math-field:focus-within{outline:none;border-color:var(--mikan);box-shadow:0 0 0 5px var(--mikan-soft)}
math-field[read-only]{background:var(--rice-2);opacity:.8}
input.expr{font-family:var(--ui);font-weight:500;font-size:1.02rem;color:var(--nori);padding:13px 17px;
  border:4px solid var(--rice-2);border-radius:16px;background:var(--rice);min-width:min(290px,100%);flex:1;
  transition:border-color .14s,box-shadow .14s}
input.expr:focus{outline:none;border-color:var(--mikan);box-shadow:0 0 0 5px var(--mikan-soft)}
input.expr::placeholder{color:#A79878;font-weight:600}
input.expr:disabled{background:var(--rice-2);opacity:.75}
.mlist{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.mrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mrow .lbl{font-family:var(--ui);font-weight:600;font-size:1rem;color:var(--ink-3,#8B7A6F);min-width:28px}
.cell{min-width:120px;max-width:190px;flex:0 1 150px}
.rm{width:30px;height:30px;border-radius:50%;border:3px solid var(--rice-2);background:var(--shiro);
  color:var(--ume);font-family:var(--maru);font-weight:700;font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rm:hover{border-color:var(--ume);background:var(--ume-soft)}
.addbtn{font-family:var(--maru);font-weight:700;font-size:.88rem;color:var(--matcha-deep);
  background:var(--shiro);border:3px dashed var(--line-2,#DCC9AA);border-radius:999px;
  padding:8px 16px;align-self:flex-start;transition:all .12s}
.addbtn:hover{border-style:solid;border-color:var(--matcha);background:var(--matcha-soft)}
.coord{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.coord .paren{font-family:var(--ui);font-size:2rem;font-weight:300;color:var(--ink-3,#8B7A6F);line-height:1}
.coord .comma{font-family:var(--ui);font-size:1.5rem;color:var(--ink-3,#8B7A6F);margin:0 -2px}
.opsel{font-family:var(--ui);font-weight:700;font-size:1.02rem;color:var(--nori);padding:11px 10px;
  border:4px solid var(--rice-2);border-radius:14px;background:var(--shiro);cursor:pointer}
.opsel:focus{outline:none;border-color:var(--mikan)}
.conn{font-family:var(--ui);font-weight:600;font-size:.95rem;color:var(--ink-3,#8B7A6F)}
.opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.opt{font-family:var(--ui);font-weight:600;font-size:.95rem;color:var(--matcha-deep);padding:11px 20px;
  border:4px solid var(--rice-2);border-radius:999px;background:var(--shiro);transition:all .12s}
.opt:hover:not(:disabled){border-color:var(--matcha);background:var(--matcha-soft)}
.opt[data-sel="1"]{background:var(--matcha);border-color:var(--matcha-deep);color:var(--shiro)}
.opt:disabled{cursor:default}
.fb{margin-top:14px;font-family:var(--ui);font-weight:600;font-size:.97rem;display:flex;align-items:center;
  gap:11px;padding:12px 16px;border-radius:16px;flex-wrap:wrap}
.fb.ok{color:var(--matcha-deep);background:var(--matcha-soft);border:3px solid var(--matcha)}
.fb.no{color:var(--ume);background:var(--ume-soft);border:3px solid var(--ume)}
.fb .mark{font-size:1.25rem}
.expl{font-family:var(--ui);margin-top:11px;font-size:.97rem;background:var(--tamago-soft);border-left:7px solid var(--tamago);
  border-radius:0 16px 16px 0;padding:13px 16px;line-height:1.8}
.hint-wrap{margin:6px 0 18px}
.hint-btn{font-family:var(--maru);font-weight:900;font-size:.92rem;color:var(--matcha-deep);
  background:var(--shiro);border:3px solid var(--matcha-deep);border-radius:999px;padding:9px 18px;
  box-shadow:0 4px 0 var(--rice-2)}
.hint-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--rice-2)}
.hintbox{font-family:var(--ui);margin-top:12px;font-size:.97rem;background:var(--tamago-soft);border:3px solid var(--tamago);
  border-radius:18px;padding:13px 16px;line-height:1.8}
.btn{font-family:var(--maru);font-weight:900;font-size:1.02rem;color:var(--shiro);background:var(--mikan);
  padding:14px 28px;border-radius:999px;box-shadow:0 5px 0 var(--mikan-deep);display:inline-block;
  transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--mikan-deep)}
.btn.green{background:var(--matcha);box-shadow:0 5px 0 var(--matcha-deep)}
.btn.green:active{box-shadow:0 0 0 var(--matcha-deep)}
.btn.cream{background:var(--shiro);color:var(--matcha-deep);border:3px solid var(--matcha-deep);
  box-shadow:0 5px 0 var(--rice-2)}
.btn.cream:active{box-shadow:0 0 0 var(--rice-2)}
.btn.sm{font-size:.92rem;padding:11px 20px}
.controls{display:flex;gap:14px;align-items:center;margin:22px 0 48px;flex-wrap:wrap}
.katex{font-size:1.04em}
.piglyph{height:.92em;width:.85em;vertical-align:-.06em;color:var(--tamago);margin:0 .02em}
.ic{width:1.15em;height:1.15em;vertical-align:-.2em}
.sym .katex{font-size:1em}
footer.site .fwm{font-family:var(--maru);font-weight:700;font-size:1.5rem;color:var(--rice);
  margin-bottom:6px;letter-spacing:-.01em}
footer.site a{color:var(--tamago)}
footer.site .fine{margin-top:10px;font-size:.76rem;opacity:.62}
footer.site{background:var(--matcha-deep);border-top:5px solid var(--tamago);padding:38px 20px 30px}
.foot-inner{max-width:1020px;margin:0 auto}
.foot-cols{display:flex;justify-content:space-between;gap:34px;align-items:flex-start;flex-wrap:wrap}
.foot-brand .fwm{font-family:var(--maru);font-weight:700;font-size:1.6rem;color:var(--rice);
  letter-spacing:-.01em;margin-bottom:8px}
.foot-col h4{font-family:var(--maru);font-weight:700;font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tamago);margin-bottom:9px}
footer.site p{font-family:var(--ui);font-size:.87rem;line-height:1.7;color:rgba(255,246,224,.72);
  max-width:38ch}
footer.site a{color:var(--tamago);text-decoration:none}
footer.site a:hover{text-decoration:underline}
.foot-bar{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,246,224,.18);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--ui);font-size:.78rem;color:rgba(255,246,224,.5)}

@media(max-width:640px){
  /* keep the scene tall enough to read on a phone rather than squashing it */
  body{background-size:820px auto,34px 34px,34px 34px}
}
@media(max-width:700px){
  .foot-cols{gap:8px}
  .foot-bar{gap:8px}
}
@media(max-width:860px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;grid-auto-flow:dense}
  .box.big .lid .lname{font-size:1.5rem}
}
@media(max-width:520px){
  .bento{gap:9px;grid-auto-rows:136px}
  .lid{padding:11px 12px}
  .lid .lname{font-size:.88rem}
  .box.wide .lid .lname{font-size:1rem}
  .dish{padding-left:16px;padding-right:16px;border-width:4px}
  .tray{padding:10px;border-radius:24px}
}

/* ── loading / error states ── */
.loading{display:flex;align-items:center;gap:12px;padding:40px 4px;font-family:var(--ui);
  color:var(--ink-3,#8B7A6F);font-size:1rem}
.spinner{width:22px;height:22px;border:4px solid var(--rice-2);border-top-color:var(--mikan);
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.errbox{font-family:var(--ui);background:var(--ume-soft);border:3px solid var(--ume);
  border-radius:18px;padding:16px 18px;margin-top:16px;color:var(--ume);font-weight:600}
.errbox button{margin-top:10px}
.btn[disabled]{opacity:.55;pointer-events:none}