@font-face{font-family:Inter;src:url('assets/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--paper:#f4f2ec;--white:#fff;--ink:#191b1c;--muted:#536358;--green:#142b21;--coral:#b43f26;--border:#cbd4c9;--selected:#e7ebe1;--r:12px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Inter,system-ui,sans-serif}::selection{background:#f5c5b7;color:var(--ink)}a{color:inherit;text-underline-offset:4px}button,select,input,textarea{font:inherit}button,select{min-height:44px}button{display:inline-flex;justify-content:center;align-items:center;gap:10px;background:transparent;color:var(--ink);border:1px solid #9ba99c;border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .15s}button:hover{background:var(--selected)}button:active{background:#dbe2d4}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,pre:focus-visible{outline:3px solid var(--coral);outline-offset:4px}button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}.primary{background:var(--green);border-color:var(--green);color:white;white-space:nowrap}.primary:hover{background:#284a38}.primary:active{background:#345940}.shell{max-width:1320px;margin:auto;padding:0 40px}.skip{position:absolute;left:16px;top:-100px;padding:12px;background:var(--white);z-index:20}.skip:focus{top:12px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 0;border-bottom:1px solid var(--border)}.author{display:flex;align-items:center;gap:12px;text-decoration:none}.author img{border-radius:50%;object-fit:cover}.author strong{font-size:14px;display:flex;align-items:center;gap:6px}.verified{width:18px;height:18px;vertical-align:middle}.author small{font-size:12px;color:var(--muted);display:block}.help-link{font-size:14px}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:48px 0}.intro h1{font-size:40px;line-height:1.14;letter-spacing:-.03em;margin:0;font-weight:750}.intro>p{margin:0;max-width:380px;color:var(--muted);font-size:16px}.workspace{display:grid;grid-template-columns:224px minmax(0,1fr);gap:48px;align-items:start}.library{position:sticky;top:24px}.library h2{font-size:14px;margin:0 0 16px;font-weight:650}nav{display:grid;gap:4px}nav button{display:block;width:100%;text-align:left;border:0;border-radius:8px;font-size:13px;font-weight:500;padding:10px 12px}nav button span{display:inline-block;width:26px;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}nav button[aria-current=true]{background:var(--selected);font-weight:700;color:var(--green)}nav button[aria-current=true] span{color:var(--coral)}.library-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}#picker,.mobile-label{display:none}main{min-width:0}.motion-heading{display:flex;justify-content:space-between;gap:24px;align-items:center}.position{font-size:12px;color:var(--muted);margin:0 0 4px}.motion-heading h2{font-size:30px;line-height:1.25;letter-spacing:-.025em;margin:0}.description{color:var(--muted);margin:12px 0 24px}.preview{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:#e7eade}.screen{aspect-ratio:9/7;max-height:630px;display:grid;align-items:center}.screen svg{display:block;width:100%;height:100%;max-height:630px}.playback{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:16px 0}.playback button{padding:8px 13px;min-height:40px}.playback label{font-size:13px;color:var(--muted);margin-left:8px}.playback input{width:150px;max-width:30vw;accent-color:var(--coral);cursor:pointer}.playback output{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px}#reduced{font-size:12px;color:var(--muted)}.context-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}.context-controls input{accent-color:var(--coral)}.context-controls button[aria-pressed=true]{background:var(--green);color:white}.context-controls small{color:var(--muted)}.where{font-size:14px;margin:8px 0 0;color:var(--muted)}.where:empty{display:none}.copy-message{min-height:28px;color:#285331;font-size:13px;margin-top:12px}#fallback-wrap{background:#e6ebdf;padding:20px;margin:8px 0 24px;border-radius:var(--r)}#fallback-wrap[hidden]{display:none}#fallback-wrap label{display:block;font-size:14px;font-weight:650}#copy-fallback{display:block;width:100%;min-height:220px;padding:14px;margin-top:12px;background:var(--white);border:1px solid #9ba99c;border-radius:6px;resize:vertical;font:13px/1.6 ui-monospace,Consolas,monospace}#fallback-wrap p{font-size:13px;margin-bottom:0}.deliverable{margin-top:24px;padding-top:28px;border-top:1px solid var(--border)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.section-heading h3{font-size:23px;line-height:1.3;letter-spacing:-.02em;margin:0}.section-heading p{font-size:13px;color:var(--muted);margin:6px 0 0}.section-heading button{flex-shrink:0}.prompt-text{font:15px/1.8 Inter,system-ui,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;max-width:75ch}.code-meta{display:flex;justify-content:space-between;align-items:center;background:var(--green);color:#d1ddce;padding:8px 20px;border-radius:var(--r) var(--r) 0 0;font:12px/1.5 ui-monospace,Consolas,monospace}.code-meta button{border:0;color:#d1ddce;font:12px/1.5 Inter,sans-serif;min-height:36px;padding:4px 0;border-radius:0}.code-meta button:hover{background:none;color:white;text-decoration:underline;text-underline-offset:4px}.code-box{background:var(--green);color:#e8eee3;margin:0;padding:20px;max-height:340px;overflow:auto;border-radius:0 0 var(--r) var(--r);font:12px/1.75 ui-monospace,Consolas,monospace;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-color:#849c87 var(--green);scrollbar-width:thin}.code-box.expanded{max-height:none}.code-box code{font:inherit}.previous-next{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:28px 0 64px}.previous-next span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.how-to{padding-top:32px;border-top:1px solid var(--border);scroll-margin-top:32px}.how-to h2{font-size:28px;letter-spacing:-.025em;margin:0 0 24px}.how-to ol{padding-left:24px;margin:0}.how-to li{padding-left:8px;margin:0 0 16px;font-size:15px;max-width:68ch}.how-to li::marker{font-weight:700;color:var(--coral)}.how-to>p{font-size:13px;color:var(--muted);margin-top:24px;max-width:75ch}footer{margin:64px 0 32px;padding-top:24px;border-top:1px solid var(--border);font-size:12px;line-height:1.8;color:var(--muted);max-width:100ch}noscript p{padding:24px;background:#fff4d4;color:#362a00}
@media(max-width:1000px){.shell{padding:0 24px}.workspace{grid-template-columns:190px minmax(0,1fr);gap:28px}.motion-heading{align-items:flex-start;flex-direction:column;gap:16px}.intro{gap:24px}.intro h1{font-size:34px}.intro p{max-width:300px}.screen{max-height:none}.primary{padding:10px 16px}}
@media(max-width:700px){.shell{padding:0 18px}.topbar{padding:18px 0}.author strong{font-size:12px}.author small{font-size:11px}.author{gap:8px}.help-link{font-size:12px}.intro{display:block;padding:32px 0}.intro h1{font-size:32px}.intro p{margin-top:16px;max-width:48ch;font-size:15px}.workspace{display:block}.library{position:static;margin-bottom:28px}.library h2,nav,.library-note{display:none}.mobile-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}#picker{display:block;width:100%;background:var(--white);border:1px solid #9ba99c;color:var(--ink);border-radius:8px;padding:10px 12px;font-size:14px}.motion-heading{gap:16px}.motion-heading h2{font-size:27px}.primary{width:100%;justify-content:space-between}.description{font-size:14px;margin-top:16px}.playback{gap:8px}.playback label{margin-left:0}.playback input{width:95px;max-width:22vw}.playback button{font-size:12px;padding:8px 10px}.section-heading{align-items:flex-start;gap:12px}.section-heading h3{font-size:21px}.section-heading p{font-size:12px}.section-heading button{font-size:12px;padding:9px 12px}.prompt-text{font-size:14px;line-height:1.85}.code-box{font-size:11px;padding:16px}.previous-next{gap:8px}.previous-next button{font-size:12px;padding:9px 12px}.how-to h2{font-size:25px}.how-to li{font-size:14px}.how-to{padding-top:24px}.copy-message{margin-top:8px}footer{margin-top:48px}.screen svg{max-height:none}}
.consultation{margin-top:48px;padding:40px;background:var(--green);color:var(--paper);border-radius:var(--r)}.consultation h2{font-size:32px;line-height:1.2;letter-spacing:-.025em;max-width:24ch;margin:0 0 20px}.consultation p{max-width:54ch;color:#d1ddce;margin:0 0 28px;font-size:16px}.consultation-link{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:48px;padding:12px 20px;background:var(--paper);color:var(--green);border-radius:8px;text-decoration:none;font-size:14px;font-weight:650}.consultation-link:hover{background:#dce5d4}.consultation-link:focus-visible{outline-color:#ef9c80}.consultation-link:active{background:#cbd9c4}@media(max-width:700px){.consultation{padding:28px 24px;margin-top:32px}.consultation h2{font-size:27px}.consultation p{font-size:15px}.consultation-link{width:100%;gap:12px;font-size:13px}}
.consultation-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.consultation-author{color:var(--paper);min-height:44px}.consultation-author small{color:#d1ddce}.consultation-author:focus-visible{outline-color:#ef9c80}.consultation-author img{flex-shrink:0}.consultation-author strong{white-space:nowrap}.consultation-author:hover strong{text-decoration:underline;text-underline-offset:4px}@media(max-width:700px){.consultation-actions{flex-direction:column;align-items:flex-start;gap:24px}.consultation-author{gap:12px}.consultation-author strong{font-size:13px}.consultation-author small{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.topbar-links{display:flex;gap:24px;align-items:center}@media(max-width:600px){.topbar-links{gap:10px;flex-direction:column;align-items:flex-end}.topbar-links a{font-size:12px}}