
#tm-jumo-flow{--j-bg:light-dark(#f4f4ee,#09121b);--j-panel:light-dark(#ffffff,#11222d);--j-fg:light-dark(#203835,#f3f1e8);--j-muted:light-dark(#526b66,#acbfc6);--j-line:light-dark(#c8d6d0,#354c57);--j-accent:light-dark(#236957,#ace0ce);--j-btn:light-dark(#236957,#ace0ce);--j-on:light-dark(#fff,#102b24);font:15px/1.5 Arial,sans-serif;background:var(--j-bg);color:var(--j-fg);border-radius:18px;overflow:hidden;color-scheme:dark}
#tm-jumo-flow *{box-sizing:border-box}
#tm-jumo-flow header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 28px;border-bottom:1px solid var(--j-line)}
#tm-jumo-flow .brand{font:25px Georgia,serif;display:flex;align-items:center;gap:10px}
#tm-jumo-flow .brand i{color:var(--j-accent)}
#tm-jumo-flow .eyebrow{font:11px/1.5 'Courier New',monospace;letter-spacing:1.4px;color:var(--j-muted);text-transform:uppercase}
#tm-jumo-flow .lab-body{padding:25px 28px}
#tm-jumo-flow h3{font:clamp(30px,5vw,46px)/1.1 Georgia,serif;letter-spacing:-1.2px;margin:7px 0 9px;color:var(--j-fg)}
#tm-jumo-flow p{margin:0}
#tm-jumo-flow .intro{color:var(--j-muted);font-size:14px;margin-bottom:20px}
#tm-jumo-flow .stage{background:var(--j-panel);border:1px solid var(--j-line);border-radius:13px;overflow:hidden}
#tm-jumo-flow .toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px 0}
#tm-jumo-flow button{font:inherit;background:var(--j-panel);color:var(--j-fg);border:1px solid var(--j-line);border-radius:8px;padding:9px 13px;min-height:42px}
#tm-jumo-flow button[aria-pressed=true]{background:var(--j-btn);color:var(--j-on);border-color:transparent}
#tm-jumo-flow .toggle{font-size:13px}
#tm-jumo-flow .viewport{position:relative;height:400px;touch-action:none;background:radial-gradient(ellipse at 48% 42%,light-dark(#f4f3ed,#27333a),light-dark(#d9dfdc,#101c25))}
#tm-jumo-flow canvas{width:100%;height:100%;display:block;cursor:grab}
#tm-jumo-flow canvas:active{cursor:grabbing}
#tm-jumo-flow .loading{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:var(--j-muted)}
#tm-jumo-flow .loading[hidden]{display:none}
#tm-jumo-flow .tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:10px 16px 12px;color:var(--j-muted);font-size:12px}
#tm-jumo-flow .view-buttons{display:flex;gap:6px}
#tm-jumo-flow .view-buttons button{display:grid;place-items:center;width:44px;min-height:44px;padding:8px}
#tm-jumo-flow .view-buttons button span{margin:0}
#tm-jumo-flow .tools [data-play]{min-width:140px;min-height:44px;font-size:13px}
#tm-jumo-flow .view-help{display:block;padding:0 16px 12px;color:var(--j-muted);font-size:12px}
#tm-jumo-flow .parts{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:15px 0 0}
#tm-jumo-flow .parts button{text-align:left;font-size:12px;padding:10px 11px}
#tm-jumo-flow .parts small{display:block;font:11px/1.6 'Courier New',monospace;opacity:.85}
#tm-jumo-flow .selection{padding:13px 0;min-height:61px;font-size:14px;color:var(--j-muted)}
#tm-jumo-flow .selection strong{color:var(--j-fg);font-weight:600}
#tm-jumo-flow .references{border-top:1px solid var(--j-line);display:flex;gap:18px;justify-content:space-between;padding-top:14px;font-size:12px;color:var(--j-muted)}
#tm-jumo-flow details{max-width:650px}
#tm-jumo-flow summary{color:var(--j-fg);min-height:28px}
#tm-jumo-flow details p{margin-top:10px}
#tm-jumo-flow a{color:var(--j-accent)}
#tm-jumo-flow .note{max-width:180px;text-align:right;font-size:11px}
@media(max-width:600px){#tm-jumo-flow .lab-body{padding:20px 15px}#tm-jumo-flow header{padding:16px}#tm-jumo-flow .viewport{height:290px}#tm-jumo-flow .parts{grid-template-columns:repeat(3,1fr)}#tm-jumo-flow .references{display:block}#tm-jumo-flow .note{max-width:none;text-align:left;margin-top:10px}#tm-jumo-flow .eyebrow{letter-spacing:.6px;font-size:11px}#tm-jumo-flow .toolbar{padding:12px 10px 0}#tm-jumo-flow .selection{min-height:82px}}
@media(max-width:370px){#tm-jumo-flow .parts{grid-template-columns:repeat(2,1fr)}#tm-jumo-flow .viewport{height:245px}#tm-jumo-flow .tools{padding:10px 9px;gap:10px}#tm-jumo-flow .view-buttons{gap:4px}}
@media(max-width:600px){#tm-jumo-flow .viewport{height:230px}#tm-jumo-flow .tools{justify-content:center}#tm-jumo-flow .tools [data-play]{width:100%}#tm-jumo-flow .view-help{text-align:center}}

#tm-jumo-flow{--j-bad:light-dark(#ab302d,#ffa39c);--j-ok:light-dark(#236957,#ace0ce)}
#tm-jumo-flow .toolbar{flex-wrap:wrap;padding-bottom:10px}
#tm-jumo-flow .toolbar>span{margin-right:auto}
#tm-jumo-flow .flow-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;font-size:12px;color:var(--j-muted);border-top:1px solid var(--j-line)}
#tm-jumo-flow .scale{width:90px;height:6px;border-radius:4px;background:linear-gradient(90deg,#208bd1,#37a89d,#eebd48,#eb6437)}
#tm-jumo-flow .challenge{padding:22px 0 18px}
#tm-jumo-flow .readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}
#tm-jumo-flow .readings span,#tm-jumo-flow .readings small{display:block;font-size:12px;color:var(--j-muted)}
#tm-jumo-flow .readings strong{display:block;font:28px/1.5 Georgia,serif;font-variant-numeric:tabular-nums;color:var(--j-fg)}
#tm-jumo-flow .sliders{display:grid;grid-template-columns:1fr 1fr;gap:25px}
#tm-jumo-flow .sliders label{font-size:13px}
#tm-jumo-flow output{float:right;font-variant-numeric:tabular-nums}
#tm-jumo-flow input[type=range]{display:block;width:100%;accent-color:var(--j-accent);margin:12px 0 18px;min-height:24px}
#tm-jumo-flow .actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
#tm-jumo-flow .primary{background:var(--j-btn);color:var(--j-on);border-color:transparent}
#tm-jumo-flow .feedback{padding:14px 0 8px;font-size:14px}
#tm-jumo-flow .feedback[data-result=wrong],#tm-jumo-flow [data-explanation][data-result=wrong]{color:var(--j-bad)}
#tm-jumo-flow .feedback[data-result=right],#tm-jumo-flow [data-explanation][data-result=right]{color:var(--j-ok)}
#tm-jumo-flow .hint{font-size:13px}
#tm-jumo-flow .transfer{margin-top:16px;border-top:1px solid var(--j-line);padding:16px 0}
#tm-jumo-flow .transfer p{margin-top:10px}
#tm-jumo-flow .inspect{max-width:none;padding:14px 0;border-top:1px solid var(--j-line)}
#tm-jumo-flow [hidden]{display:none!important}
@media(max-width:600px){#tm-jumo-flow .sliders{grid-template-columns:1fr;gap:0}#tm-jumo-flow .readings{gap:8px}#tm-jumo-flow .readings strong{font-size:22px}#tm-jumo-flow .readings span{min-height:36px}#tm-jumo-flow .flow-key>span:first-child{flex-basis:100%}}

/* Website integration: keep the controls within the existing midnight palette. */
#tm-jumo-flow .lab-control{cursor:pointer}
#tm-jumo-flow .toolbar .eyebrow{font-size:11px}
#tm-jumo-flow .view-buttons button{font-size:20px}
#tm-jumo-flow input:focus-visible,#tm-jumo-flow button:focus-visible{outline:3px solid var(--j-accent);outline-offset:3px}
#tm-jumo-flow details{font-size:13px}
#tm-jumo-flow .intro{max-width:75ch}
#tm-jumo-flow h3{font-size:26px;letter-spacing:-.4px}
.engine-section{border-top:1px solid var(--line)}
.engine-scope{max-width:78ch;color:var(--muted);font-size:.88rem;margin:18px 0 0}
.engine-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:16px}
.engine-links a{color:var(--mint);text-decoration:underline;text-underline-offset:4px}
.engine-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0}
.engine-capabilities article{border-top:1px solid var(--line);padding-top:16px}
.engine-capabilities h3{font-size:1rem;margin:0 0 8px}
.engine-capabilities p{font-size:.88rem;color:var(--muted)}
.jet-recovery{padding:20px;color:var(--muted)}
@media(max-width:650px){.engine-capabilities{grid-template-columns:1fr;gap:16px}#tm-jumo-flow .lab-body{padding:18px 12px}}
