:root{--app-gap:0;--app-grid:"title info" var(--header-size) "values values" "results results" "graph graph" 1fr ". ." var(--header-size) /1fr var(--button-size);--app-max-inline-size:24em;--button-size:2.75em;--gap:1em;--header-size:3em;--input-size:2em;--label-size:4em;--outline-size:2px;--body-background:var(--fill-0);@media (min-width:24em){&{--app-border:var(--border);--app-border-radius:1.5em;--app-margin:var(--gap);--app-min-block-size:none;--body-background:var(--fill-1)}}@media (orientation:landscape){&{--app-gap:0 var(--gap);--app-grid:"title info" var(--header-size) "values results" "values graph" ". ." var(--gap) /1fr 1fr;--app-margin:var(--gap);--app-max-inline-size:48em;--app-place-self:center;--dialog-block-size:100%;--dialog-offset:100%;--results-margin-gap:0 .5em}}}:root{--copy-font-size:.875em;--font:clamp(1em,.75em + 1vw,1.25em) /1.4 var(--font-family);--font-family:"Avenir Variable",sans-serif;--h1-font-size:1.125em;--h2-font-size:1em;--h3-font-size:.875em;--transition:.3s;--transition-slow:.5s;--brand-red:#b22222;--brand-orange:#ff7a00;--gray1:#8e8e93;--gray1-dark:#8e8e93;--gray2:#aeaeb2;--gray2-dark:#636366;--gray3:#c7c7cc;--gray3-dark:#48484a;--gray4:#d1d1d6;--gray4-dark:#3a3a3c;--gray5:#e5e5ea;--gray5-dark:#2c2c2e;--gray6:#f2f2f7;--gray6-dark:#1c1c1e;--red:#ff383c;--red-dark:#ff4245;--red-contrast:#e9152d;--red-dark-contrast:#ff6165;--blue:#08f;--blue-dark:#0091ff;--blue-contrast:#1e6ef4;--blue-dark-contrast:#5cb8ff;--indigo:#6155f5;--indigo-dark:#6d7cff;--indigo-contrast:#564ade;--indigo-dark-contrast:#a7aaff;--fill-0:#fff;--fill-1:var(--gray6);--fill-2:var(--gray5);--fill-3:var(--gray4);--fill-4:var(--gray3);--app-background:var(--fill-0);--border:1px solid var(--fill-2);--border-color-focus:var(--indigo);--button-background:var(--fill-1);--button-background-focus:var(--fill-2);--button-border:var(--outline-size) solid var(--button-background);--button-border-focus:var(--outline-size) solid var(--button-background-focus);--input-background:var(--fill-1);--input-border:var(--outline-size) solid var(--app-background);--markers-background:var(--fill-1);--markers-border:var(--outline-size) solid var(--app-background);--marker-background:var(--fill-0);--link-color:var(--blue-contrast);--link-color-focus:var(--red);--link-color-visited:var(--indigo-contrast);--text-color:var(--gray5-dark);--text-color-secondary:var(--gray2-dark);--warning-background:#f6eaec;--warning-color:#ca2430;--zig-zag-background:var(--fill-1)}@media (prefers-color-scheme:dark){:root{--fill-0:#000;--fill-1:var(--gray6-dark);--fill-2:var(--gray5-dark);--fill-3:var(--gray4-dark);--fill-4:var(--gray3-dark);--fill-5:var(--gray2-dark);--app-background:var(--fill-1);--body-background:var(--fill-0);--border-color-focus:var(--indigo-dark-contrast);--button-background:var(--fill-4);--button-background-focus:var(--fill-5);--input-background:var(--fill-4);--markers-background:var(--fill-2);--marker-background:var(--fill-4);--link-color:var(--blue-dark-contrast);--link-color-focus:var(--red-dark-contrast);--link-color-visited:var(--indigo-dark-contrast);--text-color:var(--gray5);--text-color-secondary:var(--gray2);--warning-background:#40272e;--warning-color:#fe7f8c;--zig-zag-background:var(--fill-3)}}@media (prefers-color-scheme:dark) and (min-width:24em){:root{--body-background:var(--fill-0)}}@font-face{font-display:swap;font-family:Avenir Variable;font-weight:1 999;src:url(66174a725297be00e180.woff2) format("woff2")}:where(*){box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;touch-action:manipulation}body{background-color:var(--body-background);color:var(--text-color);display:grid;font:var(--font);font-variation-settings:"wght" 500;margin:0;min-block-size:100dvh;padding-block:env(safe-area-inset-top) env(safe-area-inset-bottom);padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);place-items:center;scrollbar-width:none;&::-webkit-scrollbar{display:none}}:not(:defined){display:none}noscript{padding:1.5em;place-self:center;text-align:center}a{color:var(--link-color);outline:none;text-decoration:none;&:visited{color:var(--link-color-visited)}&:active,&:focus-visible{color:var(--link-color-focus)}@media (any-hover:hover){&{transition:color var(--transition)}&:hover{color:var(--link-color-focus)}}}button,input{appearance:none;background:none;border:0;margin:0;outline:none;padding:0;user-select:auto}input[type=radio]{block-size:0;inline-size:0}input[type=text]{font-family:Avenir Variable,sans-serif;font-variation-settings:"wght" 500;&:focus-visible{border-color:var(--border-color-focus)}&:invalid{color:var(--warning-color)}}svg{block-size:auto;inline-size:100%;pointer-events:none;vertical-align:middle}svg path{fill:currentColor}calories-app{background-color:var(--app-background);border:var(--app-border);border-radius:var(--app-border-radius,0);display:grid;gap:var(--app-gap,var(--gap));grid:var(--app-grid);margin:var(--app-margin);max-inline-size:var(--app-max-inline-size);min-block-size:var(--app-min-block-size,100dvh);overflow:hidden;padding-block:0;padding-inline:var(--gap);place-self:var(--app-place-self,start center);position:relative;@media (orientation:portrait){&:has(dialog[open]){block-size:100dvh}}h1{font-size:var(--h1-font-size);grid-area:title;line-height:1;margin-block:0;place-self:center start;white-space:nowrap}&>calories-ticker{background:-webkit-linear-gradient(var(--brand-orange),var(--brand-red));background-clip:text;-webkit-background-clip:text;font-size:400%;grid-area:results;inline-size:100%;line-height:1;margin-block:var(--results-margin-gap,.75em);padding-block:0 1.5rem;place-self:center;position:relative;text-align:center;-webkit-text-fill-color:transparent;@media (orientation:landscape){&[hidden]{display:block}}}&>calories-ticker:after{background:inherit;content:attr(label);display:block;font-size:1rem;inline-size:100%;inset-block:auto 0;line-height:normal;position:absolute;text-transform:lowercase;white-space:nowrap}}calories-info{display:contents;button{aspect-ratio:1;border:2px solid var(--app-background);border-radius:var(--button-size);color:inherit;cursor:pointer;grid-area:info;inline-size:var(--button-size);inset-inline:auto -.75em;place-self:center end;position:relative;transition:opacity var(--transition),transform var(--transition);z-index:3;&[data-type=closer]{background-color:var(--button-background);border-color:var(--button-background)}[hidden]>&{opacity:0}&:focus-visible{border-color:var(--border-color-focus)}&.touch{transform:scale(.8)}@media (any-hover:hover){&{transition:border var(--transition),background-color var(--transition),opacity var(--transition-slow) ease-out,transform var(--transition)}&:hover{background-color:var(--button-background-focus);border-color:var(--button-background-focus)}&:active{transform:scale(.8)}}}dialog{background-color:var(--app-background);block-size:100%;border:none;color:inherit;display:block;inline-size:100%;max-block-size:100dvh;outline:none;overflow:auto;padding:0;scrollbar-width:none;transition:transform var(--transition);z-index:2;&::-webkit-scrollbar{display:none}&[inert]{transform:translateY(100%)}&:not([open]){block-size:0}}article{margin-inline:auto;max-inline-size:48ch;padding-block:1em;padding-inline:var(--gap)}h1{font-size:var(--h1-font-size);grid-area:1/2;margin-block:0 1em}:is(h2,h3){font-variation-settings:"wght" 600;margin-block:1em .5em}h2{font-size:var(--h2-font-size)}h3{font-size:var(--h3-font-size)}:is(p,table){font-size:var(--copy-font-size)}table{border-collapse:collapse;inline-size:100%}tr{border-bottom:1px solid var(--gray2)}th{text-align:start}:is(th,td){padding-block:.5em}:is(th,td):not(:first-child){text-align:end}}.icon{inline-size:1.5rem;pointer-events:none;path{stroke-linecap:round;stroke-width:2}}.icon--close{path{stroke:var(--text-color)}}.icon--info{border:2px solid var(--text-color);border-radius:var(--button-size);path{fill:none;stroke:currentColor}}calories-marker{align-items:center;background-color:var(--markers-background);border:var(--markers-border);border-radius:8px;display:flex;padding:4px;position:relative;z-index:1;&:focus-within{border-color:var(--border-color-focus)}label{flex:1}span{block-size:var(--input-size)}&:after{background-color:var(--marker-background);block-size:var(--block-size);border-radius:4px;box-shadow:0 0 4px rgba(0,0,0,.1);content:"";display:block;inline-size:var(--inline-size);left:var(--inset-block-start);position:absolute;top:4px;transition:left var(--transition) ease-out,inline-size var(--transition) ease-out;z-index:-1}}calories-ticker{display:block;transition:opacity var(--transition);&[hidden]{display:none;opacity:0}}calories-values{--toggle-size:1.5rem;display:block;grid-area:values;place-self:end stretch;[disabled]{opacity:.3;pointer-events:none}form{display:flex;flex-flow:column;gap:.75em}fieldset{border:0;opacity:1;padding:0;transition:opacity var(--transition)}h2{display:flex;font-size:1em;margin-block:.5em}h2>span{color:var(--text-color-secondary);margin-inline:auto 0}:is(ul,li){align-items:center;display:flex;padding:0}ul{margin:0}[id=units]{background-color:var(--button-background);block-size:var(--input-size);border:var(--button-border);border-radius:var(--input-size);color:inherit;cursor:pointer;display:block;font:var(--font);font-size:.9em;font-variation-settings:"wght" 500;inline-size:5em;inset-block:calc(50% - var(--input-size)/2) auto;inset-inline:auto 0;padding-inline:.75em;position:absolute;transition:background-color var(--transition),border-color var(--transition),transform var(--transition);white-space:nowrap;span{pointer-events:none}&:focus-visible{border-color:var(--border-color-focus)}&.touch{transform:scale(.8)}@media (any-hover:hover){&:hover{background-color:var(--button-background-focus);border:var(--button-border-focus);span{opacity:1}}&:active{transform:scale(.8)}}}[id=measurements]{position:relative}[id=measurements] ul{flex-wrap:wrap;gap:.75rem}:where(.age,.height,.weight){flex:0 0 100%}label{cursor:pointer;display:flex;outline:none}label:where([for=age],[for=height],[for=weight]){inline-size:var(--label-size)}[type=text]{background-color:var(--input-background);block-size:var(--input-size);border:var(--input-border);border-radius:6px;box-sizing:content-box;color:var(--text-color);font-size:1em;inline-size:3.5rem;padding-inline:.5rem;text-align:end}.units{color:var(--text-color-secondary);margin-inline:.5em;pointer-events:none}[type=radio]+span{align-items:center;border-radius:2px;display:flex;inline-size:100%;justify-content:center;pointer-events:none;transition:color var(--transition)}[type=radio]:not(:checked)+span{color:var(--text-color-secondary)}label:focus-visible>[type=radio]+span{color:var(--text-color)}@media (any-hover:hover){label:hover>[type=radio]+span{color:var(--text-color)}}}calories-zigzag{grid-area:graph;place-self:end stretch;transition:opacity var(--transition) ease-out;&[hidden]{opacity:0;@media (orientation:landscape){display:block}}ol{display:grid;gap:.5em;grid:auto-flow/1fr;margin:0;padding:0}li{background-color:var(--zig-zag-background);border-radius:0 4px 4px 0;display:flex;gap:0 .5em;padding:.375em .5em;transition:background var(--transition),color var(--transition),inline-size var(--transition-slow) ease-out}span{color:var(--text-color-secondary);flex:1;transition:color var(--transition-slow) ease-out}.warning{background-color:var(--warning-background);color:var(--warning-color)}}