/* Pista and Mesa share features; identity is a local presentation preference. */
:root[data-identity=mesa]{--page:#f7f1e5;--surface:#fffaf0;--ink:#403a2d;--muted:#756a57;--line:#ded3bf;--soft:#eee4d2;--accent:#80503b;--lime:#a9bd85;color-scheme:light}
:root[data-identity=pista]{--page:#171c19;--surface:#202722;--ink:#f4f6eb;--muted:#abb5a8;--line:#3c463b;--soft:#2e382e;--accent:#d6f36b;--lime:#d6f36b;color-scheme:dark}
:root[data-identity=mesa][data-theme=dark]{--page:#251f19;--surface:#30291f;--ink:#f8eedb;--muted:#c1b299;--line:#554737;--soft:#443728;--accent:#dca383;--lime:#b4c698;color-scheme:dark}
body{background:var(--page);color:var(--ink)}main{display:flex;flex-direction:column;max-width:880px;padding-bottom:calc(120px + env(safe-area-inset-bottom))}main>*{order:10}main>header{order:1}main>.view-tabs{order:2}main>.toolbar{order:3}main>.identity-intro{order:4}main>.summary{order:5}main>.nutrition-panel{order:6}main>.meals-heading{order:7}main>.search-label{order:8}main>#meals{order:9}main>.history{order:12}main>footer{order:13}main>.register-dock{order:20}
.identity-intro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 0 26px}.identity-intro p{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted);margin:0 0 15px}.identity-intro h1{margin:0;font-size:clamp(36px,6vw,64px);line-height:1.03;letter-spacing:-2px}.mesa-plate{width:38%;max-width:220px;height:auto}body[data-view=history] .identity-intro{display:none}
button,.photo,.import{background:var(--accent);color:var(--page);box-shadow:none}.quiet,.secondary,.photo,.import{background:var(--soft);color:var(--ink)}button:hover{filter:brightness(1.08)}header{border-color:var(--line)}.brand{color:var(--ink)}.badge{background:transparent}.view-tabs{border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:0}.view-tabs button{border-radius:0}.view-tabs .active{box-shadow:none;background:transparent;border-bottom:3px solid var(--accent);color:var(--ink)}.summary{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}.summary p,.summary .eyebrow,.macros div{color:var(--muted)}.summary .macros span{color:var(--ink)}.macros{border-color:var(--line)}.ring{border-color:var(--accent);background:none;color:var(--ink)}progress{accent-color:var(--accent)}.summary progress::-webkit-progress-value{background:var(--accent)}.summary progress::-webkit-progress-bar{background:var(--soft)}.summary progress::-moz-progress-bar{background:var(--accent)}.nutrition-panel,.macro-goal,.meal,.empty{background:var(--surface);color:var(--ink);box-shadow:none;border-color:var(--line)}.macro-goal h3,.macro-goal small,.hint,.meal p,.meal small,footer{color:var(--muted)}.macro-goal strong{color:var(--ink)}.insight{background:var(--soft);color:var(--ink)}.nutrition-panel{padding:20px;margin-top:24px}.food-library,.quick-section{border-top:1px solid var(--line);padding-top:20px}.register-dock{background:var(--page)}#add{background:var(--accent);color:var(--page)}.history-row progress{accent-color:var(--accent)}:focus-visible{outline-color:var(--accent)}#notice{background:var(--ink);color:var(--page)}dialog{box-shadow:0 16px 70px #0005}.history-row,.meal,.empty{border-color:var(--line)}
/* Pista: a training dashboard, sharp edges and a fuel gauge. */
[data-identity=pista] body{font-family:Arial,sans-serif}[data-identity=pista] .brand{font-weight:900;font-style:italic;letter-spacing:-1px}[data-identity=pista] .identity-intro h1{font-family:Bahnschrift,'Arial Narrow',Arial,sans-serif;font-weight:900;font-size:clamp(52px,10vw,86px);letter-spacing:-3px;line-height:.94}[data-identity=pista] .mesa-plate{display:none}[data-identity=pista] button,[data-identity=pista] .photo,[data-identity=pista] .import,[data-identity=pista] input,[data-identity=pista] select,[data-identity=pista] textarea{border-radius:2px}[data-identity=pista] .summary{border-radius:0;padding:24px;grid-template-columns:1fr auto;border-top:3px solid var(--accent)}[data-identity=pista] .summary h2{font-size:clamp(48px,8vw,72px);font-weight:900}[data-identity=pista] .ring{border:0;border-left:1px solid var(--line);border-radius:0;width:100px;height:80px}[data-identity=pista] .ring span{color:var(--accent);font-size:28px}[data-identity=pista] .summary>progress{height:16px;border-radius:0}[data-identity=pista] .summary .macros{padding-top:16px;border-top:1px solid var(--line)}[data-identity=pista] .macros span{font-size:26px;font-weight:800}[data-identity=pista] .macros div{background:none;border:0;padding:0;border-radius:0}[data-identity=pista] .nutrition-panel,[data-identity=pista] .macro-goal,[data-identity=pista] .meal,[data-identity=pista] .empty,[data-identity=pista] .insight{border-radius:0}[data-identity=pista] .macro-goal{border-width:0 0 0 2px;padding:12px}[data-identity=pista] .nutrition-panel{background:transparent;padding:0;border:0}[data-identity=pista] .meal{background:transparent;border-width:0 0 1px;padding:18px 0}[data-identity=pista] .meal .actions button{border:1px solid var(--line)}[data-identity=pista] .section-head h2,[data-identity=pista] .food-library>h2,[data-identity=pista] .quick-section>h2{text-transform:uppercase;font-size:17px;letter-spacing:.5px}[data-identity=pista] dialog{border-radius:4px}[data-identity=pista] .register-dock button{font-weight:900;letter-spacing:1px;text-transform:uppercase}
/* Mesa: food journal, illustrated header and recipe-first library. */
[data-identity=mesa] .brand,[data-identity=mesa] .identity-intro h1{font-family:Georgia,serif;font-weight:400}[data-identity=mesa] .identity-intro h1 em{color:var(--accent)}[data-identity=mesa] .summary{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:24px 0}[data-identity=mesa] .summary h2{font-family:Georgia,serif;font-weight:400}[data-identity=mesa] .ring{border:0;border-radius:0;width:90px;height:85px}[data-identity=mesa] .ring span{color:var(--accent)}[data-identity=mesa] .macros div{border:0;background:none;padding:0;border-radius:0}[data-identity=mesa] .macros span{font-family:Georgia,serif;font-weight:400}[data-identity=mesa] .nutrition-panel{order:11;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0;background:transparent}[data-identity=mesa] .macro-goal{border:0;background:transparent;padding:12px 0}[data-identity=mesa] .food-library{order:10}[data-identity=mesa] .meal{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:18px 0}[data-identity=mesa] .section-head h2,[data-identity=mesa] .food-library>h2,[data-identity=mesa] .quick-section>h2{font-family:Georgia,serif;font-weight:400;font-size:24px}[data-identity=mesa] button{border-radius:22px}[data-identity=mesa] .register-dock button{border-radius:28px}[data-identity=mesa] .view-tabs button{border-radius:0}[data-identity=mesa] .meal .actions strong{color:var(--accent)}
.identity-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.identity-options button{display:flex;flex-direction:column;text-align:left;gap:16px;min-height:235px;padding:22px;border:1px solid;border-radius:0}.identity-options .choice-kicker{font-size:10px;letter-spacing:1px}.identity-options strong{font-size:32px;letter-spacing:-1px}.identity-options span{font-size:13px;line-height:1.5}.identity-options .choice-action{margin-top:auto;font-weight:700}.identity-options .identity-pista{background:#171c19;color:#eff5e5;border-color:#3c463b}.identity-pista strong,.identity-pista .choice-action{color:#d6f36b}.identity-options .identity-mesa{background:#f7f1e5;color:#403a2d;border-color:#ded3bf}.identity-mesa strong{font-family:Georgia,serif;font-weight:400;color:#80503b}#identity-choice{max-width:580px;width:min(94vw,580px)}
.summary .animated-track{background:var(--soft);grid-column:1/-1}.summary .animated-fill{background:var(--accent)}[data-identity=pista] .summary .animated-track{height:16px;border-radius:0}[data-identity=pista] .summary .animated-fill{border-radius:0;background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 11px)}.food-library{border-radius:0;border-color:var(--line);box-shadow:none}.surface-lit{background-image:radial-gradient(160px circle at var(--light-x) var(--light-y),color-mix(in srgb,var(--accent) 12%,transparent),transparent 75%)}
.summary h2,.summary h2 small{color:var(--ink)}.summary .ring{box-shadow:none}.view-tabs{box-shadow:none;border-top:0;border-left:0;border-right:0}input:focus,textarea:focus,select:focus{border-color:var(--accent)}
.brand{display:inline-flex;align-items:center;gap:9px}.brand-mark{width:34px;height:34px;flex-shrink:0;color:var(--accent)}[data-identity=pista] .brand{font-style:normal}.brand-mark path{transform-origin:center}@media(prefers-reduced-motion:no-preference){.brand-mark{animation:mark-arrive .6s cubic-bezier(.16,1,.3,1)}@keyframes mark-arrive{from{opacity:0;transform:scale(.8) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}}
.animated-track{position:relative;overflow:hidden;isolation:isolate}.animated-fill{position:relative;overflow:hidden}.animated-fill::after,.animated-track::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}.animated-fill::after{background:linear-gradient(105deg,transparent 20%,#ffffff55 48%,transparent 75%)}.animated-track::after{background:linear-gradient(105deg,transparent 35%,#ffffff18 50%,transparent 65%)}
[data-identity=mesa] .identity-intro{justify-content:center;padding:4px 0 14px}[data-identity=mesa] .identity-intro>div{display:none}[data-identity=mesa] .mesa-plate{width:220px;max-width:70%;height:auto;overflow:visible;animation:none}.food-salad,.food-protein,.food-grain,.food-tomato{transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){[data-identity=mesa] .food-salad{animation:salad-float 5.4s ease-in-out infinite}[data-identity=mesa] .food-protein{animation:protein-float 6.2s ease-in-out infinite}[data-identity=mesa] .food-grain{animation:grain-float 5.8s ease-in-out infinite}[data-identity=mesa] .food-tomato{animation:tomato-float 4.8s ease-in-out infinite}@keyframes salad-float{0%,100%{transform:translate(0,-3px) rotate(-1deg)}50%{transform:translate(-2px,-13px) rotate(2deg)}}@keyframes protein-float{0%,100%{transform:translate(0,-10px) rotate(1deg)}50%{transform:translate(2px,-2px) rotate(-2deg)}}@keyframes grain-float{0%,100%{transform:translate(0,-2px)}50%{transform:translate(1px,-11px)}}@keyframes tomato-float{0%,100%{transform:translate(0,-11px)}50%{transform:translate(-2px,-3px)}}}
@media(prefers-reduced-motion:no-preference){.animated-fill::after{opacity:1;animation:bar-sheen 4.5s ease-in-out infinite}.animated-track::after{opacity:1;animation:bar-sheen 6s ease-in-out infinite}.macro-goal:nth-child(2) .animated-fill::after{animation-delay:1s}.macro-goal:nth-child(3) .animated-fill::after{animation-delay:2s}.mesa-plate{animation:plate-arrive .7s ease-out,plate-breathe 7s ease-in-out .7s infinite}.brand-mark path:last-child{animation:leaf-breathe 6s ease-in-out 1s infinite}@keyframes bar-sheen{0%,15%{transform:translateX(-120%)}65%,100%{transform:translateX(120%)}}@keyframes plate-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(1deg)}}@keyframes leaf-breathe{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}}
@media(prefers-reduced-motion:no-preference){body,.summary,.nutrition-panel,.view-tabs,dialog,input,select,textarea{transition:background-color .28s ease,color .28s ease,border-color .28s ease}.identity-options button{transition:transform .2s ease,box-shadow .2s ease}.identity-options button:hover{transform:translateY(-3px);box-shadow:0 8px 16px #0002}.view-tabs button{transition:border-color .25s ease,color .25s ease}.mesa-plate{animation:plate-arrive .7s cubic-bezier(.16,1,.3,1)}@keyframes plate-arrive{from{opacity:0;transform:translateY(12px) rotate(-8deg)}to{opacity:1;transform:translateY(0) rotate(0)}}}
@media(max-width:600px){main{padding:20px 20px calc(125px + env(safe-area-inset-bottom))}.identity-intro{padding:22px 0}.identity-intro h1{font-size:36px;letter-spacing:-1.5px}.mesa-plate{width:39%}.register-dock{border-top:1px solid var(--line);box-shadow:none;padding:12px 20px calc(12px + env(safe-area-inset-bottom))}.summary .macros{gap:8px}.summary .macros div{font-size:11px}.summary .macros span{font-size:23px}.macro-goals{gap:10px}.macro-goal h3{font-size:11px}.macro-goal strong{font-size:18px}.toolbar input{min-width:0}.identity-options{gap:10px}.identity-options button{padding:16px;min-height:225px}#identity-choice{width:100%;max-width:none}.meal .actions{min-width:105px;max-width:125px}header .brand{font-size:21px}header button{font-size:12px;padding:12px}.badge{display:none}}
@media(max-width:340px){.identity-options{grid-template-columns:1fr}.identity-options button{min-height:180px}.fields{grid-template-columns:1fr}.identity-intro h1{font-size:30px}.macro-goals{grid-template-columns:1fr}}
@media(max-width:360px){.toolbar{flex-wrap:wrap}.toolbar label{flex:1;min-width:130px}.toolbar input{width:100%;max-width:none}.toolbar #today,.toolbar #settings{flex:1}.toolbar #settings{margin-left:auto}[data-identity=pista] .identity-intro h1{font-size:46px}}
@media(prefers-reduced-motion:no-preference){.identity-intro{animation:identity-arrive .4s ease-out}@keyframes identity-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}
/* Flujo: same segment geometry on the inactive rail and moving fill. */
@font-face{font-family:Outfit;font-style:normal;font-weight:400 800;font-display:swap;src:url('/font-demos/fonts/font-4.woff2') format('woff2')}
[data-identity=pista] body{font-family:Outfit,Arial,sans-serif}
[data-identity=pista] .brand{font-weight:800;font-style:normal}
[data-identity=pista] .summary h2{font-weight:800}
[data-identity=pista] .identity-intro{display:none}
.register-dock button{box-shadow:none}
[data-identity=pista] .animated-track{--flow-color:var(--accent);--flow-surface:var(--page);border-radius:0;background:transparent}
[data-identity=pista] .summary .animated-track{--flow-surface:var(--surface)}
[data-identity=pista] .animated-track[data-zone=near]{--flow-color:#e6a126}[data-identity=pista] .animated-track[data-zone=reached]{--flow-color:#0eb38a}[data-identity=pista] .animated-track[data-zone=over]{--flow-color:#ea6c62}
[data-identity=pista] .animated-track[data-zone] .animated-fill{background:var(--flow-surface);border-radius:0;box-shadow:none;z-index:1;clip-path:polygon(var(--flow-slant) 0,100% 0,calc(100% - var(--flow-slant)) 100%,0 100%)}
[data-identity=pista] .animated-track{clip-path:polygon(var(--flow-slant) 0,100% 0,calc(100% - var(--flow-slant)) 100%,0 100%)}
.flow-rail,.flow-color{display:none;position:absolute;left:0;top:0;max-width:none;pointer-events:none}[data-identity=pista] .flow-rail,[data-identity=pista] .flow-color{display:block}.flow-rail{fill:var(--line)}.flow-color{fill:var(--flow-color)}
[data-identity=pista] .animated-track::after,[data-identity=pista] .animated-track .animated-fill::after{display:none}
[data-identity=pista] .flow-segments{animation:nutri-flow-right 2.5s linear infinite}
@keyframes nutri-flow-right{from{transform:translateX(-48px)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.flow-segments{animation:none}}
/* Selected demo 4: Panel. Existing controls retain their IDs and handlers. */
.header-actions{display:flex;align-items:center;gap:4px}.control-icon{display:none}.navigation-panel{display:none;order:2}
[data-identity=pista] main>header{padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:0}
[data-identity=pista] .navigation-panel{display:flex;flex-direction:column;border:1px solid var(--line);margin:17px 0 22px;padding:5px 13px}
[data-identity=pista] .navigation-panel .toolbar{order:1;display:flex;flex-wrap:nowrap;justify-content:center;gap:4px;margin:0;padding:4px 0 8px;border-bottom:1px solid var(--line)}
[data-identity=pista] .navigation-panel .view-tabs{order:2;margin:0;border:0;padding:5px 0;display:flex;background:none}
[data-identity=pista] .view-tabs button{flex:1;background:none;color:var(--muted);font-size:12px;padding:12px 0;border-bottom:2px solid transparent}
[data-identity=pista] .view-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
[data-identity=pista] .toolbar label{font-size:0;flex:1;justify-content:center;min-width:0}
[data-identity=pista] .toolbar input{font-family:inherit;font-size:14px;background:none;border:0;width:145px;padding:8px 3px;color:var(--ink)}
[data-identity=pista] .toolbar button{background:none;color:var(--muted);padding:8px;min-width:32px}
[data-identity=pista] #today{font-size:11px;min-width:34px}
[data-identity=pista] .header-actions button{background:none;width:40px;height:40px;display:grid;place-items:center;padding:9px}
[data-identity=pista] .control-label,[data-identity=pista] #connection{display:none}
[data-identity=pista] .control-icon{display:block;width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Selected Mesa demo 7: Tinta, a shared moving contour for both progress segments. */
.tinta-canvas{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
[data-identity=mesa] .tinta-canvas{display:block}
[data-identity=mesa] .animated-track,[data-identity=mesa] .summary .animated-track{height:20px;background:transparent;overflow:visible;border-radius:0}
[data-identity=mesa] .animated-track .animated-fill{visibility:hidden;box-shadow:none}
[data-identity=mesa] .animated-track::after{display:none}
/* Mesa theme selected by the user: Mercado. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/font-demos/fonts/font-6.woff2') format('woff2')}
:root[data-identity=mesa]{--page:#f9f0e5;--surface:#fff7ed;--ink:#462d24;--muted:#977665;--line:#e6c7b2;--soft:#f0ddcd;--accent:#c66b47;--lime:#96aa76}
:root[data-identity=mesa][data-theme=dark]{--page:#2d211c;--surface:#382a23;--ink:#f8e9db;--muted:#c2a592;--line:#6b4c3b;--soft:#493228;--accent:#df9774;--lime:#afbe8c}
[data-identity=mesa] body{font-family:'Space Grotesk',Arial,sans-serif}
[data-identity=mesa] .brand,[data-identity=mesa] .summary h2,[data-identity=mesa] .macros span,[data-identity=mesa] .section-head h2,[data-identity=mesa] .food-library>h2,[data-identity=mesa] .quick-section>h2{font-family:'Space Grotesk',Arial,sans-serif}
[data-identity=mesa] .brand{font-size:24px;font-weight:700;letter-spacing:-.8px}
[data-identity=mesa] main>header{padding-bottom:15px;border-bottom:3px solid var(--accent);margin-bottom:0}
[data-identity=mesa] .header-actions button{background:none;width:40px;height:40px;display:grid;place-items:center;padding:9px}
[data-identity=mesa] .control-label,[data-identity=mesa] #connection{display:none}
[data-identity=mesa] .control-icon{display:block;width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[data-identity=mesa] .navigation-panel{display:flex;flex-direction:column;margin:20px 0 12px}
[data-identity=mesa] .navigation-panel .toolbar{order:1;display:flex;flex-wrap:nowrap;justify-content:center;gap:4px;margin:0;padding-bottom:8px}
[data-identity=mesa] .toolbar label{font-size:0;flex:1;min-width:0;justify-content:center}
[data-identity=mesa] .toolbar input{font-family:inherit;font-size:13px;background:none;border:0;width:145px;padding:8px 3px;color:var(--ink)}
[data-identity=mesa] .toolbar button{background:none;color:var(--muted);padding:8px;min-width:32px}
[data-identity=mesa] #today{font-size:11px}
[data-identity=mesa] .navigation-panel .view-tabs{order:2;display:flex;gap:0;border:1px solid var(--accent);margin:0;padding:0}
[data-identity=mesa] .view-tabs button{flex:1;background:none;border:0;border-radius:0;padding:12px;font:500 12px 'Space Grotesk',sans-serif;color:var(--ink)}
[data-identity=mesa] .view-tabs button.active{background:var(--accent);color:var(--page);border:0}
[data-identity=mesa] .identity-intro{padding:6px 0 18px}
[data-identity=mesa] .mesa-plate{width:110px;max-width:45%}
[data-identity=mesa] .summary{padding:22px 0}
[data-identity=mesa] .summary h2{font-weight:500;font-size:clamp(40px,7vw,56px)}
[data-identity=mesa] .macros span{font-weight:500}
[data-identity=mesa] button,[data-identity=mesa] .register-dock button,[data-identity=mesa] .photo,[data-identity=mesa] .import{border-radius:3px;font-family:inherit}
[data-identity=mesa] input,[data-identity=mesa] select,[data-identity=mesa] textarea{font-family:inherit;border-radius:5px}
[data-identity=mesa] .section-head h2,[data-identity=mesa] .food-library>h2,[data-identity=mesa] .quick-section>h2{font-size:21px;font-weight:500}