@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* Preview-only CVO STAP theme. Scoped to these two course families. */
.cvo-studio .grid2>*{min-width:0;max-width:100%}.cvo-studio .sidebar-overlay{display:none!important}.cvo-studio .lesson-theory .grid2{grid-template-columns:minmax(0,1fr)!important}
.cvo-studio .overview-card .card-icon svg{display:none}
.cvo-studio .playground,.cvo-studio .exercises-page,.cvo-studio .progress-page{max-width:1100px;margin:0 auto;padding:8px 0}.cvo-studio .playground-intro,.cvo-studio .progress-intro,.cvo-studio .exercises-intro{font-size:13px;color:#716782;margin:12px 0 26px}.cvo-studio .example-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 16px}.cvo-studio .example-buttons button{border:1px solid #d8c9e5;border-radius:20px;background:#ffffffb3;padding:10px 14px;color:#654b7b;font-size:12px;min-height:42px;cursor:pointer}.cvo-studio .example-buttons button[aria-pressed=true]{background:#e7daf1;border-color:#b499cd}.cvo-studio .editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.cvo-studio :is(.btn-run,.btn-check,.btn-score,.btn-submit,.btn-export){background:#7953a6!important;border:1px solid #7953a6!important;color:#fff!important;border-radius:12px;box-shadow:none!important;min-height:44px;padding:11px 18px;font:500 12px Inter,system-ui,sans-serif}.cvo-studio :is(.btn-clear,.btn-reset){background:#ffffffb3;border:1px solid #d9cbe4;color:#684c7e;border-radius:12px;min-height:44px;font-size:12px}.cvo-studio .editor-container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.cvo-studio :is(.editor-panel,.output-panel){min-width:0;border:1px solid #ded2e9;border-radius:18px;overflow:hidden;background:#292236}.cvo-studio :is(.editor-panel,.output-panel):before{display:none}.cvo-studio .panel-header{background:#3b3048!important;color:#e8dff0!important;font-size:12px;font-weight:500;padding:14px 18px}.cvo-studio .panel-header *{color:inherit!important}.cvo-studio .code-editor,.cvo-studio [class^=output-area]{font:13px/1.8 'IBM Plex Mono',monospace!important;background:#292236!important;color:#eee6f5!important;min-height:340px;padding:18px!important;border:0;white-space:pre-wrap;overflow-wrap:anywhere;width:100%;box-sizing:border-box}.cvo-studio [class^=output-area] .placeholder-text{color:#c2b3d0!important}.cvo-studio .playground-tip{background:#efe8f5;border:1px solid #ddd0e7;font-size:12px;padding:16px 20px;border-radius:14px}.cvo-studio .exercise-card{padding:24px;margin-bottom:18px}.cvo-studio .exercise-question{font-size:14px;line-height:1.8}.cvo-studio .option-btn{background:#faf7fd;border:1px solid #e1d6e9;border-radius:13px;min-height:48px;font-size:13px;color:#51415f}.cvo-studio .option-btn.selected{background:#eee2f7;border-color:#ac8bc8}.cvo-studio .option-letter{background:#e9dff2;color:#7953a6}.cvo-studio .fill-input{background:#fff;border:1px solid #cdb9de;border-radius:12px;padding:12px;color:#302448}.cvo-studio .overall-card{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:12px 28px;text-align:left;padding:28px;border:1px solid #fff;background:#ffffffad;border-radius:22px}.cvo-studio .overall-pct{font-size:36px;color:#7953a6!important;grid-row:span 2;background:none;-webkit-text-fill-color:#7953a6}.cvo-studio .overall-label{font-size:12px;color:#716782}.cvo-studio .overall-bar{width:100%;margin:0;background:#e7dcec}.cvo-studio .overall-fill,.cvo-studio .pr-fill{background:#9672b4}.cvo-studio .progress-row{border:1px solid #e4d9ed;background:#ffffffb3;border-radius:15px;padding:15px 18px;gap:12px}.cvo-studio .progress-row.content{background:#eee6f5}.cvo-studio .progress-row.not-done{opacity:1}.cvo-studio .pr-label{font-size:13px;color:#51415f;font-weight:500}.cvo-studio .pr-content,.cvo-studio .pr-nd{font-size:11px;color:#716782}.cvo-studio .studio-debug{display:none}.cvo-studio .studio-course-outline{display:grid;gap:8px;margin:20px 0}.cvo-studio .studio-course-outline button{display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;font:12px Inter,system-ui,sans-serif;padding:16px 18px;border:1px solid #e1d6e9;background:#f3edf8;color:#654b7b;border-radius:14px;cursor:pointer}
@media(max-width:700px){.cvo-studio .editor-container{grid-template-columns:1fr}.cvo-studio .overall-card{grid-template-columns:70px minmax(0,1fr);padding:20px;gap:10px 18px}.cvo-studio .overall-pct{font-size:28px}.cvo-studio .progress-row{flex-wrap:wrap}.cvo-studio .pr-label{flex:1;min-width:140px}.cvo-studio .exercise-card{padding:20px 16px}}
.cvo-studio .code-title{color:#ece4f3!important}.cvo-studio code:not([class*="language-"]):not(.cell-input){color:#724797;background:#eee5f4}.cvo-studio .lesson-theory .grid2{grid-template-columns:1fr}.cvo-studio .callout:before{background:#ad90c8!important}.cvo-studio .studio-concept svg text{fill:#534165;font-family:'IBM Plex Mono',monospace}
body.cvo-studio{--text:#302448;--text-light:#716782;--accent:#7953bc;--accent-hover:#67459f;--accent-light:#eee6f7;--sidebar-width:264px;--panel:#ffffffbd;--bg-card:#fff;--border:#e3d9ec;--radius:20px;font-family:Inter,system-ui,sans-serif!important;color:#302448!important;background:#f5f2f9!important;padding-top:88px!important;line-height:1.7;min-width:320px}
.cvo-studio:before{background:radial-gradient(ellipse at 85% 8%,#dcd0ef88,transparent 45%),radial-gradient(ellipse at 20% 90%,#ecdde855,transparent 45%)!important;animation:none!important}.cvo-studio button,.cvo-studio input,.cvo-studio select{font-family:inherit}.cvo-studio :is(h1,h2,h3,h4){color:#302448;background:none;-webkit-text-fill-color:currentColor;animation:none;letter-spacing:-.035em}.cvo-studio h1{font-size:clamp(26px,3.2vw,43px);font-weight:500;line-height:1.18}.cvo-studio h2{font-weight:500;line-height:1.3}.cvo-studio :is(p,li,td,th,label){color:#51445f}.cvo-studio button:focus-visible,.cvo-studio a:focus-visible{outline:3px solid #9f7bc8;outline-offset:3px}.cvo-studio ::selection{background:#dfcef0!important;color:#302448!important}
.cvo-studio .sl-hdr{max-width:1400px!important;background:#faf7fbe8!important;height:58px!important;box-shadow:inset 0 1px 0 #fff,0 9px 30px #4b2e7010!important}.cvo-studio .sl-back{font-weight:500}.cvo-studio .sidebar{top:90px!important;left:16px;height:calc(100dvh - 108px);border:1px solid #fff;border-radius:24px;background:#ffffffa8;box-shadow:0 10px 30px #53377308;overflow:visible}.cvo-studio .sidebar.open{width:248px}.cvo-studio .sidebar.closed{width:60px}.cvo-studio .sidebar-header{padding:12px 12px 18px}.cvo-studio .sidebar-header h2{font-size:13px;font-weight:600;white-space:normal;line-height:1.4}.cvo-studio .sidebar-logo{font:500 16px 'IBM Plex Mono',monospace;color:#7953bc}.cvo-studio .sidebar-content{padding:14px 10px}.cvo-studio .nav-divider{font-size:10px;font-weight:500;letter-spacing:.12em;color:#8a7899;padding:20px 12px 8px}.cvo-studio .nav-item{padding:10px 12px;min-height:42px;color:#665575;font-size:12px;white-space:normal;line-height:1.45;border-radius:12px}.cvo-studio .nav-item.active{background:#eae0f3;color:#654288;box-shadow:inset 0 1px 0 #ffffffb3;font-weight:600}.cvo-studio .nav-item:hover{transform:none;background:#f0e9f7}.cvo-studio .sidebar-user{border-top:1px solid #e7dfee;border-radius:0 0 24px 24px}.cvo-studio .user-avatar{background:#8462a8}.cvo-studio .main-content{padding:24px 40px 64px;margin-left:280px;min-width:0;min-height:calc(100dvh - 88px);overflow:visible}.cvo-studio .main-content.expanded{margin-left:88px}.cvo-studio .home-page{max-width:1160px;margin:auto}.cvo-studio .page-header{margin:8px 0 28px}.cvo-studio .page-header h1{font-size:clamp(26px,3vw,40px);font-weight:500;max-width:760px;background:none;-webkit-text-fill-color:#302448;animation:none}.cvo-studio .page-header .emoji{display:none}.cvo-studio .subtitle{font-size:12px;color:#716782;margin-top:12px}.cvo-studio .welcome{font-size:12px;font-weight:400;color:#7953bc}.cvo-studio .info-callout,.cvo-studio .tip-callout{background:#ffffff91;border:1px solid #e5dced;box-shadow:none;border-radius:18px;padding:20px 24px;font-size:13px;line-height:1.8}.cvo-studio .info-callout:before,.cvo-studio .tip-callout:before{background:#b39aca;width:3px}.cvo-studio .section-heading{font-size:20px;font-weight:500;margin:32px 0 18px}
.cvo-studio .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;counter-reset:chapter}.cvo-studio .overview-card{min-width:0;padding:24px 24px 22px;background:linear-gradient(140deg,#ffffffde,#ffffff91);border:1px solid #fff;border-radius:22px;box-shadow:inset 0 1px 0 #fff,0 6px 20px #52356808;counter-increment:chapter}.cvo-studio .overview-card:before{display:none}.cvo-studio .overview-card:after{content:'↗';position:absolute;right:24px;top:24px;color:#967bad;font-size:19px}.cvo-studio .overview-card:hover{transform:translateY(-2px);border-color:#cdb7e1;box-shadow:0 12px 30px #53377313}.cvo-studio .overview-card .card-icon{font-size:0;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#eee6f5;margin-bottom:18px}.cvo-studio .overview-card .card-icon:after{content:counter(chapter,decimal-leading-zero);font:12px 'IBM Plex Mono',monospace;color:#7953bc}.cvo-studio .overview-card h3{font-size:15px;font-weight:600;margin-bottom:9px;padding-right:10px}.cvo-studio .overview-card p{font-size:12px;line-height:1.75;color:#716782}.cvo-studio .card-time{display:block;font-size:11px;color:#7953bc;margin-top:16px}
.cvo-studio .lesson-page{max-width:1400px;margin:auto}.cvo-studio .lesson-split{grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:24px;min-height:0;align-items:start}.cvo-studio .lesson-theory{max-height:none;overflow:visible;padding:28px;background:#ffffffb3;border:1px solid #fff;border-radius:24px;min-width:0;font-size:14px;line-height:1.85}.cvo-studio .lesson-theory h1{font-size:29px;margin-bottom:18px}.cvo-studio .lesson-theory h2{font-size:22px;margin:32px 0 14px}.cvo-studio .lesson-theory h3{font-size:17px;margin:24px 0 12px}.cvo-studio .lesson-theory p{margin:12px 0}.cvo-studio .lesson-playground-panel{top:90px;max-height:calc(100dvh - 110px);min-width:0}.cvo-studio .lesson-playground-panel .panel-title{background:#eee7f4;border:1px solid #e1d7e9;font-size:12px;font-weight:500;padding:14px}.cvo-studio .mini-editor{background:#292236!important;border-color:#4a3b5a!important}.cvo-studio .mini-editor:before{background:#a58bbd!important;height:1px!important}.cvo-studio .mini-toolbar{background:#33293f!important;flex-wrap:wrap}.cvo-studio .mini-toolbar button{min-height:40px}.cvo-studio .mini-btn-run{background:#8460ac;color:white}.cvo-studio .mini-btn-clear{color:#e6dcec}.cvo-studio .mini-code{color:#f0e9f6!important;font:13px/1.8 'IBM Plex Mono',monospace!important;min-height:250px!important}.cvo-studio .mini-output{color:#e8dfef!important;background:#211b2a!important;white-space:pre-wrap;overflow-wrap:anywhere}.cvo-studio :is(.code-block,.memory-diagram){border-radius:16px;max-width:100%;overflow-x:auto}.cvo-studio .code-block:before{display:none}.cvo-studio pre{font:12px/1.8 'IBM Plex Mono',monospace;max-width:100%;overflow-x:auto}.cvo-studio .code-block pre{background:#292236}.cvo-studio .code-title{background:#392e46;color:#ece4f3;font:11px Inter,system-ui,sans-serif;padding:12px 16px}.cvo-studio .callout{background:#f2edf7;border:1px solid #e3d6ef;border-left:3px solid #b396ce;padding:18px 20px;border-radius:14px}.cvo-studio .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.cvo-studio .studio-table-scroll{max-width:100%;overflow:auto;margin:20px 0;border:1px solid #e3d9ec;border-radius:14px}.cvo-studio .studio-table-scroll table{margin:0;width:100%;border-collapse:collapse;font-size:12px}.cvo-studio .studio-table-scroll th{background:#eee7f5;color:#59416f;text-align:left;padding:13px 16px;border-bottom:1px solid #ded2e9;font-weight:600}.cvo-studio .studio-table-scroll td{padding:13px 16px;border-bottom:1px solid #e9e0f0;line-height:1.6}.cvo-studio .studio-table-scroll tr:last-child td{border-bottom:0}
.studio-visual{margin:0 0 28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:30px;border:1px solid white;border-radius:26px;background:linear-gradient(120deg,#eee5f4cc,#ffffffc4);box-shadow:inset 0 1px 0 white,0 12px 40px #6342790a;overflow:hidden}.studio-visual .studio-kicker{font-size:10px;color:#826299;letter-spacing:.16em;font-weight:500}.studio-visual h2{font-size:25px;line-height:1.2;font-weight:500;letter-spacing:-.8px;margin:12px 0}.studio-visual p{font-size:12px;color:#716782;line-height:1.8;margin:0}.studio-visual svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 10px #6847880c)}.studio-visual svg text{font-family:'IBM Plex Mono',monospace;fill:#534165}.studio-visual .studio-visual-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.studio-visual button{background:#7953a6;border:1px solid #7953a6;color:#fff;border-radius:12px;font-size:12px;padding:11px 15px;min-height:42px;cursor:pointer}.studio-visual button+button{background:#ffffffa3;border-color:#d9c9e6;color:#65467d}.studio-concept{margin:24px 0;padding:20px;border-radius:18px;background:#f1ebf7;border:1px solid #e2d5ec}.studio-concept summary{font-size:13px;font-weight:600;color:#654c7b;cursor:pointer;min-height:32px}.studio-concept svg{width:100%;height:auto;max-height:260px;margin:12px auto}.studio-concept p{font-size:12px!important;color:#716782}.studio-drawer-backdrop{display:none}.cvo-studio .exercise-card,.cvo-studio .progress-card,.cvo-studio .download-card{background:#ffffffbd;border:1px solid #e3d9ec;border-radius:20px;box-shadow:0 6px 24px #53377308}.cvo-studio .split-view-container{height:calc(100dvh - 100px);background:#f7f3fa;border-radius:22px}.cvo-studio .split-panel{min-width:0}.cvo-studio .split-panel-header{background:#ece4f4}.cvo-studio .split-panel-select{min-width:0;color:#51415f}
@media(min-width:1700px){.cvo-studio .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.cvo-studio .main-content{padding:24px}.cvo-studio .lesson-split{grid-template-columns:1fr}.cvo-studio .lesson-playground-panel{position:relative;top:auto;max-height:none}.studio-visual{grid-template-columns:1fr;padding:24px;gap:18px}.studio-visual svg{max-width:450px;margin:auto}.cvo-studio .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cvo-studio .lesson-theory{padding:24px}}
@media(max-width:900px){.cvo-studio .main-content,.cvo-studio .main-content.expanded{margin-left:0;padding:20px 24px 50px}.cvo-studio .sidebar{z-index:9997;left:12px;top:82px!important;height:calc(100dvh - 98px);background:#fbf8fded;box-shadow:0 20px 50px #3b205638}.cvo-studio .sidebar.closed{transform:translateX(-300px);visibility:hidden;pointer-events:none}.cvo-studio:has(.sidebar.open) .studio-drawer-backdrop{display:block;position:fixed;inset:76px 0 0;background:#30244842;backdrop-filter:blur(4px);z-index:9996;border:0}.cvo-studio .studio-visual{grid-template-columns:1fr 1fr}.cvo-studio .split-view-container{flex-direction:column;height:auto}.cvo-studio .split-panel{min-height:450px}.cvo-studio .split-panel-left{border-right:0;border-bottom:1px solid #ded2e9}}
@media(max-width:600px){.cvo-studio .main-content,.cvo-studio .main-content.expanded{padding:14px 14px 40px}.cvo-studio .sl-hdr .sl-back{font-size:0;width:40px;justify-content:center;padding:0}.cvo-studio .sl-hdr .sl-back:after{content:'←';font-size:18px}.cvo-studio .studio-visual{grid-template-columns:1fr;padding:22px;gap:16px}.studio-visual h2{font-size:23px}.studio-visual svg{max-width:350px}.cvo-studio .card-grid{grid-template-columns:1fr}.cvo-studio .overview-card{padding:22px}.cvo-studio .lesson-theory{padding:20px 16px;border-radius:20px}.cvo-studio .lesson-theory h1{font-size:25px}.cvo-studio .lesson-theory h2{font-size:21px}.cvo-studio .grid2{grid-template-columns:1fr}.cvo-studio .page-header h1{font-size:28px}.cvo-studio .info-callout{padding:18px}.cvo-studio .subtitle{line-height:1.8}.cvo-studio .nav-item{min-height:44px}.cvo-studio .studio-table-scroll table{min-width:380px}}
@media(prefers-reduced-motion:reduce){.cvo-studio *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}