Served by the viz server at /_kit/viz-kit.css from the skill's own kit/ dir. Why this exists: nearly every viz independently re-derived the same dark theme (a GitHub-dark palette), re-guessed the exact hexes (so the "same" background drifted across files), and invented its own variable names (--txt vs --text vs --ink) for identical concepts. This file fixes the palette and the names ONCE so you can reach for var(--accent) / var(--good) instead of re-picking colors. The house style is dark-only on purpose — it's the look these vizzes converge on. */ :root { /* Surfaces, back to front */ --bg: #0d1117; --panel: #161b22; --panel-2: #21262d; --border: #30363d; /* Text */ --text: #e6edf3; --muted: #8b949e; /* Intent — accents that carry meaning */ --accent: #58a6ff; /* primary / links / selection */ --good: #3fb950; /* success / healthy / "yes" */ --warn: #d29922; /* caution / pending */ --danger: #f85149; /* error / blocked / "no" */ /* Categorical ramp — distinct hues for diagram categories / series. Use these when you need N visually separable colors, not meaning. */ --c1: #58a6ff; /* blue */ --c2: #3fb950; /* green */ --c3: #d29922; /* amber */ --c4: #bc8cff; /* purple */ --c5: #4ec9b0; /* teal */ --c6: #f85149; /* red */ /* Type */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Spacing rhythm */ --r: 8px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } html { /* Paint the canvas itself. body is height:100% (one viewport), so on a page taller than the viewport the area BELOW the body box would otherwise reveal the browser's default (lighter) canvas when scrolled — showing as a horizontal "line" mid-page where body's --bg ends. Putting --bg on the root keeps the whole canvas dark. */ background-color: var(--bg); } body { /* A faint top-glow over the flat background — the recurring "radial-gradient at 60% 0%" idiom, standardized. Sized large and faded to transparent well past the fold (color-mix dilutes --panel) so the glow→--bg transition never forms a visible edge mid-page — the earlier tight 600px gradient left a "boundary" band. */ background: radial-gradient(1600px 1000px at 50% -30%, color-mix(in srgb, var(--panel) 55%, transparent), transparent 75%), var(--bg); color: var(--text); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Header: title + one-line muted subtitle — the chrome ~19/22 vizzes open with. */ .viz-header { padding: 20px 24px; } .viz-header h1 { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.01em; } .viz-header .sub, .sub { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; } /* Panels / cards */ .panel, .card { background: var(--panel); border: 1px solid var(--border); border-radius: calc(var(--r) * 1.5); padding: 16px; } /* Slide-in detail drawer (click a node → details). Toggle .open. */ .drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 90vw); background: var(--panel); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.2s ease; overflow: auto; padding: 20px; z-index: 50; } .drawer.open { transform: none; } /* Legend: the single most common component (~16/22), reinvented differently each time. Two swatch shapes: a filled square for nodes, a short rule for edge types. */ .legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; background: var(--accent); } .swatch.line { width: 16px; height: 0; border-radius: 0; border-top: 2px solid var(--accent); } /* Animated "flow" edge — dashed line whose dashes drift along the path. The @keyframes was identical everywhere but for the offset magnitude; here it's one class. Apply to an SVG /: . */ @keyframes viz-dash { to { stroke-dashoffset: -20; } } .flow { stroke-dasharray: 6 4; animation: viz-dash 1s linear infinite; } /* Auto-wrapping SVG label (see labelBox() in viz.js). Fills its and centers; overflow is clipped, never spilled. */ .vsvg-label { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text); font: 12px/1.25 var(--sans); overflow: hidden; padding: 2px 6px; }
Film vs. History · 2016

Hacksaw Ridge vs. the true story of Desmond Doss

In 1945, a US Army medic who refused to touch a weapon walked into the deadliest battle of the Pacific and dragged wounded men off a cliff — one at a time — while praying for the strength to save just one more. Mel Gibson made a movie about it. Here's how the film measures up to what really happened, scene by scene.

Dir. Mel Gibson Andrew Garfield as Doss Real man: Desmond T. Doss · 1919–2006 Medal of Honor, 1945
The big picture

By biopic standards, Hacksaw Ridge is unusually faithful. Doss refused Hollywood for decades until filmmakers promised to get the details right, and his son called the result "remarkable." Almost every distortion below sits in the pre-war half — the family, the romance, boot camp, the court-martial. The cliff-top heroics that make the film feel unbelievable are the part that's closest to true.

The journey — his life vs. the legend

Step through Desmond Doss's life. The map follows him from Virginia across the Pacific and back; the timeline below shows the real dates on top and where the film moves, invents, or omits events beneath.

How one unarmed medic emptied the ridge

Through the night of May 5, 1945, Doss dragged the wounded to the cliff's edge and lowered them, one at a time, down the escarpment his company had just been driven off.

~400 ft MAEDA ESCARPMENT the cliff they called “Hacksaw Ridge” cargo-net climb rope anchored to a stump
0 men lowered · one at a time
“Lord, please help me get one more.”

He tied each man into a double-bowline sling he'd devised, belayed the rope around a tree stump, and worked for hours under fire. After each rescue he prayed the same words: “Lord, please help me get one more.” The official count is 75 men.

The story, scene by scene

film on the left · reality on the right
All beats Kept true Dramatized Invented Left out
Each frame is one story beat, colored by verdict — click to jump. Notice the red clusters before the battle, and the green through Okinawa.
No beats match this filter.

By the numbers & what it cost him

The “75” that isn't a headcount

The film's famous number is a negotiated compromise, not a tally.

0
100
Doss's own~50
Official citation75
His commander100

What the war cost him

Almost all of this is left out of the film.

Legs — grenade shrapnel (~17 fragments); he waited 5 hours rather than call another medic into fire.
Left arm — shattered by a sniper; he splinted it with a rifle stock and crawled 300 yards.
Lung — tuberculosis caught in the Pacific cost him a lung and five ribs.
Hearing — treatment drugs left him fully deaf by 1976; rated 90% disabled.

The final scorecard

The real story, in real photographs

just as the film ends — with the actual man

Every image below is a public-domain U.S. government photograph or record. Click any one to enlarge.