:root{--desk:#f3f2e6;--board:#9e9d24;--board-edge:#6b6a10;--foil:#f3f0b0;--ok:#2e7d32}@media (prefers-color-scheme:dark){:root:not(.light-only){--desk:#141409;--board:#7c7b18;--board-edge:#4a490a;--foil:#f3f0b0}}.tool{text-align:center;justify-items:center;gap:12px;transition:background-color .2s;display:grid}.tool h1{text-align:left;justify-self:stretch;margin:0}.mode{text-align:left;color:#5a6476;justify-self:stretch;margin:0;font-size:14px}.vial.round{width:240px;height:240px;box-shadow:inset 0 0 0 3px var(--board), inset 0 6px 14px #0000001f;background:radial-gradient(circle at 40% 35%,#fbfbe6,#e7e5a6 70%,#d6d48a);border-radius:50%;margin:8px 0;position:relative}.round .ring{border:2px solid #1b2230;border-radius:50%;width:72px;height:72px;margin:-36px;position:absolute;inset:50%}.round .cross{background:linear-gradient(#1b223033,#1b223033) 50%/1px 100% no-repeat,linear-gradient(#1b223033,#1b223033) 50%/100% 1px no-repeat;border-radius:50%;position:absolute;inset:0}.round .bubble{width:56px;height:56px;transform:translate(calc(var(--dx,0) * 92px), calc(var(--dy,0) * 92px));background:radial-gradient(circle at 35% 30%,#fff,#fffde0 45%,#c9c76a);border-radius:50%;margin:-28px;transition:transform 80ms linear;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #8f8d20,0 3px 8px #0000002e}.vial.tube{place-items:center;width:100%;max-width:320px;height:150px;display:grid;position:relative}.tube .line{border-top:2px dashed #1b223055;height:0;position:absolute;top:50%;left:0;right:0}.tube .glass{width:100%;height:56px;box-shadow:inset 0 0 0 3px var(--board), inset 0 6px 12px #0000001f;background:linear-gradient(#fbfbe6,#e7e5a6 60%,#d6d48a);border-radius:28px;position:relative;overflow:hidden}.tube .ticks{background:linear-gradient(#1b2230,#1b2230) calc(50% - 30px) 0/2px 100% no-repeat,linear-gradient(#1b2230,#1b2230) calc(50% + 30px) 0/2px 100% no-repeat;position:absolute;inset:8px 0}.tube .bubble{background:radial-gradient(circle at 35% 30%,#fff,#fffde0 45%,#c9c76a);border-radius:19px;width:52px;height:38px;margin-left:-26px;transition:left 80ms linear;position:absolute;top:9px;left:50%;box-shadow:0 0 0 1px #8f8d20}.angle{font-family:var(--serif);margin:0;font-weight:700}.angle b{color:var(--board-edge);font-variant-numeric:tabular-nums;font-size:64px;line-height:1}.hint{color:#1b2230;margin:-4px 0 0;font-size:17px;font-weight:600}.actions{justify-items:center;gap:10px;width:100%;display:grid}.tool.level{background:#e8f5e9}.tool.level .angle b,.tool.level .hint{color:var(--ok)}.tool.level .vial.round,.tool.level .tube .glass{box-shadow:inset 0 0 0 3px var(--ok), inset 0 6px 14px #0000001f}@media (prefers-reduced-motion:reduce){.round .bubble,.tube .bubble{transition:none}}.tool.held{outline:3px dashed var(--board);outline-offset:-8px}.tool.held .mode{color:var(--board-edge);font-weight:700}