Code view:

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before

…lines 1–10 unchanged (10 lines)
11 }
12body.notReady {
13 display: none;
14 }
15#dashboard-nav {
16 align-items: center;
17 border: 0;
18 border-bottom: 1px solid var(--border-1);
19 display: flex;
20 flex-shrink: 0;
21 justify-content: space-between;
22 overflow-x: hidden;
23 padding: 0;
…lines 24–120 unchanged (97 lines)

After

…lines 1–10 unchanged (10 lines)
11 }
12body.notReady {
13 display: none;
14 }
15#dashboard-nav {
16 align-items: center;
17 background-color: var(--surface-1);
18 border: 0;
19 border-bottom: 1px solid var(--border-1);
20 display: flex;
21 flex-shrink: 0;
22 justify-content: space-between;
23 overflow-x: hidden;
…lines 24–121 unchanged (98 lines)

Before

stylesheet
rule_set (+61 nodes collapsed)
rule_set
selectors
class_selector
tag_name "body"
. "."
class_name
identifier "notReady"
block
{ "{"
declaration
property_name "display"
: ":"
plain_value "none"
; ";"
} "}"
rule_set
selectors
id_selector
# "#"
id_name "dashboard-nav"
block
{ "{"
declaration
property_name "align-items"
: ":"
plain_value "center"
; ";"
declaration
property_name "border"
: ":"
integer_value "0"
; ";"
declaration
property_name "border-bottom"
: ":"
integer_value
unit "px"
plain_value "solid"
call_expression
function_name "var"
arguments
( "("
plain_value "--border-1"
) ")"
; ";"
declaration
property_name "display"
: ":"
plain_value "flex"
; ";"
declaration
property_name "flex-shrink"
: ":"
integer_value "0"
; ";"
declaration
property_name "justify-content"
: ":"
plain_value "space-between"
; ";"
declaration
property_name "overflow-x"
: ":"
plain_value "hidden"
; ";"
declaration
property_name "padding"
: ":"
integer_value "0"
; ";"
declaration
property_name "position"
: ":"
plain_value "sticky"
; ";"
declaration
property_name "top"
: ":"
integer_value "0"
; ";"
declaration
property_name "width"
: ":"
integer_value
unit "%"
; ";"
declaration
property_name "z-index"
: ":"
integer_value "10"
; ";"
} "}"
rule_set (+26 nodes collapsed)
rule_set (+101 nodes collapsed)
rule_set
selectors
pseudo_class_selector
class_selector
. "."
class_name
identifier "tabButton"
: ":"
class_name
identifier "focus"
block
{ "{"
declaration
property_name "outline"
: ":"
integer_value "0"
; ";"
} "}"
comment "/* \n * TODO: support keyboard-driven navigation\n * \n.tabButt"...
rule_set (+56 nodes collapsed)
rule_set (+37 nodes collapsed)
rule_set (+34 nodes collapsed)
rule_set
selectors
class_selector
id_selector
# "#"
id_name "unsavedWarning"
. "."
class_name
identifier "on"
block
{ "{"
declaration
property_name "display"
: ":"
plain_value "initial"
; ";"
} "}"
rule_set (+21 nodes collapsed)
rule_set (+38 nodes collapsed)
rule_set (+25 nodes collapsed)
rule_set
selectors
descendant_selector
class_selector
tag_name "body"
. "."
class_name
identifier "noDashboard"
id_selector
# "#"
id_name "dashboard-nav"
block
{ "{"
declaration
property_name "display"
: ":"
plain_value "none"
; ";"
} "}"
comment "/* high dpi devices */"
rule_set (+36 nodes collapsed)
comment "/* hover-able devices */"
rule_set (+23 nodes collapsed)
rule_set (+33 nodes collapsed)
rule_set (+52 nodes collapsed)
rule_set (+27 nodes collapsed)

After

stylesheet
rule_set (+61 nodes collapsed)
rule_set
selectors
class_selector
tag_name "body"
. "."
class_name
identifier "notReady"
block
{ "{"
declaration
property_name "display"
: ":"
plain_value "none"
; ";"
} "}"
rule_set
selectors
id_selector
# "#"
id_name "dashboard-nav"
block
{ "{"
declaration
property_name "align-items"
: ":"
plain_value "center"
; ";"
declaration
property_name "background-color"
: ":"
call_expression
function_name "var"
arguments
( "("
plain_value "--surface-1"
) ")"
; ";"
declaration
property_name "border"
: ":"
integer_value "0"
; ";"
declaration
property_name "border-bottom"
: ":"
integer_value
unit "px"
plain_value "solid"
call_expression
function_name "var"
arguments
( "("
plain_value "--border-1"
) ")"
; ";"
declaration
property_name "display"
: ":"
plain_value "flex"
; ";"
declaration
property_name "flex-shrink"
: ":"
integer_value "0"
; ";"
declaration
property_name "justify-content"
: ":"
plain_value "space-between"
; ";"
declaration
property_name "overflow-x"
: ":"
plain_value "hidden"
; ";"
declaration
property_name "padding"
: ":"
integer_value "0"
; ";"
declaration
property_name "position"
: ":"
plain_value "sticky"
; ";"
declaration
property_name "top"
: ":"
integer_value "0"
; ";"
declaration
property_name "width"
: ":"
integer_value
unit "%"
; ";"
declaration
property_name "z-index"
: ":"
integer_value "10"
; ";"
} "}"
rule_set (+26 nodes collapsed)
rule_set (+101 nodes collapsed)
rule_set
selectors
pseudo_class_selector
class_selector
. "."
class_name
identifier "tabButton"
: ":"
class_name
identifier "focus"
block
{ "{"
declaration
property_name "outline"
: ":"
integer_value "0"
; ";"
} "}"
comment "/* \n * TODO: support keyboard-driven navigation\n * \n.tabButt"...
rule_set (+56 nodes collapsed)
rule_set (+37 nodes collapsed)
rule_set (+34 nodes collapsed)
rule_set
selectors
class_selector
id_selector
# "#"
id_name "unsavedWarning"
. "."
class_name
identifier "on"
block
{ "{"
declaration
property_name "display"
: ":"
plain_value "initial"
; ";"
} "}"
rule_set (+21 nodes collapsed)
rule_set (+38 nodes collapsed)
rule_set (+25 nodes collapsed)
rule_set
selectors
descendant_selector
class_selector
tag_name "body"
. "."
class_name
identifier "noDashboard"
id_selector
# "#"
id_name "dashboard-nav"
block
{ "{"
declaration
property_name "display"
: ":"
plain_value "none"
; ";"
} "}"
comment "/* high dpi devices */"
rule_set (+36 nodes collapsed)
comment "/* hover-able devices */"
rule_set (+23 nodes collapsed)
rule_set (+33 nodes collapsed)
rule_set (+52 nodes collapsed)
rule_set (+27 nodes collapsed)