(box :layout 'column
 :margin-left 1 :margin-top 1 :padding '(1 2 1 2) :bgcolor "linen"
 (box :content "Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout."
      :padding '(1 (18)) :border "#334155" :text-align 'center
      :color "#000" :bgcolor "ghost white")
 (box :height 1)

 (box :content "No explicit viewport width here\nThis page mostly omits :width. The Playground binds the current preview width while rendering, so auto width behaves like a responsive container."
      :padding '(0 (16)) :border "#0F766E"
      :bgcolor "#F0FDFA" :color "#134E4A" :wrap-mode 'word)
 (box :height 1)

 (box :content "Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps."
      :padding '(0 (16)) :border "#EA580C" :border-bottom-p nil
      :bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word)
 (box :layout 'flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1
       :padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5"
       (box :content "Render" :width '(96) :padding '(0 (8))
            :border "#EA580C" :bgcolor "#FED7AA" :color "#111827"
            :text-align 'center)
       (box :content "Save" :width '(88) :padding '(0 (8))
            :border "#D97706" :bgcolor "#FEF3C7" :color "#111827"
            :text-align 'center)
       (box :content "Format" :width '(96) :padding '(0 (8))
            :border "#16A34A" :bgcolor "#DCFCE7" :color "#14532D"
            :text-align 'center)
       (box :content "Sample" :width '(104) :padding '(0 (8))
            :border "#0284C7" :bgcolor "#E0F2FE" :color "#0C4A6E"
            :text-align 'center)
       (box :content "Write" :width '(88) :padding '(0 (8))
            :border "#9333EA" :bgcolor "#F3E8FF" :color "#3B0764"
            :text-align 'center))
 (box :height 1)

 (box :content "Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow."
      :padding '(0 (16)) :border "#2563EB" :border-bottom-p nil
      :bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word)
 (box :layout 'flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1
       :padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF"
       :justify-content 'center
       (box :flex '(1 1 (210))
            :content "Overview\nThe row uses the current preview width automatically."
            :min-width '(180) :max-width '(280)
            :padding '(0 (10)) ;; :border "#2563EB"
            :bgcolor "#DBEAFE" :color "#111827" :wrap-mode 'word)
       (box :flex '(1 1 (210))
            :content "Editor\nDrag slowly or quickly; resize rendering follows the viewport."
            :min-width '(180) :max-width '(300)
            :padding '(0 (10)) ;; :border "#4F46E5"
            :bgcolor "#E0E7FF" :color "#111827" :wrap-mode 'word)
       (box :flex '(1 1 (210))
            :content "Preview\nThe preview updates from the current viewport width."
            :min-width '(180) :max-width '(320)
            :padding '(0 (10)) ;; :border "#7C3AED"
            :bgcolor "#EDE9FE" :color "#111827" :wrap-mode 'word)
       (box :flex '(1 1 (210))
            :content "Flow\nCards keep readable widths instead of overflowing."
            :min-width '(180) :max-width '(280)
            :padding '(0 (10)) ;; :border "#0891B2"
            :bgcolor "#CFFAFE" :color "#164E63" :wrap-mode 'word))
 (box :height 1)

 (box :content "What to watch\nNarrow preview: cards stack and text wraps. Wide preview: cards share a row and expand up to max-width. The source/preview split is preserved."
      :padding '(0 (16)) :border "#475569"
      :bgcolor "#F8FAFC" :color "#0F172A" :wrap-mode 'word))