/* The original 3D explanation, composed as a Cotton homepage theater. */
html.cotton-embed{--bg:#182c22;--ink:#eef3e7;--muted:#b2c4ae;--line:#3b5442;--red:#ef8292;--blue:#87bde4;--green:#abd8ac;font-family:Arial,Helvetica,sans-serif}
html.cotton-embed body{background:#182c22}
html.cotton-embed .theater{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(270px,.85fr);background:#182c22;overflow:visible}
html.cotton-embed .theater::after{display:none}
html.cotton-embed .scene{grid-column:1;grid-row:1;height:410px;background:radial-gradient(ellipse at 50% 65%,#274237,#182c22 72%);overflow:hidden}
html.cotton-embed .agents{grid-column:1;grid-row:2;background:#314d3b;border-top:1px solid #38533f}
html.cotton-embed .agent{background:#1b3025;padding:15px 20px;gap:12px}
html.cotton-embed .agent.active{background:color-mix(in srgb,var(--agent) 9%,#1b3025)}
html.cotton-embed .agent-name{font-size:14px;font-weight:500}
html.cotton-embed .agent-task{display:block;font-size:12px;line-height:1.5;margin-top:4px;color:#bbccb6}
html.cotton-embed .agent-letter{display:grid;border-radius:50%;width:29px;height:29px;font-size:14px}
html.cotton-embed .agent-name::before{display:none}
html.cotton-embed .story{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;justify-content:center;align-items:start;gap:35px;background:#20382a;border:0;border-left:1px solid #415a44;padding:37px 29px;min-height:0}
html.cotton-embed .story .phase{font-size:12px;line-height:1.6;letter-spacing:.025em;margin-bottom:20px}
html.cotton-embed .story h2{font-size:clamp(25px,2.5vw,32px);line-height:1.12;letter-spacing:-.035em;font-weight:500;margin-bottom:19px}
html.cotton-embed .story p{font-size:16px;line-height:1.75;color:#c1d1b8;max-width:370px}
html.cotton-embed .story .fact{display:grid;width:100%;min-width:0;padding:22px 0 0;border:0;border-top:1px solid #506747;font-size:13px;line-height:1.7;color:#c6d6bd}
html.cotton-embed .fact strong{font-size:12px;font-weight:400;line-height:1.6;letter-spacing:.025em}
html.cotton-embed .transport{display:grid;grid-template-columns:1fr auto;gap:15px 20px;background:#182c22;padding:18px 24px 0;border-top:1px solid #405640}
html.cotton-embed .progress-row{gap:12px;align-items:center}
html.cotton-embed #play,html.cotton-embed #restart{display:block!important;border:1px solid #748c6a;border-radius:0;background:transparent;color:#e4efda;min-height:40px;width:auto;height:auto;padding:8px 14px;font-size:14px;line-height:1.5;font-family:Arial,Helvetica,sans-serif}
html.cotton-embed #play:hover,html.cotton-embed #restart:hover{background:#2b4933}
html.cotton-embed .hero-full-link{font-size:14px;color:#cfdfc4;text-decoration:underline;text-underline-offset:5px;max-width:none}
html.cotton-embed .chapters{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr));grid-column:1 / -1;gap:12px;margin:0;padding:0}
html.cotton-embed .chapter{font-size:14px;line-height:1.5;border-top:2px solid #426047;color:#a9bfa0;padding:12px 0 17px;min-height:65px;font-family:Arial,Helvetica,sans-serif}
html.cotton-embed .chapter small{font-size:12px;letter-spacing:.025em;color:#91aa87;margin-bottom:4px}
html.cotton-embed .chapter.active{border-color:var(--phase);color:#f3f7ed}
html.cotton-embed .chapter.active small{color:var(--phase)}
html.cotton-embed .chapter.complete{border-color:#8ba780;color:#d2dfc8}
html.cotton-embed button:focus-visible,html.cotton-embed a:focus-visible{outline:2px solid #f4d99a;outline-offset:4px}
@media(max-width:1050px){html.cotton-embed .theater{grid-template-columns:minmax(0,1.6fr) minmax(255px,.85fr)}html.cotton-embed .scene{height:380px}html.cotton-embed .story{padding:28px 24px;gap:25px}html.cotton-embed .story h2{font-size:27px}html.cotton-embed .story p{font-size:15px}html.cotton-embed .agent{padding:14px 12px;gap:8px}html.cotton-embed .agent-task{font-size:12px}}
@media(max-width:800px){html.cotton-embed .theater{display:block}html.cotton-embed .scene{height:365px}html.cotton-embed .story{border-left:0;border-top:1px solid #405b43;display:grid;grid-template-columns:1fr minmax(160px,.6fr);gap:28px;padding:24px;min-height:182px}html.cotton-embed .story .phase{margin-bottom:10px}html.cotton-embed .story h2{font-size:25px;margin-bottom:10px}html.cotton-embed .story p{font-size:15px;line-height:1.65;max-width:none}html.cotton-embed .story .fact{align-self:center;padding:0 0 0 20px;border:0;border-left:1px solid #506747}html.cotton-embed .chapters{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 16px}html.cotton-embed .chapter{min-height:58px;padding-block:9px 12px}html.cotton-embed .transport{padding:17px 20px 4px}}
@media(max-width:520px){html.cotton-embed .scene{height:295px}html.cotton-embed .agent{padding:12px 9px;gap:7px;align-items:start}html.cotton-embed .agent-letter{display:none}html.cotton-embed .agent-name{font-size:14px}html.cotton-embed .agent-name::before{display:inline-block;border-radius:0;width:5px;height:5px;margin-right:6px}html.cotton-embed .agent-task{font-size:12px;max-width:100px}html.cotton-embed .story{display:block;min-height:175px;padding:22px 18px}html.cotton-embed .story h2{font-size:25px}html.cotton-embed .story p{font-size:15px;line-height:1.65}html.cotton-embed .story .fact{display:none}html.cotton-embed .transport{padding:15px 15px 5px;gap:17px 10px}html.cotton-embed .progress-row{gap:8px}html.cotton-embed #play,html.cotton-embed #restart{font-size:13px;padding:8px 10px}html.cotton-embed .hero-full-link{font-size:13px;max-width:85px;text-align:right;line-height:1.6}html.cotton-embed .chapter{font-size:13px;min-height:59px}html.cotton-embed .chapters{gap:0 12px}}