/* The AI Lessons sample's own bits: room for the sample bar's banner under the site's header, links to lessons that
   are not in it, its notes, the reminder preview and the "choose who to be" page (its look is the live sign-in
   page's). */
body > header.login-top{margin-bottom:46px}
a[data-sample="off"]{opacity:.55;cursor:not-allowed}
.sample-note{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:2147483646;max-width:min(560px,calc(100vw - 32px));background:#21076C;color:#fff;border-radius:12px;padding:12px 16px;font:500 14px/1.45 "DM Sans",system-ui,sans-serif;box-shadow:0 8px 24px rgba(17,4,56,.3)}
.sample-note[hidden]{display:none}
.sample-note a{color:#D8B664;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sample-note a:focus-visible{outline:3px solid #D8B664;outline-offset:2px;border-radius:4px}

dialog.sample-mail{max-width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 64px);border:0;border-radius:16px;padding:22px 24px;font:15px/1.5 "DM Sans",system-ui,sans-serif;color:#1A1A1A;box-shadow:0 20px 60px rgba(17,4,56,.35)}
dialog.sample-mail::backdrop{background:rgba(17,4,56,.45)}
dialog.sample-mail h2{margin:0 0 6px;color:#21076C;font-size:20px}
dialog.sample-mail section{border:1px solid #E6E1F5;border-radius:12px;padding:12px 14px;margin:12px 0}
dialog.sample-mail .to{margin:0;color:#555;font-size:13px}
dialog.sample-mail .su{margin:2px 0 8px;font-weight:700;color:#21076C}
dialog.sample-mail pre{margin:0;white-space:pre-wrap;font:13.5px/1.5 "DM Sans",system-ui,sans-serif}
dialog.sample-mail button{font:inherit;font-weight:700;color:#fff;background:#21076C;border:0;border-radius:999px;padding:9px 20px;cursor:pointer}

body.sample-login{margin:0;background:#F2EFFA;min-height:100vh;display:flex;flex-direction:column}
.sample-login .login-top{background:#21076C;border-bottom:4px solid #D8B664;padding:16px}
.sample-login .login-top img{display:block;height:40px;width:auto;margin:0 auto}
.sample-login main.login{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px 80px}
.sample-login .card{background:#fff;border:1px solid #E6E1F5;border-radius:16px;max-width:560px;width:100%;padding:28px 24px;box-shadow:0 8px 30px rgba(33,7,108,.08)}
.sample-login .card h1{font-size:24px;color:#21076C;margin:0 0 6px;text-align:center}
.sample-login .card p{margin:0 0 14px;color:#444;line-height:1.5}
.sample-login .card [dir=rtl]{text-align:center;font-family:Tahoma,"Segoe UI",Arial,sans-serif}
.sample-login .msg{min-height:1.5em;color:#b3261e;font-weight:600;text-align:center}
.sample-login .msg.ok{color:#137333}
.sample-login .small{font-size:13px;color:#666}
.people{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.person{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:start;font:inherit;color:#1A1A1A;background:#fff;border:1px solid #C8BEE8;border-radius:14px;padding:12px 14px;cursor:pointer}
.person:hover{border-color:#21076C;box-shadow:0 6px 18px rgba(33,7,108,.10)}
.person .ico{font-size:22px;line-height:1.2}
.person b{display:block;color:#21076C}
.person small{display:block;color:#555;font-size:13.5px;line-height:1.4;margin-top:2px}
.linkish{font:inherit;color:#21076C;font-weight:700;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}