#example-walkthrough{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;padding:24px;border:1px solid #b8c8bf;border-radius:8px;background:var(--paper,#faf9f4);color:var(--ink,#243c34);font:17px/1.6 system-ui,sans-serif}
#example-walkthrough::backdrop{background:rgb(15 30 24 / 45%)}
#example-walkthrough h2{font-size:23px;margin:0 0 8px}
#example-walkthrough h3{font-size:20px;line-height:1.35;margin:18px 0 8px}
#example-walkthrough p{margin:8px 0}
#example-walkthrough-status{font-weight:650}
#example-walkthrough-answer{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#f0f2eb;border:1px solid #c7d1c9;font:16px/1.5 ui-monospace,monospace}
.example-walkthrough-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
#example-walkthrough button{min-height:44px;padding:8px 14px;font:inherit}
#example-walkthrough :focus-visible,#example-walkthrough-open:focus-visible{outline:3px solid #b36c00;outline-offset:3px}
@media(max-width:480px){#example-walkthrough{padding:18px}.example-walkthrough-actions{gap:8px}}
#example-walkthrough-open{background:var(--accent,#245c4d);color:#fff;border:1px solid var(--accent,#245c4d);font-weight:700;padding:8px 12px;white-space:nowrap}
#example-walkthrough-open:hover{filter:brightness(.9)}
#example-task-prompt{padding:8px 12px;margin:0 0 8px;border-left:4px solid var(--accent,#245c4d);background:var(--soft,#eaf0e8);color:var(--ink,#243c34);font-size:14px;line-height:1.4}
#example-task-prompt[hidden]{display:none}
#example-task-prompt strong{float:left;margin-right:10px}
#example-task-prompt p{margin:0}
#example-task-prompt p:last-child{clear:both;font-size:13px;margin-top:3px}
body>header #sample-navigation{padding:0;gap:6px;flex:0 0 auto;flex-wrap:nowrap;margin:0}
body>header #sample-navigation span{font-size:13px;white-space:nowrap}
body>header #sample-navigation a{font-size:13px;padding:7px 8px;white-space:nowrap}
@media(min-width:1200px){body>header:has(#sample-navigation){flex-wrap:nowrap}body>header:has(#sample-navigation) .wordmark{font-size:21px}body>header:has(#sample-navigation) #oc-start{flex-wrap:nowrap;gap:4px}body>header:has(#sample-navigation) #oc-start a,body>header:has(#sample-navigation) #oc-start button{font-size:13px;padding:7px 8px;white-space:nowrap}}
@media(max-width:1199px){body>header:has(#sample-navigation){flex-wrap:wrap!important}body>header #sample-navigation{order:2;width:100%;flex-wrap:wrap}body>header:has(#sample-navigation) #oc-start{order:0}}
@media(max-width:650px){body>header #sample-navigation{order:2;width:100%}body>header #oc-start{order:3}#example-task-prompt{font-size:14px}}