:root{--ink:#171d28;--muted:#647082;--bg:#f3f5f8;--line:#dce2eb;--blue:#204adc;--orange:#ed6a32}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.65 system-ui,-apple-system,"Noto Sans TC",sans-serif}header,main,footer{max-width:1240px;margin:auto;padding:22px 28px}header{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.brand{font-weight:800;text-decoration:none;color:var(--ink);letter-spacing:.08em}.brand span{color:var(--blue)}nav{display:flex;gap:20px;flex-wrap:wrap}a{color:var(--blue);text-underline-offset:4px}nav a{font-size:14px;text-decoration:none}h1{font-size:clamp(26px,3vw,40px);line-height:1.25;letter-spacing:-.04em;margin:14px 0 8px}h2{font-size:21px;margin:0 0 18px}h3{font-size:17px}.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--blue);font-weight:700}.intro{color:var(--muted);margin:0 0 24px;max-width:780px}.workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:24px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:25px;margin-bottom:20px}.panel-title{display:flex;justify-content:space-between;gap:16px;align-items:center}.panel-title h2{margin-bottom:10px}.num{color:var(--blue);margin-right:10px;font-family:monospace}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}label{display:block;font-size:14px;font-weight:600}input,button{font:inherit}input{width:100%;margin-top:6px;padding:11px 12px;border:1px solid #bfc9d8;border-radius:6px;background:white;color:var(--ink);min-width:0}input:focus{outline:2px solid var(--blue);outline-offset:2px}.hint{font-size:13px;color:var(--muted);margin:5px 0 16px}.ingredient{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr auto;gap:8px;align-items:end;padding:13px 0;border-bottom:1px solid var(--line)}.ingredient label{font-size:13px}.ingredient input{padding:9px 8px}.btn{display:inline-block;cursor:pointer;border:1px solid var(--line);border-radius:6px;background:white;padding:10px 14px;color:var(--ink);font-size:14px;text-decoration:none}.btn.primary{background:var(--blue);color:white;border-color:var(--blue)}.remove{background:transparent;border:0;color:#9a2e32;cursor:pointer;padding:10px 6px;font-size:14px}.summary{background:#171f34;color:white;position:sticky;top:20px}.summary .hint{color:#bcc9e6}.price{font-size:52px;font-weight:750;line-height:1.2;letter-spacing:-.05em;margin:12px 0}.price small{font-size:16px;font-weight:400;letter-spacing:0}.result-label{color:#bbc9ed;font-size:14px}.results{margin:22px 0}.results>div,.breakdown>div{display:flex;justify-content:space-between;gap:20px;margin:10px 0;font-size:14px}.results strong{font-variant-numeric:tabular-nums}.divider{border:0;border-top:1px solid #35415c;margin:22px 0}.balance{border-left:3px solid var(--orange);padding-left:14px;margin:20px 0}.balance strong{display:block;font-size:28px}.actions{display:flex;gap:10px;flex-wrap:wrap}.error{color:#ffc3ac;font-weight:600}.formula{background:#edf1ff;border-left:3px solid var(--blue);padding:16px;margin:18px 0;font-size:15px;overflow-wrap:anywhere}.content{max-width:820px}.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.guide{padding:22px;background:white;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}.guide small{color:var(--blue)}.guide strong{display:block;margin:8px 0}details{border-top:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-weight:650}.callout{background:#e9eeff;padding:24px;border-radius:10px}footer{font-size:13px;color:var(--muted);border-top:1px solid var(--line)}table{border-collapse:collapse;width:100%;margin:18px 0}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}th{background:#edf1f7}button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:4px}@media(max-width:800px){header,main,footer{padding:18px}.workspace{grid-template-columns:1fr}.summary{position:static}.guides{grid-template-columns:1fr}.grid.three{grid-template-columns:1fr 1fr}.ingredient{grid-template-columns:repeat(3,minmax(0,1fr))}.ingredient label:first-child{grid-column:span 2}.ingredient .remove{justify-self:end}.price{font-size:44px}nav{gap:12px}}@media print{header nav,.actions,.remove,#add,.callout{display:none}.workspace{display:block}.panel,.summary{break-inside:avoid;background:white;color:black;border:1px solid #999}.summary .hint,.result-label{color:#444}.price{font-size:32px}input{border:0}.guides,footer{display:none}}