/* 血脂代謝 3D：layout on top of heart-anatomy/heart.css */
.lipid-app #viewport{height:clamp(520px,72vh,820px);position:relative;background:radial-gradient(ellipse at 50% 45%,#fffdf9 0%,#f6efe5 75%)}
.lipid-paths{grid-template-columns:1fr 1fr}
.lipid-paths button{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.3}
.lipid-paths button small{font-size:11px;color:#8a7a6c;font-weight:400}
.lipid-paths button.active small{color:inherit;opacity:.85}
.lipid-play{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.lipid-play button{flex:1 1 auto;border:1px solid var(--line);border-radius:8px;background:#fffdfa;color:var(--ink);padding:8px 10px;font:inherit;font-size:13px;cursor:pointer}
.lipid-play button[aria-pressed=true],#playBtn.playing{background:var(--sage);color:#fff;border-color:var(--sage)}
.lipid-play button:disabled{opacity:.45;cursor:default}
.lipid-steps{margin:0;padding-left:22px;display:grid;gap:4px;font-size:13px;line-height:1.5}
.lipid-steps li{cursor:pointer;padding:3px 6px;border-radius:6px;color:var(--muted)}
.lipid-steps li:hover{background:#f3ece2}
.lipid-steps li.done{color:var(--ink)}
.lipid-steps li.current{background:#e9efe9;color:#2f4a3a;font-weight:700}
.lipid-particles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.lipid-particles button{border:1px solid var(--line);border-radius:8px;background:#fffdfa;color:var(--ink);padding:7px 4px;font:inherit;font-size:12.5px;cursor:pointer}
.lipid-particles button.active{background:var(--sage);border-color:var(--sage);color:#fff}
.lipid-inspect{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:#fffdf9;overflow:hidden}
.lipid-inspect canvas{display:block;width:100%;height:auto;aspect-ratio:320/220;background:radial-gradient(circle at 50% 45%,#fff 0%,#f3ece2 80%)}
#particleInfo{padding:10px 12px 12px;font-size:13px;line-height:1.6}
#particleInfo h3{margin:0 0 4px;font-size:15px}
#particleInfo dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0}
#particleInfo dt{color:var(--muted)}#particleInfo dd{margin:0}
.comp-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:6px 0 2px;border:1px solid #e3d9cb}
.comp-bar span{display:block;height:100%}
.comp-key{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11.5px;color:var(--muted)}
.comp-key i,.lipid-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.lipid-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);padding:10px 22px}
.lipid-labels{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.lipid-labels span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:12px;line-height:1.3;padding:3px 7px;border-radius:6px;background:rgba(255,253,249,.92);border:1px solid #d8c9b8;color:#5c483c;box-shadow:0 1px 4px #6f514014}
.lipid-labels span.enzyme{background:#eef6ef;border-color:#9cc4a6;color:#2f5a3c;font-weight:600}
.lipid-labels span.enzyme.pulse{background:#3f8f5a;color:#fff;border-color:#3f8f5a}
.lipid-labels span.actor{background:#332f2c;color:#fff;border-color:#332f2c;font-weight:700;font-size:12.5px}
.lipid-caption{margin:10px 22px 0;min-height:86px;background:rgba(255,253,249,.95);border:1px solid #d8c9b8;border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.6;box-shadow:0 4px 14px #584a3618;display:none}
.lipid-caption.show{display:block}
.lipid-caption b{display:block;font-size:15px;margin-bottom:2px;color:#3b2d22}
.lipid-caption small{color:var(--muted)}
.lipid-scale{position:absolute;top:10px;left:12px;z-index:4;font-size:11.5px;color:#8a7a6c;background:rgba(255,253,249,.85);padding:3px 8px;border-radius:6px}
.lipid-lab{margin:6px 22px 18px;border:1px solid var(--line);border-radius:12px;background:#fffdfa;padding:10px 16px}
.lipid-lab summary{cursor:pointer;font-weight:700;font-size:15px}
.lipid-lab ul{margin:10px 0 6px;padding-left:20px;line-height:1.7;font-size:14px}
.lipid-note{margin:6px 0 4px;font-size:13.5px;line-height:1.7;background:#f4f0fb;border-radius:8px;padding:8px 12px;color:#43386e}
@media(max-width:900px){.lipid-app #viewport{height:560px}}
@media(max-width:650px){
.lipid-app #viewport{height:min(640px,80vh)}
.lipid-caption{margin:8px 12px 0;padding:8px 10px;font-size:13px;min-height:0}
.lipid-caption b{font-size:14px}
.lipid-labels span{font-size:11px;padding:2px 5px}
.lipid-legend{padding:8px 12px;font-size:11.5px;gap:4px 10px}
.lipid-lab{margin:6px 12px 14px;padding:8px 12px}
.lipid-lab ul{font-size:13px}
.lipid-scale{font-size:10.5px}
}

.lipid-levels{grid-template-columns:1fr 1fr}.lipid-levels button{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.3}.lipid-levels small{font-size:11px;color:#8a7a6c;font-weight:400}.lipid-levels .active small{color:inherit;opacity:.85}
.lipid-drugs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lipid-drugs button{border:1px solid var(--line);border-radius:8px;background:#fffdfa;color:var(--ink);padding:7px 4px;font:inherit;font-size:13px;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.3}
.lipid-drugs button small{font-size:10.5px;color:#8a7a6c}.lipid-drugs button[aria-pressed=true]{background:#3b6fd0;border-color:#3b6fd0;color:#fff}.lipid-drugs button[aria-pressed=true] small{color:#e6eefc}
.lipid-clear{margin-top:6px;width:100%;border:1px dashed #c9bba9;border-radius:8px;background:transparent;color:var(--muted);padding:6px;font:inherit;font-size:12.5px;cursor:pointer}
.lipid-druginfo{margin-top:10px;font-size:13px;line-height:1.65}.lipid-druginfo h3{font-size:14.5px;margin:10px 0 2px}.lipid-druginfo p{margin:0 0 4px}.lipid-druginfo .eff{color:#2f4a7a;background:#eef3fb;border-radius:6px;padding:4px 8px;margin:4px 0}
.lipid-druginfo .goto{border:1px solid #9cc4a6;background:#eef6ef;color:#2f5a3c;border-radius:8px;padding:5px 10px;font:inherit;font-size:12.5px;cursor:pointer;margin-top:4px}
.lipid-gauges{position:absolute;top:10px;right:12px;z-index:4;width:min(260px,46%);background:rgba(255,253,249,.94);border:1px solid #d8c9b8;border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.35;box-shadow:0 2px 8px #584a3614}
.lipid-gauges .g{margin:4px 0}.lipid-gauges .g div{display:flex;justify-content:space-between;gap:6px}.lipid-gauges .bar{height:7px;border-radius:4px;background:#efe6da;overflow:hidden;margin-top:2px}.lipid-gauges .bar span{display:block;height:100%;border-radius:4px;transition:width .4s}
.lipid-gauges small{display:block;color:var(--muted);font-size:10.5px;margin-top:4px}
.lipid-app.cell-mode .organ-only{display:none}.lipid-app .cell-only[hidden]{display:none}
@media(max-width:650px){.lipid-gauges{width:auto;left:8px;right:8px;top:auto;bottom:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;font-size:11px;padding:6px 8px}.lipid-gauges small{grid-column:1/-1}.lipid-gauges[hidden]{display:none}}

.lipid-zoom{width:100%;margin-top:10px;border:1px solid var(--sage);border-radius:8px;background:#eef3ef;color:#2f4a3a;padding:8px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.lipid-inspect canvas{cursor:zoom-in}
.lipid-modal{position:fixed;inset:0;z-index:1000;background:rgba(40,32,26,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.lipid-modal[hidden]{display:none}
.lipid-modal-box{background:#fffdf9;border-radius:16px;width:min(1040px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:14px 18px 18px}
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.pm-head h3{margin:0;font-size:18px}
#pmClose{border:1px solid var(--line);background:#fff;border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer}
.pm-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.pm-tabs button{border:1px solid var(--line);border-radius:999px;background:#fffdfa;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.pm-tabs button.active{background:var(--sage);border-color:var(--sage);color:#fff}
.pm-body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px}
.pm-view{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#fff 0%,#f1e9de 85%)}
#pmCanvas{display:block;width:100%;height:min(560px,62vh);touch-action:none;cursor:grab}
.pm-labels{position:absolute;inset:0;pointer-events:none}
.pm-labels span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:12.5px;padding:3px 8px;border-radius:6px;background:rgba(255,253,249,.94);border:1px solid #d8c9b8;color:#3b2d22;box-shadow:0 1px 4px #6f514018}
.pm-labels span i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.pm-hint{position:absolute;left:10px;bottom:6px;margin:0;font-size:11.5px;color:var(--muted)}
.pm-layers{display:grid;gap:2px;margin-bottom:8px}
#pmInfo{font-size:13.5px;line-height:1.65}#pmInfo h3{display:none}#pmInfo dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0}#pmInfo dt{color:var(--muted)}#pmInfo dd{margin:0}
@media(max-width:760px){.pm-body{grid-template-columns:1fr}#pmCanvas{height:52vh}.lipid-modal{padding:8px}.lipid-modal-box{padding:10px 12px 14px}.pm-labels span{font-size:11px;padding:2px 6px}}

.pm-labels span{max-width:230px;white-space:normal;text-align:left;line-height:1.3}

@media(max-width:760px){#pmCanvas{height:60vh}.pm-labels span{max-width:150px;font-size:10.5px;padding:2px 5px}}

.lipid-stepbar{display:flex;gap:6px;overflow-x:auto;margin:10px 22px 0;padding:2px 0 6px;scrollbar-width:thin}
.lipid-stepbar button{flex:0 0 auto;display:flex;align-items:center;gap:6px;max-width:220px;border:1px solid var(--line);border-radius:999px;background:#fffdfa;color:var(--muted);padding:5px 12px 5px 6px;font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.lipid-stepbar button b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;background:#efe6da;color:#5c483c;font-size:12px}
.lipid-stepbar button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lipid-stepbar button.done{color:var(--ink)}.lipid-stepbar button.done b{background:#cfe0d3}
.lipid-stepbar button.current{background:#596b60;border-color:#596b60;color:#fff}.lipid-stepbar button.current b{background:#fff;color:#2f4a3a}
.lipid-stepbar .hint0{margin:0 6px 0 0;font-size:12.5px;color:var(--muted);align-self:center;flex:1 1 100%}
.lipid-stepbar:has(.hint0){flex-wrap:wrap}
.lipid-stepbar .pathchip{padding:5px 14px;color:#2f4a3a;border-color:#9cc4a6;background:#eef6ef}
@media(max-width:650px){.lipid-stepbar{margin:8px 12px 0}.lipid-stepbar button{font-size:12px;max-width:200px}}

/* phone: full-screen viewer, sticky header with a large close button inside the safe area */
.lipid-modal-box{max-height:calc(100dvh - 32px)}.pm-body>*{min-width:0}.pm-tabs{min-width:0}
.pm-close2{display:none}
@media(max-width:760px){.lipid-modal{padding:0;align-items:stretch}.lipid-modal-box{width:100%;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:0 12px calc(16px + env(safe-area-inset-bottom));overflow-x:hidden;overscroll-behavior:contain}
.pm-head{position:sticky;top:0;z-index:5;background:#fffdf9;padding:calc(10px + env(safe-area-inset-top)) 0 8px;border-bottom:1px solid var(--line)}.pm-head h3{font-size:16px;min-width:0}
#pmClose{flex:none;width:44px;height:44px;font-size:20px;background:#332f2c;color:#fff;border-color:#332f2c;touch-action:manipulation}
.pm-close2{display:block;width:100%;margin-top:14px;padding:12px;border:1px solid #332f2c;border-radius:10px;background:#332f2c;color:#fff;font:inherit;font-size:15px}}

/* phone: keep the control panel inside the screen */
@media(max-width:650px){.lipid-app .controls{min-width:0;max-width:100%;overflow-x:hidden}.lipid-app .controls section{min-width:0}.lipid-app .presets,.lipid-app .lipid-particles,.lipid-app .lipid-drugs{grid-template-columns:repeat(2,minmax(0,1fr))}.lipid-app .lipid-particles{grid-template-columns:repeat(3,minmax(0,1fr))}.lipid-app .presets button,.lipid-app .lipid-drugs button{min-width:0;overflow-wrap:anywhere}.lipid-app .presets small{white-space:normal}}
#particleInfo dl,#pmInfo dl{grid-template-columns:auto minmax(0,1fr)}#particleInfo dd,#pmInfo dd{min-width:0;overflow-wrap:anywhere}
/* phone: 3D view + step bar + caption fit on one screen */
@media(max-width:650px){
.lipid-app .model-heading{padding:8px 12px 4px}.lipid-app .model-heading .eyebrow,.lipid-app #viewStatus{display:none}.lipid-app .model-heading h2{font-size:15px;margin:0}
.lipid-app #resetView{padding:5px 9px;font-size:12px}
.lipid-app #viewport{height:calc(100dvh - 290px);min-height:300px;max-height:60dvh;margin-bottom:0}
.lipid-scale{display:none}
.lipid-stepbar{margin:6px 10px 0;padding-bottom:4px}
.lipid-caption{max-height:24dvh;overflow:auto;margin-top:6px}
}

.lipid-gauges .bar{position:relative}.lipid-gauges .bar .base{position:absolute;top:-2px;bottom:-2px;width:3px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px #8a7a6c;border-radius:1px}
.lipid-gauges em{font-style:normal;font-size:11px;font-weight:700;margin-left:4px}.lipid-gauges em.dn{color:#2f8f4a}.lipid-gauges em.up{color:#c0453a}
.lipid-gauges .g-head{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:0 8px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid #eadfcf}.lipid-gauges .g-head b{font-size:22px;color:#8a7a6c}.lipid-gauges .g-head.down b{color:#2f8f4a}.lipid-gauges .g-head small{grid-column:1/-1;margin:0}
.lipid-caption ol.chain{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 0;counter-reset:c}
.lipid-caption ol.chain li{counter-increment:c;display:flex;align-items:center;font-size:13.5px}
.lipid-caption ol.chain li::before{content:counter(c);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#3b6fd0;color:#fff;font-size:11.5px;font-weight:700;margin-right:6px}
.lipid-caption ol.chain li:not(:last-child)::after{content:'→';margin:0 8px;color:#8a7a6c}
@media(max-width:650px){.lipid-gauges .g-head b{font-size:18px}.lipid-caption ol.chain li{font-size:12.5px}}
.lipid-app.cell-mode .lipid-stepbar{display:none}

.lipid-op{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font-size:13px}.lipid-op input{flex:1;accent-color:#596b60}.lipid-op output{min-width:42px;text-align:right;color:var(--muted)}
.lipid-op-quick{margin:6px 22px 6px}.lipid-app.cell-mode .lipid-op-quick{display:none}
.pm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.pm-lines line{stroke:#5c483c;stroke-width:1.2}.pm-lines circle{fill:#fff;stroke:#5c483c;stroke-width:1.2}
.pm-labels span{transform:none!important}
@media(max-width:650px){.lipid-op-quick{margin:4px 12px}.lipid-op{font-size:12px}}
@media(max-width:650px){.lipid-op-quick{margin:2px 12px 2px}.lipid-op-quick label{font-size:11.5px}.lipid-app #viewport{height:calc(100dvh - 318px)}#pmCanvas{height:68vh}}
@media(min-width:761px){.pm-body{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}.pm-labels span{max-width:190px}.lipid-modal-box{width:min(1180px,100%)}
@media(max-width:760px){.pm-labels span{max-width:min(330px,90%)}#pmCanvas{height:72vh}.pm-hint{display:none}}
@media(max-width:650px){.lipid-app .stage{position:relative}.lipid-op-quick{position:absolute;z-index:6;left:10px;right:10px;margin:0;padding:3px 10px;background:rgba(255,253,249,.88);border-radius:10px;box-shadow:0 1px 6px #584a3622}.lipid-app #viewport{height:calc(100dvh - 290px)}}

.lipid-labels span.kindtag{font-size:11px;font-weight:700;color:#fff;border:0}.lipid-labels span.kindtag[data-kind=artery]{background:#d9443a}.lipid-labels span.kindtag[data-kind=vein]{background:#3f69c8}.lipid-labels span.kindtag[data-kind=lymph]{background:#c9a01c}.lipid-labels span.kindtag[data-kind=heart]{background:#b0406a}

/* icon playback controls, top-left of the 3D view */
.lipid-ctl{position:absolute;top:10px;left:12px;z-index:6;display:flex;gap:4px;padding:4px;background:rgba(255,253,249,.92);border:1px solid #d8c9b8;border-radius:12px;box-shadow:0 2px 8px #584a3622}
.lipid-ctl button{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:#3b2d22;cursor:pointer;touch-action:manipulation}
.lipid-ctl button:hover:not(:disabled){background:#efe6da}.lipid-ctl button:disabled{opacity:.35;cursor:default}
.lipid-ctl button.main{background:#596b60;color:#fff}.lipid-ctl button.main:hover:not(:disabled){background:#4b5c51}
.lipid-ctl .i-pause{display:none}.lipid-ctl .playing .i-play{display:none}.lipid-ctl .playing .i-pause{display:inline-flex}
.lipid-ctl.idle .main{background:#b9b2a6}
.lipid-scale{top:auto;bottom:8px}
.lipid-app.cell-mode .lipid-ctl{display:none}
@media(max-width:650px){.lipid-ctl{top:52px;left:10px;gap:2px;padding:3px}.lipid-ctl button{width:36px;height:36px}.lipid-ctl button svg{width:18px;height:18px}}

/* lipid: icon controls stacked vertically so they cover less of the body */
.lipid-ctl{flex-direction:column;padding:3px;gap:2px;border-radius:12px}.lipid-ctl button{width:34px;height:34px}.lipid-ctl button svg{width:18px;height:18px}
@media(max-width:650px){.lipid-ctl{top:52px;left:8px;padding:2px}.lipid-ctl button{width:32px;height:32px}}

/* drug chips under the 3D view (liver-cell level) */
.lipid-drugbar[hidden]{display:none}
.lipid-drugbar button{flex:0 0 auto;border:1px solid #b9c9e8;border-radius:999px;background:#fffdfa;color:#2f4a7a;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.lipid-drugbar button.on{background:#3b6fd0;border-color:#3b6fd0;color:#fff}
.lipid-drugbar button.clr{border-style:dashed;color:var(--muted);border-color:#c9bba9}
.lipid-app.cell-mode .lipid-drugbar:not([hidden]){display:flex}

/* phone, liver-cell level: slim gauges across the top so the cell scene stays visible */
@media(max-width:650px){.lipid-gauges{top:6px;bottom:auto;left:6px;right:6px;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 8px;padding:5px 8px;font-size:10px}.lipid-gauges .g-head{grid-column:1/-1;display:flex;align-items:baseline;gap:8px;padding:0 0 3px;margin:0}.lipid-gauges .g-head b{font-size:16px}.lipid-gauges .g-head small,.lipid-gauges>small{display:none}.lipid-gauges .g div:first-child{flex-direction:column;gap:0}.lipid-gauges .g span{font-size:9.5px;line-height:1.2;color:var(--muted)}.lipid-gauges .g b{font-size:11px}.lipid-gauges em{font-size:10px;margin-left:2px}.lipid-gauges .bar{height:5px}}

.lipid-caption .flow{display:grid;gap:6px;margin:6px 0}.fl-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 4px}.fl-tag{flex:none;min-width:96px;font-size:12px;font-weight:700;color:#fff;border-radius:6px;padding:3px 8px;text-align:center}.fl-tag.exo{background:#d98a1f}.fl-tag.endo{background:#3f8f5a}.fl-tag.hdl{background:#b0406a}
.fl-node{font-size:12.5px;border:1px solid #d8c9b8;background:#fffdfa;border-radius:6px;padding:2px 8px}.fl-node.liv{background:#8f3a2c;border-color:#8f3a2c;color:#fff}.fl-ar{color:#8a7a6c;font-size:12px}
.fl-note{margin:4px 0 6px;font-size:13px;line-height:1.65;color:#43386e;background:#f4f0fb;border-radius:8px;padding:6px 10px}.fl-go{display:flex;flex-wrap:wrap;gap:6px}.fl-go button{border:1px solid #9cc4a6;background:#eef6ef;color:#2f5a3c;border-radius:999px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.lipid-stepbar .nextchip{background:#fff7e4;border-color:#d99a1f;color:#8a5a10;font-weight:700}
@media(max-width:650px){.fl-tag{min-width:0;font-size:11px}.fl-node{font-size:11.5px;padding:2px 6px}.lipid-caption .flow{gap:4px}.fl-note{font-size:12px}.lipid-caption{max-height:30dvh}}

/* tablet/phone: single-column control panel so every section uses the full width */
@media(max-width:900px){.lipid-app .controls{grid-template-columns:minmax(0,1fr);gap:16px;padding:16px}.lipid-app .controls section{min-width:0;grid-column:auto}.lipid-app .controls .lipid-particles{grid-template-columns:repeat(4,minmax(0,1fr))}.lipid-app .controls .lipid-paths,.lipid-app .controls .lipid-levels{grid-template-columns:repeat(2,minmax(0,1fr))}.lipid-app .controls .lipid-drugs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.lipid-app .controls .lipid-particles{grid-template-columns:repeat(4,minmax(0,1fr))}.lipid-app .controls .lipid-paths button{padding:8px 4px}}

/* overview: three plain lanes */
.lipid-caption .lanes{display:grid;gap:6px;margin:6px 0}
.lane{display:grid;grid-template-columns:auto minmax(0,150px) minmax(0,1fr) auto;align-items:center;gap:10px;text-align:left;border:1px solid #d8c9b8;border-left-width:6px;border-radius:10px;background:#fffdfa;padding:8px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.lane.exo{border-left-color:#d98a1f}.lane.endo{border-left-color:#3f8f5a}.lane.hdl{border-left-color:#b0406a}
.lane .no{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:14px}.lane.exo .no{background:#d98a1f}.lane.endo .no{background:#3f8f5a}.lane.hdl .no{background:#b0406a}
.lane .nm strong{display:block;font-size:15px}.lane .nm small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.lane .chain{font-size:13.5px;color:#3b2d22}.lane .chain i{font-style:normal;color:#8a7a6c;margin:0 5px}
.lane em{font-style:normal;font-size:12px;color:#2f5a3c;white-space:nowrap}.lane:hover{background:#faf6ee}
.fl-note{margin:2px 0 0;font-size:13px;line-height:1.6;color:#43386e;background:#f4f0fb;border-radius:8px;padding:6px 10px}
@media(max-width:650px){.lane{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:'no nm go' 'chain chain chain';gap:2px 8px;padding:7px 10px}.lane .no{grid-area:no}.lane .nm{grid-area:nm}.lane em{grid-area:go}.lane .chain{grid-area:chain;font-size:12.5px;padding-left:34px}.lane .nm strong{font-size:14px}.lane .nm small{display:inline;margin-left:6px}.lipid-caption{max-height:none}}

/* PHONE: reorganised option area below the 3D view */
@media(max-width:650px){
.lipid-app .controls{gap:12px;padding:14px}
.lipid-app .controls h2{font-size:14px;margin:0 0 6px}
.lipid-app .controls .lipid-paths,.lipid-app .controls .lipid-levels{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.lipid-app .controls .lipid-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
.lipid-app .controls .lipid-paths button,.lipid-app .controls .lipid-levels button{padding:7px 2px;font-size:12.5px;line-height:1.25}
.lipid-app .controls .lipid-paths small,.lipid-app .controls .lipid-levels small{display:none}
.lipid-app .controls .lipid-play{display:none}
.lipid-app #stepSection{display:none}
.lipid-app .controls section:nth-of-type(3),.lipid-app .controls section:nth-of-type(6){display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;align-items:center}
.lipid-app .controls section:nth-of-type(3)>h2,.lipid-app .controls section:nth-of-type(6)>h2{grid-column:1/-1}
.lipid-app .controls .lipid-op{grid-column:1/-1;margin:0 0 2px}
.lipid-app .controls .check{margin:0;font-size:13px;line-height:1.3}
.lipid-app .controls .lipid-drugs,.lipid-app .controls .lipid-clear{display:none}
.lipid-app .controls .lipid-particles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

.lipid-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}.lipid-lines line{stroke:#5c483c;stroke-width:1.2;opacity:.85}.lipid-lines circle{fill:#fff;stroke:#5c483c;stroke-width:1.2}
.lipid-labels span.placed{transform:none;max-width:210px;white-space:normal;line-height:1.25}
@media(max-width:650px){.lipid-labels span.placed{max-width:46vw;font-size:10.5px;padding:2px 5px}}

/* phone, liver-cell level: taller picture so every name tag fits in the strip under it */
@media(max-width:650px){.lipid-app.cell-mode #viewport{height:min(470px,64dvh);max-height:none}.lipid-app.cell-mode .lipid-caption{max-height:none}}

@media(max-width:650px){.lipid-app.cell-mode #viewport{height:min(440px,60dvh)}}

@media(max-width:650px){.lipid-app.cell-mode #viewport{min-height:200px;max-height:none}}

/* phone, liver-cell level: the number panel sits above the picture instead of covering it */
@media(max-width:650px){.lipid-gauges.flow{position:static;width:auto;margin:6px 10px 0;box-shadow:none}.lipid-app.cell-mode #stage{display:flex;flex-direction:column}}

/* scroll cue for chip rows */
.sc-wrap{position:relative;margin:10px 22px 0}.sc-wrap .lipid-stepbar{margin:0;padding-bottom:6px;scrollbar-width:none}.sc-wrap .lipid-stepbar::-webkit-scrollbar{display:none}
.sc-track{position:relative;height:5px;border-radius:3px;background:#e4dacb;margin:2px 2px 0}.sc-track i{position:absolute;top:0;bottom:0;border-radius:3px;background:#596b60;min-width:14px}
.sc-more{position:absolute;right:0;top:0;height:calc(100% - 9px);width:34px;display:none;align-items:center;justify-content:flex-end;padding-right:4px;font-size:22px;font-weight:700;color:#596b60;pointer-events:none;background:linear-gradient(90deg,rgba(250,247,242,0),rgba(250,247,242,.96) 70%)}
.lipid-app:not(.cell-mode) .sc-wrap:has(#drugBar){display:none}
@media(max-width:650px){.sc-wrap{margin:6px 10px 0}}

.lipid-caption .sidefx{margin-top:8px;border:1px solid #d99a1f;background:#fff7e4;color:#8a5a10;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.side-box{width:min(760px,100%)}.side-body{font-size:14.5px;line-height:1.75;padding:4px 2px 6px}.side-body h4{margin:12px 0 4px;font-size:15.5px;color:#3b2d22}.side-body ul{margin:0 0 6px;padding-left:20px}.side-body li{margin:0 0 7px}.side-body .side-note{background:#fff7e4;border-radius:8px;padding:8px 12px;color:#6b4a10;margin:10px 0 4px}
@media(max-width:760px){.side-body{font-size:14px}}

/* phone: compact particle viewer — shorter picture, one-row tabs, two-column toggles, composition bar first */
@media(max-width:760px){
.lipid-modal-box{padding:0 12px calc(12px + env(safe-area-inset-bottom))}
.pm-head h3{font-size:15px;line-height:1.25}
.pm-tabs{flex-wrap:nowrap;overflow-x:auto;margin:6px 0;padding-bottom:3px;scrollbar-width:none}.pm-tabs::-webkit-scrollbar{display:none}.pm-tabs button{flex:0 0 auto;padding:4px 11px;font-size:12.5px;white-space:nowrap}
.pm-body{gap:8px}
#pmCanvas{height:clamp(250px,78vw,330px)}
.pm-view{border-radius:10px}
.pm-side{display:flex;flex-direction:column}
.pm-layers{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;margin:0 0 6px}.pm-layers .check{margin:0;padding:4px 0;font-size:13px;line-height:1.25}
#pmInfo{display:flex;flex-direction:column;font-size:13px;line-height:1.55}
#pmInfo .comp-bar{order:1;margin:2px 0 2px}#pmInfo .comp-key{order:2;margin-bottom:6px}#pmInfo dl{order:3;margin:2px 0 4px;font-size:12.5px;gap:1px 8px}#pmInfo>p{order:4;margin:4px 0 0!important}#pmInfo>p:nth-of-type(1){font-size:11px!important}
.pm-close2{display:block!important;margin-top:10px;padding:10px;font-size:14px}
}
.pm-close2{border:1px solid #332f2c;border-radius:10px;background:#332f2c;color:#fff;font:inherit;width:100%;cursor:pointer}

@media(max-width:760px){
#pmCanvas{height:clamp(215px,64vw,262px)}
.pm-layers{grid-template-columns:1fr 1fr 1fr;gap:0 6px}.pm-layers .check{font-size:12px;padding:3px 0;gap:5px}.pm-layers .check input{width:15px;height:15px}
.pm-layers .check:nth-child(1){grid-column:1/3}
}

/* chip rows: mouse drag, wheel, arrows and a draggable position bar */
.sc-wrap .lipid-stepbar{cursor:grab;user-select:none;-webkit-user-select:none}.sc-wrap .lipid-stepbar.dragging{cursor:grabbing}.sc-wrap .lipid-stepbar.dragging button{pointer-events:none}
.sc-track{height:8px;cursor:pointer;touch-action:none}.sc-track i{border-radius:4px}
.sc-btn{position:absolute;top:0;height:calc(100% - 13px);width:34px;display:none;align-items:center;justify-content:center;border:0;padding:0;font-size:22px;font-weight:700;color:#3b4a40;cursor:pointer}
.sc-btn.sc-r{right:0;background:linear-gradient(90deg,rgba(250,247,242,0),rgba(250,247,242,.97) 55%)}.sc-btn.sc-l{left:0;background:linear-gradient(270deg,rgba(250,247,242,0),rgba(250,247,242,.97) 55%)}.sc-btn:hover{color:#000}
.sc-more{display:none!important}

/* hint sits under the picture, never over the name tags */
.pm-hint{position:static!important;display:block;padding:3px 10px 5px;margin:0;font-size:11.5px;color:var(--muted)}
@media(max-width:760px){.pm-hint{display:block!important;padding:2px 8px 4px;font-size:11px}}
@media(min-width:761px){.pm-body{grid-template-columns:minmax(0,2.5fr) minmax(0,1fr)}.lipid-modal-box{width:min(1240px,100%)}}

/* the leader-line layer must cover exactly the canvas (top-left), and the picture box must not stretch to the height of the info column */
.pm-view{align-self:start}.pm-lines{position:absolute!important;left:0;top:0;right:auto;bottom:auto;inset:auto!important;left:0!important;top:0!important}

.pm-labels{position:absolute!important;inset:auto!important;left:0!important;top:0!important;width:100%!important;height:var(--pm-h,434px)!important;pointer-events:none}

@media(min-width:651px){.lipid-app:not(.cell-mode) #viewport{max-height:none}.lipid-app:not(.cell-mode) .lipid-caption{min-height:0}}

/* liver-cell level, all widths: slim 4-column number strip above the picture (never over it) */
.lipid-app.cell-mode #stage{display:flex;flex-direction:column}
.lipid-gauges.flow{position:static;width:auto;margin:6px 12px 0;box-shadow:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 14px;padding:6px 12px;font-size:12px}
.lipid-gauges.flow .g-head{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;padding:0 0 3px;margin:0}.lipid-gauges.flow .g-head b{font-size:20px}.lipid-gauges.flow .g-head small,.lipid-gauges.flow>small{display:none}
.lipid-gauges.flow .g div:first-child{flex-direction:column;gap:0}.lipid-gauges.flow .g span{font-size:11.5px;color:var(--muted)}.lipid-gauges.flow .g b{font-size:13px}.lipid-gauges.flow .bar{height:6px}

/* glossary */
.lipid-gloss{margin-top:0}.gl-tools{display:flex;align-items:center;gap:10px;margin:10px 0 6px}.gl-tools input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;background:#fffdfa}.gl-count{font-size:12.5px;color:var(--muted);white-space:nowrap}
.gl-types{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.gl-types button{border:1px solid var(--line);border-radius:999px;background:#fffdfa;padding:4px 11px;font:inherit;font-size:12.5px;cursor:pointer}.gl-types button.on{background:var(--sage);border-color:var(--sage);color:#fff}
.gl-index{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 10px;padding:8px;background:#f6f0e6;border-radius:10px}.gl-index a{font-size:12.5px;font-weight:700;color:#3b4a40;background:#fff;border:1px solid #d8c9b8;border-radius:6px;padding:2px 8px;text-decoration:none}.gl-index a:hover{background:#e9efe9}
.gl-head,.gl-row{display:grid;grid-template-columns:150px minmax(0,1.1fr) minmax(0,2fr);gap:4px 14px;padding:8px 6px}.gl-head{font-size:12px;color:var(--muted);border-bottom:2px solid #d8c9b8;padding-top:2px;padding-bottom:4px}.gl-row{border-bottom:1px solid #eadfcf;font-size:13.5px;line-height:1.6;scroll-margin-top:90px}.gl-row:nth-child(even){background:#fbf7ef}
.gl-a b{display:block;font-size:15px;color:#2f4a3a;overflow-wrap:anywhere}.gl-t{display:inline-block;margin-top:3px;font-size:10.5px;padding:1px 7px;border-radius:999px;background:#e9efe9;color:#2f5a3c}.gl-t.t-enz{background:#e4efe6}.gl-t.t-rec{background:#e3ecfa;color:#2c4f8a}.gl-t.t-apo{background:#f7e4ee;color:#8a2c5c}.gl-t.t-par{background:#fdf0d8;color:#8a5a10}.gl-t.t-lip{background:#efe9f8;color:#4f3f8a}.gl-t.t-lab{background:#e8e8e8;color:#444}.gl-t.t-drug{background:#e1f1f1;color:#1f6a6a}
.gl-n{color:#3b2d22}.gl-n small{display:block;color:var(--muted);font-size:12px}.gl-none{color:var(--muted);padding:10px 4px}
.gl-row.flash{animation:glflash 1.6s ease}@keyframes glflash{0%,40%{background:#fff0b8}100%{background:transparent}}
@media(max-width:650px){.gl-head{display:none}.gl-row{grid-template-columns:1fr;gap:2px;padding:9px 4px}.gl-a{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.gl-a b{display:inline}.gl-t{margin-top:0}.gl-tools{flex-wrap:wrap}.gl-index a{font-size:12px;padding:2px 7px}}
/* heart.css turns pointer events off on #viewport canvas; this page rotates with OrbitControls directly */
.lipid-app #viewport canvas{pointer-events:auto;touch-action:pan-y}