:root { color-scheme: light; font-family: system-ui, -apple-system, sans-serif; color: #292b26; background: #faf9f6; }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; }
header, footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 28px; }
header { border-bottom: 1px solid #e9e8e1; }
header strong { font-size: 21px; letter-spacing: -.8px; }
header span { margin-left: 20px; color: #787a70; font-size: 13px; }
#summary, footer { color: #787a70; font-size: 12px; }
main { position: relative; flex: 1; min-height: 0; }
#graph { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#graph:active { cursor: grabbing; }
#message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; }
h1 { font-size: clamp(24px, 5vw, 40px); font-weight: 500; letter-spacing: -1.3px; margin: 0 0 14px; }
#message p { max-width: 380px; line-height: 1.7; color: #787a70; margin: 0; }
kbd { border: 1px solid #d4d6ca; border-radius: 4px; padding: 0 6px; color: #292b26; }
nav { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border: 1px solid #e1e3d8; border-radius: 12px; background: #fff; box-shadow: 0 3px 14px #22222208; }
button { border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 14px; min-width: 44px; min-height: 44px; cursor: pointer; }
button:hover { background: #f0f2e9; }
button:focus-visible, svg:focus-visible { outline: 2px solid #6a793d; outline-offset: -2px; }
footer { padding-top: 12px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.edge { stroke: #68675f; stroke-width: 2; fill: none; marker-end: url(#arrow); }
.edge-label { font-size: 14px; text-anchor: middle; fill: #51554a; paint-order: stroke; stroke: #faf9f6; stroke-width: 7px; stroke-linejoin: round; }
.node { fill: #edf0e1; stroke: #89976b; stroke-width: 1.5; }
.node-label { text-anchor: middle; dominant-baseline: middle; font-size: 15px; font-weight: 500; fill: #303a22; }
[hidden] { display: none !important; }
@media (max-width: 600px) { header, footer { padding-left: 18px; padding-right: 18px; } header span { display: none; } footer { font-size: 11px; } footer span { display: none; } }