/* Citrus / mellow lemon and lime. No image filtering, no reset of user theme preference. */

:root{--paper:#f7f7e9;--card:#fffef2;--ink:#27321f;--muted:#657055;--line:#dce2c7;--accent:#5c7425;--soft:#edf0d5;--field:#fffff8;--focus:#6b801f;--success:#4b703a;--danger:#9a4d37;--danger-line:#ca9d87;--on-accent:#fffff0;--accent-soft:#e2e8b9;--accent-line:#c2cd89;--lemon-fill:#e4df78;--lemon-leaf:#7b913e;--shadow:rgba(48,65,21,.08)}

:root[data-theme=dark]{--paper:#151d15;--card:#202b1d;--ink:#eff1df;--muted:#b1bba0;--line:#3e4e33;--accent:#c8d886;--soft:#2d3a23;--field:#192416;--focus:#d8df8a;--success:#afd09a;--danger:#efb49f;--danger-line:#966a53;--on-accent:#1d2c17;--accent-soft:#394b27;--accent-line:#667c3d;--lemon-fill:#cbd773;--lemon-leaf:#8da857;--shadow:rgba(0,0,0,.22)}

.c-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.c-sticky-link[aria-selected=true]{background:var(--accent-soft);color:var(--ink);border-color:var(--accent-line)}.citrus-mark{width:37px;height:37px;display:inline-flex;align-items:center;color:var(--accent)}.citrus-mark svg{display:block;width:37px;height:37px}.footer-lemon svg{width:20px;height:20px;vertical-align:middle;margin-right:7px;color:var(--accent)}.c-icon svg{width:21px;height:21px;display:block;margin:auto}.c-state:before{color:var(--accent)}

/* The surface owns chrome. Tabs compact to fixed targets on the left, utilities remain right. */

.c-nav-surface{height:60px;display:flex;align-items:center;gap:12px;padding:7px;border:1px solid var(--line);border-radius:13px;background:var(--card);box-shadow:0 4px 14px var(--shadow)}

.c-sticky-nav{border:0;border-radius:0;box-shadow:none!important;background:transparent;height:44px;padding:0;display:flex;align-items:center;justify-content:flex-start;gap:5px;flex:1;min-width:0;overflow:visible;width:auto}

.c-sticky-link{flex:0 0 auto;min-width:44px;min-height:44px;height:44px;padding:0 16px;gap:8px;flex-direction:row;background:transparent;border:1px solid transparent;font-size:12px}

.c-sticky-link .c-nav-label{max-width:90px;max-height:30px;opacity:1;font-size:12px;white-space:nowrap;line-height:1.2;transition:none}

.is-compact .c-sticky-nav{flex:0 1 auto;width:auto;justify-content:flex-start}.is-compact .c-sticky-link{flex:0 0 44px;width:44px;min-width:44px;padding:0;gap:0}.c-sticky-shell.is-compact .c-nav-label{max-width:0;max-height:0;opacity:0}

.c-nav-utilities{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-left:auto}.c-nav-utilities button{height:44px;min-height:44px;padding:7px 11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--soft);border-color:var(--line);font-size:11px}.c-nav-utilities .c-icon{width:44px;padding:0}.theme-symbol{font-size:18px;line-height:1}.theme-label{font-size:11px}.is-compact .c-nav-surface{box-shadow:0 8px 24px var(--shadow)}

.shell.is-wheel-compact>header,.shell.is-wheel-compact>.compact-hero{display:none}.shell.is-wheel-compact>#stickySentinel{height:0}

/* Compact aligned demo cards replace the former forced height and diagonal offsets. */

.top-demo{min-height:0}.top-demo-actions{padding:20px 24px}.top-demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--stack-gap);margin-top:var(--stack-gap)}.top-demo-grid>.c-card{min-height:180px;margin:0!important;display:flex;flex-direction:column;justify-content:flex-start}.top-demo-grid h3{font-size:16px;margin:10px 0 18px;font-weight:600}.top-demo-grid .nav-illustration{margin-top:auto;height:66px;max-width:none;gap:12px;padding:12px}.top-demo-grid .visual-line{max-width:70px}.top-demo-grid .c-secondary{margin-top:auto;align-self:flex-start}.scroll-number{font-size:10px}.top-demo .c-card-head{margin-bottom:14px}

.display-settings{width:min(460px,calc(100vw - 32px));padding:25px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 90px var(--shadow)}.display-settings::backdrop{background:rgba(10,17,8,.58)}.display-settings .c-card-head h2{font-size:19px;margin:0}.display-settings .c-field{margin-top:20px}.display-theme-options{display:flex;gap:8px}.display-theme-options button{flex:1}.display-theme-options button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line);font-weight:650}.display-settings .micro{line-height:1.8}.gallery-density{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}.gallery-density select{width:auto;min-width:135px;font-size:12px;min-height:40px}.gallery-tools{gap:9px}.gallery-tools>span{font-size:10px}.gallery-density{margin-right:8px}

@media(max-width:1000px){.c-sticky-link{padding-inline:10px}.c-nav-surface{gap:8px}.top-demo-grid{gap:14px}.top-demo-grid>.c-card{padding:18px}}

@media(max-width:700px){.c-nav-surface{padding:7px 5px;gap:7px}.c-sticky-nav,.is-compact .c-sticky-nav{flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:3px;align-items:center}.c-sticky-nav::-webkit-scrollbar{display:none}.c-sticky-link{flex:0 0 48px;width:48px;min-width:48px;padding:2px 2px;flex-direction:column;gap:1px}.c-sticky-link .c-nav-label{max-width:42px;max-height:23px;white-space:normal;font-size:10px;line-height:1.05;text-align:center}.is-compact .c-sticky-link{flex:0 0 44px;width:44px;min-width:44px;padding:0}.c-nav-utilities{gap:4px}.c-nav-utilities button{width:40px;height:44px;min-width:40px;padding:0}.c-nav-utilities .c-icon{width:40px}.theme-label{display:none}.c-nav-utilities .theme-symbol{font-size:19px}.top-demo-grid{grid-template-columns:1fr;gap:14px}.top-demo-grid>.c-card{min-height:145px}.top-demo-actions{padding:18px}.top-demo-actions .c-card-head{flex-wrap:wrap}.display-settings{padding:18px}.gallery-density{width:100%;justify-content:space-between;margin:0}.gallery-density select{min-width:0;flex:1;max-width:210px}.gallery-tools>span{width:100%}}



/* Coordinated geometry transitions, with stable nav slot and persistent focus nodes. */

.shell>header{height:94px;overflow:hidden;opacity:1;visibility:visible;transform:translateY(0);transition:height .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease,transform .28s ease,visibility 0s}

.shell>.compact-hero{max-height:145px;overflow:hidden;opacity:1;visibility:visible;transform:translateY(0);transition:max-height .28s cubic-bezier(.2,.7,.2,1),padding .28s ease,opacity .2s ease,transform .28s ease,visibility 0s}

.shell.is-wheel-compact>header{display:flex;height:0;border-width:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:height .28s cubic-bezier(.2,.7,.2,1),opacity .18s ease,transform .28s ease,visibility 0s .28s}

.shell.is-wheel-compact>.compact-hero{display:block;max-height:0;padding-block:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:max-height .28s cubic-bezier(.2,.7,.2,1),padding .28s ease,opacity .18s ease,transform .28s ease,visibility 0s .28s}

.c-sticky-sentinel{transition:height .28s ease}

.c-sticky-nav [role=tab]{flex:0 0 var(--expanded-tab-width,111px);width:var(--expanded-tab-width,111px);transition:flex-basis .28s cubic-bezier(.2,.7,.2,1),width .28s cubic-bezier(.2,.7,.2,1),padding .28s ease,gap .28s ease}

.c-sticky-shell.is-compact .c-sticky-nav [role=tab]{flex-basis:44px;width:44px;padding:0;gap:0}

.c-sticky-link .c-nav-label{transition:opacity .2s ease,max-width .28s ease,max-height .28s ease}

@media(max-width:700px){.shell>header{height:76px}.c-sticky-link .c-nav-label{transition:opacity .2s ease,max-width .28s ease,max-height .28s ease}}

@media(prefers-reduced-motion:reduce){.shell>header,.shell>.compact-hero,.c-sticky-sentinel,.c-sticky-nav [role=tab],.c-sticky-link .c-nav-label{transition:none!important}}


.theme-symbol svg,.label-icon svg{display:block;width:20px;height:20px}.label-icon{display:inline-flex;vertical-align:middle;margin-right:6px}.nav-illustration [data-inline-icon] svg{width:23px;height:23px;display:block}.big-symbol svg{width:35px;height:35px;display:block}.iv-tools svg{width:20px;height:20px;display:block;margin:auto}

/* Citrus shared navigation motion START */
/* One geometry curve prevents labels shrinking then briefly growing mid-collapse. */
.c-nav-surface{contain:layout style}.shell.is-wheel-compact{overflow-anchor:none}
.c-sticky-nav [role=tab]{transition-timing-function:cubic-bezier(.2,.7,.2,1)}
.c-sticky-link .c-nav-label{flex-shrink:0;max-width:var(--nav-label-width,90px);transition:opacity .2s ease,max-width .28s cubic-bezier(.2,.7,.2,1),max-height .28s cubic-bezier(.2,.7,.2,1)}
.c-sticky-shell.is-compact .c-nav-label{max-width:0}
@media(max-width:700px){.c-sticky-link .c-nav-label{max-width:min(44px,var(--nav-label-width,44px))}.c-sticky-shell.is-compact .c-nav-label{max-width:0}}
/* Citrus shared navigation motion END */