.tool{background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--shadow);border-radius:28px;gap:22px;padding:clamp(18px,4vw,32px);display:grid}.tool-keuze{scrollbar-width:none;gap:8px;margin:-4px;padding:4px;display:flex;overflow-x:auto}.tool-keuze::-webkit-scrollbar{display:none}@media (width>=700px){.tool-keuze{flex-wrap:wrap;overflow:visible}}.tool-pil{border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:999px;flex:none;min-height:42px;padding:0 16px;font-size:15px;font-weight:600;transition:background .2s,border-color .2s,color .2s}.tool-pil:hover{border-color:var(--accent-2)}.tool-pil[aria-checked=true]{background:var(--ink);border-color:var(--ink);color:#fff}.tool-podium{aspect-ratio:1;place-items:center;width:min(100%,420px);margin-inline:auto;display:grid;position:relative}.tool-compact .tool-podium{width:min(100%,320px)}.tool-cirkel{place-items:center;display:grid;position:absolute;inset:0}.tool-ring{width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.tool-ring circle{fill:none;stroke-width:3px}.tool-ring-achter{stroke:var(--line-soft)}.tool-ring-voor{stroke:var(--accent-2);stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000px}.tool-bol{aspect-ratio:1;background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--accent-2) 22%, #fff) 0%, color-mix(in srgb, var(--accent-2) 65%, #fff) 34%, var(--accent-2) 64%, var(--bol) 100%);width:86%;box-shadow:0 30px 70px -30px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 -16px 40px color-mix(in srgb, var(--accent-hover) 28%, transparent);will-change:transform;border-radius:50%;transform:scale(.62)}.tool[data-fase=vast] .tool-bol,.tool[data-fase=leeg] .tool-bol{box-shadow:0 0 0 10px color-mix(in srgb, var(--lime) 45%, transparent), 0 30px 70px -30px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 -16px 40px color-mix(in srgb, var(--accent-hover) 28%, transparent)}.tool-midden{z-index:1;text-align:center;justify-items:center;gap:4px;padding:0 18%;display:grid;position:relative}.tool-fase{font-family:var(--f-head);letter-spacing:-.03em;color:#fff;text-shadow:0 1px 12px color-mix(in srgb, var(--accent-deep) 45%, transparent);margin:0;font-size:clamp(22px,5.4vw,32px);font-weight:650;line-height:1.1}.tool-tel{font-family:var(--f-mono);color:#ffffffeb;text-shadow:0 1px 8px color-mix(in srgb, var(--accent-deep) 40%, transparent);margin:0;font-size:14px}.tool-loopt .tool-tel{font-size:22px;font-weight:600}.tool-balk{display:none}.tool-bedien{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.tool-start{min-width:150px}.tool-ic{place-items:center;display:inline-grid}.tool-ic svg{width:18px;height:18px}.tool-duur select{border:1.5px solid var(--line);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1A1E' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;min-height:52px;font:inherit;color:var(--ink);-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:999px;padding:0 40px 0 18px;font-size:15px;font-weight:600}.tool-geluid{border:1.5px solid var(--line);background:var(--surface);cursor:pointer;border-radius:50%;place-items:center;width:52px;height:52px;display:grid}.tool-geluid svg{width:22px;height:22px}.tool-geluid[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-2);color:var(--accent)}.tool-info{text-align:left;gap:10px;max-width:560px;margin-inline:auto;display:grid}.tool-uitleg{color:var(--muted);margin:0;font-size:15.5px}.tool-uitleg strong{color:var(--ink)}.tool-stappen{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.tool-stappen li{background:var(--soft);border-radius:999px;padding:6px 12px;font-size:14px}.tool-stappen b{font-family:var(--f-mono);color:var(--accent);margin-right:4px;font-weight:600}.tool-veilig{color:var(--label);margin:0;font-size:13.5px}.tool-rustig .tool-bol{transition:none;transform:scale(.8)!important}.tool-rustig .tool-balk{background:#ffffff59;border-radius:3px;height:6px;display:block;position:absolute;bottom:20%;left:24%;right:24%;overflow:hidden}.tool-rustig .tool-balk i{transform-origin:0;background:#fff;position:absolute;inset:0;transform:scaleX(0)}