.welcome-hero{display:grid;grid-template-columns:1.35fr 1fr;align-items:center;padding:36px;border:1px solid #dae6ed;border-radius:30px;background:linear-gradient(125deg,#eaf4ff,#fff9e6);overflow:hidden}.welcome-hero h1{font-size:36px;line-height:1.55}.welcome-hero p{font-size:20px}.welcome-picture{position:relative;aspect-ratio:1}.welcome-picture svg{width:100%}.welcome-picture img{position:absolute;inset:3%;width:94%;height:94%;object-fit:contain}.welcome-start{display:block;margin-top:18px;font-size:17px}.welcome-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}.welcome-paths>a{border:1px solid #d7e4ec;border-radius:24px;background:#fff;padding:22px;text-decoration:none;color:inherit}.welcome-paths>a:nth-child(2){background:#fff8e7}.welcome-paths>a:nth-child(3){background:#edf6f1}.welcome-paths img{display:block;width:150px;height:150px;object-fit:contain;margin:auto}.welcome-paths h2{font-size:23px;margin:5px 0}.welcome-paths p{font-size:18px}.welcome-paths span{font-size:16px;color:#5c7790}.welcome-paths strong{font-size:17px;color:#2868ad}
.l1-teaching:has(.reading-board){grid-template-columns:1fr}.reading-board{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}.reading-program{min-width:0}.reading-program .l1-pair{margin:0}.reading-program .l1-code,.reading-program .l1-output{padding:15px}.reading-program .l1-output{min-height:116px}.reading-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff8e5;border:1px solid #e6d6ac;border-radius:14px;padding:8px 12px;margin:10px 0 14px;position:sticky;top:8px;z-index:3}.reading-toolbar .l1-switch{margin:0;flex-wrap:nowrap}.reading-toolbar .l2-trace-top{display:block}.reading-toolbar .l2-trace-top span{display:block;font-size:16px}.l1-teaching .l1-art:has(.reading-board){overflow:clip}.reading-board .l2-trace{margin:0}.reading-board .l3-flow{max-width:310px;margin:0 auto}.reading-board .l1-explain{margin:12px 0 0;padding:12px 16px;line-height:1.65}.reading-program .l3-input-record{padding:10px 14px;margin:0 0 12px;font-size:17px}.reading-program .l3-input-record p{display:inline-block;margin:4px 12px}.reading-program .l3-input-record small{display:none}.l1-teaching:has(.reading-board)>.l1-side-explanation{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.l1-teaching:has(.reading-board)>.l1-side-explanation h2{grid-column:1/-1;margin:0}.l1-teaching:has(.reading-board)>.l1-side-explanation p{margin:0}.l1-teaching:has(.reading-board)>.l1-side-explanation .l1-note{margin:0}.reading-board .l2-bind-desktop .l2-svg-scroll svg{min-width:0}.reading-board .l2-bind-desktop .l2-svg-scroll{overflow:visible}.reading-board .l2-bind-desktop svg text{font-size:27px}
@media(max-width:1250px){.l1-shell{grid-template-columns:1fr}.l1-menu{position:static;max-height:250px}.reading-board{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media(max-width:700px){.welcome-hero{grid-template-columns:1fr;padding:22px}.welcome-hero h1{font-size:29px}.welcome-picture{width:230px;margin:auto;grid-row:1}.welcome-paths{grid-template-columns:1fr}.welcome-paths img{float:right;width:105px;height:125px}.reading-board{grid-template-columns:1fr}.reading-toolbar{top:4px;flex-wrap:wrap}.reading-toolbar button{font-size:16px;padding:8px!important}.l1-teaching:has(.reading-board)>.l1-side-explanation{display:block}.l1-teaching:has(.reading-board)>.l1-side-explanation .l1-note{margin-top:15px}.l1-menu{max-height:none}}
.sidebar{overflow-y:auto}.sidebar .product-name{margin-bottom:22px}.sidebar nav{gap:5px}.sidebar nav .course-nav{white-space:normal;padding:11px 9px;align-items:flex-start}.sidebar nav .course-nav>span{font-size:16px;line-height:28px;background:#edf4fc;border-radius:8px;flex-shrink:0;width:29px}.course-nav b{display:block;font-size:17px;line-height:1.65}.course-nav small{display:block;font-size:13px;line-height:1.6;margin-top:2px}.sidebar nav .nav-tools-label{margin:15px 10px 3px}.sidebar .sidebar-note{margin-top:22px}.sidebar .sidebar-note img{height:72px;width:85px}
.level-note{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding:9px 14px;margin:12px 0 18px;border-left:3px solid #bea5d7;background:#f7f3fb;border-radius:6px;font-size:16px;line-height:1.7;color:#6a5280}.level-note a{color:#665080;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}