flowchart LR
    subgraph Parse
        HTML[HTML bytes] --> DOM[DOM tree]
        CSS[CSS bytes] --> Sheets[Stylesheet collection]
    end
    
    subgraph Style
        DOM --> Styled[Styled tree]
        Sheets --> Styled
        Styled --> |cascade + inherit| Computed[Computed values]
    end
    
    subgraph Layout
        Computed --> BoxTree[Box tree]
        BoxTree --> |anonymous wrappers| Fragments[Fragment tree]
    end
    
    subgraph Paint
        Fragments --> DisplayList[Display list]
        DisplayList --> |stacking order| Raster[Pixmap]
    end

flowchart TD
    Element[Styled element] --> Display{display value?}
    Display --> |block| Block[Block box]
    Display --> |inline| Inline[Inline box]
    Display --> |flex| Flex[Flex container]
    Display --> |grid| Grid[Grid container]
    Display --> |table| Table[Table wrapper]
    Display --> |none| Skip[Skip subtree]
    Display --> |contents| Contents[Unwrap children]
    
    Block --> Anon{needs wrapper?}
    Anon --> |mixed content| AnonBlock[Anonymous block]
    Anon --> |table child| AnonTable[Anonymous table parts]
    
    Element --> Pseudo{pseudo-elements?}
    Pseudo --> Before[::before]
    Pseudo --> After[::after]
    Pseudo --> Marker[::marker]

flowchart TD
    Box[Box node] --> FC{formatting context}
    
    FC --> BFC[Block formatting context]
    BFC --> |floats, margins| BFCLayout[Block layout]
    BFCLayout --> Clear[Float clearing]
    BFCLayout --> Collapse[Margin collapsing]
    
    FC --> IFC[Inline formatting context]
    IFC --> |line boxes| IFCLayout[Inline layout]
    IFCLayout --> Bidi[Bidi reordering]
    IFCLayout --> Shaping[Text shaping]
    IFCLayout --> Wrap[Line breaking]
    
    FC --> FlexFC[Flex formatting context]
    FlexFC --> |main/cross axis| FlexLayout[Flex layout]
    FlexLayout --> FlexGrow[flex-grow/shrink]
    FlexLayout --> FlexAlign[Alignment]
    
    FC --> GridFC[Grid formatting context]
    GridFC --> |tracks, areas| GridLayout[Grid layout]
    GridLayout --> AutoPlace[Auto-placement]
    GridLayout --> TrackSize[Track sizing]
    
    FC --> TableFC[Table formatting context]
    TableFC --> |rows, columns| TableLayout[Table layout]
    TableLayout --> ColWidth[Column distribution]
    TableLayout --> BorderCollapse[Border collapse]
    
    FC --> MultiCol[Multi-column context]
    MultiCol --> |fragmentainers| ColLayout[Column layout]
    ColLayout --> ColBreak[Column breaks]
    ColLayout --> ColBalance[Balancing]

flowchart TD
    Fragments[Fragment tree] --> DL[Display list builder]
    
    DL --> Stack{stacking context?}
    Stack --> |z-index, opacity, transform| NewCtx[New stacking context]
    Stack --> |normal flow| Parent[Parent context]
    
    NewCtx --> Order[Paint order]
    Order --> BG[1. Background/borders]
    Order --> Neg[2. Negative z-index]
    Order --> BlockBG[3. Block backgrounds]
    Order --> Float[4. Floats]
    Order --> InlineContent[5. Inline content]
    Order --> Pos[6. Positioned z-index 0]
    Order --> PosZ[7. Positive z-index]
    
    DL --> Effects{effects?}
    Effects --> Filter[CSS filters]
    Effects --> Blend[mix-blend-mode]
    Effects --> Backdrop[backdrop-filter]
    Effects --> Clip[clip-path]
    Effects --> Mask[mask layers]
    
    DL --> Transform{transforms?}
    Transform --> T2D[2D transforms]
    Transform --> T3D[3D + perspective]
    Transform --> Flatten[Flatten to 2D for raster]

flowchart LR
    Text[Text content] --> Segment[Segmentation]
    Segment --> |UAX #29| Grapheme[Grapheme clusters]
    Segment --> |UAX #14| LineBreak[Line break opportunities]
    
    Segment --> Bidi[Bidi algorithm]
    Bidi --> |UAX #9| Levels[Embedding levels]
    Levels --> Reorder[Visual reordering]
    
    Reorder --> Itemize[Script itemization]
    Itemize --> Runs[Shaped runs]
    
    Runs --> Shape[OpenType shaping]
    Shape --> |features| GSUB[GSUB substitution]
    Shape --> |positioning| GPOS[GPOS positioning]
    
    Shape --> Glyphs[Glyph buffer]
    Glyphs --> Raster{glyph type?}
    Raster --> |outline| Outline[Outline rasterization]
    Raster --> |COLR| COLR[Color layers]
    Raster --> |sbix/CBDT| Bitmap[Embedded bitmap]
    Raster --> |SVG| SVGGlyph[SVG rendering]

flowchart TD
    subgraph "HTML parsing"
        Parser[HTML parser] --> Script{script tag?}
        Script --> |inline| Inline[Queue inline script]
        Script --> |src| Fetch[Fetch external]
        Script --> |defer| Defer[Defer queue]
        Script --> |async| Async[Async queue]
        Script --> |module| Module[Module graph]
    end
    
    subgraph "Event loop"
        TaskQ[Task queue] --> Pick[Pick oldest task]
        Pick --> Run[Run to completion]
        Run --> Micro[Microtask checkpoint]
        Micro --> |drain all| Micro
        Micro --> RAF{rAF callbacks?}
        RAF --> Frame[Run frame callbacks]
        Frame --> Render[Render]
        Render --> Idle{idle time?}
        Idle --> RIC[requestIdleCallback]
    end
    
    subgraph "VM execution"
        Run --> VM[vm-js bytecode]
        VM --> |fuel budget| Budget[Interrupt check]
        Budget --> |exceeded| Pause[Yield to host]
        VM --> |DOM call| Binding[WebIDL binding]
        Binding --> Mutation[DOM mutation]
        Mutation --> Invalidate[Invalidate style/layout]
    end

flowchart TD
    Rules[All matching rules] --> Origin{origin?}
    
    Origin --> UA[User-agent]
    Origin --> Author[Author]
    
    Author --> Layer{layer?}
    Layer --> Unlayered[Unlayered rules]
    Layer --> Named[Named layers]
    Named --> LayerOrder[Layer order]
    
    Author --> Scope{scope?}
    Scope --> Scoped[Scoped rules]
    Scoped --> Proximity[Scope proximity]
    
    Rules --> Important{important?}
    Important --> |yes| Reverse[Reverse origin order]
    Important --> |no| Normal[Normal order]
    
    Normal --> Specificity[Sort by specificity]
    Specificity --> |id, class, type| Spec[Specificity tuple]
    
    Spec --> Order[Source order]
    Order --> Winner[Winning declaration]
    
    Winner --> Inherit{inherited?}
    Inherit --> |yes| Parent[From parent]
    Inherit --> |no| Initial[Initial value]
    
    Winner --> Compute[Computed value]
    Compute --> Resolve[Resolve relative units]
    Resolve --> Final[Used value]

flowchart TD
    subgraph "Browser process"
        UI[Browser UI] --> Chrome[Chrome/tabs]
        Chrome --> Nav[Navigation]
        Nav --> IPC1[IPC channel]
    end
    
    subgraph "Network process"
        IPC1 --> NetMgr[Network manager]
        NetMgr --> HTTP[HTTP stack]
        NetMgr --> Cache[Disk cache]
        NetMgr --> Cookie[Cookie jar]
    end
    
    subgraph "Renderer process (sandboxed)"
        IPC1 --> Renderer[Renderer]
        Renderer --> Pipeline[Render pipeline]
        Renderer --> JS[JS execution]
        
        Sandbox[OS sandbox]
        Sandbox --> |Linux| Seccomp[seccomp-bpf]
        Sandbox --> |macOS| Seatbelt[Seatbelt profile]
        Sandbox --> |Windows| AppContainer[AppContainer]
    end
    
    Renderer --> |shared memory| Compositor[Compositor]
    Compositor --> GPU[GPU process]