@layer demo{.caterpillar-demo{--garden-sky:#eef4e8;--garden-ink:#355342;--paper:#fffbef;--paper-ink:#534530;scroll-margin-top:8px}[data-theme=dark] .caterpillar-demo{--garden-sky:#243a35;--garden-ink:#d4e4cb;--paper:#302e27;--paper-ink:#efe1bd}.caterpillar-demo .demo-heading{gap:6px;padding:6px 12px}.caterpillar-demo .demo-heading strong{font-size:1rem}.caterpillar-story{background:var(--garden-sky)}.garden-action{min-height:40px;color:var(--color-success);background:var(--color-success-bg);align-items:center;gap:8px;padding:6px 12px;display:flex}.garden-action>span{white-space:nowrap;font-size:.6875rem}.garden-action strong{font-size:.8125rem;font-weight:500}.garden-action.is-conflict{color:var(--color-warning);background:var(--color-warning-bg)}.caterpillar-garden{color:var(--garden-ink)}.garden-art{width:100%}.garden-svg{width:100%;max-width:100%;height:clamp(90px,100dvh - 480px,260px);font-family:var(--font-mono);display:block}.garden-index{fill:var(--garden-ink);font-size:19px}.garden-conflict-mark{fill:var(--color-warning);font:700 15px var(--font-ui)}.garden-leaf[data-status=past] .leaf-blade{opacity:.5}.garden-leaf .leaf-blade{transform-origin:0 25px;transition:opacity var(--crawl-time)}.garden-leaf.is-eaten .leaf-blade{animation:leaf-nibble var(--crawl-time) ease-out}.caterpillar-head,.caterpillar-boundary,.caterpillar-segment{transition:transform var(--crawl-time) cubic-bezier(.36, 0, .25, 1), opacity var(--crawl-time)}.caterpillar-wriggle{animation:caterpillar-step var(--crawl-time) ease-in-out}.caterpillar-chew{transform-origin:3px 18px;animation:caterpillar-chew var(--crawl-time) ease-in-out 2}.is-playing .caterpillar-antennae{transform-origin:0 -24px;animation:1.6s ease-in-out infinite antenna-sway}.garden-props{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch;gap:18px;max-width:520px;margin:0 auto;padding:0 16px 10px;display:grid}.caterpillar-notebook{background:repeating-linear-gradient(transparent 0 23px, #9baea222 23px 24px), var(--paper);color:var(--paper-ink);border:1px solid #9e8d6877;border-radius:4px 10px 10px 4px;min-width:0;padding:6px 10px 6px 18px;position:relative;box-shadow:2px 3px #9e8d6833}.notebook-binding{flex-direction:column;justify-content:space-between;display:flex;position:absolute;top:14px;bottom:14px;left:-6px}.notebook-binding i{background:#fff4;border:2px solid #9b927c;border-radius:8px;width:13px;height:7px}.notebook-heading{justify-content:space-between;align-items:center;height:28px;display:flex}.notebook-heading strong{font-size:.8125rem}.notebook-pencil{width:23px;height:28px}.is-writing .notebook-pencil{animation:.65s ease-in-out 2 notebook-write}.notebook-entries{gap:2px;max-height:66px;display:grid;overflow:auto}.notebook-entry{font:.8125rem/20px var(--font-mono);border-radius:4px;grid-template-columns:1fr 1fr 1fr 2.5fr;align-items:center;gap:3px;padding:1px 4px;display:grid}.notebook-entry small{font:.625rem/20px var(--font-ui);text-align:right;white-space:nowrap}.notebook-entry.is-current{color:var(--color-success);background:var(--color-success-bg);outline:1px solid var(--color-success)}.caterpillar-record{color:var(--color-success);background:var(--color-success-bg);border:1px solid #9c936659;border-radius:10px;align-content:center;padding:8px 12px;box-shadow:2px 3px #9e8d6822}.caterpillar-record>span{font-size:.75rem;display:block}.caterpillar-record>strong{align-items:baseline;gap:7px;margin-top:4px;display:flex}.caterpillar-record b{font:700 1.75rem/1.1 var(--font-mono)}.caterpillar-record small{font-size:.6875rem;font-weight:400}.caterpillar-demo .caterpillar-record p{font:.875rem var(--font-mono);margin:4px 0 0}.is-measuring{animation:.6s ease-out record-glow}.garden-window{flex-wrap:wrap;justify-content:center;gap:0 12px;padding:2px 10px 8px;font-size:.6875rem;line-height:20px;display:flex}.garden-window.is-conflict{color:var(--color-warning)}.caterpillar-controls{border-top:1px solid var(--color-border-subtle);padding:8px 12px}.caterpillar-transport{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.caterpillar-transport button{white-space:nowrap;padding:6px 4px;font-size:.8125rem}.caterpillar-control-meta{color:var(--color-text-secondary);justify-content:space-between;align-items:center;gap:12px;margin-top:4px;font-size:.75rem;display:flex}.caterpillar-control-meta label{align-items:center;gap:8px;display:flex}.caterpillar-control-meta select{min-height:44px;padding:4px 8px;font-size:.75rem}@keyframes caterpillar-step{0%,to{transform:translateY(0)rotate(0)}45%{transform:translateY(-8px)rotate(-4deg)}75%{transform:translateY(-2px)rotate(2deg)}}@keyframes caterpillar-chew{0%,to{transform:scaleY(1)}50%{transform:scaleY(.4)}}@keyframes antenna-sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}@keyframes leaf-nibble{0%,to{transform:rotate(0)}35%{transform:rotate(-9deg)}70%{transform:rotate(5deg)}}@keyframes notebook-write{0%,to{transform:translate(0)rotate(0)}30%{transform:translate(-6px,4px)rotate(-8deg)}65%{transform:translate(2px,8px)rotate(5deg)}}@keyframes record-glow{50%{box-shadow:0 0 0 4px var(--color-success-bg)}}@media (width<=400px){.garden-props{gap:10px;padding-inline:12px}.caterpillar-record{padding-inline:8px}.garden-action{gap:6px}.garden-action strong{font-size:.75rem}.caterpillar-transport{gap:5px}.caterpillar-transport button{font-size:.75rem}}@media (prefers-reduced-motion:reduce){.caterpillar-demo *,.caterpillar-demo :before,.caterpillar-demo :after{transition:none!important;animation:none!important}}}.workspace-scene:has(.dp-diagram){grid-template-rows:44px minmax(342px,1fr) 100px;min-height:488px}.substring-diagram.dp-diagram{grid-template-rows:26px minmax(140px,1fr) 84px 92px}.dp-diagram .diagram-data{padding-bottom:0}.dp-diagram .diagram-dictionary{align-items:center;height:34px}.dp-diagram .diagram-entries{scrollbar-width:thin;height:34px;max-height:none;line-height:22px}.dp-diagram .diagram-result{margin-top:0;line-height:24px}.dp-diagram .diagram-result strong{font-size:19px}.dp-tmp-label{color:var(--pointer-j);flex-shrink:0;width:34px;font-weight:700}.dp-diagram .diagram-result small{white-space:nowrap;scrollbar-width:thin;min-width:0;overflow:auto}.dp-transition{border-top:1px solid var(--color-border-subtle);scrollbar-width:thin;min-width:0;padding:6px 16px;overflow:auto}.dp-transition-inner{width:max-content;min-width:100%}.dp-transition strong{align-items:baseline;gap:12px;font-size:12px;display:flex}.dp-transition small{color:var(--color-text-secondary);font-size:11px;font-weight:400}.dp-formula{font:13px/24px var(--font-mono);grid-template-columns:60px 20px 1fr;align-items:center;display:grid}.dp-formula>b{color:var(--diagram-res)}.dp-brace{font-size:45px;font-weight:300;line-height:48px}.dp-branch{transition:background var(--diagram-duration);border-left:3px solid #0000;border-radius:4px;justify-content:space-between;gap:28px;padding:1px 8px;display:flex}.dp-branch code{white-space:nowrap;font:inherit}.dp-branch[data-active=true]{background:var(--color-selection-bg);border-color:var(--pointer-j);color:var(--pointer-j)}@media (width<=1023px){.workspace-scene:has(.dp-diagram){grid-template-rows:40px minmax(342px,1fr) 104px;min-height:488px}.dp-diagram .diagram-caption{white-space:nowrap;justify-content:flex-start;overflow:auto}.dp-transition{padding-inline:12px}}.substring-workspace-host{z-index:100;width:100%;height:100dvh;margin:0;position:fixed;inset:0}.substring-workspace{box-sizing:border-box;width:100%;max-width:none;height:100dvh;max-height:none;color:var(--color-text);background:var(--color-bg);font:13px/1.5 var(--font-ui);overscroll-behavior:contain;border:0;margin:0;padding:0;position:fixed;inset:0}.substring-workspace[open]{grid-template-rows:56px 56px minmax(0,1fr) 88px;display:grid}.substring-workspace::backdrop{background:var(--color-bg)}.substring-workspace :is(h2,p,pre){margin:0}.substring-workspace :is(button,select,input){font:inherit;border-radius:6px;min-height:36px;padding:6px 10px}.substring-workspace button{white-space:nowrap}.substring-workspace :is(button,input,select,[tabindex]):focus-visible{outline:2px solid var(--color-action);outline-offset:2px}.workspace-header,.workspace-inputs,.workspace-pane-heading,.workspace-dock{background:var(--color-surface);align-items:center;display:flex}.workspace-header{border-bottom:1px solid var(--color-border-subtle);gap:24px;padding:0 24px}.workspace-header h2{min-width:0;font:500 14px/1.4 var(--font-ui);border:0;flex:1;padding:0;scroll-margin:0}.workspace-header h2 span{font:12px var(--font-mono);color:var(--color-text-secondary);margin-right:10px}.workspace-brand{white-space:nowrap;font-size:16px}.workspace-header>div{gap:8px;display:flex}.workspace-inputs{border-bottom:1px solid var(--color-border-subtle);gap:10px;padding:8px 24px}.workspace-inputs label{white-space:nowrap}.workspace-inputs input{width:220px;min-width:0;font-family:var(--font-mono)}.workspace-inputs select{width:155px;min-width:0}.workspace-inputs .workspace-method{flex-shrink:0;align-items:center;gap:6px;min-width:0;display:flex}.workspace-inputs .workspace-method select{width:232px}.workspace-inputs>span{color:var(--color-text-secondary);margin-left:auto;font-size:12px}.workspace-inputs>.input-error{color:var(--color-danger)}.workspace-tabs{display:none}.workspace-split{grid-template-columns:minmax(480px, var(--split)) 12px minmax(360px, 1fr);min-width:0;min-height:0;padding:16px 20px;display:grid;overflow:auto}.workspace-scene,.workspace-code{border:1px solid var(--color-border-subtle);background:var(--color-surface);border-radius:12px;min-width:0;min-height:0;overflow:hidden}.workspace-scene{grid-template-rows:44px minmax(324px,1fr) 100px;min-height:470px;display:grid}.workspace-code{grid-template-rows:44px minmax(160px,1fr) 36px 154px;min-height:467px;display:grid}.workspace-pane-heading{border-bottom:1px solid var(--color-border-subtle);justify-content:space-between;gap:8px;padding:0 16px}.workspace-pane-heading small{color:var(--color-text-secondary);margin-left:5px;font-size:11px;font-weight:400}.workspace-pane-heading label{white-space:nowrap;color:var(--color-text-secondary);align-items:center;gap:5px;font-size:11px;display:flex}.workspace-pane-heading input[type=checkbox]{width:14px;height:14px;min-height:14px;accent-color:var(--color-action)}.workspace-pane-heading>span{color:var(--color-text-secondary);align-items:center;gap:10px;font-size:12px;display:flex}.workspace-pane-heading button{min-height:30px;padding:3px 8px}.workspace-narration{background:var(--color-warning-bg);border-top:1px solid var(--color-border-subtle);padding:12px 16px;overflow:auto}.workspace-narration>strong{color:var(--color-warning);font-size:12px}.workspace-narration p{margin-top:5px;font-size:13px;line-height:1.6}.substring-diagram{--pointer-i:#bf4e35;--pointer-i-bg:#fff0eb;--pointer-j:#087c78;--pointer-j-bg:#ddf5f0;--diagram-res:#7143c4;background:var(--color-surface);grid-template-rows:32px minmax(174px,1fr) 118px;min-height:0;display:grid}[data-theme=dark] .substring-diagram{--pointer-i:#ffab94;--pointer-i-bg:#422c29;--pointer-j:#6fe3d5;--pointer-j-bg:#193c3c;--diagram-res:#c3a7ff}.diagram-caption{color:var(--color-text-secondary);justify-content:center;align-items:center;gap:12px;padding:4px 12px;font-size:12px;display:flex}.diagram-caption code{background:0 0;padding:0;font-size:11px}.diagram-caption.is-conflict{color:var(--color-warning)}.diagram-scroll{overscroll-behavior:contain;align-items:center;min-width:0;min-height:0;display:flex;overflow:auto}.diagram-svg{font-family:var(--font-mono);flex-shrink:0;margin-inline:auto;display:block;overflow:visible}.diagram-s{fill:var(--color-info);font-size:23px;font-style:italic;font-weight:700}.diagram-window{fill:var(--color-selection-bg);stroke:var(--color-info);stroke-width:1px;transition:x var(--diagram-duration), width var(--diagram-duration)}.diagram-window.is-conflict{fill:var(--color-warning-bg);stroke:var(--color-warning);stroke-dasharray:4 3}.diagram-cell rect{fill:var(--color-surface);stroke:var(--color-border-control);transition:fill var(--diagram-duration), stroke var(--diagram-duration)}.diagram-cell[data-status=boundary] rect{fill:var(--pointer-i-bg);stroke:var(--pointer-i)}.diagram-cell[data-status=window] rect{fill:var(--color-selection-bg);stroke:var(--color-info)}.diagram-cell[data-status=conflict] rect{fill:var(--color-warning-bg);stroke:var(--color-warning);stroke-dasharray:3 2}.diagram-cell.at-j rect{fill:var(--pointer-j-bg);stroke:var(--pointer-j);stroke-width:2px}.diagram-cell[data-status=past]{opacity:.6}.diagram-character{text-anchor:middle;fill:var(--color-text);font-size:24px}.diagram-index{text-anchor:middle;fill:var(--color-text-muted);font-size:11px}.diagram-empty{fill:var(--color-text-secondary);font-size:16px}.diagram-pointer{transition:transform var(--diagram-duration) ease}.diagram-pointer path{fill:none;stroke:currentColor;stroke-width:2px}.diagram-pointer text{text-anchor:middle;fill:currentColor;font-size:19px;font-weight:700}.pointer-i{color:var(--pointer-i)}.pointer-j{color:var(--pointer-j)}.diagram-data{width:min(100%,480px);min-width:0;margin-inline:auto;padding:0 16px 12px}.diagram-dictionary,.diagram-result{font:16px/28px var(--font-mono);align-items:baseline;gap:12px;display:flex}.diagram-dic-label,.diagram-res-label{flex-shrink:0;width:34px;font-weight:700}.diagram-dic-label{color:var(--color-warning)}.diagram-res-label{color:var(--diagram-res)}.diagram-entries{align-items:baseline;gap:0 8px;min-width:0;max-height:56px;padding:2px;display:flex;overflow:auto}.diagram-entry{white-space:nowrap;border-radius:4px;padding:0 4px}.diagram-entry em{color:var(--color-info);font-style:normal}.diagram-entry b{font-weight:500}.diagram-entry.is-outside{color:var(--color-text-muted)}.diagram-entry.is-current{background:var(--color-selection-bg);outline:1px solid var(--color-info)}.diagram-result{margin-top:6px}.diagram-result strong{font-size:21px;font-weight:600}.diagram-result small{color:var(--color-text-secondary);font:11px var(--font-ui)}.diagram-muted{color:var(--color-text-secondary);font-size:13px}.substring-workspace .diagram-legend{color:var(--color-text-muted);flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:10px;display:flex}.diagram-legend span{align-items:center;gap:5px;display:inline-flex}.diagram-legend i{border-radius:2px;width:7px;height:7px}.legend-i{background:var(--pointer-i)}.legend-j{background:var(--pointer-j)}.substring-diagram .is-updated{animation:.5s ease-out diagram-update}@keyframes diagram-update{0%{background:var(--color-selection-bg)}to{background:0 0}}.workspace-resizer{cursor:col-resize;touch-action:none;position:relative}.workspace-resizer:after{content:"";background:var(--color-border-control);border-radius:2px;width:2px;height:34px;position:absolute;top:calc(50% - 17px);left:5px}.workspace-resizer:hover:after,.workspace-resizer:focus-visible:after{background:var(--color-action)}.workspace-code-viewport{min-height:0;overflow:hidden}.workspace-code-viewport .live-code{border:0;border-radius:0;height:100%;margin:0}.workspace-code-viewport .live-code-heading{display:none}.workspace-code-viewport pre{box-sizing:border-box;background:var(--color-surface);overscroll-behavior:contain;height:100%;max-height:none;font:14px/26px var(--font-mono);border:0;margin:0;padding:10px 0;overflow:auto}.workspace-code-viewport pre code{min-width:max-content;font:inherit;background:0 0;padding:0;display:block}.workspace-code-viewport .code-line{min-height:26px;padding-inline:8px 16px;line-height:26px}.workspace-code-viewport .line-number{width:26px;font-size:11px}.workspace-code-viewport .syntax-token{color:var(--shiki-light)}[data-theme=dark] .workspace-code-viewport .syntax-token{color:var(--shiki-dark)}.workspace-code-status{color:var(--color-info);background:var(--color-surface-subtle);border-block:1px solid var(--color-border-subtle);padding:8px 16px;font-size:11px}.workspace-variables{padding:12px 16px;overflow:auto}.workspace-variables>strong{justify-content:space-between;font-size:12px;display:flex}.workspace-variables small{color:var(--color-text-secondary);font-size:11px;font-weight:400}.workspace-variable-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px;display:grid}.workspace-variable-grid>div{background:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:6px;padding:7px 8px}.workspace-variable-grid>.is-changed{border-color:var(--color-info);background:var(--color-selection-bg)}.workspace-variable-grid span{color:var(--color-text-secondary);font:11px var(--font-mono);display:block}.workspace-variable-grid b{color:var(--color-text);font-size:24px}.workspace-variable-grid>div:last-child b{color:var(--color-success)}.workspace-variables p{color:var(--color-text-secondary);margin-top:8px;font-size:11px}.workspace-dock{border-top:1px solid var(--color-border-subtle);gap:20px;padding:12px 24px;position:relative}.workspace-transport{gap:6px;display:flex}.workspace-transport button{min-height:40px}.workspace-transport .primary{min-width:88px}.workspace-timeline{flex:1;min-width:120px}.workspace-timeline label{color:var(--color-text-secondary);justify-content:space-between;gap:8px;font-size:11px;display:flex}.workspace-timeline label span:last-child{white-space:nowrap}.workspace-timeline input{width:100%;height:30px;min-height:30px;accent-color:var(--color-action);border:0;padding:0}.workspace-options{align-items:center;gap:8px;font-size:12px;display:flex}.workspace-options label{align-items:center;gap:6px;display:flex}.workspace-options select{min-width:0;max-width:132px}.workspace-help{border:1px solid var(--color-border-control);background:var(--color-surface);border-radius:8px;max-width:min(480px,100vw - 32px);padding:12px;position:absolute;bottom:calc(100% + 8px);right:16px;box-shadow:0 4px 16px #0002}@keyframes workspace-step{0%{opacity:.45}to{opacity:1}}@media (width<=1100px){.workspace-header{gap:14px;padding-inline:16px}.workspace-dock{gap:10px;padding-inline:12px}.workspace-split{padding-inline:12px}.workspace-inputs{padding-inline:16px}.workspace-options>button{display:none}}@media (width<=1023px){.substring-workspace[open]{grid-template-rows:52px 124px 40px minmax(0,1fr) 126px}.workspace-brand,.workspace-fullscreen{display:none}.workspace-header{gap:8px;padding-inline:12px}.workspace-header button,.workspace-inputs :is(input,select,button),.workspace-options select{min-height:44px}.workspace-header h2{font-size:12px}.workspace-header h2 span{display:none}.workspace-inputs{grid-template-columns:auto minmax(0,1fr) auto minmax(95px,.6fr);gap:2px 6px;padding:6px 12px;display:grid}.workspace-inputs input,.workspace-inputs select{width:100%}.workspace-inputs .workspace-method{grid-column:1/-1}.workspace-inputs .workspace-method select{flex:1;width:0}.workspace-inputs>span{grid-column:1/-1;margin-left:0;font-size:11px}.workspace-tabs{background:var(--color-surface);border-bottom:1px solid var(--color-border-subtle);gap:8px;padding-inline:12px;display:flex}.workspace-tabs button{background:0 0;border:0;border-radius:0}.workspace-tabs [aria-selected=true]{color:var(--color-action);box-shadow:inset 0 -2px var(--color-action)}.workspace-split{padding:8px;display:block}.workspace-resizer{display:none}.workspace-scene,.workspace-code{height:100%;min-height:470px}.workspace-split[data-tab=scene] .workspace-code,.workspace-split[data-tab=code] .workspace-scene{display:none}.workspace-scene{grid-template-rows:40px minmax(324px,1fr) 104px}.workspace-code{grid-template-rows:40px minmax(150px,1fr) 32px 145px}.workspace-pane-heading{padding-inline:10px}.workspace-pane-heading strong{font-size:12px}.workspace-pane-heading small{font-size:10px}.workspace-narration{padding:8px 10px}.workspace-narration p{font-size:12px}.diagram-data{padding-inline:18px}.diagram-caption{gap:8px;font-size:11px}.diagram-dictionary,.diagram-result{gap:8px;font-size:14px}.workspace-dock{grid-template-rows:44px 48px;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px 8px 16px;display:grid}.workspace-transport{grid-column:1/-1;justify-content:stretch}.workspace-transport button{flex:1;min-height:44px;padding-inline:4px}.workspace-transport .primary{min-width:70px}.workspace-options{gap:4px}.workspace-options label{gap:0;font-size:0}.workspace-options select{max-width:92px;padding-inline:4px;font-size:11px}.workspace-timeline{min-width:0}.workspace-timeline label{font-size:10px}.workspace-timeline label span:first-child{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@media (prefers-reduced-motion:reduce){.substring-workspace *{transition:none!important;animation:none!important}}