<!
DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>SES Handbook —
Unleashing AI in the Classroom</title> <link
href="[Link]
family=Outfit:wght@300;400;500;600;700;800;90
0&family=Space+Grotesk:wght@400;500;600;700
&display=swap" rel="stylesheet"> <link
rel="stylesheet"
href="[Link]
awesome/6.5.1/css/[Link]">
<style> :root { --ses-blue: #0066FF;
--ses-dark: #0A0E27; --ses-navy: #1A237E;
--ses-silver: #C0C5CE; --ses-white: #FFFFFF;
--ses-light: #F5F7FA; --ses-accent: #00D4AA;
--ses-warm: #FF6B6B; --ses-gold: #FFD700;
--glass-bg: rgba(255, 255, 255, 0.08); --glass-
border: rgba(255, 255, 255, 0.18); } *
{ margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif;
background: var(--ses-light); color: var(--ses-
dark); line-height: 1.6; overflow-x:
hidden; } /* ========== COVER PAGE
========== */ .cover-page { width:
210mm; min-height: 297mm; margin:
0 auto 30px; background: linear-
gradient(135deg, var(--ses-dark) 0%, var(--ses-
navy) 50%, #0d1b3e 100%); position:
relative; overflow: hidden; display:
flex; flex-direction: column; justify-
content: center; align-items: center;
text-align: center; page-break-after: always;
box-shadow: 0 25px 80px rgba(0,0,0,0.3); }
.cover-page::before { content: '';
position: absolute; top: -50%; left: -
50%; width: 200%; height: 200%;
background: radial-gradient(circle at 30% 70%,
rgba(0,102,255,0.15) 0%, transparent 50%),
radial-gradient(circle at 70% 30%,
rgba(0,212,170,0.1) 0%, transparent 40%);
animation: float 20s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform:
translate(0, 0) rotate(0deg); } 33%
{ transform: translate(30px, -30px) rotate(1deg); }
66% { transform: translate(-20px, 20px) rotate(-
1deg); } } .cover-content { position:
relative; z-index: 2; padding: 60px;
} .ses-logo { width: 100px;
height: 100px; background: linear-
gradient(135deg, var(--ses-blue), var(--ses-
accent)); border-radius: 24px; display:
flex; align-items: center; justify-
content: center; margin: 0 auto 40px;
box-shadow: 0 20px 60px rgba(0,102,255,0.4);
font-size: 42px; color:
white; } .cover-title { font-family:
'Space Grotesk', sans-serif; font-size: 72px;
font-weight: 800; color: white; line-
height: 1.1; margin-bottom: 20px;
text-shadow: 0 4px 30px rgba(0,0,0,0.3); }
.cover-title span { background: linear-
gradient(135deg, var(--ses-blue), var(--ses-
accent)); -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; } .cover-subtitle {
font-size: 28px; color:
rgba(255,255,255,0.85); font-weight: 300;
margin-bottom: 15px; } .cover-tagline {
font-size: 18px; color:
rgba(255,255,255,0.6); letter-spacing: 3px;
text-transform: uppercase; margin-bottom:
60px; } .cover-meta { display: flex;
gap: 40px; justify-content: center;
margin-top: 80px; } .meta-item
{ text-align: center; color:
rgba(255,255,255,0.7); } .meta-item i {
font-size: 28px; margin-bottom: 10px;
color: var(--ses-accent); } .meta-label {
font-size: 12px; text-transform: uppercase;
letter-spacing: 2px; opacity:
0.7; } .meta-value { font-size: 18px;
font-weight: 600; color:
white; } .cover-decoration
{ position: absolute; width: 400px;
height: 400px; border: 1px solid
rgba(255,255,255,0.05); border-radius: 50%;
top: 10%; right: -100px; } .cover-
decoration-2 { position: absolute;
width: 300px; height: 300px; border:
1px solid rgba(255,255,255,0.03); border-
radius: 50%; bottom: 15%; left: -80px;
} /* ========== PAGE STRUCTURE
========== */ .page { width: 210mm;
min-height: 297mm; margin: 0 auto 30px;
background: white; position: relative;
page-break-after: always; box-shadow: 0
10px 40px rgba(0,0,0,0.08); display: flex;
flex-direction: column; } .page-header {
padding: 30px 50px 15px; display: flex;
justify-content: space-between; align-items:
center; border-bottom: 2px solid var(--ses-
light); } .page-header .ses-mini
{ display: flex; align-items: center;
gap: 10px; font-weight: 700; color:
var(--ses-navy); font-size:
14px; } .page-header .ses-mini-icon {
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--ses-
blue), var(--ses-accent)); border-radius: 8px;
display: flex; align-items: center;
justify-content: center; color: white;
font-size: 14px; } .page-number
{ font-family: 'Space Grotesk', sans-serif;
font-size: 14px; font-weight: 600;
color: var(--ses-silver); } .page-content {
flex: 1; padding: 30px 50px
50px; } .page-footer { padding:
20px 50px; background: var(--ses-light);
display: flex; justify-content: space-
between; align-items: center; font-
size: 11px; color: var(--ses-silver); }
/* ========== TYPOGRAPHY ========== */
h1 { font-family: 'Space Grotesk', sans-serif;
font-size: 42px; font-weight: 700;
color: var(--ses-dark); margin-bottom: 10px;
line-height: 1.2; } h2 { font-family:
'Space Grotesk', sans-serif; font-size: 28px;
font-weight: 700; color: var(--ses-navy);
margin: 30px 0 15px; display: flex;
align-items: center; gap: 12px; } h2
.section-icon { width: 44px; height:
44px; background: linear-gradient(135deg,
var(--ses-blue), var(--ses-accent)); border-
radius: 12px; display: flex; align-
items: center; justify-content: center;
color: white; font-size: 20px; flex-
shrink: 0; } h3 { font-size: 20px;
font-weight: 600; color: var(--ses-dark);
margin: 25px 0 12px; } p{ font-
size: 15px; color: #4a5568; margin-
bottom: 15px; } /* ========== SECTION
DIVIDER PAGE ========== */ .section-divider
{ width: 210mm; height: 297mm;
margin: 0 auto 30px; background: linear-
gradient(135deg, var(--ses-dark) 0%, var(--ses-
navy) 100%); display: flex; flex-
direction: column; justify-content: center;
align-items: center; text-align: center;
page-break-after: always; box-shadow: 0
15px 50px rgba(0,0,0,0.2); position: relative;
overflow: hidden; } .section-
divider::before { content: ''; position:
absolute; width: 500px; height:
500px; border: 1px solid
rgba(255,255,255,0.05); border-radius: 50%;
top: -150px; right: -
150px; } .section-number { font-
family: 'Space Grotesk', sans-serif; font-size:
120px; font-weight: 900; color:
rgba(255,255,255,0.08); line-height: 1;
margin-bottom: -30px; } .section-divider
h1 { color: white; font-size: 48px;
margin-bottom: 15px; position: relative;
z-index: 2; } .section-divider p
{ color: rgba(255,255,255,0.7); font-
size: 18px; max-width: 500px;
position: relative; z-index:
2; } .section-divider-icon { width:
80px; height: 80px; background:
rgba(255,255,255,0.1); backdrop-filter:
blur(10px); border: 1px solid
rgba(255,255,255,0.2); border-radius: 24px;
display: flex; align-items: center;
justify-content: center; color: white;
font-size: 36px; margin-bottom: 30px; }
/* ========== CALLOUT BOXES ========== */
.callout { background: linear-
gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
border-left: 4px solid var(--ses-blue); border-
radius: 12px; padding: 20px 24px;
margin: 20px 0; position: relative; }
.callout::before { content: '💡';
position: absolute; top: -12px; left:
20px; background: white; padding:
2px 8px; border-radius: 20px; font-
size: 18px; box-shadow: 0 2px 8px
rgba(0,0,0,0.1); } .callout-title
{ font-weight: 700; color: var(--ses-
navy); margin-bottom: 8px; font-size:
16px; } .callout p { margin: 0;
font-size: 14px; } .warning-box
{ background: linear-gradient(135deg,
#FFF5F5 0%, #FED7D7 100%); border-left:
4px solid var(--ses-warm); border-radius:
12px; padding: 20px 24px; margin:
20px 0; } .warning-box::before
{ content: '⚠️'; position: absolute;
top: -12px; left: 20px; background:
white; padding: 2px 8px; border-
radius: 20px; font-size: 18px; box-
shadow: 0 2px 8px rgba(0,0,0,0.1); } .tip-
box { background: linear-gradient(135deg,
#F0FFF4 0%, #C6F6D5 100%); border-left:
4px solid var(--ses-accent); border-radius:
12px; padding: 20px 24px; margin:
20px 0; } .tip-box::before { content:
'✨'; position: absolute; top: -12px;
left: 20px; background: white;
padding: 2px 8px; border-radius: 20px;
font-size: 18px; box-shadow: 0 2px 8px
rgba(0,0,0,0.1); } /* ========== CARDS
========== */ .card-grid { display: grid;
grid-template-columns: repeat(2, 1fr); gap:
20px; margin: 25px 0; } .card {
background: white; border: 1px solid
#E2E8F0; border-radius: 16px;
padding: 24px; transition: all 0.3s ease;
position: relative; overflow: hidden; }
.card:hover { transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.card-icon { width: 48px; height: 48px;
background: linear-gradient(135deg, var(--ses-
blue), var(--ses-accent)); border-radius:
12px; display: flex; align-items:
center; justify-content: center; color:
white; font-size: 22px; margin-
bottom: 15px; } .card h4 { font-
size: 18px; font-weight: 700; color:
var(--ses-dark); margin-bottom: 8px; }
.card p { font-size: 14px; color:
#718096; margin: 0; } .card-tag {
display: inline-block; background: var(--ses-
light); color: var(--ses-blue); padding:
4px 12px; border-radius: 20px; font-
size: 12px; font-weight: 600; margin-
top: 12px; } /* ========== PROMPT
BOXES ========== */ .prompt-box
{ background: linear-gradient(135deg, var(--
ses-dark) 0%, var(--ses-navy) 100%); border-
radius: 16px; padding: 24px; margin:
20px 0; color: white; position:
relative; overflow:
hidden; } .prompt-box::before
{ content: ''; position: absolute;
top: -50%; right: -20%; width: 300px;
height: 300px; background: radial-
gradient(circle, rgba(0,102,255,0.2) 0%,
transparent 70%); } .prompt-label {
display: inline-flex; align-items: center;
gap: 8px; background:
rgba(255,255,255,0.15); padding: 6px 14px;
border-radius: 20px; font-size: 12px;
font-weight: 600; text-transform: uppercase;
letter-spacing: 1px; margin-bottom: 12px;
} .prompt-text { font-family: 'Space
Grotesk', monospace; font-size: 15px;
line-height: 1.7; color:
rgba(255,255,255,0.95); position: relative;
z-index: 1; } .prompt-text .highlight {
color: var(--ses-accent); font-weight: 600;
} /* ========== COMPARISON TABLE
========== */ .comparison-table
{ width: 100%; border-collapse:
separate; border-spacing: 0; margin:
25px 0; border-radius: 16px;
overflow: hidden; box-shadow: 0 4px 20px
rgba(0,0,0,0.06); } .comparison-table
thead th { background: linear-
gradient(135deg, var(--ses-dark), var(--ses-navy));
color: white; padding: 16px 20px;
text-align: left; font-weight: 600; font-
size: 14px; } .comparison-table tbody td {
padding: 14px 20px; border-bottom: 1px
solid #EDF2F7; font-size: 14px; color:
#4a5568; } .comparison-table tbody
tr:nth-child(even) { background: #F7FAFC;
} .comparison-table tbody tr:hover
{ background:
#EDF2F7; } .comparison-table .platform-
name { font-weight: 700; color: var(--
ses-navy); display: flex; align-items:
center; gap: 8px; } .badge
{ display: inline-block; padding: 3px
10px; border-radius: 12px; font-size:
11px; font-weight: 600; } .badge-
free { background: #C6F6D5; color: #22543D; }
.badge-paid { background: #FEEBC8; color:
#744210; } .badge-freemium { background:
#E9D8FD; color: #553C9A; } /* ==========
TIMELINE ========== */ .timeline
{ position: relative; padding-left:
40px; margin: 30px
0; } .timeline::before { content: '';
position: absolute; left: 12px; top: 0;
bottom: 0; width: 3px; background:
linear-gradient(180deg, var(--ses-blue), var(--ses-
accent)); border-radius:
3px; } .timeline-item { position:
relative; margin-bottom: 30px;
padding: 20px; background: white;
border-radius: 12px; border: 1px solid
#E2E8F0; box-shadow: 0 2px 10px
rgba(0,0,0,0.04); } .timeline-item::before
{ content: ''; position: absolute;
left: -34px; top: 24px; width: 16px;
height: 16px; background: var(--ses-blue);
border-radius: 50%; border: 3px solid white;
box-shadow: 0 0 0 3px var(--ses-
blue); } .timeline-year { font-family:
'Space Grotesk', sans-serif; font-size: 14px;
font-weight: 700; color: var(--ses-blue);
margin-bottom: 5px; } .timeline-title {
font-weight: 700; color: var(--ses-dark);
margin-bottom: 5px; } .timeline-desc {
font-size: 14px; color:
#718096; } /* ========== FLOWCHART /
WORKFLOW ========== */ .workflow {
display: flex; flex-direction: column;
gap: 0; margin: 25px
0; } .workflow-step { display: flex;
align-items: center; gap: 20px;
padding: 20px; background: white;
border: 2px solid #E2E8F0; border-radius:
16px; position:
relative; } .workflow-step:not(:last-
child)::after { content: '↓'; position:
absolute; bottom: -28px; left: 50%;
transform: translateX(-50%); width: 32px;
height: 32px; background: var(--ses-blue);
color: white; border-radius: 50%;
display: flex; align-items: center;
justify-content: center; font-size: 16px;
z-index: 2; } .workflow-step:not(:last-
child) { margin-bottom:
28px; } .step-number { width:
48px; height: 48px; background:
linear-gradient(135deg, var(--ses-blue), var(--ses-
accent)); color: white; border-radius:
14px; display: flex; align-items:
center; justify-content: center; font-
family: 'Space Grotesk', sans-serif; font-size:
20px; font-weight: 700; flex-shrink: 0;
} .step-content h4 { font-size: 17px;
font-weight: 700; color: var(--ses-dark);
margin-bottom: 4px; } .step-content p {
font-size: 14px;