:root { font-family: system-ui, sans-serif; color: #283c40; background: #eef4f4; line-height: 1.55; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 760px; margin: auto; padding: 1.5rem; }
a { color: #17564d; } h1 { margin-bottom: .25rem; } h2 { font-size: 1.1rem; margin-bottom: .25rem; }
button, select { font: inherit; min-height: 48px; border: 2px solid #476b6a; border-radius: .6rem; background: white; color: #203b38; padding: .55rem .8rem; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #b35d20; outline-offset: 2px; }
button:disabled { opacity: .75; cursor: default; } button[aria-pressed='true'] { background: #c7e8d4; }
.tasks, .controls { display: flex; flex-wrap: wrap; gap: .5rem; } .task { min-width: 150px; text-align: left; } .task.done { background: #dae9da; }
.edges { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.edge-item { display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .65rem; border: 1px solid #a4c0b6; border-radius: .5rem; background: white; }
.edge-item::before { content: ''; width: 1.1rem; height: .5rem; border-top: 2px solid #245d50; border-right: 2px solid #245d50; transform: skewY(18deg); }
.result { margin-top: 1rem; padding: 1rem; background: #d6ecda; border-radius: .75rem; }