html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: one narrow column like a handwritten recipe card — input, then the number, then the bowls. */
:root{
  --bg:#F2F3EF; --paper:#FBFBF8; --fg:#1D2230; --muted:#5E6474; --line:#D9DCD4;
  --ai:#2C3F6E; --ai-soft:#C9D1E3; --yolk:#D99A1E; --rice:#FFFFFF; --rice-edge:#BDBBAE; --rice-off:#F8F8F4;
  --display:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#13161E; --paper:#1B1F2A; --fg:#E8E9E4; --muted:#9AA0AE; --line:#2E3342;
  --ai:#9DB2E4; --ai-soft:#33405F; --yolk:#E8B04A; --rice:#ECEBE4; --rice-edge:#9A988E; --rice-off:#3F4452; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#13161E; --paper:#1B1F2A; --fg:#E8E9E4; --muted:#9AA0AE; --line:#2E3342;
  --ai:#9DB2E4; --ai-soft:#33405F; --yolk:#E8B04A; --rice:#ECEBE4; --rice-edge:#9A988E; --rice-off:#3F4452; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.8;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:40px 64px}
.wrap{max-width:560px;margin:0 auto;display:grid;gap:40px}
header{display:grid;gap:12px}
.domain{font-size:12px;letter-spacing:.12em;color:var(--muted)}
h1{font-family:var(--display);font-weight:900;font-size:clamp(44px,12vw,64px);line-height:1.1;margin:0;letter-spacing:.04em}
h1 span{color:var(--yolk)}
.lead{margin:0;color:var(--muted);text-wrap:pretty}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:24px 20px;display:grid;gap:20px}
.field{display:grid;gap:8px}
.field label,.legend-t{font-size:13px;font-weight:700;letter-spacing:.06em}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input[type=number],input[type=text]{font:inherit;font-size:17px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:8px 12px;width:100%;}
input[type=number]{width:96px;font-variant-numeric:tabular-nums}
input:focus-visible,button:focus-visible,textarea:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
.unit{color:var(--muted)}
.seg{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{flex:1;font:inherit;font-size:14px;padding:10px 8px;background:transparent;color:var(--muted);border:0;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true]{background:var(--ai);color:var(--paper);font-weight:700}
.other{display:grid;gap:12px;padding:14px;border-left:2px solid var(--ai-soft);background:var(--bg)}
.result{display:grid;gap:14px}
.res-lead{font-family:var(--display);font-size:18px;margin:0;text-wrap:balance}
.big{font-family:var(--display);font-weight:900;font-size:clamp(72px,22vw,120px);line-height:1;color:var(--ai);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.big small{font-size:.28em;font-weight:700;color:var(--fg);margin-left:6px}
.sub{margin:0;text-wrap:pretty}
.sub b{color:var(--yolk);font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:900;font-size:2em;line-height:1;margin:0 4px;vertical-align:-0.1em;white-space:nowrap}
@media (min-width:600px){.sub b{font-size:2.6em}}
.dishres{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.mid{font-family:var(--display);font-weight:900;font-size:clamp(52px,15vw,80px);line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.mid small{font-size:.32em;font-weight:700;margin-left:6px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font:inherit;font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.chips button[aria-pressed=true]{border-color:var(--ai);color:var(--ai);font-weight:700}
.bowls{display:grid;gap:10px}
canvas{width:100%;display:block}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.tips{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.tips li{border-top:1px solid var(--line);padding-top:10px}
.share{display:flex;gap:10px;flex-wrap:wrap}
.btn{font:inherit;font-size:14px;font-weight:700;padding:10px 18px;border-radius:999px;border:1px solid var(--ai);color:var(--ai);background:transparent;cursor:pointer;text-decoration:none}
.btn.solid{background:var(--ai);color:var(--paper)}
.btn.line{background:#06C755;border-color:#06C755;color:#fff}
textarea{font:inherit;font-size:16px;line-height:1.7;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:10px 12px;width:100%;resize:vertical}
.notice{background:var(--paper);border:1px solid var(--yolk);border-radius:6px;padding:14px 16px;display:grid;gap:12px;font-size:14px;justify-items:start}
.notice p{margin:0;text-wrap:pretty}
.note{font-size:12px;color:var(--muted);margin:0;text-wrap:pretty}
h2{font-family:var(--display);font-size:20px;margin:0}
.ref{font-size:.8em;color:var(--muted);text-decoration:none;white-space:nowrap}
.ref:hover{text-decoration:underline}
.foot{max-width:560px;margin:96px auto 0;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:14px;font-size:12px;line-height:1.9;color:var(--muted)}
.foot p{margin:0;text-wrap:pretty}
.foot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.share-sec{display:grid;gap:14px}
.dot-on{background:var(--ai)}
.dot-off{background:var(--ai-soft)}
.privacy{display:grid;gap:8px;margin-top:4px;padding:16px 18px;border:1px solid var(--line);border-radius:6px}
.privacy-h{font-weight:700;color:var(--fg);font-size:13px;letter-spacing:.04em}
.privacy ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.foot .copy{margin-top:8px;letter-spacing:.06em}
#note1{scroll-margin-top:24px}
#note1:target{color:var(--fg)}