:root { --ink:#0f172a; --muted:#64748b; --accent:#6366f1; --accent-bg:#eef2ff; --surface:#fff; --bg:#f8fafc; --border:#e2e8f0; --radius:14px; --shadow:0 1px 3px rgb(0 0 0 / 6%),0 4px 12px rgb(0 0 0 / 4%); }
* { box-sizing:border-box; margin:0; padding:0; } html { scroll-behavior:smooth; } body { color:var(--ink); background:var(--bg); font:16px/1.6 -apple-system,"Microsoft YaHei","PingFang SC",sans-serif; } a { color:inherit; }
.topbar, .site-header { position:sticky; top:0; z-index:50; background:rgb(255 255 255 / 85%); border-bottom:1px solid var(--border); backdrop-filter:blur(16px); }.topbar-inner { display:flex; align-items:center; justify-content:space-between; max-width:1280px; height:60px; margin:auto; padding:0 24px; }.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:1.05rem; font-weight:800; text-decoration:none; white-space:nowrap; }.topbar nav, .site-header nav { display:flex; gap:6px; }.nav-link { padding:7px 14px; border-radius:8px; color:var(--muted); font-size:.88rem; font-weight:600; text-decoration:none; }.nav-link:hover, .nav-link.active { color:var(--accent); background:var(--accent-bg); }.student-session { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.84rem; font-weight:600; white-space:nowrap; }.student-session a { color:var(--accent); text-decoration:none; }.student-session a:hover { text-decoration:underline; }
.legacy-main { max-width:none; margin:0; padding:0; }.hero { padding:64px 24px 48px; border-bottom:1px solid var(--border); background:linear-gradient(160deg,#eef2ff 0%,#f8fafc 50%,#fef3c7 100%); }.hero-inner { display:flex; align-items:center; gap:40px; max-width:1280px; margin:auto; }.hero-text { flex:1; }.badge { display:inline-flex; padding:5px 14px; border-radius:99px; color:#fff; background:var(--accent); font-size:.82rem; font-weight:700; }h1 { margin:16px 0 10px; font-size:clamp(2rem,4.5vw,3rem); line-height:1.15; letter-spacing:-.04em; }h1 em { color:var(--accent); font-style:normal; }.hero-sub { max-width:560px; color:var(--muted); font-size:1.05rem; line-height:1.7; }.hero-visual { display:grid; grid-template-columns:1fr 1fr; flex:0 0 320px; gap:10px; }.hero-card { display:block; padding:22px 16px; border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); background:var(--surface); text-align:center; text-decoration:none; box-shadow:var(--shadow); transition:transform .15s; }.hero-card:hover { transform:translateY(-2px); }.hero-card .num { color:var(--accent); font-size:1.8rem; font-weight:800; }.hero-card .label { margin-top:2px; color:var(--muted); font-size:.78rem; }
.chapter-wrap { max-width:1280px; margin:auto; padding:32px 24px 80px; }.chapter-header { display:flex; align-items:start; gap:20px; margin-bottom:28px; }.chapter-num { display:grid; flex:none; width:52px; height:52px; place-items:center; border-radius:14px; color:#fff; background:var(--accent); font-size:1.3rem; font-weight:800; }.chapter-info h1 { margin:0 0 4px; font-size:1.5rem; }.chapter-info p { color:var(--muted); font-size:.95rem; }.back-link { display:inline-block; margin-bottom:22px; color:var(--accent); font-weight:700; text-decoration:none; }
.deck-header { display:flex; align-items:start; gap:20px; margin-bottom:28px; }.deck-header h1 { margin:0 0 4px; font-size:1.5rem; }.deck-header .eyebrow { display:none; }.deck-header .lead { margin:4px 0 0; color:var(--muted); font-size:.95rem; }
.slide-viewer { display:flex; align-items:start; gap:24px; }.slide-main,.slide-sidebar { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }.slide-main { min-width:0; flex:1; overflow:hidden; }.slide-display { display:flex; min-height:400px; align-items:center; justify-content:center; background:#1e293b; }.slide-display img { display:block; max-width:100%; max-height:70vh; object-fit:contain; }.slide-controls { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--border); background:var(--bg); }.slide-controls button { padding:8px 18px; border:1px solid var(--border); border-radius:8px; color:var(--ink); background:var(--surface); font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; }.slide-controls button:hover { border-color:var(--accent); color:var(--accent); }.slide-controls button:disabled { opacity:.35; cursor:not-allowed; }.slide-counter { color:var(--muted); font-weight:700; }.slide-sidebar { flex:0 0 220px; max-height:80vh; padding:12px; overflow-y:auto; }.thumb-grid { display:grid; gap:8px; }.thumb { padding:0; overflow:hidden; border:2px solid transparent; border-radius:8px; background:#fff; cursor:pointer; opacity:.65; }.thumb:hover { opacity:.9; }.thumb.active { border-color:var(--accent); opacity:1; box-shadow:0 0 0 2px var(--accent-bg); }.thumb img { display:block; width:100%; }.thumb-label { display:block; padding:3px 0; color:var(--muted); text-align:center; font-size:.72rem; font-weight:600; }
.deck-player { display:flex; align-items:start; gap:24px; }.deck-player .deck-main { min-width:0; flex:1; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }.deck-player .slide-stage { display:flex; min-height:400px; align-items:center; justify-content:center; background:#1e293b; }.deck-player .slide-stage img { display:block; max-width:100%; max-height:70vh; object-fit:contain; }.deck-player > .thumb-grid { flex:0 0 220px; max-height:80vh; padding:12px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.deck-controls { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--border); background:var(--bg); }.deck-controls button { padding:8px 18px; border:1px solid var(--border); border-radius:8px; color:var(--ink); background:var(--surface); font:inherit; font-size:.88rem; font-weight:700; cursor:pointer; transition:border-color .15s,color .15s; }.deck-controls button:hover { border-color:var(--accent); color:var(--accent); }.deck-controls button:disabled { opacity:.35; cursor:not-allowed; }.deck-controls #slide-num { color:var(--muted); font-weight:700; }
.placeholder { max-width:680px; margin:50px auto; padding:48px; border:1px dashed #a5b4fc; border-radius:24px; background:var(--surface); text-align:center; }.placeholder .status { display:inline-block; padding:4px 12px; border-radius:99px; color:#92400e; background:#fef3c7; font-weight:800; }.button { display:inline-block; padding:11px 18px; border-radius:10px; color:#fff; background:var(--accent); font-weight:800; text-decoration:none; }main:not(.legacy-main) { max-width:1280px; margin:auto; padding:32px 24px 80px; }footer { padding:28px 24px; border-top:1px solid var(--border); color:var(--muted); text-align:center; font-size:.85rem; }
.eyebrow { margin:0 0 12px; color:var(--accent); font-size:.9rem; font-weight:800; letter-spacing:.08em; }.lead { max-width:680px; margin:18px 0 26px; color:var(--muted); font-size:1.05rem; }.card-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.card { display:flex; min-height:170px; flex-direction:column; justify-content:space-between; padding:22px; border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); background:var(--surface); text-decoration:none; box-shadow:var(--shadow); transition:transform .15s,border-color .15s; }.card:hover { border-color:#a5b4fc; transform:translateY(-3px); }.card-number { display:grid; width:38px; height:38px; place-items:center; border-radius:10px; color:var(--accent); background:var(--accent-bg); font-weight:800; }.card h2 { margin:18px 0 4px; font-size:1.08rem; line-height:1.35; }.card p { margin:0; color:var(--muted); font-size:.9rem; }
@media (max-width:900px) { .hero-inner { flex-direction:column; text-align:center; }.hero-sub { margin:auto; }.hero-visual { flex:none; width:100%; max-width:360px; }.slide-viewer { flex-direction:column; }.slide-sidebar { display:flex; width:100%; max-height:200px; overflow-x:auto; overflow-y:hidden; }.thumb-grid { display:flex; gap:8px; }.thumb { flex:0 0 80px; } } @media (max-width:600px) { .topbar nav,.site-header nav { display:none; }.student-session { margin-left:auto; }.hero { padding:40px 16px 32px; }.chapter-wrap,main:not(.legacy-main) { padding:20px 16px 60px; }.slide-display { min-height:240px; } }
@media (max-width:900px) { .card-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:600px) { .card-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .deck-player { flex-direction:column; }.deck-player > .thumb-grid { display:flex; width:100%; max-height:200px; overflow-x:auto; overflow-y:hidden; } }
.interaction-page { max-width:1160px !important; }
.activity-list-page { max-width:1160px !important; }
.activity-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,360px)); gap:18px; }
.activity-card { display:flex; min-height:220px; flex-direction:column; align-items:flex-start; padding:24px; border:1px solid var(--border); border-radius:var(--radius); color:var(--ink); background:var(--surface); box-shadow:var(--shadow); text-decoration:none; transition:transform .15s,border-color .15s,box-shadow .15s; }
.activity-card:hover { border-color:#a5b4fc; box-shadow:0 12px 30px rgb(79 70 229 / 12%); transform:translateY(-3px); }
.activity-card__chapter { display:inline-flex; padding:4px 10px; border-radius:999px; color:var(--accent); background:var(--accent-bg); font-size:.8rem; font-weight:800; }
.activity-card h2 { margin:18px 0 8px; font-size:1.28rem; }
.activity-card p { margin:0; color:var(--muted); }
.activity-card__action { margin-top:auto; padding-top:22px; color:var(--accent); font-weight:800; }
.interaction-heading { margin:10px 0 28px; }
.interaction-heading h1 { margin:0 0 10px; font-size:clamp(2rem,4vw,2.75rem); }
.interaction-heading p:last-child { color:var(--muted); }
.interaction-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:22px; align-items:start; }
.quiz-card,.leaderboard-card,.teacher-panel { padding:26px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.quiz-card__top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.question-type,.panel-kicker { display:inline-flex; padding:4px 10px; border-radius:999px; color:var(--accent); background:var(--accent-bg); font-size:.78rem; font-weight:800; }
.question-score { margin-left:auto; color:#b45309; font-size:.86rem; font-weight:800; }
.countdown { min-width:88px; color:#dc2626; font-size:1.65rem; text-align:right; font-variant-numeric:tabular-nums; }
.quiz-empty { padding:48px 20px; border:1px dashed #c7d2fe; border-radius:12px; color:var(--muted); text-align:center; }
.quiz-card h2,.leaderboard-card h2,.teacher-panel h2 { margin:7px 0 18px; font-size:1.3rem; line-height:1.45; }
.answer-options { display:grid; gap:10px; margin:22px 0; }
.answer-option { display:flex; align-items:center; gap:10px; padding:13px 15px; border:1px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .15s,background .15s; }
.answer-option:hover { border-color:#a5b4fc; background:#f8faff; }
.answer-option input { width:16px; height:16px; accent-color:var(--accent); }
.option-key { display:grid; width:24px; height:24px; place-items:center; border-radius:6px; color:var(--accent); background:var(--accent-bg); font-size:.78rem; font-weight:800; }
.fill-answer { display:grid; gap:8px; font-weight:700; }
.fill-answer input,.teacher-controls input,.teacher-controls select { width:100%; min-height:42px; padding:0 12px; border:1px solid var(--border); border-radius:8px; color:var(--ink); background:#fff; font:inherit; }
.button:disabled { opacity:.5; cursor:not-allowed; }
.button-secondary { color:var(--ink); background:#e2e8f0; }
.button-danger { background:#dc2626; }
.interaction-feedback { min-height:1.5em; margin:14px 0 0; color:var(--muted); font-weight:700; }
.answer-roster { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.answer-roster h3 { margin:0 0 9px; font-size:.9rem; }
.student-list,.leaderboard { margin:0; padding:0; list-style:none; }
.student-list { display:flex; flex-wrap:wrap; gap:7px; }
.student-list li { padding:4px 9px; border-radius:999px; color:#334155; background:#f1f5f9; font-size:.82rem; }
.student-list .muted,.leaderboard .muted { color:var(--muted); background:transparent; }
.leaderboard-card { position:sticky; top:82px; }
.leaderboard-card h2 { margin-bottom:16px; }
.leaderboard { display:grid; gap:8px; }
.leaderboard li { display:grid; grid-template-columns:27px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid #eef2f7; }
.leaderboard li:last-child { border-bottom:0; }
.leaderboard li span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leaderboard .rank { display:grid; width:23px; height:23px; place-items:center; border-radius:50%; color:var(--accent); background:var(--accent-bg); font-size:.76rem; font-weight:800; }
.leaderboard strong { color:#b45309; font-size:.88rem; }
.teacher-panel { display:block; margin-bottom:22px; background:linear-gradient(120deg,#f5f3ff,#eef8ff); }
.teacher-panel[hidden] { display:none; }
.teacher-controls { display:flex; align-items:end; gap:10px; margin-top:16px; }
.teacher-controls label { display:grid; gap:5px; color:var(--muted); font-size:.8rem; font-weight:700; }
.teacher-controls label { width:120px; }
.teacher-question-picker { display:grid; gap:5px; flex:1; color:var(--muted); font-size:.8rem; font-weight:700; }
.teacher-question-buttons { display:flex; flex-wrap:wrap; gap:7px; }
.teacher-question-buttons button { min-width:42px; min-height:38px; padding:0 10px; border:1px solid #c7d2fe; border-radius:8px; color:var(--accent); background:#fff; font:inherit; font-size:.82rem; font-weight:800; cursor:pointer; }
.teacher-question-buttons button:hover,.teacher-question-buttons button.active { color:#fff; border-color:var(--accent); background:var(--accent); }
.teacher-question-buttons button:disabled { color:#94a3b8; border-color:#e2e8f0; background:#f8fafc; cursor:not-allowed; }
.teacher-question-preview { width:100%; margin-top:20px; padding:18px; border:1px solid #c7d2fe; border-radius:10px; background:rgb(255 255 255 / 70%); }
.teacher-question-preview__meta { margin:0 0 8px; color:var(--accent); font-size:.82rem; font-weight:800; }
.teacher-question-preview h3 { margin:0 0 10px; font-size:1rem; line-height:1.55; }
.teacher-question-preview ul { display:grid; gap:5px; margin:0; padding-left:22px; color:#334155; font-size:.9rem; }
.teacher-question-preview__answer { margin:14px 0 0; color:#166534; font-weight:800; }
@media (max-width:900px) { .interaction-layout { grid-template-columns:1fr; }.leaderboard-card { position:static; }.teacher-controls { align-items:stretch; flex-direction:column; }.teacher-controls label { width:auto; } }
@media (max-width:600px) { .quiz-card,.leaderboard-card,.teacher-panel { padding:20px; }.answer-roster { grid-template-columns:1fr; }.quiz-card__top { align-items:flex-start; flex-direction:column; }.question-score { margin-left:0; }.countdown { text-align:left; } }
.course-home .course-hero { position:relative; overflow:hidden; background:linear-gradient(120deg,#ebe9ff 0%,#e0f8ff 52%,#fff2c9 100%); }
.course-home .course-hero::before { position:absolute; inset:auto -100px -180px auto; width:420px; height:420px; border-radius:50%; background:rgb(255 122 89 / 20%); content:""; filter:blur(8px); }
.course-home .hero-inner { position:relative; z-index:1; }
.hero-text .course-facts { margin-top:20px; }
.hero-art { position:relative; flex:0 0 380px; min-height:330px; }
.hero-illustration { display:block; width:100%; height:330px; border-radius:28px; object-fit:cover; box-shadow:0 22px 48px rgb(56 43 132 / 22%); }
.outcome-card:nth-child(2) span,.experiment-path li:nth-child(2) b { color:#0ea5e9; }
.outcome-card:nth-child(3) span,.experiment-path li:nth-child(3) b { color:#f97316; }
.outcome-card:nth-child(4) span,.experiment-path li:nth-child(4) b { color:#d97706; }
.roadmap-card:nth-child(3n+2) { border-top:4px solid #38bdf8; }
.roadmap-card:nth-child(3n) { border-top:4px solid #fb7185; }
.roadmap-card:nth-child(3n+1) { border-top:4px solid #fbbf24; }
@media (max-width:900px) { .hero-art { flex:none; width:100%; max-width:520px; }.hero-illustration { height:auto; aspect-ratio:3/2; } }
@media (max-width:600px) { .hero-art { min-height:0; }.hero-illustration { border-radius:20px; } }
.course-home .course-hero { padding-bottom:64px; }.course-facts { display:grid; grid-template-columns:repeat(2,minmax(120px,1fr)); flex:0 0 330px; gap:12px; }.course-facts div,.outcome-card,.roadmap-card,.assessment-card { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }.course-facts div { padding:18px; }.course-facts strong,.assessment-split strong { display:block; color:var(--accent); font-size:1.8rem; line-height:1.1; }.course-facts span,.assessment-split span { color:var(--muted); font-size:.85rem; }.hero-actions { display:flex; align-items:center; gap:16px; margin-top:24px; }.text-button { color:var(--accent); font-weight:800; text-decoration:none; }.text-button:hover { text-decoration:underline; }.homepage-section,.responsible-ai { max-width:1280px; margin:auto; padding:72px 24px; }.surface-section { max-width:none; background:#eef2ff; }.surface-section > * { max-width:1280px; margin-left:auto; margin-right:auto; }.section-heading { max-width:720px; margin-bottom:28px; }.section-heading h2,.assessment-card h2,.responsible-ai h2 { font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.25; }.outcome-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.outcome-card { padding:22px; }.outcome-card span { color:var(--accent); font-weight:800; }.outcome-card h3 { margin:14px 0 6px; }.outcome-card p,.roadmap-card p,.assessment-card p { color:var(--muted); font-size:.92rem; }.learning-roadmap { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.roadmap-card { display:block; min-height:190px; padding:22px; color:var(--ink); text-decoration:none; transition:transform .15s,border-color .15s; }.roadmap-card:hover { border-color:#a5b4fc; transform:translateY(-3px); }.roadmap-card span { color:var(--accent); font-size:.82rem; font-weight:800; }.roadmap-card h3 { margin:14px 0 8px; font-size:1.08rem; line-height:1.4; }.coming-soon { border-style:dashed; background:#f8fafc; }.coming-soon:hover { border-color:var(--border); transform:none; }.experiment-path { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0; list-style:none; }.experiment-path li { display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--border); }.experiment-path b { color:var(--accent); }.assessment-card { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:8px; padding:32px; }.assessment-split { display:flex; min-width:280px; overflow:hidden; border-radius:12px; }.assessment-split div { flex:1; padding:20px; background:var(--accent-bg); text-align:center; }.assessment-split div+div { background:#fef3c7; }.responsible-ai { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:40px; padding-bottom:40px; border-top:1px solid var(--border); }
@media (max-width:900px) { .course-facts { flex:none; width:100%; max-width:520px; }.outcome-grid,.learning-roadmap,.experiment-path { grid-template-columns:repeat(2,1fr); }.assessment-card,.responsible-ai { align-items:flex-start; flex-direction:column; }.assessment-split { width:100%; } }
@media (max-width:600px) { .course-home .hero { padding:40px 16px; }.homepage-section,.responsible-ai { padding:48px 16px; }.course-facts,.outcome-grid,.learning-roadmap,.experiment-path { grid-template-columns:1fr; }.hero-actions { align-items:flex-start; flex-direction:column; }.roadmap-card { min-height:auto; }.assessment-card { padding:24px; } }
.deck-player > .thumb-grid { grid-template-columns:1fr; }
.deck-player > .thumb-grid { grid-auto-rows:max-content; }
@media (max-width:900px) { .deck-player > .thumb-grid { display:flex; grid-template-columns:none; } }
.thumb img { display:block; width:100%; height:auto; object-fit:contain; }
.deck-player .deck-main { height:640px; display:flex; flex-direction:column; }.deck-player .slide-stage { min-height:0; flex:1; }.deck-player > .thumb-grid { height:640px; max-height:640px; overflow-y:auto; }
@media (max-width:900px) { .deck-player .deck-main { height:auto; display:block; }.deck-player .slide-stage { min-height:240px; }.deck-player > .thumb-grid { height:auto; max-height:200px; overflow-x:auto; overflow-y:hidden; } }
.deck-player > .thumb-grid { align-self:stretch; min-height:0; overflow-y:auto; overflow-x:hidden; }
@media (max-width:900px) { .deck-player > .thumb-grid { align-self:auto; min-height:auto; max-height:200px; overflow-x:auto; overflow-y:hidden; } }
.deck-player { display:flex; align-items:stretch; gap:24px; }.deck-player > .thumb-grid { flex:0 0 220px; max-height:none; }
@media (max-width:900px) { .deck-player { flex-direction:column; }.deck-player > .thumb-grid { display:flex; width:100%; max-height:200px; overflow-x:auto; overflow-y:hidden; } }
.experiment-page { max-width:1120px; }.experiment-heading { margin-bottom:28px; }.experiment-heading h1 { margin:0; }.experiment-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; }.experiment-step-nav { display:grid; gap:8px; padding:0; list-style:none; }.experiment-step-nav button { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px; color:var(--muted); background:var(--surface); font:inherit; font-weight:700; text-align:left; cursor:pointer; }.experiment-step-nav button:hover,.experiment-step-nav button.active { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }.experiment-panel,.screenshot-panel { padding:26px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }.experiment-step-count { margin:0 0 8px; color:var(--accent); font-size:.88rem; font-weight:800; }.experiment-panel h2,.screenshot-panel h2 { margin:0 0 10px; font-size:1.35rem; }.experiment-panel li { margin:8px 0; }.step-check { padding:12px 14px; border-radius:9px; background:#f1f5f9; }.experiment-controls { display:flex; justify-content:space-between; margin-top:24px; }.experiment-controls button { padding:8px 16px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font:inherit; font-weight:700; cursor:pointer; }.experiment-controls button:disabled { opacity:.4; cursor:not-allowed; }.screenshot-panel { display:grid; gap:18px; margin-top:24px; }.screenshot-upload { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }.upload-feedback { min-height:1.5em; margin:0; color:var(--muted); font-weight:700; }.upload-feedback.is-error { color:#b91c1c; }.screenshot-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }.screenshot-gallery p { grid-column:1 / -1; margin:0; color:var(--muted); }.screenshot-gallery figure { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; }.screenshot-preview-trigger { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }.screenshot-gallery img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }.screenshot-gallery figcaption { padding:8px; overflow:hidden; color:var(--muted); font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }.screenshot-preview { max-width:min(92vw,1100px); max-height:92vh; padding:16px; border:0; border-radius:var(--radius); background:var(--surface); box-shadow:0 20px 60px rgb(15 23 42 / 35%); }.screenshot-preview::backdrop { background:rgb(15 23 42 / 68%); }.screenshot-preview button { display:block; margin:0 0 10px auto; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font:inherit; font-weight:700; cursor:pointer; }.screenshot-preview img { display:block; max-width:calc(92vw - 32px); max-height:calc(92vh - 70px); object-fit:contain; } @media (max-width:700px) { .experiment-layout { grid-template-columns:1fr; }.experiment-step-nav { grid-template-columns:repeat(2,1fr); }.experiment-panel,.screenshot-panel { padding:20px; } } @media (max-width:420px) { .experiment-step-nav { grid-template-columns:1fr; } }
.experiment-page { max-width:1120px; }.experiment-heading { margin-bottom:28px; }.experiment-heading h1 { margin:0; }.experiment-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; }.experiment-step-nav { display:grid; gap:8px; padding:0; list-style:none; }.experiment-step-nav button { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:10px; color:var(--muted); background:var(--surface); font:inherit; font-weight:700; text-align:left; cursor:pointer; }.experiment-step-nav button:hover,.experiment-step-nav button.active { border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }.experiment-panel,.screenshot-panel { padding:26px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }.experiment-step-count { margin:0 0 8px; color:var(--accent); font-size:.88rem; font-weight:800; }.experiment-panel h2,.screenshot-panel h2 { margin:0 0 10px; font-size:1.35rem; }.experiment-panel li { margin:8px 0; }.step-check { padding:12px 14px; border-radius:9px; background:#f1f5f9; }.screenshot-panel { display:grid; gap:18px; }.screenshot-upload { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }.upload-feedback { min-height:1.5em; margin:0; color:var(--muted); font-weight:700; }.upload-feedback.is-error { color:#b91c1c; }.screenshot-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }.screenshot-gallery p { grid-column:1 / -1; margin:0; color:var(--muted); }.screenshot-gallery figure { margin:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; }.screenshot-preview-trigger { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }.screenshot-gallery img { display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; }.screenshot-gallery figcaption { padding:8px; overflow:hidden; color:var(--muted); font-size:.8rem; text-overflow:ellipsis; white-space:nowrap; }.screenshot-preview { max-width:min(92vw,1100px); max-height:92vh; padding:16px; border:0; border-radius:var(--radius); background:var(--surface); box-shadow:0 20px 60px rgb(15 23 42 / 35%); }.screenshot-preview::backdrop { background:rgb(15 23 42 / 68%); }.screenshot-preview button { display:block; margin:0 0 10px auto; padding:7px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface); font:inherit; font-weight:700; cursor:pointer; }.screenshot-preview img { display:block; max-width:calc(92vw - 32px); max-height:calc(92vh - 70px); object-fit:contain; }.experiment-steps { display:grid; gap:24px; }.experiment-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.9fr); gap:20px; align-items:stretch; }.experiment-row .screenshot-panel { margin-top:0; }.screen-capture-confirm { position:fixed; z-index:2147483647; bottom:32px; left:50%; padding:14px 28px; border:0; border-radius:999px; color:#fff; background:#4f46e5; box-shadow:0 12px 32px rgb(15 23 42 / 35%); font:inherit; font-weight:800; cursor:pointer; transform:translateX(-50%); } @media (max-width:700px) { .experiment-row { grid-template-columns:1fr; }.experiment-panel,.screenshot-panel { padding:20px; } }