:root { color-scheme:light; font-family:Vazirmatn,Tahoma,sans-serif; color:#214e43; background:#f8f0e2; }
* { box-sizing:border-box; } body { margin:0; background:linear-gradient(135deg,#f9e5c4 0, #f5f3ea 45%,#e9efdf 100%); min-height:100vh; }
button,input,textarea,select { font:inherit; } a { color:#214e43; } p { line-height:1.9; } h1,h2,h3 { line-height:1.7; overflow-wrap:anywhere; }
#demo-app { max-width:1240px; margin:auto; padding:24px; }
.demo-top,.demo-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.demo-brand { font-size:1.3rem; font-weight:800; text-decoration:none; }.demo-top .account-actions { margin:0; }
.demo-banner { margin:24px 0; padding:20px 24px; border:1px solid #b77d57; border-inline-start:5px solid #af512e; background:#fff6e9; border-radius:14px; }
.demo-banner h1 { margin:0; font-size:clamp(1.5rem,4vw,2rem); }.demo-banner p { margin:8px 0; max-width:85ch; }.demo-caption { color:#52645a; font-size:.9rem; }
.demo-roles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:16px 0 24px; }.demo-roles button { text-align:start; padding:16px; display:grid; gap:4px; }
.demo-roles small { font-weight:400; }.demo-roles button[aria-pressed=true],.demo-top button[aria-pressed=true] { background:#214e43; color:#fff; border-color:#214e43; }
.demo-guide { border:1px solid #d6d8c9; border-radius:12px; padding:16px 20px; background:#f6f3ea; margin-block:16px; }.demo-guide p { margin:0; }.demo-guide ol { padding-inline-start:24px; line-height:2; }
.demo-panel-heading { margin:0; font-size:1.35rem; }.demo-people { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.demo-person { border:1px solid #d6d8c9; border-radius:12px; padding:16px; }.demo-person h3,.demo-person p { margin:0 0 8px; }
.demo-person details summary { min-height:44px; cursor:pointer; padding-block:10px; }.demo-person dl { margin:0; }.demo-person dt { font-weight:700; }.demo-person dd { margin:0 0 12px; overflow-wrap:anywhere; }
.demo-bottom { margin-top:24px; padding:16px 0; border-top:1px solid #d6d8c9; }.demo-skip { position:absolute; inset-inline-start:16px; top:-100px; padding:12px; background:#fff; z-index:10; }.demo-skip:focus { top:12px; }
:focus-visible { outline:3px solid #af512e; outline-offset:3px; }.demo-loading { padding:24px; }.teaching-workspace fieldset { min-width:0; }
@media(max-width:700px) { #demo-app { padding:16px; }.demo-roles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.demo-roles button { padding:12px; }.demo-banner { padding:16px; }.demo-people { grid-template-columns:minmax(0,1fr); }.account-card { padding:16px; }.demo-top .account-button { padding:.6rem; } }

.demo-guide summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:700; }.demo-guide[open] summary { margin-bottom:.7rem; }.demo-banner { margin-block:12px; padding:12px 18px; }.demo-banner h1 { font-size:1.25rem; }.demo-roles { margin-block:12px; }.demo-roles button { padding:10px; }.demo-guide { padding:4px 14px; }