:root{--cnn-bg:#fffefa;--cnn-surface:#f4f2ef;--cnn-ink:#272431;--cnn-muted:#68636f;--cnn-line:#dedade;--cnn-accent:#512b62;color-scheme:light}.dark{--cnn-bg:#17151c;--cnn-surface:#27232e;--cnn-ink:#f0edf3;--cnn-muted:#b9b2c3;--cnn-line:#46404e;--cnn-accent:#d1a8e9;color-scheme:dark}html,body{height:auto;min-height:100%;background:var(--cnn-bg);color:var(--cnn-ink);font-family:"Segoe UI","Microsoft YaHei",sans-serif}*{box-sizing:border-box}a{color:var(--cnn-accent)}button{cursor:pointer;font-family:inherit}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #bd7b3c;outline-offset:4px}.cnn-breadcrumb,.cnn-hero,.cnn-toolbar,.cnn-instruction,.cnn-footer{max-width:1440px;margin-inline:auto;padding-inline:48px}.cnn-breadcrumb{display:flex;gap:8px;font-size:12px;padding-top:23px;color:var(--cnn-muted)}.cnn-breadcrumb a:last-child{margin-left:auto}.cnn-hero{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-block:35px 30px}.cnn-eyebrow{font-size:11px;color:var(--cnn-accent);letter-spacing:.13em;margin-bottom:13px}.cnn-hero h1{font-size:35px;line-height:1.4;font-weight:600;margin-bottom:14px}.cnn-hero p:not(.cnn-eyebrow){font-size:13px;color:var(--cnn-muted);line-height:1.9}.cnn-hero-note{border-left:2px solid var(--cnn-line);padding-left:26px;flex:none}.cnn-hero-note strong{font-size:12px;color:var(--cnn-accent)}.cnn-hero-note p{margin-top:8px;font-size:11px!important}.cnn-toolbar{display:flex;gap:20px;justify-content:space-between;align-items:center;padding-block:18px;border-block:1px solid var(--cnn-line)}#cnn-status{font-size:12px;color:var(--cnn-muted)}#cnn-status[data-status=error]{color:#c64b38}.cnn-toolbar>div{display:flex;gap:9px}.cnn-toolbar button{padding:7px 12px;background:var(--cnn-bg);border:1px solid var(--cnn-line);color:var(--cnn-ink);font-size:12px;border-radius:3px}.cnn-instruction{padding-block:15px;font-size:11px;line-height:1.9;color:var(--cnn-muted)}.cnn-instruction span{margin-left:16px}.cnn-workspace{width:100%;overflow-x:auto}#cnn-app{min-width:1360px;color:#333;--light-gray:#faf9f6;color-scheme:light}#cnn-app .overview{width:100%;max-width:1680px;margin:auto}#cnn-app .cnn{background:#faf9f6;border-block:1px solid #e1dedb}#cnn-app .control-container{padding:18px 35px;background:var(--cnn-bg)}#cnn-app #cnn-svg{min-height:610px;max-height:none;height:610px;width:100%}#cnn-app .left-control .image-container{width:44px;height:44px;margin-right:12px;border-radius:4px}#cnn-app #hover-label{max-width:210px;overflow:hidden;pointer-events:none}#cnn-app .image-container img{height:100%;width:100%}#cnn-app .right-control button{font-size:11px}#cnn-app .modal{z-index:100}#cnn-app #detailview{position:relative;color:#333}#cnn-app #detailview .box{max-width:1050px}#cnn-app .modal p{font-size:13px;line-height:1.8;color:#555}#cnn-app .modal-card{max-width:530px}#cnn-app input[type=file]{margin-top:20px;font-size:13px}#cnn-app .upload-error{color:#b92725!important;margin-top:12px}#cnn-app .upload-note{margin-top:20px}#cnn-app .modal-card-title{font-size:20px!important}.cnn-guide{max-width:1232px;margin:45px auto 0;padding:0 20px 35px;color:var(--cnn-ink);font-size:14px}.guide-heading>span{font-size:11px;color:var(--cnn-accent);letter-spacing:.09em}.guide-heading h2,.cnn-hyper-section h2{font-size:26px;font-weight:550;margin:12px 0}.cnn-guide p{font-size:12px;color:var(--cnn-muted);line-height:1.9}.cnn-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 32px;margin-top:26px}.cnn-guide-grid section{padding-top:18px;border-top:1px solid var(--cnn-line);scroll-margin-top:25px}.cnn-guide-grid h3{font-size:16px;margin-bottom:10px;font-weight:600}.cnn-hyper-section{margin-top:45px;border-top:1px solid var(--cnn-line);padding-top:25px;scroll-margin-top:25px}.cnn-hyper-section>p{margin-bottom:20px}.hyper-scroll{overflow-x:auto}.hyper-scroll>#detailview-container{min-width:900px;max-width:1050px;color:#333}.cnn-lesson{margin-top:30px;border-block:1px solid var(--cnn-line);padding-block:18px}.cnn-lesson summary{font-size:13px;cursor:pointer;color:var(--cnn-accent)}.cnn-lesson ol{margin:18px 0;padding-left:22px;color:var(--cnn-muted);font-size:12px;line-height:2}.cnn-footer{border-top:1px solid var(--cnn-line);padding-block:25px;font-size:11px;line-height:2;color:var(--cnn-muted)}.cnn-footer p:last-child>a{float:right}#cnn-toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%);background:var(--cnn-ink);color:var(--cnn-bg);padding:12px 20px;font-size:12px;max-width:90vw;z-index:200;border-radius:4px}.stride-message{font-size:12px!important;margin-bottom:15px!important}.cnn-hyper-section output{display:inline-block;min-width:48px;font-size:13px}#cnn-app .control-pannel .title{font-size:18px}
/* Keep the guides responsive while the complete diagram has its own scroll area. */
.cnn-workspace{overflow:visible}#cnn-app{min-width:0}#cnn-app .overview{min-width:1360px}#cnn-app #explainer{overflow:visible}#cnn-app .overview{overflow:visible}.cnn-diagram-scroll{overflow-x:auto;width:100%}
@media(max-width:1100px){.cnn-breadcrumb,.cnn-hero,.cnn-toolbar,.cnn-instruction,.cnn-footer{padding-inline:28px}.cnn-hero{gap:25px}.cnn-hero h1{font-size:29px}.cnn-hero-note{max-width:300px}.cnn-guide{padding-inline:28px}.cnn-guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.cnn-breadcrumb,.cnn-hero,.cnn-toolbar,.cnn-instruction,.cnn-footer{padding-inline:20px}.cnn-breadcrumb{font-size:10px}.cnn-hero{display:block;padding-top:28px}.cnn-hero h1{font-size:28px}.cnn-hero-note{margin-top:20px;max-width:none;padding-left:16px}.cnn-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.cnn-instruction span{display:block;margin:5px 0 0}.cnn-guide{padding-inline:20px}.guide-heading h2,.cnn-hyper-section h2{font-size:23px}.cnn-guide-grid{grid-template-columns:1fr;gap:20px}.cnn-footer p:last-child>a{float:none;display:block}.cnn-guide .hyper-scroll{margin-right:-20px}.cnn-lesson p{font-size:11px}}
@media(prefers-reduced-motion:reduce){html,body{scroll-behavior:auto}*{transition:none!important}}
.cnn-diagram-inner{min-width:1360px;position:relative;background:var(--cnn-bg)}#cnn-app .cnn-diagram-inner #detailview{z-index:5}#cnn-app .cnn-diagram-inner #detailview .container{width:490px}#cnn-app .cnn-diagram-inner #detailview .box{padding:12px}#cnn-app .cnn-diagram-inner #detailview .column{flex-basis:auto}.hyper-scroll #detailview-container{min-width:1000px}#cnn-app .cnn-guide-grid{color:var(--cnn-ink)}#cnn-app .cnn-guide p{color:var(--cnn-muted)}