(column
 (box :width '(720) :padding '(1 (18)) :border "#8F432F" :color
      "#252A2E" :bgcolor "#FFFDF8" :font-weight 'bold :text-align 'center
      "Ebox Playground\nPixel-precise layout, composed only from public nodes.")
 (box :width '(720) :height 1 :bgcolor "#FAF7F0")
 (box :width '(720) :padding '(0 (16)) :border "#C97252"
      :border-bottom 'none :color "#252A2E" :bgcolor "#F1D4C9"
      :wrap-mode 'word
      "01  FIXED + FRACTIONAL\nA definite Grid width divides into one exact track and one flexible track.")
 (grid :width '(720) :grid-template-columns '((220) 1fr) :gap
       '(1 (12)) :border "#C97252" :bgcolor "#FFF9F5"
       (box :width '(220) :padding '(1 0) :text-align 'center :color
	    "#252A2E" :bgcolor "#F1D4C9"
	    "FIXED TRACK\n220 px stays exact")
       (box :width '(486) :padding '(1 0) :text-align 'center :color
	    "#252A2E" :bgcolor "#F9E8E0"
	    "FRACTIONAL TRACK\n1fr receives the remaining width")
       (box :grid-column '(1 :span 2) :width '(718) :padding '(1 0)
	    :color "#663322" :bgcolor "#FFFDF8" :text-align 'center
	    :wrap-mode 'word
	    "The Grid owns one definite width; its tracks divide that space without competing viewport calculations."))
 (box :width '(720) :height 1 :bgcolor "#FAF7F0")
 (box :width '(720) :padding '(0 (16)) :border "#6D8A73"
      :border-bottom 'none :color "#252A2E" :bgcolor "#DCEBDD"
      :wrap-mode 'word
      "02  EXPLICIT PLACEMENT\nSpan columns, target cells, and leave the remaining nodes to auto placement.")
 (grid :width '(720) :grid-template-columns '((210) (210) 1fr) :gap
       '(1 (10)) :border "#6D8A73" :bgcolor "#F7FBF7"
       (box :grid-column '(1 :span 2) :width '(430) :padding '(1 0)
	    :text-align 'center :color "#24422D" :bgcolor "#DCEBDD"
	    "SPAN 1 → 3")
       (box :grid-column 3 :grid-row 1 :width '(278) :padding '(1 0)
	    :text-align 'center :color "#24422D" :bgcolor "#C8DDCB"
	    "COLUMN 3")
       (box :grid-column 1 :grid-row 2 :width '(210) :padding '(1 0)
	    :text-align 'center :color "#24422D" :bgcolor "#EDF5EE"
	    "ROW 2 / COL 1")
       (box :width '(210) :padding '(1 0) :text-align 'center :color
	    "#24422D" :bgcolor "#E3F0E5" "AUTO PLACED")
       (box :width '(278) :padding '(1 0) :text-align 'center :color
	    "#24422D" :bgcolor "#D4E6D7" "STABLE CELLS"))
 (box :width '(720) :height 1 :bgcolor "#FAF7F0")
 (box :width '(720) :padding '(0 (16)) :border "#4E7890"
      :border-bottom 'none :color "#252A2E" :bgcolor "#D9EAF2"
      :wrap-mode 'word
      "03  PUBLIC COMPOSITION\nColumn, Flex, and Grid share the same public node contract.")
 (flex :width '(720) :flex-flow '(row wrap) :gap '(1 (12)) :padding
       '(1 (12)) :border "#4E7890" :bgcolor "#F7FAFC"
       (box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width
	    '(180) :padding '(1 (12)) :color "#193846" :bgcolor
	    "#D9EAF2" "COLUMN\nvertical composition")
       (box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width
	    '(180) :padding '(1 (12)) :color "#3F3655" :bgcolor
	    "#E7E2F1" "FLEX\nwrap and distribute")
       (box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width
	    '(180) :padding '(1 (12)) :color "#6B3020" :bgcolor
	    "#F1D4C9" "GRID\nplace in two dimensions"))
 (box :width '(720) :height 1 :bgcolor "#FAF7F0")
 (box :width '(720) :padding '(0 (16)) :border "#8D887F" :color
      "#4D5651" :bgcolor "#EEEAE2" :wrap-mode 'word
      "AUTHOR FORMS  String · text · box · row · column · flex · grid"))