*{box-sizing:border-box}body{margin:0;background:#f4f7fb;color:#20394d;font:16px/1.5 system-ui,sans-serif}header{display:flex;align-items:center;gap:24px;padding:18px 4vw;background:white;border-bottom:1px solid #d5e0e8;flex-wrap:wrap}header img{width:150px}header h1{margin:0 auto 0 0;font-size:25px}a{color:#236e91}main{max-width:1450px;margin:auto;padding:24px}label{display:block;font-weight:600}input{width:min(100%,620px);padding:13px;border:1px solid #9db3c5;border-radius:8px;font:inherit}.examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}.example-card{display:block;background:white;border:1px solid #ccdce7;border-radius:12px;padding:18px;text-decoration:none;color:inherit}.example-card:hover,.example-card:focus-visible{border-color:#287f84;box-shadow:0 4px 18px #183e521a}.example-card svg{width:100%;height:240px;background:#f4f8fa;pointer-events:none}.example-card h3{margin:12px 0 4px}.example-card p{margin:0;color:#536a7c}[hidden]{display:none!important}:focus-visible{outline:3px solid #318cb4;outline-offset:3px}

#example-manager{padding:18px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;margin:16px 0}.manager-row{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid #ddd;flex-wrap:wrap}.manager-row span{flex:1;min-width:180px}.manager-row[draggable=true]{cursor:grab}#manage-examples, .manager-row button{padding:8px;cursor:pointer}dialog{max-width:90vw;width:450px;border:1px solid #b8c7d5;border-radius:12px;padding:24px}dialog label{display:block;margin:12px 0}dialog input,dialog textarea,dialog select{display:block;width:100%;box-sizing:border-box;padding:8px}dialog::backdrop{background:#17324d88}

.manager-row .example-drag-handle{flex:0 0 24px;min-width:24px;font-size:25px;color:#46729a;cursor:grab}.example-position{width:70px;padding:8px;border:1px solid #aebfd0;border-radius:6px}.manager-row.dragging{opacity:.45}.manager-row.drop-target{outline:2px solid #347bd0;background:#edf5ff}

.example-sections{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.example-sections a{flex:1 1 190px;text-align:center;padding:14px 20px;border:1px solid #246e79;border-radius:9px;background:#287f84;color:white;font-size:17px;font-weight:650;text-decoration:none}
.example-sections a:hover{background:#1c6067}
#examples-list section{scroll-margin-top:20px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.library-tabs{display:flex;gap:12px;margin-bottom:20px}.library-tabs[hidden]{display:none}.library-tabs button,.library-actions button,.library-actions a{padding:10px 14px;border:1px solid #287f84;border-radius:7px;background:white;color:#17324d;font:inherit;cursor:pointer;text-decoration:none}.library-tabs button[aria-pressed=true]{background:#287f84;color:white}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}.library-card{border:1px solid #cbd5e1;border-radius:12px;padding:18px;background:white;min-width:0}.library-card h3{overflow-wrap:anywhere}.library-card svg{width:100%;height:180px}.library-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}#instructor-library input,#instructor-library select{display:block;padding:10px;margin:8px 0 16px;max-width:100%;box-sizing:border-box}#instructor-library [role=status]{white-space:pre-wrap}

.create-example-link,#author-examples{display:inline-block;padding:9px 14px;border:1px solid #b4d2d0;border-radius:8px;background:#e9f6f3;color:#18665e;text-decoration:none;font-weight:600;margin-bottom:8px}#author-examples[hidden]{display:none}

#instructor-tools{display:flex;flex-direction:column;gap:6px;padding-left:24px;border-left:1px solid #d5e0e8}.instructor-tools-label{font-size:12px;font-weight:600;letter-spacing:.03em;color:#536a7c}.instructor-tools-actions{display:flex;gap:8px;flex-wrap:wrap}#instructor-tools #author-examples,#instructor-tools #manage-examples{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 14px;margin:0;border:1px solid #a4c7c5;border-radius:8px;background:#e9f6f3;color:#18665e;font:600 14px/1.5 system-ui,sans-serif;text-decoration:none;cursor:pointer}#instructor-tools #author-examples:hover,#instructor-tools #manage-examples:hover{background:#d8eeea;border-color:#287f84}#instructor-tools #manage-examples[aria-expanded=true]{background:#287f84;color:white}@media(max-width:650px){#instructor-tools{width:100%;padding:12px 0 0;border-left:0;border-top:1px solid #d5e0e8}.library-tabs{flex-wrap:wrap}}