/* Teaching pages share the workbench's warm paper and restrained green accents. */
.tutorial-center { max-width:1200px; margin:0 auto; color:var(--ink, #283426); }
.tutorial-heading { padding:16px 0 30px; }
.tutorial-heading .section-kicker { display:block; margin-top:16px; }
.tutorial-heading h1 { font-size:clamp(28px,3.2vw,44px); line-height:1.25; letter-spacing:-.04em; margin:14px 0; font-weight:600; }
.tutorial-heading p { color:#65715e; line-height:1.8; margin:0; }
.tutorial-heading .primary-button { margin-top:20px; }
.tutorial-overview { display:flex; flex-wrap:wrap; gap:12px 24px; color:#717766; font-size:12px; margin-top:22px; }
.tutorial-categories { display:flex; flex-wrap:wrap; gap:12px; padding:18px 0; border-block:1px solid var(--line, #dcded1); }
.tutorial-categories a { display:flex; align-items:center; gap:20px; padding:10px 16px; border:1px solid #dcded1; border-radius:6px; background:#fdfcf7; font-size:14px; }
.tutorial-categories a span { color:#747d6c; font-size:12px; }
.tutorial-group { scroll-margin-top:24px; padding-top:32px; }
.tutorial-group > header { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.tutorial-group h2 { font-size:22px; margin:0; }
.tutorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tutorial-card { display:flex; flex-direction:column; padding:22px; border:1px solid #dcded1; border-radius:10px; background:#fdfcf7; transition:border-color .15s; min-width:0; }
.tutorial-card:hover { border-color:#849273; }
.tutorial-card h3 { display:flex; justify-content:space-between; gap:12px; font-size:19px; margin:0; }
.tutorial-card h3 span { color:#7b866d; font-weight:400; }
.tutorial-card > p { font-size:13px; line-height:1.8; color:#697360; margin:12px 0 20px; }
.tutorial-card dl { margin:auto 0 22px; font-size:13px; line-height:1.7; }
.tutorial-card dl > div { display:grid; grid-template-columns:32px 1fr; gap:12px; margin-top:10px; }
.tutorial-card dt { color:#7b806f; }.tutorial-card dd { margin:0; }
.tutorial-card-link { display:flex; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid #e7e8df; font-size:12px; color:#466040; }
.tutorial-comparison { display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr); gap:16px; padding:24px; border:1px solid #dcded1; border-radius:10px; background:#f6f6ee; }
.tutorial-side { min-width:0; }.tutorial-side header { min-height:88px; }.tutorial-side header > span { font-size:12px; color:#6b7860; }
.tutorial-side h2 { font-size:19px; line-height:1.6; margin:10px 0 20px; }
.tutorial-arrow { align-self:center; text-align:center; color:#7c886e; font-size:28px; }
.tutorial-media { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.tutorial-example { margin:0; min-width:0; }.tutorial-example:only-child { grid-column:1/-1; }
.tutorial-blank { width:100%; height:210px; background:#fff; border:1px dashed #cbd1c2; border-radius:4px; }
.tutorial-example figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:12px; line-height:1.6; margin-top:10px; }
.tutorial-example figcaption span { color:#78806e; font-size:11px; }
.tutorial-instructions { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:48px; margin:36px 0; }
.tutorial-instructions h2 { font-size:20px; margin:0 0 18px; }
.tutorial-steps { padding:0; margin:0; list-style:none; }
.tutorial-steps li { display:flex; align-items:baseline; gap:18px; padding:18px 0; border-bottom:1px solid #dcded1; }
.tutorial-steps li > span { font-size:12px; color:#7c886e; font-variant-numeric:tabular-nums; }
.tutorial-steps p { margin:0; font-size:14px; line-height:1.9; }
.tutorial-notes section { padding:22px; background:#eeefe3; border-radius:8px; margin-bottom:18px; }
.tutorial-notes .section-kicker { display:block; margin-bottom:12px; }.tutorial-notes h2 { font-size:16px; }
.tutorial-prompt { font-size:14px; line-height:1.9; margin:0 0 14px; }
.tutorial-notes small { color:#707966; line-height:1.7; }.tutorial-notes ul { margin:0; padding-left:18px; font-size:13px; line-height:1.9; }.tutorial-notes li + li { margin-top:10px; }
.tutorial-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; border-top:1px solid #dcded1; padding:24px 0; margin-top:32px; font-size:13px; }
.tutorial-footer p { color:#717966; line-height:1.8; }
.tutorial-center a:focus-visible { outline:3px solid #a16b42; outline-offset:4px; }
@media(max-width:1100px) { .tutorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.tutorial-instructions { gap:24px; }.tutorial-media { grid-template-columns:1fr; } }
@media(max-width:760px) { .tutorial-grid,.tutorial-instructions,.tutorial-comparison { grid-template-columns:1fr; }.tutorial-comparison { padding:18px; gap:18px; }.tutorial-arrow { transform:rotate(90deg); }.tutorial-side header { min-height:0; }.tutorial-media { grid-template-columns:repeat(2,minmax(0,1fr)); }.tutorial-blank { height:180px; }.tutorial-heading { padding-top:0; }.tutorial-categories { gap:8px; }.tutorial-categories a { padding:10px; gap:10px; }.tutorial-card { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .tutorial-card { transition:none; } }
/* Keep teaching examples completely blank, including the global decorative overlay. */
body:has(.tutorial-center) > .ambient-geometry-field { display:none; }
#tutorial-group-create .tutorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:760px) { #tutorial-group-create .tutorial-grid { grid-template-columns:1fr; } }
.tutorial-io-summary { display:flex; align-items:center; gap:24px; padding:18px 22px; background:#eeefe3; border-radius:8px; }
.tutorial-io-summary p { flex:1; margin:0; font-size:14px; line-height:1.8; }.tutorial-io-summary b { display:block; color:#6b7860; font-size:12px; margin-bottom:5px; }
.tutorial-case { margin:32px 0 40px; }.tutorial-case-heading h2 { font-size:23px; margin:10px 0 16px; }
.tutorial-case-prompt { display:flex; gap:20px; font-size:14px; line-height:1.9; margin:0 0 18px; }.tutorial-case-prompt b { white-space:nowrap; color:#6b7860; font-size:12px; padding-top:2px; }
.tutorial-case .tutorial-side header { min-height:0; }.tutorial-case .tutorial-side h3 { font-size:18px; margin:10px 0 18px; }
.tutorial-image-link { display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #dcded1; border-radius:4px; overflow:hidden; min-width:0; }
.tutorial-image-link img { display:block; width:100%; height:360px; object-fit:contain; }
.tutorial-case .tutorial-blank { height:360px; }.tutorial-text-input { padding:28px; background:#fff; border:1px solid #dcded1; border-radius:4px; min-height:240px; }
.tutorial-text-input > span { font-size:12px; color:#6b7860; }.tutorial-text-input p { font-size:16px; line-height:2; }
.tutorial-case-note { font-size:12px; color:#6b7860; line-height:1.8; }
@media(max-width:760px) { .tutorial-io-summary { display:block; }.tutorial-io-summary > span { display:block; margin:8px 0; }.tutorial-case-prompt { display:block; }.tutorial-case-prompt b { display:block; margin-bottom:8px; }.tutorial-case .tutorial-media { grid-template-columns:1fr; }.tutorial-image-link img { height:auto; max-height:440px; }.tutorial-case .tutorial-blank { height:180px; } }
@media(min-width:761px) {
 .tutorial-lesson:has(.tutorial-case) > .tutorial-heading { position:relative; padding-right:220px; padding-bottom:22px; }
 .tutorial-lesson:has(.tutorial-case) > .tutorial-heading .primary-button { position:absolute; right:0; top:38px; margin-top:0; }
 .tutorial-io-summary b { display:inline; margin-right:14px; }
}
/* Real alpha stays in the PNG; the checkerboard only belongs to the preview. */
.tutorial-image-link.tutorial-alpha { background-color:#fff; background-image:conic-gradient(#e1e4de 25%,transparent 0 50%,#e1e4de 0 75%,transparent 0); background-size:20px 20px; }
.tutorial-case-management .tutorial-media { grid-template-columns:1fr; }
.tutorial-case-management .tutorial-image-link img { height:auto; max-height:520px; }
.tutorial-case-commerce .tutorial-comparison { grid-template-columns:minmax(140px,.65fr) 24px minmax(0,2.35fr); gap:16px; }
.tutorial-case-commerce .tutorial-side:last-child .tutorial-media { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tutorial-case-commerce .tutorial-image-link img { height:300px; }
.tutorial-delivered-copy { margin-top:20px; padding:24px; border:1px solid #dcded1; background:#fdfcf7; border-radius:8px; }
.tutorial-delivered-copy h3 { font-size:20px; margin:14px 0; }.tutorial-delivered-copy p { font-size:14px; line-height:1.9; margin:12px 0 0; max-width:76ch; }
@media(max-width:1000px) { .tutorial-case-commerce .tutorial-comparison { grid-template-columns:1fr; }.tutorial-case-commerce .tutorial-arrow { transform:rotate(90deg); }.tutorial-case-commerce .tutorial-side:first-child .tutorial-media { max-width:280px; } }
@media(max-width:760px) { .tutorial-case-commerce .tutorial-side:last-child .tutorial-media { grid-template-columns:1fr; }.tutorial-case-commerce .tutorial-image-link img { height:auto; max-height:480px; }.tutorial-delivered-copy { padding:18px; } }