svg { pointer-events: none; }
    g.base .tile { pointer-events: visible; }
    g.base.editable .tile { cursor: pointer; }
    g.frontier .frontier { fill: hsl(220, 50%, 50%); }
    
    path.parent { fill: none; stroke: hsl(30, 20%, 65%); stroke-width: 3px; }
    #arrowhead { fill: hsl(30, 20%, 65%); }

    path.path-trace { fill: none; stroke: hsl(30, 5%, 90%); stroke-width: 11px; }

    g.heuristic_distance .heuristic { fill: none; stroke: hsl(330, 50%, 50%); stroke-width: 4px; }
    
    path.contour { fill: none; stroke-width: 1px; }
    
    .draggable { pointer-events: visible; cursor: move /* IE */; cursor: grab; touch-action: none; }
    .draggable:hover { filter: url(#drop-shadow); }
    .draggable.dragging { cursor: grabbing; }
    path.start { fill: hsl(0, 50%, 50%); stroke: none; }
    path.goal { fill: none; stroke: hsl(310, 50%, 50%); stroke-width: 7px; }

    g.base .tile { fill: hsl(0, 10%, 85%); }
    .land, g.base .visited { fill: hsl(30, 20%, 75%); }
    g.base .weight-Infinity { fill: hsl(60, 5%, 50%); stroke: hsl(60, 5%, 50%); stroke-width: 1.5px; }
    g.base .weight-5 { fill: hsl(110, 20%, 60%); }
    .meadow, g.base .weight-4 { fill: hsl(110, 20%, 60%); }
    .forest, g.base .weight-8 { fill: hsl(110, 20%, 30%); }
    .absent, g.base .weight-Infinity { fill: white; stroke: none; }
    .color-frontier g.base .frontier,
    .color-frontier g.base .current { fill: hsl(220, 50%, 60%); }
    .color-current g.base .current { fill: hsl(70, 70%, 70%); }

    #diagram-early-exit-false g.numeric_label_cost_so_far text.label,
    #diagram-early-exit-true g.numeric_label_cost_so_far text.label
    { fill: hsl(0, 10%, 40%); }

    .intro-diagram .intro-map-background rect.dungeon { fill: hsl(110, 20%, 60%); }
    .intro-diagram .intro-map-background rect.wilderness { fill: hsl(200, 50%, 70%); }
    .intro-diagram g.base .tile { fill: hsl(0, 0%, 100%); fill-opacity: 0.9; stroke: hsl(0, 0%, 60%); stroke-width: 0.5px; stroke-opacity: 0.5; }
    .intro-diagram .path-trace { stroke: hsl(280, 20%, 70%); stroke-opacity: 0.7; }
    .intro-diagram g.base :nth-child(6),
    .intro-diagram g.base :nth-child(11),
    .intro-diagram g.base :nth-child(12),
    .intro-diagram g.base :nth-child(13)
    { fill: hsl(110, 40%, 80%); }
    .intro-diagram g.base :nth-child(17),
    .intro-diagram g.base :nth-child(23),
    .intro-diagram g.base :nth-child(25)
    { fill: hsl(60, 50%, 80%); }

    .edges path { stroke: hsl(160, 30%, 50%); stroke-width: 4.5px; }
    .nodes circle { fill: hsl(230, 50%, 60%); stroke: hsl(230, 30%, 50%); stroke-width: 0.5px; }
    
    #diagram-graphs1-over path.path-trace { stroke-opacity: 0.0; }
    #diagram-graphs1-over.alternate path.path-trace { stroke-opacity: 0.7; }
    #diagram-graphs1-under.alternate { visibility: hidden; }

    button.hover {
        font-weight: bold;
        font-size: inherit;
        font-family: inherit;
        border: 1px outset hsl(0, 24%, 95%);
        border-radius: 4px;
        background: hsl(0, 24%, 95%);
        margin: 4px;
        padding: 2px;
        -webkit-appearance:none;
        cursor: pointer;
    }
    button.hover:hover {
        border-color: hsl(0, 48%, 46%);
        color: white;
        background: hsl(0, 48%, 46%);
        box-shadow: 1px 1px 3px hsla(0, 0%, 0%, 0.5);
    }

    #diagram-graphs2-grid g.base .visited { fill: hsl(0, 10%, 95%); }
    #diagram-graphs2-grid g.base .weight-2 { fill: hsl(110, 40%, 80%); stroke: hsl(110, 40%, 80%); stroke-width: 0.5px; }
    #diagram-graphs2-grid g.base .weight-3 { fill: hsl(60, 50%, 80%); stroke: hsl(60, 50%, 80%); stroke-width: 0.5px; }
    #diagram-graphs2-grid g.base .weight-Infinity { fill: hsl(110, 20%, 60%); stroke: hsl(110, 20%, 60%); }
    #diagram-graphs2-grid g.base .weight-20 { fill: hsl(200, 50%, 70%); stroke: hsl(200, 50%, 70%); stroke-width: 0.5px; }
    #diagram-graphs2-grid .path-trace { stroke: hsl(280, 30%, 70%); stroke-width: 5px; }

    #diagram-graphs2-waypoints { visibility: hidden; }
    #diagram-graphs2-waypoints.show { visibility: visible; }
    #diagram-graphs2-grid { visibility: hidden; background-color: white; }
    #diagram-graphs2-grid.show { visibility: visible; }
    
    #diagram1 .play_pause { display: none; }
    #diagram1 .label { fill: hsl(0, 10%, 80%); }
    #diagram1 path.edge { stroke: blue; }

    #diagram2 g.base .tile { fill: hsl(0, 10%, 85%); }
    #diagram2 g.base .weight-Infinity { fill: hsl(60, 5%, 50%); stroke: hsl(60, 5%, 50%); stroke-width: 1.5px; }
    #diagram2 .path-trace,
    #diagram-astar-1 g.cost_so_far .path-trace,
    #diagram-astar-3 g.cost_so_far .path-trace
    { stroke: hsl(280, 50%, 50%); stroke-width: 4px; }
    
    #diagram-contour-comparison .combined path.path-trace,
    #diagram-astar-3 path.path-trace { stroke-width: 20px; }

    #diagram-contour-comparison path.goal,
    #diagram-astar-1 path.goal,
    #diagram-astar-2 path.goal
    { stroke-width: 6px; }
    
    #diagram-weights-false path.goal,
    #diagram-weights-true path.goal
    { stroke-width: 8px; }
    
    #diagram-nongrid path.goal,
    #diagram-contour-comparison .combined path.goal
    { stroke-width: 10px; }
    
    .slider button { font-size: large; }
    
    pre em { font-weight: inherit; font-style: inherit; background-color: #ffc; padding: 2px 0; }
    .frontier { color: hsl(220, 50%, 50%); }
    .start { color: hsl(0, 50%, 50%); }
    .current { color: hsl(70, 100%, 30%); }
    .visited, .came_from { color: hsl(30, 40%, 40%); }
    .next { color: hsl(150, 40%, 40%); }
    .goal { color: hsl(310, 50%, 50%); }
    .path { color: hsl(280, 50%, 50%); }
    .cost_so_far, .new_cost { color: hsl(340, 30%, 40%); }
    .frontier, .start, .current, .visited, .came_from, .next, .goal, .path, .cost_so_far, .new_cost { font-weight: bold; }