.tutorial-intro { max-width: 820px; padding: 42px 0 28px }
.tutorial-intro h1 { font-size: clamp(38px, 5vw, 64px); margin: 0 0 20px; letter-spacing: -2px; line-height: 1.08 }
.tutorial-intro > p { max-width: 720px }
.tutorial-help, .tutorial-attribution { font-size: 12px; line-height: 1.7; color: var(--muted); overflow-wrap: anywhere }
.tutorial-runtime { font-size: 13px; color: var(--green); margin-bottom: 8px }
.tutorial-runtime.error, .tutorial-help.error { color: var(--error) }
.tutorial-workbench { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border: 1px solid var(--line); border-radius: 8px; background: var(--white); overflow: hidden }
#tutorial-form, .tutorial-result { min-width: 0; padding: 28px }
.tutorial-result { border-left: 1px solid var(--line); background: #f8faf3 }
#tutorial-form label, .tutorial-source-section > label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 7px }
#tutorial-form input, #tutorial-form textarea, #tutorial-form select, #tutorial-source-file { display: block; width: 100%; min-width: 0; padding: 11px; border: 1px solid #bdc8bc; border-radius: 3px; background: var(--white); color: var(--ink); font: 14px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace }
#tutorial-form textarea { resize: vertical; min-height: 85px; white-space: pre-wrap }
#tutorial-preset { margin-bottom: 24px }
#tutorial-score { direction: ltr; font-variant-numeric: tabular-nums }
#tutorial-form [aria-invalid="true"] { border-color: var(--error) }
.tutorial-label-heading { display: flex; align-items: center; gap: 18px; justify-content: space-between; margin-top: 24px; margin-bottom: 8px }
.tutorial-label-heading label { margin: 0 !important }
#tutorial-label-mode { font-family: inherit; font-size: 12px; line-height: 1.4; padding: 7px; width: auto; max-width: 75% }
.tutorial-page textarea:focus-visible { outline: 3px solid #79ae89; outline-offset: 4px }
.tutorial-page [hidden] { display: none !important }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.tutorial-warning, .tutorial-error { border: 1px solid #d9b9ae; border-radius: 5px; padding: 10px 13px; background: #fff6ee; color: var(--error); font-size: 12px; overflow-wrap: anywhere }
#tutorial-run { margin-top: 10px; width: auto }
.tutorial-result-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px }
.tutorial-result-heading h2 { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; margin: 0 }
.tutorial-output { display: grid; gap: 12px; margin: 20px 0 }
.tutorial-output > div { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; min-width: 0 }
.tutorial-output dt { font: 600 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--green) }
.tutorial-output dt span { display: block; font: 11px/1.5 Inter, ui-sans-serif, sans-serif; color: var(--muted); margin-top: 2px }
.tutorial-output dd { font: 19px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; font-variant-numeric: tabular-nums; margin: 9px 0 0; white-space: pre-wrap; overflow-wrap: anywhere }
#result-label { font-size: 15px }
.tutorial-details { margin: 20px 0; font-size: 12px }
.tutorial-details summary { cursor: pointer; font-weight: 600; color: var(--green); margin-bottom: 12px }
.tutorial-details pre, .tutorial-source { padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: 440px }
.tutorial-input-detail { margin: 10px 0 18px }
.tutorial-source-section { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line) }
.tutorial-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px }
.tutorial-section-heading h2 { margin: 0; font-size: 26px; letter-spacing: -.6px }
.tutorial-section-heading .eyebrow { margin-bottom: 8px }
.tutorial-source-section > p { max-width: 800px }
#tutorial-source-file { max-width: 430px; font-family: inherit; font-size: 13px; line-height: 1.6 }
.tutorial-source { margin-top: 12px; max-height: 470px }
.tutorial-next { border-left: 3px solid #a3c6ae; padding: 1px 0 1px 22px; margin: 30px 0; max-width: 820px }
.tutorial-next h3 { margin-bottom: 8px; font-size: 19px }
.tutorial-evidence { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; list-style: none }
.tutorial-attribution { max-width: 840px; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 30px }
@media (max-width: 850px) { .tutorial-workbench { grid-template-columns: 1fr } .tutorial-result { border-left: 0; border-top: 1px solid var(--line) } .tutorial-output { grid-template-columns: repeat(2, minmax(0, 1fr)) } .tutorial-output > div:last-child { grid-column: 1 / -1 } }
@media (max-width: 540px) { #tutorial-form, .tutorial-result { padding: 20px } .tutorial-intro { padding-top: 26px } .tutorial-intro h1 { letter-spacing: -1px } #tutorial-form input, #tutorial-form textarea { font-size: 16px } .tutorial-output { grid-template-columns: minmax(0, 1fr) } }