/* Only loaded by the SDD workshop: existing pages retain their styles. */
.workshop { --paper:#fcfaf7; --ink:#1c2f38; --muted:#626e75; --orange:#f26c18; --navy:#1a2e38; --line:#d8ddda; margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; line-height:1.65; }
.workshop *, .workshop *::before, .workshop *::after { box-sizing:border-box; }
.workshop h1, .workshop h2, .workshop h3, .workshop p { margin:0; }
.workshop a { color:inherit; text-underline-offset:5px; }
.workshop a:focus-visible, .workshop [tabindex]:focus-visible { outline:3px solid #006d78; outline-offset:5px; }
.workshop .wrap { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.workshop .skip-link { position:absolute; top:8px; left:20px; padding:12px; background:white; z-index:10; transform:translateY(-160%); }
.workshop .skip-link:focus { transform:none; }
.workshop .site-header { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:15px; border-bottom:1px solid var(--line); }
.workshop .brand { display:block; flex-shrink:0; line-height:0; }
.workshop .brand img { display:block; width:108px; height:108px; object-fit:contain; }
.workshop .site-header nav { display:flex; align-items:center; gap:30px; font-size:.84rem; font-weight:600; }
.workshop .site-header nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.workshop .site-header nav a:hover { text-decoration:underline; }
.workshop .site-header .languages { gap:10px; }
.workshop .languages a { color:var(--muted); padding-inline:4px; }
.workshop .languages a[aria-current] { color:var(--ink); text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:3px; }
.workshop .hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:56px; align-items:center; padding-block:76px 72px; }
.workshop .eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#006d78; margin-bottom:22px; }
.workshop h1 { font-size:clamp(2.5rem,4.25vw,3.9rem); letter-spacing:-.055em; line-height:1.1; font-weight:800; text-wrap:pretty; }
.workshop h1 span { text-decoration:underline; text-decoration-color:var(--orange); text-decoration-thickness:5px; text-underline-offset:7px; }
.workshop .lead { font-size:1.08rem; max-width:510px; margin-top:28px; color:var(--muted); }
.workshop .button { display:inline-flex; gap:24px; align-items:center; justify-content:center; min-height:54px; padding:14px 23px; border-radius:5px; background:var(--orange); color:var(--ink); text-decoration:none; font-weight:700; font-size:.9rem; margin-top:30px; }
.workshop .button:hover { background:#e05d0c; color:#101d23; }
.workshop .button span { font-size:1.3rem; line-height:1; }
.workshop .support { margin-top:16px; font-size:.75rem; color:var(--muted); }
.workshop .example { border:1px solid #ccd4d3; border-radius:10px; background:#fff; box-shadow:0 20px 48px -28px #1c2f3845; overflow:hidden; }
.workshop .example-top { padding:22px 24px; display:flex; align-items:center; gap:12px; border-bottom:1px solid #e5e9e5; }
.workshop .example-top h2 { font-size:.92rem; letter-spacing:-.025em; }
.workshop .example-symbol { color:#006d78; font:1.7rem monospace; }
.workshop .example-tabs { display:flex; padding:0 22px; gap:17px; border-bottom:1px solid #e5e9e5; }
.workshop .example-tabs a { display:flex; align-items:center; min-height:53px; padding:9px 2px; font-size:.76rem; text-decoration:none; color:var(--muted); border-bottom:3px solid transparent; }
.workshop .example-tabs a[aria-selected="true"] { color:var(--ink); font-weight:700; border-color:var(--orange); }
.workshop .example-tabs a:focus-visible { outline-offset:-4px; }
.workshop .panels { padding:28px 26px; }
.workshop .example-panel + .example-panel { margin-top:30px; }
.workshop .example.is-enhanced .example-panel { margin:0; min-height:268px; }
.workshop .example-panel[hidden] { display:none; }
.workshop .filename { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:#626e75; font-size:.7rem; overflow-wrap:anywhere; }
.workshop .example-panel h3 { font-size:1.2rem; line-height:1.45; letter-spacing:-.025em; margin-top:16px; }
.workshop .example-panel ul { list-style:none; padding:0; margin:21px 0 0; }
.workshop .example-panel li { display:flex; align-items:baseline; gap:12px; font-size:.85rem; margin-top:14px; }
.workshop .example-panel li::before { content:''; flex:0 0 8px; height:8px; border:1px solid #607573; }
.workshop .scenario-label { margin-top:10px; color:#006d78; font-size:.72rem; font-weight:600; }
.workshop .example-caption { padding:14px 24px; background:#f3f5f1; font-size:.68rem; color:var(--muted); }
.workshop .facts { border-block:1px solid var(--line); }
.workshop .facts ul { padding:24px 0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; }
.workshop .facts li { font-size:.8rem; display:flex; align-items:center; gap:13px; }
.workshop .facts li span { color:#006d78; font-size:1.25rem; }
.workshop .section { padding-block:100px; scroll-margin-top:20px; }
.workshop h2 { font-size:clamp(2rem,3.1vw,2.7rem); font-weight:700; line-height:1.16; letter-spacing:-.045em; text-wrap:pretty; }
.workshop .problem, .workshop .experience { display:grid; grid-template-columns:1fr 1fr; gap:90px; }
.workshop .illustration { color:var(--muted); font-size:1rem; margin-top:26px; max-width:330px; }
.workshop .problem-list { list-style:none; counter-reset:problems; padding:0; margin:0; }
.workshop .problem-list li { counter-increment:problems; display:flex; align-items:baseline; gap:18px; font-size:.95rem; padding:13px 0; border-bottom:1px solid var(--line); }
.workshop .problem-list li::before { content:'0' counter(problems); color:#006d78; font: .72rem ui-monospace,monospace; }
.workshop .closing { margin-top:24px; font-size:.95rem; }
.workshop .method { background:var(--navy); color:white; }
.workshop .method > .wrap > .eyebrow { color:#83d6da; }
.workshop .method-intro { max-width:600px; margin-top:22px; color:#cad6da; }
.workshop .method-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding:0; margin:55px 0 65px; list-style:none; }
.workshop .method-steps li { border-top:1px solid #5b7079; padding-top:22px; }
.workshop .step-number { font-size:.8rem; color:#83d6da; font-family:ui-monospace,monospace; }
.workshop .method-steps h3 { font-size:1.25rem; margin-top:22px; }
.workshop .method-steps p { font-size:.9rem; color:#cad6da; margin-top:12px; }
.workshop .exercise { background:var(--orange); color:var(--ink); padding:46px; border-radius:6px; display:grid; grid-template-columns:1fr 1fr; gap:65px; }
.workshop .exercise .eyebrow { color:var(--ink); }
.workshop .exercise h2 { font-size:2.2rem; }
.workshop .exercise p:not(.eyebrow) { margin-top:24px; font-size:.95rem; }
.workshop .exercise ol { list-style:none; counter-reset:exercise; margin:0; padding:0; align-self:center; }
.workshop .exercise li { counter-increment:exercise; display:flex; align-items:baseline; gap:17px; border-bottom:1px solid #1c2f383b; padding:16px 0; font-size:.88rem; font-weight:500; }
.workshop .exercise li::before { content:'0' counter(exercise); font:.75rem ui-monospace,monospace; }
.workshop .case-badge { display:inline-block; margin-top:28px; padding:8px 12px; border:1px solid #b9cdcc; border-radius:4px; color:#006d78; font-size:.75rem; font-weight:600; }
.workshop .experience > div > p + p { margin-top:22px; }
.workshop .experience > div:last-child { color:var(--muted); font-size:1rem; }
.workshop .contact { border-top:1px solid var(--line); text-align:center; background:#f3f2eb; }
.workshop .contact h2 { max-width:740px; margin-inline:auto; }
.workshop .contact p:not(.eyebrow) { max-width:580px; margin:24px auto 0; color:var(--muted); }
.workshop .email { display:block; width:fit-content; margin:18px auto 0; padding:8px; font-size:.9rem; }
.workshop .site-footer { background:#2c3e50; color:#fff; padding:38px 0; font-size:.8rem; }
.workshop .site-footer .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.workshop .site-footer nav { display:flex; flex-wrap:wrap; gap:24px; }
.workshop .site-footer a { display:inline-flex; align-items:center; min-height:44px; }
.workshop .legal { width:100%; color:#d0d9dd; font-size:.72rem; }
.workshop .site-footer a:focus-visible { outline-color:#83d6da; }
@media(min-width:1450px) { .workshop .hero { padding-block:96px; } }
@media(max-width:1050px) { .workshop .hero { gap:32px; } .workshop .problem,.workshop .experience { gap:45px; } .workshop .exercise { gap:35px; padding:32px; } .workshop .example-tabs { gap:12px; padding-inline:16px; } .workshop .panels { padding-inline:20px; } }
@media(max-width:800px) { .workshop .site-header { flex-wrap:wrap; gap:4px 20px; padding-block:10px 14px; } .workshop .site-header > nav:not(.languages) { order:3; width:100%; justify-content:space-between; gap:14px; font-size:.75rem; } .workshop .brand img { width:88px; height:88px; } .workshop .hero { grid-template-columns:1fr; padding-block:48px; gap:40px; } .workshop h1 { font-size:clamp(2.5rem,6.5vw,3.8rem); max-width:630px; } .workshop .hero-copy { max-width:650px; } .workshop .example { width:100%; max-width:600px; } .workshop .example.is-enhanced .example-panel { min-height:255px; } .workshop .facts ul { gap:20px; } .workshop .section { padding-block:65px; } .workshop .method-steps { grid-template-columns:1fr 1fr; gap:34px; margin-block:40px; } .workshop .problem,.workshop .experience,.workshop .exercise { grid-template-columns:1fr; gap:32px; } }
@media(max-width:480px) { .workshop .facts ul { grid-template-columns:1fr; gap:12px; } .workshop h1 { font-size:2.5rem; } .workshop .eyebrow { font-size:.65rem; } .workshop .lead { font-size:1rem; } .workshop .example-top { padding:18px; } .workshop .example-tabs { gap:14px; } .workshop .example-tabs a { font-size:.72rem; } .workshop .example.is-enhanced .example-panel { min-height:300px; } .workshop .example-panel h3 { font-size:1.1rem; } .workshop .exercise { padding:26px 22px; } .workshop .exercise h2 { font-size:1.9rem; } .workshop .method-steps { grid-template-columns:1fr; } .workshop .method-steps h3 { margin-top:12px; } .workshop .button { gap:15px; padding-inline:18px; font-size:.85rem; } .workshop .site-footer .wrap { display:block; } .workshop .site-footer nav { margin-block:14px; } }
@media(prefers-reduced-motion:no-preference) { .workshop .button { transition:background .15s; } }